高亮显示

src/views/ebiz/performance/Performance.vue

@@ -32,10 +32,11 @@
       <span v-if="Name!==''">{{Name}}></span><span class="red">{{unitName}}</span>
     </div>
     <div class="flex align-items-c h86 content1 bg-white mt10" v-if="mask=='1'">
-      <div class="w40 h60 ml15 text-center" v-for="item in headerList" :key='item'>
-        <div @click="(InfoDetails(item.agentCode))">
+      <div class="w40 h60 ml15 text-center relative" v-for="(item, index) in headerList" :key="index">
+        <div @click="(InfoDetails(index))">
           <!-- <img v-if="item.agentHeadUrl!==null" class="h40 w40" :src="item.agentHeadUrl" alt /> -->
           <img class="h40 w40" src="@/assets/images/u188.png" alt />
+          <div :class="[item.isShowImg?'active':'']"></div>
           <div class="fs13">{{item.agentName}}</div>
         </div>
       </div>
@@ -127,7 +128,8 @@ export default {
       headerList: [],
       unitName: '',
       Name:'',
-      code:''
+      code:'',
+      isShowImg:true
     }
   },
   created() {
@@ -264,9 +266,13 @@ export default {
     getPerformanceHeader1() {
       let date = {}
       getPerformanceHeader(date).then((res) => {
-        console.log(res)
+        console.log("=="+res)
         if (res.result == 0) {
-          this.headerList = res.content
+          for(let i=0;i<res.content.length;i++){
+            res.content[i].isShowImg=true
+         }
+         this.headerList = res.content
+         console.log(this.headerList)
         }
       })
     },
@@ -278,7 +284,11 @@ export default {
       getHeader(code).then(res=>{
           console.log(res)
           if (res.result == 0) {
-          this.headerList = res.content
+          for(let i=0;i<res.content.length;i++){
+            res.content[i].isShowImg=true
+            res.content[0].isShowImg=false
+         }
+         this.headerList = res.content
         }
       })
     },
@@ -301,10 +311,15 @@ export default {
     },
     //点击头像
     InfoDetails(item) {
-      // console.log(item)
+      console.log(item)
+      for(let i=0;i<this.headerList.length;i++){
+            this.headerList[i].isShowImg=true
+         }
+        this.headerList[item].isShowImg=false
+    
       let code = {
         date: this.timeCode,
-        agentCode: item,
+        agentCode: this.headerList[item].agentCode,
       }
       getPerformanceDetail(code).then((res) => {
         console.log(res)
@@ -334,4 +349,14 @@ export default {
   width: 100%;
   overflow-x: scroll;
 }
+.active{
+     width: 40px;
+    height: 40px;
+    z-index: 100;
+    background: #ccc;
+    opacity: 0.5;
+    top: 0px;
+    border-radius: 20px;
+    position: absolute;
+}
 </style>