|
|
.head-container { // padding: 20px;
.filter-item { // display: inline-block;
vertical-align: middle; margin-right: 10px; input { @include input_style; background-color: transparent; height: 30px; line-height: 30px; } .iconfont{ line-height: 30px; } } .el-select__caret.el-input__icon.el-icon-arrow-up{ line-height: 30px; } .date-item { display: inline-block; vertical-align: middle; @include bg_color; @include input_style; margin-right: 10px; height: 30px !important; width: 230px !important; } }
.el-tabs{ margin-bottom: 25px; }
// xu
// 四角边线
// 有左右分区时
.container-main{ display: flex; justify-content: space-between; margin-left: 0 !important; margin-right: 0 !important; } .container-left{ // margin-right: 20px;
// @include box_padding;
} .container-left, .container-right, .container-wrap, .el-card, .header-container-wrap{ position: relative; min-height: 100%; @include user_cont; min-height: calc(100vh - 190px); &::before, &::after{ content: ""; position: absolute; width: 17px; height: 17px; z-index: 99; } &::before{ top: -1px; left: -1px; @include before_line_color; } &::after{ right: -1px; bottom: -1px; @include after_line_color; } }
.el-card, .container-left{ background-color: transparent; min-height: auto; border-radius: 0; overflow: visible; .el-card__header{ background-color: #02255F; border-bottom: none; .role-span{ color: #fff; } } .el-card__body{ padding: 0; .head-container{ padding: 0; } } .crud-opts{ justify-content: center; padding: 20px 0 !important; border-bottom: 1px solid #113D72; } .el-tree{ margin: 20px 0; } }
// xu el-button
.head-search{ display: flex; justify-content: flex-start; margin-bottom: 20px; .el-button{ margin-left: 0; background-color: $desPreviewColor; } }
.el-button, .el-button--info.is-plain{ font-size: 14px; background-color: transparent; @include elButton-style; } .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus{ @include elButton-disabled-style; } .el-button:hover, .el-button:focus, .el-button--info.is-plain:hover, .el-button--info.is-plain:focus{ @include elButton-hover-style; }
.el-button--mini{ padding: 7px 10px; } .el-message-box, .el-popover{ .el-button{ border-color: #dcdfe6; color: #606266; } .el-button:focus, .el-button:hover { color: #1890ff; border-color: #badeff; background-color: #e8f4ff; } .el-button--primary, .el-button--primary:focus, .el-button--primary:hover { background: #46a6ff; border-color: #46a6ff; color: #fff; } }
.header-container-wrap{ min-height: auto; }
.right-top-line, .left-bottom-line, .right-bottom-line{ display: block; position: absolute; width: 17px; height: 17px; z-index: 99; }
.left-bottom-line{ bottom: -1px; left: -1px; @include left_bottom_line_color; }
.right-top-line{ right: -1px; top: -1px; @include right_top_line_color; } .right-bottom-line{ right: -1px; bottom: -1px; @include after_line_color; } .el-tree{ background: transparent !important; .el-tree-node:focus>.el-tree-node__content { background-color: transparent !important; } .is-current>.el-tree-node__content { @include tree_active; } .el-tree-node__content{ height: 40px; @include tree_style; background-color: transparent; .el-tree-node__label{ font-size: 16px; font-weight: 600; } &:hover{ @include tree_hover; } } .el-tree-node__expand-icon{ font-size: 16px; @include tree_font_color; } .el-tree-node__children{ padding: 0 18px; .el-tree-node__content{ @include tree_children_padding; height: 30px; } .el-tree-node__label{ @include tree_children_font; font-size: 14px; font-weight: normal;
} }
} .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ @include tree_hover; } .el-tree .el-tree-node__children .is-current .el-tree-node__label{ @include tree_active; }
.el-date-editor .el-range-input{ background: transparent; @include tree_font_color; }
// table
.el-table{ background: transparent; tr{ background: transparent; .el-table__cell{ height: 40px; background-color: transparent; } } .el-table__header-wrapper, .el-table__header{ th.el-table__cell{ @include elTable-style; border-bottom: none; &>.cell{ font-size: 14px; @include elTable-font-style; } } }
.el-table__body-wrapper, .el-table__fixed-right{ td.el-table__cell{ @include elTable-td-font-style; font-size: 14px; padding: 5px 0; } } &::before, .el-table--group::after, .el-table--border::after, .el-table__fixed::before, .el-table__fixed-right::before{ background-color: transparent; } .el-checkbox__input.is-checked .el-checkbox__inner{ @include checkbox-active-style; }
.el-checkbox__input.is-disabled .el-checkbox__inner{ @include checkbox-disabled-style; }
.el-table__body tr.hover-row > td, .el-table__body tr.hover-row.current-row > td, .el-table__body tr.hover-row.el-table__row--striped > td, .el-table__body tr.hover-row.el-table__row--striped.current-row > td { @include elTable-hover-style; .el-checkbox__input.is-checked .el-checkbox__inner{ @include checkbox-active-style; } } .el-button{ padding: 7px 15px; } .el-button--primary { background-color: #1890ff; border-color: #1890ff; } .el-button--danger { background-color: #ff4949; border-color: #ff4949; }
.el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus{ color: #fff; background-color: #ffa4a4; border-color: #ffa4a4; } } .el-table__body tr.el-table__row:hover>td.el-table__cell, .el-table__body tr.el-table__row:focus>td.el-table__cell, .el-table__body tr.current-row:hover>td.el-table__cell, .el-table__body tr.current-row:focus>td.el-table__cell{ @include elTable-hover-style; .el-checkbox__input.is-checked .el-checkbox__inner{ @include checkbox-active-style; } }
.el-table__body tr.current-row>td.el-table__cell{ background-color: transparent; }
.el-checkbox__inner{ background: transparent; @include checkbox-style; }
.el-icon-arrow-right:before{ color: #fff; } .el-picker-panel__icon-btn:before{ color: #303133; } // 分页
.el-pagination{ display: flex; justify-content: flex-end; // padding: 2px 10px;
margin: 64px 0 10px 0 !important; .el-pagination__total{ color: $mainColor; } button{ height: 24px; line-height: 24px; background-color: transparent; &:disabled{ background-color: transparent; } } .el-pager li{ min-width: 24px; height: 24px; line-height: 24px; color: $mainColor; background-color: transparent; } .el-pager li.active{ color: #fff; background-color: #2072D2; } .el-select .el-input .el-input__inner{ background-color: transparent; color: $mainColor; border-color: $mainColor; } .el-icon-arrow-right:before{ color: $mainColor; } .btn-prev, .btn-next{ color: $mainColor; background-color: transparent; } .el-select .el-input .el-select__caret{ color: $mainColor; } }
// 弹框
.el-dialog{ position: relative; position: fixed; width: 620px; padding: 2px; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 2vh !important; background: linear-gradient(135deg, transparent 10px, $mainColor 0) top left, linear-gradient(-135deg, transparent 10px, $mainColor 0) top right, linear-gradient(-45deg, transparent 10px, $mainColor 0) bottom right, linear-gradient(45deg, transparent 10px, $mainColor 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; &::before, &::after, .dialog-right-top, .dialog-left-bottom{ position: absolute; content: ""; width: 134px; height: 63px; z-index: 99; } &::before{ left: -6px; top: -6px; background: url(~@/assets/images/dialog_left_top.png) no-repeat; background-size: contain; } &::after{ right: -18px; bottom: -7px; background: url(~@/assets/images/dialog_right_bottom.png) no-repeat; background-size: contain; } .dialog-right-top{ right: -23px; top: -6px; background: url(~@/assets/images/dialog_right_top.png) no-repeat; background-size: contain; } .dialog-left-bottom{ left: -6px; bottom: -7px; background: url(~@/assets/images/dialog_left_bottom.png) no-repeat; background-size: contain; } .el-dialog__header{ position: absolute; top: -40px; left: 50%; width: 360px; padding: 0; transform: translateX(-50%); &::before{ position: absolute; left: -23px; top: 0; content: ""; width: 23px; height: 42px; background: url(~@/assets/images/dialog_left.png) no-repeat; background-size: cover; } &::after{ position: absolute; right: -23px; top: 0; content: ""; width: 23px; height: 42px; background: url(~@/assets/images/dialog_right.png) no-repeat; background-size: cover; } .el-dialog__title{ display: block; font-size: 18px; font-weight: bold; line-height: 38px; color: #fff; text-align: center; background-color: $boxBg; border-top: 2px solid $mainColor; border-bottom: 2px solid $mainColor; } .el-dialog__headerbtn{ top: 4px; right: -160px; } .el-dialog__close{ font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px; color: $mainColor; &::before{ content: "\e60c"; } } } .el-dialog__body{ width: 100%; background-color: $boxBg; // border: 2px solid $mainColor;
// min-height: 400px;
// background: linear-gradient(135deg, transparent 12px, $boxBg 0) top left,
// linear-gradient(-135deg, transparent 12px, $boxBg 0) top right,
// linear-gradient(-45deg, transparent 12px, $boxBg 0) bottom right,
// linear-gradient(45deg, transparent 12px, $boxBg 0) bottom left;
// background-size: 50% 50%;
// background-repeat: no-repeat;
// box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6);
} .dialog-footer{ margin: 30px auto 0 auto; text-align: center; .el-button{ font-size: 16px; padding: 8px 28px; } .el-button--primary{ background-color: $desPreviewColor; } } } .el-dialog, .right-preview{ .el-form{ .el-form-item__label{ color: $mainColor; } .el-input__inner{ color: #fff; border: 1px solid $mainColor; background-color: transparent !important; } .vue-treeselect__control, .vue-treeselect__placeholder, .vue-treeselect__single-value{ height: 28px; // line-height: 28px;
color: #fff; } .vue-treeselect__control{ border: 1px solid $mainColor; background-color: transparent; .vue-treeselect__control-arrow{ color: $mainColor; } } .el-radio{ color: #fff; } .el-textarea__inner{ color: #fff; border: 1px solid $mainColor; background-color: transparent; } .el-input-number.is-controls-right[class*=small] [class*=increase], .el-input-number.is-controls-right[class*=small] [class*=decrease]{ background-color: transparent; } .el-input-number__decrease, .el-input-number__increase{ border-left-color: $mainColor; &>i{ color: #fff; } } .el-input-number__increase{ border-bottom-color: $mainColor; } .el-select .el-input .el-select__caret{ color: $mainColor; } .vue-treeselect .vue-treeselect__control:focus, .vue-treeselect .vue-treeselect__control:hover{ border-color: $mainColor !important; } .vue-treeselect.vue-treeselect--disabled .vue-treeselect__control, .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner{ color: $desPreviewColor !important; border: none !important; background-color: #02255f!important; } } } // el-tree 最终节点不显示箭头
.is-leaf::before { color: transparent; }
.el-input__prefix{ left: 8px; }
// tab样式布局
.tab-content{ margin-top: 40px; border-top: none; background-color: #021941; &::before{ display: none; } .tab-nav{ display: flex; justify-content: flex-start; height: 41px; line-height: 41px; margin: -41px 0 30px -1px; font-size: 16px; font-weight: bold; color: #359AFC; border-bottom: 1px solid #113D72; li{ position: relative; padding: 0 24px; margin: -1px 30px 0 0; letter-spacing: 2px; border-top: 1px solid #113D72; background-color: #021941; cursor: pointer; &::before, &::after{ content: ""; position: absolute; top: 0; width: 33px; height: 41px; } &::before{ left: -15px; background: url(~@/assets/images/tab_left.png) no-repeat; background-size: contain; } &::after{ right: -32px; background: url(~@/assets/images/tab_right.png) no-repeat; background-size: contain; } &:first-child{ border-left: 1px solid #113d72;; &::before{ width: 17px; height: 17px; left: -1px; top: -1px; border-left: 1px solid $mainColor; border-top: 1px solid $mainColor; } } &.active-tab-nav{ color: #fff; &::before{ background: url(~@/assets/images/tab_left_active.png) no-repeat; background-size: contain; } &::after{ background: url(~@/assets/images/tab_right_active.png) no-repeat; background-size: contain; } i{ display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; border-bottom: 1px solid #021941; } } } .tab-right-img{ display: block; width: 93px; margin: 4px 0 0 -14px; background: url(~@/assets/images/tab_img.png) no-repeat; background-size: contain; } } .el-table__header{ border-top: 1px solid #113D72; } }
// 默认底图 - 暂时只有头像
.user-img-cover{ border-radius: 50%; background: url(~@/assets/images/avatar.png) no-repeat #fff; background-size: cover; overflow: hidden; }
// 著录界面表单
.des-form{ .el-form-item__label{ font-weight: normal; color: $desPreviewColor; } .el-input__inner{ color: $desPreviewColor; background: #021941 !important; border: none; &::placeholder{ color: $desPreviewColor !important; } &::-webkit-input-placeholder{ color: $desPreviewColor !important; } } .el-input.is-disabled .el-input__inner{ color: $desPreviewColor !important; border: none; background-color: #02255f!important; } .el-input__icon{ color: $desPreviewColor !important; } .checkbox-item{ height: 36px; line-height: 36px; text-align: right; .el-form-item__content{ margin-left: 0 !important; } .el-checkbox__input.is-disabled .el-checkbox__inner{ background-color: transparent; border-color: $mainColor; &::after{ border-color: $desPreviewColor; } } span{ color: $desPreviewColor; } } .input-num{ display: flex; justify-content: flex-end; .el-input__inner{ width: 50px; } .el-form-item__content{ display: flex; justify-content: flex-start; margin-left: 0 !important; .el-input, .el-input-number--small{ width: 60px; } .el-input-number.is-controls-right { .el-input-number__decrease, .el-input-number__increase{ display: none; } .el-input__inner{ padding-left: 0; padding-right: 0; } } } span{ color: $desPreviewColor; line-height: 36px; } } } .setting-dialog{ z-index: 100; position: relative; color: #fff; .des-form{ width: 100% !important; margin-top: 0 !important; padding: 20px 38px 0 20px !important; background-color: transparent !important; .el-select, .el-input__inner{ width: 100% !important; } .input-num{ .el-input{ margin-right: 10px !important; } } } } .preview-dialog{ .el-dialog{ width: 680px !important; .preview-content{ max-height: calc(100vh - 330px) !important; overflow: hidden !important; overflow-y: auto !important; border: none !important; .el-textarea__inner{ border: 1px solid $mainColor !important; background-color: transparent !important; } } .el-dialog__header{ width: 420px !important; } } } .preview-dialog{ .el-dialog__body{ padding: 30px 0 !important; } } // 去除element ui 中el-input type=“number“的上下箭头
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; } input[type ='number'] { -moz-appearance: textfield !important; }
// 弹框-删除等提示
.setting-dialog{ .dialog-delt{ line-height: 26px; color: #fff; margin-bottom: 20px; } .delt-tip{ margin-top: 10px; color: #EF3147; } }
// alert 样式
.el-message-box{ position: relative; width: 588px; border: 2px solid $mainColor; border-bottom: none; border-radius: 4px 4px 0 0; background-color: $boxBg; overflow: visible; &::after{ position: absolute; left: -2px; bottom: -30px; content: ""; width: 589px; height: 30px; background: url(~@/assets/images/alert_bottom.png) no-repeat; background-size: contain; } .el-message-box__header{ padding: 18px 60px; background-color: $mainColor; .el-message-box__title{ font-weight: bold; color: #fff; } .el-message-box__headerbtn{ top: -36px; right: -16px; } .el-icon-close{ font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px; color: $mainColor; &::before{ content: "\E60C"; } } } .el-message-box__content{ height: 110px; padding: 35px 60px 15px 60px; color: #fff; } } .el-message-box .el-button, .el-popover .el-button{ color: #fff; border-color: $mainColor; background-color: transparent; }
.el-message-box .el-button:hover, .el-popover .el-button:focus{ color: #fff; background-color: #02255F; border-color: $mainColor; } .el-message-box .el-button--primary, .el-message-box .el-button--primary:focus, .el-message-box .el-button--primary:hover { background: #46a6ff; border-color: #46a6ff; color: #fff; } .el-table__header-wrapper{ @include elTable-style; }
.svg-style{ margin-right: 5px; } .svg-arc-style{ margin-right: 10px; }
.el-form-item__error--inline{ margin-left: 0; vertical-align: top; } .inline-error-item .el-form-item__content{ line-height: normal; margin-bottom: -15px; }
.el-select-dropdown, .el-dropdown-menu{ margin: 0; padding: 17px 0; @include dropdown_bg; border: none; } .el-dropdown-menu{ top: 46px !important; } .el-select-dropdown__item{ // color: $mainColor;
@include icon_color; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{ // background-color: #13439E;
@include dropdown_bg_hover; }
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ background-color: transparent; color: #fff; } .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{ background-color: #13439E; color: #fff; }
.el-popper[x-placement^=bottom] .popper__arrow{ opacity: 0; }
.el-popper[x-placement^=bottom] .popper__arrow::after{ content: ''; border: none; } .el-dropdown-menu .el-dropdown-menu__item{ @include icon_color; } .el-dropdown-menu .el-dropdown-menu__item:hover{ @include dropdown_bg_hover; }
//vue-treeselect
.vue-treeselect__multi-value-item{ background:#13439E !important; border: none !important; } .vue-treeselect__multi-value-label{ color: #fff; } .vue-treeselect__value-remove{ border-left: none !important; } .vue-treeselect__value-remove > svg{ color: #fff; } .el-dropdown-menu--small .el-dropdown-menu__item{ font-size: 14px; line-height: 32px; padding: 0 32px; }
.el-dropdown-menu--small .el-dropdown-menu__item.message-list-item{ padding: 0; } .message-list-item a{ display: flex; justify-content: space-between; padding: 0 20px; height: 40px; font-size: 14px; border-bottom: 1px solid #113D72; p, span, i{ line-height: 40px; } p{ width: 220px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } span{ display: block; } i.el-icon-arrow-right:before{ font-size: 16px; color: $mainColor; } } .message-dropdown.el-popper[x-placement^=bottom]{ .popper__arrow{ width: 89px; height: 20px; top: -8px; background: url('~@/assets/images/pop-message.png') no-repeat !important; border: none; transform: rotate(0); } }
// 库房空气质量监控
.msg-list{ position: absolute; top: 0; left: 0; width: calc(100vw - 800px); } .msg-list, .screen-env-list{ display: flex; li{ display: flex; flex-wrap: nowrap; align-items: center; align-content: center; justify-content: center; width: calc(100%/6); height: 80px; margin-right: 20px; background: url('~@/assets/images/data_border_default.png') no-repeat; background-size: 100% 100%; position: relative; &.li-warn{ background: url('~@/assets/images/data_border_warn.png') no-repeat; background-size: 100% 100%; } .msg-list-svg{ font-size: 36px; display: inline-block; height: 80px; line-height: 80px; margin-left: 30px; } .msg-pm{ font-size: 46px; } .msg-txt{ position: relative; flex: 1; height: 80px; text-align: center; } .msg-list-unit{ position: absolute; left: 0; bottom: 12px; width: 100%; font-size: 14px; color: $mainColor; } .msg-list-num{ color: #fff; font-size: 26px; position: absolute; left: 0; top: 14px; width: 100%; } } }
.el-tag--small{ margin: 2px 0; border: 1px solid $mainColor; background-color: #02255f; }
.el-tag.el-tag--warning { background-color: transparent; border-color: #FD8042; color: #FD8042; }
.el-tag.el-tag--danger { background-color: transparent; border-color: #f65163; color: #f65163; }
// table 选中状态
.el-table__body .rowStyle>td { color: #fff !important; background-color: #13439E !important; }
// 数据为空
.empty-main{ display: flex; height: calc(100% - 40px); flex-flow: column; justify-content: center; align-items: center; .empty-img{ width: 140px !important; height: 140px !important; vertical-align: middle !important; } p{ font-size: 12px; color: #999; margin-top: -10px; } }
// 日期控件btn
.el-date-range-picker{ .el-picker-panel__footer .el-button{ border: 1px solid $mainColor; color: $mainColor !important; } .el-picker-panel__footer .el-button:hover{ background-color: transparent; } .el-picker-panel__footer .el-button.is-plain { background-color: #1890ff; border-color: #1890ff; color: #fff !important; } } // 档案统计title
.table-title { // color: #fff;
@include font-color($font-color-dark); font-size: 16px; text-align: center; height: 40px; line-height: 40px; } .warehouse-svg { margin: 0 10px 1px 0; } .title-arrow { position: relative; display: inline-block;
&::before { content: ''; width: 36px; height: 12px; position: absolute; right: -60px; top: 50%; transform: translateY(-50%); background: url('~@/assets/images/warehouse_arrow_left.png') no-repeat; }
&::after { content: ''; width: 36px; height: 12px; position: absolute; left: -60px; top: 50%; transform: translateY(-50%); background: url('~@/assets/images/warehouse_arrow_right.png') no-repeat; } }
|