lcw

src/views/home/components/yjItem.vue

@@ -5,16 +5,24 @@
     </div>
     <div class="warning-info">
       <div class="flex just-between align-center">
-        <div class="flex align-center mt4">
-            <span>{{ item.yjRyxm }}</span>
-            <span class="gapline mr10 ml10"></span>
-            <span>{{  IdCard(item.yjRysfzh,2) }}</span>
-            <span class="gapline mr10 ml10"></span>
-            <span>{{  IdCard(item.yjRysfzh,3) }}</span>
-      </div>
+        <div class="flex align-center mt4" v-if="item.yjLx == 2">
+          <span >{{ item.yjClcph }}</span>
+        </div>
+        <div class="flex align-center mt4" v-else>
+          <span>{{ item.yjRyxm }}</span>
+          <span class="gapline mr10 ml10"></span>
+          <span>{{ IdCard(item.yjRysfzh, 2) }}</span>
+          <span class="gapline mr10 ml10"></span>
+          <span>{{ IdCard(item.yjRysfzh, 3) }}</span>
+        </div>
+
         <span class="tag" v-if="item.yjbqmc">{{ item.yjbqmc }}</span>
       </div>
-      <div class="mt4">身份证：{{ item.yjRysfzh }}</div>
+      <div  v-if="item.yjLx == 2" class="flex">车牌类型：
+        <DictTag :tag="false" :value="item.yjHplx" color="#fff" :options="dict.D_BZ_HPZL"/>
+      </div>
+      <div class="mt4" v-else>身份证：{{ item.yjRysfzh }}</div>
+      <div class="mt4 two_text_detail">预警时间：{{ item.yjSj }}</div>
       <div class="mt4 one_text_detail">预警地址：{{ item.yjDz }}</div>
       <div class="mt4 two_text_detail">预警内容：{{ item.yjNr }}</div>
     </div>
@@ -28,19 +36,22 @@ const props = defineProps({
   item: {
     type: Object,
     default: {}
+  }, dict: {
+    tupe: Object,
+    default: {}
   }
 });
 
 const changeBG = (str) => {
-    switch(str){
-        case "10":
-            return "red";
-        case "20":
-            return "orange";
-        case "30":
-            return "yellow";
-        default:  return "blue";
-    }
+  switch (str) {
+    case "10":
+      return "red";
+    case "20":
+      return "orange";
+    case "30":
+      return "yellow";
+    default: return "blue";
+  }
 };
 </script>
 
@@ -52,31 +63,36 @@ const changeBG = (str) => {
   margin-bottom: 4px;
   padding: 10px;
   box-sizing: border-box;
+
   .warning-image {
     width: 80px;
     height: 100px;
-        img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .warning-info {
+    flex: 1;
+
+    .tag {
+      padding: 1px 6px;
+      background: #0072FF;
+      border-radius: 2px 2px 2px 2px;
+      font-size: 12px;
     }
 
-    .warning-info {
-        flex: 1;
-        .tag{
-            padding: 1px 6px;
-            background: #0072FF;
-            border-radius: 2px 2px 2px 2px;
-            font-size: 12px;
-        }
-        .gapline{
-            width: 2px;
-            height: 14px;
-            background: #e9e9e9;
-        }
+    .gapline {
+      width: 2px;
+      height: 14px;
+      background: #e9e9e9;
     }
+  }
 }
+
 .red {
   background: url("~@/assets/images/GroupRed.png") no-repeat center center;
   background-size: 100% 100%;
@@ -86,13 +102,14 @@ const changeBG = (str) => {
   background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
   background-size: 100% 100%;
 }
+
 .yellow {
   background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
   background-size: 100% 100%;
 }
+
 .blue {
   background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
   background-size: 100% 100%;
 }
-
 </style>