111111

src/views/Sygl/index.less

@@ -40,7 +40,7 @@
     }*/
     width: 100%;
     height: 28vh;
-    background: url("../../../public/assets/syfgrkqk.png") 0 0 no-repeat;
+    background: rgba(1, 29, 73, 0.7) url("../../../public/assets/syfgrkqk.png") 36px 0 no-repeat;
     background-size: contain;
   }
   .tqyb-box1{
@@ -56,10 +56,10 @@
      background-size: cover;
    }
   .tqyb-box3{
-    width: 96%;
-    height: 26vh;
-    background: url("../../../public/assets/szjc.png") 0 0 no-repeat;
-    background-size: cover;
+    width: 100%;
+    height: 30vh;
+    background: rgba(1, 29, 73, 0.7)  url("../../../public/assets/szjc.png") 20px 0 no-repeat;
+    background-size: contain;
   }
   .szjc-box{
     /*padding-left: 20px;

src/views/Sygl/index.tsx

@@ -27,6 +27,7 @@ const SyglPage: React.FC = () => {
     }];
 
     const option = {
+      backgroundColor:"rgba(11,81,149,0.4)",
       title: {
         text:'168',
         subtext: '水源总数',
@@ -81,9 +82,10 @@ const SyglPage: React.FC = () => {
     setEchartsOption(option);
 
     const optionGxnl = {
+      backgroundColor:"rgba(11,81,149,0.4)",
       grid: {
         top: "22%",
-        bottom: "27%"
+        bottom: "33%"
       },
       tooltip: {
         trigger: "axis",
@@ -444,7 +446,7 @@ const SyglPage: React.FC = () => {
             {/*<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>*/}
             <ReactEcharts
               option={echartsOptionGxnl}
-              style={{width: "100%", height: 'calc( 100% - 10px )'}}
+              style={{width: "100%", height: '100%'}}
             />
           </div>
         </div>