fix: 仪表盘手机适应优化

src/pages/Workbench/Dashboard/index.jsx

@@ -147,8 +147,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '7day')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -159,8 +158,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '15day')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -171,8 +169,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '30day')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -183,8 +180,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '3month')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -195,8 +191,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '6month')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -207,8 +202,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, 'reminder')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -277,14 +271,8 @@ const Dashboard = () => {
         </span>
       </div>
       <div className="mt-4">
-        <Row gutter={24}>
-          <Col
-            className="gutter-row"
-            sm={{ span: 24 }}
-            md={{ span: 24 }}
-            lg={{ span: 6 }}
-            xl={{ span: 6 }}
-          >
+        <Row gutter={[8, 8]}>
+          <Col xs={24} sm={24} md={24} lg={6} xl={6}>
             <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
               {state.loading ? (
                 <Skeleton active avatar />
@@ -304,8 +292,7 @@ const Dashboard = () => {
                           state.clientChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.clientChainRatio.percentage}
                       </span>
                     </div>
@@ -320,21 +307,14 @@ const Dashboard = () => {
               )}
             </div>
           </Col>
-          <Col
-            className="gutter-row"
-            sm={{ span: 24 }}
-            md={{ span: 24 }}
-            lg={{ span: 6 }}
-            xl={{ span: 6 }}
-          >
+          <Col xs={24} sm={24} md={24} lg={6} xl={6}>
             <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
               {state.loading ? (
                 <Skeleton active avatar />
               ) : (
                 <Row
                   className="cursor-pointer"
-                  onClick={() => handleRatioCard(cardTypeMap.COMPANY)}
-                >
+                  onClick={() => handleRatioCard(cardTypeMap.COMPANY)}>
                   <Col span={6}>
                     <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <City size="26" fill="#fff" />
@@ -349,8 +329,7 @@ const Dashboard = () => {
                           state.customerChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.customerChainRatio.percentage}
                       </span>
                     </div>
@@ -366,21 +345,14 @@ const Dashboard = () => {
               )}
             </div>
           </Col>
-          <Col
-            className="gutter-row"
-            sm={{ span: 24 }}
-            md={{ span: 24 }}
-            lg={{ span: 6 }}
-            xl={{ span: 6 }}
-          >
+          <Col xs={24} sm={24} md={24} lg={6} xl={6}>
             <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
               {state.loading ? (
                 <Skeleton active avatar />
               ) : (
                 <Row
                   className="cursor-pointer"
-                  onClick={() => handleRatioCard(cardTypeMap.BUSINESS)}
-                >
+                  onClick={() => handleRatioCard(cardTypeMap.BUSINESS)}>
                   <Col span={6}>
                     <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Finance size="26" fill="#fff" />
@@ -395,8 +367,7 @@ const Dashboard = () => {
                           state.businessChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.businessChainRatio.percentage}
                       </span>
                     </div>
@@ -412,21 +383,14 @@ const Dashboard = () => {
               )}
             </div>
           </Col>
-          <Col
-            className="gutter-row"
-            sm={{ span: 24 }}
-            md={{ span: 24 }}
-            lg={{ span: 6 }}
-            xl={{ span: 6 }}
-          >
+          <Col xs={24} sm={24} md={24} lg={6} xl={6}>
             <div className="p-4 bg-white border rounded-2px border-hex-f0f0f0 shadow-card">
               {state.loading ? (
                 <Skeleton active avatar />
               ) : (
                 <Row
                   onClick={() => handleRatioCard(cardTypeMap.SERVICE)}
-                  className="cursor-pointer"
-                >
+                  className="cursor-pointer">
                   <Col span={6}>
                     <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Comment size="26" fill="#fff" />
@@ -441,8 +405,7 @@ const Dashboard = () => {
                           state.serviceLogChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.serviceLogChainRatio.percentage}
                       </span>
                     </div>
@@ -461,14 +424,8 @@ const Dashboard = () => {
         </Row>
       </div>
       <div className="mt-4">
-        <Row gutter={24}>
-          <Col
-            className="gutter-row"
-            sm={{ span: 24 }}
-            md={{ span: 24 }}
-            lg={{ span: 16 }}
-            xl={{ span: 16 }}
-          >
+        <Row gutter={[8, 8]}>
+          <Col xs={24} sm={24} md={24} lg={12} xl={12}>
             <BusinessChar
               loading={state.loading}
               data={state.businessChar}
@@ -476,20 +433,13 @@ const Dashboard = () => {
             />
           </Col>
 
-          <Col
-            className="gutter-row"
-            sm={{ span: 24 }}
-            md={{ span: 24 }}
-            lg={{ span: 8 }}
-            xl={{ span: 8 }}
-          >
+          <Col xs={24} sm={24} md={24} lg={12} xl={12}>
             <Card
               headStyle={{ padding: '0 12px' }}
               title="数据汇总"
               className="shadow-card"
               bodyStyle={{ padding: state.loading ? '24px' : 0 }}
-              loading={state.loading}
-            >
+              loading={state.loading}>
               <ul>
                 <li className="px-12px py-16px border-b-1">
                   新增客户<b className="px-1">{state.aggregation.clientCount}</b>个，服务
@@ -511,23 +461,11 @@ const Dashboard = () => {
         </Row>
       </div>
       <div className="mt-4">
-        <Row gutter={24}>
-          <Col
-            className="gutter-row"
-            sm={{ span: 24 }}
-            md={{ span: 24 }}
-            lg={{ span: 12 }}
-            xl={{ span: 12 }}
-          >
+        <Row gutter={[8, 8]}>
+          <Col xs={24} sm={24} md={24} lg={12} xl={12}>
             <LeaderBoard dataList={state.leaderboard} loading={state.loading} />
           </Col>
-          <Col
-            className="gutter-row"
-            sm={{ span: 24 }}
-            md={{ span: 24 }}
-            lg={{ span: 12 }}
-            xl={{ span: 12 }}
-          >
+          <Col xs={24} sm={24} md={24} lg={12} xl={12}>
             <SoftLeaderboard
               productLeaderBoard={state.productLeaderBoard}
               loading={state.loading}