优化

src/views/disasterRiskMonitor/cityEmergencyEvent.vue

@@ -121,15 +121,28 @@
   </div>
   <van-popup v-model:show="showDetailPop" position="bottom">
     <div class="title">事件详情</div>
-    <van-form disabled>
-      <van-cell-group inset>
-        <van-field v-model="rowDetail.address" label="位置" />
-        <van-field v-model="rowDetail.event_type" label="灾害类型" />
-        <van-field v-model="rowDetail.create_time" label="发生时间" />
-        <van-field v-model="rowDetail.data4" label="受伤人数" />
-        <van-field v-model="rowDetail.data5" label="死亡人数" />
-      </van-cell-group>
-    </van-form>
+    <div class="unit-box">
+      <div class="text">位置</div>
+      <div class="info-content">{{rowDetail.address}}</div>
+    </div>
+    <div class="unit-box">
+      <div class="text">灾害类型</div>
+      <div class="info-content">
+        <dict-tag :options="mm_event_type" :value="rowDetail.event_type" />
+      </div>
+    </div>
+    <div class="unit-box">
+      <div class="text">发生时间</div>
+      <div class="info-content">{{rowDetail.create_time}}</div>
+    </div>
+    <div class="unit-box">
+      <div class="text">受伤人数</div>
+      <div class="info-content">{{rowDetail.data4}}</div>
+    </div>
+    <div class="unit-box">
+      <div class="text">死亡人数</div>
+      <div class="info-content">{{rowDetail.data5}}</div>
+    </div>
   </van-popup>
 </template>
 
@@ -697,4 +710,28 @@ const initData = () => {
   margin-bottom: 8px;
   margin-top: 8px;
 }
+.unit-box {
+  display: flex;
+  flex-direction: row;
+  background-color: #ffffff;
+  min-height: 35px;
+  width: 100%;
+  margin-top: 5px;
+  align-items: center;
+}
+
+.text {
+  flex-shrink: 0;
+  color: grey;
+  width: 85px;
+  padding: 5px 10px;
+  text-align-last: justify;
+}
+
+.info-content {
+  margin: 5px 20px;
+  line-height: 1.5;
+  word-break: break-all;
+  white-space: normal;
+}
 </style>