页面调整

src/views/Sygl/index.less

@@ -34,23 +34,43 @@
   }
 
   .tqyb-box{
-    margin-top:8px;
+    /*margin-top:8px;
     img{
       width: 85%;
-    }
+    }*/
+    width: 100%;
+    height: 25vh;
+    background: url("../../../public/assets/syfgrkqk.png") 0 0 no-repeat;
+    background-size: cover;
   }
   .tqyb-box1{
-    margin-top:8px;
+    width: 100%;
-    img{
+    height: 25vh;
-      width: 86%;
+    background: url("../../../public/assets/jwnqsl.png") 0 0 no-repeat;
-    }
+    background-size: cover;
+  }
+  .tqyb-box2{
+     width: 100%;
+     height: 24vh;
+     background: url("../../../public/assets/gxzgxnl.png") 0 0 no-repeat;
+     background-size: cover;
+   }
+  .tqyb-box3{
+    width: 100%;
+    height: 24vh;
+    background: url("../../../public/assets/szjc.png") 0 0 no-repeat;
+    background-size: cover;
   }
   .szjc-box{
-    padding-left: 20px;
+    /*padding-left: 20px;
     margin-top:8px;
     img{
-      width: 90%;
+      width: 23vw;
-    }
+    }*/
+    width: 100%;
+    height: 25vh;
+    background: url("../../../public/assets/afjc.png") 0 0 no-repeat;
+    background-size: cover;
   }
 
   .echarts-box{

src/views/Sygl/index.tsx

@@ -256,25 +256,25 @@ const SyglPage: React.FC = () => {
             <div className="echarts-box">
               <ReactEcharts
                 option={echartsOption}
-                style={{ width:"100%", height: 'calc( 100% - 10px )' }}
+                style={{ width:"100%", height: '25vh' }}
               />
             </div>
           </div>
         </div>
         <div className='box'>
           <div className='box-title'>
-            <div className='title-item'>重点水源</div>
+            <div className='title-item'>近五年取水量</div>
-            <div className="tqyb-box1">
+          </div>
-              <img src={`${process.env.PUBLIC_URL}/assets/zdsy.png`} alt=""/>
+          <div className="tqyb-box1">
-            </div>
+            {/*<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>*/}
           </div>
         </div>
         <div className='box'>
           <div className='box-title'>
-            <div className='title-item'>天气预报</div>
+            <div className='title-item'>水源覆盖人口情况</div>
-            <div className="tqyb-box">
+          </div>
-              <img src={`${process.env.PUBLIC_URL}/assets/tqyb.png`} alt=""/>
+          <div className="tqyb-box">
-            </div>
+            {/*<img src={`${process.env.PUBLIC_URL}/assets/syfgrkqk.png`} alt=""/>*/}
           </div>
         </div>
       </div>
@@ -292,47 +292,26 @@ const SyglPage: React.FC = () => {
       <div className='right-box'>
         <div className='box'>
           <div className='box-title'>
-            <div className='title-item'>近五年取水量</div>
+            <div className='title-item'>各乡镇供需能力</div>
-            <div className="tqyb-box1">
-              <img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>
-            </div>
           </div>
-        </div>
+          <div className="tqyb-box2">
-        <div className='box'>
+            {/*<img src={`${process.env.PUBLIC_URL}/assets/gxzgxnl.png`} alt=""/>*/}
-          <div className='box-title'>
-            <div className='title-item'>供需能力</div>
-            <div className="img-box">
-              <div style={{marginTop:"30px"}}>
-                <div className="img-txt">
-                  <img src={`${process.env.PUBLIC_URL}/assets/gxnl1.png`} alt=""/>
-                  <span>
-                    <span className="color">500</span>万吨
-                    <span>水源总量</span>
-                  </span>
-                </div>
-                <div className="img-txt">
-                  <img src={`${process.env.PUBLIC_URL}/assets/gxnl2.png`} alt=""/>
-                  <span>
-                    <span className="color">500</span>万吨
-                    <span>需水总量</span>
-                  </span>
-                </div>
-              </div>
-              <div className="echarts-box">
-                <ReactEcharts
-                  option={echartsOptionGxnl}
-                  style={{ width:"100%", height: 'calc( 100% - 10px )' }}
-                />
-              </div>
-            </div>
           </div>
         </div>
         <div className='box'>
           <div className='box-title'>
             <div className='title-item'>水质监测</div>
-            <div className="szjc-box">
+          </div>
-              <img src={`${process.env.PUBLIC_URL}/assets/szjc.png`} alt=""/>
+          <div className="tqyb-box3">
-            </div>
+            {/*<img src={`${process.env.PUBLIC_URL}/assets/szjc.png`} alt=""/>*/}
+          </div>
+        </div>
+        <div className='box'>
+          <div className='box-title'>
+            <div className='title-item'>安防监测</div>
+          </div>
+          <div className="szjc-box">
+            {/*<img src={`${process.env.PUBLIC_URL}/assets/afjc.png`} alt=""/>*/}
           </div>
         </div>
       </div>

src/views/Zhsy/index.less

@@ -18,9 +18,11 @@
 
 .box {
   width: 30vw;
-  height: 28vh;
+  height: 30vh;
   min-height: 200px;
   margin-bottom: 10px;
+
+  zoom: 0.9;
 }
 
 .box-title {