diff --git a/bs-ui/src/assets/images/green.svg b/bs-ui/src/assets/images/green.svg new file mode 100644 index 0000000..8092f26 --- /dev/null +++ b/bs-ui/src/assets/images/green.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/bs-ui/src/assets/styles/index.scss b/bs-ui/src/assets/styles/index.scss index 2f3b9ef..cd9559f 100644 --- a/bs-ui/src/assets/styles/index.scss +++ b/bs-ui/src/assets/styles/index.scss @@ -122,6 +122,7 @@ aside { //main-container全局样式 .app-container { padding: 20px; + background-color: rgba($color: #ffffff, $alpha: 0.8); } .components-container { @@ -133,6 +134,10 @@ aside { margin-top: 30px; } +.table-top-opretar { + margin-bottom: 10px; +} + .text-center { text-align: center } diff --git a/bs-ui/src/assets/styles/ruoyi.scss b/bs-ui/src/assets/styles/ruoyi.scss index 4965609..874da99 100644 --- a/bs-ui/src/assets/styles/ruoyi.scss +++ b/bs-ui/src/assets/styles/ruoyi.scss @@ -76,6 +76,7 @@ } .el-table { + opacity: 0.8; .el-table__header-wrapper, .el-table__fixed-header-wrapper { th { word-break: break-word; @@ -119,8 +120,8 @@ } .pagination-container .el-pagination { - right: 0; - position: absolute; + // right: 0; + // position: absolute; } @media ( max-width : 768px) { @@ -177,6 +178,10 @@ float: right !important; } +.el-card { + background-color: rgba($color: #FFFFFF, $alpha: 0.8) !important; +} + .el-card__header { padding: 14px 15px 7px; min-height: 40px; @@ -275,3 +280,15 @@ position: relative; float: right; } + +.el-input__inner { + background-color: rgba($color: #FFFFFF, $alpha: 0.8) !important; +} + +.el-range-input { + background-color: transparent; +} + +.el-tree { + background: rgba($color: #FFFFFF, $alpha: 0.5) !important; +} \ No newline at end of file diff --git a/bs-ui/src/assets/styles/sidebar.scss b/bs-ui/src/assets/styles/sidebar.scss index abe5b63..a9bdf60 100644 --- a/bs-ui/src/assets/styles/sidebar.scss +++ b/bs-ui/src/assets/styles/sidebar.scss @@ -105,6 +105,15 @@ background-color: $base-sub-menu-hover !important; } } + + & .theme-green .nest-menu .el-sub-menu > .el-sub-menu__title, + & .theme-green .el-sub-menu .el-menu-item { + background-color: $base-menu-green-background !important; + &:hover { + color: $base-navbar-green-color; + background-color: $base-navbar-green-background !important; + } + } } .hideSidebar { diff --git a/bs-ui/src/assets/styles/variables.scss b/bs-ui/src/assets/styles/variables.scss index 34484d4..5563d45 100644 --- a/bs-ui/src/assets/styles/variables.scss +++ b/bs-ui/src/assets/styles/variables.scss @@ -21,6 +21,20 @@ $base-logo-light-title-color: #001529; $base-sub-menu-background:#1f2d3d; $base-sub-menu-hover:#001528; +// 自定义风格 +$base-menu-green-color: #FFFFFF; +$base-menu-green-background: transparent;//#2AD8AD;//rgba($color: #2AD8AD, $alpha: 0.1); +$base-logo-green-title-color: #FFFFFF; + +// 顶部菜单主题风格 +$base-navbar-color: #999093; +$base-navbar-icon-color: #5a5e66; +$base-navbar-background: #ffffff; + +$base-navbar-green-color: #ffffff; +$base-navbar-green-background: transparent; + + // 自定义暗色菜单风格 /** $base-menu-color:hsla(0,0%,100%,.65); @@ -50,5 +64,14 @@ $base-sidebar-width: 200px; subMenuHover: $base-sub-menu-hover; sideBarWidth: $base-sidebar-width; logoTitleColor: $base-logo-title-color; - logoLightTitleColor: $base-logo-light-title-color + logoLightTitleColor: $base-logo-light-title-color; + + menuGreenColor: $base-menu-green-color; + menuGreenBackground: $base-menu-green-background; + logoGreenTitleColor: $base-logo-green-title-color; + navbarColor: $base-navbar-color; + navbarIconColor: $base-navbar-icon-color; + navbarGreenColor: $base-navbar-green-color; + navbarBackground: $base-navbar-background; + navbarGreenBackground: $base-navbar-green-background; } diff --git a/bs-ui/src/components/Breadcrumb/index.vue b/bs-ui/src/components/Breadcrumb/index.vue index 1696f54..6bd96bc 100644 --- a/bs-ui/src/components/Breadcrumb/index.vue +++ b/bs-ui/src/components/Breadcrumb/index.vue @@ -2,8 +2,8 @@ - {{ item.meta.title }} - {{ item.meta.title }} + {{ item.meta.title }} + {{ item.meta.title }} @@ -25,6 +25,27 @@ export default { this.getBreadcrumb() } }, + computed: { + sideTheme() { + return this.$store.state.settings.sideTheme + }, + noRedirectStyle() { + if (this.sideTheme === 'theme-green') { + return { + color: '#EEEEEE', + } + } + return {}; + }, + customStyle() { + if (this.sideTheme === 'theme-green') { + return { + color: '#FFFFFF', + } + } + return {}; + } + }, created() { this.getBreadcrumb() }, diff --git a/bs-ui/src/components/Hamburger/index.vue b/bs-ui/src/components/Hamburger/index.vue index 368b002..4ecbeea 100644 --- a/bs-ui/src/components/Hamburger/index.vue +++ b/bs-ui/src/components/Hamburger/index.vue @@ -3,6 +3,7 @@ -
+
@@ -7,12 +9,12 @@
@@ -20,7 +22,7 @@
- +
@@ -46,6 +48,7 @@ import Hamburger from '@/components/Hamburger' import Screenfull from '@/components/Screenfull' import SizeSelect from '@/components/SizeSelect' import Search from '@/components/HeaderSearch' +import variables from '@/assets/styles/variables.scss' export default { components: { @@ -77,6 +80,20 @@ export default { get() { return this.$store.state.settings.topNav } + }, + sideTheme() { + return this.$store.state.settings.sideTheme + }, + variables() { + return variables; + }, + menuStyle() { + if (this.sideTheme === 'theme-green') { + return { + color: variables.navbarGreenColor + } + } + return {}; } }, methods: { diff --git a/bs-ui/src/layout/components/Settings/index.vue b/bs-ui/src/layout/components/Settings/index.vue index 8b49842..8c3c68f 100644 --- a/bs-ui/src/layout/components/Settings/index.vue +++ b/bs-ui/src/layout/components/Settings/index.vue @@ -7,6 +7,16 @@

主题风格设置

+
+ green +
+ + + +
+
dark
diff --git a/bs-ui/src/layout/components/Sidebar/Logo.vue b/bs-ui/src/layout/components/Sidebar/Logo.vue index 2774cc8..2c6ce95 100644 --- a/bs-ui/src/layout/components/Sidebar/Logo.vue +++ b/bs-ui/src/layout/components/Sidebar/Logo.vue @@ -1,13 +1,13 @@