You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1461 lines
34 KiB
1461 lines
34 KiB
// cover some element-ui styles |
|
|
|
.el-breadcrumb__inner, |
|
.el-breadcrumb__inner a { |
|
font-weight: 400 !important; |
|
color: #c6c6c6; |
|
} |
|
.el-breadcrumb__separator { |
|
color: #c6c6c6; |
|
} |
|
|
|
.el-upload { |
|
input[type="file"] { |
|
display: none !important; |
|
} |
|
} |
|
|
|
.el-upload__input { |
|
display: none; |
|
} |
|
|
|
.cell { |
|
.el-tag { |
|
margin-right: 0px; |
|
} |
|
} |
|
|
|
.small-padding { |
|
.cell { |
|
padding-left: 5px; |
|
padding-right: 5px; |
|
} |
|
} |
|
|
|
.fixed-width { |
|
.el-button--mini { |
|
padding: 7px 10px; |
|
width: 60px; |
|
} |
|
} |
|
|
|
.status-col { |
|
.cell { |
|
padding: 0 10px; |
|
text-align: center; |
|
|
|
.el-tag { |
|
margin-right: 0px; |
|
} |
|
} |
|
} |
|
|
|
// to fixed https://github.com/ElemeFE/element/issues/2461 |
|
.el-dialog { |
|
transform: none; |
|
left: 0; |
|
position: relative; |
|
margin: 0 auto; |
|
} |
|
|
|
// refine element ui upload |
|
.upload-container { |
|
.el-upload { |
|
width: 100%; |
|
|
|
.el-upload-dragger { |
|
width: 100%; |
|
height: 200px; |
|
} |
|
} |
|
} |
|
|
|
// dropdown |
|
.el-dropdown-menu { |
|
a { |
|
display: block; |
|
} |
|
} |
|
|
|
// fix date-picker ui bug in filter-item |
|
.el-range-editor.el-input__inner { |
|
display: inline-flex !important; |
|
} |
|
|
|
// to fix el-date-picker css style |
|
.el-range-separator { |
|
box-sizing: content-box; |
|
} |
|
|
|
.el-menu--collapse |
|
> div |
|
> .el-submenu |
|
> .el-submenu__title |
|
.el-submenu__icon-arrow { |
|
display: none; |
|
} |
|
// 面包屑 |
|
.el-breadcrumb__inner.is-link, |
|
.el-breadcrumb__inner a { |
|
color: #c6c6c6; |
|
} |
|
.el-breadcrumb__item:last-child .el-breadcrumb__inner, |
|
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, |
|
.el-breadcrumb__item:last-child .el-breadcrumb__inner a, |
|
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover { |
|
color: #00b4ff !important; |
|
} |
|
// el-select |
|
.el-form-item__label { |
|
line-height: 50px; |
|
color: #ffffff; |
|
} |
|
// el-input |
|
.el-input__inner { |
|
background: #003059; |
|
border: 1px solid #0163a8; |
|
color: #fff; |
|
box-shadow: inset 0 0 10px rgba(1, 99, 168, 0.5); /* 外部发光效果 */ |
|
} |
|
.el-input__inner::placeholder { |
|
color: #6b8aa3; |
|
} |
|
.el-input__inner:hover { |
|
border-color: #018fe8; |
|
} |
|
.el-input.is-active .el-input__inner, |
|
.el-input__inner:focus { |
|
border: solid 1px #018fe8; |
|
} |
|
.el-input.is-disabled .el-input__inner { |
|
border-color: #018fe8 !important; |
|
} |
|
|
|
.el-range-editor.is-active, |
|
.el-range-editor.is-active:hover, |
|
.el-select .el-input.is-focus .el-input__inner { |
|
border: solid 1px #018fe8; |
|
} |
|
|
|
.el-select .el-input__inner:focus { |
|
border: solid 1px #018fe8; |
|
} |
|
.el-select:hover .el-input__inner { |
|
border-color: #018fe8 !important; |
|
} |
|
// 日期 |
|
.el-date-editor .el-range-input { |
|
background-color: transparent; |
|
color: #fff; |
|
} |
|
.el-date-editor .el-range-separator { |
|
color: #fff; |
|
} |
|
.el-date-editor .el-range-input::placeholder { |
|
color: #6b8aa3; |
|
} |
|
//所有的按钮el-button都需要添加class名为xxx-btn的div包裹，xxx是按钮type |
|
// primary按钮 |
|
.primary-btn::before, |
|
.primary-btn::after, |
|
.el-button--primary::before, |
|
.el-button--primary::after { |
|
box-sizing: border-box; /* 关键属性 */ |
|
} |
|
.primary-btn { |
|
position: relative; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
display: inline-block; |
|
margin-right: 10px; |
|
} |
|
.primary-btn::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0px; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #05a6f9; |
|
border-right: 2px solid #05a6f9; |
|
z-index: 99 !important; |
|
} |
|
.primary-btn::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: 0; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #05a6f9; |
|
border-right: 2px solid #05a6f9; |
|
} |
|
.el-button--primary, |
|
.el-button--primary:focus { |
|
background-image: linear-gradient( |
|
0deg, |
|
rgba(25, 127, 194, 1) 0%, |
|
rgba(8, 55, 102, 1) 100% |
|
), |
|
linear-gradient(rgba(5, 217, 249, 1), rgba(5, 217, 249, 1)) !important; |
|
background-blend-mode: normal, normal; |
|
border-style: solid; |
|
border-width: 2px; |
|
border-image-source: linear-gradient( |
|
0deg, |
|
rgba(3, 199, 255, 1) 0%, |
|
rgba(10, 86, 150, 1) 100% |
|
); |
|
border-image-slice: 1; |
|
background-color: transparent !important; |
|
border-color: none !important; |
|
position: relative; |
|
} |
|
.el-button--primary:hover { |
|
background-image: linear-gradient( |
|
0deg, |
|
rgb(19, 153, 243) 0%, |
|
rgb(4, 56, 107) 100% |
|
), |
|
linear-gradient(rgba(5, 217, 249, 1), rgba(5, 217, 249, 1)) !important; |
|
border-image-source: linear-gradient( |
|
0deg, |
|
rgba(3, 199, 255, 1) 0%, |
|
rgba(10, 86, 150, 1) 100% |
|
); |
|
} |
|
.el-button--primary::before { |
|
content: ""; |
|
position: absolute; |
|
top: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #05a6f9; |
|
border-left: 2px solid #05a6f9; |
|
} |
|
.el-button--primary::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #05a6f9; |
|
border-left: 2px solid #05a6f9; |
|
} |
|
// success按钮 |
|
.success-btn { |
|
position: relative; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
display: inline-block; |
|
margin-right: 10px; |
|
} |
|
.success-btn::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0px; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #057ef9; |
|
border-right: 2px solid #057ef9; |
|
z-index: 99 !important; |
|
} |
|
.success-btn::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: 0; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #057ef9; |
|
border-right: 2px solid #057ef9; |
|
} |
|
.el-button--success, |
|
.el-button--success:focus { |
|
background-image: linear-gradient(0deg, #1961c2 0%, #083766 100%), |
|
linear-gradient(#05d9f9, #05d9f9) !important; |
|
background-blend-mode: normal, normal; |
|
border-style: solid; |
|
border-width: 2px; |
|
border-image-source: linear-gradient(0deg, #0397ff 0%, #0a4996 100%); |
|
border-image-slice: 1; |
|
background-color: transparent !important; |
|
border-color: none !important; |
|
position: relative; |
|
} |
|
.el-button--success:hover { |
|
background-image: linear-gradient(0deg, #477ec7 0%, #083766 100%), |
|
linear-gradient(#05d9f9, #05d9f9) !important; |
|
border-image-source: linear-gradient(0deg, #0b96fa 0%, #0e4e9b 100%); |
|
} |
|
.el-button--success::before { |
|
content: ""; |
|
position: absolute; |
|
top: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #057ef9; |
|
border-left: 2px solid #057ef9; |
|
} |
|
.el-button--success::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #057ef9; |
|
border-left: 2px solid #057ef9; |
|
} |
|
// info按钮 |
|
.info-btn::before, |
|
.info-btn::after, |
|
.el-button--info::before, |
|
.el-button--info::after { |
|
box-sizing: border-box; /* 关键属性 */ |
|
} |
|
.info-btn { |
|
position: relative; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
display: inline-block; |
|
margin-right: 10px; |
|
} |
|
.info-btn::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0px; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #05d4f9; |
|
border-right: 2px solid #05d4f9; |
|
z-index: 99 !important; |
|
} |
|
.info-btn::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: 0; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #05d4f9; |
|
border-right: 2px solid #05d4f9; |
|
} |
|
.el-button--info, |
|
.el-button--info:focus { |
|
background-image: linear-gradient(0deg, #19a0c2 0%, #05385b 100%), |
|
linear-gradient(#05d9f9, #05d9f9) !important; |
|
background-blend-mode: normal, normal; |
|
border-style: solid; |
|
border-width: 2px; |
|
border-image-source: linear-gradient(0deg, #03cdff 0%, #085c87 100%); |
|
border-image-slice: 1; |
|
background-color: transparent !important; |
|
border-color: none !important; |
|
position: relative; |
|
} |
|
.el-button--info:hover { |
|
background-image: linear-gradient(0deg, #2daac9 0%, #084874 100%), |
|
linear-gradient(#05d9f9, #05d9f9) !important; |
|
border-image-source: linear-gradient(0deg, #03cdff 0%, #085c87 100%); |
|
} |
|
.el-button--info::before { |
|
content: ""; |
|
position: absolute; |
|
top: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #05d4f9; |
|
border-left: 2px solid #05d4f9; |
|
} |
|
.el-button--info::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #05d4f9; |
|
border-left: 2px solid #05d4f9; |
|
} |
|
// warning按钮 |
|
.warning-btn::before, |
|
.warning-btn::after, |
|
.el-button--warning::before, |
|
.el-button--warning::after { |
|
box-sizing: border-box; /* 关键属性 */ |
|
} |
|
.warning-btn { |
|
position: relative; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
display: inline-block; |
|
margin-right: 10px; |
|
} |
|
.warning-btn::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0px; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #f98705; |
|
border-right: 2px solid #f98705; |
|
z-index: 99 !important; |
|
} |
|
.warning-btn::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: 0; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #f98705; |
|
border-right: 2px solid #f98705; |
|
} |
|
.el-button--warning, |
|
.el-button--warning:focus { |
|
background-image: linear-gradient(0deg, #fd813a 0%, #af5704 100%), |
|
linear-gradient(#ffb46d, #ffb46d) !important; |
|
background-blend-mode: normal, normal; |
|
border-style: solid; |
|
border-width: 2px; |
|
border-image-source: linear-gradient(0deg, #ff7403 0%, #af5704 100%); |
|
border-image-slice: 1; |
|
background-color: transparent !important; |
|
border-color: none !important; |
|
position: relative; |
|
} |
|
.el-button--warning:hover { |
|
background-image: linear-gradient(0deg, #f7911e 0%, #bd620d 100%), |
|
linear-gradient(#faa453, #faa453) !important; |
|
border-image-source: linear-gradient(0deg, #f7911e 0%, #bd620d 100%); |
|
} |
|
.el-button--warning::before { |
|
content: ""; |
|
position: absolute; |
|
top: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #dd6808; |
|
border-left: 2px solid #dd6808; |
|
} |
|
.el-button--warning::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #dd6808; |
|
border-left: 2px solid #dd6808; |
|
} |
|
// delete按钮 |
|
.delete-btn::before, |
|
.delete-btn::after, |
|
.el-button--delete::before, |
|
.el-button--delete::after { |
|
box-sizing: border-box; /* 关键属性 */ |
|
} |
|
.delete-btn { |
|
position: relative; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
display: inline-block; |
|
margin-right: 10px; |
|
} |
|
.delete-btn::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0px; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #f76e45; |
|
border-right: 2px solid #f76e45; |
|
z-index: 99 !important; |
|
} |
|
.delete-btn::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: 0; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #f76e45; |
|
border-right: 2px solid #f76e45; |
|
} |
|
.el-button--delete, |
|
.el-button--delete:focus { |
|
color: #ffffff; |
|
background-image: linear-gradient( |
|
0deg, |
|
rgb(194, 87, 25) 0%, |
|
rgb(102, 11, 8) 100% |
|
), |
|
linear-gradient(rgb(248, 86, 22), rgba(248, 86, 22, 1)) !important; |
|
background-blend-mode: normal, normal; |
|
border-style: solid; |
|
border-width: 2px; |
|
border-image-source: linear-gradient( |
|
0deg, |
|
rgb(241, 75, 9) 0%, |
|
rgb(150, 43, 10) 100% |
|
); |
|
border-image-slice: 1; |
|
background-color: transparent !important; |
|
border-color: none !important; |
|
position: relative; |
|
} |
|
.el-button--delete:hover { |
|
color: #ffffff; |
|
background-image: linear-gradient( |
|
0deg, |
|
rgb(243, 64, 19) 0%, |
|
rgb(107, 16, 4) 100% |
|
), |
|
linear-gradient(rgb(249, 94, 5), rgba(249, 94, 5, 1)) !important; |
|
border-image-source: linear-gradient( |
|
0deg, |
|
rgb(255, 95, 3) 0%, |
|
rgb(150, 43, 10) 100% |
|
); |
|
} |
|
.el-button--delete::before { |
|
content: ""; |
|
position: absolute; |
|
top: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #f92a05; |
|
border-left: 2px solid #f92a05; |
|
} |
|
.el-button--delete::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #f92a05; |
|
border-left: 2px solid #f92a05; |
|
} |
|
// cancel按钮 |
|
.cancel-btn::before, |
|
.cancel-btn::after, |
|
.el-button--cancel::before, |
|
.el-button--cancel::after { |
|
box-sizing: border-box; /* 关键属性 */ |
|
} |
|
.cancel-btn { |
|
position: relative; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
display: inline-block; |
|
margin-right: 10px; |
|
} |
|
.cancel-btn::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0px; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #8092a1; |
|
border-right: 2px solid #8092a1; |
|
z-index: 99 !important; |
|
} |
|
.cancel-btn::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: 0; |
|
right: 0; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #8092a1; |
|
border-right: 2px solid #8092a1; |
|
} |
|
.el-button--cancel, |
|
.el-button--cancel:focus { |
|
color: #ffffff; |
|
background-image: linear-gradient( |
|
0deg, |
|
rgba(49, 86, 111, 1) 0%, |
|
rgba(8, 55, 102, 1) 100% |
|
), |
|
linear-gradient(rgba(5, 217, 249, 1), rgba(5, 217, 249, 1)) !important; |
|
background-blend-mode: normal, normal; |
|
border-style: solid; |
|
border-width: 2px; |
|
border-image-source: linear-gradient( |
|
0deg, |
|
rgba(145, 161, 171, 1) 0%, |
|
rgba(84, 98, 110, 1) 100% |
|
); |
|
border-image-slice: 1; |
|
background-color: transparent !important; |
|
border-color: none !important; |
|
position: relative; |
|
} |
|
.el-button--cancel:hover { |
|
color: #ffffff; |
|
background-image: linear-gradient( |
|
0deg, |
|
rgb(135, 167, 187) 0%, |
|
rgb(19, 68, 117) 100% |
|
), |
|
linear-gradient(rgba(5, 217, 249, 1), rgba(5, 217, 249, 1)) !important; |
|
border-image-source: linear-gradient( |
|
0deg, |
|
rgb(154, 164, 170) 0%, |
|
rgb(84, 102, 117) 100% |
|
); |
|
} |
|
.el-button--cancel::before { |
|
content: ""; |
|
position: absolute; |
|
top: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-top: 2px solid #8092a1; |
|
border-left: 2px solid #8092a1; |
|
} |
|
.el-button--cancel::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: -2px; |
|
left: -2px; |
|
width: 5px; |
|
height: 5px; |
|
border-bottom: 2px solid #8092a1; |
|
border-left: 2px solid #8092a1; |
|
} |
|
/* 下拉select默认样式 |
|
注意：此时一定要在 <el-select> 里添加 :popper-append-to-body="false" 属性； |
|
// 若未加入 :popper-append-to-body="false" 属性，那么此时渲染后的 DOM 元素不在 #app 元素内部； |
|
// 原因: el-select 里面的 select-popper 元素渲染后会脱离 #app ,因此使用深度选择器也无法定位该元素; */ |
|
|
|
/* .el-select-dropdown__wrap.el-scrollbar__wrap { |
|
margin-bottom: 0 !important; |
|
} */ |
|
.el-select-dropdown .el-scrollbar .el-scrollbar__wrap { |
|
overflow: scroll !important; |
|
} |
|
|
|
/* // 设置下拉框的背景颜色及边框属性； */ |
|
.el-select-dropdown { |
|
/* // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果； |
|
// 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示； */ |
|
background-color: transparent; |
|
border: 0; |
|
} |
|
.el-select-dropdown { |
|
border: 1px solid #00477d; |
|
background-color: #00477d; |
|
} |
|
.el-select-dropdown__item { |
|
color: #a4b2af; |
|
} |
|
.el-select-dropdown__item.selected { |
|
background-color: #00b4ff; |
|
color: #ffffff; |
|
} |
|
.el-select-dropdown__item.hover { |
|
background-color: #00b4ff; |
|
color: #ffffff; |
|
} |
|
|
|
.el-select-dropdown__empty { |
|
background-color: #00477d; |
|
} |
|
|
|
.el-popper[x-placement^="top"] { |
|
margin-top: 10px; |
|
} |
|
/* 下拉框小三角形颜色 */ |
|
.el-popper[x-placement^="top"] .popper__arrow::after { |
|
border-top-color: #00477d; |
|
} |
|
|
|
.el-popper[x-placement^="top"] .popper__arrow { |
|
border-top-color: #00477d; |
|
} |
|
|
|
.el-popper[x-placement^="bottom"] .popper__arrow::after { |
|
border-bottom-color: #00477d; |
|
} |
|
|
|
.el-popper[x-placement^="bottom"] .popper__arrow { |
|
border-bottom-color: #00477d; |
|
} |
|
// 解决下拉框会有白边的情况 |
|
.el-select-dropdown__wrap, |
|
.el-scrollbar__wrap { |
|
margin-bottom: -10px !important; |
|
margin-right: -10px !important; |
|
} |
|
|
|
// 时间 |
|
.el-picker-panel { |
|
background-color: #00477d; |
|
color: #fff; |
|
border: 1px solid #00477d; |
|
} |
|
.el-date-table th, |
|
.el-picker-panel__icon-btn, |
|
.el-date-picker__header-label { |
|
color: #fff; |
|
} |
|
.el-date-table td.today span, |
|
.el-date-table td.available:hover, |
|
.el-picker-panel__icon-btn:hover { |
|
color: #00b4ff; |
|
} |
|
.el-date-table td.current:not(.disabled) span { |
|
background-color: #00b4ff; |
|
} |
|
.el-date-table th { |
|
border-bottom: 1px solid #949597; |
|
} |
|
.el-date-table td.next-month, |
|
.el-date-table td.prev-month { |
|
color: #989a9e; |
|
} |
|
.el-picker-panel *[slot="sidebar"], |
|
.el-picker-panel__sidebar { |
|
background-color: transparent !important; |
|
color: #ffffff !important; |
|
border-right: 1px solid #949597; |
|
} |
|
.el-date-range-picker__content.is-left { |
|
border-right: 1px solid #949597; |
|
} |
|
.el-picker-panel__shortcut { |
|
color: #ffffff !important; |
|
} |
|
.el-date-table td.in-range div { |
|
background-color: #49789c; |
|
} |
|
.el-date-table td.in-range div:hover { |
|
background-color: #335977; |
|
} |
|
.el-month-table td .cell, |
|
.el-year-table td .cell { |
|
color: #ffffff; |
|
} |
|
.el-date-picker__header--bordered { |
|
border-bottom: 1px solid #949597; |
|
} |
|
.el-picker-panel__footer { |
|
background-color: #00477d; |
|
border-top: 1px solid #949597; |
|
} |
|
.el-button.is-disabled.is-plain, |
|
.el-button.is-disabled.is-plain:hover, |
|
.el-button.is-disabled.is-plain:focus, |
|
.el-picker-panel__footer .el-button:nth-child(2) { |
|
border-color: none !important; |
|
color: #ffffff !important; |
|
background-image: linear-gradient(0deg, #197fc2 0%, #083766 100%), |
|
linear-gradient(#05d9f9, #05d9f9); |
|
background-blend-mode: normal, normal; |
|
border-style: solid; |
|
border-width: 2px; |
|
border-image-source: linear-gradient(0deg, #03c7ff 0%, #0a5696 100%); |
|
border-image-slice: 1; |
|
background-color: transparent !important; |
|
} |
|
.el-input.is-disabled .el-input__inner { |
|
background-color: transparent !important; |
|
color: #ffffff !important; |
|
} |
|
.el-date-range-picker__time-header > .el-icon-arrow-right { |
|
color: #c6c6c6 !important; |
|
} |
|
.el-date-range-picker__time-header { |
|
border-bottom: 1px solid #949597; |
|
} |
|
.el-time-panel { |
|
background-color: #043961; |
|
border: solid 1px #043961; |
|
} |
|
.el-time-spinner__item.active:not(.disabled) { |
|
color: #ffffff; |
|
} |
|
.el-time-spinner__item { |
|
color: #989a9e; |
|
} |
|
.el-time-panel__footer .cancel { |
|
color: #ffffff; |
|
} |
|
.el-time-spinner__item:hover:not(.disabled):not(.active) { |
|
background: #197fc2 !important; |
|
color: #ffffff !important; |
|
} |
|
.el-month-table td.in-range div:hover, |
|
.el-month-table td.in-range div { |
|
background-color: #49789c; |
|
} |
|
// 表格 |
|
.el-table th.el-table__cell.is-leaf, |
|
.el-table td.el-table__cell { |
|
border-bottom: 1px solid #00264f !important; |
|
} |
|
.el-table tr { |
|
background-color: rgba(0, 71, 125, 0.2); |
|
} |
|
.el-table .el-table__header-wrapper th, |
|
.el-table .el-table__fixed-header-wrapper th { |
|
background-color: #00477d !important; |
|
color: #b5dfff !important; |
|
} |
|
.el-table { |
|
color: #ffffff; |
|
background-color: transparent !important; |
|
} |
|
// 斑马线 |
|
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { |
|
background-color: rgba(0, 71, 125, 0.4); |
|
} |
|
.el-table::before, |
|
.el-table--group::after, |
|
.el-table--border::after { |
|
background-color: transparent !important; |
|
} |
|
// hover |
|
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { |
|
background-color: rgba(0, 71, 125, 0.4); |
|
} |
|
.el-table .cell { |
|
text-align: center; |
|
} |
|
.el-table__body tr.hover-row > td.el-table__cell { |
|
background-color: rgba(0, 71, 125, 0.4) !important; |
|
} |
|
.el-table__fixed::before, |
|
.el-table__fixed-right::before { |
|
display: none; |
|
} |
|
.el-table__fixed-right-patch { |
|
border-bottom: 1px solid #00477d !important; |
|
background-color: #00477d !important; |
|
} |
|
.el-table__fixed, |
|
.el-table__fixed-right { |
|
background-color: transparent !important; |
|
} |
|
// el-table垂直水平滚动条右下角交汇处背景颜色 = 滚动条背景颜色 |
|
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-corner { |
|
background-color: #002249 !important; |
|
} |
|
|
|
.el-table__header-wrapper tbody td.el-table__cell, |
|
.el-table__footer-wrapper tbody td.el-table__cell { |
|
background-color: #00477d !important; |
|
color: #ffffff !important; |
|
} |
|
.el-table .el-table__cell.gutter { |
|
background-color: #00477d !important; |
|
} |
|
.el-table__footer-wrapper td.el-table__cell { |
|
border-top: 1px solid #00477d !important; |
|
} |
|
// el-tree |
|
.el-tree { |
|
background: transparent !important; |
|
color: #ffffff; |
|
} |
|
.el-tree-node__content:hover, |
|
.el-upload-list__item:hover, |
|
.el-tree-node:focus > .el-tree-node__content { |
|
background-color: transparent !important; |
|
} |
|
.el-checkbox__inner { |
|
border: 1px solid #057ccf !important; |
|
background-color: transparent !important; |
|
} |
|
.el-checkbox__input.is-checked .el-checkbox__inner { |
|
background-color: #057ccf !important; |
|
} |
|
.el-tree-node__expand-icon { |
|
color: #ffffff; |
|
} |
|
// 分页 |
|
.el-pagination__total, |
|
.el-pagination__jump { |
|
color: #a4b2af; |
|
} |
|
.el-pagination button:disabled, |
|
.el-pagination .btn-prev, |
|
.el-pagination .btn-next { |
|
background-color: #00366b; |
|
color: #ffffff; |
|
} |
|
.el-pager li { |
|
background-color: #00366b; |
|
color: #ffffff; |
|
} |
|
.el-pager li.btn-quicknext, |
|
.el-pager li.btn-quickprev { |
|
color: #ffffff; |
|
} |
|
// tabs |
|
.el-tabs__item { |
|
height: 48px; |
|
background-image: linear-gradient(180deg, #527491 0%, #375c7b 100%), |
|
linear-gradient(#0882ff, #0882ff); |
|
background-blend-mode: normal, normal; |
|
border-radius: 6px 6px 0px 0px; |
|
line-height: 48px; |
|
text-align: center; |
|
font-family: SourceHanSansCN-Regular; |
|
font-size: 18px; |
|
color: #c3cbd4; |
|
margin-right: 6px; |
|
} |
|
.el-tabs__item.is-active { |
|
height: 48px; |
|
background-image: linear-gradient(0deg, #0077cb 0%, #11a8ff 100%), |
|
linear-gradient(#0882ff, #0882ff); |
|
background-blend-mode: normal, normal; |
|
border-radius: 6px 6px 0px 0px; |
|
font-family: SourceHanSansCN-Regular; |
|
font-size: 18px; |
|
line-height: 48px; |
|
color: #ffffff; |
|
text-align: center; |
|
} |
|
.el-tabs--top .el-tabs__item.is-top:nth-child(2), |
|
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2), |
|
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2), |
|
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) { |
|
padding-left: 20px !important; |
|
} |
|
.el-tabs--top .el-tabs__item.is-top:last-child, |
|
.el-tabs--top .el-tabs__item.is-bottom:last-child, |
|
.el-tabs--bottom .el-tabs__item.is-top:last-child, |
|
.el-tabs--bottom .el-tabs__item.is-bottom:last-child { |
|
padding-right: 20px !important; |
|
} |
|
.el-tabs__active-bar { |
|
display: none !important; |
|
} |
|
.el-tabs__nav-wrap::after { |
|
background-color: #00386d; |
|
} |
|
|
|
.el-dropdown-menu { |
|
background-color: #00477d !important; |
|
border: 1px solid #00477d; |
|
} |
|
.el-dropdown-menu__item { |
|
color: #ffffff !important; |
|
} |
|
.el-dropdown-menu__item--divided:before { |
|
height: 0 !important; |
|
} |
|
.el-dropdown-menu__item--divided { |
|
border-top: 1px solid #adaeaf; |
|
} |
|
.el-dropdown-menu__item:not(.is-disabled):hover, |
|
.el-dropdown-menu__item:focus { |
|
background-color: #057ccf; |
|
color: #ffffff; |
|
} |
|
.el-icon-caret-bottom { |
|
color: #c6c6c6 !important; |
|
} |
|
// 滚动条 |
|
|
|
::-webkit-scrollbar { |
|
width: 10px !important; |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
background: #002249 !important; |
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
width: 10px; |
|
background-color: rgb(21, 50, 104) !important; |
|
border-radius: 10px !important; |
|
} |
|
::-webkit-scrollbar-thumb:hover { |
|
background: rgb(38, 75, 143) !important; |
|
} |
|
.el-loading-mask { |
|
background-color: rgba(21, 53, 90, 0.5); |
|
} |
|
|
|
// 弹框 |
|
.el-dialog { |
|
background: linear-gradient( |
|
0deg, |
|
rgba(0, 58, 112, 0.9), |
|
rgba(0, 42, 81, 0.9) |
|
) !important; |
|
border-radius: 10px; |
|
border: 2px solid #005fbf; |
|
} |
|
.el-dialog__header { |
|
display: flex !important; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.el-dialog__title { |
|
text-align: center; |
|
width: 284px; |
|
height: 45px; |
|
background-image: url(../images/popup_img_title.png); |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; |
|
display: flex !important; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
font-family: SourceHanSansCN-Bold; |
|
font-size: 20px; |
|
line-height: 25px; |
|
color: #ffffff; |
|
} |
|
.el-dialog__headerbtn { |
|
top: 32px !important; |
|
} |
|
.el-dialog__headerbtn .el-dialog__close { |
|
font-size: 25px !important; |
|
color: #ffffff !important; |
|
} |
|
.el-dialog__headerbtn:focus .el-dialog__close, |
|
.el-dialog__headerbtn:hover .el-dialog__close { |
|
color: #018fe8 !important; |
|
} |
|
.dialog-footer .el-button:nth-child(1) { |
|
background-image: linear-gradient(0deg, #31566f 0%, #083766 100%), |
|
linear-gradient(#05d9f9, #05d9f9) !important; |
|
background-blend-mode: normal, normal; |
|
border-style: solid; |
|
border-width: 2px; |
|
border-image-source: linear-gradient(0deg, #91a1ab 0%, #54626e 100%); |
|
border-image-slice: 1; |
|
color: #ffffff; |
|
} |
|
.dialog-footer .el-button:nth-child(1):hover, |
|
.dialog-footer .el-button:nth-child(1):focus, |
|
.dialog-footer .el-button:nth-child(1):active { |
|
background-image: linear-gradient(0deg, #436c88 0%, #123f6d 100%), |
|
linear-gradient(#06c0dd, #06c0dd) !important; |
|
border-image-source: linear-gradient(0deg, #a5b7c2 0%, #687988 100%); |
|
} |
|
.dialog-footer .el-button:nth-child(1)::before, |
|
.dialog-footer .el-button:nth-child(2)::before, |
|
.dialog-footer .el-button:nth-child(1)::after, |
|
.dialog-footer .el-button:nth-child(2)::after { |
|
display: none !important; |
|
} |
|
.el-message-box { |
|
background: linear-gradient( |
|
0deg, |
|
rgb(7, 74, 136), |
|
rgb(12, 50, 87) |
|
) !important; |
|
border-radius: 5px; |
|
border: 2px solid #005fbf; |
|
} |
|
.el-message-box__title { |
|
color: #ffffff; |
|
} |
|
.el-message-box__message { |
|
color: #cecece !important; |
|
} |
|
.el-message-box__headerbtn:focus .el-message-box__close, |
|
.el-message-box__headerbtn:hover .el-message-box__close { |
|
color: #018fe8 !important; |
|
} |
|
.el-message-box__headerbtn .el-message-box__close { |
|
color: #ffffff !important; |
|
} |
|
.el-message-box__btns .el-button:nth-child(1)::before, |
|
.el-message-box__btns .el-button:nth-child(2)::before, |
|
.el-message-box__btns .el-button:nth-child(1)::after, |
|
.el-message-box__btns .el-button:nth-child(2)::after { |
|
display: none !important; |
|
} |
|
.el-message-box__btns .el-button:nth-child(1) { |
|
background-image: linear-gradient(0deg, #31566f 0%, #083766 100%), |
|
linear-gradient(#05d9f9, #05d9f9); |
|
background-blend-mode: normal, normal; |
|
border-style: solid; |
|
border-width: 2px; |
|
border-image-source: linear-gradient(0deg, #91a1ab 0%, #54626e 100%); |
|
border-image-slice: 1; |
|
color: #ffffff; |
|
} |
|
.el-message-box__btns .el-button:nth-child(1):hover, |
|
.el-message-box__btns .el-button:nth-child(1):focus, |
|
.el-message-box__btns .el-button:nth-child(1):active { |
|
background-image: linear-gradient(0deg, #436c88 0%, #123f6d 100%), |
|
linear-gradient(#06c0dd, #06c0dd); |
|
border-image-source: linear-gradient(0deg, #a5b7c2 0%, #687988 100%); |
|
} |
|
.el-checkbox { |
|
color: #ffffff; |
|
} |
|
/* 修改消息框的背景颜色 */ |
|
.el-message { |
|
background-image: linear-gradient( |
|
0deg, |
|
rgba(0, 58, 112, 0.9) 0%, |
|
rgba(0, 50, 97, 0.9) 35%, |
|
rgba(0, 42, 81, 0.9) 100% |
|
), |
|
linear-gradient(#053766, #053766); |
|
border-radius: 10px; |
|
border: solid 2px #005fbf; |
|
top: 5% !important; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding: 10px !important; |
|
} |
|
|
|
/* 修改消息文本颜色 */ |
|
.el-message__content { |
|
font-family: SourceHanSansCN-Bold; |
|
font-size: 20px; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
line-height: 22px; |
|
letter-spacing: 0px; |
|
color: #ffffff !important; |
|
} |
|
|
|
/* 修改成功消息的图标 */ |
|
.el-message .el-icon-success { |
|
content: ""; /* 自定义图标，替换为实际图标路径 */ |
|
background-image: url(../images/popup_img_suss.png); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
display: inline-block; |
|
width: 50px; |
|
height: 50px; |
|
margin-right: 0px !important; |
|
margin-bottom: 10px; |
|
vertical-align: middle; |
|
} |
|
.el-icon-success:before, |
|
.el-icon-error:before, |
|
.el-icon-warning::before { |
|
content: none !important; |
|
} |
|
.el-message__closeBtn { |
|
top: 25px; |
|
color: #ffffff; |
|
font-size: 20px; |
|
} |
|
.el-message .el-icon-error { |
|
content: ""; /* 自定义图标，替换为实际图标路径 */ |
|
background-image: url(../images/popup_img_shibai.png); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
display: inline-block; |
|
width: 50px; |
|
height: 50px; |
|
margin-right: 0px !important; |
|
margin-bottom: 10px; |
|
vertical-align: middle; |
|
} |
|
.el-message .el-icon-warning { |
|
content: ""; /* 自定义图标，替换为实际图标路径 */ |
|
background-image: url(../images/popup_img_jinggao.png); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
display: inline-block; |
|
width: 50px; |
|
height: 50px; |
|
margin-right: 0px !important; |
|
margin-bottom: 10px; |
|
vertical-align: middle; |
|
} |
|
.el-upload-list__item-name { |
|
color: #ffffff; |
|
} |
|
.el-cascader__dropdown { |
|
background: #00477d !important; |
|
border: 1px solid #00477d; |
|
color: #a4b2af !important; |
|
} |
|
.el-cascader-node__label { |
|
// color: #a4b2af; |
|
} |
|
.el-cascader-node:not(.is-disabled):hover, |
|
.el-cascader-node:not(.is-disabled):focus, |
|
.el-cascader-node:not(.is-disabled):hover, |
|
.el-cascader-node:not(.is-disabled):focus { |
|
background-color: #00b4ff !important; |
|
color: #ffffff !important; |
|
} |
|
.el-cascader-node { |
|
color: #a4b2af !important; |
|
} |
|
.el-cascader-node.in-active-path, |
|
.el-cascader-node.is-selectable.in-checked-path, |
|
.el-cascader-node.is-active { |
|
color: #00b4ff !important; |
|
} |
|
.el-cascader-menu { |
|
border-right: 1px solid #949597; |
|
} |
|
.el-card { |
|
background-image: linear-gradient( |
|
0deg, |
|
rgba(0, 58, 112, 0.9) 0%, |
|
rgba(0, 50, 97, 0.9) 35%, |
|
rgba(0, 42, 81, 0.9) 100% |
|
), |
|
linear-gradient(#053766, #053766); |
|
background-blend-mode: normal, normal; |
|
border-radius: 10px; |
|
border: solid 2px #005fbf; |
|
color: #ffffff; |
|
} |
|
.el-card__header { |
|
border-bottom: 1px solid #7f92b8; |
|
} |
|
.splitpanes.default-theme .splitpanes__splitter { |
|
background-color: rgba(83, 190, 252, 0.1) !important; |
|
} |
|
.default-theme.splitpanes--vertical > .splitpanes__splitter, |
|
.default-theme .splitpanes--vertical > .splitpanes__splitter { |
|
border-left: 1px solid #555d66 !important; |
|
} |
|
.splitpanes.default-theme .splitpanes__splitter:before, |
|
.splitpanes.default-theme .splitpanes__splitter:after { |
|
background-color: #002249 !important; |
|
} |
|
.splitpanes.default-theme .splitpanes__splitter:hover:before, |
|
.splitpanes.default-theme .splitpanes__splitter:hover:after { |
|
background-color: #000000 !important; |
|
} |
|
.vue-treeselect__control { |
|
// background: transparent !important; |
|
background: #003059 !important; |
|
border: 1px solid #0163a8 !important; |
|
box-shadow: inset 0 0 10px rgba(1, 99, 168, 0.5); /* 外部发光效果 */ |
|
} |
|
|
|
.vue-treeselect__menu { |
|
border: 1px solid #00477d !important; |
|
color: #fff !important; |
|
} |
|
.vue-treeselect--open-below .vue-treeselect__menu { |
|
border-top-color: #00477d; |
|
color: #fff !important; |
|
background-color: #00477d !important; |
|
} |
|
.vue-treeselect__menu { |
|
border: 1px solid #00477d !important; |
|
background: transparent; |
|
} |
|
.vue-treeselect--single .vue-treeselect__option--selected:hover { |
|
background-color: #00b4ff !important; |
|
} |
|
.vue-treeselect--single .vue-treeselect__option--selected { |
|
background-color: #00b4ff !important; |
|
|
|
font-weight: 600; |
|
} |
|
.vue-treeselect__option--highlight { |
|
background: #00b4ff !important; |
|
} |
|
.vue-treeselect div, |
|
.vue-treeselect span { |
|
color: #ffffff !important; |
|
} |
|
.el-tag.el-tag--info { |
|
background-color: #54718b; |
|
border-color: #54718b; |
|
color: #ffffff !important; |
|
} |
|
.el-textarea__inner { |
|
background-color: #003059 !important; |
|
border: 1px solid #0163a8 !important; |
|
box-shadow: inset 0 0 10px rgba(1, 99, 168, 0.5); /* 外部发光效果 */ |
|
color: #ffffff !important; |
|
} |
|
.el-textarea__inner::placeholder { |
|
color: #6b8aa3 !important; |
|
} |
|
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected { |
|
background-color: #00b4ff !important; |
|
color: #ffffff !important; |
|
} |
|
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected { |
|
color: #ffffff; |
|
} |
|
.el-radio { |
|
color: #ffffff !important; |
|
} |
|
.tree-border { |
|
border: 1px solid #0163a8 !important; |
|
box-shadow: inset 0 0 10px rgba(1, 99, 168, 0.5); /* 外部发光效果 */ |
|
} |
|
.el-input-number__increase, |
|
.el-input-number__decrease { |
|
background: #b0ccdc; |
|
} |
|
.el-table .el-dropdown, |
|
.el-icon-arrow-down { |
|
color: #606266; |
|
} |
|
.ql-editor p, |
|
.ql-editor ol, |
|
.ql-editor pre, |
|
.ql-editor blockquote, |
|
.ql-editor h1, |
|
.ql-editor h2, |
|
.ql-editor h3, |
|
.ql-editor h4, |
|
.ql-editor h5, |
|
.ql-editor h6 { |
|
color: #ffffff !important; |
|
} |
|
.ql-snow.ql-toolbar button svg, |
|
.ql-snow .ql-toolbar button svg { |
|
color: #ffffff !important; |
|
} |
|
.el-dialog__body { |
|
color: #ffffff; |
|
} |
|
.el-upload-list__item-actions { |
|
border: solid 1px #0163a8 !important; |
|
} |
|
.el-upload--picture-card { |
|
background-color: transparent !important; |
|
border: 1px dashed #0163a8 !important; |
|
} |
|
.el-switch__label { |
|
color: #d1cfcf; |
|
} |
|
.el-switch__core { |
|
border: 1px solid #ff4949; |
|
background: #ff4949; |
|
} |
|
.el-table__body tr.current-row > td.el-table__cell, |
|
.el-table__body tr.selection-row > td.el-table__cell { |
|
background-color: rgba(0, 71, 125, 0.4) !important; |
|
} |
|
.el-loading-mask { |
|
min-height: 800px; |
|
} |
|
.el-loading-spinner { |
|
min-height: 800px; |
|
display: flex; |
|
top: 0 !important; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.el-input__suffix { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.el-tabs--border-card { |
|
background: transparent; |
|
border: 1px solid #0e5191 !important; |
|
} |
|
.el-tabs--border-card > .el-tabs__header { |
|
background-color: transparent; |
|
border-bottom: 1px solid #00386d; |
|
} |
|
.popup-main { |
|
background: transparent !important; |
|
} |
|
.popup-result { |
|
border: 1px solid #0e5191 !important; |
|
} |
|
.popup-result table span { |
|
border: 1px solid #0e5191 !important; |
|
} |
|
.popup-result .title { |
|
background: #405e7e !important; |
|
} |
|
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { |
|
color: #fff !important; |
|
border-right-color: transparent; |
|
border-left-color: transparent; |
|
} |
|
.el-tabs--border-card > .el-tabs__header .el-tabs__item { |
|
color: #c3cbd4; |
|
} |
|
.drawing-item:hover > .el-form-item, |
|
.drawing-row-item:hover > .el-form-item { |
|
background: #b6b6b6 !important; |
|
} |
|
.el-cascader__suggestion-list { |
|
color: #a4b2af; |
|
} |
|
.el-cascader__suggestion-item:hover, |
|
.el-cascader__suggestion-item:focus { |
|
background-color: #00b4ff; |
|
color: #ffffff; |
|
} |
|
.el-cascader__search-input { |
|
background: transparent !important; |
|
color: #a4b2af; |
|
margin-left: 10px !important; |
|
min-width: 50px !important; |
|
z-index: 0; |
|
} |
|
.el-input__suffix{ |
|
z-index: 10; |
|
} |
|
.el-cascader__tags { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
flex-wrap: nowrap; |
|
} |
|
.el-table--group, |
|
.el-table--border { |
|
border: 1px solid #00264f !important; |
|
} |
|
.el-table--border .el-table__cell { |
|
border-right: 1px solid #00264f !important; |
|
} |
|
.el-table--border th.el-table__cell { |
|
border-bottom: 1px solid #00264f !important; |
|
} |
|
.el-table__expand-icon{ |
|
color: #fff !important; |
|
} |
|
.el-tag { |
|
font-weight: bold !important; |
|
} |
|
.el-tag.el-tag--success{ |
|
font-weight: bold !important; |
|
color: #03a249 !important; |
|
} |