修改样式

src/pages/Home/index.js

@@ -16,7 +16,7 @@ const HomePage = (props) => {
   });
   // useEffect(() => {
   //   localStorage.width = document.documentElement.getBoundingClientRect().width;
-  //   window.refreshRem();
+  //   window.refreshpx();
   // }, []);
   return (
     <div className={styles.content}>
@@ -63,6 +63,7 @@ const SmartWork = (props) => {
   const { data } = props;
   return (
     <Box
+      small={true}
       title="水厂工况"
       onClick={() => UnityAction.sendMsg('menuItem', '工况管理')}
     >
@@ -117,11 +118,11 @@ const WaterQuality = (props) => {
     >
       <ul>
         <li>
-          <div className={styles.value}>{data?.dsan}</div>
+          <div className={styles.value}>{data?.dsan || 0}</div>
           <div className={styles.btn1}>出水余氯</div>
         </li>
         <li>
-          <div className={styles.value}>{data?.dtur}</div>
+          <div className={styles.value}>{data?.dtur || 0}</div>
           <div className={styles.btn2}>出水浊度</div>
         </li>
       </ul>
@@ -164,6 +165,7 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
 
   return (
     <Box
+      small={true}
       title="系统自检"
       onClick={() => UnityAction.sendMsg('menuItem', '系统自检')}
     >
@@ -261,12 +263,9 @@ const Scada = () => {
       title="工艺监控"
       onClick={() => UnityAction.sendMsg('menuItem', '工艺监控')}
     >
-      <div
-        className={styles.scada}
-        style={{ width: '5.7rem', height: '2.8rem' }}
-      >
+      <div className={styles.scada} style={{ width: '540px', height: '270px' }}>
         {data?.map((url) => (
-          <iframe style={{ width: '5.7rem', height: '2.8rem' }} src={url} />
+          <iframe style={{ width: '540px', height: '270px' }} src={url} />
         ))}
         <div className={styles.mask}></div>
       </div>
@@ -328,10 +327,10 @@ const Backlog = (props) => {
   );
 };
 
-const Box = ({ title, children, onClick, big }) => {
+const Box = ({ title, children, onClick, small }) => {
   return (
     <div
-      className={`${styles.box} ${big ? styles.boxBig : ''}`}
+      className={`${styles.box} ${small ? '' : styles.boxH}`}
       onClick={onClick}
     >
       <div className={styles.titleContent}>

src/pages/Home/index.less

@@ -4,14 +4,25 @@
   align-items: center;
   height: 100vh;
   width: 100%;
-  padding-top: 0.9rem;
+  padding-top: 80px;
   color: #3b3b3b;
 }
+.left {
+  text-align: center;
+  width: 25%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.right {
+  .left;
+}
 .box {
-  width: 6.4rem;
-  padding: 0.24rem;
+  width: 610px;
+  padding: 24px;
+  text-align: left;
   position: relative;
-  margin-bottom: 0.1rem;
   display: inline-block;
   cursor: pointer;
   background: url('@/assets/home-box-bg.png') no-repeat center;
@@ -22,27 +33,26 @@
   // }
 
   .titleContent {
-    margin: 0.2rem 0.38rem;
+    margin: 20px 38px;
     display: inline-block;
     position: relative;
   }
 
   .boxTitle {
-    padding: 0 0.1rem;
+    padding: 0 10px;
     position: relative;
     // z-index: 99;
-    font-size: 0.32rem;
+    font-size: 32px;
     font-weight: 600;
     color: #0139f1;
-    line-height: 0.34rem;
+    line-height: 34px;
     z-index: 1;
   }
   .line {
     position: absolute;
-    // left: 0.38rem;
     bottom: 0;
     width: 100%;
-    height: 0.14rem;
+    height: 14px;
     background: url('@/assets/home-box-line.png') no-repeat center;
     background-size: 100% 100%;
     z-index: 0;
@@ -56,31 +66,31 @@
     }
   }
   .name {
-    font-size: 0.22rem;
+    font-size: 22px;
     font-weight: 400;
     color: #ffffff;
-    line-height: 0.28rem;
+    line-height: 28px;
     text-align: center;
-    margin-top: 0.18rem;
+    margin-top: 18px;
   }
   .value {
-    margin: 0.6rem 0;
-    font-size: 0.4rem;
+    margin: 60px 0;
+    font-size: 40px;
     font-weight: 600;
     color: #3b3b3b;
-    line-height: 0.5rem;
+    line-height: 50px;
     text-align: center;
-    letter-spacing: 0.04rem;
+    letter-spacing: 4px;
     font-family: PangMenZhengDao-3, PangMenZhengDao-3;
   }
 }
-.boxBig {
+.boxH {
   .box;
-  background-image: url('@/assets/home-box-bg2.png');
+  height: 420px;
 }
 .scada {
-  margin-bottom: 0.2rem;
-  padding: 0 0.1rem;
+  margin-bottom: 20px;
+  padding: 0 10px;
   position: relative;
   .mask {
     position: absolute;
@@ -91,14 +101,14 @@
   }
 }
 .scadaContent {
-  padding: 0.2rem;
-  height: 3rem;
-  width: 10rem;
+  padding: 20px;
+  height: 30px;
+  width: 1000px;
   display: flex;
   justify-content: space-between;
   iframe {
     height: 100%;
-    width: calc(50% - 0.1rem);
+    width: calc(50% - 10px);
     border: none;
     pointer-events: none;
   }
@@ -108,26 +118,26 @@
   display: flex;
   justify-content: space-around;
   .score {
-    font-size: 0.5rem;
+    font-size: 50px;
     font-weight: 600;
     font-family: PangMenZhengDao-3, PangMenZhengDao-3;
     color: #615d5d;
   }
   .scoreTitle {
-    width: 3rem;
-    font-size: 0.4rem;
-    margin-top: 0.2rem;
+    width: 300px;
+    font-size: 40px;
+    margin-top: 20px;
     font-family: Source Han Sans, Source Han Sans;
     color: #3b3b3b;
   }
 
   .grade {
-    font-size: 0.22rem;
-    margin-top: 0.1rem;
+    font-size: 22px;
+    margin-top: 10px;
   }
   .circle {
-    width: 1.78rem;
-    height: 1.78rem;
+    width: 178px;
+    height: 178px;
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -139,53 +149,55 @@
 }
 
 .time {
-  font-size: 0.22rem;
-  margin-bottom: 0.2rem;
+  font-size: 22px;
+  margin-bottom: 20px;
   text-align: right;
-  margin-right: 0.3rem;
+  margin-right: 30px;
 }
 .insTag {
   position: absolute;
-  right: 0.54rem;
-  top: 0.44rem;
-  width: 1.14rem;
-  height: 0.5rem;
+  right: 54px;
+  top: 44px;
+  width: 114px;
+  height: 50px;
   background: #4a90e2;
-  border-radius: 0.05rem;
+  border-radius: 5px;
   text-align: center;
-  line-height: 0.5rem;
+  line-height: 50px;
 
-  font-size: 0.26rem;
+  font-size: 26px;
   font-weight: 400;
   color: #ffffff;
 }
 
 .insStatus {
   text-align: center;
-  font-size: 0.42rem;
+  font-size: 42px;
   font-weight: 500;
   color: #f5a623;
-  line-height: 0.56rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.22rem;
+  line-height: 56px;
+  margin-top: 50px;
+  margin-bottom: 22px;
 }
 .centerBox {
+  width: 50%;
   display: flex;
-  height: calc(100vh - 0.9rem);
+  justify-content: space-around;
+  height: calc(100vh - 80px);
   align-items: flex-end;
 }
 .backlog {
-  margin-bottom: 0.4rem;
-  padding: 0 0.2rem;
+  margin-bottom: 40px;
+  padding: 0 20px;
   overflow-y: auto;
-  height: 2.6rem;
+  height: 260px;
   color: #3b3b3b;
   .item {
-    padding: 0.08rem 0 0.2rem;
+    padding: 8px 0 20px;
     width: 100%;
-    font-size: 0.22rem;
-    line-height: 0.5rem;
-    border-bottom: 0.01rem solid #ffffff;
+    font-size: 22px;
+    line-height: 50px;
+    border-bottom: 1px solid #ffffff;
   }
   .titleCon {
     display: flex;
@@ -193,38 +205,38 @@
   }
   .point {
     display: inline-block;
-    width: 0.12rem;
-    height: 0.24rem;
+    width: 12px;
+    height: 24px;
     background-color: #ff8400;
   }
   .createTime {
     float: right;
   }
   .titleText {
-    font-size: 0.22rem;
-    margin: 0 0.2rem;
+    font-size: 22px;
+    margin: 0 20px;
   }
   .bottomCon {
-    font-size: 0.18rem;
+    font-size: 18px;
     word-wrap: break-word;
   }
 }
 .count {
   background: #f69040;
-  border-radius: 0.04rem;
-  margin-left: 0.1rem;
-  padding: 0 0.06rem;
+  border-radius: 4px;
+  margin-left: 10px;
+  padding: 0 6px;
 }
 
 .btn1 {
-  margin-bottom: 0.2rem;
-  padding: 0.14rem 0.3rem;
-  font-size: 0.32rem;
+  margin-bottom: 20px;
+  padding: 14px 28px;
+  font-size: 32px;
   font-family: Source Han Sans, Source Han Sans;
   font-weight: 500;
   color: #ffffff;
   display: inline-block;
-  border-radius: 1rem;
+  border-radius: 100px;
   background-color: #1755ff;
 }
 .btn2 {
@@ -236,24 +248,24 @@
   justify-content: space-around;
   align-items: center;
   .circle {
-    width: 1.78rem;
-    height: 1.78rem;
+    width: 178px;
+    height: 178px;
     text-align: center;
-    line-height: 1.78rem;
+    line-height: 178px;
     background: url('@/assets/home-self-circle.png') no-repeat center;
     background-size: 100% 100%;
   }
   .text {
-    width: 1.19rem;
-    height: 0.5rem;
-    font-size: 0.5rem;
+    width: 119px;
+    height: 50px;
+    font-size: 50px;
     font-family: Source Han Sans, Source Han Sans;
     font-weight: 500;
   }
   .texting {
-    width: 2rem;
-    font-size: 0.4rem;
-    margin-top: 0.2rem;
+    width: 200px;
+    font-size: 40px;
+    margin-top: 20px;
     font-family: Source Han Sans, Source Han Sans;
     color: #3b3b3b;
   }

src/pages/Menu/index.less

@@ -1,17 +1,14 @@
 .main {
-  // margin-top: calc(100vh - 15.2rem);
   float: right;
-  width: 100%;
+  width: 1.98rem;
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  // background-color: #aaacae;
-  // background: url('@/assets/menu/menu_bg.png') no-repeat center;
-  // background-size: 100% 100%;
+  background: url('@/assets/menu/right_bg.png') no-repeat center;
+  background-size: 100% 100%;
 }
 .menu {
-  // margin-top: 0.6rem;
   width: 100%;
   height: calc(100vh - 1.6rem);
   display: flex;