style: 任务弹窗style

src/pages/TaskManage/Popup/WorkOrderModal.js

@@ -5,7 +5,7 @@ import {
   getRepairRecordList,
   getWorkOrderFlow,
 } from '@/services/TaskManage';
-import { CloseOutlined } from '@ant-design/icons';
+import { CloseCircleFilled } from '@ant-design/icons';
 import { connect, useLocation, useParams, useRequest } from '@umijs/max';
 import { Button, Col, Divider, Row, Steps } from 'antd';
 import dayjs from 'dayjs';
@@ -247,62 +247,55 @@ const WorkOrderModal = (props) => {
       <Button
         className={styles.closeModalBtn}
         type="text"
-        icon={<CloseOutlined style={{ fontSize: '0.24rem' }} />}
+        icon={
+          <CloseCircleFilled
+            style={{ fontSize: '0.32rem', color: 'rgba(155, 151, 151, 1)' }}
+          />
+        }
         onClick={closePage}
       />
-      <Divider style={{ margin: '0 0 0.3rem 0' }} />
-      <div
-        style={{
-          marginTop: '0.2rem',
-          borderRadius: '0.08rem',
-          boxShadow: '0.02rem 0 0.08rem 0 rgba(0, 0, 0, 30%)',
-        }}
-      >
+      <Divider style={{ margin: '0 0 0.1rem 0' }} />
+      <div>
         <div>
-          <SubTitle
-            title="工单信息"
-            titleFontSize={24}
-            showStatus={orderInfo?.OrderStatus?.value === 2}
-            radius
-          />
+          <SubTitle title="工单信息" radius />
           <div className={styles.basicalInfo}>
-            <Row>
-              <Col span={16} className={styles.fontS28}>
+            <Row style={{ marginTop: '0' }}>
+              <Col span={16} className={styles.fontS32}>
                 工单类型：
                 {OrderType.find((item) => item.value === order_type)?.label ||
                   '-'}
               </Col>
-              <Col span={8} className={styles.fontS28}>
+              <Col span={8} className={styles.fontS32}>
                 {/*// @ts-ignore*/}
                 工单负责人：{orderInfo?.Repairman?.CName || '-'}
               </Col>
             </Row>
             <Row>
-              <Col span={16} className={styles.fontS28}>
+              <Col span={16} className={styles.fontS32}>
                 工单状态：{orderInfo?.OrderStatus?.label}
               </Col>
-              <Col span={8} className={styles.fontS28}>
+              <Col span={8} className={styles.fontS32}>
                 派单人员：{orderInfo?.DispatchMan?.CName}
               </Col>
             </Row>
             <Row>
-              <Col className={styles.fontS28}>
+              <Col className={styles.fontS32}>
                 派单时间：{orderInfo?.CreateTime || '-'}
               </Col>
             </Row>
             <Row>
-              <Col className={styles.fontS28}>
+              <Col className={styles.fontS32}>
                 计划完成时间：{orderInfo?.PlanTime || '-'}
               </Col>
             </Row>
             <Row>
-              <Col className={styles.fontS28}>
+              <Col className={styles.fontS32}>
                 实际完成时间：{orderInfo?.RepairTime || '-'}
               </Col>
             </Row>
             {orderInfo?.MandateImages?.length > 0 && (
               <Row>
-                <Col className={styles.fontS28} span={4}>
+                <Col className={styles.fontS32} span={4}>
                   任务图片：
                 </Col>
                 {renderImg()}
@@ -314,25 +307,25 @@ const WorkOrderModal = (props) => {
           <div>
             <SubTitle title="操作内容" titleFontSize={24} />
             <div className={styles.additionInfo}>
-              <Row justify={'space-around'}>
-                <Col className={styles.fontS28} span={8}>
+              <Row justify={'space-around'} style={{ marginTop: '0' }}>
+                <Col className={styles.fontS32} span={8}>
                   是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
                 </Col>
-                <Col className={styles.fontS28} span={8}>
+                <Col className={styles.fontS32} span={8}>
                   是否拆检：{orderInfo?.Check === 1 ? '是' : '否'}
                 </Col>
-                <Col className={styles.fontS28} span={8}>
+                <Col className={styles.fontS32} span={8}>
                   是否清洁：{orderInfo?.Clean === 1 ? '是' : '否'}
                 </Col>
               </Row>
               <Row justify={'space-around'}>
-                <Col className={styles.fontS28} span={8}>
+                <Col className={styles.fontS32} span={8}>
                   是否紧固：{orderInfo?.Fasten === 1 ? '是' : '否'}
                 </Col>
-                <Col className={styles.fontS28} span={8}>
+                <Col className={styles.fontS32} span={8}>
                   是否除锈：{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
                 </Col>
-                <Col className={styles.fontS28} span={8}>
+                <Col className={styles.fontS32} span={8}>
                   是否防腐：{orderInfo?.RustRemoval === 1 ? '是' : '否'}
                 </Col>
               </Row>
@@ -342,10 +335,15 @@ const WorkOrderModal = (props) => {
         {order_type === 5 && (
           <div>
             <SubTitle title="加药详情" titleFontSize={24} />
-            <div style={{ padding: '0.15rem' }}>
+            <div
+              style={{
+                padding: '0.15rem',
+                background: 'rgba(23, 85, 255, 0.06)',
+              }}
+            >
               <Row>
-                <Col className={styles.fontS28}>加药详情：</Col>
-                <Col className={styles.fontS28} span={18}>
+                <Col className={styles.fontS32}>加药详情：</Col>
+                <Col className={styles.fontS32} span={18}>
                   {`药剂名称：${additionalInfo?.name || '-'} 加药量：${
                     additionalInfo?.dosage || '-'
                   }升 浓度：${additionalInfo?.concentration || '-'}`}
@@ -357,7 +355,21 @@ const WorkOrderModal = (props) => {
         {stepInfo.length > 0 && (
           <div>
             <SubTitle title="工单流程" titleFontSize={24} />
-            <div style={{ padding: '0.15rem 0.2rem' }}>
+            <Divider
+              type="horizontal"
+              style={{
+                height: '0.02rem',
+                margin: 0,
+                padding: 0,
+                color: 'rgba(23, 85, 255, 0.50)',
+                background: 'rgba(23, 85, 255, 0.50)',
+              }}
+            />
+            <div
+              style={{
+                padding: '0.15rem 0.2rem',
+              }}
+            >
               <Steps
                 direction="vertical"
                 progressDot
@@ -365,10 +377,10 @@ const WorkOrderModal = (props) => {
                 items={stepInfo?.map((item) => {
                   return {
                     title: (
-                      <span className={styles.fontS28}>{item.content}</span>
+                      <span className={styles.fontS32}>{item.content}</span>
                     ),
                     description: (
-                      <span className={styles.fontS20}>{item.time}</span>
+                      <span className={styles.fontS28}>{item.time}</span>
                     ),
                   };
                 })}

src/pages/TaskManage/Popup/WorkOrderModal.less

@@ -4,8 +4,8 @@
 
 .closeModalBtn {
   position: absolute;
-  top: 0.3rem;
-  right: 0.3rem;
+  top: 0.25rem;
+  right: 0.35rem;
 }
 
 .modalTitle {
@@ -15,7 +15,8 @@
 }
 
 .basicalInfo {
-  padding: 0 0.15rem 0.15rem 0.15rem;
+  background: rgba(23, 85, 255, 0.06);
+  padding: 0.15rem;
 }
 
 .basicalInfo > * {
@@ -23,7 +24,8 @@
 }
 
 .additionInfo {
-  padding: 0 0.15rem 0.15rem 0.15rem;
+  background: rgba(23, 85, 255, 0.06);
+  padding: 0.15rem;
 }
 
 .additionInfo > * {
@@ -44,3 +46,7 @@
 .fontS30 {
   font-size: 0.3rem;
 }
+
+.fontS32 {
+  font-size: 0.32rem;
+}

src/pages/TaskManage/Popup/index.js

@@ -4,7 +4,7 @@ import {
   setTaskAutomation,
 } from '@/services/TaskManage';
 import { UnityAction } from '@/utils/utils';
-import { CloseOutlined } from '@ant-design/icons';
+import { CloseCircleFilled } from '@ant-design/icons';
 import { connect, useLocation, useParams, useRequest } from '@umijs/max';
 import { Button, Divider, Tabs } from 'antd';
 import { useEffect, useState } from 'react';
@@ -121,7 +121,11 @@ const TaskModal = (props) => {
       <Button
         className={styles.closeModalBtn}
         type="text"
-        icon={<CloseOutlined style={{ fontSize: '0.28rem' }} />}
+        icon={
+          <CloseCircleFilled
+            style={{ fontSize: '0.32rem', color: 'rgba(155, 151, 151, 1)' }}
+          />
+        }
         onClick={closePage}
       />
 

src/pages/TaskManage/Popup/index.less

@@ -1,4 +1,7 @@
 .modalContainer {
+  * {
+    font-family: Source Han Sans, Source Han Sans;
+  }
   padding: 0.3rem;
   :global {
     .ant-tabs > .ant-tabs-nav,

src/pages/TaskManage/components/MandateDetail.js

@@ -199,35 +199,40 @@ const MandateDetail = (props) => {
   return (
     <div>
       <div className={styles.mandate}>
-        <Row>
-          <Col className={styles.fontS28}>任务内容：</Col>
-          <Col className={styles.fontS28} span={21}>
+        <Row style={{ padding: '0 0.2rem' }}>
+          <Col className={styles.fontS32} style={{ fontWeight: '600' }}>
+            任务内容：
+          </Col>
+          <Col className={styles.fontS32} span={21}>
             <Table
+              className={styles.taskTable}
               columns={columns}
               dataSource={mandateChild}
               pagination={false}
             />
           </Col>
         </Row>
-        <Row>
-          <Col className={styles.fontS28} span={14}>
-            任务时间：{mandateDetail?.CreateTime || '-'}
-          </Col>
-          <Col className={styles.fontS28}>
-            任务类别：{mandateDetail?.MandateClass?.label || '-'}
-          </Col>
-        </Row>
-        <Row>
-          <Col className={styles.fontS28} span={14}>
-            任务状态：{' '}
-            <span style={{ color: ' #5697e4' }}>
-              {mandateDetail?.Status.label}
-            </span>
-          </Col>
-          <Col className={styles.fontS28}>
-            任务负责人：{mandateDetail?.ResponsiblePeople?.CName || '-'}
-          </Col>
-        </Row>
+        <div className={styles.taskOtherInfo}>
+          <Row>
+            <Col className={styles.fontS32} span={14}>
+              任务时间：{mandateDetail?.CreateTime || '-'}
+            </Col>
+            <Col className={styles.fontS32}>
+              任务类别：{mandateDetail?.MandateClass?.label || '-'}
+            </Col>
+          </Row>
+          <Row style={{ marginTop: '0.2rem' }}>
+            <Col className={styles.fontS32} span={14}>
+              任务状态：{' '}
+              <span style={{ color: ' #5697e4' }}>
+                {mandateDetail?.Status.label}
+              </span>
+            </Col>
+            <Col className={styles.fontS32}>
+              任务负责人：{mandateDetail?.ResponsiblePeople?.CName || '-'}
+            </Col>
+          </Row>
+        </div>
       </div>
       {handledWorkOrder?.length > 0 && <Divider />}
       {handledWorkOrder?.map((item) => {
@@ -235,19 +240,19 @@ const MandateDetail = (props) => {
           <div key={item.Id} className={styles.relatedOrder}>
             <div className={styles.leftInfo}>
               <Row>
-                <Col span={12} className={styles.fontS28}>
+                <Col span={12} className={styles.fontS32}>
                   工单类型：{item?.RecordType?.label}
                 </Col>
-                <Col className={styles.fontS28}>时间：{item?.CreateTime}</Col>
+                <Col className={styles.fontS32}>时间：{item?.CreateTime}</Col>
               </Row>
               <Row>
-                <Col span={12} className={styles.fontS28}>
+                <Col span={12} className={styles.fontS32}>
                   工单状态：
                   <span style={{ color: ' #5697e4' }}>
                     {item?.Status?.label}
                   </span>
                 </Col>
-                <Col className={styles.fontS28}>
+                <Col className={styles.fontS32}>
                   工单负责人：{item?.Responsible?.CName}
                 </Col>
               </Row>

src/pages/TaskManage/components/MandateDetail.less

@@ -10,6 +10,12 @@
 
 .mandate > * {
   margin-top: 0.15rem;
+  font-family: Source Han Sans, Source Han Sans;
+}
+
+.taskOtherInfo {
+  padding: 0.2rem;
+  background-color: #f2ede4;
 }
 
 .modalTitle {
@@ -38,8 +44,7 @@
 
 .relatedOrder {
   margin-bottom: 0.2rem;
-  background-color: #e5effa;
-  border-radius: 0.08rem;
+  background-color: rgba(23, 85, 255, 0.06);
   display: flex;
   align-items: center;
   padding: 0.15rem;
@@ -54,11 +59,15 @@
     width: 18%;
     display: flex;
     flex-direction: column;
+    align-items: center;
   }
 
   .rightButton {
     flex: auto;
+    width: 2rem;
+    border-radius: 0.5rem;
     color: #5697e4;
+    background-color: #ffffff;
     font-size: 0.28rem;
     text-align: center;
     display: flex;
@@ -133,6 +142,18 @@
   }
 }
 
+.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;
+    }
+  }
+}
+
 .fontS20 {
   font-size: 0.2rem;
 }
@@ -156,3 +177,7 @@
 .fontS30 {
   font-size: 0.3rem;
 }
+
+.fontS32 {
+  font-size: 0.32rem;
+}