修改首页样式

src/pages/Home/index.js

@@ -20,8 +20,8 @@ const HomePage = (props) => {
   // }, []);
   return (
     <div className={styles.content}>
+      <CenterContent data={data} />
       <LeftContent data={data} />
-      <CenterContent />
       <RightContent data={data} />
     </div>
   );
@@ -31,18 +31,22 @@ const LeftContent = (props) => {
   const { data } = props;
   return (
     <div className={styles.left}>
-      <SmartWork data={data} />
+      {/* <SmartWork data={data} /> */}
       <WaterAmt data={data} />
       <WaterQuality data={data} />
+      <Backlog />
       {/* <Backlog /> */}
     </div>
   );
 };
-const CenterContent = () => {
+const CenterContent = (props) => {
+  const { data } = props;
   return (
     <div className={styles.centerBox}>
-      <Backlog />
-      <Scada />
+      <SmartWork data={data} />
+      <SelfInspection />
+      {/* <Backlog />
+      <Scada /> */}
     </div>
   );
 };
@@ -50,9 +54,10 @@ const RightContent = (props) => {
   const { data } = props;
   return (
     <div className={styles.right}>
-      <SelfInspection />
+      {/* <SelfInspection /> */}
       <Electric data={data} />
       <Medicine />
+      <Scada />
       {/* <Scada /> */}
     </div>
   );
@@ -62,11 +67,11 @@ const RightContent = (props) => {
 const SmartWork = (props) => {
   const { data } = props;
   return (
-    <Box
-      small={true}
-      title="水厂工况"
+    <div
+      className={styles.smartWork}
       onClick={() => UnityAction.sendMsg('menuItem', '工况管理')}
     >
+      <Title title="水厂工况" />
       <div className={styles.scoreBox}>
         <div className={styles.circle}>
           <div className={styles.score}>{data?.score}</div>
@@ -80,7 +85,7 @@ const SmartWork = (props) => {
       <div className={styles.time}>
         {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')}
       </div>
-    </Box>
+    </div>
   );
 };
 
@@ -89,10 +94,11 @@ const WaterAmt = (props) => {
   const { data } = props;
   const { projectId } = useParams();
   return (
-    <Box
-      title="水量监测"
+    <div
+      className={styles.waterAmt}
       onClick={() => UnityAction.sendMsg('menuItem', '水量监测')}
     >
+      <Title title="水量监测" />
       <ul>
         <li>
           <div className={styles.value}>{data?.fwa}</div>
@@ -103,7 +109,7 @@ const WaterAmt = (props) => {
           <div className={styles.btn2}>产水量</div>
         </li>
       </ul>
-    </Box>
+    </div>
   );
 };
 
@@ -112,21 +118,22 @@ const WaterQuality = (props) => {
   const { data } = props;
   const { projectId } = useParams();
   return (
-    <Box
-      title="水质监测"
+    <div
+      className={styles.waterQuality}
       onClick={() => UnityAction.sendMsg('menuItem', '水质监测')}
     >
+      <Title title="水质监测" />
       <ul>
         <li>
-          <div className={styles.value}>{data?.dsan || 0}</div>
+          <div className={styles.valueLong}>{data?.dsan || 0}</div>
           <div className={styles.btn1}>出水余氯</div>
         </li>
         <li>
-          <div className={styles.value}>{data?.dtur || 0}</div>
+          <div className={styles.valueLong}>{data?.dtur || 0}</div>
           <div className={styles.btn2}>出水浊度</div>
         </li>
       </ul>
-    </Box>
+    </div>
   );
 };
 
@@ -164,11 +171,11 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
   }, []);
 
   return (
-    <Box
-      small={true}
-      title="系统自检"
+    <div
+      className={styles.selfInspection}
       onClick={() => UnityAction.sendMsg('menuItem', '系统自检')}
     >
+      <Title title="系统自检" />
       <div className={styles.selfCon}>
         <div className={styles.circle}>{renderStatus()}</div>
         <div className={styles.texting}>自检中</div>
@@ -182,7 +189,7 @@ const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
       <div className={styles.time} style={{ marginBottom: 30 }}>
         {dayjs(autoReport.CreatedTime).format('YYYY-MM-DD HH:mm')}
       </div> */}
-    </Box>
+    </div>
   );
 });
 
@@ -191,17 +198,18 @@ const Electric = (props) => {
   const { data } = props;
   const { projectId } = useParams();
   return (
-    <Box
-      title="能耗监测"
+    <div
+      className={styles.electric}
       onClick={() => UnityAction.sendMsg('menuItem', '能耗监测')}
     >
+      <Title title="能耗监测" />
       <ul>
         <li>
           <div className={styles.value}>{data?.elec}</div>
           <div className={styles.btn1}>用电量</div>
         </li>
       </ul>
-    </Box>
+    </div>
   );
 };
 // 药耗监测
@@ -225,17 +233,20 @@ const Medicine = () => {
   });
 
   return (
-    <Box
-      title="药耗监测"
+    <div
+      className={styles.medicine}
       onClick={() => UnityAction.sendMsg('menuItem', '药耗监测')}
     >
+      <Title title="药耗监测" />
       <ul>
         <li>
-          <div className={styles.value}>{data?.value?.toFixed(2) || '-'}元</div>
+          <div className={styles.valueLong}>
+            {data?.value?.toFixed(2) || '-'}元
+          </div>
           <div className={styles.btn1}>当月吨水药成本</div>
         </li>
       </ul>
-    </Box>
+    </div>
   );
 };
 
@@ -260,21 +271,26 @@ const Scada = () => {
   });
 
   return (
-    <Box
-      title="工艺监控"
+    <div
+      className={styles.scadaMain}
       onClick={() => UnityAction.sendMsg('menuItem', '工艺监控')}
     >
-      <div className={styles.scada} style={{ width: '540px', height: '270px' }}>
+      <Title title="工艺监控" />
+      <div style={{ width: '707px', height: '279px' }}>
         {data?.map((url) => (
           <iframe
             key={url}
-            style={{ width: '540px', height: '270px' }}
+            style={{
+              width: '707px',
+              height: '279px',
+              borderRadius: '0 0 42px 0',
+            }}
             src={url}
           />
         ))}
         <div className={styles.mask}></div>
       </div>
-    </Box>
+    </div>
   );
 };
 
@@ -298,15 +314,12 @@ const Backlog = (props) => {
     }
   };
   return (
-    <Box
-      title={
-        <div style={{ display: 'flex' }}>
-          待办事项
-          {/* <div className={styles.count}>{data?.length || 0}</div> */}
-        </div>
-      }
+    <div
+      className={styles.backlogMain}
       onClick={() => UnityAction.sendMsg('menuItem', '待办事项')}
     >
+      <Title title={<div style={{ display: 'flex' }}>待办事项</div>} />
+
       <div className={styles.backlog}>
         <div>
           {data?.map((item) => (
@@ -331,7 +344,15 @@ const Backlog = (props) => {
           ))}
         </div>
       </div>
-    </Box>
+    </div>
+  );
+};
+const Title = ({ title }) => {
+  return (
+    <div className={styles.titleContent}>
+      <div className={styles.line} />
+      <div className={styles.boxTitle}>{title}</div>
+    </div>
   );
 };
 

src/pages/Home/index.less

@@ -1,15 +1,15 @@
 .content {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: right;
+  align-items: flex-end;
   height: 100vh;
   width: 100%;
-  padding-top: 80px;
+  padding-bottom: 40px;
   color: #3b3b3b;
+  background-color: #f5a623;
 }
 .left {
   text-align: center;
-  width: 25%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -19,44 +19,13 @@
   .left;
 }
 .box {
-  width: 610px;
-  padding: 24px;
+  margin: 28px 28px 0 0;
   text-align: left;
   position: relative;
   display: inline-block;
   cursor: pointer;
-  background: url('@/assets/home-box-bg.png') no-repeat center;
-  background-size: 100% 100%;
-
-  // &:last-child {
-  //   margin-bottom: 0;
-  // }
-
-  .titleContent {
-    margin: 20px 38px;
-    display: inline-block;
-    position: relative;
-  }
-
-  .boxTitle {
-    padding: 0 10px;
-    position: relative;
-    // z-index: 99;
-    font-size: 32px;
-    font-weight: 600;
-    color: #0139f1;
-    line-height: 34px;
-    z-index: 1;
-  }
-  .line {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 14px;
-    background: url('@/assets/home-box-line.png') no-repeat center;
-    background-size: 100% 100%;
-    z-index: 0;
-  }
+  border-radius: 40px 0 43px 0;
+  box-shadow: 2px 13px 18px 0 rgba(9, 64, 115, 0.49);
   > ul {
     display: flex;
     justify-content: center;
@@ -65,40 +34,124 @@
       width: 50%;
     }
   }
-  .name {
-    font-size: 22px;
-    font-weight: 400;
-    color: #ffffff;
-    line-height: 28px;
-    text-align: center;
-    margin-top: 18px;
-  }
-  .value {
-    margin: 60px 0;
-    font-size: 40px;
-    font-weight: 600;
-    color: #3b3b3b;
-    line-height: 50px;
-    text-align: center;
-    letter-spacing: 4px;
-    font-family: PangMenZhengDao-3, PangMenZhengDao-3;
-  }
 }
-.boxH {
+.smartWork {
   .box;
-  height: 420px;
+  width: 604px;
+  height: 357px;
+  background: url('@/assets/home/bg5.png') no-repeat center;
+  background-size: 100% 100%;
 }
-.scada {
-  margin-bottom: 20px;
+
+.selfInspection {
+  .box;
+  width: 403px;
+  height: 357px;
+  background: url('@/assets/home/bg6.png') no-repeat center;
+  background-size: 100% 100%;
+}
+
+.waterAmt {
+  .box;
+  width: 604px;
+  height: 340px;
+  background: url('@/assets/home/bg1.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.waterQuality {
+  .box;
+  width: 604px;
+  height: 399px;
+  background: url('@/assets/home/bg2.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.backlogMain {
+  .box;
+  width: 604px;
+  height: 357px;
+  background: url('@/assets/home/bg7.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.electric {
+  .box;
+  width: 707px;
+  height: 335px;
+  background: url('@/assets/home/bg3.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.medicine {
+  .box;
+  width: 707px;
+  height: 399px;
+  background: url('@/assets/home/bg4.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.scadaMain {
+  .box;
+  width: 707px;
+  height: 357px;
+  background: url('@/assets/home/bg8.png') no-repeat center;
+  background-size: 100% 100%;
+}
+
+.titleContent {
+  margin: 20px 36px;
+  display: inline-block;
+  position: relative;
+}
+
+.boxTitle {
   padding: 0 10px;
   position: relative;
-  .mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+  // z-index: 99;
+  font-size: 32px;
+  font-weight: 600;
+  color: #0139f1;
+  line-height: 34px;
+  z-index: 1;
+}
+.line {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 14px;
+  background: url('@/assets/home-box-line.png') no-repeat center;
+  background-size: 100% 100%;
+  z-index: 0;
+}
+
+.name {
+  font-size: 22px;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 28px;
+  text-align: center;
+  margin-top: 18px;
+}
+.value {
+  margin: 50px 0;
+  font-size: 40px;
+  font-weight: 600;
+  color: #3b3b3b;
+  line-height: 50px;
+  text-align: center;
+  letter-spacing: 4px;
+  font-family: PangMenZhengDao-3, PangMenZhengDao-3;
+}
+.valueLong {
+  .value;
+  margin: 80px 0;
+}
+.boxH {
+  .box;
+  height: 420px;
+}
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 .scadaContent {
   padding: 20px;
@@ -115,6 +168,7 @@
 }
 
 .scoreBox {
+  margin-top: 10px;
   display: flex;
   justify-content: space-around;
   .score {
@@ -150,9 +204,10 @@
 
 .time {
   font-size: 22px;
-  margin-bottom: 20px;
   text-align: right;
-  margin-right: 30px;
+  position: absolute;
+  right: 49px;
+  bottom: 14px;
 }
 .insTag {
   position: absolute;
@@ -180,7 +235,6 @@
   margin-bottom: 22px;
 }
 .centerBox {
-  width: 50%;
   display: flex;
   justify-content: space-around;
   height: calc(100vh - 80px);
@@ -216,12 +270,14 @@
   .titleText {
     font-size: 24px;
     margin: 0 20px;
+    font-family: Source Han Sans, Source Han Sans;
   }
   .bottomCon {
     margin-left: 24px;
     font-size: 20px;
     line-height: 36px;
     word-wrap: break-word;
+    font-family: Source Han Sans, Source Han Sans;
   }
 }
 .count {
@@ -247,6 +303,7 @@
   background-color: #1d83ff;
 }
 .selfCon {
+  margin-top: 10px;
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -266,7 +323,7 @@
     font-weight: 500;
   }
   .texting {
-    width: 200px;
+    width: 128px;
     font-size: 40px;
     margin-top: 20px;
     font-family: Source Han Sans, Source Han Sans;