Merge remote-tracking branch 'origin/dev_NEW_pro' into dev-new_pro_OA

yyb

18 小时以前 5470429a79313630a7ddef601de1d89e7dada754

 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,59 @@
  }

}

</script>



<style lang="scss" scoped>

.sidebar-item-wrapper {
  :deep(.menu-icon) {
    width: 26px;
    height: 26px;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease;
    color: var(--sidebar-text);
    opacity: 0.88;
  }
  
  :deep(.el-menu-item:hover .menu-icon),
  :deep(.el-sub-menu__title:hover .menu-icon) {
    color: #ffffff;
    opacity: 1;
  }
  
  :deep(.el-menu-item.is-active .menu-icon) {

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

    opacity: 1;

  }

  
  :deep(.menu-title) {
    font-weight: 500;
    transition: color 0.2s ease;
    color: var(--sidebar-text);
    opacity: 0.82;
  }
  
  :deep(.el-menu-item:hover .menu-title),
  :deep(.el-sub-menu__title:hover .menu-title) {
    color: #ffffff;
    opacity: 1;
  }
  
  :deep(.el-menu-item.is-active .menu-title) {
    color: var(--menu-active-text) !important;
    opacity: 1;
  }
  
  :deep(.nest-menu) {
    .menu-icon {
      width: 22px;
      height: 22px;
      margin-right: 10px;
    }
    
    .menu-title { font-size: 13px; }
  }
}
</style>