From 02c0fe95de11fe9e692144a9a15b6d96bb991b66 Mon Sep 17 00:00:00 2001
From: lxl <lixuliang_hd@126.com>
Date: 星期二, 08 十一月 2022 18:38:33 +0800
Subject: [PATCH] nav

---
 src/components/navMenu.vue |  143 ++++++++++++++++++++++-------------------------
 1 files changed, 67 insertions(+), 76 deletions(-)

diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index e502d4d..800d365 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -1,33 +1,22 @@
 <template>
-  <div>
-    <div class="leftTopWrapper">
-      <div class="logo">
-        <img src="../assets/img/www.terra-it.cn.png" alt="" />
-      </div>
-      <div class="menu">
-        <el-menu
-          active-text-color="#ffd04b"
-          class="el-menu-vertical-demo"
-          :default-active="activeIndex"
-          background-color="#586884"
-          text-color="#fff"
-          @select="handleselect"
-        >
-          <customElMenu :menuData="menuList"></customElMenu>
-        </el-menu>
-      </div>
+  <div class="topMenu">
+    <div class="logo">
+      <img src="../assets/img/www.terra-it.cn.png" alt="" />
     </div>
-    <div class="leftBotWrapper">
+    <div class="rightWrapper">
+      <div class="menu">
+        <ul>
+          <li v-for="item in menuList" :key="item.id">
+            {{ item.cnName }}
+          </li>
+        </ul>
+      </div>
       <div class="userInfo">
         <img src="../assets/img/user.png" alt="" />
         <span>admin</span>
         <span @click="logOut">娉ㄩ攢</span>
         &nbsp;
         <span @click="switchLang"> 鍒囨崲璇█</span>
-      </div>
-      <div class="btnBox">
-        <div><img src="../assets/img/leftBtn.png" alt="" /></div>
-        <div><img src="../assets/img/rightBtn.png" alt="" /></div>
       </div>
     </div>
   </div>
@@ -65,8 +54,8 @@
     };
   },
   mounted() {
-    this.getMenuTree();
     this.getUserPerms();
+    this.getMenuTree();
   },
   computed: {
     // 鎴戜滑浣跨敤璁＄畻灞炴�ф潵鑾峰彇鍒板綋鍓嶇偣鍑荤殑鑿滃崟鐨勮矾鐢辫矾寰勶紝鐒跺悗璁剧疆default-active涓殑鍊�
@@ -93,9 +82,10 @@
         if (res.code == 200) {
           if (res.result.length != 0) {
             let menuLists = res.result.filter((value) => {
-              return value.type == 1;
+              return value.pid == 1;
             });
-            this.menuList = this.treeData(menuLists);
+            // console.log(menuLists);
+            this.menuList = menuLists;
           } else {
             alert("鏆傛棤鑿滃崟鏍忔暟鎹�");
           }
@@ -128,7 +118,7 @@
       })
         .then(async () => {
           const data = await logout({ token: getToken() });
-          console.log(data);
+          // console.log(data);
           if (data.code != 200) {
             return this.$message.error("閫�鍑虹櫥褰曞け璐�");
           }
@@ -163,7 +153,9 @@
         this.$store.commit("changeLang", "en"); //浼犻�掔偣鍑荤殑鑺傜偣
       }
     },
-    handleselect(index, indexPath) {
+    handleselect(index, indexPath, e) {
+      // console.log(e.$attrs.perms);
+      this.$store.commit("currentPerms", e.$attrs.perms.perms);
       if (Window.ws != null) {
         Window.ws.close();
         Window.ws.onclose = () => {
@@ -181,7 +173,7 @@
     },
     getUserPerms() {
       getPerms().then((res) => {
-        this.$commit("getPermsEntity", res.result);
+        if (res.code == 200) this.$store.commit("getPermsEntity", res.result);
       });
     },
   },
@@ -203,59 +195,58 @@
 </script>
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
-.leftTopWrapper {
+.topMenu {
   width: 100%;
-  .logo {
-    // background-color: rgb(139, 0, 0);
-    width: 249px;
-    height: 52px;
-    img {
-      width: 100%;
-    }
-  }
-  .menu {
-    height: 740px;
-    margin-top: 22px;
-    overflow: auto;
-
-    .el-menu {
-      width: 234px;
-      border-right: none;
-      /deep/ .el-submenu {
-        margin-bottom: 10px;
-        .el-submenu__title {
-          background-color: transparent !important;
-        }
-      }
-      .faSub {
-        background-color: #586884;
-      }
-    }
-  }
-}
-.leftBotWrapper {
-  width: 258px;
-  position: absolute;
-  left: 19px;
-  bottom: 17px;
+  height: 100%;
+  background-image: linear-gradient(rgb(34, 33, 33), rgb(27, 31, 78));
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  .userInfo {
-    // width: 138px;
-    font-size: 16px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #fcfcfc;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
+
+  .logo {
+    width: 500px;
+    height: 100%;
+    position: relative;
+    img {
+      width: 70%;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
   }
-  .btnBox {
-    width: 65px;
+  .rightWrapper {
+    width: 70%;
+    height: 100%;
     display: flex;
-    justify-content: space-between;
+    .menu {
+      height: 100%;
+      width: 80%;
+      background-color: rgb(120, 121, 120);
+      ul {
+        display: flex;
+        justify-content: space-around;
+        li {
+          width: 120px;
+          height: 120px;
+          background: #bfa;
+        }
+      }
+    }
+    .userInfo {
+      background-color: pink;
+
+      // width: 138px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #fcfcfc;
+      // display: flex;
+      // justify-content: space-between;
+      // align-items: center;
+      // cursor: pointer;
+    }
   }
 }
 </style>

--
Gitblit v1.9.3