添加子分类样式

components/common/icon/src/icon.vue

 <template>
-  <i :class="'iconfont yun-icon--' + name" :style="{fontSize:size,color:nowColor,transition:'.5s ease',cursor:cursor,verticalAlign:vertical,paddingBottom:pb}" @mouseenter="changeStyle1" @mouseout="changeStyle2"></i>
+  <i :class="'iconfont yun-icon--' + name" :style="{fontSize:size,color:color,transition:'.5s ease',cursor:cursor,verticalAlign:vertical,paddingBottom:pb}" @mouseenter="changeStyle1" @mouseout="changeStyle2"></i>
 </template>
 
 <script>

components/pc/nav/navCard.vue

@@ -6,21 +6,25 @@
           class="nav-card__label"
           :style="{backgroundColor: isBlue ? '#00AAE6' : '#fff'}"
         ></div>
-        <nuxt-link tag="p" :to="labelId?{path:navAddress,  query:{type:labelId}}:{path:navAddress}" :style="{color: isBlue || fontColor ? '#00AAE6' : '#666'}">
+        <p @click="childList.length===0?changeRoute1(labelId?{path:navAddress,  query:{type:labelId}}:{path:navAddress}):null" :style="{color: isBlue || fontColor ? '#00AAE6' : '#666'}">
           <slot></slot>
-        </nuxt-link>
-          <div class="nav-card__menu" v-if="isShow===true && childList !== undefined" >
+        </p>
+          <div class="nav-card__menu" v-if="isShow===true && childList.length > 0" >
             <div class="arrow"></div>
             <div class="label-list-box">
-              <nuxt-link
+              <p
                 class="label-list"
                 v-for="(item, key) in childList"
                 :key="`${item}${key}`"
-                :to="{path: item.address, query: { type: item.childId}}">
+                :style="{color:  item.childId===type ? '#00AAE6' : '#666'}"
+                @click="changeRoute1({path: item.address, query: { type: item.childId}})"
+                >
+
                 {{item.label}}
-              </nuxt-link>
+              </p>
             </div>
           </div>
+         <yun-icon name="left_arrow" size="12px" :color="isBlue?'#00AAE6' : '#999'" v-if="childList.length>0"></yun-icon>
       </div>
     </div>
   </div>
@@ -31,7 +35,10 @@
   export default {
   name: "navCard",
   props: {
-    childList: Array,
+    childList: {
+      type:Array,
+      default:() => ([])
+    },
     navAddress: String,
     labelId: [String,Number]
   },
@@ -39,10 +46,26 @@
     return{
       fontColor: false,
       isShow: false,
-      isBlue: false
+      isBlue: false,
+      type:'',
     }
   },
   created() {
+    this.type = this.$route.query.type
+    if(this.childList.length>0){
+
+      for (let i = 0; i <this.childList.length ; i++) {
+        if(this.$route.query.type===this.childList[i].childId){
+          this.isBlue = true;
+          return false;
+
+        }else{
+          this.isBlue = false;
+        }
+      }
+      return false;
+
+    }
     if (this.$route.query.type) {
       this.isBlue = this.$route.query.type===this.labelId;
     } else {
@@ -52,6 +75,22 @@
   },
   watch:{
     $route(to,from){
+      this.type = this.$route.query.type
+
+      if(this.childList.length>0){
+
+        for (let i = 0; i <this.childList.length ; i++) {
+          if(this.$route.query.type===this.childList[i].childId){
+            this.isBlue = true;
+            return false;
+
+          }else{
+            this.isBlue = false;
+          }
+        }
+        return false;
+
+      }
       if (this.$route.query.type) {
         this.isBlue = this.$route.query.type===this.labelId;
       } else {
@@ -68,6 +107,9 @@
     handleMouseOver(){
       this.isShow = true;
       this.fontColor = true;
+    },
+    changeRoute1(route){
+      this.$router.push(route)
     }
   }
 }

pages/answer/index.vue

@@ -101,8 +101,9 @@ export default {
     }
   },
   created() {
-    this.getLabelTitle();
     this.dataGetQuestionCategory();
+    this.getLabelTitle();
+
     this.dataGetHotRepliersList();
     this.handleArticleList();
   },
@@ -133,9 +134,6 @@ export default {
     },
     getLabelTitle(){
       let type = this.$route.query.type;
-      if(type!=='all'){
-        type = Number(type)
-      }
       this.list.map((val,index)=>{
         if(val.type===type){
           this.labelTitle =  val.label
@@ -158,7 +156,7 @@ export default {
         this.list.push({
           label: val.category,
           address: '/answer',
-          type: val.categoryId
+          type: val.categoryId.toString()
         })
       })
     },

pages/blog/index.vue

@@ -119,20 +119,20 @@ export default {
             childList.push({
               label: val.category,
               address: '/blog',
-              childId: val.categoryId,
+              childId: val.categoryId.toString(),
             })
           })
           this.list.push({
             label: val.category,
             address: '/blog',
-            type: val.categoryId,
+            type: val.categoryId.toString(),
             childList
           })
         }else{
           this.list.push({
             label: val.category,
             address: '/blog',
-            type: val.categoryId
+            type: val.categoryId.toString(),
           })
         }
 
@@ -141,10 +141,15 @@ export default {
     },
     getLabelTitle(){
       let type = this.$route.query.type;
-      if(type!=='all'){
-        type = Number(type)
-      }
       this.list.map((val,index)=>{
+
+        if(val.childList){
+          val.childList.map((chVal) => {
+            if(chVal.childId===type){
+              this.labelTitle = chVal.label
+            }
+          })
+        }
         if(val.type===type){
           this.labelTitle = val.label
         }

pages/project/index.vue

@@ -133,9 +133,6 @@ export default {
     },
     getLabelTitle(){
       let type = this.$route.query.type;
-      if(type!=='all'){
-        type = Number(type)
-      }
       this.list.map((val,index)=>{
         if(val.type===type){
           this.labelTitle =  val.label
@@ -147,7 +144,7 @@ export default {
           this.list.push({
             label: val.category,
             address: '/project',
-            type: val.categoryId
+            type: val.categoryId.toString()
           })
         })