JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-04-06 03:58:00 +08:00
Code Issues Projects Releases Wiki Activity

🔥主题文件已开源不再需要加群获取

Browse Source
This commit is contained in:
chuzhixin 2020-09-30 18:08:48 +08:00
parent 49cc469d32
commit 71f66a94e1
5 changed files with 405 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/styles/themes/dark.scss
View File

@ -2,3 +2,123 @@
* @copyright chuzhixin 1204505056@qq.com
* @description 暗黑之子主题（VIP群专享）
*/
@charset "utf-8";
.vue-admin-beautiful-theme-dark {
$base-menu-background: #2e2f34;
$base-menu-background-active: #000;
$base-color-blue: #000;
color: #fff !important;
background-color: #2e2f34 !important;
*:not(a):not([class*="svg"]):not(.el-drawer__wrapper):not(.el-drawer__container) {
color: #fff !important;
background-color: #2e2f34 !important;
border-color: #999 !important;
box-shadow: none !important;
}
.is-active:not(li) {
*:not(a):not([class*="svg"]) {
color: #fff !important;
background-color: #000 !important;
border-color: #999 !important;
}
}
.svg-external-icon {
color: #fff !important;
}
.el-scrollbar__bar {
display: none;
}
@mixin container {
background: $base-menu-background !important;
}
@mixin active {
&:hover {
background-color: $base-menu-background-active !important;
}
&.is-active {
background-color: $base-menu-background-active !important;
}
}
.logo-container-horizontal {
@include container;
}
.logo-container-vertical {
@include container;
}
.el-menu {
@include container;
.el-submenu__title {
@include container;
}
.el-menu-item {
@include container;
}
}
.side-bar-container {
@include container;
.el-menu-item {
@include active;
}
}
.top-bar-container {
@include container;
.vab-main {
@include container;
.el-menu {
&--horizontal {
.el-submenu,
.el-menu-item {
&.is-active {
background-color: $base-menu-background-active !important;
}
}
> .el-menu-item {
&.is-active {
border-bottom: 3px solid $base-menu-background-active !important;
}
}
}
}
}
}
.tags-bar-container {
background: $base-color-white;
border-top: 1px solid #f6f6f6;
.tags-content {
.el-tabs__header {
.el-tabs__item {
&.is-active {
background: $base-color-blue !important;
border: 1px solid $base-color-blue !important;
}
}
}
}
}
.theme-bar-setting {
background: $base-color-blue !important;
}
}

94
src/styles/themes/glory.scss
View File

@ -2,3 +2,97 @@
* @copyright chuzhixin 1204505056@qq.com
* @description 荣耀典藏主题（VIP群专享）
*/
@charset "utf-8";
.vue-admin-beautiful-theme-glory {
$base-menu-background: #2e2f34;
$base-menu-background-active: #f6ca9d;
$base-color-blue: #f6ca9d;
@mixin container {
background: $base-menu-background !important;
}
@mixin active {
&:hover {
background-color: $base-menu-background-active !important;
}
&.is-active {
background-color: $base-menu-background-active !important;
}
}
.logo-container-horizontal {
@include container;
}
.logo-container-vertical {
@include container;
}
.el-menu {
@include container;
.el-submenu__title {
@include container;
}
.el-menu-item {
@include container;
}
}
.side-bar-container {
@include container;
.el-menu-item {
@include active;
}
}
.top-bar-container {
@include container;
.vab-main {
@include container;
.el-menu {
&--horizontal {
.el-submenu,
.el-menu-item {
&.is-active {
background-color: $base-menu-background-active !important;
}
}
> .el-menu-item {
&.is-active {
border-bottom: 3px solid $base-menu-background-active !important;
}
}
}
}
}
}
.tags-bar-container {
background: $base-color-white;
border-top: 1px solid #f6f6f6;
.tags-content {
.el-tabs__header {
.el-tabs__item {
&.is-active {
background: $base-color-blue !important;
border: 1px solid $base-color-blue !important;
}
}
}
}
}
.theme-bar-setting {
background: $base-color-blue !important;
}
}

94
src/styles/themes/green.scss
View File

@ -2,3 +2,97 @@
* @copyright chuzhixin 1204505056@qq.com
* @description 绿荫操场主题（VIP群专享）
*/
@charset "utf-8";
.vue-admin-beautiful-theme-green {
$base-menu-background: #16181d;
$base-menu-background-active: #009688;
$base-color-blue: #009688;
@mixin container {
background: $base-menu-background !important;
}
@mixin active {
&:hover {
background-color: $base-menu-background-active !important;
}
&.is-active {
background-color: $base-menu-background-active !important;
}
}
.logo-container-horizontal {
@include container;
}
.logo-container-vertical {
@include container;
}
.el-menu {
@include container;
.el-submenu__title {
@include container;
}
.el-menu-item {
@include container;
}
}
.side-bar-container {
@include container;
.el-menu-item {
@include active;
}
}
.top-bar-container {
@include container;
.vab-main {
@include container;
.el-menu {
&--horizontal {
.el-submenu,
.el-menu-item {
&.is-active {
background-color: $base-menu-background-active !important;
}
}
> .el-menu-item {
&.is-active {
border-bottom: 3px solid $base-menu-background-active !important;
}
}
}
}
}
}
.tags-bar-container {
background: $base-color-white;
border-top: 1px solid #f6f6f6;
.tags-content {
.el-tabs__header {
.el-tabs__item {
&.is-active {
background: $base-color-blue !important;
border: 1px solid $base-color-blue !important;
}
}
}
}
}
.theme-bar-setting {
background: $base-color-blue !important;
}
}

94
src/styles/themes/ocean.scss
View File

@ -2,3 +2,97 @@
* @copyright chuzhixin 1204505056@qq.com
* @description 海洋之心主题（VIP群专享）
*/
@charset "utf-8";
.vue-admin-beautiful-theme-ocean {
$base-menu-background: #0366d6;
$base-menu-background-active: #0054b3;
$base-color-blue: #0366d6;
@mixin container {
background: $base-menu-background !important;
}
@mixin active {
&:hover {
background-color: $base-menu-background-active !important;
}
&.is-active {
background-color: $base-menu-background-active !important;
}
}
.logo-container-horizontal {
@include container;
}
.logo-container-vertical {
@include container;
}
.el-menu {
@include container;
.el-submenu__title {
@include container;
}
.el-menu-item {
@include container;
}
}
.side-bar-container {
@include container;
.el-menu-item {
@include active;
}
}
.top-bar-container {
@include container;
.vab-main {
@include container;
.el-menu {
&--horizontal {
.el-submenu,
.el-menu-item {
&.is-active {
background-color: $base-menu-background-active !important;
}
}
> .el-menu-item {
&.is-active {
border-bottom: 3px solid $base-menu-background-active !important;
}
}
}
}
}
}
.tags-bar-container {
background: $base-color-white;
border-top: 1px solid #f6f6f6;
.tags-content {
.el-tabs__header {
.el-tabs__item {
&.is-active {
background: $base-color-blue !important;
border: 1px solid $base-color-blue !important;
}
}
}
}
}
.theme-bar-setting {
background: $base-color-blue !important;
}
}

6
src/styles/variables.scss
View File

@ -9,7 +9,7 @@ $base-color-default: #1890ff;
//默认层级
$base-z-index: 999;
//横向布局纵向布局时菜单背景色
$base-menu-background: #001529;
$base-menu-background: rgb(40, 44, 52);
//菜单文字颜色
$base-menu-color: hsla(0, 0%, 100%, 0.95);
//菜单选中文字颜色
@ -57,10 +57,10 @@ $base-menu-item-height: 50px;
//app-main的高度
$base-app-main-height: calc(
100vh - #{$base-nav-bar-height} - #{$base-tags-bar-height} - #{$base-padding} -
#{$base-padding} - 55px - 30px
#{$base-padding} - 55px - 30px
);
//纵向布局时左侧导航未折叠时的宽度
$base-left-menu-width: 256px;
$base-left-menu-width: 240px;
//纵向布局时左侧导航未折叠时右侧内容的宽度
$base-right-content-width: calc(100% - #{$base-left-menu-width});
//纵向布局时左侧导航已折叠时的宽度