[Feat 0000]新首页导航栏组件开发

src/views/vent/home/configurable/components/originalNew/NewNav.vue

@@ -6,17 +6,17 @@
     <div class="nav-menu">
       <div class="nav-menu-left">
         <div v-for="(item, index) in leftMenus" :key="index">
-          <div :class="activeIndexL == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuLeftClick(index)">
+          <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuClick(index)">
             <div style="color: #ddd">{{ item.name }}</div>
 
-            <div v-if="activeIndexL == index && isShowMenuItemL" class="nav-menu-item">
+            <div v-if="activeIndex == index && isShowMenuItem" class="nav-menu-item">
               <div class="nav-menu-content">
                 <div class="nav-menu-List">
                   <div
                     :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
                     v-for="(ite, ind) in item.MenuItemList"
                     :key="ind"
-                    @click.stop="menuItemLeftClick(ind)"
+                    @click.stop="menuItemClick(ind)"
                     >{{ ite.name }}</div
                   >
                 </div>
@@ -26,17 +26,17 @@
         </div>
       </div>
       <div class="nav-menu-right">
-        <div v-for="(item, index) in rightMenus" :key="index">
-          <div :class="activeIndexR == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuRightClick(index)">
+        <div v-for="(item, index) in rightMenus" :key="index + 4">
+          <div :class="activeIndex == index + 4 ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index + 4" @click="menuClick(index + 4)">
             <div style="color: #ddd">{{ item.name }}</div>
-            <div v-if="activeIndexR == index && isShowMenuItemR" class="nav-menu-item">
+            <div v-if="activeIndex == index + 4 && isShowMenuItem" class="nav-menu-item">
               <div class="nav-menu-content">
                 <div class="nav-menu-List">
                   <div
                     :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
                     v-for="(ite, ind) in item.MenuItemList"
                     :key="ind"
-                    @click.stop="menuItemRightClick(ind)"
+                    @click.stop="menuItemClick(ind)"
                     >{{ ite.name }}</div
                   >
                 </div>
@@ -46,6 +46,9 @@
         </div>
       </div>
     </div>
+    <div class="userInfo">
+      <div class="userName">admin</div>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -117,6 +120,14 @@ function menuItemRightClick(index) {
   menuItemActive.value = index;
   isShowMenuItemL.value = false;
 }
+function menuClick(index) {
+  activeIndex.value = index;
+  isShowMenuItem.value = !isShowMenuItem.value;
+}
+function menuItemClick(index) {
+  menuItemActive.value = index;
+  isShowMenuItem.value = false;
+}
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';
@@ -177,7 +188,7 @@ function menuItemRightClick(index) {
       text-align: center;
       font-size: 16px;
       letter-spacing: 2px;
-      background: url('@/assets/images/vent/homeNew/select-btn.png') no-repeat;
+      background: url('@/assets/images/vent/homeNew/Select-btn.png') no-repeat;
       background-size: 100% 100%;
     }
 
@@ -254,5 +265,19 @@ function menuItemRightClick(index) {
       }
     }
   }
+
+  .userInfo {
+    width: 120px;
+    float: right;
+    background: url(/src/assets/images/vent/homeNew/user.png) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 14px;
+    right: 0;
+    .userName {
+      margin-left: 40px;
+      font-size: 20px;
+    }
+  }
 }
 </style>