style: 任务列表样式修改

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

@@ -17,12 +17,11 @@ import { connect, useLocation, useRequest } from '@umijs/max';
 import TopFilter from '@/pages/TaskManage/components/TopFilter';
 import { IMandateType } from '@/pages/TaskManage/index.types';
 import { useNavigate } from '@@/exports';
-import { DownOutlined } from '@ant-design/icons';
+import { CaretDownFilled } from '@ant-design/icons';
 import {
   Col,
   Collapse,
   CollapseProps,
-  Divider,
   Form,
   Input,
   List,
@@ -217,38 +216,39 @@ const TaskList: React.FC<IPropsType> = (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: '15px' }}>
-                  <Col className={styles.fontS24} span={12}>
+                <Row style={{ marginBottom: '0.15rem' }}>
+                  <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: '40px' }} />
+
               <div className={styles.rightButtonContainer}>
                 <div
                   className={styles.rightButton}
                   style={{
-                    color: '#5697e4',
                     marginBottom: `${
                       order.Status?.value === 0 ? '0.15rem' : '0'
                     }`,
@@ -266,7 +266,6 @@ const TaskList: React.FC<IPropsType> = (props) => {
                 {order.Status?.value === 0 && (
                   <div
                     className={styles.rightButton}
-                    style={{ color: '#5697e4' }}
                     onClick={() => {
                       withdrawOrder(order);
                     }}
@@ -283,59 +282,79 @@ const TaskList: React.FC<IPropsType> = (props) => {
 
     return (
       <List.Item style={{ borderBottom: '0' }}>
-        <div className={`${styles.cardContainer} card-box`}>
-          <Row justify="space-between" style={{ marginBottom: '20px' }}>
-            <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: '10px',
-              borderBottom: '1px 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: '150px',
-                  height: '50px',
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-                onClick={() => {
-                  goTaskDetail(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>
     );
@@ -349,7 +368,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
       <TopFilter filters={topFiltersConfig} onChange={onTopFilterChange} />
 
       <ScrollLoading
-        height={180}
+        height={190}
         loading={loading || loadData}
         pagination={pagination}
         handleLoadData={(current: number) =>

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

@@ -1,42 +1,64 @@
 .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;
+      font-size: 0.32rem;
     }
     :global {
       .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%;
@@ -47,15 +69,22 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        align-items: center;
       }
 
       .rightButton {
-        width: 100%;
-        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;
+    }
   }
 }
 
@@ -116,6 +145,10 @@
   }
 }
 
+.fontS32 {
+  font-size: 0.32rem;
+}
+
 .fontS28 {
   font-size: 0.28rem;
 }

src/pages/TaskManage/components/TopFilter.tsx

@@ -1,6 +1,7 @@
 import { ITopFilter } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
-import { Col, Row, Select } from 'antd';
+import { Col, Divider, Row, Select } from 'antd';
 
+import { CaretDownFilled } from '@ant-design/icons';
 import { useState } from 'react';
 import '../index.less';
 
@@ -15,44 +16,64 @@ const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
   );
 
   return (
-    <Row justify="space-around" style={{ margin: '30px 0 20px' }}>
+    <Row
+      justify="space-around"
+      style={{
+        margin: '0.3rem 0 0.1rem 0',
+        borderBottom: '0.01rem solid #BCBABA',
+        padding: '0.1rem 0',
+      }}
+    >
       {filters.map((item, index) => {
         return (
-          <Col
-            key={item.key}
-            span={Math.floor(22 / filters.length)}
-            style={{ textAlign: 'center' }}
-          >
-            <Select
-              className="antdSelect"
-              size="large"
-              bordered={false}
-              placeholder={item.placeholder}
-              options={item.options}
-              popupMatchSelectWidth={250}
-              allowClear
-              onChange={(value) => {
-                const temp = filters.map((f, i) => {
-                  if (index === i) {
-                    return value !== undefined ? value : null;
-                  }
-                  return values[i] || null;
-                });
-                setValues(temp);
-                onChange(temp);
-              }}
-              onClear={() => {
-                const temp = filters.map((f, i) => {
-                  if (index === i) {
-                    return null;
-                  }
-                  return values[i];
-                });
-                setValues(temp);
-                onChange(temp);
-              }}
-            />
-          </Col>
+          <>
+            <Col
+              key={item.key}
+              span={Math.floor(22 / filters.length)}
+              style={{ textAlign: 'center' }}
+            >
+              <Select
+                className="antdSelect"
+                size="large"
+                bordered={false}
+                placeholder={item.placeholder}
+                options={item.options}
+                popupMatchSelectWidth={250}
+                allowClear
+                suffixIcon={<CaretDownFilled />}
+                onChange={(value) => {
+                  const temp = filters.map((f, i) => {
+                    if (index === i) {
+                      return value !== undefined ? value : null;
+                    }
+                    return values[i] || null;
+                  });
+                  setValues(temp);
+                  onChange(temp);
+                }}
+                onClear={() => {
+                  const temp = filters.map((f, i) => {
+                    if (index === i) {
+                      return null;
+                    }
+                    return values[i];
+                  });
+                  setValues(temp);
+                  onChange(temp);
+                }}
+              />
+            </Col>
+            {index !== filters.length - 1 && (
+              <Divider
+                type="vertical"
+                style={{
+                  width: '0.01rem',
+                  height: '0.4rem',
+                  background: '#BCBABA',
+                }}
+              />
+            )}
+          </>
         );
       })}
     </Row>

src/pages/TaskManage/index.less

@@ -57,15 +57,20 @@
 .antdSelect .ant-select-selection-item,
 .antdSelect .ant-select-selection-placeholder,
 .ant-select-item-option-content {
-  font-size: 0.28rem;
+  font-size: 0.36rem;
   color: black;
   margin-right: 0.1rem;
 }
+
+.antdSelect .ant-select-selector {
+  margin-right: 0.3rem !important;
+}
+
 .ant-select-item-option {
   padding: 0.08rem !important;
 }
 .ant-select-arrow {
-  font-size: 0.24rem !important;
+  font-size: 0.36rem !important;
   color: black !important;
 }
 

src/pages/TaskManage/index.tsx

@@ -8,9 +8,10 @@ import { List, Spin } from 'antd';
 import { BaseOptionType } from 'rc-select/es/Select';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'umi';
+import { IUserType } from './Detail/TaskList/taskList.types';
 import { MandateType, OrderType } from './constent';
 
-const TaskManage = (props) => {
+const TaskManage = (props: any) => {
   const { userList, dispatch } = props;
   const { projectID } = useParams();
   const project_id = Number(projectID === '' ? '0' : projectID);