非法涉猎

src/views/hunting/home/components/warning.vue

@@ -13,7 +13,7 @@
         <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
           <li v-for="item in roll_list" :key="item.id">
             <div class="roll_item_left">
-              <div class="roll_item_pic">
+              <div class="roll_item_pic" style="cursor:pointer" @click="handleDetail(item)">
                 <img class="oss-img" v-if="item.firstUserPic" :src="item.firstUserPic" alt="" />
                 <img v-else src="@/assets/hunting/user-default.png" />
               </div>
@@ -55,12 +55,17 @@
         </ul>
       </div>
     </div>
+    <el-dialog title="详情" :visible.sync="dialogVisible" width="1286px">
+      <UserDetail :data="detail"></UserDetail>
+    </el-dialog>
   </div>
 </template>
 <script>
 import { listHunter } from '@/api/hunting/hunter'
+import UserDetail from '../../warning/UserDetail.vue'
 export default {
   name: 'KeyPerson',
+  components: { UserDetail },
   data() {
     return {
       // * 模块标题
@@ -72,7 +77,9 @@ export default {
       // * 动画开关
       animateUp: false,
       // * 定时器ID
-      timer: null
+      timer: null,
+      dialogVisible: false,
+      detail: null
     }
   },
   mounted() {
@@ -96,10 +103,32 @@ export default {
       const res = await listHunter()
       this.roll_list = res.rows
       console.log(this.importpeople, '重点人员数据')
+    },
+    handleDetail(row) {
+      this.dialogVisible = true
+      this.detail = row
     }
   }
 }
 </script>
+<style lang="scss">
+.el-dialog {
+  background: url(@/assets/components/popup-bg.png);
+  background-size: 100% 100%;
+
+  .el-dialog__header {
+    padding-top: 1vh;
+    .el-dialog__title {
+      color: white;
+    }
+  }
+
+  .el-dialog__headerbtn {
+    top: 1vh;
+    right: 0.8vw;
+  }
+}
+</style>
 <style lang="scss" scoped>
 .oss-img {
   width: 100%;
@@ -288,7 +317,7 @@ export default {
               right: 0px;
               color: #061122;
               text-align: center;
-              white-space:normal;
+              white-space: normal;
               font-size: 10px;
             }
             .one_type {