style: 我的任务详情style

src/pages/Center/MyTask/Detail/TaskDetail.js

@@ -9,7 +9,7 @@ import {
 } from '@/pages/TaskManage/constent';
 import { getDiagnosticDetail, getMandateDetail } from '@/services/TaskManage';
 import { useLocation } from '@@/exports';
-import { UpOutlined } from '@ant-design/icons';
+import { CaretDownFilled } from '@ant-design/icons';
 import { connect, useRequest } from '@umijs/max';
 import { Col, Collapse, Divider, Row, Table } from 'antd';
 import dayjs from 'dayjs';
@@ -99,7 +99,7 @@ function TaskDetail(props) {
         {
           key: '1',
           label: (
-            <span style={{ color: '#5697e4' }}>
+            <span style={{ color: '#ffffff', marginRight: '0.1rem' }}>
               关联工单({workOrder.length})
             </span>
           ),
@@ -108,18 +108,18 @@ function TaskDetail(props) {
               <div key={record.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}>
                       <>
                         工单类型：
                         {record.RecordType?.label?.replace('工单', '')}
                       </>
                     </Col>
-                    <Col className={styles.fontS24} span={12}>
+                    <Col className={styles.fontS32} span={12}>
                       时间：{record.CreateTime || '-'}
                     </Col>
                   </Row>
                   <Row>
-                    <Col className={styles.fontS24} span={12}>
+                    <Col className={styles.fontS32} span={12}>
                       工单状态：
                       <span style={{ color: '#5697e4' }}>
                         {typeof record.Status === 'number'
@@ -127,7 +127,7 @@ function TaskDetail(props) {
                           : record.Status?.label}
                       </span>
                     </Col>
-                    <Col className={styles.fontS24} span={12}>
+                    <Col className={styles.fontS32} span={12}>
                       工单负责人：
                       {typeof record.Responsible === 'number'
                         ? '-'
@@ -139,7 +139,6 @@ function TaskDetail(props) {
                 <div className={styles.rightButtonContainer}>
                   <div
                     className={styles.rightButton}
-                    style={{ color: '#5697e4' }}
                     onClick={() => {
                       if (typeof record.RecordType === 'number') {
                         return;
@@ -152,7 +151,7 @@ function TaskDetail(props) {
                       );
                     }}
                   >
-                    查看工单
+                    查看
                   </div>
                   {/* <div
                     className={styles.rightButton}
@@ -260,24 +259,24 @@ function TaskDetail(props) {
   return (
     <PageContent closeable={false}>
       <PageTitle returnable>任务详情</PageTitle>
-      <div className={`${styles.cardContainer} card-box`}>
+      <div className={`${styles.cardContainer}`}>
         <div className={styles.normalInfo}>
-          <Row className={styles.infoRow} justify="space-between">
-            <Col className={styles.fontS24}>
+          <Row className={styles.infoRow}>
+            <Col span={14} className={styles.fontS32}>
               时间：{mandateDetail?.CreateTime}
             </Col>
             {/*// @ts-ignore*/}
-            <Col className={styles.fontS24}>
+            <Col className={styles.fontS32}>
               {/*//@ts-ignore*/}
               任务类别：{mandateDetail?.MandateClass?.label}
             </Col>
           </Row>
-          <Row justify="space-between">
-            <Col className={styles.fontS24}>
+          <Row>
+            <Col span={14} className={styles.fontS32}>
               {/*//@ts-ignore*/}
               任务状态：{mandateDetail?.Status?.label}
             </Col>
-            <Col className={styles.fontS24}>
+            <Col className={styles.fontS32}>
               {/*// @ts-ignore*/}
               任务负责人：{mandateDetail?.ResponsiblePeople?.CName}
             </Col>
@@ -285,20 +284,31 @@ function TaskDetail(props) {
         </div>
         <div className={styles.detailInfo}>
           <Row className={styles.infoRow}>
-            <Col className={styles.fontS24} span={4}>
+            <Col
+              className={styles.fontS32}
+              span={4}
+              style={{ fontWeight: 600 }}
+            >
               任务总结
             </Col>
-            <Col className={styles.fontS24}>
+            <Col
+              className={styles.fontS32}
+              style={{ color: 'rgba(97, 93, 93, 1)' }}
+            >
               {mandateDetail?.Summary ||
                 '根据水质相关数据．建议您调节以下参数，水厂运行可达较优状态'}
             </Col>
           </Row>
           {mandateDetail?.img && (
             <Row className={styles.infoRow}>
-              <Col className={styles.fontS24} span={4}>
+              <Col
+                className={styles.fontS32}
+                span={4}
+                style={{ fontWeight: 600 }}
+              >
                 预警图片
               </Col>
-              <Col className={styles.fontS24}>
+              <Col className={styles.fontS32}>
                 <ReactZmage
                   controller={{
                     // 关闭按钮
@@ -322,10 +332,14 @@ function TaskDetail(props) {
 
           {mandateDetail?.Files.length > 0 && (
             <Row className={styles.infoRow}>
-              <Col className={styles.fontS24} span={4}>
+              <Col
+                className={styles.fontS32}
+                span={4}
+                style={{ fontWeight: 600 }}
+              >
                 截图
               </Col>
-              <Col className={styles.fontS24}>
+              <Col className={styles.fontS32}>
                 <ReactZmage
                   controller={{
                     // 关闭按钮
@@ -356,12 +370,17 @@ function TaskDetail(props) {
           )}
 
           <Row>
-            <Col className={styles.fontS24} span={4}>
+            <Col
+              className={styles.fontS32}
+              span={4}
+              style={{ fontWeight: 600 }}
+            >
               任务内容
             </Col>
-            <Col className={styles.fontS24} span={20}>
+            <Col className={styles.fontS32} span={20}>
               {/*{mandateDetail?.Detail}*/}
               <Table
+                className={styles.taskTable}
                 rowKey="key"
                 columns={columnDef}
                 dataSource={mandateTable}
@@ -375,8 +394,8 @@ function TaskDetail(props) {
             className={styles.collapseLabel}
             ghost
             expandIcon={({ isActive }) => (
-              <UpOutlined
-                style={{ color: '#5697e4' }}
+              <CaretDownFilled
+                style={{ color: '#ffffff' }}
                 rotate={isActive ? 180 : 0}
               />
             )}

src/pages/Center/MyTask/Detail/taskDetail.less

@@ -14,7 +14,6 @@
 
   .detailInfo {
     padding: 0.25rem 0.15rem;
-    border-bottom: 0.01rem solid rgba(0, 0, 0, 10%);
   }
 
   .relatedOrder {
@@ -25,7 +24,7 @@
       width: 100%;
 
       .ant-collapse-arrow {
-        font-size: 0.24rem;
+        font-size: 0.32rem;
       }
 
       :global {
@@ -33,29 +32,46 @@
           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;
+        border-radius: 0;
+        background-color: rgba(23, 85, 255, 0.06);
         display: flex;
         align-items: center;
 
@@ -72,38 +88,104 @@
         }
 
         .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 {
-    margin-bottom: 0.25rem;
-    padding: 0.2rem 0.1rem;
-    border-radius: 0.08rem;
-    background-color: #e5effa;
-    display: flex;
-    align-items: center;
-
-    .leftInfo {
-      width: 80%;
+  // .workOrderCard {
+  //   margin-bottom: 0.25rem;
+  //   padding: 0.2rem 0.1rem;
+  //   border-radius: 0.08rem;
+  //   background-color: #e5effa;
+  //   display: flex;
+  //   align-items: center;
+
+  //   .leftInfo {
+  //     width: 80%;
+  //   }
+
+  //   .rightButton {
+  //     flex: auto;
+  //     color: #5697e4;
+  //     font-size: 0.24rem;
+  //     text-align: center;
+  //     display: flex;
+  //     justify-content: center;
+  //     align-items: center;
+  //   }
+  // }
+}
+
+.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;
+    }
+  }
+}
 
-    .rightButton {
-      flex: auto;
-      color: #5697e4;
-      font-size: 0.24rem;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+.taskTable {
+  :global {
+    .ant-table-thead {
+      background: rgba(155, 151, 151, 0.2);
+    }
+    .ant-table-thead > tr > th {
+      color: rgba(59, 59, 59, 1);
+      font-weight: 600;
     }
   }
 }
 
+.fontS32 {
+  font-size: 0.32rem;
+}
+
 .fontS28 {
   font-size: 0.28rem;
 }

src/pages/TaskManage/Detail/TaskDetail/TaskDetail.tsx

@@ -320,7 +320,7 @@ function TaskDetail(props: IPropsType) {
     <PageContent closeable={false}>
       <PageTitle returnable>任务详情</PageTitle>
       <div className=" content-title">
-        <div className={`${styles.cardContainer} card-box`}>
+        <div className={`${styles.cardContainer}`}>
           <div className={styles.normalInfo}>
             <Row className={styles.infoRow}>
               <Col span={14} className={styles.fontS32}>