CN-926 列表页样式改版

This commit is contained in:
hyx
2023-03-10 20:50:54 +08:00
parent 8f1adef30d
commit 64a6eac4a7
15 changed files with 289 additions and 144 deletions

View File

@@ -14,7 +14,7 @@
z-index: 0;
}
.main-container {
padding: 10px;
padding: 0px;
height: 100%;
background-color: #f6f6f6;
&>div {
@@ -36,7 +36,7 @@
align-items : center;
position: relative;
justify-content: space-between;
padding: 14px 20px;
padding: 12px 20px;
&.top-tools--sub {
align-items: center;
@@ -50,6 +50,12 @@
.top-tool-btn {
border-left: none;
}
.top-tool-btn--search:hover {
border-left: none !important;
}
.top-tool-btn--search:focus {
border-left: none !important;
}
}
.top-tool-right {
@@ -74,17 +80,28 @@
}
.top-tool-btn {
cursor: pointer;
height: 33px;
width: 36px;
height: 28px;
width: 72px;
border: 1px solid $--border-color-primary;
outline: none;
border-radius: $--button-border-radius;
background-color: $--button-gray-background-color;
transition: background-color linear .1s;
font-size:12px;
font-weight: 500;
font-family: NotoSansHans-Medium !important;
i {
font-size: 14px;
color: $--button-gray-color;
color: #575757;
margin-right:4px;
}
}
.top-tool-btn:disabled {
cursor: not-allowed;
opacity: 0.66;
i {
}
}
@@ -94,13 +111,14 @@
color: #666;
}
.top-tool-btn:hover:not(.cn-btn-disabled) {
border: 1px solid $--border-color-primary;
background-color: $--button-gray-hover-background-color;
}
.top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
background-color: $--button-gray-hover-background-color;
border: 1px solid $--color-primary !important;
background-color: $--button-gray-active-background-color;
border: 1px solid $--border-color-primary;
i {
color: $--button-gray-active-color;
color: #575757;
}
}
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
@@ -111,6 +129,56 @@
color: #F0745A;
}
}
.top-tool-btn--create {
background-color: #38ACD2 !important;
border-color: #2E88A6 !important;
color:#FFFFFF;
i {
color: #FFFFFF;
}
}
.top-tool-btn--create:hover {
background-color: #57B8D9 !important;
border-color: #2E88A6 !important;
color:#FFFFFF;
i {
color: #FFFFFF;
}
}
.top-tool-btn--create:focus {
background-color: #31A5CD !important;
border-color: #2E88A6 !important;
color:#FFFFFF !important;
i {
color: #FFFFFF !important;
}
}
.top-tool-btn--create:disabled {
opacity: 0.66;
background-color: #38ACD2 !important;
border-color: #2E88A6 !important;
color:#FFFFFF;
i {
color: #FFFFFF;
}
}
.btn-customize {
color:$blue;
font-size: 12px;
.icon-gear{
color:#2C72C6;
width:12px;
height:12px;
margin-right:2px;
font-size:12px;
}
}
.btn-customize:hover {
cursor:pointer;
}
.top-tool-btn--dropdown {
position: relative;
width: auto;
@@ -130,6 +198,7 @@
width: calc(100% - 40px);
border: 1px solid $--right-box-border-color;
border-bottom: none;
border-radius:4px;
.caret-wrapper {
height: 23px;
@@ -152,7 +221,8 @@
th {
border-color: $--right-box-border-color;
padding: 8px 0;
background: #F9F9F9;
background: #FFF;
border-right:0px;
}
.el-table__header th:first-of-type {
border-left: none;