整体样式修改

gaoluyang

3 天以前 a88eab39f6b2f5c33913d51fac4e885c052ed4a1

整体样式修改

 src/assets/styles/sidebar.scss

@@ -12,21 +12,18 @@
  }

  .sidebar-container {
    -webkit-transition: width .28s;
    transition: width 0.28s;
    width: $base-sidebar-width !important;
    background-color: $base-menu-background;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
    box-shadow: none;
    margin: 0 auto;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

    // reset element-ui css
    .horizontal-collapse-transition {
@@ -42,7 +39,7 @@
    }

    .el-scrollbar {
      height: 92%;
      height: 100%;
    }

    &.has-logo {
@@ -54,29 +51,24 @@
    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 80px;
      height: 80px;
      width: 100%;
      overflow: hidden;
      margin-top: 20px;
    }


    .svg-icon {
      //margin-right: 16px;
      margin-right: 16px;
    }

    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
      padding: 0 20px !important;
    }

    .el-menu-item, .menu-title {
      line-height: 20px;
      font-size: 14px;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
@@ -89,69 +81,52 @@
    // menu hover
    .sub-menu-title-noDropdown,
    .el-sub-menu__title {
      border-radius: 10px 10px 10px 10px;
      &:hover {
        background-color: #ffffff !important;
        border-radius: 10px 10px 10px 10px;
        color: $base-menu-color-active !important;
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
    }

    & .theme-dark .is-active > .el-sub-menu__title {
      color: $base-menu-color-active !important;
    }
    & .nest-menu > a {
      right: 20px;
      position: relative;
    }
    & .nest-menu> .el-sub-menu > .el-sub-menu__title {
      right: 20px;
      position: relative;
    }

    & .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      min-width: $base-sidebar-width !important;


      height: 80px;
      min-width: 80px !important;
      border-radius: 10px 10px 10px 10px;
      &:hover {
        background-color: #ffffff !important;
        border-radius: 10px 10px 10px 10px;
        color: $base-menu-color-active !important;
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
    }

    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .theme-dark .el-sub-menu .el-menu-item {
      background-color: $base-sub-menu-background;
      border-radius: 10px 10px 10px 10px;

      &:hover {
        background-color: #ffffff !important;
        border-radius: 10px 10px 10px 10px;
        color: $base-menu-color-active !important;
        background-color: $base-sub-menu-hover !important;
      }
    }
  }

  .hideSidebar {
    .sidebar-container {
      width: 120px !important;
      width: 54px !important;
    }

    .main-container {
      margin-left: 120px;
      margin-left: 54px;
    }

    .sub-menu-title-noDropdown {
      padding: 0 0 0 20px !important;
      padding: 0 !important;
      position: relative;

      .el-tooltip {
        padding: 0 !important;

        .svg-icon {
          //margin-left: 20px;
          margin-left: 20px;
        }
      }
    }
@@ -163,7 +138,7 @@
        padding: 0 !important;

        .svg-icon {
          //margin-left: 20px;
          margin-left: 20px;
        }

      }
@@ -226,21 +201,17 @@

// when menu collapsed
.el-menu--vertical {
  width: 120px !important; /* 设置一个固定的宽度 */
  &>.el-menu {
    .svg-icon {
      //margin-right: 16px;
      margin-right: 16px;
    }
  }

  .nest-menu .el-sub-menu>.el-sub-menu__title,
  .el-menu-item {
    border-radius: 10px 10px 10px 10px;
    &:hover {
      // you can use $sub-menuHover
      background-color: #ffffff !important;
      border-radius: 10px 10px 10px 10px;
      color: $base-menu-color-active !important;
      background-color: rgba(0, 0, 0, 0.06) !important;
    }
  }


 src/assets/styles/variables.module.scss

@@ -9,30 +9,30 @@
$panGreen: #30B08F;

// 默认主题变量
$menuText: #ffffff;
$menuActiveText: #165DFF;
$menuBg: #165DFF;
$menuHover: #ffffff;
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuBg: #304156;
$menuHover: #263445;

// 浅色主题theme-light
$menuLightBg: #165DFF;
$menuLightHover: #ffffff;
$menuLightText: #ffffff;
$menuLightActiveText: #165DFF;
$menuLightBg: #ffffff;
$menuLightHover: #f0f1f5;
$menuLightText: #303133;
$menuLightActiveText: #409EFF;

// 基础变量
$base-sidebar-width: 120px;
$sideBarWidth: 120px;
$base-sidebar-width: 200px;
$sideBarWidth: 200px;

// 菜单暗色变量
$base-menu-color: #bfcbd9;
$base-menu-color-active: #165DFF;
$base-menu-background: #165DFF;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;

// 组件变量
$--color-primary: #165DFF;
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;

 src/layout/components/Navbar.vue

@@ -1,13 +1,13 @@
<template>
  <div class="navbar">
<!--    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
<!--    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />-->
    <div v-if="sidebar.hide">
      <top-nav id="topmenu-container" class="topmenu-container" />
    </div>
    <div class="logo" v-if="!sidebar.hide">
      <img src="@/assets/logo/logo.png" alt=""/>
    </div>
    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
<!--    <div v-if="sidebar.hide">-->
<!--      <top-nav id="topmenu-container" class="topmenu-container" />-->
<!--    </div>-->
<!--    <div class="logo" v-if="!sidebar.hide">-->
<!--      <img src="@/assets/logo/logo.png" alt=""/>-->
<!--    </div>-->
    <div class="right-menu">
      <template v-if="appStore.device !== 'mobile'">
        <header-search id="header-search" class="right-menu-item" />
@@ -23,9 +23,9 @@
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
<!--            <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">-->
<!--              <span>布局设置</span>-->
<!--            </el-dropdown-item>-->
            <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
              <span>布局设置</span>
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <span>退出登录</span>
            </el-dropdown-item>
@@ -137,24 +137,20 @@
.navbar {
  height: 50px;
  overflow: hidden;
  position: fixed; /* 将头部固定 */
  top: 0; /* 在顶部固定 */
  width: 100%; /* 宽度100%，覆盖整个视口 */
  //background-color: #f8f9fa; /* 设置背景颜色，以便更明显地看到效果 */
  z-index: 1000; /* 确保头部在其他内容之上 */
    position: relative;
  background: var(--navbar-bg);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  
  .logo {
    height: 50px;
    line-height: 50px;
    img {
    .hamburger-container {
        line-height: 46px;
        height: 100%;
        float: left;
      cursor: pointer;
      width: 146px;
      height: 46px;
        transition: background 0.3s;
        -webkit-tap-highlight-color: transparent;
		
        &:hover {
            background: rgba(0, 0, 0, 0.025);
    }
  }

@@ -164,6 +160,7 @@

  .topmenu-container {
    position: absolute;
        left: 50px;
  }

  .errLog-container {
@@ -176,6 +173,7 @@
    height: 100%;
    line-height: 50px;
    display: flex;
        margin-right: 30px;

    &:focus {
      outline: none;

 src/layout/components/Sidebar/Logo.vue

@@ -72,7 +72,6 @@
    width: 100%;

    & .sidebar-logo {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      margin-right: 12px;

 src/layout/components/Sidebar/SidebarItem.vue

@@ -2,8 +2,8 @@
  <div v-if="!item.hidden">
    <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 }" style="display: flex;flex-direction: column;justify-content: center;height: 80px;padding: 0;width: 80px">
          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" style="width: 30px;height: 30px;margin-bottom: 6px"/>
                <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>
        </el-menu-item>
      </app-link>
@@ -11,7 +11,7 @@

    <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" style="width: 30px;height: 30px;margin-bottom: 6px"/>
                <svg-icon :icon-class="item.meta && item.meta.icon" />
        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title}}</span>
      </template>

@@ -99,27 +99,5 @@
}
</script>
<style scoped>
:deep(.el-sub-menu__title) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 !important;
  height: 80px;
  margin-top: 20px;
}
:deep(.submenu-title-noDropdown) {
  padding: 0 !important;
}
:deep(.router-link-exact-active) {
  width: 80px;
  height: 80px;
  background: #FFFFFF;
  border-radius: 10px 10px 10px 10px;
}
:deep(.el-sub-menu__icon-arrow) {
  right: -12px !important;
  &:hover {
    color: #ffffff !important;
  }
}

</style>

 src/layout/components/Sidebar/index.vue

@@ -1,15 +1,17 @@
<template>
  <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
<!--    <logo v-if="showLogo" :collapse="isCollapse" />-->
        <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
                :collapse="isCollapse"
        :background-color="getMenuBackground"
        :text-color="getMenuTextColor"
        :unique-opened="true"
        :active-text-color="theme"
        :collapse="false"
                :collapse-transition="false"
        mode="vertical"
                :class="sideTheme"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
@@ -39,6 +41,7 @@
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)

// 获取菜单背景色
const getMenuBackground = computed(() => {
@@ -77,6 +80,7 @@
    border: none;
    height: 100%;
    width: 100% !important;
		
    .el-menu-item, .el-sub-menu__title {
      &:hover {
        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;

 src/layout/components/TagsView/index.vue

@@ -261,25 +261,23 @@
.tags-view-container {
  height: 34px;
  width: 100%;
  position: fixed; /* 将头部固定 */
  top: 50px; /* 在顶部固定 */
  z-index: 1000; /* 确保头部在其他内容之上 */
  background: #fff;
  box-shadow: none;
    background: var(--tags-bg, #fff);
    border-bottom: 1px solid var(--tags-item-border, #d8dce5);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);

  .tags-view-wrapper {
    .tags-view-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 30px;
            height: 26px;
      line-height: 26px;
      //border: 1px solid var(--tags-item-border, #d8dce5);
            border: 1px solid var(--tags-item-border, #d8dce5);
      color: var(--tags-item-text, #495060);
      background: var(--tags-item-bg, #fff);
      padding: 2px 16px;
            padding: 0 8px;
      font-size: 12px;
      //margin-left: 5px;
            margin-left: 5px;
      margin-top: 4px;

      &:first-of-type {
@@ -291,9 +289,20 @@
      }

      &.active {
        border-radius: 10px 10px 0px 0px;
        background-color: #F7F7F7 !important;
        color: #165DFF;
                background-color: #42b983;
                color: #fff;
                border-color: #42b983;
				
                &::before {
                    content: '';
                    background: #fff;
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    position: relative;
                    margin-right: 5px;
                }
      }
    }
  }

 src/layout/index.vue

@@ -1,10 +1,10 @@
<template>
  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
    <navbar @setLayout="setLayout" />
    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
                <navbar @setLayout="setLayout" />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
@@ -99,7 +99,7 @@
}

.hideSidebar .fixed-header {
  width: calc(100% - 120px);
    width: calc(100% - 54px);
}

.sidebarHide .fixed-header {

 src/settings.js

@@ -37,7 +37,7 @@
  /**
   * 是否显示动态标题
   */
  dynamicTitle: false,
  dynamicTitle: true,

  /**
   * @type {string | array} 'production' | ['production', 'development']

 src/store/modules/app.js

@@ -5,7 +5,7 @@
  {
    state: () => ({
      sidebar: {
        opened: true,
        opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
        withoutAnimation: false,
        hide: false
      },

 src/store/modules/settings.js

@@ -14,7 +14,7 @@
  {
    state: () => ({
      title: '',
      theme: storageSetting.theme || '#165DFF',
      theme: storageSetting.theme || '#409EFF',
      sideTheme: storageSetting.sideTheme || sideTheme,
      showSettings: showSettings,
      topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,