菜单抖动

src/assets/css/course.css

@@ -2,7 +2,7 @@
     width: 1020px;
   }
   .m-course-list li {
-    width: 238px;
+    width: 248px;
     height: 190px;
     border: 1px solid #e8e8e8;
     float: left;

src/containers/center/components/menu/index.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="m-left-block fl lwh-sider" center-sider="">
-    <div class="user-block" style="width:150px;cursor:pointer">
-      <img style="width:140px;height:160px"
-        class="user-img"
-        :onerror="errorImg"
-        :src="user.headImg||''">
+    <div class="user-block" style="width:150px;cursor:pointer" ng-click="$state.go('states.accountSetting')">
+      <img style="width:152px;height:152px"  
+        class="user-img" 
+        :src="user.headImg">
       <p class="user-name" style="margin-top: 10px;margin-bottom: -8px">
         {{user.nickname}}
       </p>
     </div>
 
     <ul class="m-left-list">
-      <li class="ng-scope" v-for="(item, index) in menu" :key="index"
-          :class="{'current':item.active}">
+
+      <li class="ng-scope" v-for="(item, index) in menu" :key="index" 
+          :class="{'current':isActive(item.path)}">
 
         <a href="javascript:void(0)" style="text-decoration: none" @click="goState(item)"
-          class="ng-binding"><span class="p-ico2" :class="item.icon" ></span>{{item.name}}</a>
+          class="ng-binding"><span class="p-ico2" :class="item.icon"></span>{{item.name}}</a>
 
-        <div class="sub-list ng-scope" v-if="item.children" >
-          <a v-for="subItem in item.children" :key="subItem.path" v-if="!subItem.hidden"
-            @click="goSubState(subItem)" :class="{'current':subItem.active}" href="javascript:void(0)"
+        <div class="sub-list ng-scope" v-if="item.children">
+          <a v-for="subItem in item.children" :key="subItem.path"
+            @click="goSubState(subItem)" :class="{'current':isActive(subItem.path)}" href="javascript:void(0)"
             class="ng-binding ng-scope">{{subItem.name}}</a>
         </div>
       </li>
@@ -41,43 +41,27 @@
     data() {
       return {
         exportLoading: false,
-        menu: [] ,
+        menu:menu,
         listLoading: false,
         groups: [],
-        tableData: [],
-        errorImg: 'this.src="' + require('../../../../assets/images/default-photo_hash88f70f5253.jpg') + '"'
+        tableData: []
       };
     },
-    created(){
-      let path = this.$route.path;
-      this.menu = menu.map( v=>{
-        v.active= path.indexOf( v.path ) >-1
-        return v
-      })
-    },
     methods: {
-      allUnactive( path ){
-        for( let i in this.menu){
-          let item = this.menu[i]
-          if( item.path != path ){
-            item.active = false
-          }
-        }
-      },
       goState( item ){
-        if( item.children ){
-          item.active = !item.active;
-          if( item.active ){
-            this.allUnactive( item.path )
-          }
+        if( item.children){
+          this.goSubState( item.children[0] );
         }else{
           this.goSubState( item );
         }
       },
       goSubState(item){
         if(item.path == this.$route.path) return;
-        item.active = true;
         this.$router.push(item.path);
+      },
+      isActive( path ){
+        let rpath = this.$route.path;
+        return rpath.indexOf( path )> -1;
       }
     }
   }