top menu style update

src/components/Top/index.vue

@@ -1,49 +1,51 @@
 <template>
-  <div class="page-header-box" style="line-height: 40px;position: relative;padding:0 12px">
-    <el-row :gutter="24">
-      <el-col :span="12" v-if="path=='/login'" class="layui-col-md6 layui-col-xs4 header-left">
-        <img class="header-icon" src="../../assets/images/icon_tel2.png" />
-        <span class="p-l-small">服务热线：400-1797-985</span>
-        <img class="m-l header-icon" src="../../assets/images/icon_phone.png" />
-        <span class="pos-r" id="app_download" @mouseover="app=true" @mouseleave="app=false">
+  <div class="fx-row fx-bet-cen pl12 pr12 relative" style="line-height: 40px;">
+    <div v-if="path=='/login'" class="fx-row fx-sta-cen">
+      <img class="icon16" src="../../assets/images/icon_tel2.png"/>
+      <span class="pl8">服务热线：400-1797-985</span>
+      <img class="icon16 ml20" src="../../assets/images/icon_phone.png"/>
+      <span class="relative" id="app_download" @mouseover="app=true" @mouseleave="app=false">
           <a href="javascript:void(0);">APP下载</a>
           <div id="appQrcode" v-show="app">
-            <img style="width:110px;height:110px;" src="../../assets/images/app.png" />
+            <img style="width:110px;height:110px;" src="../../assets/images/app.png"/>
             <p style="width:110px;color:#000;font-size:12px;margin-top:5px;">扫描下载APP</p>
           </div>
         </span>
-      </el-col>
-      <el-col :span="12" v-else class="layui-col-md6 layui-col-xs4 header-left">
-        <span @click="to('/login')" style="margin-right:20px;cursor:pointer">首页</span>
-        <span v-for="(item, index) in visibleMenus" :key="index" style="margin-right:20px;cursor:pointer" @click="handleClick(item)">{{item.meta.title}}</span>
-      </el-col>
-      <el-col v-if="userInfo" :span="12" class="layui-col-md6 layui-col-xs8" style="text-align:right;">
-        <!--您好！-->
-        <span style="color:#FFA400;">{{userInfo.nickName}}{{userInfo.userName}} [{{userInfo.provinceName}} {{userInfo.schoolName}}]</span>
-        <!--，欢迎登录名学金榜-->
-        <el-dropdown v-if="roleList.length > 1" @command="handleRoleExchange">
-          <span class="el-dropdown-link pointer">[{{currentRole.roleName}}]</span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item disabled class="role-change-title">
-              角色切换
-              <i class="el-icon-refresh"></i>
-            </el-dropdown-item>
-            <el-dropdown-item v-for="(r,i) in roleList" :key="i" :disabled="r==currentRole" :command="r.roleId" :divided="i==0">{{r.roleName}}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+    </div>
+    <div v-else class="fx-row fx-sta-cen">
+      <span @click="to('/login')" class="mr20 pointer">首页</span>
+      <span v-for="(item, index) in visibleMenus" :key="index" class="mr20 pointer"
+            @click="handleClick(item)">{{ item.meta.title }}</span>
+    </div>
+    <div v-if="userInfo" class="fx-row fx-end-cen">
+      <!--您好！-->
+      <span style="color:#FFA400;">{{ userInfo.nickName }}{{ userInfo.userName }}
+        [{{ userInfo.provinceName }} {{ userInfo.schoolName }}]</span>
+      <!--，欢迎登录名学金榜-->
+      <el-dropdown v-if="roleList.length > 1" @command="handleRoleExchange">
+        <span class="el-dropdown-link pointer">[{{ currentRole.roleName }}]</span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item disabled class="role-change-title">
+            角色切换
+            <i class="el-icon-refresh"></i>
+          </el-dropdown-item>
+          <el-dropdown-item v-for="(r,i) in roleList" :key="i" :disabled="r==currentRole" :command="r.roleId"
+                            :divided="i==0">{{ r.roleName }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
 
-        <img style="height:16px;margin-left:5px;position:relative;bottom:-2px;" :src="userInfo.avatar||'https://www.mingxuejc.com/images/photo/4_2.png'" />
-        <a @click="userTo">个人中心</a>
-        <a style="padding-left:30px;color:#FB731F;" @click="logout">退出登录</a>
-      </el-col>
-    </el-row>
+      <img class="icon16" :src="userInfo.avatar"/>
+      <a @click="userTo">个人中心</a>
+      <a style="padding-left:30px;color:#FB731F;" @click="logout">退出登录</a>
+    </div>
   </div>
 </template>
 
 <script>
-import auth from "@/utils/auth";
-import { mapGetters } from "vuex";
-import { changeRole } from "@/api/login.js";
+import auth from '@/utils/auth'
+import { mapGetters } from 'vuex'
+import { changeRole } from '@/api/login.js'
 import RouterHelpMixin from '@/router/router-help-mixin'
 
 export default {
@@ -51,143 +53,143 @@ export default {
   data() {
     return {
       app: false,
-      path: "",
-      menuList: [],
-    };
+      path: '',
+      menuList: []
+    }
   },
 
   computed: {
-    ...mapGetters(["currentUser", "currentRole", "roleList"]),
+    ...mapGetters(['currentUser', 'currentRole', 'roleList']),
     userInfo() {
-      if (!auth.getToken()) return null;
-      return this.currentUser;
+      if (!auth.getToken()) return null
+      return this.currentUser
     },
     // 所有的路由信息
     routers() {
-      return this.$store.state.permission.topbarRouters;
+      return this.$store.state.permission.topbarRouters
     },
     visibleMenus() {
-      return this.menuList.filter((m) => !m.hidden);
-    },
+      return this.menuList.filter((m) => !m.hidden)
+    }
   },
   created() {
-    this.path = this.$route.path;
+    this.path = this.$route.path
   },
   mounted() {
-    this.menuList = this.topMenus();
+    this.menuList = this.topMenus()
   },
   methods: {
     logout() {
-      this.$confirm("确定注销并退出系统吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       }).then(() => {
-        this.$store.dispatch("LogOut").then(() => {
-          this.$router.push({ path: "/login" });
-          window.location.reload();
-        });
-      });
+        this.$store.dispatch('LogOut').then(() => {
+          this.$router.push({ path: '/login' })
+          window.location.reload()
+        })
+      })
     },
     to(url) {
       this.$router.push({
-        path: url,
-      });
+        path: url
+      })
     },
 
     // 顶部显示菜单
     topMenus() {
-      let topMenus = [];
+      let topMenus = []
       this.routers.map((menu) => {
-        menu.level = 1;
+        menu.level = 1
         if (menu.hidden !== true) {
           // 兼容顶部栏一级菜单内部跳转
-          if (menu.path === "/") {
+          if (menu.path === '/') {
             if (menu.children) {
-              topMenus.push(menu.children[0]);
+              topMenus.push(menu.children[0])
             }
           } else {
-            topMenus.push(menu);
+            topMenus.push(menu)
           }
         }
-      });
-      return topMenus;
+      })
+      return topMenus
     },
     userTo() {
       //跳转至个人中心
-      this.menuList = this.topMenus();
+      this.menuList = this.topMenus()
       this.menuList.forEach((item) => {
-        if (item.path == "/user") {
-          this.handleClick(item);
-        } else if ("index" == item.path) {
-          this.$emit("userNavTo");
+        if (item.path == '/user') {
+          this.handleClick(item)
+        } else if ('index' == item.path) {
+          this.$emit('userNavTo')
         }
-      });
+      })
     },
     handleClick(data) {
-      auth.setMenuTab(data);
-      auth.setActiveMenu(data.path + "/" + data.children[0].path);
-      let item = JSON.parse(JSON.stringify(data));
-      let routes = []; //三级菜单
-      let second = []; //二级
-      let routesTo = [];
+      auth.setMenuTab(data)
+      auth.setActiveMenu(data.path + '/' + data.children[0].path)
+      let item = JSON.parse(JSON.stringify(data))
+      let routes = [] //三级菜单
+      let second = [] //二级
+      let routesTo = []
       if (item.children) {
         //有二级菜单
         item.children.forEach((item2) => {
           if (item2.children) {
             item2.children.forEach((item3) => {
-              item3.path = item.path + "/" + item2.path + "/" + item3.path;
-            });
+              item3.path = item.path + '/' + item2.path + '/' + item3.path
+            })
             if (routes.length == 0 && item2.children.length) {
               //一级菜单下面第一个有3个菜单的二级菜单
-              routes = item2.children;
-              routesTo = item2.children;
+              routes = item2.children
+              routesTo = item2.children
             }
           } else {
-            routesTo = item.children;
+            routesTo = item.children
           }
-          item2.path = item.path + "/" + item2.path;
-          item2.level = 2;
-          second.push(item2);
-        });
-        let fal = false;
+          item2.path = item.path + '/' + item2.path
+          item2.level = 2
+          second.push(item2)
+        })
+        let fal = false
         second.forEach((item) => {
           if (!fal && item.children && item.children.length > 0) {
-            auth.setActiveMenu(item.path);
-            fal = true;
+            auth.setActiveMenu(item.path)
+            fal = true
           }
-        });
-        auth.setMenuTab(second);
-        this.three = true;
-        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+        })
+        auth.setMenuTab(second)
+        this.three = true
+        this.$store.commit('SET_SIDEBAR_ROUTERS', routes)
       } else {
         //没有二级菜单
-        this.$store.commit("SET_SIDEBAR_ROUTERS", []);
+        this.$store.commit('SET_SIDEBAR_ROUTERS', [])
         this.$router.push({
-          path: item.path,
-        });
+          path: item.path
+        })
       }
-      let path = this.findLeafDescendantPath(data);
+      let path = this.findLeafDescendantPath(data)
       if (path) {
         this.$router.push({
-          path: path,
-        });
-        auth.setMenuListAction(path);
+          path: path
+        })
+        auth.setMenuListAction(path)
       } else {
       }
-      auth.setMenuList(routes);
+      auth.setMenuList(routes)
     },
     toPath(data, path, url) {
       data.forEach((item) => {
         if (!path && item.children && item.children.length > 0) {
-          let ac = url ? url + "/" : "";
-          path = this.toPath(item.children, path, ac + item.path);
+          let ac = url ? url + '/' : ''
+          path = this.toPath(item.children, path, ac + item.path)
         } else if (!path) {
-          let ac = url ? url + "/" : "";
-          path = ac + item.path;
+          let ac = url ? url + '/' : ''
+          path = ac + item.path
         }
-      });
-      return path;
+      })
+      return path
     },
     gouAction(data) {
       // 22.6.7 hht 作废此方法，只处理了有限级跳转
@@ -197,26 +199,26 @@ export default {
             data[0].children[0].children &&
             data[0].children[0].children.length > 0
           ) {
-            return data[0].children[0].children.path;
+            return data[0].children[0].children.path
           } else {
-            return data[0].path + "/" + data[0].children[0].path;
+            return data[0].path + '/' + data[0].children[0].path
           }
         } else {
-          return data[0].path;
+          return data[0].path
         }
       } else {
-        return "";
+        return ''
       }
     },
     handleRoleExchange(roleId) {
       changeRole(roleId).then((_) => {
         // IMPORTANT: 此处会触发GetInfo/GetRouters
         //window.location.reload();
-        window.location.href = "/login";
-      });
-    },
-  },
-};
+        window.location.href = '/login'
+      })
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -226,20 +228,25 @@ export default {
   padding: 8px 0;
   font-size: 14px;
 }
+
 .page-header-box .header-icon {
   height: 16px;
   vertical-align: middle;
 }
+
 img {
   border: none;
 }
+
 .p-l-small {
   padding-left: 8px;
 }
+
 .page-header-box .header-left > span {
   display: inline-block;
   vertical-align: middle;
 }
+
 #appQrcode {
   background: #fff;
   border: 1px solid #cdcdcd;
@@ -252,15 +259,19 @@ img {
   z-index: 9999;
   text-align: center;
 }
+
 .pos-r {
   position: relative;
 }
+
 .m-l {
   margin-left: 16px;
 }
+
 .color-orange {
   color: #47c6a2;
 }
+
 .role-change-title {
   color: #666666;
   font-size: 12px;

src/store/modules/user.js

@@ -39,9 +39,8 @@ const user = {
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
         getInfo().then(res => {
-          console.log('xxxxxxxxxxx', res);
           const user = res.data
-          user.avatar == user.avatar || require("@/assets/images/profile.jpg")
+          user.avatar = user.avatar || require("@/assets/images/profile.png")
           commit('RELOAD', user)
           auth.setUserInfo(user)
           cacheMixin.methods.clearUserCache() // NOTE：纯作为静态方法在调用，有更优雅的方式？