src/assets/css/main.css

@@ -167,8 +167,16 @@
   left: 10px;
 }
 
-.collapse.set-params .el-collapse-item__header {
-  padding-left: 20px;
+.collapse.set-params .el-collapse-item.active .el-collapse-item__header {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.collapse.set-params .el-collapse-item.active .el-collapse-item__header .name {
+  color: #fff !important;
+}
+
+.collapse.set-params .el-collapse-item__header .name {
   color: #A8B6C8;
 }
 

src/assets/css/main.scss

@@ -176,9 +176,25 @@
     }
 
     &.set-params {
+        .el-collapse-item {
+            &.active{
+                 .el-collapse-item__header {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+    
+            .name {
+    
+                color: #fff !important;
+            }
+    
+        }
+            }
+        }
         .el-collapse-item__header {
-            padding-left: 20px;
+            .name{
             color: #A8B6C8;
+           }
+         
         }
 
         .table-ul {

src/components/setParams.vue

@@ -9,21 +9,26 @@
         </div>
         <el-collapse v-model="$store.state.activeNames">
             <template v-for="item, index in routerList">
-                <el-collapse-item :name="index + 1" :key="index" v-if="!item.isRouter">
+                <el-collapse-item :class="routerNow == item.router ? 'active' : ''" :name="index + 1" :key="index"
+                    v-if="!item.isRouter">
                     <template slot="title" class="collapse-title">
-                        {{ item.name }}
+                        <span class="name">{{ item.name }}</span>
                     </template>
                     <!--  -->
                     <ul class="table-ul">
-                        <li @click="toRouter(item1)" :class="routerNow == item1.router&&routerIndex==index1+1 ? 'active' : ''" class="table-li" v-for="item1, index1 in item.list" :key="index1">{{
-                            item1.name }} <div class="status" :class="item1.status == 0 ? 'outline' : 'online'"
+                        <li @click="toRouter(item1)"
+                            :class="routerNow == item1.router && routerIndex == index1 + 1 ? 'active' : ''" class="table-li"
+                            v-for="item1, index1 in item.list" :key="index1">{{
+                                item1.name }} <div class="status" :class="item1.status == 0 ? 'outline' : 'online'"
                                 v-if="item1.status >= 0">{{ item1.status
                                     == 0
                                     ? '离线' : '在线' }}</div>
                         </li>
                     </ul>
                 </el-collapse-item>
-                <div @click="toRouter(item)" :class="routerNow==item.router?'active':''" class="no-list" v-else>{{ item.name }}</div>
+                <div @click="toRouter(item)" :class="routerNow == item.router ? 'active' : ''" class="no-list" v-else>{{
+                    item.name
+                }}</div>
             </template>
         </el-collapse>
     </div>
@@ -33,9 +38,9 @@ export default {
     data() {
         return {
             routerList: [
-                { name: '施肥机配方设置', list: [],router:'' },
+                { name: '施肥机配方设置', list: [], router: 'formula' },
                 {
-                    name: '灌溉组配置',router:'', list: [
+                    name: '灌溉组配置', router: 'irrigateSet', list: [
                         { name: '1#灌溉组配置', status: -1, router: 'irrigateSet', index: 1 },
                         { name: '2#灌溉组配置', status: -1, router: 'irrigateSet', index: 2 },
                         { name: '3#灌溉组配置', status: -1, router: 'irrigateSet', index: 3 },
@@ -74,21 +79,21 @@ export default {
     methods: {
         dataInit() {
             var store = this.$store.state
-           store.nameList.forEach((el,index)=>{
-                if(index<8){
-                    if(store.equipmentName['fertilization'+store.nameList[index]]){
+            store.nameList.forEach((el, index) => {
+                if (index < 8) {
+                    if (store.equipmentName['fertilization' + store.nameList[index]]) {
                         // store.equipmentName['fertilization'+store.nameList[index]]
                         this.routerList[0].list.push({
-                            name:'配方'+(index+1),
+                            name: '配方' + (index + 1),
                             status: -1,
-                            index:index+1,
+                            index: index + 1,
                             router: 'formula'
                         })
                     }
                 }
-           })
-           console.log(this.routerList[0],11);
-            
+            })
+            console.log(this.routerList[0], 11);
+
         },
         //去首页
         toHome(index) {
@@ -106,7 +111,7 @@ export default {
                     this.$router.push({ path: `/irrigateSet?id=${item.index}` })
                 } else if (item.router == 'formula' && this.$route.query.id != item.index) {
                     this.$router.push({ path: `/formula?id=${item.index}` })
-                }  else if (item.router != this.routerNow && !item.http) {
+                } else if (item.router != this.routerNow && !item.http) {
 
                     this.$router.push({ name: item.router })
 
@@ -141,14 +146,23 @@ export default {
             margin-right: 10px;
         }
     }
-    .no-list{
+
+
+
+    .el-collapse-item {
+        &.active {}
+    }
+
+    .no-list {
         color: #A8B6C8;
-        &.active{
+
+        &.active {
             background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    color: #fff;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: #fff;
         }
     }
+
     .set-tips {
         width: 100%;
         border-bottom: 1px solid rgba(168, 182, 200, 0.2);