页面样式修改

gaoluyang

4 天以前 64d172717748c383a5c88348037354bffd60f966

页面样式修改

 src/assets/logo/logo.png

 src/assets/styles/sidebar.scss

@@ -12,18 +12,20 @@
  }

  .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: 0;
    top: 50px;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    box-shadow: none;

    // reset element-ui css
    .horizontal-collapse-transition {
@@ -82,7 +84,7 @@
    .sub-menu-title-noDropdown,
    .el-sub-menu__title {
      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
        background-color: #ffffff !important;
      }
    }

@@ -95,7 +97,7 @@
      min-width: $base-sidebar-width !important;

      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
        background-color: #ffffff !important;
      }
    }

@@ -104,7 +106,7 @@
      background-color: $base-sub-menu-background;

      &:hover {
        background-color: $base-sub-menu-hover !important;
        background-color: #ffffff !important;
      }
    }
  }
@@ -211,7 +213,7 @@
  .el-menu-item {
    &:hover {
      // you can use $sub-menuHover
      background-color: rgba(0, 0, 0, 0.06) !important;
      background-color: #ffffff !important;
    }
  }


 src/assets/styles/variables.module.scss

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

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

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

// 基础变量
$base-sidebar-width: 200px;
@@ -27,12 +27,12 @@
// 菜单暗色变量
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-menu-background: #165DFF;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;

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

 src/layout/components/Navbar.vue

@@ -1,35 +1,16 @@
<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" />
    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />

<!--    <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" />-->
<!--    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
    <div class="logo">
      <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" />

        <el-tooltip content="源码地址" effect="dark" placement="bottom">
          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip content="文档地址" effect="dark" placement="bottom">
          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
        </el-tooltip>

        <screenfull id="screenfull" class="right-menu-item hover-effect" />

        <el-tooltip content="主题模式" effect="dark" placement="bottom">
          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
          </div>
        </el-tooltip>

        <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>
      </template>

      <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
        <div class="avatar-wrapper">
          <img :src="userStore.avatar" class="user-avatar" />
@@ -46,9 +27,9 @@
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
        <svg-icon icon-class="more-up" />
      </div>
<!--      <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">-->
<!--        <svg-icon icon-class="more-up" />-->
<!--      </div>-->
    </div>
  </div>
</template>
@@ -114,20 +95,24 @@
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  position: fixed; /* 将头部固定 */
  top: 0; /* 在顶部固定 */
  width: 100%; /* 宽度100%，覆盖整个视口 */
  //background-color: #f8f9fa; /* 设置背景颜色，以便更明显地看到效果 */
  z-index: 1000; /* 确保头部在其他内容之上 */
  background: var(--navbar-bg);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  
  .logo {
    height: 50px;
    line-height: 50px;
    img {
      cursor: pointer;
      width: 146px;
      height: 46px;
    }
  }


 src/layout/components/Sidebar/SidebarItem.vue

@@ -98,3 +98,6 @@
  }
}
</script>
<style scoped>

</style>

 src/layout/components/Sidebar/index.vue

@@ -1,10 +1,10 @@
<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"
        :collapse="true"
        :background-color="getMenuBackground"
        :text-color="getMenuTextColor"
        :unique-opened="true"

 src/layout/components/TagsView/index.vue

@@ -259,11 +259,13 @@

<style lang="scss" scoped>
.tags-view-container {
  height: 34px;
  height: 30px;
  width: 100%;
  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);
  position: fixed; /* 将头部固定 */
  top: 50px; /* 在顶部固定 */
  z-index: 1000; /* 确保头部在其他内容之上 */
  background: #fff;
  box-shadow: none;

  .tags-view-wrapper {
    .tags-view-item {

 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 />

 src/settings.js

@@ -7,7 +7,7 @@
  /**
   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
   */
  sideTheme: 'theme-dark',
  sideTheme: 'theme-light',

  /**
   * 是否系统布局配置
@@ -27,12 +27,12 @@
  /**
   * 是否固定头部
   */
  fixedHeader: false,
  fixedHeader: true,

  /**
   * 是否显示logo
   */
  sidebarLogo: true,
  sidebarLogo: false,

  /**
   * 是否显示动态标题

 src/store/modules/app.js

@@ -14,16 +14,7 @@
    }),
    actions: {
      toggleSideBar(withoutAnimation) {
        if (this.sidebar.hide) {
          return false
        }
        this.sidebar.opened = !this.sidebar.opened
        this.sidebar.withoutAnimation = withoutAnimation
        if (this.sidebar.opened) {
          Cookies.set('sidebarStatus', 1)
        } else {
          Cookies.set('sidebarStatus', 0)
        }
        return true
      },
      closeSideBar({ withoutAnimation }) {
        Cookies.set('sidebarStatus', 0)