reactor:综合概览ui更改对应相关调整

src/views/comprehensive-overview/cameraInfo.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="camera-info-container">
+    <div class="area">
+      <img src="@/assets/image/comprehensive/cameraIcon1.png" alt="" />
+      <div class="info">
+        <div>高杆摄像头</div>
+        <div><span class="green">10 </span> / 10</div>
+      </div>
+    </div>
+    <div class="area">
+      <img src="@/assets/image/comprehensive/cameraIcon2.png" alt="" />
+      <div class="info">
+        <div>中杆摄像头</div>
+        <div><span class="green">5 </span> / 5</div>
+      </div>
+    </div>
+    <div class="area">
+      <img src="@/assets/image/comprehensive/cameraIcon3.png" alt="" />
+      <div class="info">
+        <div>低杆摄像头</div>
+        <div><span class="green">0 </span> / 25</div>
+      </div>
+    </div>
+    <div class="area">
+      <img src="@/assets/image/comprehensive/cameraIcon4.png" alt="" />
+      <div class="info">
+        <div>一体化杆</div>
+        <div><span class="green">0 </span> / 25</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.camera-info-container {
+  position: absolute;
+  top: px-to-rem(55);
+  left: calc(50% - px-to-rem(364));
+  width: px-to-rem(728);
+  height: px-to-rem(72);
+  background: url('@/assets/image/comprehensive/cameraBg.png') no-repeat 0 0 / 100% 100%;
+  display: flex;
+  align-items: center;
+  .area {
+    display: flex;
+    align-items: center;
+    img {
+      width: px-to-rem(95);
+      height: px-to-rem(75);
+    }
+    .info {
+      font-weight: bold;
+      font-size: px-to-rem(16);
+      color: #ffffff;
+      .green {
+        color: #81ff78;
+        font-size: px-to-rem(18);
+      }
+    }
+  }
+}
+</style>

src/views/comprehensive-overview/index.vue

@@ -2,15 +2,17 @@
   <div class="container">
     <Left></Left>
     <Right></Right>
+    <CameraInfo></CameraInfo>
   </div>
 </template>
 
 <script>
 import Left from './left.vue'
 import Right from './right.vue'
+import CameraInfo from './cameraInfo.vue';
 export default {
     components:{
-        Left,Right
+        Left,Right,CameraInfo
     }
 }
 </script>

src/views/comprehensive-overview/left.vue

@@ -22,47 +22,51 @@
             </div>
           </template>
         </BaseMain>
-        <BaseMain title="渭河生态区概况">
+        <BaseMain title="渭河生态区基本概况">
           <template v-slot:mainArea>
             <div class="main-container">
+              <div class="title-area">
+                <div class="left">渭河生态区</div>
+                <div class="right">干流全长：818km</div>
+              </div>
               <div class="icon-item">
-                <img src="@/assets/image/comprehensive/point1.png" class="img1" />
-                <img src="@/assets/image/comprehensive/line.png" class="img2" />
                 <img src="@/assets/image/comprehensive/point2.png" class="img3" />
+                <img src="@/assets/image/comprehensive/line.png" class="img2" />
+                <img src="@/assets/image/comprehensive/point1.png" class="img1" />
               </div>
               <div class="info">
-                <div class="left">西起：武兴交界</div>
-                <div class="right">东起：兴秦交界</div>
+                <div class="left">发源：渭源县鸟鼠山</div>
+                <div class="right">止于：渭南市潼关县</div>
               </div>
               <div class="base-info-card">
                 <div class="base-info-item">
-                  <span>水资源总量 (2024年)</span>
-                  <span class="value green">0.7 <span>亿m³</span></span>
+                  <span>流域总面积</span>
+                  <span class="value green">13.5 <span>万k㎡</span></span>
                 </div>
                 <div class="base-info-item">
-                  <span>人均综合用量 (2024年)</span>
-                  <span class="value yellow">201.7 <span>m³</span></span>
+                  <span>陕西境内河长</span>
+                  <span class="value yellow">512 <span>km</span></span>
                 </div>
                 <div class="base-info-item">
-                  <span>河堤与堤防长度</span>
-                  <span class="value blue">30.7 <span>km</span></span>
+                  <span>陕西境内流域总面积</span>
+                  <span class="value blue">6.76 <span>万k㎡</span></span>
                 </div>
               </div>
               <div class="base-info-card m0">
                 <div class="base-info-item">
-                  <span>堤顶宽度</span>
-                  <span class="value green">20~30<span>m</span></span>
+                  <span>陕西境内生态区面积</span>
+                  <span class="value green">1277.04<span>万k㎡</span></span>
                 </div>
                 <div class="base-info-item">
-                  <span>堤距</span>
-                  <span class="value yellow">800~1200 <span>m</span></span>
+                  <span>宝鸡峡大坝以上河道管理区面积</span>
+                  <span class="value yellow">291.49<span>km²</span></span>
                 </div>
                 <div class="base-info-item">
-                  <span>堤防外总面积</span>
-                  <span class="value blue">35.75 <span>㎡</span></span>
+                  <span>宝鸡峡大坝以下河道管理区面积</span>
+                  <span class="value blue">538.85 <span>km²</span></span>
                 </div>
               </div>
-              <div class="table-card" v-for="item in tableInfo" :key="item.id">
+              <!-- <div class="table-card" v-for="item in tableInfo" :key="item.id">
                 <div class="title">{{ item.title }}</div>
                 <div class="base-info-card">
                   <div class="base-info-item">
@@ -78,20 +82,35 @@
                     <span class="value">{{ item.sl }} <span>m³/人</span></span>
                   </div>
                 </div>
+              </div> -->
+              <div class="title-area borderT">
+                <div class="left">渭河生态区兴平段</div>
+                <div class="right">河道长度：30.6km</div>
+              </div>
+              <div class="icon-item">
+                <img src="@/assets/image/comprehensive/point2.png" class="img3" />
+                <img src="@/assets/image/comprehensive/line.png" class="img2" />
+                <img src="@/assets/image/comprehensive/point1.png" class="img1" />
+              </div>
+              <div class="info">
+                <div class="left">西起：武兴交界</div>
+                <div class="right">东至：兴秦交界</div>
               </div>
               <div class="icon-card-container">
                 <div class="area">
                   <img src="@/assets/image/comprehensive/icon2.png" />
                   <div class="areainfo">
                     <div class="title">农村区段</div>
-                    <div class="km"><span class="blue">34.01</span>K㎡</div>
+                    <div class="km"><span>一级管控 </span><span class="blue">17</span>k㎡</div>
+                    <div class="km"><span>二级管控 </span><span class="blue">15.87</span>k㎡</div>
                   </div>
                 </div>
                 <div class="area">
                   <img src="@/assets/image/comprehensive/icon1.png" />
                   <div class="areainfo">
                     <div class="title">城市核心区段</div>
-                    <div class="km"><span class="green">34.01</span>K㎡</div>
+                    <div class="km"><span>一级管控 </span><span class="green">0.39</span>k㎡</div>
+                    <div class="km"><span>二级管控 </span><span class="green">0.78</span>k㎡</div>
                   </div>
                 </div>
               </div>
@@ -170,6 +189,22 @@ export default {
   left: px-to-rem(-4);
   .main-container {
     padding: px-to-rem(10);
+    .title-area {
+      display: flex;
+      justify-content: space-between;
+      margin-top: px-to-rem(10);
+      align-items: center;
+      .left {
+        font-weight: bold;
+        font-size: px-to-rem(16);
+        color: #ffffff;
+      }
+      .right {
+        font-weight: 500;
+        font-size: px-to-rem(14);
+        color: #ffffff;
+      }
+    }
     .img-txt {
       position: relative;
       .img {
@@ -240,10 +275,15 @@ export default {
         }
       }
     }
+    .borderT{
+      padding-top: px-to-rem(17); 
+      border-top: px-to-rem(1) solid #5980A9;
+    }
   }
   .icon-item {
     position: relative;
     height: px-to-rem(18);
+    margin-top: px-to-rem(10);
     .img1 {
       position: absolute;
       top: px-to-rem(0);
@@ -270,13 +310,12 @@ export default {
     font-size: px-to-rem(14);
     color: #ffffff;
     margin-top: px-to-rem(15);
-    padding-bottom: px-to-rem(10);
-    border-bottom: px-to-rem(1) solid #5980a9;
+    // padding-bottom: px-to-rem(10);
   }
   .base-info-card {
     display: flex;
     justify-content: space-between;
-    margin-top: px-to-rem(10);
+    margin-top: px-to-rem(7);
     .base-info-item {
       display: flex;
       flex-direction: column;
@@ -354,13 +393,16 @@ export default {
           font-weight: bold;
           font-size: px-to-rem(12);
           color: #c4c6c8;
-        }
-        .blue {
+          span{
+            color: #F5F5F5;
+          }
+           .blue {
           color: #81b1f5;
         }
         .green {
           color: #80f5ff;
         }
+        }
       }
     }
   }