更新代码

src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="personCard relative flex mb10 pointer">
+    <div class="cxbq absolute">已完成</div>
+    <div class="avatarBox relative">
+      <div class="marks f12 absolute" :class="changeBg(props.item.yjjb)">
+        处置
+      </div>
+      <div><img width="80" height="120" :src="pro" alt=""></div>
+      <span class="smallbtn">全息档案</span>
+    </div>
+    <div class="infoBox">
+      <div class="basicInfo">
+        <span class="name">{{ props.item.name }}</span>
+        <span class="idCard">{{ props.item.idCard }}</span>
+        <span class="bqbox">{{ props.item.yjbq }}</span>
+      </div>
+      <div class="detailInfo">
+        <div class="infoItem">
+          <span class="label">性别：</span>
+          <span class="value">{{ props.item.gender }}</span>
+        </div>
+        <div class="infoItem">
+          <span class="label">年龄：</span>
+          <span class="value">{{ props.item.age }}岁</span>
+        </div>
+        <div class="infoItem">
+          <span class="label">住址：</span>
+          <span class="value">{{ props.item.address }}</span>
+        </div>
+        <div class="infoItem">
+          <span class="label">所属派出所：</span>
+          <span class="value">{{ props.item.sspcs }}</span>
+        </div>
+        <div class="infoItem">
+          <span class="label">列控原因：</span>
+          <span class="value">{{ props.item.yy }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import pro from "@/assets/images/icon100.png";
+import { defineProps } from "vue";
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => ({})
+  }
+});
+// 切换背景
+const changeBg = (type) => {
+  switch (type) {
+    case "10":
+      return "marks_red";
+    case "20":
+      return "marks_orange";
+    case "30":
+      return "marks_yellow";
+    case "40":
+      return "marks_blue";
+    default:
+      return "marks_red";
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.personCard {
+  background: rgba(10, 49, 88, 0.6);
+  box-shadow: inset 0px 0px 10px 0px rgba(56, 119, 242, 0.5);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #0072ff;
+  padding: 10px;
+  box-sizing: border-box;
+  transition: all 0.3s;
+  &:hover {
+    background: rgba(17, 66, 96, 0.8);
+  }
+  .cxbq {
+    right: 5px;
+    top: 5px;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    font-size: 14px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    background: rgba(0, 255, 255, 0.3);
+    border: 1px solid #00ffff;
+    color: #00ffff;
+    transform: rotate(-48deg);
+  }
+  .avatarBox {
+    margin-right: 15px;
+    overflow: hidden;
+    .marks {
+      width: 70px;
+      height: 32px;
+      line-height: 40px;
+      text-align: center;
+      background: rgba(255, 62, 62, 0.75);
+      top: -4px;
+      left: -24px;
+      transform: rotate(-45deg);
+    }
+    .marks_red {
+      background: rgba(255, 62, 62, 0.75);
+    }
+    .marks_orange {
+      background: rgba(255, 155, 62, 0.75);
+    }
+    .marks_yellow {
+      background: rgba(255, 239, 62, 0.75);
+    }
+    .marks_blue {
+      background: rgba(0, 114, 255, 0.75);
+    }
+  }
+  .bqbox {
+    font-size: 12px;
+    color: #ff0000;
+    padding: 4px 6px;
+    background: rgba(255, 0, 0, 0.3);
+    border-radius: 1px 1px 1px 1px;
+    border: 1px solid #ff0000;
+    border-radius: 4px;
+    margin-left: 10px;
+  }
+  .infoBox {
+    flex: 1;
+    .basicInfo {
+      margin-bottom: 10px;
+      .name {
+        font-size: 16px;
+        color: #fff;
+        margin-right: 15px;
+      }
+      .idCard {
+        color: #89afcf;
+        font-size: 14px;
+      }
+    }
+    .detailInfo {
+      .infoItem {
+        color: #89afcf;
+        font-size: 14px;
+        margin-bottom: 5px;
+        .label {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+.smallbtn {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: #0072ff;
+  border-radius: 5px 5px 5px 5px;
+  margin-top: 6px;
+}
+</style>