style：优化ui
This commit is contained in:
不做码农
@@ -1,138 +0,0 @@
|
||||
// 黑夜模式
|
||||
[data-theme='theme-black'] {
|
||||
--base-color: #22272e; // #304156;
|
||||
--base-color-rgba: rgba(34,39,46, 0.3);
|
||||
--base-color-white: #ffffff;
|
||||
|
||||
// root
|
||||
--base-bg-main: var(--base-color);
|
||||
--base-menu-background: var(--base-color);
|
||||
--base-logo-title-color: var(--base-color-white);
|
||||
--base-topBar-background: var(--base-color) !important;
|
||||
--base-topBar-color: var(--base-color-white);
|
||||
|
||||
--base-color-bar: #dadada;
|
||||
--base-border-color: #424242;
|
||||
--base-border-black: #333333;
|
||||
--base-text-color-regular: #9b9da1;
|
||||
--base-text-color-placeholder: #7a7a7a;
|
||||
--base-color-hover: #3c3c3c;
|
||||
|
||||
// el-ement ui 设置
|
||||
--el-fill-color-light: var(--base-color-rgba) !important;
|
||||
--el-fill-color-blank: var(--base-bg-main) !important;
|
||||
// --el-table-bg-color: var(--el-fill-color-blank);
|
||||
--el-color-white: var(--base-color) !important;
|
||||
--el-text-color-primary: var(--base-color-bar) !important;
|
||||
--el-border-color-base: var(--base-border-black) !important;
|
||||
--el-border-color-light: var(--base-border-black) !important;
|
||||
--el-text-color-regular: var(--base-text-color-regular) !important;
|
||||
--el-bg-color: var(--base-bg-main) !important;
|
||||
--el-color-success-lighter: var(--base-color) !important;
|
||||
--el-color-warning-lighter: var(--base-color) !important;
|
||||
--el-color-danger-lighter: var(--base-color) !important;
|
||||
--el-color-primary-lighter: var(--base-color) !important;
|
||||
--el-color-primary-light-9: var(--base-color-hover) !important;
|
||||
--el-text-color-disabled-base: var(--el-color-primary) !important;
|
||||
--el-border-color-lighter: var(--base-border-black) !important;
|
||||
// --el-text-color-placeholder: var(--base-text-color-placeholder) !important;
|
||||
// --el-disabled-bg-color: var(--base-color) !important;
|
||||
--el-fill-base: var(--base-color-white) !important;
|
||||
// el-date-picker bg
|
||||
--el-bg-color-overlay: var(--base-bg-main) !important;
|
||||
--el-disabled-text-color: var(--base-bg-main) !important;
|
||||
// drawer
|
||||
.drawer-item,
|
||||
.drawer-title {
|
||||
color: var(--base-color-white) !important;
|
||||
}
|
||||
|
||||
.el-button--primary,
|
||||
.el-button--info,
|
||||
.el-button--danger,
|
||||
.el-button--success,
|
||||
.el-button--warning {
|
||||
--el-button-text-color: var(--base-color-white) !important;
|
||||
--el-button-hover-text-color: var(--base-color-white) !important;
|
||||
--el-button-disabled-text-color: var(--base-color-white) !important;
|
||||
&:hover {
|
||||
border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// pagination
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
color: var(--base-color-white) !important;
|
||||
}
|
||||
.el-pagination.is-background .btn-next,
|
||||
.el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
// tabs
|
||||
.el-tabs--border-card {
|
||||
background-color: var(--el-color-white) !important;
|
||||
}
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||
background: var(--base-color) !important;
|
||||
}
|
||||
|
||||
// alert / notice-bar
|
||||
.home-card-item {
|
||||
border: 1px solid var(--base-border-color-light) !important;
|
||||
}
|
||||
.el-alert,
|
||||
.notice-bar {
|
||||
border: 1px solid var(--base-border-color) !important;
|
||||
background-color: var(--base-color) !important;
|
||||
}
|
||||
|
||||
// colorPicker
|
||||
.el-color-picker__mask {
|
||||
background: unset !important;
|
||||
}
|
||||
.el-color-picker__trigger {
|
||||
border: 1px solid var(--base-border-color-light) !important;
|
||||
}
|
||||
|
||||
// popper / dropdown
|
||||
.el-popper {
|
||||
border: 1px solid var(--base-border-color) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
.el-popper__arrow:before {
|
||||
background: var(--el-color-white) !important;
|
||||
border: 1px solid var(--base-border-color);
|
||||
}
|
||||
a {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
}
|
||||
.el-popper,
|
||||
.el-dropdown-menu {
|
||||
background: var(--el-color-white) !important;
|
||||
}
|
||||
.el-dropdown-menu__item:hover:not(.is-disabled) {
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
.el-dropdown-menu__item.is-disabled {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
//tags menu 选择
|
||||
.tags-view-container .tags-view-wrapper .tags-view-item.active {
|
||||
background-color: var(--base-color) !important;
|
||||
// border-color: var(--base-color) !important;
|
||||
}
|
||||
|
||||
// md 编辑器、图片加载错误、
|
||||
.md,
|
||||
.el-upload--picture-card,
|
||||
.el-image__error {
|
||||
background: none !important;
|
||||
}
|
||||
//el table loading mask
|
||||
.el-loading-mask {
|
||||
background-color: var(--base-color-rgba) !important;
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,6 @@
|
||||
@import './sidebar.scss';
|
||||
@import './btn.scss';
|
||||
@import './waves.scss';
|
||||
// @import './black.scss';
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
.login {
|
||||
background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #1b2947);
|
||||
background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
|
||||
background: radial-gradient(220% 105% at top center, #1b2947 10%, #4b76a7 40%, #81acae 65%, #f7f7b6);
|
||||
background-attachment: fixed;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
// background-image: url('../assets/images/login-background.jpg');
|
||||
// background-image: url('@/assets/images/login-bg.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@@ -21,7 +20,7 @@
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
// background-color: hsla(0, 0%, 100%, 0.3);
|
||||
width: 310px;
|
||||
width: var(--base-login-width);
|
||||
padding: 25px 15px 5px 15px;
|
||||
position: relative;
|
||||
|
||||
@@ -44,6 +43,7 @@
|
||||
float: right;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -12,17 +12,19 @@ $panGreen: #30b08f;
|
||||
:root {
|
||||
--base-text-color-rgba: rgba(0, 0, 0, 0.85);
|
||||
--base-sidebar-width: 220px;
|
||||
// 左侧菜单宽度
|
||||
// 左侧菜单宽度
|
||||
--el-aside-width: 220px;
|
||||
//底部高度
|
||||
//底部高度
|
||||
--base-footer-height: 30px;
|
||||
--base-tags-height: 34px;
|
||||
--base-header-height: 50px;
|
||||
//登录框宽度
|
||||
--base-login-width: 280px;
|
||||
}
|
||||
|
||||
/***侧边栏深色配置***/
|
||||
[data-theme='theme-dark'] {
|
||||
--base-menu-background: #304156;
|
||||
--base-menu-background: #324157;
|
||||
--base-logo-title-color: #ffffff;
|
||||
// // el-ement ui 设置
|
||||
// --el-fill-color-blank: #304156;
|
||||
|
||||
Reference in New Issue
Block a user