themeC样式修改

src/layout/components/Settings/index.vue

@@ -38,7 +38,8 @@ export default {
       // 主题风格下拉
       themeOptions: [
         { value: '1', label: '风格1' },
-        { value: '2', label: '风格2' }
+        { value: '2', label: '风格2' },
+        { value: '3', label: '风格3' }
       ]
     }
   },

src/layout/components/Sidebar/Logo.vue

@@ -34,11 +34,14 @@ export default {
   },
   computed: {
     // 根据选择的风格切换图标
+    // eslint-disable-next-line vue/return-in-computed-property
     logo() {
       if (!localStorage.getItem('theme') || localStorage.getItem('theme') === '1') {
         return require('@/assets/image/denglu_logo@2x.png')
-      } else {
+      } else if (localStorage.getItem('theme') === '2') {
         return require('@/assets/themeBImage/menuLogo.png')
+      } else if (localStorage.getItem('theme') === '3') {
+        return require('@/assets/themeCImage/menuLogo.png')
       }
     }
   },

src/layout/components/Sidebar/index.vue

@@ -24,6 +24,7 @@ import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
 import themeBvariables from '@/styles/themeB/variables.scss'
+import themeCvariables from '@/styles/themeC/variables.scss'
 
 export default {
   components: { SidebarItem, Logo },
@@ -44,12 +45,15 @@ export default {
     showLogo() {
       return this.$store.state.settings.sidebarLogo
     },
+    // eslint-disable-next-line vue/return-in-computed-property
     variables() {
       // 根据选择的风格变量决定引用哪套variables变量文件
       if (!localStorage.getItem('theme') || localStorage.getItem('theme') === '1') {
         return variables
-      } else {
+      } else if (localStorage.getItem('theme') === '2') {
         return themeBvariables
+      } else if (localStorage.getItem('theme') === '3') {
+        return themeCvariables
       }
     },
     isCollapse() {

src/main.js

@@ -12,8 +12,10 @@ import '@/styles/index.scss' // global css
 const storageValue = window.localStorage.getItem('theme') // 获取 localStorage 中的值
 if (!storageValue || storageValue === '1') {
   import('@/styles/themeA/index.scss')
-} else {
+} else if (storageValue === '2') {
   import('@/styles/themeB/index.scss')
+} else if (storageValue === '3') {
+  import('@/styles/themeC/index.scss')
 }
 import halberd from '@/utils/halberd'
 import App from './App'

src/styles/themeB/dept.scss

-$color-theme: #f4ac10;
-.dept-manage{
-
-}

src/styles/themeB/dict.scss

-$color-theme: #f4ac10;
-.dict-manage {
-
-}
- // 字典管理-字典类型管理页面
-.dictData-manage {
-
-}

src/styles/themeB/errorLog.scss

-$color-theme: #f4ac10;
-.errLog-manage {
-
-}

src/styles/themeB/index.scss

@@ -11,12 +11,4 @@
 
 //-----------各个模块的样式文件--------------------------------------------
 @import "./login.scss"; // 登录页面css样式文件
-@import "./user.scss"; // 用户管理模块css样式文件
-@import "./role.scss"; // 角色管理模块css样式文件
-@import "./menu.scss"; // 菜单管理模块css样式文件
-@import "./dept.scss"; // 部门管理模块css样式文件
-@import "./dict.scss"; // 字典管理模块css样式文件
-@import "./loginInfo.scss"; // 登录日志模块css样式文件
-@import "./operLog.scss"; // 操作日志模块css样式文件
-@import "./errorLog.scss"; // 异常日志模块css样式文件
 @import "./reSetPsw.scss"; // 修改密码模块css样式文件

src/styles/themeB/loginInfo.scss

-$color-theme: #f4ac10;
-.loginInfo-manage {
-
-}

src/styles/themeB/menu.scss

-$color-theme: #f4ac10;
-.menu-manage {
-
-}

src/styles/themeB/operLog.scss

-$color-theme: #f4ac10;
-.operlog-manage {
-
-}
-

src/styles/themeB/user.scss

-$color-theme: #F57b7b;
-.user-manage{
-
-}

src/styles/themeC/common.scss

+// 通用样式，如：按钮，列表，form表单等
+
+// 查询按钮
+.queryBtn{
+  //width: 72px;
+  //height: 32px;
+  background: linear-gradient(90deg,#1773ee, #1ad5e9 100%);
+  border: 0!important;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+  &:hover {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#1773ee, #1ad5e9 100%);
+  }
+  &:focus {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#1773ee, #1ad5e9 100%);
+  }
+}
+//重置按钮
+.resetBtn{
+  //width: 72px;
+  //height: 32px;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #666666;
+  line-height: 16px;
+  &:hover {
+    opacity: 0.85;
+    background: #ffffff;
+    border: 1px solid #d9d9d9!important;
+  }
+  &:focus {
+    opacity: 0.85;
+    background: #ffffff;
+    border: 1px solid #d9d9d9!important;
+  }
+}
+//新增按钮
+.addBtn{
+  //width: 72px;
+  //height: 34px;
+  border: 0!important;
+  background: linear-gradient(90deg,#1775ee, #1ad5e9 100%);
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+  &:hover {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#1775ee, #1ad5e9 100%);
+  }
+  &:focus {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#1775ee, #1ad5e9 100%);
+  }
+}
+//导入按钮
+.importBtn{
+  //width: 72px;
+  //height: 34px;
+  border: 0!important;
+  background: linear-gradient(90deg,#e97e1a, #eeaf17 100%);
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+  &:hover {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#e97e1a, #eeaf17 100%);
+  }
+  &:focus {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#e97e1a, #eeaf17 100%);
+  }
+}
+//导出按钮
+.exportBtn{
+  //width: 72px;
+  //height: 34px;
+  background: linear-gradient(90deg,#244de5, #8d2feb 100%);
+  border-radius: 6px;
+  border: 0!important;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+  &:hover {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#244de5, #8d2feb 100%);
+  }
+  &:focus {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#244de5, #8d2feb 100%);
+  }
+}
+//取消按钮样式
+.cancelBtn{
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #666666;
+  line-height: 16px;
+  &:hover {
+    opacity: 0.85;
+    background: #ffffff;
+    border: 1px solid #d9d9d9!important;
+  }
+  &:focus {
+    opacity: 0.85;
+    background: #ffffff;
+    border: 1px solid #d9d9d9!important;
+  }
+}
+//确定按钮样式
+.submitBtn{
+  background: linear-gradient(90deg,#1773ee, #1ad5e9 100%);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+  &:hover {
+    opacity: 0.85;
+    background: #03a487;
+    border: 1px solid #03a487!important;
+  }
+  &:focus {
+    opacity: 0.85;
+    background: #03a487;
+    border: 1px solid #03a487!important;
+  }
+}
+//清空/删除按钮
+.clearBtn{
+  //width: 72px;
+  //height: 34px;
+  background: linear-gradient(90deg,#1ab7e9, #19da5b 100%);
+  border: 0!important;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+  &:hover {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#1ab7e9, #19da5b 100%);
+  }
+  &:focus {
+    border: 0!important;
+    opacity: 0.85;
+    background: linear-gradient(90deg,#1ab7e9, #19da5b 100%);
+  }
+}
+// form的label样式
+ .el-form-item__label{
+  color: #333333!important;
+  font-size: 14px!important;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+}
+// 输入框内文字样式
+ .el-input__inner{
+   padding-right: 10px!important;
+   font-size: 14px!important;
+ }
+ // placeholder样式
+::placeholder{
+  color: #969696!important;
+  font-size: 14px!important;
+}
+// tree组件样式
+.el-tree-node{
+  font-size: 14px!important;
+}
+//tree的选中的check框样式
+.el-checkbox__input.is-checked .el-checkbox__inner{
+  background: linear-gradient(90deg,#1773ee, #1ad5e9 100%);
+}
+// switch开样式
+.el-switch.is-checked .el-switch__core{
+  background: linear-gradient(90deg,#1775ee 0%, #1acfe9 100%);
+  border-radius: 9px;
+}
+// radio开样式
+.el-radio__input.is-checked .el-radio__inner{
+  background: linear-gradient(90deg,#1775ee 0%, #1acfe9 100%);
+  border-radius: 9px;
+}
+// radio选中的文字样式
+.el-radio__input.is-checked+.el-radio__label{
+  color: #03A487;
+}
+// switch关样式
+.el-switch__core{
+  border-color: #BBBBBB;
+  background-color: #BBBBBB;
+}
+//table列表title样式
+.tableTitle{
+  margin: 20px 0;
+  color: #333333;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-700;
+  font-weight: 700;
+  text-align: LEFT;
+}
+// table列表表头样式
+.el-table th .cell{
+  background: #f2f2f2;
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-700;
+  font-weight: 700;
+  text-align: LEFT;
+  color: #333333;
+  line-height: 24px;
+}
+// table列表内容样式
+.el-table td .cell{
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #666666;
+}
+//修改按钮文字类型样式
+.updateBtn{
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  background: linear-gradient(180deg,#1776ee, #1ad3e9 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+//新增按钮文字类型样式
+.addBtnText{
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #03a487;
+}
+//重置按钮文字类型样式
+.resetBtnText{
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  background: linear-gradient(180deg,#e97f1a, #eead17 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+//删除按钮文字类型样式
+.delBtn{
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #0762B6;
+  background: linear-gradient(180deg,#e93f1a, #ee8b17 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+//分页样式
+.el-pagination.is-background .el-pager li:not(.disabled).active{
+  background: #ffffff;
+  border: 1px solid #03a487;
+  border-radius: 2px;
+  color: #03a487;
+  font-size: 14px;
+}
+//分页样式
+.el-pagination.is-background .el-pager li {
+  font-size: 14px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  color: #686A6C;
+  background: #ffffff;
+  border: 1px solid #eeeeee;
+  border-radius: 2px;
+}
+//分页样式
+.el-pagination__total{
+  font-size: 14px!important;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #686a6c;
+}

src/styles/themeC/index.scss

+
+
+
+//------------公共的样式文件---------------------------------------------------
+@import "./navigationBar.scss"; // 左侧导航栏css样式文件
+@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
+@import "./variables.scss"; // 风格变量css样式文件
+@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
+@import "./layout.scss"; // layout的css样式文件
+@import "./common.scss"; // // 通用样式，如：按钮，列表，form表单等样式文件
+
+//-----------各个模块的样式文件--------------------------------------------
+@import "./login.scss"; // 登录页面css样式文件
+@import "./reSetPsw.scss"; // 修改密码模块css样式文件

src/styles/themeC/layout.scss

+@import "../../styles/mixin";
+@import "./variables";
+
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  &.mobile.openSidebar{
+    position: fixed;
+    top: 0;
+  }
+}
+.nav-container{
+  /*height: 70px;*/
+  //position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1001;
+}
+.nav-container-two{
+  width: 100%;
+  z-index: 1001;
+  .placeholder {
+    height: 1.2vh;
+    width: 100%;
+    background-color: #F4F4F4;
+  }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.fixed-header {
+  position: fixed;
+  //top: 0;
+  //right: 0;
+  //z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - #{ $sideHideWidth })
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}

src/styles/themeC/login.scss

+.login {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  padding-right: 120px;
+  height: 100%;
+  background-image: url("../../assets/themeCImage/login-background.png");
+  background-size: cover;
+  .login_logoRow{
+    padding-top: 63px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    .login_form_logo{
+      width: 64px;
+      height: 64px;
+      background-image: url("../../assets/themeCImage/login_logo.png");
+    }
+  }
+  .loginTitleRow{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 24px;
+    .title {
+      font-size: 24px;
+      font-family: Microsoft YaHei, Microsoft YaHei-700;
+      font-weight: 700;
+      text-align: CENTER;
+      color: #333333;
+      line-height: 28px;
+    }
+  }
+  .el-input__prefix{
+    left: 14px;
+  }
+  .el-input--prefix .el-input__inner{
+    padding-left: 44px;
+    font-size: 16px;
+  }
+  .el-form-item {
+    margin-bottom: 4vh;
+  }
+}
+
+.login-form {
+  border: 1px solid #1773ee;
+  width: 479px;
+  height: 625px;
+  background: rgba(255,255,255,0.90);
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  background: #ffffff no-repeat;
+  background-size: 59%;
+  background-position-y: 57px;
+  .login-form-content{
+    padding-top: 50px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .el-form-item{
+      width: 343px;
+      height: 44px;
+      background: #ffffff;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      margin-bottom: 30px!important;
+      .el-input__inner{
+        border: 1px solid #1773ee;
+        border-radius: 4px;
+      }
+    }
+    .loginCode_formItem{
+      width: 343px;
+      display: flex;
+      justify-content: space-between;
+      .el-form-item{
+        width: 200px;
+      }
+    }
+    .loginBtn_formItem{
+      margin: 30px 0 20px!important;
+    }
+    .blue-btn{
+      width: 343px;
+      height: 44px;
+      background: linear-gradient(90deg,#1771ee, #1ad7e9 100%);
+      border-radius: 4px;
+      font-size: 16px;
+      font-family: Microsoft YaHei, Microsoft YaHei-700;
+      font-weight: 700;
+      text-align: CENTER;
+      color: #ffffff;
+      line-height: 19px;
+    }
+  }
+  .el-input {
+    height: 44px;
+    input {
+      height: 44px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  height: 44px;
+  img {
+    height: 44px;
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login_buttons-content{
+  display: flex;
+  width: 343px;
+  justify-content: space-between;
+  .rem-code span{
+    color: $font-dark;
+  }
+  .el-link span{
+    color: $color-theme;
+  }
+  .rem-code span, .el-link span{
+    font-size: 16px;
+  }
+}

src/styles/themeC/navigationBar.scss

+
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  background: #ffffff!important;
+  height: 150px!important;
+  position: relative;
+  width: 100%;
+  line-height: 50px;
+  padding-top: 10px;
+  padding-left: 4px;
+  overflow: hidden;
+  .sidebar-logoRow{
+    padding-top: 28px!important;
+    padding-bottom: 2px!important;
+    text-align: center!important;
+  }
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 44px;
+      height: 44px;
+      vertical-align: middle;
+      //margin-right: 12px;
+    }
+
+    & .sidebar-title {
+      text-align: center!important;
+      color: #333333!important;
+      margin: 0;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}

src/styles/themeC/reSetPsw.scss

+
+.forget-pwd-content{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: calc(100vh - 110px);
+  .title{
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 40px;
+  }
+  .el-form{
+    margin-top: 40px;
+    width: 40%;
+    .el-form-item__label{
+      color: #333333;
+      font-weight: normal;
+    }
+    .el-input__inner{
+      border-radius: 4px;
+    }
+    .blue-btn{
+      height: 32px;
+      border-radius: 4px;
+    }
+  }
+}

src/styles/themeC/sidebar.scss

+@import './variables';
+#app {
+  .main-container {
+    padding-top: 6.4vh;
+    min-height: 100%;
+    transition: margin-left 0.28s;
+    margin-left: 219px;
+    position: relative;
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    width: 216px !important;
+    background-color: #FFFFFF;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+
+    // reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: calc(100% - 50px);
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 17px;
+      font-size: 20px;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+
+    .is-active > .el-submenu__title {
+
+      color: $subMenuActiveText;
+    }
+
+    & .nest-menu .el-submenu > .el-submenu__title,
+    & .el-submenu .el-menu-item {
+      font-size: 12px!important;
+      min-width: 196px !important;
+      height: 42px!important;
+      line-height: 42px!important;
+      border-radius: 0px!important;
+      &:hover {
+        background-color: $subMenuHover !important;
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: $sideHideWidth !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 17px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      & > .el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 17px;
+        }
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        & > .el-submenu__title {
+          & > span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: 196px !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform 0.28s;
+      width: 196px !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-196px, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  & > .el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+  }
+
+  .nest-menu .el-submenu > .el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: $menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  > .el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}
+
+.el-submenu__icon-arrow {
+  color: #ffffff !important;
+}
+
+.is-active.submenu-title-noDropdown {
+  background-color: #fff !important;
+}
+
+#app .sidebar-container .el-submenu .el-menu-item.is-active {
+  border-left: 3px solid;
+  border-image: linear-gradient(180deg,  #1774ee 10%, #1ad5e9 50%) 2 2 2 2;
+  background-color: #E2EEFD !important;
+}
+
+.router-link-active .el-menu-item.is-active {
+
+  span{
+    font-weight: 700!important;
+    background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+    -webkit-background-clip: text!important;
+    -webkit-text-fill-color: transparent!important;
+  }
+}
+// hover样式
+.el-submenu__title:hover {
+  background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+  -webkit-background-clip: text!important;
+  -webkit-text-fill-color: transparent!important;
+  .el-submenu__icon-arrow {
+    background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+    -webkit-background-clip: text!important;
+    -webkit-text-fill-color: transparent!important;
+  }
+}
+.nest-menu .el-submenu > .el-submenu__title:hover {
+  background-color: #fff !important;
+  color: #03A487 !important;
+}
+.is-active > .el-submenu__title:hover {
+  background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+  -webkit-background-clip: text!important;
+  -webkit-text-fill-color: transparent!important;
+}
+.el-submenu .el-menu-item:hover {
+  background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+  -webkit-background-clip: text!important;
+  -webkit-text-fill-color: transparent!important;
+}
+.el-menu-item.submenu-title-noDropdown:hover {
+  background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+  -webkit-background-clip: text!important;
+  -webkit-text-fill-color: transparent!important;
+}
+.el-menu--vertical .el-menu-item:hover {
+  background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+  -webkit-background-clip: text!important;
+  -webkit-text-fill-color: transparent!important;
+}
+#app .hideSidebar .el-submenu>.el-submenu__title{
+  margin: 0 !important;
+}
+.el-submenu.is-opened {
+  background-color: #FFFFFF !important;
+
+  > .el-submenu__title {
+    font-size: 14px!important;
+    color: #333333 !important;
+    font-weight: 400!important;
+    margin: 0 10px!important;
+    height: 42px!important;
+    line-height: 42px!important;
+    border-radius: 4px!important;
+    .el-submenu__icon-arrow {
+      background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+      -webkit-background-clip: text!important;
+      -webkit-text-fill-color: transparent!important;
+    }
+  }
+
+  .el-menu {
+    .el-menu-item {
+      background-color: #fff !important;
+      color: #000000 !important;
+      &:hover {
+        background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+        -webkit-background-clip: text!important;
+        -webkit-text-fill-color: transparent!important;
+      }
+      &.is-active {
+      }
+    }
+  }
+
+  .nest-menu {
+    //padding: 0 10px!important;
+    .el-submenu__title {
+      background-color: #fff !important;
+      color: #000000 !important;
+
+      .el-submenu__icon-arrow {
+        background: linear-gradient(180deg,#1774ee, #1ad6e9 100%)!important;
+        -webkit-background-clip: text!important;
+        -webkit-text-fill-color: transparent!important;
+      }
+    }
+  }
+}

src/styles/themeC/tagsView.scss

+.tags-view-container {
+  height: 31px;
+  width: 100%;
+  background: #F4F4F4;
+  //border-bottom: 1px solid #d8dce5;
+  //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  margin: 0 14px;
+  .tags-view-wrapper {
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 27px;
+      line-height: 26px;
+      //border: 1px solid #d8dce5;
+      color: #495060;
+      background: #fff;
+      padding: 0 10px;
+      font-size: 14px;
+      margin-left: 5px;
+      margin-top: 4px;
+      &:first-of-type {
+        margin-left: 0;
+      }
+      &:last-of-type {
+        margin-right: 15px;
+      }
+      &.active {
+        background-color: #fff;
+        color: #1AD6E9;
+        border-color: transparent;
+        //&::before {
+        //  content: '';
+        //  background: #fff;
+        //  display: inline-block;
+        //  width: 8px;
+        //  height: 8px;
+        //  border-radius: 50%;
+        //  position: relative;
+        //  margin-right: 2px;
+        //}
+      }
+    }
+  }
+  .contextmenu {
+    margin: 0;
+    background: #fff;
+    z-index: 3000;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+}
+.tags-view-wrapper {
+  .tags-view-item {
+    .el-icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: 2px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transform-origin: 100% 50%;
+      &:before {
+        transform: scale(.6);
+        display: inline-block;
+        vertical-align: -3px;
+      }
+      &:hover {
+        background-color: #b4bccc;
+        color: #fff;
+      }
+    }
+  }
+}

src/styles/themeC/variables.scss

+// 主题色
+$color-theme: #03A487;
+$color-red: #F57b7b;
+$color-purple: #ff33a9;
+$color-orange: #f4ac10;
+$color-blue: #409EFF;
+// 我的单据背景色 考勤统计
+$color-cambridge-blue: #29a2db;
+// 我的单据背景色 考勤统计
+$color-cambridge-red: #ffbebe;
+// 我的单据背景色 考勤统计
+$color-cambridge-yellow: #fcd89f;
+// 我的单据背景色 考勤统计
+$color-cambridge-yellow: #fcd89f;
+// 我的单据背景色 考勤统计
+$color-indigo: #9fc6fc;
+// 考勤统计
+$color-indigo-deep: #5cbce5;
+// 考勤统计未选中项
+$color-grey: #d1d1d1;
+// 系统背景色
+$color-grey-light: #f4f4f4;
+// 列表表头底色
+$color-grey-light: #ecf9fe;
+// 统计折线图背景色
+$color-green: #49cec9;
+// 统计折线图折线
+$color-green-deep: #1cc2bc;
+$color-green-light-btn: #6dd8e4;
+// 统计折线图背景色
+$color-blue-bg: #1cc2bc;
+// 统计折线图折线
+$color-blue-line: #0098de;
+// 考勤统计
+$color-green-light: #80e4e9;
+// 线框、线段、列表 虚线分割线、表单不可修改
+$color-border: #e5e5e5;
+// 查询 新增 申请 tab标签 分页列表中除修改之外的其他按钮
+$blue-prime: #46BCF3;
+$blue-prime-hover: #6bc9f5;
+$blue-prime-active: #0098de;
+// 导出 导入 修改
+$green-prime: #49cec9;
+$green-prime-hover: #6dd8d4;
+$green-prime-active: #1cc2bc;
+// 文件上传
+$yellow-prime: #f6c761;
+$yellow-prime-hover: #f8d281;
+$yellow-prime-active: #f4ac10;
+// 删除
+$red-prime: #f68f8f;
+$red-prime-hover: #f8a5a5;
+$red-prime-active: #ff7b7b;
+
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+// 文字色
+$font-black: #000;
+// 主文字
+$font-dark: #333;
+// 次文字 表单内容、面包屑当前
+$font-deep: #666666;
+// 说明文字
+$font-pl: #999999;
+// 错误的提示文字 需要注意的提示文字
+$font-error: #f52929;
+$font-weak: #b3b3b3;
+// 反白文字
+$font-white: #fff;
+// 背景色
+$bg-bar: #f9f9f9;
+$bg-page: #f3f3f3;
+$bg-page-light: #f9f9f9;
+$bg-menu-hover: #f2f6fc;
+
+// sidebar
+$menuText:#999999;
+$menuActiveText:#333333;
+$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#FFFFFF;
+$menuHover:#fff;
+
+$subMenuBg:#46BCF2;
+$subMenuHover:#fff;
+
+$sideBarWidth: 219px;
+$sideHideWidth: 54px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}