进销存pro 1.菜单栏样式修改

gaoluyang

5 天以前 ff609c6ba2f52818dad141407c3265abc883eb4f

 src/layout/components/Sidebar/SidebarItem.vue

@@ -1,17 +1,19 @@
<template>

  <div v-if="!item.hidden">

  <div v-if="!item.hidden" class="sidebar-item-wrapper">

    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">

      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">

        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">

          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>

          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>

          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" class="menu-icon"/>

          <template #title>

            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>

          </template>

        </el-menu-item>

      </app-link>

    </template>



    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>

      <template v-if="item.meta" #title>

        <svg-icon :icon-class="item.meta && item.meta.icon" />

        <svg-icon :icon-class="item.meta && item.meta.icon" class="menu-icon" />

        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>

      </template>



@@ -98,3 +100,56 @@
  }

}

</script>



<style lang="scss" scoped>

.sidebar-item-wrapper {

  :deep(.menu-icon) {

    width: 18px;

    height: 18px;

    margin-right: 12px;

    flex-shrink: 0;

    transition: all 0.25s ease;

    color: var(--sidebar-text);

    opacity: 0.8;

  }

  
  :deep(.el-menu-item:hover .menu-icon),

  :deep(.el-sub-menu__title:hover .menu-icon) {

    color: var(--el-color-primary, var(--accent-primary));

    opacity: 1;

    transform: scale(1.1);

  }

  
  :deep(.el-menu-item.is-active .menu-icon) {

    color: var(--menu-active-text) !important;

    opacity: 1;

  }

  
  :deep(.menu-title) {

    font-weight: 450;

    transition: all 0.25s ease;

    color: var(--sidebar-text);

  }

  
  :deep(.el-menu-item:hover .menu-title),

  :deep(.el-sub-menu__title:hover .menu-title) {

    color: var(--el-color-primary, var(--accent-primary));

  }

  
  :deep(.el-menu-item.is-active .menu-title) {

    color: var(--menu-active-text) !important;

  }

  
  :deep(.nest-menu) {

    .menu-icon {

      width: 16px;

      height: 16px;

      margin-right: 10px;

    }

    
    .menu-title {

      font-size: 13px;

    }

  }

}

</style>