综合查询对话框 - ui

src/views/ comprehensiveQuery/components/vehicleInQuiry.vue

@@ -177,40 +177,50 @@
 
     <!-- 车辆详情对话框 -->
     <el-dialog
+      class="center-dialog"
       :title="title"
       :visible.sync="open"
-      width="60vm"
+      width="900px"
       append-to-body
-      :close-on-click-modal="true"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
       destroy-on-close
     >
       <!--上方文字显示-->
-      <div style="display: flex; align-items: center">
-        <span style="margin-top: 2px"> {{ form.overTime }}</span>
-        <dict-tag style="margin: 0 5px" :options="dict.type.bhsp_area" :value="form.regionName" />
-        <span style="margin: 0 2px">-</span>
-        <dict-tag style="margin: 0 5px" :options="dict.type.bhsp_road" :value="form.roadName" />
-        <span style="margin: 0 2px">/</span>
-        <dict-tag style="margin: 0 5px" :options="dict.type.bhsp_customs" :value="form.customsName" />
-        <span style="margin: 0 2px">-</span>
-        {{ form.monitoringName }}
-      </div>
+      <el-row>
+        <el-col :span="11">
+          <div style="display: flex; align-items: center;font-size: 12px;border: 1px solid #409eff;padding: 7px;background-color: #409eff;color: #ffffff;">
+            <span style="margin-top: 2px"> {{ form.overTime }}</span>
+            <dict-tag style="margin: 0 5px" :options="dict.type.bhsp_area" :value="form.regionName" />
+            <span style="margin: 0 2px">-</span>
+            <dict-tag style="margin: 0 5px" :options="dict.type.bhsp_road" :value="form.roadName" />
+            <span style="margin: 0 2px">/</span>
+            <dict-tag style="margin: 0 5px" :options="dict.type.bhsp_customs" :value="form.customsName" />
+            <span style="margin: 0 2px">-</span>
+            {{ form.monitoringName }}
+          </div>
+        </el-col>
+        <el-col :span="13">
+          <div style="display: flex; align-items: center;background-color: #c3d5f0;height: 31px;">
+          </div>
+        </el-col>
+      </el-row>
       <!--图片显示-->
-      <el-row :gutter="8" style="margin-top: 20px">
-        <el-col :span="8">
-          <div style="text-align: center;">
+      <el-row :gutter="8" style="margin-left: unset;margin-right: unset;">
+        <el-col :span="8" style="padding-left: unset;padding-right: unset;">
+          <div style="text-align: center;height: 188px;width: 287px;">
             <el-image :src="baseUrl + form.frontImg" />
-            <p>正面</p></div>
+          </div>
         </el-col>
-        <el-col :span="8">
-          <div style="text-align: center;">
+        <el-col :span="8" style="padding-left: unset;padding-right: unset;">
+          <div style="text-align: center;height: 188px;width: 287px;">
             <el-image :src="baseUrl + form.backImg" />
-            <p>背面</p></div>
+          </div>
         </el-col>
-        <el-col :span="8">
-          <div style="text-align: center;">
+        <el-col :span="8" style="padding-left: unset;padding-right: unset;">
+          <div style="text-align: center;height: 188px;width: 287px;">
             <el-image :src="baseUrl + form.licensePlateImg" />
-            <p>车牌</p></div>
+          </div>
         </el-col>
       </el-row>
     </el-dialog>
@@ -371,6 +381,7 @@ export default {
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .date-pickers {
   display: flex;
@@ -381,4 +392,19 @@ export default {
 .date-picker {
   margin: 5px 0px 5px 20px;
 }
+.center-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ::v-deep.el-dialog__title {
+    width: 64px;
+    height: 21px;
+    font-size: 16px !important;
+    font-family: Source Han Sans SC,serif;
+    font-weight: 500;
+    line-height: 14px;
+    color: #FFFFFF;
+    opacity: 1;
+  }
+}
 </style>