style

src/components/PageContent/index.less

@@ -9,8 +9,7 @@
     top: 0.26rem;
     right: 0.2rem;
     font-size: 0.34rem;
-
-    color: #4a4a4a;
+    color: #bcbaba;
     cursor: pointer;
   }
   .return {
@@ -18,7 +17,7 @@
     top: 26px;
     left: 20px;
     font-size: 34px;
-    color: #4a4a4a;
+    color: #bcbaba;
     cursor: pointer;
   }
 }

src/pages/TaskManage/index.less

@@ -1,26 +1,45 @@
+.container {
+  padding: 0 0.5rem;
+  justify-content: center;
+}
+
 .taskList {
   border: none;
   max-height: calc(100vh - 140px);
   overflow-y: auto;
 
   .listItem {
-    margin: 20px 20px 20px 5px;
-    height: 120px;
-    box-shadow: 0 0 6px 3px rgba(0, 150, 255, 10%);
-    border-radius: 10px;
+    margin: 0.2rem 0.2rem 0.2rem 5px;
+    height: 1.67rem;
+    width: 6.81rem;
+    padding: 0 0.4rem 0 1rem;
+    box-shadow: 1px 1px 15px 0px rgba(0, 0, 0, 0.1);
+    border-top-left-radius: 0.3rem;
+    border-bottom-right-radius: 0.3rem;
     background-color: #ffffff;
 
+    .itemLabel {
+      font-size: 0.28rem;
+      color: #615d5d;
+    }
+
     .itemCount {
       display: flex;
       flex-direction: column;
-      align-items: center;
-      margin-right: 30px;
+      align-items: flex-end;
+      margin-right: 0.8rem;
 
       .countNumber {
-        color: #f5a623;
-        font-size: 32px;
-        font-weight: 500;
-        margin-bottom: 6px;
+        color: #3b3b3b;
+        font-size: 0.8rem;
+        line-height: 0.8rem;
+        font-weight: 600;
+      }
+      .counterText {
+        font-size: 0.22rem;
+        color: #9b9797;
+
+        text-align: center;
       }
     }
   }

src/pages/TaskManage/index.tsx

@@ -2,7 +2,7 @@ import PageContent from '@/components/PageContent';
 import TabsContent from '@/components/TabsContent';
 import styles from '@/pages/TaskManage/index.less';
 import { getMandateList } from '@/services/TaskManage';
-import { RightOutlined } from '@ant-design/icons';
+import { CaretRightFilled } from '@ant-design/icons';
 import { connect, useParams } from '@umijs/max';
 import { List, Spin } from 'antd';
 import { BaseOptionType } from 'rc-select/es/Select';
@@ -81,15 +81,15 @@ const TaskManage = (props) => {
         }}
       >
         <List.Item.Meta
-          title={<span className={styles.fontS28}>{item.label}</span>}
+          title={<span className={styles.itemLabel}>{item.label}</span>}
         />
 
         <div className={styles.itemCount}>
           <div className={styles.countNumber}>{mandateCount[index]}</div>
-          <div className={styles.fontS22}>任务数量</div>
+          <div className={styles.counterText}>任务数量</div>
         </div>
 
-        <RightOutlined />
+        <CaretRightFilled style={{ fontSize: '0.3rem', color: '#BCBABA' }} />
       </List.Item>
     );
   };
@@ -103,13 +103,9 @@ const TaskManage = (props) => {
         }}
       >
         <List.Item.Meta
-          title={<span className={styles.fontS28}>{item.label}</span>}
+          title={<span className={styles.itemLabel}>{item.label}</span>}
         />
-        {/* <div className={styles.itemCount}>
-          <div className={styles.countNumber}>{mandateCount[index]}</div>
-          <div className={styles.fontS22}>任务数量</div>
-        </div> */}
-        <RightOutlined />
+        <CaretRightFilled style={{ fontSize: '0.3rem', color: '#BCBABA' }} />
       </List.Item>
     );
   };
@@ -129,32 +125,36 @@ const TaskManage = (props) => {
             label: `任务管理`,
             key: '1',
             children: (
-              <Spin spinning={loading}>
-                <List
-                  className={styles.taskList}
-                  bordered
-                  itemLayout="horizontal"
-                  dataSource={MandateType}
-                  renderItem={makeTaskList}
-                  pagination={false}
-                />
-              </Spin>
+              <div className={styles.container}>
+                <Spin spinning={loading}>
+                  <List
+                    className={styles.taskList}
+                    bordered
+                    itemLayout="horizontal"
+                    dataSource={MandateType}
+                    renderItem={makeTaskList}
+                    pagination={false}
+                  />
+                </Spin>
+              </div>
             ),
           },
           {
             label: `工单管理`,
             key: '2',
             children: (
-              <Spin spinning={loading}>
-                <List
-                  className={styles.taskList}
-                  bordered
-                  itemLayout="horizontal"
-                  dataSource={OrderType}
-                  renderItem={makeWorkOrderList}
-                  pagination={false}
-                />
-              </Spin>
+              <div className={styles.container}>
+                <Spin spinning={loading}>
+                  <List
+                    className={styles.taskList}
+                    bordered
+                    itemLayout="horizontal"
+                    dataSource={OrderType}
+                    renderItem={makeWorkOrderList}
+                    pagination={false}
+                  />
+                </Spin>
+              </div>
             ),
           },
         ]}