gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-926 列表页样式改版

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

90
src/assets/css/common/table-common.scss
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;

22
src/assets/css/components/components/table/common.scss
View File

@@ -78,12 +78,28 @@
border-radius: 2px;
background-color: #F9F9F9;
transition: background-color linear .1s;
padding-left:10px;
}
.list-page .top-tools .top-tool-btn--search{
width:28px !important;
height:28px !important;
padding:unset !important;
i {
font-size: 14px;
color: #575757;
margin-right:unset !important;
}
}
.list-page {
.el-input--small{
width: 214px !important;
line-height: 27px;
}
.el-input--small .el-input__inner {
height: 33px;
line-height: 32px;
border-radius: 0px;
height: 28px;
border-radius: 2px 0px 0px 2px;
}
}

13
src/assets/css/components/views/setting/knowledgeBase.scss
View File

@@ -7,6 +7,19 @@
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 12px;
}
.top-title {
font-family: NotoSansHans-Black;
font-size: 24px;
color: #353636;
font-weight: 900;
line-height: 24px;
display: flex;
align-items: center;
padding-bottom: 8px;
padding-top: 20px;
margin-left:20px;
}
}
.edit-knowledge-base {
height: 100%;

6
src/assets/css/themes/theme-dark.scss
View File

@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
$--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
$--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
$--button-gray-color: #666; // 灰色按钮字色
$--button-gray-color: #353636; // 灰色按钮字色
$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
$--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
$--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

6
src/assets/css/themes/theme-light.scss
View File

@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
$--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
$--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
$--button-gray-color: #666; // 灰色按钮字色
$--button-gray-color: #353636; // 灰色按钮字色
$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
$--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
$--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度