菜单风格样式调整

src/page/index/sidebar/leftMenu.vue

@@ -8,8 +8,8 @@
                     <span>{{ item.name }}</span>
                 </div>
             </div>
-
         </div>
+
         <div class="second_menu">
             <transition name="fade">
                 <span class="avue-logo_subtitle" key="0">
@@ -23,8 +23,10 @@
                 <span class="logo-version">版本V2.1.8</span>
             </transition>
             <div class="menu-name">{{ slectMneuData.name }}</div>
-
-            <div v-for="(v, j) in slectMneuData.children">
+            <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="true">
+                <sidebar-item-left :menu="slectMneuData.children"></sidebar-item-left>
+            </el-menu>
+            <!-- <div v-for="(v, j) in slectMneuData.children">
                 <div class="second_item" :class="v.activeMenu2 == true ? 'active_second' : ''" @click="secondMenu(v, j)"
                     v-if="!v.children">
                     <div class="second_title second_hover" :title="v.name">{{ v.name }}</div>
@@ -54,7 +56,7 @@
                         </template>
                     </el-popover>
                 </div>
-            </div>
+            </div> -->
         </div>
     </div>
 </template>
@@ -63,10 +65,10 @@ import { computed, ref, onMounted } from 'vue'
 import { mapState, useStore } from "vuex"
 import { useRoute, useRouter } from 'vue-router'
 import logo from '../logo.vue';
-import sidebarItem from './sidebarItem.vue';
+import sidebarItemLeft from './sidebarItem_left.vue';
 const store = useStore()
 const { setting } = mapGetters(['setting'])
-
+const visible = ref(false)
 const router = useRouter()
 const route = useRoute()
 const myProps = defineProps({
@@ -337,4 +339,10 @@ onMounted(() => {
 :deep(.iconfont) {
     font-size: 16px;
 }
+:deep(.el-menu){
+  width: 135px;
+}
+ :deep(.el-menu--collapse>.el-menu-item .el-sub-menu__icon-arrow, .el-menu--collapse>.el-menu-item-group>ul>.el-sub-menu>.el-sub-menu__title .el-sub-menu__icon-arrow, .el-menu--collapse>.el-sub-menu>.el-sub-menu__title .el-sub-menu__icon-arrow) {
+  display: block !important;
+}
 </style>

src/page/index/sidebar/sidebarItem_left.vue

@@ -0,0 +1,108 @@
+<template>
+  <template v-for="item in menu">
+    <el-menu-item v-if="validatenull(item[childrenKey]) && validRoles(item)" :index="getPath(item)" @click="open(item)"
+      :key="item[labelKey]">
+      <i>{{ getTitle(item) }}</i>
+      <template #title>
+        <span :alt="item[pathKey]">{{ getTitle(item) }}</span>
+      </template>
+    </el-menu-item>
+    <el-sub-menu v-else-if="!validatenull(item[childrenKey]) && validRoles(item)" :index="getPath(item)"
+      :key="item[labelKey]">
+      <template #title>
+        <i>{{ getTitle(item) }}</i>
+      </template>
+      <template v-for="(child, cindex) in item[childrenKey]" :key="child[labelKey]">
+        <el-menu-item :index="getPath(child)" @click="open(child)" v-if="validatenull(child[childrenKey])">
+          <i>{{ getTitle(child) }}</i>
+          <template #title>
+            <span>{{ getTitle(child) }}</span>
+          </template>
+        </el-menu-item>
+        <sidebar-item v-else :menu="[child]" :key="cindex"></sidebar-item>
+      </template>
+    </el-sub-menu>
+  </template>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { validatenull } from 'utils/validate';
+import website from '@/config/website';
+
+export default {
+  name: 'sidebarItem',
+  data() {
+    return {
+      props: website.menu,
+    };
+  },
+  props: {
+    menu: Array,
+  },
+  computed: {
+    ...mapGetters(['roles']),
+    labelKey() {
+      return this.props.label;
+    },
+    pathKey() {
+      return this.props.path;
+    },
+    queryKey() {
+      return this.props.query;
+    },
+    iconKey() {
+      return this.props.icon;
+    },
+    childrenKey() {
+      return this.props.children;
+    },
+  },
+  methods: {
+    validatenull,
+    getPath(item) {
+      return item[this.pathKey];
+    },
+    getTitle(item) {
+      return this.$router.$avueRouter.generateTitle(item, this.props);
+    },
+    validRoles(item) {
+      item.meta = item.meta || {};
+      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
+    },
+    open(item) {
+      this.$router.push({
+        path: item[this.pathKey],
+        query: item[this.queryKey],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+i {
+  font-style: normal;
+}
+
+.el-menu--collapse>.el-menu-item-group>ul>.el-sub-menu>.el-sub-menu__title>span,
+.el-menu--collapse>.el-menu-item>span,
+.el-menu--collapse>.el-sub-menu>.el-sub-menu__title>span {
+  overflow: visible;
+  ;
+  visibility: visible;
+  display: block;
+}
+.el-menu-item{
+  line-height:50px;
+  height: 50px;
+}
+.el-menu-item .el-menu-tooltip__trigger{
+line-height:50px;
+height: 50px;
+}
+
+
+</style>
+<style>
+ 
+</style>

src/styles/theme/go.scss

@@ -22,7 +22,7 @@
       }
 
       &:hover {
-        background: transparent;
+        background: rgb(235.9, 245.3, 255) !important;
 
         i, span {
           color: var(--el-color-primary);
@@ -125,4 +125,9 @@
   //   }
   // }
 
+  .el-menu--collapse>.el-menu-item .el-sub-menu__icon-arrow, .el-menu--collapse>.el-menu-item-group>ul>.el-sub-menu>.el-sub-menu__title .el-sub-menu__icon-arrow, .el-menu--collapse>.el-sub-menu>.el-sub-menu__title .el-sub-menu__icon-arrow{
+    display: block !important;
+    margin-top: -5px;
+  }
+
 }