mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
206 lines
4.0 KiB
SCSS
206 lines
4.0 KiB
SCSS
$border-color: #12fbff;
|
|
$btn-confirm: #1c918a;
|
|
$btn-del: #d43030;
|
|
$btn-edit: #ff8d1a;
|
|
$bg1-color: #052f4d;
|
|
$bg2-color: #2169c31f;
|
|
$bg3-color: #00d2ff1f;
|
|
|
|
$text-color: #a6b8dd;
|
|
|
|
$green: #27a188;
|
|
$tab-border: #1489c0;
|
|
|
|
$table-border: #1c797a;
|
|
$table-bg: #072e4a;
|
|
$page-border: #cad2dd;
|
|
//级联器样式,下拉选择器样式输入框等。。。
|
|
.ant-switch {
|
|
background: #b1c4c4;
|
|
}
|
|
.ant-switch.ant-switch-checked {
|
|
background: #00fffb;
|
|
}
|
|
.ant-select .ant-select-arrow {
|
|
background: transparent !important;
|
|
}
|
|
.ant-select .ant-select-clear {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.ant-switch .ant-switch-handle::before {
|
|
background-color: #0a1b2f !important;
|
|
}
|
|
.ant-select,
|
|
.ant-cascader {
|
|
.ant-select-selector {
|
|
background: none !important;
|
|
border: 1px solid $border-color !important;
|
|
color: #fff;
|
|
}
|
|
.ant-select-arrow {
|
|
color: $border-color;
|
|
}
|
|
.ant-select-selection-placeholder {
|
|
color: #ffffff3b;
|
|
}
|
|
}
|
|
.ant-input,
|
|
.ant-input-affix-wrapper,
|
|
.ant-picker,
|
|
.ant-input-number {
|
|
background: none !important;
|
|
border: 1px solid $border-color !important;
|
|
color: #fff;
|
|
}
|
|
.ant-input::placeholder {
|
|
color: #ffffff3b !important;
|
|
}
|
|
:deep(.ant-picker) {
|
|
.ant-picker-input > input,
|
|
.ant-picker-separator {
|
|
color: #fff !important;
|
|
}
|
|
.ant-picker-input input::placeholder {
|
|
color: #ffffff3b !important;
|
|
}
|
|
.ant-picker-suffix {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
.ant-input-affix-wrapper {
|
|
.ant-input {
|
|
border: none !important;
|
|
}
|
|
}
|
|
.ant-radio-wrapper,
|
|
.ant-input-number .ant-input-number-input,
|
|
:deep(.ant-input-number-input),
|
|
:deep(.ant-select-selection-item) {
|
|
color: #fff;
|
|
}
|
|
//表单
|
|
.ant-form {
|
|
.ant-form-item-label > label {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
//按钮样式
|
|
// .ant-btn{
|
|
// padding: 4px 8px;
|
|
// }
|
|
.ant-btn-primary {
|
|
background: $btn-confirm;
|
|
&:hover {
|
|
background: $btn-confirm;
|
|
opacity: 0.8;
|
|
}
|
|
&:active {
|
|
background: #0f6f6a;
|
|
}
|
|
|
|
&:disabled {
|
|
border: none;
|
|
// color: #fff;
|
|
background: $btn-confirm;
|
|
}
|
|
}
|
|
.btn-del {
|
|
background: $btn-del;
|
|
&:hover {
|
|
background: $btn-del;
|
|
opacity: 0.8;
|
|
}
|
|
&:active {
|
|
background: $btn-del;
|
|
}
|
|
}
|
|
.btn-edit {
|
|
background: $btn-edit;
|
|
&:hover {
|
|
background: $btn-edit;
|
|
opacity: 0.8;
|
|
}
|
|
&:active {
|
|
background: $btn-edit;
|
|
}
|
|
}
|
|
//modal样式
|
|
// 删除弹框
|
|
.ant-modal-confirm-title {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.ant-modal .ant-modal-close {
|
|
color: #fff;
|
|
}
|
|
.ant-modal .ant-modal-content {
|
|
background-image: url('@/assets/images/modalBg.png');
|
|
background-size: 100% 100%;
|
|
background-color: rgb(6 25 42) !important;
|
|
border-radius: 0;
|
|
}
|
|
.ant-modal .ant-modal-footer {
|
|
text-align: center;
|
|
}
|
|
//表单中的表格样式
|
|
.ant-form {
|
|
.ant-table-thead {
|
|
background: rgba(30, 85, 95, 1) !important;
|
|
}
|
|
:deep(.ant-table-thead > tr > th) {
|
|
border-inline: 1px solid transparent !important;
|
|
background: transparent;
|
|
color: #fff !important;
|
|
border-bottom: none !important; /* 可选:去除底部边框 */
|
|
}
|
|
:deep(.ant-table-tbody) {
|
|
color: #fff;
|
|
background: $table-bg;
|
|
border: 1px solid $table-border !important;
|
|
border-radius: 0px 0px 20px 20px;
|
|
}
|
|
:deep(.ant-table-wrapper .ant-table-tbody > tr.ant-table-placeholder:hover > td) {
|
|
background: transparent !important;
|
|
}
|
|
:deep(.ant-empty-description) {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
// 添加统一布局的样式
|
|
.text_Cur {
|
|
border-bottom: 1px solid transparent;
|
|
border-top: 1px solid transparent;
|
|
border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
|
|
padding: 0px 15px;
|
|
font-size: 12px;
|
|
margin: 3px 0px;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
& > div:last-child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: end;
|
|
}
|
|
.mark {
|
|
font-size: 16px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 186, 173, 0.15) 0%,
|
|
rgba(61, 254, 250, 0.15) 49.2%,
|
|
rgba(61, 254, 250, 0) 100%
|
|
);
|
|
.d {
|
|
margin-left: 1px;
|
|
font-size: 12px;
|
|
}
|
|
}
|