Преглед изворни кода

style: 工单列表样式修改

ZhaoJun пре 1 година
родитељ
комит
305e05e8e5

+ 4 - 4
src/pages/TaskManage/Detail/TaskDetail/TaskDetail.tsx

@@ -142,7 +142,7 @@ function TaskDetail(props: IPropsType) {
             return (
             return (
               <div key={record.Id} className={styles.workOrderCard}>
               <div key={record.Id} className={styles.workOrderCard}>
                 <div className={styles.leftInfo}>
                 <div className={styles.leftInfo}>
-                  <Row style={{ marginBottom: '15px' }}>
+                  <Row style={{ marginBottom: '0.15rem' }}>
                     <Col className={styles.fontS32} span={12}>
                     <Col className={styles.fontS32} span={12}>
                       <>
                       <>
                         工单类型:
                         工单类型:
@@ -170,7 +170,7 @@ function TaskDetail(props: IPropsType) {
                     </Col>
                     </Col>
                   </Row>
                   </Row>
                 </div>
                 </div>
-                <Divider type="vertical" style={{ height: '40px' }} />
+                <Divider type="vertical" style={{ height: '0.4rem' }} />
                 <div className={styles.rightButtonContainer}>
                 <div className={styles.rightButtonContainer}>
                   <div
                   <div
                     className={styles.rightButton}
                     className={styles.rightButton}
@@ -384,7 +384,7 @@ function TaskDetail(props: IPropsType) {
                       pagination: false,
                       pagination: false,
                     }}
                     }}
                     backdrop="rgba(255,255,255,0.5)"
                     backdrop="rgba(255,255,255,0.5)"
-                    style={{ width: '350px' }}
+                    style={{ width: '3.5rem' }}
                     src={mandateDetail?.img}
                     src={mandateDetail?.img}
                   />
                   />
                 </Col>
                 </Col>
@@ -415,7 +415,7 @@ function TaskDetail(props: IPropsType) {
                       pagination: true,
                       pagination: true,
                     }}
                     }}
                     backdrop="rgba(255,255,255,0.5)"
                     backdrop="rgba(255,255,255,0.5)"
-                    style={{ width: '350px' }}
+                    style={{ width: '3.5rem' }}
                     src={mandateDetail?.Files[0].url}
                     src={mandateDetail?.Files[0].url}
                     set={mandateDetail?.Files.map((item) => {
                     set={mandateDetail?.Files.map((item) => {
                       if (item) {
                       if (item) {

+ 1 - 1
src/pages/TaskManage/Detail/TaskOrder/TaskOrder.tsx

@@ -334,7 +334,7 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
             // showStatus={orderInfo?.OrderStatus.value === 2}
             // showStatus={orderInfo?.OrderStatus.value === 2}
             radius
             radius
           />
           />
-          <div style={{ padding: '0.15rem', letterSpacing: '1.5px' }}>
+          <div style={{ padding: '0.15rem', letterSpacing: '0.015rem' }}>
             <div
             <div
               style={{
               style={{
                 background: 'rgba(23, 85, 255, 0.06)',
                 background: 'rgba(23, 85, 255, 0.06)',

+ 33 - 21
src/pages/TaskManage/Detail/WorkOrderList/WorkOrderList.js

@@ -61,26 +61,38 @@ const WorkOrderList = (props) => {
           key={workOrder.id || workOrder.Id}
           key={workOrder.id || workOrder.Id}
           className={styles.workOrderCard}
           className={styles.workOrderCard}
         >
         >
-          <Row justify="space-between" style={{ marginBottom: '0.2rem' }}>
-            <Col className={styles.fontS24}>{workOrder?.CreateTime}</Col>
-            <Col className={styles.fontS24}>
-              工单负责人:{workOrder?.Repairman?.CName || '-'}
-            </Col>
-          </Row>
-          <Row justify="space-between">
-            <Col className={styles.fontS24}>
-              工单状态:{workOrder?.OrderStatus?.label}
-            </Col>
-            <Col className={styles.detailBtnContainer}>
-              <Button
-                type="primary"
-                style={{ height: '0.4rem', fontSize: '0.24rem' }}
-                onClick={() => goWorkOrderDetail(workOrder)}
-              >
-                工单详情
-              </Button>
-            </Col>
-          </Row>
+          <span
+            style={{
+              margin: '-0.2rem',
+              position: 'absolute',
+              height: '1.37rem',
+              width: '0.2rem',
+              background: 'rgba(23, 85, 255, 0.20)',
+            }}
+          ></span>
+          <div style={{ marginLeft: '0.1rem' }}>
+            <Row justify="space-between" style={{ marginBottom: '0.2rem' }}>
+              <Col className={styles.fontS24}>{workOrder?.CreateTime}</Col>
+              <Col className={styles.fontS24}>
+                工单负责人:{workOrder?.Repairman?.CName || '-'}
+              </Col>
+            </Row>
+            <Row justify="space-between">
+              <Col className={styles.fontS24}>
+                工单状态:{workOrder?.OrderStatus?.label}
+              </Col>
+              <Col className={styles.detailBtnContainer}>
+                <Button
+                  type="primary"
+                  style={{ height: '0.45rem', fontSize: '0.24rem' }}
+                  onClick={() => goWorkOrderDetail(workOrder)}
+                  shape="round"
+                >
+                  工单详情
+                </Button>
+              </Col>
+            </Row>
+          </div>
         </div>
         </div>
       );
       );
     });
     });
@@ -249,7 +261,7 @@ const WorkOrderList = (props) => {
             <TabPane tab={item.label} key={String(item.value)}>
             <TabPane tab={item.label} key={String(item.value)}>
               <Spin spinning={loading}>
               <Spin spinning={loading}>
                 <div
                 <div
-                  style={{ height: 'calc(100vh - 1.8rem)', overflowY: 'auto' }}
+                  style={{ height: 'calc(100vh - 1.9rem)', overflowY: 'auto' }}
                 >
                 >
                   {workOrderListDOM}
                   {workOrderListDOM}
                   <div className={styles.loadMoreBtn}>
                   <div className={styles.loadMoreBtn}>

+ 12 - 1
src/pages/TaskManage/Detail/WorkOrderList/WorkOrderList.less

@@ -1,21 +1,32 @@
 .identifyTab :global {
 .identifyTab :global {
+  .ant-tabs-nav {
+    margin: 0;
+  }
+
+  .ant-tabs-nav .ant-tabs-tab {
+    padding: 0.16rem 0;
+  }
+
   .ant-tabs-nav-list {
   .ant-tabs-nav-list {
     justify-content: space-around;
     justify-content: space-around;
     width: 100%;
     width: 100%;
     .ant-tabs-tab-btn {
     .ant-tabs-tab-btn {
       font-size: 0.24rem;
       font-size: 0.24rem;
+      font-weight: 600;
     }
     }
   }
   }
 }
 }
 
 
 .workOrderCard {
 .workOrderCard {
+  height: 1.37rem;
   background-color: white;
   background-color: white;
   padding: 0.2rem;
   padding: 0.2rem;
   margin-top: 0.2rem;
   margin-top: 0.2rem;
   margin-bottom: 0.1rem;
   margin-bottom: 0.1rem;
   margin-left: 0.05rem;
   margin-left: 0.05rem;
-  border-radius: 0.1rem;
+  margin-right: 0.2rem;
   box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
   box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
+  position: relative;
 }
 }
 
 
 .detailBtnContainer {
 .detailBtnContainer {