初始化
This commit is contained in:
hezhidong
@@ -0,0 +1,240 @@
|
||||
/* 初始化样式
|
||||
------------------------------- */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--prev-bg-menuBar: #545c64;
|
||||
--prev-bg-menuBarColor: #eaeaea;
|
||||
--prev-bg-topBar: #ffffff;
|
||||
--prev-bg-topBarColor: #606266;
|
||||
--prev-bg-columnsMenuBar: #545c64;
|
||||
--prev-bg-columnsMenuBarColor: #e6e6e6;
|
||||
--prev-bg-main-color: #f8f8f8;
|
||||
--prev-bg-color: #f5f7fa;
|
||||
--prev-bg-white: #ffffff;
|
||||
--prev-color-primary: #409eff;
|
||||
--prev-color-text-white: #ffffff;
|
||||
--prev-color-text-black: #000000;
|
||||
--prev-color-text-primary: #303133;
|
||||
--prev-color-text-regular: #606266;
|
||||
--prev-color-text-secondary: #909399;
|
||||
--prev-color-text-placeholder: #c0c4cc;
|
||||
--prev-color-hover: rgba(0, 0, 0, 0.04);
|
||||
--prev-color-seting-main: #e9eef3;
|
||||
--prev-color-seting-aside: #d3dce6;
|
||||
--prev-color-seting-header: #b3c0d1;
|
||||
--prev-border-color-hover: #c0c4cc;
|
||||
--prev-border-color-base: #dcdfe6;
|
||||
--prev-border-color-light: #e4e7ed;
|
||||
--prev-border-color-lighter: #ebeef5;
|
||||
--prev-border-color-extra-light: #f2f6fc;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--prev-bg-main-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 主布局样式
|
||||
------------------------------- */
|
||||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.layout-aside {
|
||||
background: var(--prev-bg-menuBar);
|
||||
box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
|
||||
height: inherit;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden !important;
|
||||
.el-scrollbar__view {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.layout-header {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.layout-main {
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background-color: var(--prev-bg-main-color);
|
||||
}
|
||||
.el-scrollbar {
|
||||
width: 100%;
|
||||
}
|
||||
.layout-view-bg-white {
|
||||
background: var(--prev-bg-white);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--prev-border-color-lighter);
|
||||
}
|
||||
.layout-el-aside-br-color {
|
||||
border-right: 1px solid rgb(238, 238, 238);
|
||||
}
|
||||
.layout-aside-width-default {
|
||||
width: 220px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.layout-aside-width64 {
|
||||
width: 64px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.layout-aside-width1 {
|
||||
width: 1px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.layout-scrollbar {
|
||||
@extend .el-scrollbar;
|
||||
padding: 15px;
|
||||
}
|
||||
.layout-mian-height-50 {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
.layout-columns-warp {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layout-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 进度条颜色
|
||||
------------------------------- */
|
||||
#nprogress .bar {
|
||||
background: var(--prev-color-primary) !important;
|
||||
}
|
||||
|
||||
/* flex 弹性布局
|
||||
------------------------------- */
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-auto {
|
||||
flex: 1;
|
||||
}
|
||||
.flex-center {
|
||||
@extend .flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex-margin {
|
||||
margin: auto;
|
||||
}
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 宽高 100%
|
||||
------------------------------- */
|
||||
.w100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
.h100 {
|
||||
height: 100% !important;
|
||||
}
|
||||
.vh100 {
|
||||
height: 100vh !important;
|
||||
}
|
||||
.max100vh {
|
||||
max-height: 100vh !important;
|
||||
}
|
||||
.min100vh {
|
||||
min-height: 100vh !important;
|
||||
}
|
||||
|
||||
/* 颜色值
|
||||
------------------------------- */
|
||||
.color-primary {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.color-success {
|
||||
color: var(--prev-color-success);
|
||||
}
|
||||
.color-warning {
|
||||
color: var(--prev-color-warning);
|
||||
}
|
||||
.color-danger {
|
||||
color: var(--prev-color-danger);
|
||||
}
|
||||
.color-info {
|
||||
color: var(--prev-color-info);
|
||||
}
|
||||
|
||||
/* 溢出省略号
|
||||
------------------------------- */
|
||||
.one-text-overflow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.two-text-overflow {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* 字体大小全局样式
|
||||
------------------------------- */
|
||||
@for $i from 10 through 32 {
|
||||
.font#{$i} {
|
||||
font-size: #{$i}px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 外边距、内边距全局样式
|
||||
------------------------------- */
|
||||
@for $i from 5 through 35 {
|
||||
.mt#{$i} {
|
||||
margin-top: #{$i}px !important;
|
||||
}
|
||||
.mr#{$i} {
|
||||
margin-right: #{$i}px !important;
|
||||
}
|
||||
.mb#{$i} {
|
||||
margin-bottom: #{$i}px !important;
|
||||
}
|
||||
.ml#{$i} {
|
||||
margin-left: #{$i}px !important;
|
||||
}
|
||||
.pt#{$i} {
|
||||
padding-top: #{$i}px !important;
|
||||
}
|
||||
.pr#{$i} {
|
||||
padding-right: #{$i}px !important;
|
||||
}
|
||||
.pb#{$i} {
|
||||
padding-bottom: #{$i}px !important;
|
||||
}
|
||||
.pl#{$i} {
|
||||
padding-left: #{$i}px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import 'common/transition.scss';
|
||||
@@ -0,0 +1,102 @@
|
||||
/* 页面切换动画
|
||||
------------------------------- */
|
||||
.slide-right-enter-active,
|
||||
.slide-right-leave-active,
|
||||
.slide-left-enter-active,
|
||||
.slide-left-leave-active {
|
||||
will-change: transform;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
// slide-right
|
||||
.slide-right-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
.slide-right-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
// slide-left
|
||||
.slide-left-enter-from {
|
||||
@extend .slide-right-leave-active;
|
||||
}
|
||||
.slide-left-leave-to {
|
||||
@extend .slide-right-enter;
|
||||
}
|
||||
// opacitys
|
||||
.opacitys-enter-active,
|
||||
.opacitys-leave-active {
|
||||
will-change: transform;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.opacitys-enter,
|
||||
.opacitys-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Breadcrumb 面包屑过渡动画
|
||||
------------------------------- */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.breadcrumb-enter,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
.breadcrumb-move {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* logo 过渡动画
|
||||
------------------------------- */
|
||||
@keyframes logoAnimation {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 404、401 过渡动画
|
||||
------------------------------- */
|
||||
@keyframes error-num {
|
||||
0% {
|
||||
transform: translateY(60px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes error-img {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 左右左 link.vue
|
||||
------------------------------- */
|
||||
@keyframes toRight {
|
||||
0% {
|
||||
left: -5px;
|
||||
}
|
||||
50% {
|
||||
left: 100%;
|
||||
}
|
||||
100% {
|
||||
left: -5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/* 深色模式样式
|
||||
------------------------------- */
|
||||
[data-theme='dark'] {
|
||||
--prev-bg-menuBar: #191919 !important;
|
||||
--prev-bg-menuBarColor: #dadada !important;
|
||||
--prev-bg-topBar: #191919 !important;
|
||||
--prev-bg-topBarColor: #dadada !important;
|
||||
--prev-bg-columnsMenuBar: #191919 !important;
|
||||
--prev-bg-columnsMenuBarColor: #dadada !important;
|
||||
--prev-bg-main-color: #1f1f1f !important;
|
||||
--prev-bg-color: rgba(0, 0, 0, 0.3) !important;
|
||||
--prev-bg-white: #191919 !important;
|
||||
--prev-color-text-black: #ffffff !important;
|
||||
--prev-color-text-primary: #dadada !important;
|
||||
--prev-color-text-regular: #dadada !important;
|
||||
--prev-color-text-secondary: #a3a3a3 !important;
|
||||
--prev-color-hover: rgba(0, 0, 0, 0.3) !important;
|
||||
--prev-color-seting-main: #505050 !important;
|
||||
--prev-color-seting-aside: #3c3c3c !important;
|
||||
--prev-color-seting-header: #303030 !important;
|
||||
--prev-border-color-hover: #616161 !important;
|
||||
--prev-border-color-base: #333333 !important;
|
||||
--prev-border-color-light: #333333 !important;
|
||||
--prev-border-color-lighter: #333333 !important;
|
||||
--prev-border-color-extra-light: #333333 !important;
|
||||
|
||||
// menu
|
||||
.layout-aside {
|
||||
border-right: 1px solid var(--prev-border-color-lighter) !important;
|
||||
}
|
||||
|
||||
// drawer
|
||||
.el-drawer {
|
||||
border-left: 1px solid var(--prev-border-color-lighter) !important;
|
||||
}
|
||||
|
||||
// button
|
||||
.el-button--default {
|
||||
background: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-primary);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background: var(--prev-color-primary-light-8) !important;
|
||||
border-color: var(--prev-color-primary-light-6) !important;
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--prev-color-primary-light-1) !important;
|
||||
}
|
||||
&:active {
|
||||
border-color: var(--prev-color-primary-light-6) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// tag
|
||||
.el-tag.el-tag--info {
|
||||
background-color: var(--prev-bg-white) !important;
|
||||
border-color: var(--prev-border-color-light) !important;
|
||||
color: var(--prev-color-text-regular) !important;
|
||||
}
|
||||
|
||||
// switch
|
||||
.el-switch:not(.is-checked) {
|
||||
.el-switch__core {
|
||||
border-color: var(--prev-border-color-base) !important;
|
||||
background-color: var(--prev-border-color-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// TimePicker
|
||||
.el-time-spinner__item.active:not(.disabled) {
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
|
||||
// date
|
||||
.el-date-table td.in-range div,
|
||||
.el-date-table td.in-range div:hover,
|
||||
.el-date-table.is-week-mode .el-date-table__row.current div,
|
||||
.el-date-table.is-week-mode .el-date-table__row:hover div,
|
||||
.el-date-table td.selected div,
|
||||
.el-month-table td.in-range div,
|
||||
.el-month-table td.in-range div:hover {
|
||||
background-color: var(--prev-bg-color) !important;
|
||||
}
|
||||
|
||||
// transfer
|
||||
.el-transfer-panel,
|
||||
.el-transfer-panel .el-transfer-panel__header {
|
||||
background-color: var(--prev-bg-color) !important;
|
||||
}
|
||||
|
||||
// loading
|
||||
.el-loading-mask {
|
||||
background-color: var(--prev-bg-color) !important;
|
||||
}
|
||||
|
||||
// dropdown
|
||||
.el-dropdown-menu__item:focus,
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
background-color: var(--prev-color-hover) !important;
|
||||
}
|
||||
|
||||
// dialog
|
||||
.el-dialog,
|
||||
.el-calendar {
|
||||
border: 1px solid var(--prev-border-color-lighter);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
/* 防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）
|
||||
------------------------------- */
|
||||
.el-scrollbar {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.el-scrollbar__wrap {
|
||||
overflow: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
|
||||
}
|
||||
.el-select-dropdown .el-scrollbar__wrap {
|
||||
overflow-x: scroll !important;
|
||||
}
|
||||
.el-select-dropdown__wrap {
|
||||
max-height: 274px !important; /*修复Select 选择器高度问题*/
|
||||
}
|
||||
.el-autocomplete-suggestion__wrap {
|
||||
max-height: 280px !important;
|
||||
}
|
||||
|
||||
/* Button 按钮
|
||||
------------------------------- */
|
||||
// 第三方字体图标大小
|
||||
.el-button i.iconfont,
|
||||
.el-button i.fa {
|
||||
font-size: 14px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.el-button--medium i.iconfont,
|
||||
.el-button--medium i.fa {
|
||||
font-size: 14px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.el-button--small i.iconfont,
|
||||
.el-button--small i.fa {
|
||||
font-size: 12px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.el-button--mini i.iconfont,
|
||||
.el-button--mini i.fa {
|
||||
font-size: 12px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Dialog 对话框
|
||||
------------------------------- */
|
||||
.el-overlay,
|
||||
.el-dialog__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.el-dialog {
|
||||
margin: 0 auto !important;
|
||||
.el-dialog__body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
max-height: calc(90vh - 111px) !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Alert 警告
|
||||
------------------------------- */
|
||||
.el-alert--warning.is-light {
|
||||
border: 1px solid rgba(230, 162, 60, 0.3) !important;
|
||||
}
|
||||
.el-alert--success.is-light {
|
||||
border: 1px solid rgba(103, 194, 58, 0.3) !important;
|
||||
}
|
||||
.el-alert--info.is-light {
|
||||
border: 1px solid rgba(144, 147, 153, 0.3) !important;
|
||||
}
|
||||
.el-alert--error.is-light {
|
||||
border: 1px solid rgba(245, 108, 108, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Table 表格
|
||||
------------------------------- */
|
||||
.el-table-column--selection {
|
||||
.el-checkbox {
|
||||
margin-right: unset !important;
|
||||
}
|
||||
}
|
||||
.el-table::before,
|
||||
.el-table--group::after,
|
||||
.el-table--border::after {
|
||||
z-index: 99 !important;
|
||||
}
|
||||
|
||||
/* 下拉选择器/时间选择器滚动条
|
||||
------------------------------- */
|
||||
.el-select-dropdown .el-scrollbar__wrap,
|
||||
.el-picker-panel .el-scrollbar__wrap {
|
||||
overflow-x: scroll !important;
|
||||
}
|
||||
|
||||
/* NavMenu 导航菜单
|
||||
------------------------------- */
|
||||
// 默认样式修改
|
||||
.el-menu {
|
||||
border-right: none !important;
|
||||
}
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
color: var(--prev-bg-menuBarColor) !important;
|
||||
transition: none !important;
|
||||
}
|
||||
// horizontal 水平方向时
|
||||
.el-menu--horizontal > .el-menu-item.is-active,
|
||||
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom: 3px solid !important;
|
||||
border-bottom-color: var(--prev-color-primary) !important;
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
|
||||
.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
|
||||
.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
|
||||
.el-menu--horizontal .el-menu .el-menu-item.is-active,
|
||||
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.el-menu--horizontal > .el-menu-item,
|
||||
.el-menu--horizontal > .el-submenu .el-submenu__title {
|
||||
color: var(--bg-topBarColor) !important;
|
||||
}
|
||||
// 外部链接时
|
||||
.el-menu-item a,
|
||||
.el-menu-item a:hover,
|
||||
.el-menu-item i,
|
||||
.el-submenu__title i {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.el-menu-item a {
|
||||
width: 86%;
|
||||
display: inline-block;
|
||||
}
|
||||
// 默认 hover 时
|
||||
.el-menu-item:hover,
|
||||
.el-submenu__title:hover {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background-color: transparent !important;
|
||||
i {
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
}
|
||||
// 高亮时
|
||||
.el-menu-item.is-active {
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-active-extend {
|
||||
color: #ffffff !important;
|
||||
background-color: var(--prev-color-primary) !important;
|
||||
i {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
#add-is-active {
|
||||
@extend .el-active-extend;
|
||||
&:hover {
|
||||
@extend .el-active-extend;
|
||||
}
|
||||
}
|
||||
// 菜单收起时且是a链接
|
||||
.is-dark a {
|
||||
color: #ffffff !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
// 菜单收起时鼠标经过背景颜色/字体颜色
|
||||
.el-menu--vertical {
|
||||
background: var(--prev-bg-menuBar) !important;
|
||||
}
|
||||
.el-menu--horizontal {
|
||||
.el-menu {
|
||||
background: var(--bg-topBar) !important;
|
||||
}
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
color: var(--bg-topBarColor);
|
||||
}
|
||||
}
|
||||
// 第三方图标字体间距/大小设置
|
||||
.el-menu-item .iconfont,
|
||||
.el-submenu .iconfont,
|
||||
.el-menu-item .fa,
|
||||
.el-submenu__title .fa {
|
||||
font-size: 14px !important;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
// element plus 本身字体图标
|
||||
.el-submenu [class^='el-icon-'],
|
||||
.el-menu-item [class^='el-icon-'] {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
// 去掉离开浏览器时，菜单的默认高亮
|
||||
.el-menu-item:focus {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Alert 警告
|
||||
------------------------------- */
|
||||
.el-alert__title {
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import './base.scss';
|
||||
@import './app.scss';
|
||||
@import './other.scss';
|
||||
@import './element.scss';
|
||||
@import './media/media.scss';
|
||||
@import './variables.scss';
|
||||
@import './dark.scss';
|
||||
@@ -0,0 +1,56 @@
|
||||
.loading-prev {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.loading-prev .loading-prev-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.loading-prev .loading-prev-box-warp {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item {
|
||||
width: 33.333333%;
|
||||
height: 33.333333%;
|
||||
background: var(--prev-color-primary);
|
||||
float: left;
|
||||
animation: loading-prev-animation 1.2s infinite ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item:nth-child(7) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item:nth-child(4),
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item:nth-child(8) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item:nth-child(1),
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item:nth-child(5),
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item:nth-child(9) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item:nth-child(2),
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item:nth-child(6) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.loading-prev .loading-prev-box-warp .loading-prev-box-item:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
@keyframes loading-prev-animation {
|
||||
0%,
|
||||
70%,
|
||||
100% {
|
||||
transform: scale3D(1, 1, 1);
|
||||
}
|
||||
35% {
|
||||
transform: scale3D(0, 0, 1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于800px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: 800px) {
|
||||
.el-dialog {
|
||||
width: 90%;
|
||||
}
|
||||
.el-dialog.is-fullscreen {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
.error {
|
||||
.error-flex {
|
||||
flex-direction: column-reverse !important;
|
||||
height: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.right,
|
||||
.left {
|
||||
flex: unset !important;
|
||||
display: flex !important;
|
||||
}
|
||||
.left-item {
|
||||
margin: auto !important;
|
||||
}
|
||||
.right img {
|
||||
max-width: 450px !important;
|
||||
@extend .left-item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度大于768px小于992px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: $sm) and (max-width: $md) {
|
||||
.error {
|
||||
.error-flex {
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
.el-form-item__label {
|
||||
width: 100% !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.el-form-item {
|
||||
display: unset !important;
|
||||
}
|
||||
.login-form .el-form-item {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于1200px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $lg) {
|
||||
.home-recommend-row {
|
||||
.home-recommend {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
& .el-col:last-of-type,
|
||||
& .el-col:nth-last-child(2) {
|
||||
.home-recommend {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-lg {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于992px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $md) {
|
||||
.home-recommend-row {
|
||||
& .el-col:nth-last-child(2) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
& .el-col:last-of-type {
|
||||
.home-recommend {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/* 栅格布局（媒体查询变量）
|
||||
* $xs <768px 响应式栅格
|
||||
* $sm ≥768px 响应式栅格
|
||||
* $md ≥992px 响应式栅格
|
||||
* $lg ≥1200px 响应式栅格
|
||||
* $xl ≥1920px 响应式栅格
|
||||
------------------------------- */
|
||||
$xs: 576px;
|
||||
$sm: 768px;
|
||||
$md: 992px;
|
||||
$lg: 1200px;
|
||||
$xl: 1920px;
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
}
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
}
|
||||
|
||||
/* 页面宽度大于768px小于992px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: $sm) and (max-width: $md) {
|
||||
}
|
||||
|
||||
/* 页面宽度大于992px小于1200px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: $md) and (max-width: $lg) {
|
||||
}
|
||||
|
||||
/* 页面宽度大于1920px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: $xl) {
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
// MessageBox 弹框
|
||||
.el-message-box {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
// Breadcrumb 面包屑
|
||||
.layout-navbars-breadcrumb-hide {
|
||||
display: none;
|
||||
}
|
||||
// 外链视图
|
||||
.layout-view-link {
|
||||
a {
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
// 菜单搜索
|
||||
.layout-search-dialog {
|
||||
.el-autocomplete {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于1000px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: 1000px) {
|
||||
// 布局配置
|
||||
.layout-drawer-content-flex {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '手机版不支持切换布局';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
.login-weaper {
|
||||
height: 420px !important;
|
||||
.login-left {
|
||||
display: none !important;
|
||||
}
|
||||
.login-right {
|
||||
width: 100% !important;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
.login-main {
|
||||
width: 94% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度大于576px小于992px
|
||||
------------------------------- */
|
||||
@media screen and (min-width: $xs) and (max-width: $md) {
|
||||
.login-left {
|
||||
display: none !important;
|
||||
}
|
||||
.login-right {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import './login.scss';
|
||||
@import './error.scss';
|
||||
@import './home.scss';
|
||||
@import './layout.scss';
|
||||
@import './scrollbar.scss';
|
||||
@import './dialog.scss';
|
||||
@import './form.scss';
|
||||
@@ -0,0 +1,13 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于768px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $sm) {
|
||||
// element plus scrollbar
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
width: 2px !important;
|
||||
}
|
||||
.el-scrollbar__bar.is-horizontal {
|
||||
height: 2px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,952 @@
|
||||
/* Button 按钮
|
||||
------------------------------- */
|
||||
// text
|
||||
.el-button--text {
|
||||
color: var(--prev-color-primary);
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
.el-button--text:active {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
// default
|
||||
.el-button--default:hover,
|
||||
.el-button--default:focus {
|
||||
color: var(--prev-color-primary);
|
||||
background: var(--prev-color-primary-light-8);
|
||||
border-color: var(--prev-color-primary-light-6);
|
||||
}
|
||||
.el-button--default.is-plain:hover,
|
||||
.el-button--default.is-plain:focus {
|
||||
color: var(--prev-color-primary);
|
||||
background: var(--prev-bg-white);
|
||||
border-color: var(--prev-color-primary-light-1);
|
||||
}
|
||||
.el-button--default:active {
|
||||
color: var(--prev-color-primary);
|
||||
background: var(--prev-bg-white);
|
||||
border-color: var(--prev-color-primary-light-1);
|
||||
}
|
||||
// primary
|
||||
.el-button--primary {
|
||||
color: var(--prev-color-text-white) !important;
|
||||
background: var(--prev-color-primary) !important;
|
||||
border-color: var(--prev-color-primary) !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--prev-color-text-white) !important;
|
||||
background: var(--prev-color-primary-light-3) !important;
|
||||
border-color: var(--prev-color-primary-light-3) !important;
|
||||
}
|
||||
}
|
||||
.el-button--primary.is-plain {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background: var(--prev-color-primary-light-8) !important;
|
||||
border-color: var(--prev-color-primary-light-6) !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--prev-color-text-white) !important;
|
||||
background: var(--prev-color-primary) !important;
|
||||
border-color: var(--prev-color-primary) !important;
|
||||
}
|
||||
}
|
||||
.el-button--primary.is-disabled,
|
||||
.el-button--primary.is-disabled:active,
|
||||
.el-button--primary.is-disabled:focus,
|
||||
.el-button--primary.is-disabled:hover {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background: var(--prev-color-primary-light-7) !important;
|
||||
border-color: var(--prev-color-primary-light-7) !important;
|
||||
}
|
||||
.el-button--primary.is-active,
|
||||
.el-button--primary:active {
|
||||
color: var(--prev-color-text-white) !important;
|
||||
background: var(--prev-color-primary) !important;
|
||||
border-color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-button.is-disabled.is-plain,
|
||||
.el-button.is-disabled.is-plain:focus,
|
||||
.el-button.is-disabled.is-plain:hover {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
color: var(--prev-color-text-placeholder);
|
||||
}
|
||||
|
||||
/* Link 文字链接
|
||||
------------------------------- */
|
||||
// default
|
||||
.el-link.el-link--default:hover {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
// primary
|
||||
.el-link.el-link--primary {
|
||||
color: var(--prev-color-primary);
|
||||
&:hover {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
.el-link.el-link--default::after,
|
||||
.el-link.is-underline:hover::after,
|
||||
.el-link.el-link--primary.is-underline:hover::after,
|
||||
.el-link.el-link--primary::after {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Radio 单选框
|
||||
------------------------------- */
|
||||
.el-radio,
|
||||
.el-checkbox {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-radio__input.is-checked + .el-radio__label,
|
||||
.el-radio-button__inner:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
box-shadow: -1px 0 0 0 var(--prev-color-primary);
|
||||
}
|
||||
.el-radio.is-bordered.is-checked,
|
||||
.el-radio__inner:hover {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-radio-button__inner,
|
||||
.el-checkbox-button__inner {
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-regular);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-radio-button:first-child .el-radio-button__inner,
|
||||
.el-checkbox-button:first-child .el-checkbox-button__inner {
|
||||
border-left-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-radio.is-bordered,
|
||||
.el-checkbox.is-bordered {
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
|
||||
/* Checkbox 多选框
|
||||
------------------------------- */
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label,
|
||||
.el-checkbox-button__inner:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox__input.is-focus .el-checkbox__inner,
|
||||
.el-checkbox__inner:hover,
|
||||
.el-checkbox.is-bordered.is-checked,
|
||||
.el-checkbox-button.is-focus .el-checkbox-button__inner {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox-button.is-checked .el-checkbox-button__inner {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
box-shadow: -1px 0 0 0 var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
|
||||
border-left-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-checkbox-button.is-disabled .el-checkbox-button__inner {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
|
||||
/* Input 输入框、InputNumber 计数器
|
||||
------------------------------- */
|
||||
// input-number
|
||||
.el-input__inner:focus,
|
||||
.el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
|
||||
.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
|
||||
.el-textarea__inner:focus {
|
||||
border-color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-input-number__increase:hover,
|
||||
.el-input-number__decrease:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
background-color: var(--prev-bg-color);
|
||||
border-color: var(--prev-border-color-base) !important;
|
||||
}
|
||||
// input
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
color: var(--prev-color-text-regular);
|
||||
&:hover {
|
||||
border-color: var(--prev-border-color-hover);
|
||||
}
|
||||
}
|
||||
.el-input.is-disabled .el-input__inner,
|
||||
.el-textarea.is-disabled .el-textarea__inner {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
background-color: var(--prev-bg-color);
|
||||
color: var(--prev-color-text-regular);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-input .el-input__count .el-input__count-inner {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
// autocomplete
|
||||
.el-autocomplete-suggestion {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-autocomplete-suggestion__wrap {
|
||||
max-height: 280px !important;
|
||||
}
|
||||
// scss 循环
|
||||
$positions: 'top', 'right', 'bottom', 'left';
|
||||
@each $i in $positions {
|
||||
.el-popper[x-placement^='#{$i}'] .popper__arrow {
|
||||
border-#{$i}-color: var(--prev-border-color-base);
|
||||
&::after {
|
||||
border-#{$i}-color: var(--prev-bg-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-autocomplete-suggestion li {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-autocomplete-suggestion li.highlighted,
|
||||
.el-autocomplete-suggestion li:hover {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
|
||||
/* Select 选择器
|
||||
------------------------------- */
|
||||
.el-range-editor.is-active,
|
||||
.el-range-editor.is-active:hover,
|
||||
.el-select .el-input.is-focus .el-input__inner,
|
||||
.el-select .el-input__inner:focus {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-select-dropdown {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
.el-select-dropdown__item.is-disabled:hover {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-select .el-input.is-disabled .el-input__inner:hover {
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-select:hover .el-input__inner {
|
||||
border-color: var(--prev-border-color-hover);
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
.el-select-group__wrap:not(:last-of-type)::after {
|
||||
background: var(--prev-border-color-light);
|
||||
}
|
||||
|
||||
/* Cascader 级联选择器
|
||||
------------------------------- */
|
||||
.el-cascader .el-input .el-input__inner:focus,
|
||||
.el-cascader .el-input.is-focus .el-input__inner {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-cascader-node.in-active-path,
|
||||
.el-cascader-node.is-active,
|
||||
.el-cascader-node.is-selectable.in-checked-path {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-cascader__dropdown {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-cascader-menu {
|
||||
border-color: var(--prev-border-color-light);
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-cascader-node:not(.is-disabled):focus,
|
||||
.el-cascader-node:not(.is-disabled):hover {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
|
||||
/* Switch 开关
|
||||
------------------------------- */
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
border-color: var(--prev-color-primary);
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-switch__label.is-active {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Slider 滑块
|
||||
------------------------------- */
|
||||
.el-slider__bar {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-slider__button {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-slider__runway {
|
||||
background-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-slider__marks-text {
|
||||
color: var(--prev-color-text-secondary);
|
||||
}
|
||||
|
||||
/* TimePicker 时间选择器
|
||||
------------------------------- */
|
||||
.el-time-panel__btn.confirm,
|
||||
.el-time-spinner__arrow:hover,
|
||||
.time-select-item.selected:not(.disabled) {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-picker-panel {
|
||||
border-color: var(--prev-border-color-light);
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.time-select-item:hover,
|
||||
.el-time-spinner__item:hover:not(.disabled):not(.active),
|
||||
.el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active) {
|
||||
background-color: var(--prev-color-hover);
|
||||
}
|
||||
.el-time-panel {
|
||||
border-color: var(--prev-border-color-light);
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-time-panel__footer,
|
||||
.el-time-panel__content::after,
|
||||
.el-time-panel__content::before,
|
||||
.el-time-range-picker__body {
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-time-panel__btn,
|
||||
.el-date-editor .el-range-separator {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-date-editor .el-range-input {
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* DatePicker 日期选择器
|
||||
------------------------------- */
|
||||
.el-date-table td.today span,
|
||||
.el-date-table td.available:hover,
|
||||
.el-date-picker__header-label.active,
|
||||
.el-date-picker__header-label:hover,
|
||||
.el-picker-panel__icon-btn:hover,
|
||||
.el-year-table td.today .cell,
|
||||
.el-year-table td .cell:hover,
|
||||
.el-year-table td.current:not(.disabled) .cell,
|
||||
.el-month-table td .cell:hover,
|
||||
.el-month-table td.today .cell,
|
||||
.el-month-table td.current:not(.disabled) .cell,
|
||||
.el-picker-panel__shortcut:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-date-table td.current:not(.disabled) span,
|
||||
.el-date-table td.selected span {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-date-table td.end-date span,
|
||||
.el-date-table td.start-date span,
|
||||
.el-month-table td.end-date .cell,
|
||||
.el-month-table td.start-date .cell {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-date-table td.in-range div,
|
||||
.el-date-table td.in-range div:hover,
|
||||
.el-date-table.is-week-mode .el-date-table__row.current div,
|
||||
.el-date-table.is-week-mode .el-date-table__row:hover div,
|
||||
.el-date-table td.selected div {
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
}
|
||||
.el-date-table th,
|
||||
.el-date-picker__header--bordered,
|
||||
.el-date-range-picker__content.is-left,
|
||||
.el-date-picker__time-header,
|
||||
.el-date-range-picker__time-header {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-date-table th,
|
||||
.el-date-picker__header-label,
|
||||
.el-picker-panel__shortcut,
|
||||
.el-month-table td .cell,
|
||||
.el-year-table td .cell {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-date-table td.next-month,
|
||||
.el-date-table td.prev-month {
|
||||
color: var(--prev-border-color-hover);
|
||||
}
|
||||
.el-picker-panel__icon-btn {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-date-table td.disabled div {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
.el-picker-panel [slot='sidebar'],
|
||||
.el-picker-panel__sidebar,
|
||||
.el-picker-panel__footer {
|
||||
border-color: var(--prev-border-color-light);
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-month-table td.end-date .cell,
|
||||
.el-month-table td.start-date .cell {
|
||||
color: var(--prev-color-text-white);
|
||||
}
|
||||
|
||||
/* Upload 上传
|
||||
------------------------------- */
|
||||
.el-upload-list__item.is-success .el-upload-list__item-name:focus,
|
||||
.el-upload-list__item.is-success .el-upload-list__item-name:hover,
|
||||
.el-upload-list__item .el-icon-close-tip,
|
||||
.el-upload-dragger .el-upload__text em {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-upload--picture-card,
|
||||
.el-upload-dragger {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-light);
|
||||
i {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
}
|
||||
.el-upload--picture-card:hover,
|
||||
.el-upload:focus {
|
||||
color: var(--prev-color-primary);
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-upload-dragger:hover,
|
||||
.el-upload:focus .el-upload-dragger {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-upload__tip,
|
||||
.el-upload-list__item,
|
||||
.el-upload-dragger .el-upload__text,
|
||||
.el-upload-list__item-name,
|
||||
.el-upload-list__item .el-icon-close {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-upload-list__item:hover {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
|
||||
/* ColorPicker 颜色选择器
|
||||
------------------------------- */
|
||||
.el-color-picker__trigger {
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
|
||||
/* Transfer 穿梭框
|
||||
------------------------------- */
|
||||
.el-transfer-panel__item:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-transfer-panel,
|
||||
.el-transfer-panel .el-transfer-panel__header {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-transfer-panel .el-transfer-panel__footer {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Form 表单
|
||||
------------------------------- */
|
||||
.el-form {
|
||||
.el-form-item:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
|
||||
/* Table 表格
|
||||
------------------------------- */
|
||||
.el-table {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-table .descending .sort-caret.descending {
|
||||
border-top-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-table .ascending .sort-caret.ascending {
|
||||
border-bottom-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-table thead {
|
||||
color: var(--prev-color-text-secondary);
|
||||
}
|
||||
.el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf,
|
||||
.el-table--border,
|
||||
.el-table--group {
|
||||
border-color: var(--prev-border-color-lighter) !important;
|
||||
}
|
||||
.el-table th.el-table__cell,
|
||||
.el-table tr {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell,
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
.el-table--border::after,
|
||||
.el-table--group::after,
|
||||
.el-table::before {
|
||||
background-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
|
||||
/* Tag 标签
|
||||
------------------------------- */
|
||||
// primary
|
||||
.el-tag {
|
||||
color: var(--prev-color-primary);
|
||||
background-color: var(--prev-color-primary-light-8);
|
||||
border-color: var(--prev-color-primary-light-6);
|
||||
}
|
||||
.el-tag .el-tag__close {
|
||||
color: var(--prev-color-primary);
|
||||
&:hover {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
}
|
||||
.el-tag--dark {
|
||||
color: var(--prev-color-text-white);
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-tag--dark .el-tag__close {
|
||||
color: var(--prev-color-text-white);
|
||||
&:hover {
|
||||
background-color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
.el-tag--plain {
|
||||
color: var(--prev-color-primary);
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
|
||||
/* Progress 进度条
|
||||
------------------------------- */
|
||||
// primary
|
||||
.el-progress-bar__inner {
|
||||
background-color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-progress-bar__outer {
|
||||
background-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-progress__text {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
|
||||
/* Tree 树形控件
|
||||
------------------------------- */
|
||||
.el-tree {
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-tree-node__content:hover,
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: var(--prev-bg-color);
|
||||
}
|
||||
|
||||
/* Pagination 分页
|
||||
------------------------------- */
|
||||
.el-pager li.active,
|
||||
.el-pager li:hover,
|
||||
.el-pagination button:hover,
|
||||
.el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-pagination__sizes .el-input .el-input__inner:hover {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: var(--prev-color-primary);
|
||||
color: var(--prev-color-text-white);
|
||||
}
|
||||
.el-pagination__total,
|
||||
.el-pagination__jump {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-pagination button:disabled,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .btn-prev {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .btn-prev {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-pager li {
|
||||
background-color: var(--prev-bg-white);
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Badge 标记
|
||||
------------------------------- */
|
||||
// primary
|
||||
.el-badge__content--primary {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Loading 加载
|
||||
------------------------------- */
|
||||
.el-loading-spinner .path {
|
||||
stroke: var(--prev-color-primary);
|
||||
}
|
||||
.el-loading-spinner .el-loading-text,
|
||||
.el-loading-spinner i {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Message 消息提示
|
||||
------------------------------- */
|
||||
// default/info
|
||||
.el-message {
|
||||
min-width: unset !important;
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
/* MessageBox 弹框
|
||||
------------------------------- */
|
||||
.el-message-box__headerbtn:focus .el-message-box__close,
|
||||
.el-message-box__headerbtn:hover .el-message-box__close {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-message-box {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-message-box__title {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-message-box__content {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
|
||||
/* Notification 通知
|
||||
------------------------------- */
|
||||
.el-notification {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
.el-notification__title {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-notification__content {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabs 标签页
|
||||
------------------------------- */
|
||||
.el-tabs__item.is-active,
|
||||
.el-tabs__item:hover,
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 1px !important;
|
||||
}
|
||||
.el-tabs__item {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active,
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item,
|
||||
.el-tabs--card > .el-tabs__header,
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||
border-color: var(--prev-bg-color);
|
||||
}
|
||||
.el-tabs--border-card {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
.el-tabs--border-card > .el-tabs__header {
|
||||
background-color: var(--prev-bg-color);
|
||||
border-color: var(--prev-border-color-light);
|
||||
}
|
||||
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
}
|
||||
|
||||
/* Breadcrumb 面包屑
|
||||
------------------------------- */
|
||||
.el-breadcrumb__inner a:hover,
|
||||
.el-breadcrumb__inner.is-link:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-breadcrumb__inner a,
|
||||
.el-breadcrumb__inner.is-link {
|
||||
color: var(--bg-topBarColor);
|
||||
font-weight: normal;
|
||||
}
|
||||
.el-breadcrumb__inner a,
|
||||
.el-breadcrumb__inner.is-link {
|
||||
color: var(--prev-color-text-black);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.el-breadcrumb__separator {
|
||||
color: var(--prev-border-color-hover);
|
||||
}
|
||||
|
||||
/* PageHeader 页头
|
||||
------------------------------- */
|
||||
.el-page-header__left {
|
||||
color: var(--prev-color-text-black);
|
||||
&::after {
|
||||
background-color: var(--prev-border-color-base);
|
||||
}
|
||||
}
|
||||
.el-page-header__content {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Dropdown 下拉菜单
|
||||
------------------------------- */
|
||||
.el-dropdown-menu__item:focus,
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
color: var(--prev-color-primary);
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
}
|
||||
.el-dropdown-menu {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-dropdown-menu__item--divided {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-dropdown-menu__item--divided:before {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
|
||||
/* Steps 步骤条
|
||||
------------------------------- */
|
||||
// default
|
||||
.el-step__title.is-finish,
|
||||
.el-step__description.is-finish,
|
||||
.el-step__head.is-finish {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-step__head.is-finish {
|
||||
border-color: var(--prev-color-primary);
|
||||
}
|
||||
|
||||
/* Dialog 对话框
|
||||
------------------------------- */
|
||||
.el-dialog__headerbtn:focus .el-dialog__close,
|
||||
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-dialog {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-dialog__title {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-dialog__body {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
|
||||
/* Popover 弹出框
|
||||
------------------------------- */
|
||||
.el-popover {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-popover__title {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Card 卡片
|
||||
------------------------------- */
|
||||
.el-card {
|
||||
color: var(--prev-color-text-primary);
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-card__header {
|
||||
padding: 15px 20px;
|
||||
border-bottom-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
|
||||
/* Collapse 折叠面板
|
||||
------------------------------- */
|
||||
.el-collapse {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-collapse-item__header {
|
||||
color: var(--prev-color-text-primary);
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-collapse-item__wrap {
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-collapse-item__content {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Timeline 时间线
|
||||
------------------------------- */
|
||||
// primary
|
||||
.el-timeline-item__node--primary {
|
||||
background-color: var(--prev-color-primary);
|
||||
}
|
||||
.el-timeline-item__content {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
|
||||
/* Divider 分割线
|
||||
------------------------------- */
|
||||
.el-divider {
|
||||
background-color: var(--prev-border-color-base);
|
||||
}
|
||||
|
||||
/* Calendar 日历
|
||||
------------------------------- */
|
||||
.el-calendar-table td {
|
||||
color: var(--prev-color-text-black);
|
||||
}
|
||||
.el-calendar-table td.is-today {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
}
|
||||
.el-calendar-table .el-calendar-day:hover,
|
||||
.el-calendar-table td.is-selected {
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
color: var(--prev-color-primary) !important;
|
||||
}
|
||||
.el-calendar {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-calendar__title {
|
||||
color: var(--prev-color-text-black);
|
||||
}
|
||||
.el-calendar__header,
|
||||
.el-calendar-table tr:first-child td,
|
||||
.el-calendar-table td,
|
||||
.el-calendar-table tr td:first-child {
|
||||
border-color: var(--prev-border-color-lighter);
|
||||
}
|
||||
.el-calendar-table thead th {
|
||||
color: var(--prev-color-text-regular);
|
||||
}
|
||||
.el-calendar-table:not(.is-range) td.next,
|
||||
.el-calendar-table:not(.is-range) td.prev {
|
||||
color: var(--prev-color-text-placeholder);
|
||||
}
|
||||
.el-calendar__button-group {
|
||||
.el-button {
|
||||
color: var(--prev-color-text-regular);
|
||||
background-color: var(--prev-bg-white);
|
||||
border-color: var(--prev-border-color-base);
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--prev-color-primary) !important;
|
||||
background: var(--prev-color-primary-light-8) !important;
|
||||
border-color: var(--prev-color-primary-light-6) !important;
|
||||
}
|
||||
&:active {
|
||||
color: var(--prev-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Backtop 回到顶部
|
||||
------------------------------- */
|
||||
.el-backtop {
|
||||
color: var(--prev-color-primary);
|
||||
&:hover {
|
||||
background-color: var(--prev-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
|
||||
/* scrollbar
|
||||
------------------------------- */
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden !important;
|
||||
max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
|
||||
}
|
||||
.el-select-dropdown .el-scrollbar__wrap {
|
||||
overflow-x: scroll !important;
|
||||
}
|
||||
|
||||
/* Drawer 抽屉
|
||||
------------------------------- */
|
||||
.el-drawer,
|
||||
.el-divider__text {
|
||||
background-color: var(--prev-bg-white);
|
||||
}
|
||||
.el-divider__text {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-drawer__close-btn:hover {
|
||||
color: var(--prev-color-primary);
|
||||
}
|
||||
.el-drawer__body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-drawer__header {
|
||||
padding: 0 15px !important;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: 1px solid var(--prev-border-color-lighter);
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
Reference in New Issue
Block a user