优化代码

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

@@ -1,11 +1,15 @@
 <template>
   <div class="personCard relative flex mb10 pointer">
     <div class="cxbq f14 lh50 tc absolute">已完成</div>
+    <el-button v-if="props.type == 'yj'" type="primary" class="btn_qs f14 lh50 tc absolute">签收</el-button>
     <div class="avatarBox relative">
       <div class="marks f12 absolute" :class="changeBg(props.item.yjjb)">
         处置
       </div>
-      <div><img width="76" height="96" :src="pro" alt=""></div>
+      <div>
+        <el-image :preview-teleported="true" style="width: 76px; height: 96px" :src="pro" :preview-src-list="[pro]">
+        </el-image>
+      </div>
       <span class="smallbtn">全息档案</span>
     </div>
     <div class="infoBox">
@@ -43,6 +47,10 @@ const props = defineProps({
   item: {
     type: Object,
     default: () => ({})
+  },
+  type: {
+    type: String,
+    default: ""
   }
 });
 // 切换背景
@@ -71,9 +79,11 @@ const changeBg = (type) => {
   padding: 10px;
   box-sizing: border-box;
   transition: all 0.3s;
+
   &:hover {
     background: rgba(17, 66, 96, 0.8);
   }
+
   .cxbq {
     right: 5px;
     top: 5px;
@@ -85,9 +95,16 @@ const changeBg = (type) => {
     color: #00ffff;
     transform: rotate(-48deg);
   }
+
+  .btn_qs {
+    right: 5px;
+    bottom: 5px;
+  }
+
   .avatarBox {
     margin-right: 15px;
     overflow: hidden;
+
     .marks {
       width: 70px;
       height: 32px;
@@ -97,20 +114,26 @@ const changeBg = (type) => {
       top: -4px;
       left: -24px;
       transform: rotate(-45deg);
+      z-index: 1;
     }
+
     .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 {
     color: #ff0000;
     padding: 4px 6px;
@@ -119,24 +142,30 @@ const changeBg = (type) => {
     border: 1px solid #ff0000;
     border-radius: 4px;
   }
+
   .infoBox {
     flex: 1;
+
     .basicInfo {
       .name {
         color: #fff;
       }
+
       .idCard {
         color: #89afcf;
       }
     }
+
     .detailInfo {
       .infoItem {
         color: #89afcf;
         font-size: 14px;
         margin-bottom: 5px;
+
         .label {
           color: #fff;
         }
+
         .value {
           color: #89afcf;
         }
@@ -144,6 +173,7 @@ const changeBg = (type) => {
     }
   }
 }
+
 .smallbtn {
   display: inline-block;
   padding: 4px 10px;