px替换为rem

.umirc.ts

@@ -27,8 +27,8 @@ export default defineConfig({
   headScripts: [`/rem.js`],
   proxy: {
     '/api': {
-      // target: 'http://47.96.12.136:8888/',
-      target: 'http://47.96.12.136:8788/',
+      target: 'http://47.96.12.136:8888/',
+      // target: 'http://47.96.12.136:8788/',
       // target: 'http://120.55.44.4:8903/',
       // target: 'https://work.greentech.com.cn/',
       changeOrigin: true,

script/PxToRem.js

@@ -0,0 +1,44 @@
+// 将项目中所有px单位除以100后替换成rem
+const fs = require('fs');
+const path = require('path');
+
+// 设置目标目录路径
+const targetDirectory = '../src';
+
+// 递归读取目录下的所有文件
+function readDirectory(dir) {
+  const files = fs.readdirSync(dir);
+
+  files.forEach((file) => {
+    const filePath = path.join(dir, file);
+    const stats = fs.statSync(filePath);
+
+    if (stats.isDirectory()) {
+      readDirectory(filePath); // 递归处理子目录
+    } else if (
+      path.extname(filePath) === '.less' ||
+      path.extname(filePath) === '.js'
+    ) {
+      convertCssFile(filePath); // 处理 CSS 文件
+    }
+  });
+}
+
+// 转换 CSS 文件中的 px 单位为 rem 单位
+function convertCssFile(filePath) {
+  const cssContent = fs.readFileSync(filePath, 'utf8');
+
+  // 使用正则表达式替换 px 单位
+  const remContent = cssContent.replace(/(\d*\.?\d+)px/g, (match, pxValue) => {
+    const remValue = parseFloat(pxValue) / 100;
+    return remValue + 'rem';
+  });
+
+  // 写入转换后的内容
+  fs.writeFileSync(filePath, remContent, 'utf8');
+
+  console.log(`Converted ${filePath}`);
+}
+
+// 启动脚本
+readDirectory(targetDirectory);

src/components/ManagementPage/ManagementPage.less

@@ -2,7 +2,7 @@
 .searchWrapper2,
 .searchWrapper3 {
   width: 100%;
-  // padding: 0px 20px;
+  // padding: 0rem 0.2rem;
 }
 
 .searchWrapper2,
@@ -19,8 +19,8 @@
 .searchDate1,
 .searchDate3 {
   .datePicker {
-    width: 180px;
-    min-width: 0px !important;
+    width: 1.8rem;
+    min-width: 0rem !important;
   }
 }
 
@@ -41,16 +41,16 @@
 }
 
 .searchBtnWrapper1 {
-  margin-top: 20px;
+  margin-top: 0.2rem;
 }
 
 .searchBtnWrapper2,
 .searchBtnWrapper3 {
-  margin-left: 20px;
+  margin-left: 0.2rem;
 }
 
 .searchBtn {
-  margin-right: 20px;
+  margin-right: 0.2rem;
 }
 
 .exportBtn {

src/components/ManagementPage/TypeSelct.js

@@ -24,7 +24,7 @@ function TypeSelect(props) {
   };
 
   return (
-    <Form layout="inline" style={{ margin: '20px 0' }}>
+    <Form layout="inline" style={{ margin: '0.2rem 0' }}>
       <Form.Item label="成本类型">
         <Select style={{ width: 200 }} value={type} onChange={onChangeType}>
           <Option value={1}>能耗</Option>

src/components/ManagementPage/chartModule.js

@@ -163,7 +163,7 @@ const ChartModule = (props) => {
         style={{
           width: chartType === 'gauge' ? '60%' : '100%',
           marginLeft: chartType === 'gauge' ? '20%' : '0',
-          height: typeList?.length <= 0 ? '100%' : 'calc(100% - 57px)',
+          height: typeList?.length <= 0 ? '100%' : 'calc(100% - 0.57rem)',
         }}
         ref={chartDomRef}
       />

src/components/ManagementPage/index.less

@@ -1,30 +1,30 @@
 .icon {
   float: left;
-  width: 7px;
-  height: 32px;
-  margin: 4px 0;
+  width: 0.07rem;
+  height: 0.32rem;
+  margin: 0.04rem 0;
   background-color: #366cda;
 }
 .title {
-  padding-left: 12px;
-  font-size: 30px;
+  padding-left: 0.12rem;
+  font-size: 0.3rem;
   font-weight: 400;
   color: #4a4a4a;
-  line-height: 40px;
+  line-height: 0.4rem;
 }
 .right {
   color: #366cda;
   float: right;
-  font-size: 20px;
+  font-size: 0.2rem;
   cursor: default;
 }
 
 .leftArrow {
-  border: solid 20px;
+  border: solid 0.2rem;
   border-color: transparent #366cda transparent transparent;
 }
 .rightArrow {
-  border: solid 20px;
+  border: solid 0.2rem;
   border-color: transparent transparent transparent #366cda;
 }
 .typeList {
@@ -39,10 +39,10 @@
       background: none;
     }
     .ant-tabs-nav .ant-tabs-tab {
-      padding: 2px 16px;
+      padding: 0.02rem 0.16rem;
       background-color: #2196f330;
       border: none;
-      margin: 0 6px;
+      margin: 0 0.06rem;
     }
     .ant-tabs-tab-active {
       background-color: #366cda !important;
@@ -58,7 +58,7 @@
       margin: 0;
     }
     // .ant-tabs-tab-prev-icon{
-    //   border: solid 20px ;
+    //   border: solid 0.2rem ;
     //   border-color: transparent #366CDA transparent  transparent ;
     //   i{
     //     width: 0;

src/components/ManagementPage/moduleTitle.js

@@ -1,6 +1,6 @@
 //模块标题
 /*
-style //样式不传默认上面10px
+style //样式不传默认上面0.1rem
 icon  dom节点
 title //名称
 rightText  //右侧文字
@@ -13,7 +13,7 @@ handleRightClick   //右侧点击方法
 import styles from './index.less';
 const ModuleTitle = ({ style, icon, title, rightText, handleRightClick }) => {
   return (
-    <div style={style ? style : { margin: '10px 0', paddingRight: '10px' }}>
+    <div style={style ? style : { margin: '0.1rem 0', paddingRight: '0.1rem' }}>
       {icon ? icon : <div className={styles.icon} />}
       <span className={styles.title}>{title}</span>
       {rightText && (

src/components/PageContent/index.less

@@ -1,6 +1,6 @@
 .page {
   // background: #fff;
-  padding: 20px;
+  padding: 0.2rem;
   min-height: 100vh;
   position: relative;
 
@@ -14,9 +14,9 @@
   }
   .return {
     position: absolute;
-    top: 26px;
-    left: 20px;
-    font-size: 34px;
+    top: 0.26rem;
+    left: 0.2rem;
+    font-size: 0.34rem;
     color: #bcbaba;
     cursor: pointer;
   }

src/components/PageTitle/index.js

@@ -31,12 +31,14 @@ export default (props) => {
         <span className={styles.titleBar} />
       )}
 
-      <span
-        className={styles.title}
-        style={returnable ? { cursor: 'pointer' } : null}
-      >
-        {children}
-      </span>
+      {children && (
+        <span
+          className={styles.title}
+          style={returnable ? { cursor: 'pointer' } : null}
+        >
+          {children}
+        </span>
+      )}
     </div>
   );
 };

src/components/PageTitle/index.less

@@ -3,8 +3,8 @@
   align-items: center;
 }
 .titleBar {
-  width: 7px;
-  height: 35px;
+  width: 0.07rem;
+  height: 0.35rem;
   background: #4a90e2;
   float: left;
   margin-right: 0.1rem;
@@ -27,5 +27,5 @@
 }
 .tabs {
   position: absolute;
-  top: 52px;
+  top: 0.52rem;
 }

src/components/TabsContent/index.js

@@ -39,7 +39,7 @@ const TabsContent = (props) => {
                 type="vertical"
                 style={{
                   height: '0.5rem',
-                  width: '1.5px',
+                  width: '0.015rem',
                   backgroundColor: '#BCBABA',
                 }}
               />

src/components/TabsContent/index.less

@@ -8,22 +8,22 @@
   width: calc(100% - 0.4rem);
   overflow-x: auto;
   overflow-y: hidden;
-  border-bottom: 1.5px solid #bcbaba;
+  border-bottom: 0.015rem solid #bcbaba;
   &::-webkit-scrollbar {
     display: none;
   }
 
   // > .tabsItem {
-  //   border-right: 1px solid #979797;
+  //   border-right: 0.01rem solid #979797;
   // }
   // :last-child {
   //   border-right: none;
   // }
 }
 .tabsItem {
-  padding: 0 40px;
+  padding: 0 0.4rem;
   color: #3f3f40;
-  font-size: 36px;
+  font-size: 0.36rem;
   white-space: nowrap;
 }
 .active {
@@ -32,10 +32,10 @@
 
 .small {
   height: inherit;
-  padding: 20px 0;
+  padding: 0.2rem 0;
   .tabsItem {
-    font-size: 28px;
-    padding: 0 30px;
+    font-size: 0.28rem;
+    padding: 0 0.3rem;
     &:last-child {
       padding-right: 0;
     }

src/components/ThresholdDetail/index.less

@@ -15,7 +15,7 @@
 
 .box {
   width: 100%;
-  height: 8px;
+  height: 0.08rem;
   position: relative;
   background-color: #12CEB3;
 
@@ -40,7 +40,7 @@
   .scaleBlackLeft,
   .scaleBlackRight {
     position: absolute;
-    width: 6px;
+    width: 0.06rem;
     height: 100%;
     background: #0D1A2B;
     top: 0;
@@ -48,26 +48,26 @@
   }
 
   .scaleBlackLeft {
-    left: -3px;
+    left: -0.03rem;
   }
 
   .scaleBlackRight {
-    right: -3px;
+    right: -0.03rem;
   }
 
   
 }
 .scale {
   position: absolute;
-  top: 18px;
+  top: 0.18rem;
   line-height: 1.2;
-  font-size: 24px;
+  font-size: 0.24rem;
   word-break: keep-all;
   transform: translateX(-50%);
 
   &.top {
     top: inherit;
-    bottom: 18px;
+    bottom: 0.18rem;
   }
 }
 .current {
@@ -76,13 +76,13 @@
   transform: translate(-50%, -50%);
   z-index: 10;
   // height: 120%;
-  width: 9px;
-  height: 22px;
+  width: 0.09rem;
+  height: 0.22rem;
   // background: url("@/assets/current.png") no-repeat center;
   background-size: 100% 100%;
   // .currentBar {
   //   height: 100%;
-  //   width: 4px;
+  //   width: 0.04rem;
   //   background-color: #fff;
   // }
 }

src/global.less

@@ -53,26 +53,26 @@ body {
   }
   .ant-collapse-item {
     background-color: white !important;
-    border-radius: 6px !important;
+    border-radius: 0.06rem !important;
     border-bottom: none !important;
-    margin-bottom: 10px;
+    margin-bottom: 0.1rem;
   }
   .ant-select-dropdown .ant-select-item {
-    font-size: 26px;
+    font-size: 0.26rem;
   }
   .ant-picker-dropdown {
-    font-size: 24px;
+    font-size: 0.24rem;
   }
   .ant-picker-dropdown .ant-picker-content td {
-    width: 30px;
+    width: 0.3rem;
   }
   .ant-picker-dropdown .ant-picker-cell::before {
-    height: 30px;
+    height: 0.3rem;
   }
   .ant-picker-dropdown .ant-picker-cell .ant-picker-cell-inner {
-    min-width: 30px;
-    height: 30px;
-    line-height: 30px;
+    min-width: 0.3rem;
+    height: 0.3rem;
+    line-height: 0.3rem;
   }
 }
 
@@ -124,29 +124,29 @@ input[type='reset'] {
 }
 
 .box {
-  border-radius: 8px;
-  box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
-  border: 1px solid #eee;
+  border-radius: 0.08rem;
+  box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
+  border: 0.01rem solid #eee;
   background: rgba(255, 255, 255);
 }
 .card-box {
   border-radius: 0.4rem 0 0.4rem 0;
   background: #ffffff;
-  box-shadow: 1px 6px 10px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0.01rem 0.06rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
 }
 
 .content-tab {
-  padding-left: 5px;
-  padding-top: 5px;
-  padding-right: 5px;
-  height: calc(100vh - 130px);
+  padding-left: 0.05rem;
+  padding-top: 0.05rem;
+  padding-right: 0.05rem;
+  height: calc(100vh - 1.3rem);
   overflow-x: hidden;
   overflow-y: auto;
 }
 .content-title {
-  padding-left: 5px;
-  padding-right: 5px;
-  height: calc(100vh - 110px);
+  padding-left: 0.05rem;
+  padding-right: 0.05rem;
+  height: calc(100vh - 1.1rem);
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -154,10 +154,10 @@ input[type='reset'] {
 .password-eye {
   display: inline-block;
   vertical-align: middle;
-  width: 30px;
-  height: 30px;
+  width: 0.3rem;
+  height: 0.3rem;
   background: url('@/assets/icon-eye1.png') no-repeat center;
-  background-size: 30px;
+  background-size: 0.3rem;
   &.open {
     background-image: url('@/assets/icon-eye2.png');
   }
@@ -167,17 +167,17 @@ input[type='reset'] {
   display: flex;
   width: 100%;
   overflow-x: auto;
-  border: 1px solid #979797;
+  border: 0.01rem solid #979797;
   &::-webkit-scrollbar {
     display: none;
   }
   .tabs-item {
     flex: 1;
-    padding: 16px 24px;
-    font-size: 24px;
+    padding: 0.16rem 0.24rem;
+    font-size: 0.24rem;
     font-weight: 400;
     color: #4a4a4a;
-    border-right: 1px solid #979797;
+    border-right: 0.01rem solid #979797;
     white-space: nowrap;
     &:last-child {
       border-right: none;
@@ -191,21 +191,21 @@ input[type='reset'] {
 .section-title {
   display: flex;
   align-items: center;
-  font-size: 28px;
+  font-size: 0.28rem;
   font-weight: 400;
   color: #4a4a4a;
-  line-height: 40px;
+  line-height: 0.4rem;
   .section-line {
-    width: 4px;
-    height: 30px;
+    width: 0.04rem;
+    height: 0.3rem;
     background: #4a90e2;
-    margin-right: 8px;
+    margin-right: 0.08rem;
   }
 }
 
 *::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 0.06rem;
+  height: 0.06rem;
 }
 
 *::-webkit-scrollbar-thumb {
@@ -222,7 +222,7 @@ input[type='reset'] {
 
 .ant-btn-primary {
   background: #4a90e2;
-  font-size: 16px;
+  font-size: 0.16rem;
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -251,10 +251,10 @@ input[type='reset'] {
 .ant-table-thead > tr > th,
 .ant-table-tbody > tr > td {
   border-radius: 0 !important;
-  padding: 16px 18px !important;
-  font-size: 24px !important;
+  padding: 0.16rem 0.18rem !important;
+  font-size: 0.24rem !important;
   color: #4a4a4a !important;
-  line-height: 32px !important;
+  line-height: 0.32rem !important;
   font-weight: normal !important;
   vertical-align: middle;
   border: none !important;
@@ -264,27 +264,27 @@ input[type='reset'] {
 }
 
 .ant-picker {
-  font-size: 26px;
+  font-size: 0.26rem;
   .ant-picker-input > input {
-    font-size: 24px;
+    font-size: 0.24rem;
   }
   .ant-picker-separator {
-    font-size: 24px;
+    font-size: 0.24rem;
   }
 }
 
 .ant-select-selection-item {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 .ant-select-selector {
-  height: 40px;
-  padding: 4px 11px;
+  height: 0.4rem;
+  padding: 0.04rem 0.11rem;
 }
 
 .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
-  height: 40px;
-  padding: 4px 11px;
+  height: 0.4rem;
+  padding: 0.04rem 0.11rem;
 }
 .ant-select-single .ant-select-selector {
-  font-size: 26px;
+  font-size: 0.26rem;
 }

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

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

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

@@ -303,7 +303,7 @@ const WorkOrderDetail = (props) => {
             showStatus={orderInfo?.OrderStatus.value === 2}
             radius
           />
-          <div style={{ padding: '15px', letterSpacing: '1.5px' }}>
+          <div style={{ padding: '0.15rem', letterSpacing: '0.015rem' }}>
             <Row className={styles.rowMargin}>
               <Col className={styles.fontS28} span={15}>
                 {/* @ts-ignore */}
@@ -360,7 +360,7 @@ const WorkOrderDetail = (props) => {
         {order_type === 3 && (
           <div>
             <SubTitle title="维修内容" />
-            <div style={{ padding: '15px' }}>
+            <div style={{ padding: '0.15rem' }}>
               <Row className={styles.rowMargin} justify={'space-around'}>
                 <Col className={styles.fontS28} span={8}>
                   是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
@@ -390,7 +390,7 @@ const WorkOrderDetail = (props) => {
         {order_type === 5 && (
           <div>
             <SubTitle title="加药详情" />
-            <div style={{ padding: '15px' }}>
+            <div style={{ padding: '0.15rem' }}>
               <Row>
                 <Col className={styles.fontS28} span={8}>
                   药剂名称：{additionalInfo?.name || '-'}
@@ -409,7 +409,7 @@ const WorkOrderDetail = (props) => {
         {stepInfo?.length > 0 && (
           <div>
             <SubTitle title="工单流程" />
-            <div style={{ padding: '15px 20px' }}>
+            <div style={{ padding: '0.15rem 0.2rem' }}>
               <Steps
                 direction="vertical"
                 current={stepInfo?.length ? stepInfo.length - 1 : 0}

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

@@ -1,31 +1,31 @@
 .cardContainer {
-  margin-top: 15px;
-  padding: 20px 20px;
+  margin-top: 0.15rem;
+  padding: 0.2rem 0.2rem;
   background-color: white;
 
   .normalInfo {
-    padding: 25px 15px;
+    padding: 0.25rem 0.15rem;
     background-color: #fdf2df;
   }
 
   .infoRow {
-    margin-bottom: 25px;
+    margin-bottom: 0.25rem;
   }
 
   .detailInfo {
-    padding: 25px 15px;
-    border-bottom: 1px solid rgba(0, 0, 0, 10%);
+    padding: 0.25rem 0.15rem;
+    border-bottom: 0.01rem solid rgba(0, 0, 0, 10%);
   }
 
   .relatedOrder {
-    padding: 0 15px;
-    margin-top: 15px;
+    padding: 0 0.15rem;
+    margin-top: 0.15rem;
 
     .collapseLabel {
       width: 100%;
 
       .ant-collapse-arrow {
-        font-size: 24px;
+        font-size: 0.24rem;
       }
 
       :global {
@@ -37,24 +37,24 @@
           justify-content: center;
           flex-direction: row-reverse;
           align-items: center;
-          margin-top: 10px;
+          margin-top: 0.1rem;
 
           .ant-collapse-header-text {
-            font-size: 24px;
+            font-size: 0.24rem;
             flex: unset;
             margin-inline-end: unset;
           }
 
           .ant-collapse-arrow {
-            font-size: 24px;
+            font-size: 0.24rem;
           }
         }
       }
 
       .workOrderCard {
-        margin-bottom: 20px;
-        padding: 20px 10px;
-        border-radius: 8px;
+        margin-bottom: 0.2rem;
+        padding: 0.2rem 0.1rem;
+        border-radius: 0.08rem;
         background-color: #e5effa;
         display: flex;
         align-items: center;
@@ -66,7 +66,7 @@
         .rightButton {
           flex: auto;
           color: #5697e4;
-          font-size: 24px;
+          font-size: 0.24rem;
           text-align: center;
           display: flex;
           justify-content: center;
@@ -77,9 +77,9 @@
   }
 
   .workOrderCard {
-    margin-bottom: 25px;
-    padding: 20px 10px;
-    border-radius: 8px;
+    margin-bottom: 0.25rem;
+    padding: 0.2rem 0.1rem;
+    border-radius: 0.08rem;
     background-color: #e5effa;
     display: flex;
     align-items: center;
@@ -91,7 +91,7 @@
     .rightButton {
       flex: auto;
       color: #5697e4;
-      font-size: 24px;
+      font-size: 0.24rem;
       text-align: center;
       display: flex;
       justify-content: center;
@@ -101,25 +101,25 @@
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS22 {
-  font-size: 22px;
+  font-size: 0.22rem;
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS18 {
-  font-size: 18px;
+  font-size: 0.18rem;
 }
 
 .fontS16 {
-  font-size: 16px;
+  font-size: 0.16rem;
 }

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

@@ -1,7 +1,7 @@
 .selfCardBox {
-  margin-top: 15px;
-  border-radius: 8px;
-  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 30%);
+  margin-top: 0.15rem;
+  border-radius: 0.08rem;
+  box-shadow: 0.02rem 0 0.08rem 0 rgba(0, 0, 0, 30%);
   background-color: white;
 }
 
@@ -11,37 +11,37 @@
 }
 
 .rowMargin {
-  margin-bottom: 30px;
+  margin-bottom: 0.3rem;
 }
 
 .rowMarginTop {
-  margin-top: 30px;
+  margin-top: 0.3rem;
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS26 {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS22 {
-  font-size: 22px;
+  font-size: 0.22rem;
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS18 {
-  font-size: 18px;
+  font-size: 0.18rem;
 }
 
 .fontS16 {
-  font-size: 16px;
+  font-size: 0.16rem;
 }

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

@@ -175,7 +175,7 @@ const MyTaskList = (props) => {
           return (
             <div key={order.Id} className={styles.workOrderCard}>
               <div className={styles.leftInfo}>
-                <Row style={{ marginBottom: '15px' }}>
+                <Row style={{ marginBottom: '0.15rem' }}>
                   <Col className={styles.fontS24} span={12}>
                     工单类型：{order.RecordType?.label || '-'}
                   </Col>
@@ -195,7 +195,7 @@ const MyTaskList = (props) => {
                   </Col>
                 </Row>
               </div>
-              <Divider type="vertical" style={{ height: '40px' }} />
+              <Divider type="vertical" style={{ height: '0.4rem' }} />
               <div
                 className={styles.rightButton}
                 style={{ color: '#5697e4' }}
@@ -218,7 +218,7 @@ const MyTaskList = (props) => {
     return (
       <List.Item style={{ borderBottom: '0' }}>
         <div className={`${styles.cardContainer} card-box`}>
-          <Row justify="space-between" style={{ marginBottom: '20px' }}>
+          <Row justify="space-between" style={{ marginBottom: '0.2rem' }}>
             <Col className={styles.fontS24}>时间:{formatItem.CreateTime}</Col>
             <Col className={styles.fontS24}>
               任务类别:{formatItem.MandateClass?.label}
@@ -230,8 +230,8 @@ const MyTaskList = (props) => {
           <Row
             justify="space-between"
             style={{
-              paddingBottom: '10px',
-              borderBottom: '1px solid #D5D5D5',
+              paddingBottom: '0.1rem',
+              borderBottom: '0.01rem solid #D5D5D5',
             }}
           >
             <Col className={styles.fontS24}>
@@ -243,8 +243,8 @@ const MyTaskList = (props) => {
                 style={{
                   backgroundColor: '#f5a623',
                   color: 'white',
-                  width: '150px',
-                  height: '50px',
+                  width: '1.5rem',
+                  height: '0.5rem',
                   display: 'flex',
                   justifyContent: 'center',
                   alignItems: 'center',

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

@@ -52,7 +52,7 @@ const WorkOrderList = (props) => {
           key={workOrder.id || workOrder.Id}
           className={styles.workOrderCard}
         >
-          <Row justify="space-between" style={{ marginBottom: '20px' }}>
+          <Row justify="space-between" style={{ marginBottom: '0.2rem' }}>
             <Col className={styles.fontS24}>{workOrder?.CreateTime}</Col>
             <Col className={styles.fontS24}>
               工单负责人：{workOrder?.Repairman?.CName || '-'}
@@ -65,7 +65,7 @@ const WorkOrderList = (props) => {
             <Col className={styles.detailBtnContainer}>
               <Button
                 type="primary"
-                style={{ height: '40px', fontSize: '24px' }}
+                style={{ height: '0.4rem', fontSize: '0.24rem' }}
                 onClick={() => goWorkOrderDetail(workOrder)}
               >
                 工单详情
@@ -148,7 +148,7 @@ const WorkOrderList = (props) => {
             <TabPane tab={item.label} key={String(item.value)}>
               <Spin spinning={loading}>
                 <div
-                  style={{ height: 'calc(100vh - 180px)', overflowY: 'auto' }}
+                  style={{ height: 'calc(100vh - 1.8rem)', overflowY: 'auto' }}
                 >
                   {workOrderListDOM}
                 </div>

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

@@ -3,19 +3,19 @@
     justify-content: space-around;
     width: 100%;
     .ant-tabs-tab-btn {
-      font-size: 24px;
+      font-size: 0.24rem;
     }
   }
 }
 
 .workOrderCard {
   background-color: white;
-  padding: 20px;
-  margin-top: 20px;
-  margin-bottom: 10px;
-  margin-left: 5px;
-  border-radius: 10px;
-  box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
+  padding: 0.2rem;
+  margin-top: 0.2rem;
+  margin-bottom: 0.1rem;
+  margin-left: 0.05rem;
+  border-radius: 0.1rem;
+  box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
 }
 
 .detailBtnContainer {
@@ -25,5 +25,5 @@
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }

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

@@ -1,13 +1,13 @@
 .cardContainer {
   width: 100%;
-  padding: 20px 20px 10px 20px;
-  margin-left: 5px;
+  padding: 0.2rem 0.2rem 0.1rem 0.2rem;
+  margin-left: 0.05rem;
   background-color: white;
 
   .collapseLabel {
     width: 100%;
     .ant-collapse-arrow {
-      font-size: 24px;
+      font-size: 0.24rem;
     }
     :global {
       .ant-collapse-item {
@@ -17,23 +17,23 @@
         justify-content: center;
         flex-direction: row-reverse;
         align-items: center;
-        margin-top: 10px;
+        margin-top: 0.1rem;
 
         .ant-collapse-header-text {
-          font-size: 24px;
+          font-size: 0.24rem;
           flex: unset;
           margin-inline-end: unset;
         }
         .ant-collapse-arrow {
-          font-size: 24px;
+          font-size: 0.24rem;
         }
       }
     }
 
     .workOrderCard {
-      margin-bottom: 20px;
-      padding: 20px 10px;
-      border-radius: 8px;
+      margin-bottom: 0.2rem;
+      padding: 0.2rem 0.1rem;
+      border-radius: 0.08rem;
       background-color: #e5effa;
       display: flex;
       align-items: center;
@@ -45,7 +45,7 @@
       .rightButton {
         flex: auto;
         color: #5697e4;
-        font-size: 24px;
+        font-size: 0.24rem;
         text-align: center;
         display: flex;
         justify-content: center;
@@ -56,7 +56,7 @@
 }
 
 .topContainer {
-  // height: 120px;
+  // height: 1.2rem;
   .fixedTop {
     position: fixed;
     top: 0;
@@ -67,25 +67,25 @@
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS26 {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS18 {
-  font-size: 18px;
+  font-size: 0.18rem;
 }
 
 .fontS16 {
-  font-size: 16px;
+  font-size: 0.16rem;
 }

src/pages/Center/MyTask/index.less

@@ -1,26 +1,26 @@
 .taskList {
   border: none;
-  max-height: calc(100vh - 140px);
+  max-height: calc(100vh - 1.4rem);
   overflow-y: scroll;
 
   .listItem {
-    margin: 20px 20px 20px 5px;
-    height: 120px;
-    box-shadow: 0 0 6px 3px rgba(0, 150, 255, 10%);
-    border-radius: 10px;
+    margin: 0.2rem 0.2rem 0.2rem 0.05rem;
+    height: 1.2rem;
+    box-shadow: 0 0 0.06rem 0.03rem rgba(0, 150, 255, 10%);
+    border-radius: 0.1rem;
     background-color: #ffffff;
 
     .itemCount {
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-right: 30px;
+      margin-right: 0.3rem;
 
       .countNumber {
         color: #f5a623;
-        font-size: 32px;
+        font-size: 0.32rem;
         font-weight: 500;
-        margin-bottom: 6px;
+        margin-bottom: 0.06rem;
       }
     }
   }
@@ -28,52 +28,52 @@
 
 .ant-select-clear {
   opacity: 1 !important;
-  margin-top: -12px !important;
-  width: 24px !important;
-  height: 24px !important;
-  font-size: 24px !important;
+  margin-top: -0.12rem !important;
+  width: 0.24rem !important;
+  height: 0.24rem !important;
+  font-size: 0.24rem !important;
   color: black !important;
 }
 
 .antdSelect .ant-select-selection-item,
 .antdSelect .ant-select-selection-placeholder,
 .ant-select-item-option-content {
-  font-size: 28px;
+  font-size: 0.28rem;
   color: black;
-  margin-right: 10px;
+  margin-right: 0.1rem;
 }
 .ant-select-item-option {
-  padding: 8px !important;
+  padding: 0.08rem !important;
 }
 .ant-select-arrow {
-  font-size: 24px !important;
+  font-size: 0.24rem !important;
   color: black !important;
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS26 {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS22 {
-  font-size: 22px;
+  font-size: 0.22rem;
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS18 {
-  font-size: 18px;
+  font-size: 0.18rem;
 }
 
 .fontS16 {
-  font-size: 16px;
+  font-size: 0.16rem;
 }

src/pages/Center/index.js

@@ -52,7 +52,7 @@ const Center = () => {
             toMyTask(1);
           }}
         >
-          <img src={taskIcon} style={{ marginRight: '20px' }} />
+          <img src={taskIcon} style={{ marginRight: '0.2rem' }} />
           我的任务
         </div>
         <div
@@ -61,7 +61,7 @@ const Center = () => {
             toMyTask(2);
           }}
         >
-          <img src={orderIcon} style={{ marginRight: '20px' }} />
+          <img src={orderIcon} style={{ marginRight: '0.2rem' }} />
           我的工单
         </div>
       </div>

src/pages/Center/index.less

@@ -1,59 +1,59 @@
 .page {
   // margin: auto;
   width: 100%;
-  padding: 0 200px;
+  padding: 0 2rem;
   background-color: #ffffff;
 }
 .box {
   background: rgba(255, 255, 255);
-  box-shadow: 0px 0px 8px 4px rgba(212, 212, 212, 0.5);
-  border-radius: 20px;
+  box-shadow: 0rem 0rem 0.08rem 0.04rem rgba(212, 212, 212, 0.5);
+  border-radius: 0.2rem;
 }
 .head {
   .box;
   position: relative;
-  margin: 30px 0;
-  padding: 64px 76px;
+  margin: 0.3rem 0;
+  padding: 0.64rem 0.76rem;
   display: flex;
   .profile {
-    width: 150px;
-    height: 150px;
+    width: 1.5rem;
+    height: 1.5rem;
     background-image: url('@/assets/center/profile.png');
     background-size: 100%, 100%;
     background-repeat: no-repeat;
   }
   .textContent {
-    margin-left: 60px;
+    margin-left: 0.6rem;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     .name {
-      font-size: 34px;
+      font-size: 0.34rem;
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       color: #4a4a4a;
-      line-height: 48px;
+      line-height: 0.48rem;
     }
     .photo {
-      font-size: 28px;
+      font-size: 0.28rem;
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       color: #4a4a4a;
-      line-height: 40px;
+      line-height: 0.4rem;
     }
   }
 }
 .center {
-  margin-bottom: 30px;
-  height: 150px;
+  margin-bottom: 0.3rem;
+  height: 1.5rem;
   display: flex;
   justify-content: space-between;
   .item {
     .box;
     width: 49%;
     text-align: center;
-    font-size: 32px;
-    line-height: 150px;
+    font-size: 0.32rem;
+    line-height: 1.5rem;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     color: #4a4a4a;
@@ -61,22 +61,22 @@
 }
 .bottomContent {
   .box;
-  padding: 10px 30px;
-  font-size: 32px;
+  padding: 0.1rem 0.3rem;
+  font-size: 0.32rem;
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   color: #4a4a4a;
   .lineItem {
-    height: 100px;
-    line-height: 100px;
-    border-bottom: 1px solid #d4d4d4;
+    height: 1rem;
+    line-height: 1rem;
+    border-bottom: 0.01rem solid #d4d4d4;
     .arr {
-      width: 28px;
-      height: 40px;
+      width: 0.28rem;
+      height: 0.4rem;
       background: url('@/assets/center/icon-arr.png') no-repeat center;
       background-size: 100% 100%;
       float: right;
-      margin-top: 30px;
+      margin-top: 0.3rem;
     }
   }
   .lineItem:last-child {
@@ -84,21 +84,21 @@
   }
 }
 .loginOut {
-  margin: 50px auto 0;
-  width: 329px;
-  height: 97px;
+  margin: 0.5rem auto 0;
+  width: 3.29rem;
+  height: 0.97rem;
   text-align: center;
   background: rgba(74, 144, 226);
-  border-radius: 49px;
-  font-size: 32px;
+  border-radius: 0.49rem;
+  font-size: 0.32rem;
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   color: #ffffff;
-  line-height: 97px;
+  line-height: 0.97rem;
 }
 .close {
   position: absolute;
-  top: 20px;
-  right: 20px;
-  font-size: 30px;
+  top: 0.2rem;
+  right: 0.2rem;
+  font-size: 0.3rem;
 }

src/pages/Controller/index.less

@@ -1,20 +1,20 @@
 .top {
   display: flex;
-  padding: 48px 60px 25px;
+  padding: 0.48rem 0.6rem 0.25rem;
   .left {
     width: 50%;
-    font-size: 28px;
+    font-size: 0.28rem;
     display: flex;
     align-items: center;
   }
   .img {
-    width: 152px;
-    margin-right: 45px;
+    width: 1.52rem;
+    margin-right: 0.45rem;
   }
   .number {
-    font-size: 80px;
+    font-size: 0.8rem;
     font-weight: bold;
-    margin-bottom: 10px;
+    margin-bottom: 0.1rem;
     color: #4A90E2;
   }
   .right {
@@ -23,24 +23,24 @@
     justify-content: space-around;
   }
   .row {
-    font-size: 32px;
+    font-size: 0.32rem;
   }
 }
 .item {
-  padding: 40px 60px;
+  padding: 0.4rem 0.6rem;
   
-  font-size: 32px;
-  margin-top: 28px;
+  font-size: 0.32rem;
+  margin-top: 0.28rem;
   display: flex;
   align-items: center;
 }
 .icon {
-  width: 20px;
-  height: 20px;
+  width: 0.2rem;
+  height: 0.2rem;
   border-radius: 50%;
   display: inline-block;
   background-color: #12ceb3;
-  margin-right: 44px;
+  margin-right: 0.44rem;
   vertical-align: middle;
   &.error {
     background-color: #fe5850;

src/pages/DeviceManager/detail.js

@@ -401,7 +401,7 @@ const SparePartDetail = () => {
   return (
     <PageContent closeable={false}>
       <PageTitle children={titles[type]} returnable />
-      <div className="content-title" style={{ marginTop: '10px' }}>
+      <div className="content-title" style={{ marginTop: '0.1rem' }}>
         {Number(type) !== PageType.warning && Number(type) !== PageType.base ? (
           <Table
             sticky={{ offsetHeader: 0 }}

src/pages/DeviceManager/index.js

@@ -251,19 +251,19 @@ const Device = ({ projectId }) => {
             className={`${styles.btn} ${type == 0 ? styles.active : ''}`}
             onClick={() => handleBtnClick(0)}
           >
-            <span style={{ lineHeight: '60px' }}>全部</span>
+            <span style={{ lineHeight: '0.6rem' }}>全部</span>
           </div>
           <div
             className={`${styles.btn} ${type == 1 ? styles.active : ''}`}
             onClick={() => handleBtnClick(1)}
           >
-            <span style={{ lineHeight: '60px' }}>维修</span>
+            <span style={{ lineHeight: '0.6rem' }}>维修</span>
           </div>
           <div
             className={`${styles.btn} ${type == 2 ? styles.active : ''}`}
             onClick={() => handleBtnClick(2)}
           >
-            <span style={{ lineHeight: '60px' }}>保养</span>
+            <span style={{ lineHeight: '0.6rem' }}>保养</span>
           </div>
         </Space>
       </Spin>
@@ -271,7 +271,7 @@ const Device = ({ projectId }) => {
       {type == 1 && (
         <Table
           loading={repairLoading}
-          style={{ marginTop: '10px' }}
+          style={{ marginTop: '0.1rem' }}
           dataSource={repairData?.filter((item) => item.DeviceCode)}
           columns={columnsRepair}
           pagination={false}
@@ -280,7 +280,7 @@ const Device = ({ projectId }) => {
       {type == 2 && (
         <Table
           loading={maintaiLoading}
-          style={{ marginTop: '10px' }}
+          style={{ marginTop: '0.1rem' }}
           dataSource={maintainData?.filter((item) => item.DeviceCode)}
           columns={columns}
           pagination={false}
@@ -365,7 +365,7 @@ const SparePart = ({ projectId }) => {
               <span className={styles.spareText}>{item.title}</span>
               <Space size={30}>
                 {/* <span className={styles.spareText}>{item.num}个</span> */}
-                <RightOutlined style={{ fontSize: '28px' }} />
+                <RightOutlined style={{ fontSize: '0.28rem' }} />
               </Space>
             </div>
           ))}

src/pages/DeviceManager/index.less

@@ -3,16 +3,16 @@
   right: 0;
 }
 .li {
-  height: 50px;
+  height: 0.5rem;
   display: flex;
   align-items: center;
   color: #000000;
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 .line {
-  margin: 0 20px;
-  height: 24px;
-  border-radius: 12px;
+  margin: 0 0.2rem;
+  height: 0.24rem;
+  border-radius: 0.12rem;
   background: linear-gradient(to right, #4279e5, #372cc9);
 }
 .titleContent {
@@ -20,30 +20,30 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 238px;
+  height: 2.38rem;
   .img {
-    width: 150px;
-    margin-right: 46px;
+    width: 1.5rem;
+    margin-right: 0.46rem;
   }
   .num {
-    margin-bottom: 24px;
-    font-size: 80px;
+    margin-bottom: 0.24rem;
+    font-size: 0.8rem;
     font-family: DINAlternate-Bold, DINAlternate;
     font-weight: bold;
     color: #f5a623;
-    line-height: 94px;
+    line-height: 0.94rem;
   }
   .text {
-    font-size: 28px;
+    font-size: 0.28rem;
     color: #4a4a4a;
-    line-height: 38px;
+    line-height: 0.38rem;
   }
   .iconFundFilled {
-    width: 37px;
-    height: 41px;
+    width: 0.37rem;
+    height: 0.41rem;
     position: absolute;
-    right: 20px;
-    top: 20px;
+    right: 0.2rem;
+    top: 0.2rem;
     cursor: pointer;
     background: url('@/assets/iconFundFilled.png') no-repeat;
   }
@@ -52,26 +52,26 @@
 .lineContent {
   display: flex;
   justify-content: space-between;
-  font-size: 28px;
+  font-size: 0.28rem;
   font-weight: 500;
   color: #4a4a4a;
-  line-height: 38px;
+  line-height: 0.38rem;
 }
 .sparePart {
   width: 100%;
   text-align: center;
   .cardItem {
     display: flex;
-    padding: 36px;
+    padding: 0.36rem;
     justify-content: space-between;
     align-items: center;
   }
   .btns {
-    margin: 24px 0;
+    margin: 0.24rem 0;
     .btn {
-      width: 150px;
-      height: 60px;
-      font-size: 30px;
+      width: 1.5rem;
+      height: 0.6rem;
+      font-size: 0.3rem;
       color: #4a4a4a;
       text-align: center;
       background-image: url('@/assets/deviceManager/deviceBtn1.png');
@@ -83,34 +83,34 @@
     }
   }
   .itemText {
-    padding-left: 38px;
+    padding-left: 0.38rem;
     justify-content: flex-start;
-    font-size: 28px;
+    font-size: 0.28rem;
     color: #4a4a4a;
-    line-height: 38px;
-    height: 96px;
+    line-height: 0.38rem;
+    height: 0.96rem;
   }
   .itemTextActive {
     color: #4a90e2;
   }
 
   .spareText {
-    font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 500;
     color: #4a4a4a;
-    line-height: 38px;
+    line-height: 0.38rem;
   }
 
   :global {
     .ant-collapse > .ant-collapse-item > .ant-collapse-header {
-      padding: 36px;
+      padding: 0.36rem;
       align-items: center;
     }
     .ant-collapse-item {
-      margin-bottom: 16px;
-      border-radius: 8px;
-      box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
-      border: 1px solid #eee;
+      margin-bottom: 0.16rem;
+      border-radius: 0.08rem;
+      box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
+      border: 0.01rem solid #eee;
       background: rgb(255, 255, 255);
     }
     .ant-collapse
@@ -118,9 +118,9 @@
       > .ant-collapse-header
       .ant-collapse-expand-icon {
       > span {
-        font-size: 28px;
+        font-size: 0.28rem;
         padding-inline-end: 0;
-        padding-inline-start: 16px;
+        padding-inline-start: 0.16rem;
       }
     }
     .ant-list-split .ant-list-item {
@@ -130,6 +130,6 @@
 }
 
 .main {
-  padding: 20px;
-  margin-top: 40px;
+  padding: 0.2rem;
+  margin-top: 0.4rem;
 }

src/pages/DeviceManager/storage.js

@@ -128,14 +128,14 @@ const StorageOverview = () => {
         <div className={`card-box${styles.main}`}>
           <Spin spinning={loading}>
             <ModuleTitle title="物料种类库存占比" />
-            <div style={{ height: '330px' }}>
+            <div style={{ height: '3.3rem' }}>
               {data?.pieData && <PieChartModule data={data.pieData} />}
             </div>
             <div className={styles.thereItem}>
               <ModuleTitle title="物料库存排名前十统计" />
               <ul
                 style={{
-                  height: '330px',
+                  height: '3.3rem',
                   display: 'flex',
                   flexDirection: 'column',
                 }}
@@ -152,9 +152,9 @@ const StorageOverview = () => {
                         >
                           <div
                             style={{
-                              width: '80px',
+                              width: '0.8rem',
                               textAlign: 'right',
-                              fontSize: '18px',
+                              fontSize: '0.18rem',
                               whiteSpace: 'nowrap',
                             }}
                           >
@@ -177,13 +177,13 @@ const StorageOverview = () => {
             </div>
             <div className={styles.thereItem}>
               <ModuleTitle title="物料报废统计" />
-              <div style={{ height: '330px' }}>
+              <div style={{ height: '3.3rem' }}>
                 {data?.radarData && <RadarChartModule {...data.radarData} />}
               </div>
             </div>
             <div className={styles.twoItem}>
               <ModuleTitle title="出入库统计" />
-              <div style={{ height: '330px' }}>
+              <div style={{ height: '3.3rem' }}>
                 {data?.barData && <BarChartModule {...data.barData} />}
               </div>
             </div>

src/pages/EqSelfInspection/List/index.less

@@ -1,23 +1,23 @@
 .list {
-  margin-top: 40px;
+  margin-top: 0.4rem;
   .item {
-    padding: 28px 75px 28px 124px;
+    padding: 0.28rem 0.75rem 0.28rem 1.24rem;
     display: flex;
     justify-content: space-between;
-    margin-bottom: 18px;
+    margin-bottom: 0.18rem;
     background: #ffffff;
-    box-shadow: 0px 0px 8px 14px rgba(0, 0, 0, 0.03);
-    border-radius: 12px;
+    box-shadow: 0rem 0rem 0.08rem 0.14rem rgba(0, 0, 0, 0.03);
+    border-radius: 0.12rem;
     align-items: center;
   }
   .status {
-    width: 134px;
-    height: 134px;
-    font-size: 32px;
+    width: 1.34rem;
+    height: 1.34rem;
+    font-size: 0.32rem;
     font-weight: 400;
     color: #000000;
     text-align: center;
-    line-height: 134px;
+    line-height: 1.34rem;
     background: url('@/assets/circle-success.png') no-repeat center;
     background-size: 100% 100%;
   }
@@ -26,44 +26,44 @@
   }
   .info {
     flex: 1;
-    padding-left: 100px;
+    padding-left: 1rem;
     i {
-      width: 14px;
-      height: 14px;
+      width: 0.14rem;
+      height: 0.14rem;
       display: inline-block;
       vertical-align: middle;
       border-radius: 50%;
-      margin-right: 14px;
+      margin-right: 0.14rem;
       background-color: rgba(74, 144, 226, 1);
     }
   }
   .time {
-    font-size: 24px;
+    font-size: 0.24rem;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 34px;
+    line-height: 0.34rem;
   }
   .desc {
-    font-size: 32px;
+    font-size: 0.32rem;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 44px;
+    line-height: 0.44rem;
     .number {
-      font-size: 54px;
+      font-size: 0.54rem;
       font-weight: 500;
       color: #f5a623;
-      line-height: 76px;
-      margin-left: 12px;
+      line-height: 0.76rem;
+      margin-left: 0.12rem;
     }
 
     span {
-      font-size: 28px;
+      font-size: 0.28rem;
       color: #000000;
     }
   }
   .btn {
-    width: 23px;
-    height: 35px;
+    width: 0.23rem;
+    height: 0.35rem;
     background: url('@/assets/arr-right.png') no-repeat center;
     background-size: 100% 100%;
   }

src/pages/EqSelfInspection/Statistics.js

@@ -140,7 +140,7 @@ const Statistics = (props) => {
   return (
     <PageContent closeable={false}>
       <PageTitle returnable>系统自检统计</PageTitle>
-      <div className={`${styles.itemMain2} card-box`} style={{padding: '44px 0'}}>
+      <div className={`${styles.itemMain2} card-box`} style={{padding: '0.44rem 0'}}>
         <div style={{ display: 'flex' }}>
           {overviewData?.map((item) => (
             <Text num={item.num} label={item.label} />
@@ -152,7 +152,7 @@ const Statistics = (props) => {
         <Spin spinning={loading}>
           <div
             ref={lineDomRef}
-            style={{ height: '340px', margin: '10px 0 10px 0' }}
+            style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
           />
         </Spin>
       </div>
@@ -160,7 +160,7 @@ const Statistics = (props) => {
         <Spin spinning={pieLoading}>
           <div
             ref={pieDomRef}
-            style={{ height: '340px', margin: '10px 0 10px 0' }}
+            style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
           />
         </Spin>
       </div>

src/pages/EqSelfInspection/components/Detail.js

@@ -1162,7 +1162,7 @@ function ReportDumCom(props) {
             pagination: false,
           }}
           backdrop="rgba(255,255,255,0.5)"
-          style={{ height: '90px' }}
+          style={{ height: '0.9rem' }}
           src={item.path}
         />
       ),
@@ -1214,7 +1214,7 @@ function Empty() {
     <div>
       <img
         src={require('@/assets/self-empty.png')}
-        style={{ margin: '20px 0' }}
+        style={{ margin: '0.2rem 0' }}
       />
       <p style={{ textAlign: 'center', color: '#555' }}>自检正常</p>
     </div>

src/pages/EqSelfInspection/components/PatrolReportDetail.less

@@ -1,5 +1,5 @@
 .page {
-  padding-bottom: 20px;
+  padding-bottom: 0.2rem;
 
   :global {
     .ant-card-head-title {
@@ -10,33 +10,33 @@
 
 .select {
   background: #3682b2;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 0.08rem;
+  border: 0.01rem solid rgba(255, 255, 255, 0.3);
 }
 
 .iconStatus {
-  width: 20px;
-  height: 20px;
+  width: 0.2rem;
+  height: 0.2rem;
   vertical-align: middle;
-  margin-right: 10px;
+  margin-right: 0.1rem;
   border-radius: 50%;
   display: inline-block;
 }
 .detailCard {
-  margin: 10px 0 10px 0;
+  margin: 0.1rem 0 0.1rem 0;
 }
 .text {
   .tabBarExtraContent;
-  font-size: 26px;
+  font-size: 0.26rem;
   text-align: center;
 }
 .abnormal {
-  // margin: 10px 0 10px 0;
-  height: 51px;
+  // margin: 0.1rem 0 0.1rem 0;
+  height: 0.51rem;
   width: 50%;
   .text {
     color: #1677ff;
-    font-size: 28px;
+    font-size: 0.28rem;
   }
 }
 .tabBarExtraContent {
@@ -55,19 +55,19 @@
 }
 .card {
   background: #eff5fc;
-  padding: 10px 20px;
+  padding: 0.1rem 0.2rem;
   position: relative;
   overflow: hidden;
   .orderIcon {
     background: #4a90e2;
-    width: 300px;
+    width: 3rem;
     position: absolute;
-    top: 40px;
-    right: -92px;
+    top: 0.4rem;
+    right: -0.92rem;
     text-align: center;
-    font-size: 24px;
+    font-size: 0.24rem;
     transform: rotate(45deg);
-    padding: 10px 0;
+    padding: 0.1rem 0;
     color: #fff;
     &.error {
       background: #fe5850;
@@ -75,29 +75,29 @@
   }
 }
 .cardText {
-  padding: 20px;
-  font-size: 28px;
+  padding: 0.2rem;
+  font-size: 0.28rem;
 }
 .tableTitle {
   position: absolute;
   top: 50%;
   left: 50%;
-  font-size: 26px;
+  font-size: 0.26rem;
   transform: translate(-50%, -50%);
 }
 .tableTitle2 {
-  font-size: 26px;
+  font-size: 0.26rem;
   text-align: center;
-  margin-bottom: 10px;
+  margin-bottom: 0.1rem;
 }
 .tableStatus {
   color: #4a90e2;
-  font-size: 28px;
+  font-size: 0.28rem;
   position: absolute;
-  right: 10px;
+  right: 0.1rem;
 }
 .content {
-  margin-top: 50px;
+  margin-top: 0.5rem;
   position: relative;
 }
 :global {
@@ -114,7 +114,7 @@
   }
   .ant-table-thead > tr > th,
   .ant-table-tbody > tr > td {
-    padding: 16px 12px !important;
-    font-size: 24px;
+    padding: 0.16rem 0.12rem !important;
+    font-size: 0.24rem;
   }
 }

src/pages/EqSelfInspection/index.js

@@ -126,7 +126,7 @@ const EqSelfInspection = (props) => {
         <div className="content-title">
           <div
             className={`${styles.itemMain} card-box`}
-            style={{ padding: '15px 24px', position: 'relative' }}
+            style={{ padding: '0.15rem 0.24rem', position: 'relative' }}
           >
             <div style={{ fontSize: 28, color: 'rgb(110, 110, 110)' }}>
               自检间隔：{autoReport?.RouteInfo?.PlanDur}分钟

src/pages/EqSelfInspection/index.less

@@ -1,17 +1,17 @@
 .icon {
   position: absolute;
-  top: 15px;
-  right: 18px;
+  top: 0.15rem;
+  right: 0.18rem;
   display: flex;
   .iconDiffFilled,
   .iconFundFilled {
-    width: 37px;
-    height: 41px;
+    width: 0.37rem;
+    height: 0.41rem;
     cursor: pointer;
     background: url('@/assets/iconDiffFilled.png') no-repeat;
   }
   .iconFundFilled {
-    margin-left: 28px;
+    margin-left: 0.28rem;
     background-image: url('@/assets/iconFundFilled.png');
   }
 }
@@ -24,23 +24,23 @@
   .logo {
     background: url('@/assets/defense.png') no-repeat center;
     background-size: 100% 100%;
-    width: 144px;
-    height: 159px;
-    margin-bottom: 6px;
+    width: 1.44rem;
+    height: 1.59rem;
+    margin-bottom: 0.06rem;
   }
   .logoTitle {
-    font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 400;
     color: #6e6e6e;
-    line-height: 38px;
+    line-height: 0.38rem;
     display: flex;
   }
   .logoTime {
-    font-size: 22px;
+    font-size: 0.22rem;
     font-weight: 400;
     color: #6e6e6e;
-    line-height: 28px;
-    margin-top: 10px;
+    line-height: 0.28rem;
+    margin-top: 0.1rem;
   }
   .logoFont {
     position: absolute;
@@ -48,14 +48,14 @@
     align-items: center;
     right: 0;
     bottom: 0;
-    font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 400;
     color: #6e6e6e;
-    line-height: 38px;
+    line-height: 0.38rem;
     .iconSetting {
-      margin-left: 10px;
-      width: 28px;
-      height: 28px;
+      margin-left: 0.1rem;
+      width: 0.28rem;
+      height: 0.28rem;
       background: url('@/assets/icon-setting.png') no-repeat;
       background-size: 100% 100%;
     }
@@ -66,40 +66,40 @@
   position: relative;
   width: 100%;
   justify-content: center;
-  margin-top: 20px;
+  margin-top: 0.2rem;
   :global {
     .ant-btn-primary {
-      font-size: 24px;
-      width: 140px;
-      height: 46px;
+      font-size: 0.24rem;
+      width: 1.4rem;
+      height: 0.46rem;
       cursor: pointer;
     }
   }
 }
 .item {
-  height: 80px;
+  height: 0.8rem;
   display: flex;
   align-items: center;
   position: relative;
-  padding: 0 30px;
+  padding: 0 0.3rem;
   .right {
     position: absolute;
     right: 0;
-    margin-right: 30px;
-    font-size: 28px;
+    margin-right: 0.3rem;
+    font-size: 0.28rem;
   }
   .warningText {
-    margin-left: 40px;
-    font-size: 28px;
+    margin-left: 0.4rem;
+    font-size: 0.28rem;
     font-weight: 400;
     color: #fe5850;
-    line-height: 38px;
+    line-height: 0.38rem;
   }
   .itemName {
-    font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 500;
     color: #4a4a4a;
-    line-height: 38px;
+    line-height: 0.38rem;
     font-weight: bold;
   }
 }
@@ -107,23 +107,23 @@
   float: right;
 }
 .warningItem {
-  // border-bottom: 2px solid #555;
-  height: 80px;
+  // border-bottom: 0.02rem solid #555;
+  height: 0.8rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 30px;
-  border-bottom: 1px solid rgba(219, 219, 219, 1);
+  padding: 0 0.3rem;
+  border-bottom: 0.01rem solid rgba(219, 219, 219, 1);
   &:last-child {
     border-bottom: none;
   }
   span {
-    font-size: 28px;
+    font-size: 0.28rem;
   }
 }
 .iconSuccess {
-  width: 38px;
-  height: 30px;
+  width: 0.38rem;
+  height: 0.3rem;
   background: url('@/assets/icon-success.png') no-repeat;
   background-size: 100% 100%;
 }
@@ -134,25 +134,25 @@
 }
 
 .reportBtn {
-  margin-top: 10px;
+  margin-top: 0.1rem;
   width: 45%;
-  height: 86px;
+  height: 0.86rem;
   display: inline-block;
-  font-size: 30px;
+  font-size: 0.3rem;
   font-weight: 400;
   color: #ffffff;
 }
 .itemMain {
   background-size: 100% 100%;
-  border: 1px;
-  border-radius: 12px;
-  margin-bottom: 20px;
-  margin-top: 20px;
-  padding: 0 10px;
+  border: 0.01rem;
+  border-radius: 0.12rem;
+  margin-bottom: 0.2rem;
+  margin-top: 0.2rem;
+  padding: 0 0.1rem;
 }
 .itemMain2 {
   .itemMain;
-  padding: 20px 10px;
+  padding: 0.2rem 0.1rem;
 }
 .statisticsText {
   display: flex;
@@ -162,23 +162,23 @@
   flex: 1;
   .num {
     color: #f5af3a;
-    font-size: 40px;
-    margin-bottom: 8px;
+    font-size: 0.4rem;
+    margin-bottom: 0.08rem;
     font-weight: bold;
-    letter-spacing: 2px;
-    line-height: 56px;
+    letter-spacing: 0.02rem;
+    line-height: 0.56rem;
   }
   .label {
     color: #555;
-    font-size: 24px;
+    font-size: 0.24rem;
   }
 }
 .dialogBtns {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-top: 30px;
-  margin-left: 40px;
+  margin-top: 0.3rem;
+  margin-left: 0.4rem;
   :global {
     .ant-btn.ant-btn-danger {
       color: #4a4a4a;
@@ -189,8 +189,8 @@
 }
 .dialog {
   // background: url('@/assets/newUI/eqDialog.png') no-repeat center;
-  width: 762px;
-  height: 234px;
+  width: 7.62rem;
+  height: 2.34rem;
   .close {
     // background: url('@/assets/newUI/close.png') no-repeat center;
     background-size: 100% 100%;
@@ -201,17 +201,17 @@
   // flex-direction: row-reverse;
   display: flex;
   color: #555;
-  font-size: 22px;
+  font-size: 0.22rem;
   justify-content: center;
   .item {
-    padding: 4px 20px;
-    border: 1px solid #02a7f0;
-    font-size: 20px;
+    padding: 0.04rem 0.2rem;
+    border: 0.01rem solid #02a7f0;
+    font-size: 0.2rem;
     color: #fff;
     cursor: pointer;
 
     &:nth-child(1) {
-      border-left: 1px solid #02a7f0;
+      border-left: 0.01rem solid #02a7f0;
     }
 
     &.active {

src/pages/Home/ChemCostComparison.js

@@ -297,18 +297,18 @@ const CostComparison = (props) => {
         {chartData.length !== 0 && (
           <div
             style={{
-              height: '880px',
+              height: '8.8rem',
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'space-between',
-              padding: "40px 0"
+              padding: "0.4rem 0"
             }}
           >
-            <div style={{ height: '350px' }}>
+            <div style={{ height: '3.5rem' }}>
               <ChartModule {...chartData[0]} />
             </div>
 
-            <div style={{ height: '350px' }}>
+            <div style={{ height: '3.5rem' }}>
               <ChartModule {...chartData[1]} />
             </div>
           </div>

src/pages/Home/EnergyCostComparison.js

@@ -255,18 +255,18 @@ const CostComparison = () => {
         {chartData.length !== 0 && (
           <div
             style={{
-              height: '920px',
+              height: '9.2rem',
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'space-between',
-              padding: '60px 0 40px',
+              padding: '0.6rem 0 0.4rem',
             }}
           >
-            <div style={{ height: '350px' }}>
+            <div style={{ height: '3.5rem' }}>
               <ChartModule {...chartData[0]} />
             </div>
 
-            <div style={{ height: '350px' }}>
+            <div style={{ height: '3.5rem' }}>
               <ChartModule {...chartData[1]} />
             </div>
           </div>

src/pages/Home/WaterAmtMng.js

@@ -88,7 +88,7 @@ const WaterAmtMng = () => {
           数据曲线
         </div>
         <Spin spinning={loading}>
-          <div style={{ height: '500px', marginTop: 20 }}>
+          <div style={{ height: '5rem', marginTop: 20 }}>
             <ChartModule yName="水量(t)" xData={xData} dataList={dataList} />
           </div>
         </Spin>

src/pages/Home/index.less

@@ -141,7 +141,7 @@
   font-size: 0.22rem;
   margin-bottom: 0.2rem;
   text-align: right;
-  margin-right: 30px;
+  margin-right: 0.3rem;
 }
 .insTag {
   position: absolute;
@@ -184,7 +184,7 @@
     width: 100%;
     font-size: 0.22rem;
     line-height: 0.5rem;
-    border-bottom: 1px solid #ffffff;
+    border-bottom: 0.01rem solid #ffffff;
   }
   .titleCon {
     display: flex;

src/pages/Home/manage.less

@@ -1,20 +1,20 @@
 .title {
   display: inline;
-  margin-bottom: 10px;
-  font-size: 24px;
+  margin-bottom: 0.1rem;
+  font-size: 0.24rem;
   color: #02a7f0;
 }
 .itemContent {
-  margin: 6px 6px;
+  margin: 0.06rem 0.06rem;
   text-align: center;
   flex-grow: 1;
   background-color: #2f62ae;
   width: 20%;
-  padding: 10px 0;
+  padding: 0.1rem 0;
   .data {
     color: palevioletred;
-    font-size: 24px;
-    margin-right: 6px;
+    font-size: 0.24rem;
+    margin-right: 0.06rem;
   }
 }
 
@@ -24,10 +24,10 @@
       background: none;
     }
     .ant-tabs-nav .ant-tabs-tab {
-      padding: 2px 16px;
+      padding: 0.02rem 0.16rem;
       background-color: #2196f330;
       border: none;
-      margin: 0 6px;
+      margin: 0 0.06rem;
     }
     .ant-tabs-tab-active {
       background-color: #366cda !important;
@@ -43,7 +43,7 @@
       margin: 0;
     }
     // .ant-tabs-tab-prev-icon{
-    //   border: solid 20px ;
+    //   border: solid 0.2rem ;
     //   border-color: transparent #366CDA transparent  transparent ;
     //   i{
     //     width: 0;
@@ -56,12 +56,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 40px 40px 0 40px;
+  margin: 0.4rem 0.4rem 0 0.4rem;
   .item {
     width: 50%;
-    letter-spacing: 2px;
+    letter-spacing: 0.02rem;
     position: relative;
-    font-size: 24px;
+    font-size: 0.24rem;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -73,26 +73,26 @@
       justify-content: center;
       align-items: flex-end;
       line-height: 1;
-      margin-bottom: 8px;
+      margin-bottom: 0.08rem;
 
-      font-size: 40px;
+      font-size: 0.4rem;
       font-weight: 500;
       color: #f5a623;
-      line-height: 56px;
+      line-height: 0.56rem;
     }
     .name {
-      margin-bottom: 4px;
+      margin-bottom: 0.04rem;
       max-width: 80%;
 
-      font-size: 24px;
+      font-size: 0.24rem;
       color: #4a4a4a;
-      line-height: 26px;
+      line-height: 0.26rem;
     }
     .unit {
-      font-size: 30px;
+      font-size: 0.3rem;
       font-weight: 500;
       color: #f5a623;
-      line-height: 42px;
+      line-height: 0.42rem;
     }
   }
 }

src/pages/Menu/index.less

@@ -18,9 +18,9 @@
   overflow-y: auto;
 }
 .menuItem {
-  padding: 20px;
+  padding: 0.2rem;
   color: #333;
-  font-size: 28px;
+  font-size: 0.28rem;
   cursor: pointer;
 
   &.active {

src/pages/MessageCenter/index.less

@@ -1,6 +1,6 @@
 .itemContent {
-  margin-bottom: 16px;
-  padding: 38px 40px 26px;
+  margin-bottom: 0.16rem;
+  padding: 0.38rem 0.4rem 0.26rem;
   display: flex;
   justify-content: space-between;
   .right {
@@ -10,44 +10,44 @@
     align-items: end;
     .redPoint {
       background-color: red;
-      width: 18px;
-      height: 18px;
-      border-radius: 9px;
+      width: 0.18rem;
+      height: 0.18rem;
+      border-radius: 0.09rem;
     }
     .nonePoint {
-      width: 10px;
-      height: 10px;
+      width: 0.1rem;
+      height: 0.1rem;
     }
   }
   .img {
-    width: 42px;
-    height: 44px;
+    width: 0.42rem;
+    height: 0.44rem;
   }
   .text {
-    font-size: 38px;
+    font-size: 0.38rem;
     color: #000000;
-    line-height: 54px;
-    margin-bottom: 28px;
+    line-height: 0.54rem;
+    margin-bottom: 0.28rem;
   }
   .time {
-    font-size: 30px;
+    font-size: 0.3rem;
     font-weight: normal;
     color: #4a4a4a;
-    line-height: 40px;
+    line-height: 0.4rem;
   }
   .btn {
-    width: 140px;
-    height: 60px;
-    font-size: 30px;
+    width: 1.4rem;
+    height: 0.6rem;
+    font-size: 0.3rem;
     color: #ffffff;
-    line-height: 40px;
+    line-height: 0.4rem;
   }
 }
 .allRead {
   position: absolute;
-  top: 47.5px;
-  line-height: 24px;
-  right: 104px;
-  font-size: 32px;
+  top: 0.475rem;
+  line-height: 0.24rem;
+  right: 1.04rem;
+  font-size: 0.32rem;
   cursor: pointer;
 }

src/pages/Projects/index.less

@@ -95,7 +95,7 @@
     font-family: Source Han Sans, Source Han Sans;
     color: #615d5d;
     line-height: 0.24rem;
-    letter-spacing: 1px;
+    letter-spacing: 0.01rem;
     .value {
       font-size: 0.3rem;
       font-family: PangMenZhengDao-3, PangMenZhengDao-3;

src/pages/SafetyManagement/doorDetail.js

@@ -72,7 +72,7 @@ const DoorDetail = () => {
       >
         <Table
           loading={loading}
-          style={{ marginTop: '30px' }}
+          style={{ marginTop: '0.3rem' }}
           dataSource={list}
           columns={columns}
           pagination={false}

src/pages/SafetyManagement/index.less

@@ -4,22 +4,22 @@
 }
 
 .img {
-  width: 154px;
-  margin-right: 20px;
+  width: 1.54rem;
+  margin-right: 0.2rem;
 }
 .num {
-  font-size: 80px;
+  font-size: 0.8rem;
   font-weight: bold;
   font-family: DINAlternate-Bold, DINAlternate;
-  line-height: 94px;
-  margin-bottom: 16px;
+  line-height: 0.94rem;
+  margin-bottom: 0.16rem;
   color: #4a90e2;
 }
 .point {
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  margin-right: 12px;
+  width: 0.2rem;
+  height: 0.2rem;
+  border-radius: 0.1rem;
+  margin-right: 0.12rem;
 }
 .onlinePoint {
   .point;
@@ -31,15 +31,15 @@
 }
 .rightIcon {
   position: absolute;
-  right: 20px;
-  top: 20px;
+  right: 0.2rem;
+  top: 0.2rem;
 }
 .cardItem {
   display: flex;
-  padding: 40px 44px 32px;
+  padding: 0.4rem 0.44rem 0.32rem;
   align-items: center;
   .name {
-    font-size: 32px;
+    font-size: 0.32rem;
     color: #000000;
   }
 }
@@ -48,9 +48,9 @@
   align-items: center;
 }
 .text {
-  font-size: 28px;
+  font-size: 0.28rem;
   color: #4a4a4a;
-  line-height: 38px;
+  line-height: 0.38rem;
 }
 .sparePart {
   width: 100%;
@@ -59,10 +59,10 @@
     display: flex;
     // justify-content: space-between;
     align-items: center;
-    padding: 48px 0 28px 104px;
+    padding: 0.48rem 0 0.28rem 1.04rem;
     .titleLeft {
       display: flex;
-      margin-right: 96px;
+      margin-right: 0.96rem;
       .textCon {
         text-align: center;
         margin: auto;
@@ -70,7 +70,7 @@
     }
     .lTextCon1 {
       .lTextCon2;
-      margin-bottom: 32px;
+      margin-bottom: 0.32rem;
     }
   }
 }
@@ -84,12 +84,12 @@
       .up {
         display: flex;
         align-items: center;
-        margin-top: 32px;
-        margin-left: 30px;
+        margin-top: 0.32rem;
+        margin-left: 0.3rem;
         .img {
-          width: 154px;
-          // height: 130px;
-          margin-right: 20px;
+          width: 1.54rem;
+          // height: 1.3rem;
+          margin-right: 0.2rem;
         }
         .textCon {
           text-align: center;
@@ -97,7 +97,7 @@
       }
       .bottom {
         display: flex;
-        margin: 28px 0 6px;
+        margin: 0.28rem 0 0.06rem;
         justify-content: space-around;
       }
     }
@@ -107,16 +107,16 @@
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
-      padding: 28px 0 32px 0;
+      padding: 0.28rem 0 0.32rem 0;
       .btn {
-        width: 157px;
-        height: 55px;
+        width: 1.57rem;
+        height: 0.55rem;
         background: rgba(222, 237, 255, 0.91);
-        border-radius: 6px;
-        padding: 8px 26px;
-        font-size: 28px;
+        border-radius: 0.06rem;
+        padding: 0.08rem 0.26rem;
+        font-size: 0.28rem;
         color: #329bfe;
-        line-height: 38px;
+        line-height: 0.38rem;
       }
       .in {
         .point;

src/pages/Smart/ConditionDetection.less

@@ -1,32 +1,32 @@
 .card {
   background-size: 100% 100%;
-  border-radius: 14px;
-  padding: 14px 20px;
-  // margin: 10px 0;
-  margin-top: 10px;
-  box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
+  border-radius: 0.14rem;
+  padding: 0.14rem 0.2rem;
+  // margin: 0.1rem 0;
+  margin-top: 0.1rem;
+  box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
   h3 {
-    margin-bottom: 30px;
+    margin-bottom: 0.3rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 500;
     color: #4a4a4a;
-    line-height: 40px;
+    line-height: 0.4rem;
     span {
-      font-size: 32px;
+      font-size: 0.32rem;
       color: #4a90e2;
     }
   }
   ul {
-    margin: 0px;
-    margin-bottom: 10px;
+    margin: 0rem;
+    margin-bottom: 0.1rem;
     padding: 0;
-    padding-left: 30px;
+    padding-left: 0.3rem;
     li {
-      margin-bottom: 14px;
-      font-size: 23px;
+      margin-bottom: 0.14rem;
+      font-size: 0.23rem;
       &:last-child {
         margin-bottom: 0;
       }
@@ -35,11 +35,11 @@
 
   i {
     display: inline-block;
-    width: 14px;
-    height: 14px;
+    width: 0.14rem;
+    height: 0.14rem;
     background-color: #4a90e2;
     border-radius: 50%;
-    margin-right: 12px;
+    margin-right: 0.12rem;
   }
 }
 
@@ -55,8 +55,8 @@
 .content {
   position: relative;
   .img {
-    width: 78px;
-    height: 138px;
+    width: 0.78rem;
+    height: 1.38rem;
     background: url('~@/assets/vs.png') no-repeat;
     background-size: 100% 100%;
     position: absolute;
@@ -70,25 +70,25 @@
   flex-direction: column;
   align-items: center;
   // color: #fff;
-  font-size: 24px;
+  font-size: 0.24rem;
   p {
-    margin-top: 14px;
-    font-size: 30px;
+    margin-top: 0.14rem;
+    font-size: 0.3rem;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 40px;
+    line-height: 0.4rem;
     margin-bottom: 0;
   }
 }
 .circleText {
   // color: #fff;
-  font-size: 44px;
+  font-size: 0.44rem;
 }
 
 .title {
-  font-size: 24px;
+  font-size: 0.24rem;
   text-align: center;
   // color: #fff;
-  margin-bottom: 10px;
-  letter-spacing: 2px;
+  margin-bottom: 0.1rem;
+  letter-spacing: 0.02rem;
 }

src/pages/Smart/OptimizationTasks.less

@@ -10,44 +10,44 @@
   position: absolute;
   left: 2.25rem;
   top: 0.15rem;
-  height: 50px;
-  font-size: 26px;
-  line-height: 26px;
+  height: 0.5rem;
+  font-size: 0.26rem;
+  line-height: 0.26rem;
   display: flex;
   align-items: flex-end;
 }
 
 .title {
-  font-size: 32px;
-  margin-bottom: 16px;
+  font-size: 0.32rem;
+  margin-bottom: 0.16rem;
   font-weight: bold;
-  line-height: 44px;
+  line-height: 0.44rem;
   display: flex;
   align-items: center;
   i {
     display: inline-block;
     vertical-align: middle;
-    width: 14px;
-    height: 14px;
+    width: 0.14rem;
+    height: 0.14rem;
     border-radius: 50%;
     background-color: #4a90e2;
-    margin-right: 10px;
+    margin-right: 0.1rem;
   }
 }
 .desc {
-  font-size: 30px;
+  font-size: 0.3rem;
   font-weight: 400;
   color: #4a4a4a;
 }
 
 .content {
   display: flex;
-  padding: 20px;
+  padding: 0.2rem;
   align-items: center;
   .left {
-    width: 150px;
+    width: 1.5rem;
     margin: 0;
-    font-size: 24px;
+    font-size: 0.24rem;
     font-weight: 400;
     color: #3b3b3b;
   }
@@ -57,58 +57,58 @@
 }
 .orderIcon {
   background: #12ceb3;
-  width: 300px;
+  width: 3rem;
   position: absolute;
-  top: 40px;
-  right: -92px;
+  top: 0.4rem;
+  right: -0.92rem;
   text-align: center;
-  font-size: 24px;
+  font-size: 0.24rem;
   transform: rotate(45deg);
-  padding: 10px 0;
+  padding: 0.1rem 0;
   color: #fff;
 }
 .pageCard {
-  padding: 20px;
-  margin-top: 30px;
+  padding: 0.2rem;
+  margin-top: 0.3rem;
   overflow: hidden;
-  border-radius: 26px;
-  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
-  border: 1px solid #eee;
+  border-radius: 0.26rem;
+  box-shadow: 0.02rem 0 0.08rem 0 rgba(0, 0, 0, 0.3);
+  border: 0.01rem solid #eee;
   background: rgb(255, 255, 255);
 }
 .bottom {
-  border-top: 1px solid #c0c0c0;
-  padding: 38px;
+  border-top: 0.01rem solid #c0c0c0;
+  padding: 0.38rem;
   height: 100%;
   .bottomText {
-    font-size: 24px;
+    font-size: 0.24rem;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 34px;
+    line-height: 0.34rem;
     text-align: center;
   }
 }
 .btnOrange {
-  width: 120px;
-  height: 56px;
+  width: 1.2rem;
+  height: 0.56rem;
   background: rgba(245, 166, 35, 0.75);
-  border-radius: 5px;
-  font-size: 24px;
+  border-radius: 0.05rem;
+  font-size: 0.24rem;
   font-weight: 400;
   color: #ffffff;
-  line-height: 56px;
+  line-height: 0.56rem;
   text-align: center;
 }
 
 .btnBlue {
-  width: 120px;
-  height: 56px;
+  width: 1.2rem;
+  height: 0.56rem;
   background: rgba(74, 144, 226, 0.75);
-  border-radius: 5px;
-  font-size: 24px;
+  border-radius: 0.05rem;
+  font-size: 0.24rem;
   font-weight: 400;
   color: #ffffff;
-  line-height: 56px;
+  line-height: 0.56rem;
   text-align: center;
 }
 

src/pages/Smart/Params/components/TargetList.js

@@ -13,7 +13,7 @@ const TargetList = ({ onEdit, current, setCurrent, onDelete, list: data, loading
       let items = Object.keys(data).map(name => {
         return (
           <Col span={8} key={name}>
-            <div style={{ fontSize: 18, // color: '#fff', margin: '5px 0' }}>
+            <div style={{ fontSize: 18, // color: '#fff', margin: '0.05rem 0' }}>
               <span>{name}: </span>
               <span>{data[name]}</span>
             </div>
@@ -94,7 +94,7 @@ const TargetList = ({ onEdit, current, setCurrent, onDelete, list: data, loading
         loading={loading}
         dataSource={data}
         renderItem={renderItem}
-        style={{ height: '626px', overflowY: 'auto' }}
+        style={{ height: '6.26rem', overflowY: 'auto' }}
       />
     </Panel>
   );

src/pages/Smart/Params/components/TargetOperatingConditions.js

@@ -21,7 +21,7 @@ const TargetOperatingConditions = ({
       let items = Object.keys(data).map(name => {
         return (
           <Col span={8} key={name}>
-            <div style={{ fontSize: 18, // color: '#fff', margin: '5px 0' }}>
+            <div style={{ fontSize: 18, // color: '#fff', margin: '0.05rem 0' }}>
               <span>{name}: </span>
               <span>{data[name]}</span>
             </div>
@@ -104,7 +104,7 @@ const TargetOperatingConditions = ({
         loading={loading}
         dataSource={data}
         renderItem={renderItem}
-        style={{ height: '626px', overflowY: 'auto' }}
+        style={{ height: '6.26rem', overflowY: 'auto' }}
       />
     </Panel>
   );

src/pages/Smart/Params/components/WorkConditionAssessment.js

@@ -46,11 +46,11 @@ const WorkConditionAssessment = (props) => {
 
   return (
     <Panel title="工况评估">
-      <div style={{ position: 'relative', margin: '20px 0' }}>
+      <div style={{ position: 'relative', margin: '0.2rem 0' }}>
         <div
           style={{
             fontSize: 20,
-            padding: '0px 8px',
+            padding: '0rem 0.08rem',
             color: '#FFF',
             background: '#fac858',
             borderRadius: 4,
@@ -69,7 +69,7 @@ const WorkConditionAssessment = (props) => {
         <div
           style={{
             fontSize: 20,
-            padding: '0px 8px',
+            padding: '0rem 0.08rem',
             color: '#FFF',
             background: '#ee6666',
             borderRadius: 4,

src/pages/Smart/Params/index.less

@@ -4,6 +4,6 @@
   justify-content: space-between;
 
   .Col {
-    width: calc(50% - 10px);
+    width: calc(50% - 0.1rem);
   }
 }

src/pages/Smart/components/CircleScore.less

@@ -1,13 +1,13 @@
 .circleScore {
-  width: 174px;
-  height: 174px;
+  width: 1.74rem;
+  height: 1.74rem;
   position: relative;
 }
 .big {
-  width: 194px;
-  height: 194px;
+  width: 1.94rem;
+  height: 1.94rem;
   .circle {
-    mask: radial-gradient(transparent, transparent 78px, #000 78px);
+    mask: radial-gradient(transparent, transparent 0.78rem, #000 0.78rem);
   }
 }
 
@@ -17,7 +17,7 @@
   border-radius: 50%;
   animation: rotation 4s linear infinite;
   background: linear-gradient(60deg, #36a5ed 0%, #6eee96 100%);
-  mask: radial-gradient(transparent, transparent 75px, #000 77px);
+  mask: radial-gradient(transparent, transparent 0.75rem, #000 0.77rem);
 }
 
 .text {
@@ -25,7 +25,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 44px;
+  font-size: 0.44rem;
   font-weight: bold;
   // color: #fff;
   text-align: center;

src/pages/Smart/components/Panel.js

@@ -11,7 +11,7 @@ export default ({ title, children, btns, style, rightTitle }) => {
       <div
         style={{
           display: 'flex',
-          padding: '0 10px',
+          padding: '0 0.1rem',
           marginBottom: 10,
           height: 40,
           alignItems: 'center',
@@ -25,7 +25,7 @@ export default ({ title, children, btns, style, rightTitle }) => {
               width: 8,
               height: 30,
               backgroundColor: '#366CDA',
-              marginLeft: rightTitle ? '10px' : '0',
+              marginLeft: rightTitle ? '0.1rem' : '0',
             }}
           />
           <span style={{ fontSize: 22, paddingLeft: 12 }}>{title}</span>

src/pages/Smart/components/SimulateDetail.js

@@ -272,7 +272,7 @@ const ChartContent = (props) => {
           </div>
           {active == 1 && (
             <AreaChartOutlined
-              style={{ float: 'right', lineHeight: '56px', marginRight: 20 }}
+              style={{ float: 'right', lineHeight: '0.56rem', marginRight: 20 }}
               onClick={() => setVisible(true)}
             />
           )}
@@ -386,25 +386,25 @@ function getOption(data = [], active) {
         {
           name: '物理实际冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data1,
         },
         {
           name: '物理模拟冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data2,
         },
         {
           name: '化学实际冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data3,
         },
         {
           name: '化学模拟冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data4,
         },
       ];
@@ -429,13 +429,13 @@ function getOption(data = [], active) {
         {
           name: '实际冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data1,
         },
         {
           name: '模拟冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data2,
         },
       ];
@@ -462,13 +462,13 @@ function getOption(data = [], active) {
         {
           name: '实际',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data1,
         },
         {
           name: '模拟',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data2,
         },
       ];
@@ -488,13 +488,13 @@ function getOption(data = [], active) {
         {
           name: '实际物理投加量',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data1,
         },
         {
           name: '理论物理投加量',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data2,
         },
       ];

src/pages/Smart/components/SimulateDetail.less

@@ -3,12 +3,12 @@
 }
 
 .title {
-  padding-left: 20px;
-  height: 56px;
+  padding-left: 0.2rem;
+  height: 0.56rem;
   width: 100%;
-  font-size: 24px;
+  font-size: 0.24rem;
   // color: #fff;
-  line-height: 56px;
+  line-height: 0.56rem;
   // background: url('@/assets/newUI/theadBg.png') no-repeat center;
   background-size: 100% 100%;
 }
@@ -16,13 +16,13 @@
 .listBox {
   width: 33%;
   height: 100%;
-  margin-right: 40px;
+  margin-right: 0.4rem;
   display: flex;
   flex-direction: column;
-  max-width: 220px;
+  max-width: 2.2rem;
   :global {
     .ant-empty {
-      margin-left: -30px;
+      margin-left: -0.3rem;
     }
   }
 }
@@ -35,11 +35,11 @@
 .listItem {
   display: block !important;
   text-align: center;
-  margin-bottom: 5px;
+  margin-bottom: 0.05rem;
   // color: #fff;
-  font-size: 20px;
+  font-size: 0.2rem;
   cursor: pointer;
-  border-bottom: 1px solid rgba(153, 231, 255, 0.4);
+  border-bottom: 0.01rem solid rgba(153, 231, 255, 0.4);
 }
 
 .listItemActive {
@@ -52,16 +52,16 @@
   width: 72%;
   align-items: center;
   .item {
-    padding: 4px 20px;
-    border: 1px solid #02a7f0;
+    padding: 0.04rem 0.2rem;
+    border: 0.01rem solid #02a7f0;
     border-left: none;
-    font-size: 20px;
+    font-size: 0.2rem;
     cursor: pointer;
-    max-height: 40px;
+    max-height: 0.4rem;
     width: 100%;
     white-space: nowrap;
     &:nth-child(1) {
-      border-left: 1px solid #02a7f0;
+      border-left: 0.01rem solid #02a7f0;
     }
 
     &.active {
@@ -71,18 +71,18 @@
   .left {
     // background: url('@/assets/newUI/left.png') no-repeat center;
     background-size: 100% 100%;
-    width: 31px;
-    height: 32px;
-    margin-right: 12px;
+    width: 0.31rem;
+    height: 0.32rem;
+    margin-right: 0.12rem;
     cursor: pointer;
   }
 
   .right {
     // background: url('@/assets/newUI/right.png') no-repeat center;
     background-size: 100% 100%;
-    width: 31px;
-    height: 32px;
-    margin-left: 12px;
+    width: 0.31rem;
+    height: 0.32rem;
+    margin-left: 0.12rem;
     cursor: pointer;
   }
   .content {
@@ -95,20 +95,20 @@
 .chartBox {
   width: 100%;
   height: 100%;
-  padding: 28px 32px;
+  padding: 0.28rem 0.32rem;
   :global {
     .ant-select-selection-item {
-      line-height: 60px !important;
-      font-size: 30px !important;
+      line-height: 0.6rem !important;
+      font-size: 0.3rem !important;
     }
     .ant-select-selector {
-      height: 60px !important;
+      height: 0.6rem !important;
     }
   }
 }
 :global {
   .ant-select-dropdown .ant-select-item {
-    font-size: 24px !important;
+    font-size: 0.24rem !important;
   }
 }
 
@@ -116,10 +116,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 30px;
+  margin-bottom: 0.3rem;
   :global {
     .ant-select .ant-select-arrow {
-      font-size: 24px;
+      font-size: 0.24rem;
       color: black;
     }
   }
@@ -127,15 +127,15 @@
 
 .dateTabs {
   display: flex;
-  border: 1px solid #d5d5d5;
-  height: 60px;
+  border: 0.01rem solid #d5d5d5;
+  height: 0.6rem;
   .dateTabsItem {
-    width: 128px;
+    width: 1.28rem;
     text-align: center;
     cursor: pointer;
-    border-right: 1px solid #d5d5d5;
-    line-height: 60px;
-    font-size: 24px;
+    border-right: 0.01rem solid #d5d5d5;
+    line-height: 0.6rem;
+    font-size: 0.24rem;
     font-weight: 400;
     color: #4a4a4a;
     &:last-child {
@@ -149,30 +149,30 @@
 }
 .optimization {
   background-color: rgba(245, 166, 35, 0.08);
-  padding: 20px 30px;
-  margin-top: 24px;
+  padding: 0.2rem 0.3rem;
+  margin-top: 0.24rem;
   .title1 {
-    font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 38px;
-    margin-bottom: 20px;
+    line-height: 0.38rem;
+    margin-bottom: 0.2rem;
   }
   .title2 {
-    padding: 6px 20px;
+    padding: 0.06rem 0.2rem;
     background: rgba(245, 166, 35, 0.35);
-    font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 38px;
-    margin-bottom: 12px;
+    line-height: 0.38rem;
+    margin-bottom: 0.12rem;
   }
   .content {
-    font-size: 28px;
+    font-size: 0.28rem;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 38px;
-    padding-left: 20px;
-    margin-bottom: 10px;
+    line-height: 0.38rem;
+    padding-left: 0.2rem;
+    margin-bottom: 0.1rem;
   }
 }

src/pages/Smart/index.less

@@ -1,63 +1,63 @@
 .score {
-  margin: 40px 0 52px;
+  margin: 0.4rem 0 0.52rem;
   // color: #fff;
   display: flex;
   align-items: center;
-  padding-left: 60px;
+  padding-left: 0.6rem;
 }
 
 .scoreRight {
-  margin-left: 56px;
+  margin-left: 0.56rem;
 
   h3 {
-    font-size: 28px;
+    font-size: 0.28rem;
     font-family: PingFangSC-Regular, PingFang SC;
     color: #4a4a4a;
-    line-height: 40px;
-    margin-bottom: 9px;
+    line-height: 0.4rem;
+    margin-bottom: 0.09rem;
   }
 
   .time {
-    margin-bottom: 16px;
-    font-size: 24px;
+    margin-bottom: 0.16rem;
+    font-size: 0.24rem;
     font-weight: 400;
     color: #6e6e6e;
-    line-height: 32px;
+    line-height: 0.32rem;
   }
   .btn {
-    height: 66px;
-    width: 134px;
-    font-size: 22px;
+    height: 0.66rem;
+    width: 1.34rem;
+    font-size: 0.22rem;
   }
 }
 
 .card {
-  border-radius: 8px;
-  box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
-  padding: 24px 20px;
-  border: 1px solid #eee;
+  border-radius: 0.08rem;
+  box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
+  padding: 0.24rem 0.2rem;
+  border: 0.01rem solid #eee;
   background: rgb(255, 255, 255);
-  margin-bottom: 40px;
+  margin-bottom: 0.4rem;
 
   h3 {
-    font-size: 30px;
+    font-size: 0.3rem;
     color: #4a4a4a;
-    line-height: 38px;
-    margin-bottom: 26px;
+    line-height: 0.38rem;
+    margin-bottom: 0.26rem;
     font-weight: bold;
   }
 
   ul {
     margin: 0;
     padding: 0;
-    padding-bottom: 10px;
+    padding-bottom: 0.1rem;
 
     li {
-      margin-bottom: 20px;
-      font-size: 26px;
+      margin-bottom: 0.2rem;
+      font-size: 0.26rem;
       font-weight: 400;
       color: #4a4a4a;
-      line-height: 30px;
+      line-height: 0.3rem;
       &:last-child {
         margin-bottom: 0;
       }
@@ -66,11 +66,11 @@
 
   i {
     display: inline-block;
-    width: 14px;
-    height: 14px;
+    width: 0.14rem;
+    height: 0.14rem;
     background-color: #4a90e2;
     border-radius: 50%;
-    margin-right: 8px;
+    margin-right: 0.08rem;
   }
 }
 

src/pages/SmartOps/ChartPage.js

@@ -211,7 +211,7 @@ const ChartPage = (props) => {
       </div>
 
       <Spin spinning={loading}>
-        <div style={{ height: 'calc(100vh - 100px)' }}>
+        <div style={{ height: 'calc(100vh - 1rem)' }}>
           {options ? (
             <ChartModule chartType="line" {...options} />
           ) : (

src/pages/SmartOps/OperationRecord.js

@@ -204,7 +204,7 @@ const OperationRecord = (props) => {
           className={[styles.timePicker, styles.marginRight].join(' ')}
           onChange={(value) => handleParamsChange('date', value)}
         />
-        <span style={{ marginLeft: '20px' }}>来源:</span>
+        <span style={{ marginLeft: '0.2rem' }}>来源:</span>
         <Select
           placeholder="请选择来源"
           style={{ width: 250 }}

src/pages/SmartOps/WorkAnalysisDetail.js

@@ -472,7 +472,7 @@ const ChartContent = (props) => {
             fontSize: 22,
             color: '#000',
             textIndent: 30,
-            padding: '10px 0',
+            padding: '0.1rem 0',
             flexShrink: 1,
           }}
         >
@@ -535,25 +535,25 @@ function getOption(data = [], active) {
         {
           name: '物理实际冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data1,
         },
         {
           name: '物理模拟冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data2,
         },
         {
           name: '化学实际冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data3,
         },
         {
           name: '化学模拟冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data4,
         },
       ];
@@ -578,13 +578,13 @@ function getOption(data = [], active) {
         {
           name: '实际冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data1,
         },
         {
           name: '模拟冲洗',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data2,
         },
       ];
@@ -611,13 +611,13 @@ function getOption(data = [], active) {
         {
           name: '实际',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data1,
         },
         {
           name: '模拟',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data2,
         },
       ];
@@ -637,13 +637,13 @@ function getOption(data = [], active) {
         {
           name: '实际物理投加量',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data1,
         },
         {
           name: '理论物理投加量',
           type: 'bar',
-          barMaxWidth: '20px',
+          barMaxWidth: '0.2rem',
           data: data2,
         },
       ];

src/pages/SmartOps/WorkAnalysisDetail.less

@@ -2,36 +2,36 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 32px;
+  font-size: 0.32rem;
   color: #4a90e2;
-  padding: 40px 20px;
-  margin-top: 52px;
+  padding: 0.4rem 0.2rem;
+  margin-top: 0.52rem;
 
   background: #d9e7f9;
-  box-shadow: 0px 0px 12px 7px rgba(40, 94, 120, 0.03);
-  border-radius: 16px;
+  box-shadow: 0rem 0rem 0.12rem 0.07rem rgba(40, 94, 120, 0.03);
+  border-radius: 0.16rem;
   span {
     color: #f5a623;
   }
 }
 
 .form {
-  margin-bottom: 14px;
+  margin-bottom: 0.14rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .dateTabs {
   display: flex;
-  border: 1px solid #d5d5d5;
-  height: 60px;
+  border: 0.01rem solid #d5d5d5;
+  height: 0.6rem;
   .dateTabsItem {
-    width: 128px;
+    width: 1.28rem;
     text-align: center;
     cursor: pointer;
-    border-right: 1px solid #d5d5d5;
-    line-height: 60px;
-    font-size: 24px;
+    border-right: 0.01rem solid #d5d5d5;
+    line-height: 0.6rem;
+    font-size: 0.24rem;
     font-weight: 400;
     color: #4a4a4a;
     &:last-child {
@@ -44,7 +44,7 @@
   }
 }
 .chartBox {
-  padding-bottom: 40px;
+  padding-bottom: 0.4rem;
 }
 .pageContent {
   :global {
@@ -52,29 +52,29 @@
       border: none !important;
     }
     .ant-collapse > .ant-collapse-item {
-      border-radius: 8px;
-      box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
-      border: 1px solid #eee;
+      border-radius: 0.08rem;
+      box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
+      border: 0.01rem solid #eee;
       background: #4a4a4a;
-      padding: 0 30px;
-      margin-bottom: 30px;
+      padding: 0 0.3rem;
+      margin-bottom: 0.3rem;
       > .ant-collapse-header {
         background: transparent;
         color: #4a4a4a;
-        height: 108px;
-        font-size: 28px;
+        height: 1.08rem;
+        font-size: 0.28rem;
         padding: 0;
-        border-bottom: 1px solid transparent;
+        border-bottom: 0.01rem solid transparent;
         display: flex;
         align-items: center;
         .ant-collapse-arrow {
-          font-size: 28px;
+          font-size: 0.28rem;
           right: 0;
           color: #c0c2c8;
         }
         .ant-collapse-extra {
           position: absolute;
-          right: 30px;
+          right: 0.3rem;
         }
       }
     }

src/pages/SmartOps/components/BarModal.js

@@ -44,7 +44,7 @@ const BarModal = ({ type = 1, title, data, visible, onCancel, onChange }) => {
     >
       <DateRadio onChange={(tab) => onChange(tab)} />
 
-      <div style={{ height: '600px' }}>
+      <div style={{ height: '6rem' }}>
         {type == 1 && (
           <BarChartModule
             xData={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}

src/pages/SmartOps/components/BarModal.less

@@ -1,20 +1,20 @@
 .top {
-  margin-bottom: 10px;
+  margin-bottom: 0.1rem;
   display: flex;
   justify-content: right;
   .tabContent {
-    width: 180px;
+    width: 1.8rem;
     display: flex;
     background: #061134;
     color: #4a90e2;
-    border: 1px solid #4a90e2;
+    border: 0.01rem solid #4a90e2;
     .tab {
       flex-wrap: 0;
       text-align: center;
-      line-height: 50px;
-      width: 60px;
-      height: 50px;
-      border-right: 1px solid #4a90e2;
+      line-height: 0.5rem;
+      width: 0.6rem;
+      height: 0.5rem;
+      border-right: 0.01rem solid #4a90e2;
     }
     .tabActive {
       .tab;

src/pages/SmartOps/components/DeviceAnalysis.less

@@ -2,10 +2,10 @@
   background: rgba(145, 192, 238, 0.16) !important;
 }
 .iconStatus {
-  width: 20px;
-  height: 20px;
+  width: 0.2rem;
+  height: 0.2rem;
   vertical-align: middle;
-  margin-right: 10px;
+  margin-right: 0.1rem;
   border-radius: 50%;
   display: inline-block;
 }

src/pages/SmartOps/components/ThresholdBar.less

@@ -1,25 +1,25 @@
 .bar {
-  padding: 30px 14px;
+  padding: 0.3rem 0.14rem;
 }
 
 .box {
   width: 100%;
-  height: 6px;
+  height: 0.06rem;
   position: relative;
   background-color: #D45C41;
 
 }
 .scale {
   position: absolute;
-  top: 16px;
+  top: 0.16rem;
   line-height: 1.2;
-  font-size: 16px;
+  font-size: 0.16rem;
   word-break: keep-all;
   transform: translateX(-50%);
 
   &.top {
     top: inherit;
-    bottom: 16px;
+    bottom: 0.16rem;
   }
   &.min {
     left: 0;
@@ -34,13 +34,13 @@
   transform: translate(-50%, -50%);
   z-index: 10;
   // height: 120%;
-  width: 9px;
-  height: 22px;
+  width: 0.09rem;
+  height: 0.22rem;
   background: url("@/assets/current.png") no-repeat center;
   background-size: 100% 100%;
   // .currentBar {
   //   height: 100%;
-  //   width: 4px;
+  //   width: 0.04rem;
   //   background-color: #fff;
   // }
 }

src/pages/SmartOps/components/VideoAnalysis.js

@@ -148,7 +148,7 @@ function AnalysisContent({ errorData, selectedName, setSelectedName }) {
               <div>参数：{item.patrol_name}</div>
               <div className={styles.threshold}>
                 <span>阈值范围：</span>
-                <div style={{ width: '180px' }}>
+                <div style={{ width: '1.8rem' }}>
                   <ThresholdDetail
                     current={item.value || 0}
                     data={{
@@ -180,7 +180,7 @@ function AnalysisContent({ errorData, selectedName, setSelectedName }) {
               <div> 差值：{item.value} </div>
               <div className={styles.threshold}>
                 <span>阈值范围：</span>
-                <div style={{ width: '180px' }}>
+                <div style={{ width: '1.8rem' }}>
                   <ThresholdDetail
                     current={item.value || 0}
                     data={{
@@ -221,7 +221,7 @@ function AnalysisContent({ errorData, selectedName, setSelectedName }) {
   return (
     <div
       className={styles.page}
-      style={{ height: 'calc(100vh - 630px)', overflow: 'auto' }}
+      style={{ height: 'calc(100vh - 6.3rem)', overflow: 'auto' }}
     >
       {errorData?.length > 0 ? (
         errorData.map((item) => (
@@ -454,7 +454,7 @@ function AllContent({ videoData = {}, selectedName, setSelectedName }) {
   return (
     <div
       className={styles.page}
-      style={{ height: 'calc(100vh - 630px)', overflow: 'auto' }}
+      style={{ height: 'calc(100vh - 6.3rem)', overflow: 'auto' }}
     >
       <div className={`card-box ${styles.box}`}>
         <ModuleTitle title="环境检测" />

src/pages/SmartOps/components/VideoAnalysis.less

@@ -4,14 +4,14 @@
   justify-content: space-between;
   .item {
     width: 100%;
-    margin-bottom: 15px;
+    margin-bottom: 0.15rem;
     display: flex;
     align-items: flex-start;
-    font-size: 22px;
-    line-height: 28px;
+    font-size: 0.22rem;
+    line-height: 0.28rem;
     color: #454444;
     .label {
-      width: 114px;
+      width: 1.14rem;
       flex-shrink: 0;
     }
     .content {
@@ -26,19 +26,19 @@
   }
 }
 .iconStatus {
-  width: 20px;
-  height: 20px;
+  width: 0.2rem;
+  height: 0.2rem;
   vertical-align: middle;
-  margin-right: 10px;
+  margin-right: 0.1rem;
   border-radius: 50%;
   display: inline-block;
 }
 
 .img {
-  width: 120px;
-  height: 90px;
+  width: 1.2rem;
+  height: 0.9rem;
   display: block;
-  margin-top: 10px;
+  margin-top: 0.1rem;
 }
 .page {
   .tableSelect {
@@ -61,8 +61,8 @@
     color: #4a90e2;
   }
   .box {
-    padding: 16px;
-    margin-bottom: 20px;
+    padding: 0.16rem;
+    margin-bottom: 0.2rem;
   }
 
   :global {
@@ -73,30 +73,30 @@
       background-color: transparent !important;
     }
     .ant-collapse > .ant-collapse-item {
-      border-radius: 8px;
-      box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
-      border: 1px solid #eee;
+      border-radius: 0.08rem;
+      box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
+      border: 0.01rem solid #eee;
       // background: rgba(255, 255, 255);
-      padding: 0 15px;
-      margin-bottom: 15px;
+      padding: 0 0.15rem;
+      margin-bottom: 0.15rem;
       &.ant-collapse-item-active > .ant-collapse-header {
-        border-bottom: 1px solid #7a9dcd;
+        border-bottom: 0.01rem solid #7a9dcd;
       }
       > .ant-collapse-header {
         background: none;
         color: rgb(91, 88, 88) 373;
-        height: 62px;
-        font-size: 22px;
+        height: 0.62rem;
+        font-size: 0.22rem;
         padding: 0;
         align-items: center;
-        border-bottom: 1px solid transparent;
+        border-bottom: 0.01rem solid transparent;
         .ant-collapse-arrow {
-          font-size: 22px;
+          font-size: 0.22rem;
           right: 0;
         }
         .ant-collapse-extra {
           position: absolute;
-          right: 30px;
+          right: 0.3rem;
         }
       }
     }
@@ -104,7 +104,7 @@
       // margin-bottom: 0;
     }
     .ant-collapse-content {
-      padding: 15px 0;
+      padding: 0.15rem 0;
       border-top: none;
     }
   }

src/pages/SmartOps/components/WorkAnalysis.js

@@ -18,7 +18,7 @@ function WorkAnalysis(props) {
   };
   return (
     <Spin spinning={loading}>
-      <div style={{ height: 'calc(100vh - 580px)', overflow: 'auto' }}>
+      <div style={{ height: 'calc(100vh - 5.8rem)', overflow: 'auto' }}>
         {project_categorys?.map((item) => (
           <div className={`${styles.box} card-box`} key={item.type}>
             <div className={styles.title}>{item.name}</div>

src/pages/SmartOps/components/WorkAnalysis.less

@@ -1,27 +1,27 @@
 .box {
-  border-radius: 5px;
-  padding-bottom: 5px;
-  margin-bottom: 25px;
+  border-radius: 0.05rem;
+  padding-bottom: 0.05rem;
+  margin-bottom: 0.25rem;
 }
 .title {
-  font-size: 30px;
+  font-size: 0.3rem;
   color: #4a90e2;
-  line-height: 40px;
-  padding-left: 30px;
-  padding-top: 36px;
+  line-height: 0.4rem;
+  padding-left: 0.3rem;
+  padding-top: 0.36rem;
 }
 .list {
   margin: 0;
   padding: 0;
-  padding-left: 10px;
+  padding-left: 0.1rem;
   li {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 26px;
-    border-bottom: 1px solid #dbdbdb;
-    padding: 20px 0;
-    padding-left: 38px;
+    font-size: 0.26rem;
+    border-bottom: 0.01rem solid #dbdbdb;
+    padding: 0.2rem 0;
+    padding-left: 0.38rem;
     &:last-child {
       border-bottom: none;
     }
@@ -37,7 +37,7 @@
   }
   .icon {
     color: #fff;
-    margin-left: 20px;
-    font-size: 24px;
+    margin-left: 0.2rem;
+    font-size: 0.24rem;
   }
 }

src/pages/SmartOps/index.less

@@ -1,39 +1,39 @@
 .topContent {
-  padding: 8px 12px;
-  margin: 16px 0;
+  padding: 0.08rem 0.12rem;
+  margin: 0.16rem 0;
   color: #1c50b3;
-  font-size: 28px;
+  font-size: 0.28rem;
   .titleContent {
     display: flex;
     align-items: center;
     justify-content: space-between;
     .time {
-      // font-size: 20px;
+      // font-size: 0.2rem;
       color: #6e6e6e;
     }
     .iconLeft {
-      width: 38px;
-      height: 38px;
+      width: 0.38rem;
+      height: 0.38rem;
       background: url('@/assets/smartOps/icon06.png') no-repeat center;
       background-size: 100% 100%;
     }
     .iconRight {
       .iconLeft;
-      margin-left: 20px;
+      margin-left: 0.2rem;
       background: url('@/assets/smartOps/icon07.png') no-repeat center;
       background-size: 100% 100%;
     }
   }
   .middle {
-    margin: 10px 0;
+    margin: 0.1rem 0;
     display: flex;
     align-items: center;
     justify-content: center;
     .left {
       position: relative;
       .in {
-        width: 212px;
-        height: 212px;
+        width: 2.12rem;
+        height: 2.12rem;
         background: url('@/assets/smartOps/icon04.png') no-repeat center;
         background-size: 100% 100%;
         animation-name: scaleUp;
@@ -45,8 +45,8 @@
         position: absolute;
         left: 0;
         top: 0;
-        width: 212px;
-        height: 212px;
+        width: 2.12rem;
+        height: 2.12rem;
         background: url('@/assets/smartOps/icon05.png') no-repeat center;
         background-size: 100% 100%;
         animation-name: spin;
@@ -60,51 +60,51 @@
       flex-direction: column;
       align-items: flex-end;
       .item {
-        width: 585px;
-        height: 52px;
+        width: 5.85rem;
+        height: 0.52rem;
         white-space: nowrap;
-        margin-bottom: 10px;
+        margin-bottom: 0.1rem;
         background: url('@/assets/smartOps/icon01.png') no-repeat center;
         background-size: 100% 100%;
-        line-height: 52px;
+        line-height: 0.52rem;
       }
       .item1 {
         .item;
-        padding-left: 96px;
+        padding-left: 0.96rem;
       }
       .item2 {
         .item;
-        width: 527px;
-        padding-left: 40px;
+        width: 5.27rem;
+        padding-left: 0.4rem;
         background-image: url('@/assets/smartOps/icon02.png');
       }
       .item3 {
         .item;
-        width: 527px;
-        padding-left: 40px;
+        width: 5.27rem;
+        padding-left: 0.4rem;
         background-image: url('@/assets/smartOps/icon03.png');
       }
       .item4 {
         .item;
         margin-bottom: 0;
-        padding-left: 96px;
+        padding-left: 0.96rem;
         background-image: url('@/assets/smartOps/icon08.png');
       }
     }
   }
   .text {
-    padding: 8px 20px;
-    line-height: 24px;
-    font-size: 24px;
+    padding: 0.08rem 0.2rem;
+    line-height: 0.24rem;
+    font-size: 0.24rem;
     color: #4a90e2;
     // text-align: center;
   }
 }
 
 .anaBtn {
-  font-size: 12px !important;
-  padding: 6px;
-  line-height: 12px;
+  font-size: 0.12rem !important;
+  padding: 0.06rem;
+  line-height: 0.12rem;
   height: auto !important;
 }
 
@@ -119,39 +119,39 @@
 }
 @keyframes scaleUp {
   0% {
-    transform: translate(0px, 0px);
+    transform: translate(0rem, 0rem);
   }
   25% {
-    transform: translate(0px, -5px);
+    transform: translate(0rem, -0.05rem);
   }
   75% {
-    transform: translate(0px, 5px);
+    transform: translate(0rem, 0.05rem);
   }
   100% {
-    transform: translate(0px, 0px);
+    transform: translate(0rem, 0rem);
   }
 }
 
 .marginBottom {
-  margin-bottom: 20px;
+  margin-bottom: 0.2rem;
 }
 .marginLeft {
-  margin-left: 20px;
+  margin-left: 0.2rem;
 }
 .marginRight {
-  margin-right: 20px;
+  margin-right: 0.2rem;
 }
 .searchContent {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 0.2rem;
   color: #4a4a4a;
-  font-size: 24px;
+  font-size: 0.24rem;
   white-space: nowrap;
-  margin-top: 40px;
+  margin-top: 0.4rem;
   :global {
     .ant-select {
-      margin: 0 40px 0 10px;
+      margin: 0 0.4rem 0 0.1rem;
       // background-color: #284e83;
     }
   }
@@ -162,7 +162,7 @@
 
 .form {
   width: 100%;
-  margin-bottom: 14px;
+  margin-bottom: 0.14rem;
   display: flex;
   align-items: center;
   justify-content: space-between;

src/pages/SmartReport/index.js

@@ -336,7 +336,7 @@ const SmartReport = () => {
               </div>
               <div
                 ref={eqDomRef}
-                style={{ height: '340px', margin: '10px 0 10px 0' }}
+                style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
               ></div>
               {/* <div>异常类型统计（设备异常、工艺异常、安全隐患异常）</div> */}
             </div>
@@ -345,7 +345,7 @@ const SmartReport = () => {
           <div className={styles.box}>
             <div className={styles.main_in}>
               <div className={styles.titleContent}>智慧运营</div>
-              <div style={{ padding: '20px 20px 0 20px' }}>
+              <div style={{ padding: '0.2rem 0.2rem 0 0.2rem' }}>
                 <div className={styles.smartText}>
                   优化条数:{push_optimize_task}条
                 </div>
@@ -354,7 +354,7 @@ const SmartReport = () => {
               </div>
               <div
                 ref={workScoreDomRef}
-                style={{ height: '340px', margin: '10px 0 10px 0' }}
+                style={{ height: '3.4rem', margin: '0.1rem 0 0.1rem 0' }}
               ></div>
             </div>
           </div>
@@ -377,10 +377,10 @@ const SmartReport = () => {
                   工单完成率：{Number(work_order_complete_task_per)}%
                 </div>
                 <div className={styles.item}>
-                  <div ref={taskDomRef} style={{ height: '400px' }}></div>
+                  <div ref={taskDomRef} style={{ height: '4rem' }}></div>
                 </div>
                 <div className={styles.item}>
-                  <div ref={workDomRef} style={{ height: '400px' }}></div>
+                  <div ref={workDomRef} style={{ height: '4rem' }}></div>
                 </div>
               </div>
             </div>

src/pages/SmartReport/index.less

@@ -3,8 +3,8 @@
   padding: 0 1rem 1rem;
   width: 80%;
   background: rgba(255, 255, 255, 0.78);
-  box-shadow: 0px 0px 8px 4px rgba(212, 212, 212, 0.5);
-  border-radius: 20px;
+  box-shadow: 0rem 0rem 0.08rem 0.04rem rgba(212, 212, 212, 0.5);
+  border-radius: 0.2rem;
   font-size: 0.43rem;
   font-weight: 400;
   color: #4a4a4a;
@@ -14,8 +14,8 @@
     rgba(226, 241, 250, 0.99) 0%,
     rgba(255, 255, 255, 0.97) 100%
   );
-  box-shadow: -4px 66 135px 0px rgba(60, 93, 133, 0.72);
-  border: 4px solid rgba(255, 255, 255, 0.96);
+  box-shadow: -0.04rem 66 1.35rem 0rem rgba(60, 93, 133, 0.72);
+  border: 0.04rem solid rgba(255, 255, 255, 0.96);
 }
 
 .nameContainer {
@@ -24,11 +24,11 @@
 }
 
 .name {
-  font-size: 34px;
+  font-size: 0.34rem;
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   color: #4a4a4a;
-  line-height: 48px;
+  line-height: 0.48rem;
 }
 .photo {
   font-size: 0.43rem;
@@ -38,17 +38,17 @@
 }
 
 .head {
-  padding-left: 10px;
+  padding-left: 0.1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   .time {
-    font-size: 22px;
+    font-size: 0.22rem;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 40px;
+    line-height: 0.4rem;
   }
   .headRight {
     font-size: 0.43rem;
@@ -90,7 +90,7 @@
   padding: 0.04rem;
   border-radius: 0.4rem 0.1rem 0.4rem 0.1rem;
   background-image: -webkit-linear-gradient(#1755ff 0%, #ffffff 80%);
-  box-shadow: 1px 8px 14px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0.01rem 0.08rem 0.14rem 0rem rgba(0, 0, 0, 0.1);
   .main_in {
     width: 100%;
     height: 100%;
@@ -142,9 +142,9 @@
     // padding: 0.46rem 0.64rem;
     height: 1.69rem;
     // background: #ffffff;
-    box-shadow: 0 5px 14px 0 rgba(141, 141, 141, 0.2);
+    box-shadow: 0 0.05rem 0.14rem 0 rgba(141, 141, 141, 0.2);
     border-radius: 0.95rem;
-    // border: 1px solid;
+    // border: 0.01rem solid;
     background-image: linear-gradient(
       178deg,
       rgba(0, 166, 255, 1),
@@ -180,15 +180,15 @@
     width: 100%;
     height: 2.97rem;
     background: #ecf8fd;
-    box-shadow: 0px 5px 14px 0px rgba(141, 141, 141, 0.2);
+    box-shadow: 0rem 0.05rem 0.14rem 0rem rgba(141, 141, 141, 0.2);
     border-radius: 4.44rem;
-    border: 1px solid #00a6ff;
+    border: 0.01rem solid #00a6ff;
     .blueText;
   }
   .threeItem {
     flex: 1;
     margin: 0.46rem 0;
-    border-right: 3px solid #bcbaba;
+    border-right: 0.03rem solid #bcbaba;
   }
   .threeItem:last-child {
     border-right: none;

src/pages/SystemDaily/index.js

@@ -47,7 +47,7 @@ const SystemDaily = (props) => {
           <div className={styles.title}>
             <LeftOutlined
               onClick={handleOnClick}
-              style={{ fontSize: 36, cursor: 'pointer', marginRight: '20px' }}
+              style={{ fontSize: 36, cursor: 'pointer', marginRight: '0.2rem' }}
             />
             系统工作日报
           </div>

src/pages/SystemDaily/index.less

@@ -1,11 +1,11 @@
 .main {
-  padding: 50px;
+  padding: 0.5rem;
   width: 90%;
-  margin: 60px auto;
+  margin: 0.6rem auto;
   background-color: #ffffff;
   background: rgba(255, 255, 255);
-  box-shadow: 0px 0px 8px 4px rgba(212, 212, 212, 0.5);
-  border-radius: 20px;
+  box-shadow: 0rem 0rem 0.08rem 0.04rem rgba(212, 212, 212, 0.5);
+  border-radius: 0.2rem;
 }
 .titleContent {
   width: 100%;
@@ -14,25 +14,25 @@
   color: #4a4a4a;
   margin: auto;
   .title {
-    font-size: 34px;
-    line-height: 48px;
+    font-size: 0.34rem;
+    line-height: 0.48rem;
   }
   .time {
-    margin-left: 60px;
-    font-size: 22px;
-    line-height: 30px;
+    margin-left: 0.6rem;
+    font-size: 0.22rem;
+    line-height: 0.3rem;
   }
 }
 .content {
-  padding: 60px 30px;
-  margin: 20px auto;
-  box-shadow: 0px 0px 8px 4px rgba(212, 212, 212, 0.5);
-  border-radius: 20px;
+  padding: 0.6rem 0.3rem;
+  margin: 0.2rem auto;
+  box-shadow: 0rem 0rem 0.08rem 0.04rem rgba(212, 212, 212, 0.5);
+  border-radius: 0.2rem;
   background: #e7f1fe;
   .text {
-    margin-bottom: 34px;
+    margin-bottom: 0.34rem;
     font-family: PingFangSC, PingFang SC;
     color: #4a4a4a;
-    font-size: 30px;
+    font-size: 0.3rem;
   }
 }

src/pages/TaskManage/Detail/TaskDetail/taskDetail.less

@@ -1,32 +1,32 @@
 .cardContainer {
-  margin-top: 15px;
-  padding: 20px 20px;
+  margin-top: 0.15rem;
+  padding: 0.2rem 0.2rem;
   background-color: white;
 
   .normalInfo {
-    padding: 25px 15px;
+    padding: 0.25rem 0.15rem;
     background-color: #fdf2df;
   }
 
   .infoRow {
-    margin-bottom: 25px;
+    margin-bottom: 0.25rem;
   }
 
 
   .detailInfo {
-    padding: 25px 15px;
-    border-bottom: 1px solid rgba(0, 0, 0, 10%);
+    padding: 0.25rem 0.15rem;
+    border-bottom: 0.01rem solid rgba(0, 0, 0, 10%);
   }
 
   .relatedOrder {
-    padding: 0 15px;
-    margin-top: 15px;
+    padding: 0 0.15rem;
+    margin-top: 0.15rem;
 
     .collapseLabel {
       width: 100%;
 
       .ant-collapse-arrow {
-        font-size: 24px;
+        font-size: 0.24rem;
       }
 
       :global {
@@ -38,24 +38,24 @@
           justify-content: center;
           flex-direction: row-reverse;
           align-items: center;
-          margin-top: 10px;
+          margin-top: 0.1rem;
 
           .ant-collapse-header-text {
-            font-size: 24px;
+            font-size: 0.24rem;
             flex: unset;
             margin-inline-end: unset;
           }
 
           .ant-collapse-arrow {
-            font-size: 24px;
+            font-size: 0.24rem;
           }
         }
       }
 
       .workOrderCard {
-        margin-bottom: 20px;
-        padding: 20px 10px;
-        border-radius: 8px;
+        margin-bottom: 0.2rem;
+        padding: 0.2rem 0.1rem;
+        border-radius: 0.08rem;
         background-color: #e5effa;
         display: flex;
         align-items: center;
@@ -67,7 +67,7 @@
         .rightButton {
           flex: auto;
           color: #5697e4;
-          font-size: 24px;
+          font-size: 0.24rem;
           text-align: center;
           display: flex;
           justify-content: center;
@@ -79,9 +79,9 @@
   }
 
   .workOrderCard {
-    margin-bottom: 25px;
-    padding: 20px 10px;
-    border-radius: 8px;
+    margin-bottom: 0.25rem;
+    padding: 0.2rem 0.1rem;
+    border-radius: 0.08rem;
     background-color: #e5effa;
     display: flex;
     align-items: center;
@@ -93,7 +93,7 @@
     .rightButton {
       flex: auto;
       color: #5697e4;
-      font-size: 24px;
+      font-size: 0.24rem;
       text-align: center;
       display: flex;
       justify-content: center;
@@ -103,25 +103,25 @@
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS22 {
-  font-size: 22px;
+  font-size: 0.22rem;
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS18 {
-  font-size: 18px;
+  font-size: 0.18rem;
 }
 
 .fontS16 {
-  font-size: 16px;
+  font-size: 0.16rem;
 }

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

@@ -1,13 +1,13 @@
 .cardContainer {
   width: 100%;
-  padding: 20px 20px 10px 20px;
-  margin-left: 5px;
+  padding: 0.2rem 0.2rem 0.1rem 0.2rem;
+  margin-left: 0.05rem;
   background-color: white;
 
   .collapseLabel {
     width: 100%;
     .ant-collapse-arrow {
-      font-size: 24px;
+      font-size: 0.24rem;
     }
     :global {
       .ant-collapse-item {
@@ -17,23 +17,23 @@
         justify-content: center;
         flex-direction: row-reverse;
         align-items: center;
-        margin-top: 10px;
+        margin-top: 0.1rem;
 
         .ant-collapse-header-text {
-          font-size: 24px;
+          font-size: 0.24rem;
           flex: unset;
           margin-inline-end: unset;
         }
         .ant-collapse-arrow {
-          font-size: 24px;
+          font-size: 0.24rem;
         }
       }
     }
 
     .workOrderCard {
-      margin-bottom: 20px;
-      padding: 20px 10px;
-      border-radius: 8px;
+      margin-bottom: 0.2rem;
+      padding: 0.2rem 0.1rem;
+      border-radius: 0.08rem;
       background-color: #e5effa;
       display: flex;
       align-items: center;
@@ -45,7 +45,7 @@
       .rightButton {
         flex: auto;
         color: #5697e4;
-        font-size: 24px;
+        font-size: 0.24rem;
         text-align: center;
         display: flex;
         justify-content: center;
@@ -56,7 +56,7 @@
 }
 
 .topContainer {
-  // height: 120px;
+  // height: 1.2rem;
   .fixedTop {
     position: fixed;
     top: 0;
@@ -67,25 +67,25 @@
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS26 {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS18 {
-  font-size: 18px;
+  font-size: 0.18rem;
 }
 
 .fontS16 {
-  font-size: 16px;
+  font-size: 0.16rem;
 }

src/pages/TaskManage/Detail/TaskOrder/taskOrder.less

@@ -1,7 +1,7 @@
 .selfCardBox {
-  margin-top: 15px;
-  border-radius: 8px;
-  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 30%);
+  margin-top: 0.15rem;
+  border-radius: 0.08rem;
+  box-shadow: 0.02rem 0 0.08rem 0 rgba(0, 0, 0, 30%);
   background-color: white;
 }
 
@@ -11,37 +11,37 @@
 }
 
 .rowMargin {
-  margin-bottom: 30px;
+  margin-bottom: 0.3rem;
 }
 
 .rowMarginTop {
-  margin-top: 30px;
+  margin-top: 0.3rem;
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS26 {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS22 {
-  font-size: 22px;
+  font-size: 0.22rem;
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS18 {
-  font-size: 18px;
+  font-size: 0.18rem;
 }
 
 .fontS16 {
-  font-size: 16px;
+  font-size: 0.16rem;
 }

src/pages/TaskManage/Detail/WorkOrderList/WorkOrderList.js

@@ -61,7 +61,7 @@ const WorkOrderList = (props) => {
           key={workOrder.id || workOrder.Id}
           className={styles.workOrderCard}
         >
-          <Row justify="space-between" style={{ marginBottom: '20px' }}>
+          <Row justify="space-between" style={{ marginBottom: '0.2rem' }}>
             <Col className={styles.fontS24}>{workOrder?.CreateTime}</Col>
             <Col className={styles.fontS24}>
               工单负责人：{workOrder?.Repairman?.CName || '-'}
@@ -74,7 +74,7 @@ const WorkOrderList = (props) => {
             <Col className={styles.detailBtnContainer}>
               <Button
                 type="primary"
-                style={{ height: '40px', fontSize: '24px' }}
+                style={{ height: '0.4rem', fontSize: '0.24rem' }}
                 onClick={() => goWorkOrderDetail(workOrder)}
               >
                 工单详情
@@ -249,13 +249,13 @@ const WorkOrderList = (props) => {
             <TabPane tab={item.label} key={String(item.value)}>
               <Spin spinning={loading}>
                 <div
-                  style={{ height: 'calc(100vh - 180px)', overflowY: 'auto' }}
+                  style={{ height: 'calc(100vh - 1.8rem)', overflowY: 'auto' }}
                 >
                   {workOrderListDOM}
                   <div className={styles.loadMoreBtn}>
                     {recordList.length < pagination.total && (
                       <Button
-                        style={{ fontSize: '24px' }}
+                        style={{ fontSize: '0.24rem' }}
                         type="link"
                         onClick={() => {
                           getWorkOrderList(activedStatus);

src/pages/TaskManage/Detail/WorkOrderList/WorkOrderList.less

@@ -3,19 +3,19 @@
     justify-content: space-around;
     width: 100%;
     .ant-tabs-tab-btn {
-      font-size: 24px;
+      font-size: 0.24rem;
     }
   }
 }
 
 .workOrderCard {
   background-color: white;
-  padding: 20px;
-  margin-top: 20px;
-  margin-bottom: 10px;
-  margin-left: 5px;
-  border-radius: 10px;
-  box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
+  padding: 0.2rem;
+  margin-top: 0.2rem;
+  margin-bottom: 0.1rem;
+  margin-left: 0.05rem;
+  border-radius: 0.1rem;
+  box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
 }
 
 .detailBtnContainer {
@@ -25,12 +25,12 @@
 }
 
 .loadMoreBtn {
-  margin: 20px 0;
+  margin: 0.2rem 0;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }

src/pages/TaskManage/Popup/WorkOrderModal.js

@@ -247,15 +247,15 @@ const WorkOrderModal = (props) => {
       <Button
         className={styles.closeModalBtn}
         type="text"
-        icon={<CloseOutlined style={{ fontSize: '24px' }} />}
+        icon={<CloseOutlined style={{ fontSize: '0.24rem' }} />}
         onClick={closePage}
       />
-      <Divider style={{ margin: '0 0 30px 0' }} />
+      <Divider style={{ margin: '0 0 0.3rem 0' }} />
       <div
         style={{
-          marginTop: '20px',
-          borderRadius: '8px',
-          boxShadow: '2px 0 8px 0 rgba(0, 0, 0, 30%)',
+          marginTop: '0.2rem',
+          borderRadius: '0.08rem',
+          boxShadow: '0.02rem 0 0.08rem 0 rgba(0, 0, 0, 30%)',
         }}
       >
         <div>
@@ -342,7 +342,7 @@ const WorkOrderModal = (props) => {
         {order_type === 5 && (
           <div>
             <SubTitle title="加药详情" titleFontSize={24} />
-            <div style={{ padding: '15px' }}>
+            <div style={{ padding: '0.15rem' }}>
               <Row>
                 <Col className={styles.fontS28}>加药详情：</Col>
                 <Col className={styles.fontS28} span={18}>
@@ -357,7 +357,7 @@ const WorkOrderModal = (props) => {
         {stepInfo.length > 0 && (
           <div>
             <SubTitle title="工单流程" titleFontSize={24} />
-            <div style={{ padding: '15px 20px' }}>
+            <div style={{ padding: '0.15rem 0.2rem' }}>
               <Steps
                 direction="vertical"
                 progressDot

src/pages/TaskManage/Popup/WorkOrderModal.less

@@ -1,46 +1,46 @@
 .modalContainer {
-  padding: 20px 30px 0px 30px;
+  padding: 0.2rem 0.3rem 0rem 0.3rem;
 }
 
 .closeModalBtn {
   position: absolute;
-  top: 30px;
-  right: 30px;
+  top: 0.3rem;
+  right: 0.3rem;
 }
 
 .modalTitle {
-  font-size: 28px;
+  font-size: 0.28rem;
   font-weight: 600;
-  padding: 10px 0;
+  padding: 0.1rem 0;
 }
 
 .basicalInfo {
-  padding: 0 15px 15px 15px;
+  padding: 0 0.15rem 0.15rem 0.15rem;
 }
 
 .basicalInfo > * {
-  margin-top: 20px;
+  margin-top: 0.2rem;
 }
 
 .additionInfo {
-  padding: 0 15px 15px 15px;
+  padding: 0 0.15rem 0.15rem 0.15rem;
 }
 
 .additionInfo > * {
-  margin-top: 20px;
+  margin-top: 0.2rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 .fontS26 {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS30 {
-  font-size: 30px;
+  font-size: 0.3rem;
 }

src/pages/TaskManage/Popup/index.js

@@ -122,7 +122,7 @@ const TaskModal = (props) => {
       <Button
         className={styles.closeModalBtn}
         type="text"
-        icon={<CloseOutlined style={{ fontSize: '28px' }} />}
+        icon={<CloseOutlined style={{ fontSize: '0.28rem' }} />}
         onClick={closePage}
       />
 
@@ -136,7 +136,7 @@ const TaskModal = (props) => {
       ) : (
         <>
           {modalTitle}
-          <Divider style={{ margin: '10px 0' }} />
+          <Divider style={{ margin: '0.1rem 0' }} />
           <MandateDetail
             mandateID={mandateIDs}
             userList={userList}

src/pages/TaskManage/Popup/index.less

@@ -1,49 +1,49 @@
 .modalContainer {
-  padding: 30px;
+  padding: 0.3rem;
   :global {
     .ant-tabs > .ant-tabs-nav,
     .ant-tabs > div > .ant-tabs-nav {
-      width: calc(100% - 55px);
+      width: calc(100% - 0.55rem);
     }
   }
 }
 
 .closeModalBtn {
   position: absolute;
-  top: 40px;
-  right: 30px;
+  top: 0.4rem;
+  right: 0.3rem;
 }
 
 .mandate > * {
-  margin-top: 15px;
+  margin-top: 0.15rem;
 }
 
 .modalTitle {
-  font-size: 30px;
+  font-size: 0.3rem;
   font-weight: 600;
-  padding: 10px 0;
+  padding: 0.1rem 0;
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS22 {
-  font-size: 22px;
+  font-size: 0.22rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS26 {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS30 {
-  font-size: 30px;
+  font-size: 0.3rem;
 }

src/pages/TaskManage/components/MandateDetail.js

@@ -252,7 +252,7 @@ const MandateDetail = (props) => {
                 </Col>
               </Row>
             </div>
-            <Divider type="vertical" style={{ height: '40px' }} />
+            <Divider type="vertical" style={{ height: '0.4rem' }} />
             <div
               className={styles.rightButton}
               onClick={() => openWorkOrderModal(item)}
@@ -401,7 +401,7 @@ const IgnoreTaskModal = (params) => {
       width="60%"
       destroyOnClose
     >
-      <div style={{ padding: '15px' }}>
+      <div style={{ padding: '0.15rem' }}>
         <Form>
           <Form.Item label="忽略理由:">
             <Select
@@ -445,7 +445,7 @@ const AutoHandleModal = (props) => {
       width="60%"
       destroyOnClose
     >
-      <div style={{ padding: '15px' }}>
+      <div style={{ padding: '0.15rem' }}>
         <Form>
           <Form.Item label="用户口令:">
             {

src/pages/TaskManage/components/MandateDetail.less

@@ -1,21 +1,21 @@
 .modalContainer {
-  padding: 0 30px;
+  padding: 0 0.3rem;
 }
 
 .closeModalBtn {
   position: absolute;
-  top: 15px;
-  right: 20px;
+  top: 0.15rem;
+  right: 0.2rem;
 }
 
 .mandate > * {
-  margin-top: 15px;
+  margin-top: 0.15rem;
 }
 
 .modalTitle {
-  font-size: 28px;
+  font-size: 0.28rem;
   font-weight: 600;
-  padding: 10px 0;
+  padding: 0.1rem 0;
 }
 
 .footerConstainer {
@@ -23,9 +23,9 @@
   flex-direction: row;
   justify-content: flex-end;
   .footerBtn {
-    height: 50px;
-    width: 140px;
-    font-size: 26px;
+    height: 0.5rem;
+    width: 1.4rem;
+    font-size: 0.26rem;
     border: 0;
     color: #5697e4;
     background-color: #e5effa;
@@ -33,26 +33,26 @@
 }
 
 .footerConstainer > * {
-  margin-left: 10px;
+  margin-left: 0.1rem;
 }
 
 .relatedOrder {
-  margin-bottom: 20px;
+  margin-bottom: 0.2rem;
   background-color: #e5effa;
-  border-radius: 8px;
+  border-radius: 0.08rem;
   display: flex;
   align-items: center;
-  padding: 15px;
+  padding: 0.15rem;
   .leftInfo {
     width: 80%;
   }
   .leftInfo > * {
-    padding: 5px;
+    padding: 0.05rem;
   }
   .rightButton {
     flex: auto;
     color: #5697e4;
-    font-size: 28px;
+    font-size: 0.28rem;
     text-align: center;
     display: flex;
     justify-content: center;
@@ -61,21 +61,21 @@
 }
 
 .taskCheckBox {
-  padding: 10px;
+  padding: 0.1rem;
   :global {
     .ant-checkbox-wrapper {
       width: 100%;
-      margin-top: 5px;
-      margin-bottom: 5px;
-      border-bottom: 1px dashed gray;
+      margin-top: 0.05rem;
+      margin-bottom: 0.05rem;
+      border-bottom: 0.01rem dashed gray;
     }
   }
 }
 
 .taskCheckItem {
-  font-size: 28px;
-  padding: 10px;
-  min-width: 80px;
+  font-size: 0.28rem;
+  padding: 0.1rem;
+  min-width: 0.8rem;
   display: flex;
   align-items: center;
 }
@@ -83,69 +83,69 @@
 .handleModal {
   :global {
     .ant-modal-close {
-      width: 36px;
-      height: 36px;
+      width: 0.36rem;
+      height: 0.36rem;
     }
     .ant-modal-close-x {
-      font-size: 36px;
-      line-height: 36px;
+      font-size: 0.36rem;
+      line-height: 0.36rem;
     }
     .ant-modal-title {
-      font-size: 28px;
+      font-size: 0.28rem;
     }
     .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
-      height: 60px;
-      padding-top: 15px;
+      height: 0.6rem;
+      padding-top: 0.15rem;
     }
     .ant-form-item .ant-form-item-label > label {
-      font-size: 28px;
-      height: 60px;
+      font-size: 0.28rem;
+      height: 0.6rem;
     }
     .ant-input {
-      font-size: 28px;
-      height: 60px;
+      font-size: 0.28rem;
+      height: 0.6rem;
     }
     .ant-btn {
-      font-size: 28px;
-      height: 60px;
-      width: 120px;
+      font-size: 0.28rem;
+      height: 0.6rem;
+      width: 1.2rem;
     }
     .ant-checkbox {
       .ant-checkbox-inner {
-        width: 28px;
-        height: 28px;
+        width: 0.28rem;
+        height: 0.28rem;
       }
       .ant-checkbox-inner:after {
-        height: 16px;
-        width: 9px;
+        height: 0.16rem;
+        width: 0.09rem;
       }
     }
     .ant-picker {
-      height: 60px;
+      height: 0.6rem;
     }
   }
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS22 {
-  font-size: 22px;
+  font-size: 0.22rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS26 {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS30 {
-  font-size: 30px;
+  font-size: 0.3rem;
 }

src/pages/TaskManage/index.less

@@ -5,15 +5,15 @@
 
 .taskList {
   border: none;
-  max-height: calc(100vh - 140px);
+  max-height: calc(100vh - 1.4rem);
   overflow-y: auto;
 
   .listItem {
-    margin: 0.2rem 0.2rem 0.2rem 5px;
+    margin: 0.2rem 0.2rem 0.2rem 0.05rem;
     height: 1.67rem;
     width: 6.81rem;
     padding: 0 0.4rem 0 1rem;
-    box-shadow: 1px 1px 15px 0px rgba(0, 0, 0, 0.1);
+    box-shadow: 0.01rem 0.01rem 0.15rem 0rem rgba(0, 0, 0, 0.1);
     border-top-left-radius: 0.3rem;
     border-bottom-right-radius: 0.3rem;
     background-color: #ffffff;
@@ -47,52 +47,52 @@
 
 .ant-select-clear {
   opacity: 1 !important;
-  margin-top: -12px !important;
-  width: 24px !important;
-  height: 24px !important;
-  font-size: 24px !important;
+  margin-top: -0.12rem !important;
+  width: 0.24rem !important;
+  height: 0.24rem !important;
+  font-size: 0.24rem !important;
   color: black !important;
 }
 
 .antdSelect .ant-select-selection-item,
 .antdSelect .ant-select-selection-placeholder,
 .ant-select-item-option-content {
-  font-size: 28px;
+  font-size: 0.28rem;
   color: black;
-  margin-right: 10px;
+  margin-right: 0.1rem;
 }
 .ant-select-item-option {
-  padding: 8px !important;
+  padding: 0.08rem !important;
 }
 .ant-select-arrow {
-  font-size: 24px !important;
+  font-size: 0.24rem !important;
   color: black !important;
 }
 
 .fontS28 {
-  font-size: 28px;
+  font-size: 0.28rem;
 }
 
 .fontS26 {
-  font-size: 26px;
+  font-size: 0.26rem;
 }
 
 .fontS24 {
-  font-size: 24px;
+  font-size: 0.24rem;
 }
 
 .fontS22 {
-  font-size: 22px;
+  font-size: 0.22rem;
 }
 
 .fontS20 {
-  font-size: 20px;
+  font-size: 0.2rem;
 }
 
 .fontS18 {
-  font-size: 18px;
+  font-size: 0.18rem;
 }
 
 .fontS16 {
-  font-size: 16px;
+  font-size: 0.16rem;
 }