perf: 移动端

src/views/DataPivot.jsx

@@ -383,17 +383,18 @@ export default observer((props) => {
         size={'small'}
         title={'透视选项'}
         extra={
-          <Space>
-            <Text type={'secondary'}>预设:</Text>
+          <Row gutter={3}>
+            <Col flex={'0 0 auto'}><Text type={'secondary'}>预设:</Text></Col>
             {quickOptions.map((ele, elei) => (
+            <Col key={ele.label}>
               <Button key={ele.label} onClick={() => quickOpt(elei)} type={'primary'} ghost size={'small'}>
                 {ele.label}
-              </Button>
+              </Button> </Col>
             ))}
-            <Button key={'reset-quick'} onClick={resetFields} type={'primary'} ghost size={'small'}>
+            <Col><Button key={'reset-quick'} onClick={resetFields} type={'primary'} ghost size={'small'}>
               重置
-            </Button>
-          </Space>
+            </Button></Col>
+          </Row>
         }
       >
         <Row gutter={16}>
@@ -407,7 +408,8 @@ export default observer((props) => {
                 ))}
             </div> */}
           </Col>
-          <Col span={12}>
+          {/* 行:  */}
+          <Col md={12} sm={24} xs={24}>
             <Row gutter={8} align={'middle'}>
               <Col flex={'4em'} align={'end'}>
                 <Text strong>行: </Text>
@@ -467,9 +469,10 @@ export default observer((props) => {
               </Col>
             </Row>
           </Col>
-          <Col span={12} style={{ borderLeft: '1px solid #d9d9d9' }}>
+          {/* 列:  */}
+          <Col md={12} sm={24} xs={24} style={{ borderLeft: '1px solid #d9d9d9' }}>
             <Row gutter={8} align={'middle'}>
-              <Col flex={'6em'} align={'end'}>
+              <Col flex={'4em'} align={'end'}>
                 <Text strong>列: </Text>
               </Col>
               <Col flex={'auto'}>
@@ -538,7 +541,7 @@ export default observer((props) => {
               走势: <span style={{ fontSize: 'smaller' }}>{dataFieldAlias[lineConfig.yField].label}</span>
             </h3>
           </Col>
-          <Col flex={'1 0 50%'} style={{ textAlign: 'right' }} align={'end'}>
+          <Col style={{ textAlign: 'right' }} align={'end'}>
             <DateGroupRadio
               visible={true}
               dataRaw={{ data1: dataBeforeXChange }}

src/views/Home.jsx

@@ -226,26 +226,26 @@ export default observer(() => {
         </Spin>
       </section>
       <section>
-        <Space gutter={16} size={'small'}>
-          <h3>{showDiff === false ? '走势' : '对比'}</h3>
-          <DataFieldRadio value={timeDataField} onChange={handleChangetimeDataField} />
-          <Radio.Group options={datePartOptions} optionType="button" onChange={handleChangeDateType} value={dateField} />
-          {searchValues.yearDiff && (
-            <Button type="link" size={'small'} onClick={() => setShowDiff(!showDiff)}>
+        <Row gutter={16}>
+          <Col flex={'4em'}><h3>{showDiff === false ? '走势' : '对比'}</h3></Col>
+          <Col ><DataFieldRadio value={timeDataField} onChange={handleChangetimeDataField} /></Col>
+          <Col ><Radio.Group options={datePartOptions} optionType="button" onChange={handleChangeDateType} value={dateField} /></Col>
+          <Col >{searchValues.yearDiff && (
+            <Button type="primary" ghost size={'small'} onClick={() => setShowDiff(!showDiff)}>
               {showDiff === false ? '显示对比' : '返回本期走势'}
             </Button>
-          )}
-        </Space>
+          )}</Col>
+        </Row>
         {showDiff === false ? (
           <Spin spinning={timeData.loading}>
             <MixTBWithKPI dataSource={timeData.dataSource} summaryData={timeData.origin?.summaryRows || []} {...lineConfig} />
           </Spin>
         ) : (
           <Spin spinning={timeDiffData.loading}>
-            <Space gutter={16} size={'small'}>
-              <h3>分类对比</h3>
-              <Radio.Group options={allGroupTypes} optionType="button" onChange={handleChangeDiffType} value={diffGroupKey} />
-            </Space>
+            <Row gutter={16}>
+              <Col flex={'6em'}><h3>分类对比</h3></Col>
+              <Col ><Radio.Group options={allGroupTypes} optionType="button" onChange={handleChangeDiffType} value={diffGroupKey} /></Col>
+            </Row>
             <LineWithKPI
               dataSource={timeDiffData.dataSource}
               showKPI={false}
@@ -293,12 +293,10 @@ export default observer(() => {
         </h3>
       </section>
       <section>
-        <Space>
-          <h3>TOP</h3>
-          <div>
-            <DataFieldRadio value={valueKey} onChange={handleChangeValueKey} />
-          </div>
-        </Space>
+        <Row gutter={16}>
+          <Col flex={'4em'}><h3>TOP</h3></Col>
+          <Col ><DataFieldRadio value={valueKey} onChange={handleChangeValueKey} /></Col>
+        </Row>
         <Row gutter={layoutProps3.gutter}>
           {topSeriesSet.map((item) =>
             item.graphVisible ? (

src/views/Sale_KPI.jsx

@@ -183,37 +183,39 @@ const Sale_KPI = () => {
       <Spin spinning={loading}>
         <h2 style={{ marginTop: '.5em' }}>年度业绩组成和走势</h2>
         <Row>
-          <Col className="gutter-row" md={8}>
+          <Col className="gutter-row" md={8} sm={24} xs={24}>
             <Donut
               {...{ angleField: 'SumML', colorField: 'groupsLabel', label1: { style: { color: '#000000' }, type: 'spider', content: '{name}\n{percentage}' }, legend: false, label2: false }}
               title={formValues.DepartmentList?.label}
               dataSource={operator.map((row) => ({ ...row, SumML: row.yearML }))}
             />
           </Col>
-          <Col className="gutter-row" md={16}>
+          <Col className="gutter-row" md={16} sm={24} xs={24}>
             <LineWithKPI dataSource={yearData} showKPI={true} {...lineConfig} {...{ legend: false }} />
           </Col>
           <Col className="gutter-row" md={24}>
-            <Space gutter={16} size={'large'}>
-              <h2>顾问业绩走势</h2>
-              <Select
-                labelInValue
-                mode={'multiple'}
-                style={{ width: '400px' }}
-                placeholder={'选择顾问'}
-                onChange={sale_store.setPickSales}
-                value={sale_store.salesTrade.pickSales}
-                maxTagCount={1}
-                maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
-                allowClear={true}
-              >
-                {operatorObjects.map((ele) => (
-                  <Select.Option key={ele.key} value={ele.value}>
-                    {ele.label}
-                  </Select.Option>
-                ))}
-              </Select>
-            </Space>
+          <Row gutter={16}>
+              <Col flex={'12em'}><h2>顾问业绩走势</h2></Col>
+              <Col flex={'auto'}>
+                <Select
+                  labelInValue
+                  mode={'multiple'}
+                  style={{ width: '100%' }}
+                  placeholder={'选择顾问'}
+                  onChange={sale_store.setPickSales}
+                  value={sale_store.salesTrade.pickSales}
+                  maxTagCount={1}
+                  maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
+                  allowClear={true}
+                >
+                  {operatorObjects.map((ele) => (
+                    <Select.Option key={ele.key} value={ele.value}>
+                      {ele.label}
+                    </Select.Option>
+                  ))}
+                </Select>
+              </Col>
+            </Row>
           </Col>
           <Col className="gutter-row" md={24}>
             <LineWithKPI dataSource={sale_store.salesTrade.pickSalesData} showKPI={true} {...lineConfig} />