| 
					
				 | 
			
			
				@@ -0,0 +1,311 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!-- eslint-disable vue/multi-word-component-names --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  <div class="New-nav"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <div class="main-title">{{ Title }}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <!-- menu区域 --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <div class="nav-menu"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <div class="nav-menu-left"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <div v-for="(item, index) in leftMenus" :key="index"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuClick({ item, index })"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <div style="color: #ddd">{{ item.name }}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <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="menuItemClick(ind)" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    >{{ ite.name }}</div 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                  > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <div class="nav-menu-right"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <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({ item, index: index + 4 })" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <div style="color: #ddd">{{ item.name }}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <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="menuItemClick(ind)" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    >{{ ite.name }}</div 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                  > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script lang="ts" setup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { onMounted, onUnmounted, ref, watch, computed } from 'vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { useRouter, useRoute } from 'vue-router'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+let props = defineProps({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  Title: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    type: String, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    default: '', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+let menuList = ref<any[]>([ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    name: '智能通风', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    targatUrl: '/configurable/ventNew/home', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    name: '火灾监控', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    targatUrl: '/configurable/fireNew/home', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    name: '粉尘监控', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    targatUrl: '/configurable/dustNew/home', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    name: '瓦斯监控', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    name: '灾害预警', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+]); //一级菜单列表 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+let activeIndex = ref(0); //当前激活menu索引 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const router = useRouter(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const route = useRoute(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+let menuItemActive = ref(0); //menuItem当前激活选项 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const leftMenus = computed(() => menuList.value.slice(0, 4)); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const rightMenus = computed(() => menuList.value.slice(4)); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+function menuClick(data) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  activeIndex.value = data.index; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  isShowMenuItem.value = !isShowMenuItem.value; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  router.push({ path: data.item.targatUrl }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+function menuItemClick(index) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  menuItemActive.value = index; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  isShowMenuItem.value = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+function updateActiveState(path: string) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  menuList.value.forEach((menu, index) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // 处理有直接链接的菜单项 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    if (menu.targatUrl === path) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      activeIndex.value = index; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      isShowMenuItem.value = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // 处理有子菜单的菜单项 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    if (menu.MenuItemList) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      if (itemIndex !== -1) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        activeIndex.value = index; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        menuItemActive.value = itemIndex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        isShowMenuItem.value = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+watch( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  () => route.path, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  (newPath) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    updateActiveState(newPath); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+onMounted(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  updateActiveState(route.path); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<style lang="less" scoped> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+@import '/@/design/theme.less'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+@font-face { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  font-family: 'douyuFont'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  src: url('/@/assets/font/douyuFont.otf'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.New-nav { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  position: relative; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  height: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .main-title { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    width: 518px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    height: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    font-family: 'douyuFont'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    font-size: 25px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    left: 50%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    transform: translateX(-50%); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    width: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    padding: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .nav-menu { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    top: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    left: 675px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    height: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    position: static; // 移除绝对定位 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    width: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .nav-menu-left { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      flex-direction: row; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      float: left; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      .nav-menu-active { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        position: relative; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        cursor: pointer; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        width: 100px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        height: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin-top: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin-right: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        line-height: 35px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        font-size: 16px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        background: url(/src/assets/images/fireNew/2-1.png) no-repeat; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        background-size: 100% 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      .nav-menu-unactive { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        position: relative; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        cursor: pointer; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        width: 100px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        height: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin-top: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin-right: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        line-height: 35px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        font-size: 16px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        background: url(/src/assets/images/fireNew/2-2.png) no-repeat; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        background-size: 100% 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .nav-menu-right { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      flex-direction: row; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      float: left; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      margin-left: 42%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      .nav-menu-active { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        position: relative; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        cursor: pointer; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        width: 100px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        height: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin-top: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin-right: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        line-height: 35px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        font-size: 16px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        background: url(/src/assets/images/fireNew/2-3.png) no-repeat; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        background-size: 100% 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      .nav-menu-unactive { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        position: relative; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        cursor: pointer; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        width: 100px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        height: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin-top: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin-right: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        line-height: 35px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        font-size: 16px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        background: url(/src/assets/images/fireNew/2-4.png) no-repeat; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        background-size: 100% 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    .nav-menu-item { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      top: 23px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      width: 130px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      flex-direction: column; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      box-sizing: border-box; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      .nav-menu-content { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        height: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        overflow-y: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        margin-top: 25%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .nav-menu-List { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          background: url('@/assets/images/vent/homeNew/menuList.png') no-repeat; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          background-size: 100% 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .menu-item-active { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          color: #ddd; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          z-index: 999; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          height: 36px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          line-height: 36px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          font-size: 14px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          background: url('@/assets/images/fireNew/2-2.png') no-repeat; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          background-size: 100% 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .menu-item-unactive { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          color: #ddd; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          height: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          line-height: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          font-size: 14px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    @keyframes fadeIn { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      from { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        opacity: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      to { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        opacity: 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    /* 定义淡出动画 */ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    @keyframes fadeOut { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      from { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        opacity: 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      to { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        opacity: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .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> 
			 |