UI

src/views/afforestation.vue

@@ -13,7 +13,7 @@
 						</el-date-picker>
 					</div>
 					<div class="i-list-con h-19">
-						<div class="d-l-con" v-for="(item,index) in afforestationList" @click="getAfforestationArea(item.id)">
+						<div class="d-l-con" :class="{on:listCurrentIndex1 == item.id}" v-for="(item,index) in afforestationList" @click="getAfforestationArea(item.id)">
 							<div class="d-l-l-text">
 								<i class="i-small"></i>
 								<h4>{{item.plantingQuantity}}</h4>
@@ -23,7 +23,7 @@
 				</div>
 				<div class="forthis">
 					<div class="i-list-con h-51">
-						<div class="d-l-con" v-for="(item,index) in AfforestationAreaList" @click="setGraphicsList(item.points)">
+						<div class="d-l-con" :class="{on:listCurrentIndex2 == item.points}" v-for="(item,index) in AfforestationAreaList" @click="setGraphicsList(item.points)">
 							<div class="d-l-l-text">
 								<i class="i-small"></i>
 								<h4>区域{{index+1}}</h4>
@@ -78,6 +78,8 @@
     },
 		data() {
 			return {
+				listCurrentIndex1:'',
+				listCurrentIndex2:'',
 				pickYear: new Date(), //选择年份
         afforestationList:[],
         AfforestationAreaList:[],
@@ -131,6 +133,7 @@
         })
       },
       getAfforestationArea(afforestationId) {
+		this.listCurrentIndex1 = afforestationId
         let that = this
         //获取左侧菜单列表
         getAfforestationArea(afforestationId).then(res => {
@@ -138,6 +141,7 @@
         })
       },
       setGraphicsList(points){
+		this.listCurrentIndex2 = points
         this.graphicsList=[]
         if(points!=null&&points!=""){
           this.graphicsList=JSON.parse(points);