style: 我的任务-任务列表样式

src/pages/Center/MyTask/List/TaskList.js

@@ -10,9 +10,9 @@ import {
   OrderType,
 } from '@/pages/TaskManage/constent';
 import { getMandateList } from '@/services/TaskManage';
-import { DownOutlined } from '@ant-design/icons';
+import { CaretDownFilled } from '@ant-design/icons';
 import { connect, useLocation, useNavigate, useRequest } from '@umijs/max';
-import { Col, Collapse, Divider, List, Row } from 'antd';
+import { Col, Collapse, List, Row } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import styles from './taskList.less';
@@ -169,60 +169,62 @@ const MyTaskList = (props) => {
       {
         key: '1',
         label: (
-          <span style={{ color: '#5697e4' }}>关联工单({workOrder.length})</span>
+          <span style={{ color: '#ffffff', marginRight: '0.1rem' }}>
+            关联工单({workOrder.length})
+          </span>
         ),
         children: workOrder.map((order) => {
           return (
             <div key={order.Id} className={styles.workOrderCard}>
               <div className={styles.leftInfo}>
                 <Row style={{ marginBottom: '0.15rem' }}>
-                  <Col className={styles.fontS24} span={12}>
+                  <Col className={styles.fontS32} span={12}>
                     工单类型：{order.RecordType?.label || '-'}
                   </Col>
-                  <Col className={styles.fontS24} span={12}>
+                  <Col className={styles.fontS32} span={12}>
                     时间：{order.CreateTime}
                   </Col>
                 </Row>
                 <Row>
-                  <Col className={styles.fontS24} span={12}>
+                  <Col className={styles.fontS32} span={12}>
                     工单状态：
                     <span style={{ color: '#5697e4' }}>
                       {order.Status?.label}
                     </span>
                   </Col>
-                  <Col className={styles.fontS24} span={12}>
+                  <Col className={styles.fontS32} span={12}>
                     工单负责人：{order.Responsible?.CName}
                   </Col>
                 </Row>
               </div>
-              <Divider type="vertical" style={{ height: '0.4rem' }} />
               <div className={styles.rightButtonContainer}>
                 <div
                   className={styles.rightButton}
-                  style={{ color: '#5697e4' }}
-                  onClick={() => {
-                    goMyWorkOrder(
-                      order.Id,
-                      order.RecordType?.value,
-                      item.MandateClass,
-                    );
+                  style={{
+                    marginBottom: `${
+                      order.Status?.value === 0 ? '0.15rem' : '0'
+                    }`,
                   }}
-                >
-                  查看工单
-                </div>
-                {/* <div
-                  className={styles.rightButton}
-                  style={{ color: '#5697e4' }}
                   onClick={() => {
-                    goMyWorkOrder(
+                    goTaskOrder(
                       order.Id,
                       order.RecordType?.value,
                       item.MandateClass,
                     );
                   }}
                 >
-                  关闭工单
-                </div> */}
+                  查看
+                </div>
+                {order.Status?.value === 0 && (
+                  <div
+                    className={styles.rightButton}
+                    onClick={() => {
+                      withdrawOrder(order);
+                    }}
+                  >
+                    关闭
+                  </div>
+                )}
               </div>
             </div>
           );
@@ -232,59 +234,79 @@ const MyTaskList = (props) => {
 
     return (
       <List.Item style={{ borderBottom: '0' }}>
-        <div className={`${styles.cardContainer} card-box`}>
-          <Row justify="space-between" style={{ marginBottom: '0.2rem' }}>
-            <Col className={styles.fontS24}>时间:{formatItem.CreateTime}</Col>
-            <Col className={styles.fontS24}>
-              任务类别:{formatItem.MandateClass?.label}
-            </Col>
-            <Col className={styles.fontS24}>
-              任务负责人:{formatItem.ResponsiblePeople?.CName || '-'}
-            </Col>
-          </Row>
-          <Row
-            justify="space-between"
+        <div className={`${styles.cardContainer} `}>
+          <span
             style={{
-              paddingBottom: '0.1rem',
-              borderBottom: '0.01rem solid #D5D5D5',
+              width: '0.2rem',
+              height: '2.05rem',
+              position: 'absolute',
+              background: 'rgba(23, 85, 255, 0.20)',
             }}
-          >
-            <Col className={styles.fontS24}>
-              任务状态：{formatItem.Status?.label || '-'}
-            </Col>
-            <Col>
-              <div
-                className={styles.fontS24}
-                style={{
-                  backgroundColor: '#f5a623',
-                  color: 'white',
-                  width: '1.5rem',
-                  height: '0.5rem',
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-                onClick={() => {
-                  goMyTaskDetail(item);
-                }}
-              >
-                任务详情
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Collapse
-              className={styles.collapseLabel}
-              ghost
-              expandIcon={({ isActive }) => (
-                <DownOutlined
-                  style={{ color: '#5697e4' }}
-                  rotate={isActive ? 180 : 0}
-                />
-              )}
-              items={collapseData}
-            />
-          </Row>
+          />
+          <div className={styles.cardInfo}>
+            <Row
+              justify="start"
+              style={{
+                padding: '0.2rem 0.2rem 0 0.4rem',
+                maxHeight: '0.7rem',
+              }}
+            >
+              <Col span={12} className={styles.fontS32}>
+                时间: {formatItem.CreateTime}
+              </Col>
+              <Col className={styles.fontS32}>
+                任务类别: {formatItem.MandateClass?.label}
+              </Col>
+            </Row>
+            <Row
+              justify="start"
+              style={{
+                padding: '0.2rem 0.2rem 0 0.4rem',
+                maxHeight: '0.75rem',
+              }}
+            >
+              <Col span={12} className={styles.fontS32}>
+                任务负责人: {formatItem.ResponsiblePeople?.CName || '-'}
+              </Col>
+              <Col span={8} className={styles.fontS32}>
+                任务状态: {formatItem.Status?.label || '-'}
+              </Col>
+              <Col>
+                <div
+                  className={styles.fontS32}
+                  style={{
+                    backgroundColor: '#f5a623',
+                    color: 'white',
+                    width: '2rem',
+                    letterSpacing: '0.05rem',
+                    height: '0.55rem',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    borderRadius: '0.5rem',
+                  }}
+                  onClick={() => {
+                    goTaskDetail(item);
+                  }}
+                >
+                  任务详情
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <Collapse
+                className={styles.collapseLabel}
+                ghost
+                expandIcon={({ isActive }) => (
+                  <CaretDownFilled
+                    style={{ color: '#ffffff' }}
+                    rotate={isActive ? 180 : 0}
+                  />
+                )}
+                items={collapseData}
+              />
+            </Row>
+          </div>
         </div>
       </List.Item>
     );

src/pages/Center/MyTask/List/taskList.less

@@ -1,11 +1,19 @@
 .cardContainer {
-  width: 100%;
-  padding: 0.2rem 0.2rem 0.1rem 0.2rem;
-  margin-left: 0.05rem;
+  display: flex;
+  flex-grow: 1;
+  margin-left: 0.1rem;
+  margin-right: 0.2rem;
   background-color: white;
+  background: #ffffff;
+  box-shadow: 0rem 0rem 0.2rem 0 rgba(0, 0, 0, 0.15);
+
+  .cardInfo {
+    width: 100%;
+  }
 
   .collapseLabel {
     width: 100%;
+
     .ant-collapse-arrow {
       font-size: 0.24rem;
     }
@@ -13,30 +21,46 @@
       .ant-collapse-item {
         margin-bottom: 0;
       }
+
+      .ant-collapse-item:last-child > .ant-collapse-header {
+        border-radius: 0;
+      }
+
       .ant-collapse-header {
+        height: 0.5rem;
+        background: url('@/assets/TaskManage/viewOrder@2x.png') no-repeat center;
+        background-size: 25% 100%;
         justify-content: center;
         flex-direction: row-reverse;
         align-items: center;
         margin-top: 0.1rem;
+        border-bottom: 0.02rem solid #1755ff;
 
         .ant-collapse-header-text {
-          font-size: 0.24rem;
+          font-size: 0.32rem;
           flex: unset;
           margin-inline-end: unset;
         }
         .ant-collapse-arrow {
-          font-size: 0.24rem;
+          font-size: 0.32rem;
         }
       }
+
+      .ant-collapse-content-box {
+        padding: 0;
+      }
+
+      .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+        padding-block: 0;
+      }
     }
 
     .workOrderCard {
-      margin-bottom: 0.2rem;
-      padding: 0.2rem 0.1rem;
-      border-radius: 0.08rem;
-      background-color: #e5effa;
+      margin-bottom: 0.1rem;
+      padding: 0.2rem;
       display: flex;
       align-items: center;
+      background-color: rgba(23, 85, 255, 0.06);
 
       .leftInfo {
         width: 80%;
@@ -51,11 +75,19 @@
       }
 
       .rightButton {
-        color: #5697e4;
-        font-size: 0.24rem;
+        background-color: #fff;
+        border-radius: 0.5rem;
+        width: 1.5rem;
+        letter-spacing: 0.05rem;
+        color: rgba(23, 85, 255, 1);
+        font-size: 0.32rem;
         text-align: center;
       }
     }
+
+    .workOrderCard:last-child {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -70,6 +102,56 @@
   }
 }
 
+.handleModal {
+  :global {
+    .ant-modal-close {
+      width: 0.36rem;
+      height: 0.36rem;
+    }
+    .ant-modal-close-x {
+      font-size: 0.36rem;
+      line-height: 0.36rem;
+    }
+    .ant-modal-title {
+      font-size: 0.28rem;
+    }
+    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+      height: 0.6rem;
+      padding-top: 0.15rem;
+    }
+    .ant-form-item .ant-form-item-label > label {
+      font-size: 0.28rem;
+      height: 0.6rem;
+    }
+    .ant-input {
+      font-size: 0.28rem;
+      height: 0.6rem;
+    }
+    .ant-btn {
+      font-size: 0.28rem;
+      height: 0.6rem;
+      width: 1.2rem;
+    }
+    .ant-checkbox {
+      .ant-checkbox-inner {
+        width: 0.28rem;
+        height: 0.28rem;
+      }
+      .ant-checkbox-inner:after {
+        height: 0.16rem;
+        width: 0.09rem;
+      }
+    }
+    .ant-picker {
+      height: 0.6rem;
+    }
+  }
+}
+
+.fontS32 {
+  font-size: 0.32rem;
+}
+
 .fontS28 {
   font-size: 0.28rem;
 }

src/pages/TaskManage/Detail/TaskList/TaskList.tsx

@@ -244,7 +244,6 @@ const TaskList: React.FC<IPropsType> = (props) => {
                   </Col>
                 </Row>
               </div>
-
               <div className={styles.rightButtonContainer}>
                 <div
                   className={styles.rightButton}

src/pages/TaskManage/Detail/TaskList/taskList.less

@@ -84,6 +84,7 @@
         text-align: center;
       }
     }
+
     .workOrderCard:last-child {
       margin-bottom: 0;
     }