diff --git a/src/assets/icons/svg/sr-dn-gl.svg b/src/assets/icons/svg/sr-dn-gl.svg index e2ee5fb..a4b1cea 100644 --- a/src/assets/icons/svg/sr-dn-gl.svg +++ b/src/assets/icons/svg/sr-dn-gl.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-dn-pz.svg b/src/assets/icons/svg/sr-dn-pz.svg index b4a7fd6..3614c37 100644 --- a/src/assets/icons/svg/sr-dn-pz.svg +++ b/src/assets/icons/svg/sr-dn-pz.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-home.svg b/src/assets/icons/svg/sr-home.svg index c5a4b17..0da329d 100644 --- a/src/assets/icons/svg/sr-home.svg +++ b/src/assets/icons/svg/sr-home.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-kf.svg b/src/assets/icons/svg/sr-kf.svg index 10ba90b..6707f20 100644 --- a/src/assets/icons/svg/sr-kf.svg +++ b/src/assets/icons/svg/sr-kf.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-ml.svg b/src/assets/icons/svg/sr-ml.svg index e86035f..4cd800f 100644 --- a/src/assets/icons/svg/sr-ml.svg +++ b/src/assets/icons/svg/sr-ml.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/svg/sr-system.svg b/src/assets/icons/svg/sr-system.svg index 75eaf8e..a8c11b8 100644 --- a/src/assets/icons/svg/sr-system.svg +++ b/src/assets/icons/svg/sr-system.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index 12bba27..416256f 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -1,8 +1,7 @@ // cover some element-ui styles - .el-breadcrumb__inner, .el-breadcrumb__inner a { - color: #339CFF; + @include breadcrumb-text; font-weight: 400 !important; } diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 3a78dad..51a97f7 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -132,15 +132,14 @@ ul{ //main-container全局样式 -// .app-wrapper{ -// @include bg_color($background-color-theme); -// } +.app-wrapper{ + background-color: $main-bg-light; +} .app-container { margin: 20px; } - .components-container { margin: 30px 50px; position: relative; @@ -248,7 +247,6 @@ ul{ .el-form-item__content .el-input, .el-input-number{ width: 100% !important; - // margin-right: 6px; } .el-input__inner{ padding: 0; diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss index 2a98052..639516a 100644 --- a/src/assets/styles/mixin.scss +++ b/src/assets/styles/mixin.scss @@ -22,65 +22,148 @@ } } -// @mixin relative { -// position: relative; -// width: 100%; -// height: 100%; -// } - -// @mixin pct($pct) { -// width: #{$pct}; -// position: relative; -// margin: 0 auto; -// } - -// @mixin triangle($width, $height, $color, $direction) { -// $width: $width/2; -// $color-border-style: $height solid $color; -// $transparent-border-style: $width solid transparent; -// height: 0; -// width: 0; - -// @if $direction==up { -// border-bottom: $color-border-style; -// border-left: $transparent-border-style; -// border-right: $transparent-border-style; -// } @else if $direction==right { -// border-left: $color-border-style; -// border-top: $transparent-border-style; -// border-bottom: $transparent-border-style; -// } @else if $direction==down { -// border-top: $color-border-style; -// border-left: $transparent-border-style; -// border-right: $transparent-border-style; -// } @else if $direction==left { -// border-right: $color-border-style; -// border-top: $transparent-border-style; -// border-bottom: $transparent-border-style; -// } -// } +@mixin font_color($color) { + color: $color; + [data-theme="dark"] & { + color: $font-color-dark; + } + [data-theme="light"] & { + color: $font-color-light; + } +} +@mixin shadow-set(){ + [data-theme="dark"] & { + box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16); + } +} +// siderBar +@mixin siderBar-set(){ + [data-theme="dark"] & { + background: url(~@/assets/images/sidebar_bg.png) #031435 no-repeat right bottom; + background-size: contain; + box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16); + } + [data-theme="light"] & { + background: linear-gradient(180deg, #2B67DD 0%, #4180FB 100%); + color: #fff; + } +} -@mixin font_color($color) { - color: $color; +@mixin siderBar-submenu-set(){ + [data-theme="light"] & { + color: rgba(255,255,255,0.8) !important; + } +} + +@mixin siderBar-submenu-set-acitve(){ + [data-theme="dark"] & { + background: $subMenuHover !important; + } + [data-theme="light"] & { + background: linear-gradient(270deg, #021C5E 0%, rgba(2,28,94,0) 100%) !important; + color: #fff !important; + font-weight: bold !important; + border-right: 4px solid #33D0FF !important; + } +} + +@mixin siderBar-title-set-acitve{ + [data-theme="dark"] & { + color: $mainColor !important; + background-image: $menuActiveBg !important; + &::before{ + content: ""; + position: absolute; + left: 0; + top: 0; + width: 5px; + height: 60px; + background-color: $mainColor; + } + } +} + +@mixin siderBar-icon{ [data-theme="dark"] & { - color: $font-color-theme1; + color: $mainColor; } [data-theme="light"] & { - color: $font-color-theme2; + color: #fff; } } -@mixin bg_color($color) { - /*通过该函数设置主题颜色，后期方便统一管理；*/ - background-color: $color; + +@mixin breadcrumb-bg{ [data-theme="dark"] & { - background-color: $background-color-theme1; - @include font-color($font-color-theme1) + background-color: $background-color-dark; } [data-theme="light"] & { - background-color: $background-color-theme2; - @include font-color($font-color-theme2) + background-color: $main-bg-light; } -} \ No newline at end of file +} + +@mixin breadcrumb-text{ + [data-theme="dark"] & { + color: $mainColor; + } + [data-theme="light"] & { + color: #9098A4; + } +} + +@mixin breadcrumb-text-active{ + [data-theme="dark"] & { + color: #fff; + } + [data-theme="light"] & { + color: #1F55EB; + } +} + +@mixin bg_color() { + [data-theme="dark"] & { + background-color: $background-color-dark; + @include font-color($font-color-dark); + } + [data-theme="light"] & { + background-color: $background-color-light; + @include font-color($font-color-light); + } +} + +@mixin icon_color() { + [data-theme="dark"] & { + color: $icon-color-dark; + } + [data-theme="light"] & { + color: $icon-color-light; + } +} + +@mixin dropdown_bg() { + [data-theme="dark"] & { + box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset; + background: #02255F; + } + [data-theme="light"] & { + box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.17); + background: #fff; + } +} + +@mixin dropdown_bg_hover() { + [data-theme="dark"] & { + background: #13439E; + color: #fff; + } + [data-theme="light"] & { + background: #F5F9FC; + color: #0348F3; + } +} + + + + diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index c473f4b..0274aa0 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -5,6 +5,7 @@ margin-left: $sideBarWidth; position: relative; padding-top: $headerHeight; + background-color: $main-bg-light; } .sidebar-container { @@ -18,10 +19,8 @@ bottom: 0; left: 0; z-index: 99; - background: url(~@/assets/images/sidebar_bg.png) #031435 no-repeat right bottom; - @include bg_color($background-color-theme); - background-size: contain; - box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16); + @include bg_color; + @include siderBar-set; overflow: hidden; // reset element-ui css @@ -63,8 +62,8 @@ .el-submenu__icon-arrow{ font-size: 18px; - color: $mainColor; - right: 60px; + @include siderBar-icon; + // right: 60px; } .el-menu { @@ -80,53 +79,23 @@ font-size: 16px; height: 60px !important; line-height: 60px !important; - padding: 0 60px 0 58px !important; + padding: 0 30px 0 28px !important; background-color: transparent !important; + @include siderBar-submenu-set; &:hover { - background-image: $menuActiveBg !important; - &::before{ - content: ""; - position: absolute; - left: 0; - top: 0; - width: 5px; - height: 60px; - background-color: $mainColor; - } + @include siderBar-title-set-acitve; } - } - - .is-active>.el-submenu__title, - .is-active.submenu-title-noDropdown { - position: relative; - color: $mainColor !important; - background-image: $menuActiveBg !important; - &::before{ - content: ""; - position: absolute; - left: 0; - top: 0; - width: 5px; - height: 60px; - background-color: $mainColor; - } - } - - & .nest-menu .el-submenu>.el-submenu__title, - & .el-submenu .el-menu-item { - min-width: $sideBarWidth !important; - background-color: transparent !important; - - &:hover { - background-image: $subMenuHover !important; + svg{ + stroke: red; } } & .el-submenu .el-menu-item{ position: relative; padding: 0 60px 0 82px !important; - height: 40px !important; - line-height: 40px; + height: 36px !important; + line-height: 36px; + @include siderBar-submenu-set; &::before{ content: ""; position: absolute; @@ -142,7 +111,25 @@ display: none; } } + + .is-active>.el-submenu__title, + .is-active.submenu-title-noDropdown { + position: relative; + @include siderBar-title-set-acitve; + } + & .nest-menu .el-submenu>.el-submenu__title, + & .el-submenu .el-menu-item { + min-width: $sideBarWidth !important; + background-color: transparent !important; + &:hover { + @include siderBar-submenu-set-acitve; + } + } + + .is-active.el-menu-item { + @include siderBar-submenu-set-acitve; + } } .hideSidebar { @@ -227,7 +214,6 @@ } .withoutAnimation { - .main-container, .sidebar-container { transition: none; @@ -235,9 +221,7 @@ } } -.is-active.el-menu-item { - background-image: $subMenuActiveBg !important; -} + // when menu collapsed diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 6b800be..ade36a8 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -1,10 +1,5 @@ $background-color-theme: #031435; //背景主题颜色默认 -$background-color-theme1: #031435; //背景主题颜色1 -$background-color-theme2: #F6F8FC; //背景主题颜色1 - $font-color-theme : #fff; //字体主题颜色默认 -$font-color-theme1 : #fff; //字体主题颜色1 -$font-color-theme2 : #031435; //字体主题颜色2 $boxBg: #031435; // 板块背景色 $mainColor: #339CFF; // 主色 @@ -12,6 +7,21 @@ $otherColor: #02255F; // 辅助色1 $otherColor2: #13439E; // 辅助色2 $btnBorder:#3581CC; // 按钮描边 +// dark-theme +$background-color-dark: #031435; //背景主题颜色1 +$icon-color-dark: #fff; +$font-color-dark : #fff; + + +// ligit-theme +$background-color-light: #fff; //亮色bg主题 +$main-bg-light: #F6F8FC; //亮色bg主题 +$icon-color-light: #1C1C1C; +$font-color-light : #545B65; + +$headerHeight: 64px; +$sideBarWidth: 256px; + $arcPurple:#563BE1; $arcYellow:#FD8042; $arcRed:#F65163; @@ -24,8 +34,7 @@ $subMenuActiveBg: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,1 $subMenuHover: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%); -$headerHeight: 64px; -$sideBarWidth: 300px; + $breadcrumbBg: #021941; $mainContainerBorder: 1px solid #113D72; diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss index 27e6e39..3d4786f 100644 --- a/src/assets/styles/yxk-admin.scss +++ b/src/assets/styles/yxk-admin.scss @@ -8,7 +8,7 @@ input { border: 1px solid $mainColor; background-color: transparent; - // @include bg_color($background-color-theme); + // @include bg_color; height: 30px; line-height: 30px; color: #fff; @@ -24,7 +24,7 @@ display: inline-block; vertical-align: middle; border: 1px solid $mainColor; - @include bg_color($background-color-theme); + @include bg_color; margin-right: 20px; height: 30px !important; width: 230px !important; @@ -927,8 +927,10 @@ input[type ='number'] { .el-select-dropdown, .el-dropdown-menu{ - box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset; - background: #02255F; + top: 46px !important; + margin: 0; + padding: 17px 0; + @include dropdown_bg; border: none; } .el-select-dropdown__item{ @@ -947,31 +949,20 @@ input[type ='number'] { background-color: #13439E; color: #fff; } + .el-popper[x-placement^=bottom] .popper__arrow{ - width: 15px; - height: 7px; - top: -7px; - background: url('~@/assets/images/pop_arrow.png') no-repeat !important; - border: none; - transform: rotate(180deg); + opacity: 0; } + .el-popper[x-placement^=bottom] .popper__arrow::after{ content: ''; border: none; } .el-dropdown-menu .el-dropdown-menu__item{ - color: #fff; + @include icon_color; } .el-dropdown-menu .el-dropdown-menu__item:hover{ - background-color: #13439E; - color: #fff; -} -.el-dropdown-menu__item--divided{ - border-top-color: #13439E; - margin-top: 0 !important; -} -.el-dropdown-menu .el-dropdown-menu__item--divided:before{ - background-color: transparent !important; + @include dropdown_bg_hover; } //vue-treeselect @@ -988,29 +979,12 @@ input[type ='number'] { .vue-treeselect__value-remove > svg{ color: #fff; } - -// 消息中心 pop -.message-icon{ - position: relative; - .icon-xiaoxi{ - font-size: 26px; - color: $mainColor; - } - .message-num{ - position: absolute; - top: 0; - right: -8px; - display: block; - width: 20px; - height: 20px; - font-size: 14px; - text-align: center; - line-height: 20px; - border-radius: 50%; - background-color: #F91832; - color: #fff; - } +.el-dropdown-menu--small .el-dropdown-menu__item{ + font-size: 14px; + line-height: 32px; + padding: 0 32px; } + .el-dropdown-menu--small .el-dropdown-menu__item.message-list-item{ padding: 0; } @@ -1173,7 +1147,7 @@ input[type ='number'] { // 档案统计title .table-title { // color: #fff; - @include font-color($font-color-theme1); + @include font-color($font-color-dark); font-size: 16px; text-align: center; height: 40px; diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index c849706..6bf3d14 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -68,6 +68,8 @@ export default { diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index c79cd3f..ac1e6c7 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -23,30 +23,30 @@ export default { diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index f9cb450..8867bb3 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -41,6 +41,7 @@
+
Lucky
@@ -50,12 +51,12 @@ - + 我的消息 - + 退出登录 @@ -140,6 +141,9 @@ export default { }, created() { this.getMsgList() + if (!localStorage.getItem('themeValue')) { + this.changetheme('dark') + } }, methods: { // 获取未读消息 @@ -241,19 +245,7 @@ export default { height: $headerHeight; overflow: hidden; position: relative; - box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16); - .hamburger-container { - line-height: 46px; - height: 100%; - float: left; - cursor: pointer; - transition: background .3s; - -webkit-tap-highlight-color:transparent; - &:hover { - background: rgba(0, 0, 0, .025) - } - } - + @include shadow-set; .errLog-container { display: inline-block; vertical-align: top; @@ -261,16 +253,13 @@ export default { .right-menu { display: flex; - padding-top: 25px; - line-height: 50px; - + line-height: 64px; &:focus { outline: none; } .right-menu-item { display: inline-block; - padding: 0 8px; height: 100%; font-size: 18px; color: #5a5e66; @@ -285,30 +274,58 @@ export default { } } .message-center{ - margin-right: 26px; - margin-top: 4px; + margin-right: 40px; + .message-icon{ + position: relative; + .icon-xiaoxi{ + font-size: 20px; + @include icon_color; + } + .message-num{ + position: absolute; + top: 0; + right: -8px; + display: block; + width: 20px; + height: 20px; + font-size: 14px; + text-align: center; + line-height: 20px; + border-radius: 50%; + background-color: #F91832; + color: #fff; + } + } } + .avatar-container { - margin-right: 60px; + margin-right: 40px; .avatar-wrapper { - margin-top: 5px; - position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + @include icon_color; .user-img-cover{ - width: 40px; - height: 40px; + width: 24px; + height: 24px; } .user-avatar { + display: block; + width: 100%; + height: 100%; + border-radius: 50%; + border: 1px solid red; cursor: pointer; - width: 40px; - height: 40px; - border-radius: 10px; + } + .user-name{ + margin: 0 37px 0 8px; + flex: 1; + font-size: 14px; } .el-icon-caret-bottom { cursor: pointer; - position: absolute; - right: -20px; - top: 25px; - font-size: 12px; + font-size: 14px; } } } diff --git a/src/layout/index.vue b/src/layout/index.vue index 91600f3..c090a94 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -82,7 +82,6 @@ export default {