refactor(layout): 调整布局样式并优化轮播卡片组件

云

7 天以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/assets/styles/sidebar.scss

@@ -22,8 +22,8 @@
    left: 0;

    z-index: 1001;

    overflow: hidden;

    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);

    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: 2px 0 8px rgba(0, 21, 41, 0.12);

    box-shadow: 2px 0 8px rgba(0, 21, 41, 0.12);



    // reset element-ui css

    .horizontal-collapse-transition {

@@ -45,7 +45,7 @@


    &.has-logo {

      .el-scrollbar {

        height: calc(100% - 50px);

        height: calc(100% - 60px);

      }

    }



@@ -80,46 +80,48 @@
      display: inline-block !important;

    }



    // menu hover

    // menu hover：统一走深底亮色 token

    .sub-menu-title-noDropdown,

    .el-sub-menu__title {

      &:hover {

        background-color: rgba(212, 221, 255, 0.8) !important;

        background-color: var(--menu-hover) !important;

      }

    }

    & .theme-light .is-active > .el-sub-menu__title {

      color: #fff !important;



    .is-active > .el-sub-menu__title {

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

    }



    & .nest-menu .el-sub-menu > .el-sub-menu__title,

    & .el-sub-menu .el-menu-item {

      min-width: $base-sidebar-width !important;

      background-color: var(--sidebar-sub-bg) !important;



      &:hover {

        background-color: rgba(212, 221, 255, 0.8) !important;

        background-color: var(--menu-hover) !important;

      }

      &.is-active {

        background-color: #fff !important;

      }

    }



    & .theme-light .nest-menu .el-sub-menu > .el-sub-menu__title,

    & .theme-light .el-sub-menu .el-menu-item {

      //background-color: transparent;



      &:hover {

        background-color: rgba(212, 221, 255, 0.8) !important;

        background-color: var(--menu-active-bg) !important;

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

      }

    }

  }



  .hideSidebar {

    .sidebar-container {

      width: 54px !important;

      width: 64px !important;

    }



    .main-container {

      margin-left: 54px;

      margin-left: 64px;

    }



    // 折叠态菜单项改圆角块、图标居中

    .el-menu-item,

    .el-sub-menu__title {

      margin: 4px 8px;

      border-radius: 8px;

      text-align: center;

    }



    .sub-menu-title-noDropdown {

@@ -130,7 +132,7 @@
        padding: 0 !important;



        .svg-icon {

          margin-left: 20px;

          margin-left: 16px;

        }

      }

    }

@@ -141,7 +143,7 @@
        padding: 0 !important;



        .svg-icon {

          margin-left: 20px;

          margin-left: 16px;

        }

      }

    }

@@ -208,14 +210,15 @@
    }

  }



  // 折叠弹出的二级菜单：跟随侧栏深底

  .nest-menu .el-sub-menu > .el-sub-menu__title,

  .el-menu-item {

    &:hover {

      // you can use $sub-menuHover

      background-color: rgba(212, 221, 255, 0.56) !important;

      background-color: var(--menu-hover) !important;

    }

    &.is-active {

      background-color: rgba(212, 221, 255, 0.56) !important;

      background-color: var(--menu-active-bg) !important;

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

    }

  }



@@ -223,9 +226,10 @@
  > .el-menu--popup {

    max-height: 100vh;

    overflow-y: auto;

    background-color: var(--sidebar-bg) !important;



    &::-webkit-scrollbar-track-piece {

      background: #d3dce6;

      background: transparent;

    }



    &::-webkit-scrollbar {

@@ -233,7 +237,7 @@
    }



    &::-webkit-scrollbar-thumb {

      background: #99a9bf;

      background: rgba(255, 255, 255, 0.18);

      border-radius: 20px;

    }

  }