点击有交互效果 改变背景颜色

src/views/outpatientDetails.vue

@@ -274,9 +274,11 @@
           <div class="outpatientDetails_bottom_rght2_top_mes">
             <span
               class="outpatientDetails_bottom_rght2_top_mes_span1"
+              :class="{ outpatientDetails_bottom_rght2_top_mes_span1background: ind == span1Ind }"
               v-for="(item, ind) in typeCountDatas"
               :key="ind"
-              @click="gettype(item.name)"
+              
+              @click="gettype(item.name,ind)"
               >{{ item.name }}：<span :style="{ color: item.color }">{{
                 item.count
               }}</span></span
@@ -290,9 +292,10 @@
         <div class="outpatientDetails_bottom_rght2_bottom">
           <div
             class="outpatientDetails_bottom_rght2_bottom_li"
+            :class="{outpatientDetails_bottom_rght2_bottom_liInd:ind==liInd}"
             v-for="(item, ind) in options"
             :key="ind"
-             @click="getruleId(item.ruleId)"
+             @click="getruleId(item.ruleId,ind)"
           >
             <span
               v-show="item.projectRuleLevel == '禁止'"
@@ -375,7 +378,7 @@ export default {
         .catch((error) => {});
     };
    //点击异常分类 显示异常信息
-	   const gettype=(name)=>{
+	   const gettype=(name,ind)=>{
 		   console.log('name',name);
 			state.showCountDatas = true;
 			state.showbottom = true;
@@ -383,7 +386,8 @@ export default {
 			http
 				.post(`/medical/get/GetPRHisData?&code=${route.value.query.id}&projectType=${name}`, {})
 				.then((data) => {
-					
+					state.liInd=-1;
+          state.span1Ind=ind;
 					state.options = data.projectRules;
 					// state.typeCountDatas = data.typeCountDatas;
 					// if (data.typeCountDatas == null) {
@@ -402,10 +406,11 @@ export default {
 
 
         //点击获取中间的表格数据
-	   const  getruleId=(ruleId)=>{
+	   const  getruleId=(ruleId,ind)=>{
           http
 				.post(`/medical/Post/GetiFHisByItemCode?code=${route.value.query.id}&ruleId=${ruleId}`, {})
 				.then((data) => {
+          state.liInd=ind;
 					state.tableData = data;
 				
 				})
@@ -567,6 +572,8 @@ export default {
       lowMagnification: 0, //低倍率值
       highMagnification: 0, //高倍率值
       bottomheight: "60%", //底部高度
+      span1Ind: -1,
+			liInd: -1,
     });
     //表格自适应高度
     const route = useRoute();
@@ -1059,6 +1066,7 @@ export default {
           margin-bottom: 21px;
           font-size: 13px;
           color: #6a707e;
+          cursor: pointer;/*鼠标移上有小手*/
           div {
             width: 98%;
             height: 46px;
@@ -1183,7 +1191,11 @@ export default {
             font-weight: 400;
             color: #5d5d5d;
             margin-right: 5px;
+             cursor: pointer;/*鼠标移上有小手*/
           }
+          &_span1background{
+						background: #d9f0fa;
+					}
           &_span2 {
             width: 101px;
             height: 36px;
@@ -1232,7 +1244,7 @@ export default {
         &_li {
           width: 100%;
           height: 25%;
-
+          cursor: pointer;/*鼠标移上有小手*/
           display: flex;
           flex-direction: column;
           align-items: flex-start;
@@ -1261,6 +1273,9 @@ export default {
             width: 97%;
           }
         }
+        &_liInd{
+					background: #f3fafd;
+				}
       }
     }
   }