style: 我的任务列表

src/pages/Center/MyTask/index.js

@@ -2,7 +2,7 @@ import PageContent from '@/components/PageContent';
 import TabsContent from '@/components/TabsContent';
 import { MandateType, OrderType } from '@/pages/TaskManage/constent';
 import { getMandateList } from '@/services/TaskManage';
-import { RightOutlined } from '@ant-design/icons';
+import { CaretRightFilled } from '@ant-design/icons';
 import { connect, useLocation, useNavigate, useParams } from '@umijs/max';
 import { List, Spin } from 'antd';
 import { useEffect, useState } from 'react';
@@ -94,15 +94,15 @@ const MyTask = (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>
     );
   };
@@ -116,13 +116,9 @@ const MyTask = (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>
     );
   };
@@ -137,32 +133,36 @@ const MyTask = (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={false}>
-                <List
-                  className={styles.taskList}
-                  bordered
-                  itemLayout="horizontal"
-                  dataSource={OrderType}
-                  renderItem={makeWorkOrderList}
-                  pagination={false}
-                />
-              </Spin>
+              <div className={styles.container}>
+                <Spin spinning={false}>
+                  <List
+                    className={styles.taskList}
+                    bordered
+                    itemLayout="horizontal"
+                    dataSource={OrderType}
+                    renderItem={makeWorkOrderList}
+                    pagination={false}
+                  />
+                </Spin>
+              </div>
             ),
           },
         ]}

src/pages/Center/MyTask/index.less

@@ -1,26 +1,44 @@
+.container {
+  padding: 0 0.5rem;
+  justify-content: center;
+}
+
 .taskList {
   border: none;
   max-height: calc(100vh - 1.4rem);
-  overflow-y: scroll;
+  overflow-y: auto;
 
   .listItem {
     margin: 0.2rem 0.2rem 0.2rem 0.05rem;
-    height: 1.2rem;
-    box-shadow: 0 0 0.06rem 0.03rem rgba(0, 150, 255, 10%);
-    border-radius: 0.1rem;
+    height: 1.67rem;
+    width: 6.81rem;
+    padding: 0 0.4rem 0 1rem;
+    box-shadow: 0.01rem 0.01rem 0.15rem 0rem 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: 0.3rem;
+      align-items: flex-end;
+      margin-right: 0.8rem;
 
       .countNumber {
-        color: #f5a623;
-        font-size: 0.32rem;
-        font-weight: 500;
-        margin-bottom: 0.06rem;
+        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.less

@@ -38,7 +38,6 @@
       .counterText {
         font-size: 0.22rem;
         color: #9b9797;
-
         text-align: center;
       }
     }