yaens/ZDXSGYHT
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

@@@@@@

Browse Source
This commit is contained in:
liangjian
2026-01-27 16:32:15 +08:00
commit 836c61ac55
303 changed files with 34442 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
library/styles/dark.scss Normal file
View File

@@ -0,0 +1,160 @@
@use 'element-plus/theme-chalk/dark/css-vars.css' as *;
html.dark > body,
html.dark > body[class*='vab-theme-'] {
--el-color-black: #ffffff;
--el-color-white: #1d1e1f;
--el-color-grey: #ffffff;
--el-menu-background-color-second: #1d1e1f;
--el-border-color: #414243;
--el-menu-background-color: #1d1e1f;
--el-mask-color: rgba(0, 0, 0, 0.8);
--el-background-color: #1d1e1f;
--w-e-textarea-bg-color: #333;
--w-e-textarea-color: #fff;
--w-e-textarea-border-color: var(--el-border-color);
--w-e-textarea-slight-border-color: var(--el-border-color);
--w-e-textarea-slight-color: var(--el-border-color);
--w-e-textarea-slight-bg-color: var(--el-border-color);
--w-e-textarea-selected-border-color: var(--el-color-primary);
--w-e-textarea-handler-bg-color: var(--el-color-primary);
--w-e-toolbar-color: #fff;
--w-e-toolbar-bg-color: #333;
--w-e-toolbar-active-color: #fff;
--w-e-toolbar-active-bg-color: #333;
--w-e-toolbar-disabled-color: #999;
--w-e-toolbar-border-color: #333;
--w-e-modal-button-bg-color: #333;
--w-e-modal-button-border-color: #d9d9d9;
color: #ffffff !important;
background-color: var(--el-color-white) !important;
.vab-nav {
background: var(--el-color-white) !important;
}
[class*='-container'],
.no-background-container {
background: var(--el-color-white) !important;
}
.table {
td {
border: 1px solid var(--el-border-color) !important;
}
}
.login-container .login-form {
background: rgba(#1d1e1f, 0.9);
}
.vab-column-bar {
border-right: 1px solid var(--el-border-color) !important;
.el-tabs {
border-right: 1px solid var(--el-border-color) !important;
.el-tabs__nav {
background: var(--el-color-white) !important;
}
.el-tabs__item {
color: var(--el-color-grey) !important;
}
}
&-arrow {
.el-tabs {
.el-tabs__item {
&.is-active {
color: var(--el-menu-color-text) !important;
background: transparent !important;
.vab-column-grid {
background: transparent !important;
&:after {
border-color: transparent var(--el-menu-color-text) transparent transparent;
}
}
}
}
}
}
}
.vab-tabs-content-card {
.el-tabs__header {
.el-tabs__item {
border: 1px solid var(--el-border-color) !important;
}
}
}
.vab-logo-column {
.logo {
background: var(--el-color-white) !important;
border-right: 1px solid var(--el-border-color) !important;
}
}
.vab-side-bar {
border-right: 1px solid var(--el-border-color) !important;
}
.vab-header {
border-bottom: 1px solid var(--el-border-color) !important;
.vab-logo-horizontal {
height: calc(var(--el-header-height) - 2px);
}
.vab-main {
.right-panel {
[class*='ri-'],
.username {
color: var(--el-color-grey) !important;
}
}
}
}
/* svg */
[fill='#fff'] {
fill: var(--el-color-white) !important;
}
.el-button,
.el-switch,
.el-checkbox,
.el-checkbox-group,
.el-radio,
.el-radio-group,
.el-slider,
.el-tag,
.el-pagination,
.el-segmented,
.el-carousel,
.el-menu,
.el-card__body::after,
.el-alert.is-dark,
.el-badge,
.fold-unfold,
.schedule-box,
.vab-theme-setting div a:hover,
.transition-box,
.top-card-blue,
.icon-panel {
--el-color-white: var(--el-menu-text-color);
}
.el-divider__text {
background-color: transparent !important;
}
.vab-blockquote {
background-color: rgba(0, 0, 0, 0.1) !important;
}
}

310
library/styles/plain.scss Normal file
View File

@@ -0,0 +1,310 @@
html > body.vab-theme-plain {
--el-menu-background-color: #ffffff;
--el-menu-color-text: #515a6e;
@mixin container {
color: var(--el-menu-color-text) !important;
background: #ffffff !important;
}
@mixin active {
&:hover {
color: var(--el-color-primary) !important;
background-color: var(--el-color-primary-light-9) !important;
i,
svg,
span[title] {
color: var(--el-color-primary) !important;
}
}
&.is-active {
color: var(--el-color-primary) !important;
background-color: var(--el-color-primary-light-9) !important;
i,
svg,
span[title] {
color: var(--el-color-primary) !important;
}
}
}
.el-menu--vertical {
.el-menu-item {
&:hover {
color: var(--el-color-primary) !important;
background-color: var(--el-color-primary-light-9) !important;
}
}
.el-menu-item.is-active,
.el-sub-menu__title.is-active {
color: var(--el-color-primary) !important;
background-color: var(--el-color-primary-light-9) !important;
}
}
.el-menu--horizontal {
.el-menu-item:not(.is-disabled):focus,
.el-menu-item:not(.is-disabled):hover {
color: var(--el-color-primary) !important;
background-color: var(--el-color-primary-light-9) !important;
}
.el-sub-menu__title:not(.is-disabled):focus,
.el-sub-menu__title:not(.is-disabled):hover {
border-radius: var(--el-border-radius-base) !important;
}
}
.vab-logo-common,
.vab-logo-vertical,
.vab-logo-horizontal {
@include container;
.title,
.vab-icon {
@include container;
}
}
.vab-logo-column,
.vab-logo-comprehensive {
@include container;
.logo {
border-right: 1px solid var(--el-border-color) !important;
}
.title {
@include container;
}
.logo,
.vab-icon {
@include container;
}
}
.vab-column-bar {
border-right: 1px solid var(--el-border-color) !important;
.el-tabs {
border-right: 1px solid var(--el-border-color) !important;
@include container;
.el-tabs__nav-wrap.is-left {
background: #f7faff !important;
}
.el-tabs__item,
.el-tabs__nav {
@include container;
}
.el-tabs__item.is-active {
color: #ffffff !important;
background: var(--el-color-primary) !important;
}
}
.el-menu {
.el-menu-item.is-active,
.el-sub-menu__title.is-active,
.el-menu-item:hover,
.el-sub-menu__title:hover {
i {
color: var(--el-color-primary) !important;
}
color: var(--el-color-primary) !important;
background-color: var(--el-color-primary-light-9) !important;
}
}
&-card {
.el-tabs {
.el-tabs__item {
.vab-column-grid:hover {
color: #ffffff !important;
}
&.is-active {
background: transparent !important;
}
}
}
}
&-arrow {
.el-tabs {
.el-tabs__item {
&.is-active {
color: var(--el-menu-color-text) !important;
background: transparent !important;
.vab-column-grid {
background: transparent !important;
&:after {
border-color: transparent var(--el-border-color) transparent transparent;
}
}
}
}
}
}
}
.vab-tabs-content-card {
.el-tabs__header {
.el-tabs__item {
border: 1px solid var(--el-border-color) !important;
}
}
}
.vab-logo-column {
.logo {
background: #ffffff !important;
border-right: 1px solid var(--el-border-color) !important;
}
}
.vab-header {
@include container;
.vab-main {
@include container;
.right-panel {
.vab-right-tools {
[class*='ri-'] {
color: var(--el-menu-color-text);
}
}
.username,
.username *,
> i,
> div > i,
> span > i,
> div > span > i {
@include container;
}
.el-menu {
&--horizontal {
.el-sub-menu .el-sub-menu__title,
.el-menu-item {
@include active;
[class*='ri-'] {
color: var(--el-menu-color-text) !important;
}
}
> .el-sub-menu.is-active > .el-sub-menu__title,
> .el-menu-item.is-active {
color: var(--el-color-primary) !important;
background-color: var(--el-color-primary-light-9) !important;
border-radius: var(--el-border-radius-base);
@include active;
[class*='ri-'] {
color: var(--el-color-primary) !important;
}
}
> .el-sub-menu > .el-sub-menu__title,
> .el-menu-item {
&:hover {
color: var(--el-color-primary) !important;
background-color: transparent !important;
}
}
}
}
}
}
}
.vab-tabs {
&-more {
&-active,
&:hover {
.vab-tabs-more-icon {
.box:before,
.box:after {
background: var(--el-color-primary) !important;
}
}
}
}
.vab-tabs-content-card {
.el-tabs__header {
.el-tabs__item {
&.is-active {
color: var(--el-color-primary) !important;
background: var(--el-color-primary-light-9) !important;
border: 1px solid var(--el-color-primary) !important;
}
&:hover {
border: 1px solid var(--el-color-primary) !important;
}
}
}
}
.vab-tabs-content-smart {
.el-tabs__header {
.el-tabs__item {
&.is-active {
background: var(--el-color-primary-light-9) !important;
}
&:after {
background-color: var(--el-color-primary) !important;
}
&:hover {
background: var(--el-color-primary-light-9) !important;
}
}
}
}
.vab-tabs-content-smooth {
.el-tabs__header {
.el-tabs__item {
&.is-active {
color: var(--el-color-primary) !important;
background: var(--el-color-primary-light-9) !important;
&:hover {
color: var(--el-color-primary) !important;
background: var(--el-color-primary-light-9) !important;
}
}
&:hover {
color: var(--el-menu-color-text) !important;
}
}
}
}
}
.vab-side-bar {
border-right: 1px solid var(--el-border-color) !important;
.el-sub-menu__title:hover {
color: var(--el-color-primary);
background-color: var(--el-color-primary-light-9);
}
}
}

293
library/styles/technology.scss Normal file
View File

@@ -0,0 +1,293 @@
html > body.vab-theme-technology {
--el-dialog-bg-color: #040d32;
--el-color-black: #ffffff;
--el-color-white: #040d32;
--el-color-grey: #ffffff;
--el-menu-background-color: #040d32;
--el-menu-background-color-second: #040d32;
--el-background-technology: #040d32;
--el-menu-text-color: #fff;
--el-bg-color-page: #040d32;
--el-bg-color: #103171;
--el-bg-color-overlay: #103171;
--el-text-color-primary: #e5eaf3;
--el-text-color-regular: #e5eaf3;
--el-text-color-secondary: #e5eaf3;
--el-text-color-placeholder: #e5eaf3;
--el-text-color-disabled: #cfd3dc;
--el-border-color-darker: #{mix(#ffffff, #2c6191, 10%)};
--el-border-color-dark: #{mix(#ffffff, #2c6191, 20%)};
--el-border-color: #{mix(#ffffff, #2c6191, 10%)};
--el-border: 1px solid #{mix(#ffffff, #2c6191, 10%)};
--el-border-color-light: #{mix(#ffffff, #2c6191, 20%)};
--el-border-color-lighter: #{mix(#ffffff, #2c6191, 30%)};
--el-border-color-extra-light: #2c6191;
--el-fill-color-darker: #2c6191;
--el-fill-color-dark: #2c6191;
--el-fill-color: #103171;
--el-fill-color-light: #{mix(#ffffff, #103171, 10%)};
--el-fill-color-lighter: #{mix(#ffffff, #103171, 20%)};
--el-fill-color-extra-light: #{mix(#ffffff, #103171, 10%)};
--el-fill-color-blank: #{mix(#ffffff, #103171, 1%)};
--el-mask-color: rgba(16, 49, 113, 0.8);
--w-e-textarea-bg-color: #103171;
--w-e-textarea-color: #fff;
--w-e-textarea-border-color: #103171;
--w-e-textarea-slight-border-color: #2c6191;
--w-e-textarea-slight-color: #040d32;
--w-e-textarea-slight-bg-color: #040d32;
--w-e-textarea-selected-border-color: #b4d5ff;
--w-e-textarea-handler-bg-color: #4290f7;
--w-e-toolbar-color: #fff;
--w-e-toolbar-bg-color: #103171;
--w-e-toolbar-active-color: #fff;
--w-e-toolbar-active-bg-color: #2c6191;
--w-e-toolbar-disabled-color: #fff;
--w-e-toolbar-border-color: #2c6191;
--w-e-modal-button-bg-color: #2c6191;
--w-e-modal-button-border-color: #2c6191;
color: var(--el-color-grey) !important;
background-color: var(--el-color-white) !important;
.vab-side-bar {
border-right: 1px solid var(--el-border-color) !important;
}
.mobile {
.vab-side-bar {
border-left: 0 solid var(--el-border-color) !important;
}
}
.vab-nav {
background: var(--el-color-white) !important;
}
section > div[class*='-container'],
.no-background-container {
background: var(--el-color-white) !important;
}
.vab-column-bar {
border-right: 1px solid var(--el-border-color) !important;
.el-tabs {
border-right: 1px solid var(--el-border-color) !important;
.el-tabs__item {
color: var(--el-color-grey) !important;
}
.el-tabs__nav {
background: var(--el-color-white) !important;
}
}
&-arrow {
.el-tabs {
.el-tabs__item {
&.is-active {
color: var(--el-menu-color-text) !important;
background: transparent !important;
.vab-column-grid {
background: transparent !important;
&:after {
border-color: transparent var(--el-menu-color-text) transparent transparent;
}
}
}
}
}
}
}
.vab-tabs-content-card {
.el-tabs__header {
.el-tabs__item {
border: 1px solid var(--el-border-color) !important;
}
}
}
.vab-logo-column {
.logo {
background: var(--el-color-white) !important;
border-right: 1px solid var(--el-border-color) !important;
}
}
/*el-dialog、el-message-box */
.el-dialog,
.el-message-box {
position: relative;
overflow: visible;
background: var(--el-background-technology);
border: 2px solid #00a1ff;
border-radius: 8px;
&__header {
position: relative;
background: var(--el-background-technology) !important;
.el-dialog__title,
.el-dialog__close {
color: #fff;
}
i[class*='__close'] {
width: 24px;
height: 24px;
line-height: 22px;
border: 1px solid transparent;
transition: none;
&:hover {
color: #00a1ff;
}
}
}
&::before {
position: absolute;
top: -2px;
bottom: -2px;
left: 30px;
z-index: 0;
width: calc(100% - 60px);
pointer-events: none;
content: '';
border-top: 2px solid #016886;
border-bottom: 2px solid #016886;
}
&::after {
position: absolute;
top: 30px;
right: -2px;
left: -2px;
z-index: 0;
height: calc(100% - 60px);
pointer-events: none;
content: '';
border-right: 2px solid #016886;
border-left: 2px solid #016886;
}
}
/*el-drawer */
.el-drawer.rtl {
border-left: 1px solid var(--el-border-color);
}
.el-pagination {
&.is-background {
.btn-prev:disabled,
.btn-next:disabled {
background-color: var(--el-pagination-button-bg-color);
}
}
}
.el-drawer__header {
color: var(--el-color-grey);
}
.el-radio-button {
&__inner {
border: 1px solid var(--el-border-color) !important;
}
}
.el-input {
&.is-disabled {
.el-input__wrapper {
background: #214e85 !important;
}
}
}
.vab-header {
border-bottom: 1px solid var(--el-border-color) !important;
.vab-logo-horizontal {
height: calc(var(--el-header-height) - 2px);
}
.vab-main {
.right-panel {
[class*='ri-'],
.username {
color: var(--el-color-grey) !important;
}
}
}
}
.vab-tabs-content-smooth {
.el-tabs__header {
.el-tabs__item {
&:hover {
color: var(--el-color-grey);
background: #123372;
}
}
}
}
/* .vab-hey-message */
[class*='vab-hey-message'] {
border: 1px solid var(--el-border-color) !important;
}
/* svg */
[fill='#fff'] {
fill: var(--el-background-technology) !important;
}
[fill='#f2f2f2'],
[fill='#d0d2d5'] {
fill: var(--el-bg-color) !important;
}
.login-container,
.register-container {
background: url('/@/assets/login_images/background.png') center center fixed no-repeat !important;
background-size: cover !important;
}
.el-button,
.el-switch,
.el-checkbox,
.el-checkbox-group,
.el-radio,
.el-radio-group,
.el-slider,
.el-tag,
.el-pagination,
.el-segmented,
.el-carousel,
.el-menu,
.el-card__body::after,
.el-alert.is-dark,
.el-badge,
.fold-unfold,
.schedule-box,
.vab-theme-setting div a:hover,
.transition-box,
.top-card-blue,
.icon-panel {
--el-color-white: var(--el-menu-text-color);
}
.el-divider__text {
background-color: transparent !important;
}
.vab-blockquote {
background-color: rgba(0, 0, 0, 0.1) !important;
}
}

1053
library/styles/vab.scss Normal file
View File

File diff suppressed because it is too large Load Diff

154
library/styles/var.scss Normal file
View File

@@ -0,0 +1,154 @@
@use './variables' as *;
:root {
//背景色
--el-background-color: #f6f8f9;
//菜单背景色
--el-menu-background-color: #282c34;
//分栏布局右侧菜单背景色
--el-menu-background-color-second: #ffffff;
//菜单文字颜色
--el-menu-color-text: #ffffff;
//菜单item高度
--el-menu-item-height: 50px;
//横向菜单sub-item高度
--el-menu-horizontal-sub-item-height: calc(var(--el-menu-item-height) - 8px);
// 浅黑色
--el-color-grey: rgba(0, 0, 0, 0.65);
//黑色
--el-color-black: rgba(0, 0, 0, 0.75);
// primary颜色
--el-color-primary: #4e88f3;
--el-color-primary-light-1: #{$vab-color-primary-light-1};
--el-color-primary-light-2: #{$vab-color-primary-light-2};
--el-color-primary-light-3: #{$vab-color-primary-light-3};
--el-color-primary-light-4: #{$vab-color-primary-light-4};
--el-color-primary-light-5: #{$vab-color-primary-light-5};
--el-color-primary-light-6: #{$vab-color-primary-light-6};
--el-color-primary-light-7: #{$vab-color-primary-light-7};
--el-color-primary-light-8: #{$vab-color-primary-light-8};
--el-color-primary-light-9: #{$vab-color-primary-light-9};
--el-color-primary-dark-2: #{$vab-color-primary};
// success颜色
--el-color-success: #{$vab-color-success};
--el-color-success-light: #{$vab-color-success-light};
--el-color-success-lighter: #{$vab-color-success-lighter};
--el-color-success-light-1: #{$vab-color-success-light-1};
--el-color-success-light-2: #{$vab-color-success-light-2};
--el-color-success-light-3: #{$vab-color-success-light-3};
--el-color-success-light-4: #{$vab-color-success-light-4};
--el-color-success-light-5: #{$vab-color-success-light-5};
--el-color-success-light-6: #{$vab-color-success-light-6};
--el-color-success-light-7: #{$vab-color-success-light-7};
--el-color-success-light-8: #{$vab-color-success-light-8};
--el-color-success-light-9: #{$vab-color-success-light-9};
--el-color-success-dark-2: #{$vab-color-success};
//warning颜色
--el-color-warning: #{$vab-color-warning};
--el-color-warning-light: #{$vab-color-warning-light};
--el-color-warning-lighter: #{$vab-color-warning-lighter};
--el-color-warning-light-1: #{$vab-color-warning-light-1};
--el-color-warning-light-2: #{$vab-color-warning-light-2};
--el-color-warning-light-3: #{$vab-color-warning-light-3};
--el-color-warning-light-4: #{$vab-color-warning-light-4};
--el-color-warning-light-5: #{$vab-color-warning-light-5};
--el-color-warning-light-6: #{$vab-color-warning-light-6};
--el-color-warning-light-7: #{$vab-color-warning-light-7};
--el-color-warning-light-8: #{$vab-color-warning-light-8};
--el-color-warning-light-9: #{$vab-color-warning-light-9};
--el-color-warning-dark-2: #{$vab-color-warning};
//danger颜色
--el-color-danger: #{$vab-color-danger};
--el-color-danger-light: #{$vab-color-danger-light};
--el-color-danger-lighter: #{$vab-color-danger-lighter};
--el-color-danger-light-1: #{$vab-color-danger-light-1};
--el-color-danger-light-2: #{$vab-color-danger-light-2};
--el-color-danger-light-3: #{$vab-color-danger-light-3};
--el-color-danger-light-4: #{$vab-color-danger-light-4};
--el-color-danger-light-5: #{$vab-color-danger-light-5};
--el-color-danger-light-6: #{$vab-color-danger-light-6};
--el-color-danger-light-7: #{$vab-color-danger-light-7};
--el-color-danger-light-8: #{$vab-color-danger-light-8};
--el-color-danger-light-9: #{$vab-color-danger-light-9};
--el-color-danger-dark-2: #{$vab-color-danger};
//error颜色
--el-color-error: #{$vab-color-error};
--el-color-error-light: #{$vab-color-error-light};
--el-color-error-lighter: #{$vab-color-error-lighter};
--el-color-error-light-1: #{$vab-color-error-light-1};
--el-color-error-light-2: #{$vab-color-error-light-2};
--el-color-error-light-3: #{$vab-color-error-light-3};
--el-color-error-light-4: #{$vab-color-error-light-4};
--el-color-error-light-5: #{$vab-color-error-light-5};
--el-color-error-light-6: #{$vab-color-error-light-6};
--el-color-error-light-7: #{$vab-color-error-light-7};
--el-color-error-light-8: #{$vab-color-error-light-8};
--el-color-error-light-9: #{$vab-color-error-light-9};
--el-color-error-dark-2: #{$vab-color-error};
//info颜色
--el-color-info: #{$vab-color-info};
--el-color-info-light: #{$vab-color-info-light};
--el-color-info-lighter: #{$vab-color-info-lighter};
--el-color-info-dark-2: #{$vab-color-info};
/**
* @description: 全局字体大小
* @author sundan
*/
--el-font-size-base: 14px;
--el-font-size-small: calc(var(--el-font-size-base) - 1px);
--el-font-size-extra-small: calc(var(--el-font-size-base) - 2px);
--el-font-size-medium: calc(var(--el-font-size-base) + 2px);
--el-font-size-large: calc(var(--el-font-size-base) + 4px);
--el-font-size-extra-large: calc(var(--el-font-size-base) + 6px);
--ti-common-font-size-base: calc(var(--el-font-size-base) - 2px) !important;
--ti-common-font-size-1: var(--el-font-size-base) !important;
--ti-common-font-size-2: calc(var(--el-font-size-base) + 2px) !important;
--ti-common-font-size-3: calc(var(--el-font-size-base) + 4px) !important;
--ti-common-font-size-4: calc(var(--el-font-size-base) + 6px) !important;
--ti-common-font-size-5: calc(var(--el-font-size-base) + 10px) !important;
--ti-common-font-size-6: calc(var(--el-font-size-base) + 18px) !important;
--ti-common-font-size-7: calc(var(--el-font-size-base) + 22px) !important;
//默认动画
// --el-transition-duration: 0.3s;
// --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
--el-transition-duration: 0.25s;
--el-transition-function-ease-in-out-bezier: cubic-bezier(0.42, 0, 0.58, 1);
--el-transition: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier), border 0s, color 0.05s, font-size 0s;
//纵向、分栏左侧导航已折叠的宽度
--el-left-menu-width-min: 64px;
//纵向左侧导航已折叠右侧内容的宽度
--el-right-content-width-min: calc(100% - var(--el-left-menu-width-min));
//纵向左侧导航未折叠的宽度
--el-left-menu-width: 266px;
//默认padding
--el-padding: 20px;
//默认margin
--el-margin: 20px;
//顶部nav的高度
--el-nav-height: 60px;
//顶部标签页tabs的高度
--el-tabs-height: 50px;
//顶部标签页tabs中每一个item的高度
--el-tab-item-height: 34px;
//底部footer的高度
--el-footer-height: 50px;
//遮罩层颜色
--el-mask-color: rgba(255, 255, 255, 0.8);
//z-index
--el-z-index: 1999;
//横向top-bar、logo、一级菜单的高度
--el-header-height: 60px;
//纵向、综合、分栏logo的高度
--el-logo-height: 60px;
//标题高度
--el-title-color: #ffffff;
//输入框高度
--el-input-height: 32px;
//圆角
--el-border-radius-base: 5px;
//容器高度
--el-container-height: calc(
var(--vh, 1vh) * 100 - var(--el-nav-height) - var(--el-tabs-height) - var(--el-padding) * 3 - var(--el-footer-height)
);
}

78
library/styles/variables.scss Normal file
View File

@@ -0,0 +1,78 @@
/**
* @description 全局主题变量配置
* @author sundan
*/
$base-color-primary: #4e88f3;
$base-color-success: #13ce66;
$base-color-warning: #e6a23c;
$base-color-danger: #fd4e4e;
$base-color-error: #fd4e4e;
$base-color-text: #909399;
$vab-color-primary: $base-color-primary;
$vab-color-primary-light-1: rgba($base-color-primary, 0.9);
$vab-color-primary-light-2: rgba($base-color-primary, 0.8);
$vab-color-primary-light-3: rgba($base-color-primary, 0.7);
$vab-color-primary-light-4: rgba($base-color-primary, 0.6);
$vab-color-primary-light-5: rgba($base-color-primary, 0.5);
$vab-color-primary-light-6: rgba($base-color-primary, 0.4);
$vab-color-primary-light-7: rgba($base-color-primary, 0.3);
$vab-color-primary-light-8: rgba($base-color-primary, 0.2);
$vab-color-primary-light-9: rgba($base-color-primary, 0.1);
$vab-color-success: $base-color-success;
$vab-color-success-light: rgba($base-color-success, 0.2);
$vab-color-success-lighter: rgba($base-color-success, 0.1);
$vab-color-success-light-1: rgba($base-color-success, 0.9);
$vab-color-success-light-2: rgba($base-color-success, 0.8);
$vab-color-success-light-3: rgba($base-color-success, 0.7);
$vab-color-success-light-4: rgba($base-color-success, 0.6);
$vab-color-success-light-5: rgba($base-color-success, 0.5);
$vab-color-success-light-6: rgba($base-color-success, 0.4);
$vab-color-success-light-7: rgba($base-color-success, 0.3);
$vab-color-success-light-8: rgba($base-color-success, 0.2);
$vab-color-success-light-9: rgba($base-color-success, 0.1);
$vab-color-warning: $base-color-warning;
$vab-color-warning-light: rgba($base-color-warning, 0.2);
$vab-color-warning-lighter: rgba($base-color-warning, 0.1);
$vab-color-warning-light-1: rgba($base-color-warning, 0.9);
$vab-color-warning-light-2: rgba($base-color-warning, 0.8);
$vab-color-warning-light-3: rgba($base-color-warning, 0.7);
$vab-color-warning-light-4: rgba($base-color-warning, 0.6);
$vab-color-warning-light-5: rgba($base-color-warning, 0.5);
$vab-color-warning-light-6: rgba($base-color-warning, 0.4);
$vab-color-warning-light-7: rgba($base-color-warning, 0.3);
$vab-color-warning-light-8: rgba($base-color-warning, 0.2);
$vab-color-warning-light-9: rgba($base-color-warning, 0.1);
$vab-color-danger: $base-color-danger;
$vab-color-danger-light: rgba($base-color-danger, 0.2);
$vab-color-danger-lighter: rgba($base-color-danger, 0.1);
$vab-color-danger-light-1: rgba($base-color-danger, 0.9);
$vab-color-danger-light-2: rgba($base-color-danger, 0.8);
$vab-color-danger-light-3: rgba($base-color-danger, 0.7);
$vab-color-danger-light-4: rgba($base-color-danger, 0.6);
$vab-color-danger-light-5: rgba($base-color-danger, 0.5);
$vab-color-danger-light-6: rgba($base-color-danger, 0.4);
$vab-color-danger-light-7: rgba($base-color-danger, 0.3);
$vab-color-danger-light-8: rgba($base-color-danger, 0.2);
$vab-color-danger-light-9: rgba($base-color-danger, 0.1);
$vab-color-error: $base-color-error;
$vab-color-error-light: rgba($base-color-error, 0.2);
$vab-color-error-lighter: rgba($base-color-error, 0.1);
$vab-color-error-light-1: rgba($base-color-error, 0.9);
$vab-color-error-light-2: rgba($base-color-error, 0.8);
$vab-color-error-light-3: rgba($base-color-error, 0.7);
$vab-color-error-light-4: rgba($base-color-error, 0.6);
$vab-color-error-light-5: rgba($base-color-error, 0.5);
$vab-color-error-light-6: rgba($base-color-error, 0.4);
$vab-color-error-light-7: rgba($base-color-error, 0.3);
$vab-color-error-light-8: rgba($base-color-error, 0.2);
$vab-color-error-light-9: rgba($base-color-error, 0.1);
$vab-color-info: $base-color-text;
$vab-color-info-light: rgba($base-color-text, 0.2);
$vab-color-info-lighter: rgba($base-color-text, 0.1);