diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/hehudangan.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/hehudangan.vue
index 299a7b5..003841b 100644
--- a/src/views/pictureOnMap/page/components/DialogTabs/component/hehudangan.vue
+++ b/src/views/pictureOnMap/page/components/DialogTabs/component/hehudangan.vue
@@ -1,75 +1,41 @@
 <template>
 <!-- 河湖档案 -->
-  <div id="hehudangan" v-loading="loading"
-    element-loading-background="rgba(11, 18, 52, 0.3)">
-     <div class="flex flex-justcontent-spacebetween">
-       <div class="eachInfo">
-      <div class="name">库容量(万m³):</div>
-      <div class="text">{{listData.lakeVolume}}</div>
-    </div>
-     <div class="eachInfo">
-      <div class="name">常态水位(m):</div>
-      <div class="text">{{listData.mormalWaterLevel}}</div>
-    </div>
-     </div>
-     <div class="flex flex-justcontent-spacebetween">
-       <div class="eachInfo">
-      <div class="name">最高控制水位(m):</div>
-      <div class="text">{{listData.maxControlWaterLevel}}</div>
-    </div>
-     <div class="eachInfo">
-      <div class="name">保证水位(m):</div>
-      <div class="text">{{listData.ecologyWaterLevel}}</div>
-    </div>
-     </div>
-     <div class="flex flex-justcontent-spacebetween">
-       <div class="eachInfo">
-      <div class="name">最大水深(m):</div>
-      <div class="text">{{listData.maxWaterDepth}}</div>
-    </div>
-     <div class="eachInfo">
-      <div class="name">平均水深(m):</div>
-      <div class="text">{{listData.avgWaterDepth}}</div>
-    </div>
-     </div>
-     <div class="flex flex-justcontent-spacebetween">
-       <div class="eachInfo">
-      <div class="name">蓝线控制面积(ha):</div>
-      <div class="text">{{listData.blueLineControlArea}}</div>
-    </div>
-     <div class="eachInfo">
-      <div class="name">岸线长度(km):</div>
-      <div class="text">{{listData.lakeLine}}</div>
-    </div>
-     </div>
-     <div class="flex flex-justcontent-spacebetween">
-       <!-- <div class="eachInfo">
-      <div class="name">河湖定位:</div>
-      <el-icon style=" font-size: 22px; cursor: pointer;
-  color: #ccdfff;"><LocationFilled /></el-icon>
-    </div> -->
-     <div class="eachInfo">
-      <div class="name">高程类别:</div>
-      <div class="text">黄海高程</div>
-    </div>
-       </div>
-     
-    <div class="eachInfo">
-      <div class="name">现场照片:</div>
-      <div>
-         <el-image v-if="listData.imgArr?.length>0"
-              style="width: 80px; height: 80px"
-              :zoom-rate="1.2"
-              :max-scale="7"
-              :min-scale="0.2"
-              :src="listData.imgArr[0]"
-              fit="cover"
-              :preview-src-list="listData.imgArr"
-              :preview-teleported="true"
-            ></el-image>
-      </div>
-    </div>
-    
+  <div id="hehudangan" v-loading="loading" element-loading-background="rgba(11, 18, 52, 0.3)">
+    <el-row :gutter="10">
+      <el-col :span="3"><div class="name">库容量(万m³):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.lakeVolume}}</div></el-col>
+      <el-col :span="3"><div class="name">常态水位(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.mormalWaterLevel}}</div></el-col>
+      <el-col :span="3"><div class="name">最高控制水位(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.maxControlWaterLevel}}</div></el-col>
+      <el-col :span="3"><div class="name">保证水位(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.ecologyWaterLevel}}</div></el-col>
+      <el-col :span="3"><div class="name">最大水深(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.maxWaterDepth}}</div></el-col>
+      <el-col :span="3"><div class="name">平均水深(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.avgWaterDepth}}</div></el-col>
+      <el-col :span="3"><div class="name">蓝线控制面积(ha):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.blueLineControlArea}}</div></el-col>
+      <el-col :span="3"><div class="name">岸线长度(km):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.lakeLine}}</div></el-col>
+      <el-col :span="3"><div class="name">高程类别:</div></el-col>
+      <el-col :span="9"><div class="text">黄海高程</div></el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="3"><div class="name">现场照片:</div></el-col>
+      <el-col :span="9">
+        <el-image v-if="listData.imgArr?.length>0"
+            style="width:120px; height:120px"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+            :src="listData.imgArr[0]"
+            fit="cover"
+            :preview-src-list="listData.imgArr"
+            :preview-teleported="true"
+          ></el-image>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -134,30 +100,37 @@
   padding: 20px 30px;
   overflow-y: auto;
  
-  .eachInfo {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-    font-size: 14px;
-    margin-bottom: 20px;
+  // .eachInfo {
+  //   display: flex;
+  //   align-items: center;
+  //   font-weight: bold;
+  //   font-size: 14px;
+  //   margin-bottom: 20px;
     
     .name {
       color: #ccdfff;
-      min-width: 130px;
+      // min-width: 130px;
       text-align: right;
-      padding-right: 10px;
+      // padding-right: 10px;
+      line-height: 30px;
     }
     .text {
-      min-height: 37px;
-      min-width: 200px;
-        flex: 1;
+      // min-height: 37px;
+      // min-width: 200px;
+      //   flex: 1;
       color: #8fbffe;
       background: #0d2359;
       border-radius: 6px;
       border: 1px solid #0b9bff;
-      padding: 7px 12px;
+      // padding: 7px 12px;
+      height: 30px;
+      line-height: 28px;
+      padding: 0 10px;
     }
-  }
+  // }
+}
+.el-col {
+  margin-bottom:10px;
 }
 </style>
 

diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/hehudangan.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/hehudangan.vue
index 299a7b5..003841b 100644
--- a/src/views/pictureOnMap/page/components/DialogTabs/component/hehudangan.vue
+++ b/src/views/pictureOnMap/page/components/DialogTabs/component/hehudangan.vue
@@ -1,75 +1,41 @@
 <template>
 <!-- 河湖档案 -->
-  <div id="hehudangan" v-loading="loading"
-    element-loading-background="rgba(11, 18, 52, 0.3)">
-     <div class="flex flex-justcontent-spacebetween">
-       <div class="eachInfo">
-      <div class="name">库容量(万m³):</div>
-      <div class="text">{{listData.lakeVolume}}</div>
-    </div>
-     <div class="eachInfo">
-      <div class="name">常态水位(m):</div>
-      <div class="text">{{listData.mormalWaterLevel}}</div>
-    </div>
-     </div>
-     <div class="flex flex-justcontent-spacebetween">
-       <div class="eachInfo">
-      <div class="name">最高控制水位(m):</div>
-      <div class="text">{{listData.maxControlWaterLevel}}</div>
-    </div>
-     <div class="eachInfo">
-      <div class="name">保证水位(m):</div>
-      <div class="text">{{listData.ecologyWaterLevel}}</div>
-    </div>
-     </div>
-     <div class="flex flex-justcontent-spacebetween">
-       <div class="eachInfo">
-      <div class="name">最大水深(m):</div>
-      <div class="text">{{listData.maxWaterDepth}}</div>
-    </div>
-     <div class="eachInfo">
-      <div class="name">平均水深(m):</div>
-      <div class="text">{{listData.avgWaterDepth}}</div>
-    </div>
-     </div>
-     <div class="flex flex-justcontent-spacebetween">
-       <div class="eachInfo">
-      <div class="name">蓝线控制面积(ha):</div>
-      <div class="text">{{listData.blueLineControlArea}}</div>
-    </div>
-     <div class="eachInfo">
-      <div class="name">岸线长度(km):</div>
-      <div class="text">{{listData.lakeLine}}</div>
-    </div>
-     </div>
-     <div class="flex flex-justcontent-spacebetween">
-       <!-- <div class="eachInfo">
-      <div class="name">河湖定位:</div>
-      <el-icon style=" font-size: 22px; cursor: pointer;
-  color: #ccdfff;"><LocationFilled /></el-icon>
-    </div> -->
-     <div class="eachInfo">
-      <div class="name">高程类别:</div>
-      <div class="text">黄海高程</div>
-    </div>
-       </div>
-     
-    <div class="eachInfo">
-      <div class="name">现场照片:</div>
-      <div>
-         <el-image v-if="listData.imgArr?.length>0"
-              style="width: 80px; height: 80px"
-              :zoom-rate="1.2"
-              :max-scale="7"
-              :min-scale="0.2"
-              :src="listData.imgArr[0]"
-              fit="cover"
-              :preview-src-list="listData.imgArr"
-              :preview-teleported="true"
-            ></el-image>
-      </div>
-    </div>
-    
+  <div id="hehudangan" v-loading="loading" element-loading-background="rgba(11, 18, 52, 0.3)">
+    <el-row :gutter="10">
+      <el-col :span="3"><div class="name">库容量(万m³):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.lakeVolume}}</div></el-col>
+      <el-col :span="3"><div class="name">常态水位(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.mormalWaterLevel}}</div></el-col>
+      <el-col :span="3"><div class="name">最高控制水位(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.maxControlWaterLevel}}</div></el-col>
+      <el-col :span="3"><div class="name">保证水位(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.ecologyWaterLevel}}</div></el-col>
+      <el-col :span="3"><div class="name">最大水深(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.maxWaterDepth}}</div></el-col>
+      <el-col :span="3"><div class="name">平均水深(m):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.avgWaterDepth}}</div></el-col>
+      <el-col :span="3"><div class="name">蓝线控制面积(ha):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.blueLineControlArea}}</div></el-col>
+      <el-col :span="3"><div class="name">岸线长度(km):</div></el-col>
+      <el-col :span="9"><div class="text">{{listData.lakeLine}}</div></el-col>
+      <el-col :span="3"><div class="name">高程类别:</div></el-col>
+      <el-col :span="9"><div class="text">黄海高程</div></el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="3"><div class="name">现场照片:</div></el-col>
+      <el-col :span="9">
+        <el-image v-if="listData.imgArr?.length>0"
+            style="width:120px; height:120px"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+            :src="listData.imgArr[0]"
+            fit="cover"
+            :preview-src-list="listData.imgArr"
+            :preview-teleported="true"
+          ></el-image>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -134,30 +100,37 @@
   padding: 20px 30px;
   overflow-y: auto;
  
-  .eachInfo {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-    font-size: 14px;
-    margin-bottom: 20px;
+  // .eachInfo {
+  //   display: flex;
+  //   align-items: center;
+  //   font-weight: bold;
+  //   font-size: 14px;
+  //   margin-bottom: 20px;
     
     .name {
       color: #ccdfff;
-      min-width: 130px;
+      // min-width: 130px;
       text-align: right;
-      padding-right: 10px;
+      // padding-right: 10px;
+      line-height: 30px;
     }
     .text {
-      min-height: 37px;
-      min-width: 200px;
-        flex: 1;
+      // min-height: 37px;
+      // min-width: 200px;
+      //   flex: 1;
       color: #8fbffe;
       background: #0d2359;
       border-radius: 6px;
       border: 1px solid #0b9bff;
-      padding: 7px 12px;
+      // padding: 7px 12px;
+      height: 30px;
+      line-height: 28px;
+      padding: 0 10px;
     }
-  }
+  // }
+}
+.el-col {
+  margin-bottom:10px;
 }
 </style>
 
diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/liuyujieshaoHeHu.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/liuyujieshaoHeHu.vue
index 43e286d..eb989bc 100644
--- a/src/views/pictureOnMap/page/components/DialogTabs/component/liuyujieshaoHeHu.vue
+++ b/src/views/pictureOnMap/page/components/DialogTabs/component/liuyujieshaoHeHu.vue
@@ -15,7 +15,7 @@
       <div class="name">流域分区:</div>
       <div>
          <el-image v-if="listData.imgArr?.length>0"
-              style="width: 80px; height: 80px"
+              style="width:120px; height:120px"
               :zoom-rate="1.2"
               :max-scale="7"
               :min-scale="0.2"