[Mod 0000] 绿色主题的可配置首页导航栏修改

src/views/vent/home/configurable/components/green-nav.vue

@@ -4,14 +4,23 @@
     <div class="main-title">{{ Title }}</div>
     <!-- menu区域 -->
     <div class="nav-menu">
-      <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" v-for="(item, index) in menuList"
-        :key="index" @click="menuClick(index, item)">
+      <div
+        :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'"
+        v-for="(item, index) in menuList"
+        :key="index"
+        @click="menuClick(index, item)"
+      >
         <div>{{ item.name }}</div>
         <!-- menu-item -->
         <div v-if="activeIndex == index && isShowMenuItem && item.MenuItemList.length != 0" class="nav-menu-item">
           <div class="nav-menu-content">
-            <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
+              :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>
@@ -19,173 +28,170 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-let props = defineProps({
-  Title: {
-    type: String,
-    default: ''
-  },
-  activeIndex:{
-    type:Number,
-    default:0
+  import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+  let props = defineProps({
+    Title: {
+      type: String,
+      default: '',
+    },
+    activeIndex: {
+      type: Number,
+      default: 0,
+    },
+  });
+
+  let menuList = ref<any[]>([
+    {
+      name: '灾害预警',
+      MenuItemList: [
+        // { name: '光纤测温监测' },
+        // { name: '束管监测' },
+        // { name: '智能注氮系统' },
+        // { name: '智能注浆系统' },
+        // { name: '火灾监测预警' },
+        // { name: '色谱仪报表分析' },
+      ],
+    },
+    { name: '智能通风', MenuItemList: [] },
+    { name: '火灾监控', MenuItemList: [] },
+    { name: '粉尘监控', MenuItemList: [] },
+    { name: '瓦斯监控', MenuItemList: [] },
+    // { name: '综合管控', MenuItemList: [] },
+  ]); //一级菜单列表
+
+  let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
+  let menuItemActive = ref(0); //menuItem当前激活选项
+  let $emit = defineEmits(['menuToggle']);
+
+  //menu选项切换
+  function menuClick(index, item) {
+    isShowMenuItem.value = !isShowMenuItem.value;
+    //menu切换，界面跳转
+    $emit('menuToggle', item, index);
+  }
+
+  //menuItem选项切换
+  function menuItemClick(ind) {
+    menuItemActive.value = ind;
+    isShowMenuItem.value = false;
   }
-})
-
-let menuList = ref<any[]>([
-  {
-    name: '灾害预警', MenuItemList: [
-      // { name: '光纤测温监测' },
-      // { name: '束管监测' },
-      // { name: '智能注氮系统' },
-      // { name: '智能注浆系统' },
-      // { name: '火灾监测预警' },
-      // { name: '色谱仪报表分析' },
-    ]
-  },
-  { name: '火灾监控', MenuItemList: [] },
-  { name: '粉尘监控', MenuItemList: [] },
-  { name: '智能通风', MenuItemList: [] },
-  { name: '瓦斯监控', MenuItemList: [] },
-  { name: '综合管控', MenuItemList: [] },
-])//一级菜单列表
-
-
-let isShowMenuItem = ref(false)//是否显示menuItem下拉选项菜单
-let menuItemActive = ref(0)//menuItem当前激活选项
-let $emit = defineEmits(['menuToggle'])
-
-
-//menu选项切换
-function menuClick(index, item) {
-  isShowMenuItem.value = !isShowMenuItem.value
-  //menu切换，界面跳转
-  $emit('menuToggle',item,index)
-}
-
-//menuItem选项切换
-function menuItemClick(ind) {
-  menuItemActive.value = ind
-  isShowMenuItem.value = false
-}
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-.green-nav {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: url('../../../../../assets/images/home-green/green-nav-bg.png') no-repeat;
-  background-size: 100% 100%;
-
-  .main-title {
-    width: 518px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding-left: 70px;
-    font-family: 'douyuFont';
-    font-size: 20px;
-    letter-spacing: 2px;
+  @import '/@/design/theme.less';
 
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
 
-  .nav-menu {
-    position: absolute;
-    top: 0;
-    left: 675px;
-    width: 880px;
+  .green-nav {
+    position: relative;
+    width: 100%;
     height: 100%;
-    display: flex;
-    justify-content: flex-start;
-
-    .nav-menu-active {
-      position: relative;
-      width: 120px;
-      height: 60px;
-      line-height: 60px;
-      text-align: center;
-      margin: 0px 20px;
-      font-size: 18px;
-      letter-spacing: 2px;
-      background: url('../../../../../assets/images/home-green/green-menu-bg.png') no-repeat;
-      background-size: 100% 100%;
-    }
+    background: url('../../../../../assets/images/home-green/green-nav-bg.png') no-repeat;
+    background-size: 100% 100%;
 
-    .nav-menu-unactive {
-      position: relative;
-      width: 120px;
-      height: 60px;
-      line-height: 60px;
-      text-align: center;
-      margin: 0px 10px;
-      font-size: 16px;
+    .main-title {
+      width: 518px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding-left: 70px;
+      font-family: 'douyuFont';
+      font-size: 20px;
       letter-spacing: 2px;
-      background-size: 100% 100%;
-      cursor: pointer;
     }
 
-    .nav-menu-item {
+    .nav-menu {
       position: absolute;
-      left: -34px;
-      top: 56px;
-      width: 186px;
-      height: 273px;
-      padding: 28px 12px 12px 12px;
-      background: url(/src/assets/images/home-green/green-menu-item.png) no-repeat;
+      top: 0;
+      left: 675px;
+      width: 880px;
+      height: 100%;
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      box-sizing: border-box;
-
-
-      .nav-menu-content {
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
+      justify-content: flex-start;
+
+      .nav-menu-active {
+        position: relative;
+        width: 120px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        margin: 0px 20px;
+        font-size: 18px;
+        letter-spacing: 2px;
+        background: url('../../../../../assets/images/home-green/green-menu-bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
 
-        .menu-item-active {
-          width: 100%;
-          height: 36px;
-          line-height: 36px;
-          font-size: 14px;
-          background: linear-gradient(to right, transparent, rgba(47, 132, 111), transparent);
-        }
+      .nav-menu-unactive {
+        position: relative;
+        width: 120px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        margin: 0px 10px;
+        font-size: 16px;
+        letter-spacing: 2px;
+        background-size: 100% 100%;
+        cursor: pointer;
+      }
 
-        .menu-item-unactive {
+      .nav-menu-item {
+        position: absolute;
+        left: -34px;
+        top: 56px;
+        width: 186px;
+        height: 273px;
+        padding: 28px 12px 12px 12px;
+        background: url(/src/assets/images/home-green/green-menu-item.png) no-repeat;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        box-sizing: border-box;
+
+        .nav-menu-content {
           width: 100%;
-          height: 40px;
-          line-height: 40px;
-          font-size: 14px;
+          height: 100%;
+          overflow-y: auto;
+
+          .menu-item-active {
+            width: 100%;
+            height: 36px;
+            line-height: 36px;
+            font-size: 14px;
+            background: linear-gradient(to right, transparent, rgba(47, 132, 111), transparent);
+          }
+
+          .menu-item-unactive {
+            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;
-    //   }
-    // }
+      // @keyframes fadeIn {
+      //   from {
+      //     opacity: 0;
+      //   }
+
+      //   to {
+      //     opacity: 1;
+      //   }
+      // }
+
+      // /* 定义淡出动画 */
+      // @keyframes fadeOut {
+      //   from {
+      //     opacity: 1;
+      //   }
+
+      //   to {
+      //     opacity: 0;
+      //   }
+      // }
+    }
   }
-}
 </style>