更新大屏

src/views/home/components/yjItem.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="warning-card flex align-center" :class="changeBG(item.yjjb)">
+    <div class="warning-image">
+      <img :src="item.image" alt="预警图片" />
+    </div>
+    <div class="warning-info">
+      <div class="flex just-between align-center">
+        <div class="flex align-center mt4">
+            <span>{{ item.name }}</span>
+            <span class="gapline mr10 ml10"></span>
+            <span>{{ item.gender }}</span>
+            <span class="gapline mr10 ml10"></span>
+            <span>{{ item.age }}</span>
+            <span class="gapline mr10 ml10"></span>
+            <span>{{ item.mz }}</span>
+      </div>
+        <span class="tag">涉警人员</span>
+      </div>
+      <div class="mt4">身份证：{{ item.sfzh }}</div>
+      <div class="mt4 one_text_detail">户籍地址：{{ item.location }}</div>
+      <div class="mt4 one_text_detail">居住地址：{{ item.location }}</div>
+      <div class="mt4 two_text_detail">预警内容：{{ item.yjnr }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { de } from "element-plus/es/locale.mjs";
+import { cs } from "element-plus/es/locale.mjs";
+import { reactive, ref } from "vue";
+const props = defineProps({
+  item: {
+    type: Object,
+    default: {}
+  }
+});
+
+const changeBG = (str) => {
+    switch(str){
+        case "10":
+            return "red";
+        case "20":
+            return "orange";
+        case "30":
+            return "yellow";
+        default:
+            return "blue";
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.warning-card {
+  background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
+  background-size: 100% 100%;
+  gap: 12px;
+  margin-bottom: 4px;
+  padding: 10px;
+  box-sizing: border-box;
+  .warning-image {
+    width: 80px;
+    height: 100px;
+        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;
+        }
+        .gapline{
+            width: 2px;
+            height: 14px;
+            background: #e9e9e9;
+        }
+    }
+}
+.red {
+  background: url("~@/assets/images/GroupRed.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+.orange {
+  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>