567 lines
13 KiB
SCSS
567 lines
13 KiB
SCSS
/*列表table通用样式*/
|
|
.list-page {
|
|
height: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: $--background-color-base;
|
|
|
|
.main-list {
|
|
background-color: $--background-color-empty;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 0;
|
|
}
|
|
.main-container {
|
|
padding: 0px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background-color: $--background-color-base;
|
|
&>div {
|
|
background-color: $--background-color-empty;
|
|
}
|
|
}
|
|
.main-list.main-list-with-sub {
|
|
height: 50%;
|
|
}
|
|
.main-modal {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: none;
|
|
z-index: 100;
|
|
}
|
|
.top-tools {
|
|
display: flex;
|
|
align-items : center;
|
|
position: relative;
|
|
justify-content: space-between;
|
|
padding: 14px 20px;
|
|
|
|
.top-tool-right {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
.top-tool-left {
|
|
display: flex;
|
|
.nz-icon-xingzhuang{
|
|
color: $--color-text-regular;
|
|
cursor: pointer;
|
|
}
|
|
.nz-icon-a-xingzhuang2{
|
|
color:#FF9219 !important;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.panel-top-tools{
|
|
&.panel-top-tools-bottom{
|
|
border-bottom: 1px solid $--border-color-light;
|
|
}
|
|
}
|
|
.top-tool-btn-group {
|
|
display: flex;
|
|
.top-tool-btn:not(:last-of-type):not(:first-of-type) {
|
|
border-left: none;
|
|
border-radius: 0;
|
|
}
|
|
.top-tool-btn:first-of-type:not(:last-of-type) {
|
|
border-radius: $--button-border-radius 0 0 $--button-border-radius;
|
|
}
|
|
.top-tool-btn:last-of-type:not(:first-of-type) {
|
|
border-radius: 0 $--button-border-radius $--button-border-radius 0;
|
|
border-left: none;
|
|
}
|
|
.top-tool-btn {
|
|
background-color: $--background-color-empty;
|
|
}
|
|
}
|
|
.top-tool-btn {
|
|
height: 32px;
|
|
width: 36px;
|
|
cursor: pointer;
|
|
border: 1px solid $--button-icon-border-color;
|
|
outline: none;
|
|
border-radius: $--button-border-radius;
|
|
background-color: $--background-color-empty;
|
|
transition:all .2s;
|
|
color: $--button-icon-color;
|
|
i {
|
|
font-size: 14px;
|
|
color: $--button-icon-color;
|
|
}
|
|
}
|
|
.top-tool-btn.active{
|
|
background-color: $--button-icon-active-background-color;
|
|
border: 1px solid $--button-icon-active-border-color !important;
|
|
}
|
|
.top-tool-btn.top-tool-btn--text {
|
|
padding: 0 8px;
|
|
width: unset;
|
|
color: $--color-text-regular;
|
|
}
|
|
.top-tool-btn:hover:not(.nz-btn-disabled) {
|
|
background-color: $--button-icon-hover-background-color;
|
|
border: 1px solid $--button-icon-hover-border-color;
|
|
color: $--button-icon-hover-color;
|
|
|
|
i {
|
|
color: $--button-icon-hover-color;
|
|
}
|
|
}
|
|
.top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
|
|
background-color: $--button-icon-active-background-color;
|
|
border: 1px solid $--button-icon-active-border-color !important;
|
|
color: $--button-icon-active-color;
|
|
|
|
i {
|
|
color: $--button-icon-active-color;
|
|
}
|
|
}
|
|
.top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) {
|
|
background-color: $--button-icon-hover-background-color;
|
|
border: 1px solid #FFC4B9 !important;
|
|
i {
|
|
color: #F0745A;
|
|
}
|
|
}
|
|
.top-tool-btn--dropdown {
|
|
position: relative;
|
|
width: auto;
|
|
min-width: 36px;
|
|
}
|
|
.top-tools--sub.top-tools {
|
|
background-color: $--background-color-empty;
|
|
padding: 0 70px 0 15px;
|
|
height: 44px;
|
|
}
|
|
.top-tools--sub {
|
|
.top-tool-left {
|
|
height: 100%;
|
|
}
|
|
.sub-list-title {
|
|
width: 200px;
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
color: $--color-text-regular;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.sub-list-tabs {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.sub-list-tab {
|
|
height: 100%;
|
|
width: 120px;
|
|
color: $--color-text-regular;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
line-height: 40px;
|
|
|
|
&.sub-list-tab--active {
|
|
border-bottom: 2px solid $--color-primary;
|
|
color: $--color-primary;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
/* 上滑resize工具条 */
|
|
.sub-list-resize, .sub-list-resize-copy {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 9px;
|
|
width: 100%;
|
|
box-shadow: inset 0 1px 0 0 #BEBEBE;
|
|
background-color: $--background-color-1;
|
|
position: absolute;
|
|
z-index: 1;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
color: $--color-text-regular;
|
|
cursor: ns-resize;
|
|
}
|
|
.sub-list-window-control {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 14px;
|
|
position: absolute;
|
|
right: 0;
|
|
height: 44px;
|
|
z-index: 2;
|
|
|
|
.window-control-btn {
|
|
cursor: pointer;
|
|
margin-right: 20px;
|
|
}
|
|
.window-control-btn>i {
|
|
color: $--color-text-secondary;
|
|
font-size: 14px;
|
|
transition: all .2s;
|
|
}
|
|
.window-control-btn>i:hover {
|
|
color: $--color-primary;
|
|
}
|
|
}
|
|
.mt-10.table-container.nz-table-list {
|
|
.el-table:not(.chart-table) {
|
|
.gutter {
|
|
position: fixed;
|
|
right: 55px;
|
|
height: 42px;
|
|
border-bottom: 1px solid $--border-color-light;
|
|
background-color: $--background-color-empty;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
/* 上滑resize工具条--end */
|
|
.nz-table-list {
|
|
position: relative;
|
|
padding: 0 20px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
flex: auto;
|
|
height: calc(100% - 58px);
|
|
|
|
.el-table:not(.chart-table) {
|
|
width: 100%;
|
|
border: 1px solid $--border-color-light;
|
|
border-bottom: none;
|
|
|
|
.caret-wrapper {
|
|
height: 23px;
|
|
.sort-caret.ascending {
|
|
top: 1px;
|
|
}
|
|
.sort-caret.descending {
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.el-table-column--selection {
|
|
width: 55px !important;
|
|
}
|
|
|
|
td {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid $--border-color-light;
|
|
}
|
|
tr {
|
|
background-color: $--table-row-background-color;
|
|
}
|
|
th {
|
|
border-color: $--border-color-light;
|
|
padding: 8px 0;
|
|
}
|
|
.el-table__header th:first-of-type {
|
|
border-left: none;
|
|
}
|
|
.gutter {
|
|
position: fixed;
|
|
right: 31px;
|
|
height: 42px;
|
|
border-bottom: 1px solid $--border-color-light;
|
|
background-color: $--background-color-empty;
|
|
box-sizing: border-box;
|
|
}
|
|
thead {
|
|
color: $--color-text-primary;
|
|
}
|
|
|
|
.table-operation-title {
|
|
text-align: center;
|
|
}
|
|
.table-operation-items {
|
|
display: flex;
|
|
justify-content: center;
|
|
.table-operation-item {
|
|
display: flex;
|
|
height: 22px;
|
|
cursor: pointer;
|
|
border-radius: $--button-border-radius;
|
|
outline: none;
|
|
transition:all .2s;
|
|
}
|
|
.table-operation-item.table-operation-item--disable{
|
|
border: 1px solid $--button-light-border-color;
|
|
background-color: $--background-color-disabled;
|
|
opacity: 0.6;
|
|
outline: none;
|
|
i {
|
|
font-size: 14px;
|
|
color: $--color-text-disabled;
|
|
}
|
|
}
|
|
.table-operation-item.table-operation-item--disable:hover {
|
|
background-color: $--background-color-disabled;
|
|
}
|
|
&>.table-operation-item {
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 30px;
|
|
margin-right: 10px;
|
|
border: none;
|
|
border-radius: $--button-border-radius;
|
|
background-color: $--button-primary-background-color;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
transition: all .2s;
|
|
i {
|
|
color: $--button-primary-color;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
&>.table-operation-item:hover {
|
|
background-color: $--button-primary-hover-background-color;
|
|
}
|
|
.table-operation-item.table-operation-item--more {
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid $--button-icon-border-color;
|
|
width: 30px;
|
|
i {
|
|
color: $--color-text-secondary;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* start--覆盖el-table边框、gutter等样式 */
|
|
.el-table__body-wrapper {
|
|
overflow: auto;
|
|
background-color: $--table-body-background-color;
|
|
height: calc(100% - 42px) !important;
|
|
}
|
|
.el-table__fixed-body-wrapper {
|
|
top: 42px !important;
|
|
}
|
|
.el-table__body-wrapper, .el-table__fixed-body-wrapper {
|
|
box-shadow: 1px 0 $--border-color-light;
|
|
}
|
|
.el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
|
|
visibility: hidden;
|
|
}
|
|
.nz-table-list {
|
|
.el-table--border td {
|
|
border-right: none !important;
|
|
}
|
|
/* 最后一列用box-shadow模拟边框 */
|
|
//.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(3) {
|
|
// //box-shadow: 1px 0 $--border-color-light;
|
|
// border-left: 1px solid $--border-color-light;
|
|
//}
|
|
//.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
|
|
// border-right: none !important;
|
|
// box-shadow: 1px 0 $--border-color-light;
|
|
//}
|
|
.el-table__fixed-body-wrapper {
|
|
td:not(.is-hidden) {
|
|
border-left: 1px solid $--border-color-light;
|
|
}
|
|
}
|
|
.el-table__fixed-header-wrapper {
|
|
th:not(.is-hidden) {
|
|
border-left: 1px solid $--border-color-light;
|
|
}
|
|
th:last-of-type {
|
|
border-right: none !important;
|
|
}
|
|
}
|
|
.el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after {
|
|
width: 0;
|
|
}
|
|
}
|
|
/* end--覆盖el-table边框、gutter等样式 */
|
|
.pagination-bottom {
|
|
position: absolute;
|
|
bottom: 1px;
|
|
height: 48px;
|
|
width: calc(100% - 20px);
|
|
}
|
|
}
|
|
.explore-split-box{
|
|
overflow-x: hidden !important;
|
|
}
|
|
.profile {
|
|
.top-tools {
|
|
padding: 0 20px 14px 20px;
|
|
}
|
|
.main-container {
|
|
padding: 0;
|
|
}
|
|
.list-page .nz-table-list .el-table:not(.chart-table) .gutter {
|
|
position: fixed;
|
|
right: 31px;
|
|
height: 42px;
|
|
border-bottom: 1px solid $--border-color-light;
|
|
background-color: $--background-color-empty;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.operation-dropdown-text {
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.search-box {
|
|
padding: 0 20px 20px;
|
|
|
|
.nz-label-search {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
height: 22px;
|
|
margin-top: 8px;
|
|
border: 1px solid $--explore-border-color-bottom;
|
|
background: $--background-color-empty;
|
|
|
|
.el-cascader {
|
|
.el-tag {
|
|
max-width: calc(100% - 45px);
|
|
}
|
|
}
|
|
&.is-focus, &.is-hover {
|
|
.nz-label-search__label {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.nz-label-search__label {
|
|
padding-left: 6px;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
border: none;
|
|
transform: translateX(1px);
|
|
box-sizing: border-box;
|
|
transition:all .2s;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
color: $--color-text-regular;
|
|
}
|
|
|
|
i {
|
|
line-height: 22px !important;
|
|
}
|
|
}
|
|
.el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
|
|
border-color: $--border-color-base-focus !important;
|
|
}
|
|
.el-input__inner {
|
|
height: 22px !important;
|
|
border: none;
|
|
background-color: $--background-color-empty;
|
|
}
|
|
|
|
.el-tag {
|
|
background-color: $--background-color-empty;
|
|
i {
|
|
color: white;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
.nz-label-search:hover {
|
|
border-color: $--explore-border-color-bottom;
|
|
}
|
|
}
|
|
.click-search-dropdown {
|
|
width: calc(100% - 300px) !important;
|
|
left: 270px !important;
|
|
margin-top: -3px !important;
|
|
box-shadow: none;
|
|
box-sizing: border-box;
|
|
border-radius: 0;
|
|
border-color: $--border-color-base-focus;
|
|
|
|
.popper__arrow {
|
|
display: none;
|
|
}
|
|
.el-cascader-menu__list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
max-height: 120px;
|
|
}
|
|
}
|
|
.el-popper.el-cascader__dropdown.click-search-dropdown::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -1px;
|
|
height: 1px;
|
|
background-color: $--background-color-empty;
|
|
}
|
|
.temp-form-box-input.el-input .el-input__inner {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-active {
|
|
opacity: .7;
|
|
}
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 1s;
|
|
}
|
|
.table-no-data /deep/ .icon {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
.table-no-data {
|
|
line-height: 21px;
|
|
}
|
|
.table-no-data__title {
|
|
font-size: 16px;
|
|
color: $--color-text-primary;
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
/*table提示样式*/
|
|
.el-tooltip__popper.is-light {
|
|
border: 1px solid #EBEEF5;
|
|
color: $--color-text-regular;
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
}
|
|
.col-resize-area {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background-color: $--background-color-empty;
|
|
}
|
|
.full-width-height{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.list-page.detail-view .nz-detail-view-right{
|
|
.nz-table-list .el-table--border {
|
|
height: calc(100% - 45px) !important;
|
|
.gutter {
|
|
position: fixed;
|
|
right: 42px;
|
|
height: 42px;
|
|
border-bottom: 1px solid $--border-color-light;
|
|
background-color: $--background-color-empty;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|