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

CN-1612 feat: 部分css重构内容: Administration下的界面、tabs和分页

Browse Source
This commit is contained in:
刘洪洪
2024-04-08 11:06:28 +08:00
parent 8e5a45bfcf
commit 26e3b7a4eb
20 changed files with 308 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/common/right-box-common.scss
View File

@@ -73,10 +73,6 @@ $border-radius-small: 2px;
}
}
.container__form {
}
.el-form-item__content {
.input-box {
.el-textarea {
@@ -369,7 +365,6 @@ $border-radius-small: 2px;
.el-switch {
--el-switch-on-color: #699DC9;
--el-switch-off-color: #C0CEDB;
}
.el-textarea__inner {

47
src/assets/css/common/table-common.scss
View File

@@ -54,6 +54,10 @@
}
.top-tool-search {
.top-tool-search__display {
display: flex;
}
.top-tool-btn {
border-left: none;
}
@@ -73,6 +77,10 @@
}
}
.top-tool-btn__border {
border-radius: 0 2px 2px 0 !important;
}
.top-tool-btn--search:hover {
border-left: none !important;
}
@@ -103,6 +111,7 @@
.top-tool-left {
display: flex;
min-width: 300px;
}
.top-tool-btn-group {
@@ -265,40 +274,6 @@
}
}
/*.operation-dropdown-text {
display: inline-block;
font-size: 13px;
}
.search-box {
padding: 0 20px 20px;
}
.click-search-dropdown {
width: calc(100% - 300px) !important;
left: 270px !important;
margin-top: -3px !important;
box-shadow: none;
border-radius: 0;
border-color: #c7c7c7;
.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: white;
}*/
.col-resize-area {
position: absolute;
top: 0;
@@ -341,10 +316,10 @@
}
.padding-r-20 {
padding-right: 20px
padding-right: 20px;
}
.tooltip-column-name {
color: #aeb0b9;
color: var(--el-color-info-light-3);
height: 40px;
}

22
src/assets/css/components/components/common/chart-tab.scss
View File

@@ -5,10 +5,11 @@
position: absolute;
height: 3px;
top: 0;
background-color: #046EC9;
background-color: var(--el-color-primary);
border-radius: 5px 5px 0 0;
transition: all linear .2s;
transition: all linear var(--el-transition-duration-fast);
}
.el-tabs.el-tabs--border-card {
position: absolute;
top: 3px;
@@ -16,22 +17,24 @@
border: none;
box-shadow: none;
&>.el-tabs__header {
//background-color: white;
background-color: $--select-bg-color-1;
border-color: $--border-color-2;
& > .el-tabs__header {
background-color: var(--el-fill-color-blank);
border-color: var(--el-border-color-light);
.el-tabs__nav-wrap {
padding-left: 27px;
}
.el-tabs__item:first-child {
margin-left: 0;
}
}
.el-tabs__content {
display: none;
}
}
.el-tabs__nav {
z-index: 1;
display: inline-block;
@@ -42,7 +45,7 @@
line-height: 35px;
.chart-tabs__label {
color: $--text-color-1;
color: var(--el-text-color-primary);
font-size: 14px;
font-weight: bold;
box-sizing: border-box;
@@ -53,12 +56,13 @@
font-weight: normal;
}
}
&.is-active {
.chart-tabs__label {
color: $--text-color-1;
color: var(--el-text-color-primary);
i {
color: #046EC9;
color: var(--el-color-primary);
}
}
}

107
src/assets/css/components/components/common/pagination.scss
View File

@@ -1,125 +1,56 @@
//.pagination {
// padding-top: 8px;
// text-align: center;
// max-height: 42px;
//
// .el-pagination {
// max-height: 42px;
// padding-right: 0;
// }
// .pagination-size-select .el-input--small .el-input__inner{
// height: 20px;
// line-height: 20px;
// margin: 5px 0 5px 5px;
// }
// .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
// margin:5px 5px 0 5px;
// padding: 0 4px;
// font-size: 13px;
// min-width: 20px;
// height: 20px;
// line-height: 20px;
// text-align: center;
// border: 1px solid rgba(154,154,154,0.20);
// border-radius: 2px;
// }
// .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
// line-height: 20px;
// }
// .el-pagination .el-pager .more::before {
// line-height: 20px;
// }
// .el-pagination .el-pager .more {
// background-color: $--content-right-background-color;
// }
// .btn-next, .btn-prev {
// background-color: $--content-right-background-color !important;
// }
// input {
// background-color: $--content-right-background-color !important;
// }
// .el-pager li.number {
// color: #666666;
// letter-spacing: 0;
// font-weight:normal;
// background-color: $--content-right-background-color;
// }
// .el-pager li.number.active {
// color: #FFFFFF;
// letter-spacing: 0;
// }
//
// .el-pagination .el-pager li.active {
// background-color: $--color-primary;
// border-radius: 2px;
// }
// .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
// color: #666666;
// letter-spacing: 0;
// font-weight:normal;
// }
// .el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
// height: 20px;
// border-color: rgba(154,154,154,0.20);
// }
// .el-pagination__sizes .el-input .el-input__inner:hover {
// border-color: rgba(154,154,154,0.20);
// }
//}
//.entity__pagination .pagination {
// .el-pager li.more + li {
// display: none;
// }
// .el-pager li.number:not(:last-of-type) {
// display: inline-block !important;
// }
//}
.pagination {
//max-height: 42px;
padding-top: 8px;
display: flex;
justify-content: center;
align-items: center;
.el-pagination__total {
margin-right: 10px;
font-size: 13px;
}
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
margin:5px 5px 0 5px;
margin: 5px 5px 0 5px;
padding: 0 4px;
font-size: 13px;
min-width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid rgba(154,154,154,0.20);
border: 1px solid rgba(154, 154, 154, 0.20);
border-radius: 2px;
}
.el-pagination .btn-prev {
background-color: $--content-right-background-color !important;
background-color: var(--el-bg-color-page) !important;
}
.el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
color: #666666;
color: var(--el-text-color-regular);
letter-spacing: 0;
font-weight:normal;
font-weight: normal;
}
.btn-next, .btn-prev {
background-color: $--content-right-background-color !important;
background-color: var(--el-bg-color-page) !important;
}
.el-pager li.is-active {
background-color: #699dc9;
color: #fff;
background-color: var(--el-color-business);
color: var(--el-color-white);
font-weight: 500;
}
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
margin-top: 0;
}
.el-select {
width: 100px !important;
margin-left: 3px;
}
.pagination-size-select .el-select__wrapper{
.pagination-size-select .el-select__wrapper {
width: 100px;
height: 20px;
line-height: 20px;
@@ -129,11 +60,11 @@
font-size: 12px;
border-radius: 2px;
}
.el-select__suffix {
svg {
width: 12px;
height: 12px;
}
}
//el-icon el-select__caret el-select__icon
}

11
src/assets/css/components/views/administration/AdministrationTabs.scss
View File

@@ -2,6 +2,12 @@
.administration-tabs {
height: 18px;
}
.administration__tabs {
width: 100%;
padding-bottom: 26px;
}
.administration-container {
height: calc(100% - 86px);
flex-direction: column;
@@ -10,10 +16,15 @@
.list-page {
.main-container {
padding: 0;
.cn-pagination {
height: 34px;
}
}
}
.administration-container__body {
height: 100%;
}
}
}

51
src/assets/css/components/views/administration/Appearance.scss
View File

@@ -1,20 +1,24 @@
.appearance{
.appearance {
height: 100%;
display:flex;
flex-direction:column;
display: flex;
flex-direction: column;
.appearance-form {
padding-top:40px;
padding-left:100px;
background-color: white;
padding-top: 40px;
padding-left: 100px;
background-color: var(--el-fill-color-blank);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
.el-form-item {
margin-bottom: 27px;
}
.el-form-item__content {
width: 600px;
.el-select__wrapper {
min-height: 32px !important;
line-height: 32px;
@@ -22,53 +26,66 @@
font-size: 13px;
}
}
.el-form--default.el-form--label-top .el-form-item .el-form-item__label {
margin-bottom: 4px;
}
.el-input {
width:600px;
width: 600px;
}
.el-form .el-form-item .el-form-item__label {
padding-bottom: 6px;
font-size: 14px;
line-height: 16px;
}
.appearance__option {
display: flex;
justify-content: space-between;
}
}
.edit-appearance-base__footer {
display: flex;
align-items: center;
justify-content: flex-start;
height: 100px;
margin-top: 3px;
padding-left:200px;
padding-left: 200px;
.footer__btn {
margin: 0 10px;
height: 30px;
min-width: 74px;
padding: 0 15px;
color: white;
background-color: #38ACD2;
color: var(--el-color-white);
background-color: var(--el-color-business);
border: none;
border-radius: 4px;
border-radius: var(--el-border-radius-base);
outline: none;
font-size: 14px;
cursor: pointer;
transition: background-color linear .2s, color linear .1s;
transition: background-color linear var(--el-transition-duration-fast), color linear .1s;
}
.footer__btn:hover:not(.footer__btn--disabled) {
background-color: lighten(#38ACD2, 10%);
}
.footer__btn--light {
background-color: #F5F6F7;
border: 1px solid $--border-color-primary;
color: #333;
background-color: var(--el-fill-color-light);
border: 1px solid var(--el-color-info-light-7);
color: var(--el-text-color-primary);
}
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
background-color: white;
background-color: var(--el-fill-color-blank);
border-color: lighten(#38ACD2, 40%);
color: #38ACD2;
color: var(--el-color-business);
}
.footer__btn--disabled {
opacity: .6;
cursor: default;

40
src/assets/css/components/views/administration/License.scss
View File

@@ -1,43 +1,50 @@
.license{
.license {
height: 100%;
.license-form {
padding-top:40px;
padding-left:100px;
background-color: white;
padding-top: 40px;
padding-left: 100px;
background-color: var(--el-fill-color-blank);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
.license-file {
display: flex;
flex-direction: row;
height: 100%;
margin-top: 3px;
.license__btn {
height: 30px;
min-width: 74px;
color: white;
background-color: #38ACD2;
color: var(--el-color-white);
background-color: var(--el-color-business);
border: none;
border-radius: 4px;
border-radius: var(--el-border-radius-base);
outline: none;
font-size: 14px;
cursor: pointer;
transition: background-color linear .2s, color linear .1s;
transition: background-color linear var(--el-transition-duration-fast), color linear .1s;
}
.license__btn:hover:not(.footer__btn--disabled) {
background-color: lighten(#38ACD2, 10%);
}
.license__btn--light {
background-color: #F5F6F7;
border: 1px solid $--border-color-primary;
color: #333;
background-color: var(--el-fill-color-light);
border: 1px solid var(--el-color-info-light-7);
color: var(--el-text-color-primary);
}
.license__btn.license__btn--light:hover:not(.license__btn--disabled) {
background-color: white;
background-color: var(--el-fill-color-blank);
border-color: lighten(#38ACD2, 40%);
color: #38ACD2;
color: var(--el-color-business);
}
.license__btn--disabled {
opacity: .6;
cursor: default;
@@ -46,15 +53,16 @@
.el-form .el-form-item {
margin-bottom: 0;
padding:4px 0;
padding: 4px 0;
.el-form-item__label {
color: #262626 !important;
color: var(--el-text-color-primary) !important;
font-weight: bold;
font-size: 14px;
}
.el-form-item__content {
color: #262626 !important;
color: var(--el-text-color-primary) !important;
font-weight: 400;
font-size: 14px;
}

15
src/assets/css/components/views/detections/detection-tools.scss
View File

@@ -1,4 +1,5 @@
$color-white: var(--el-color-white);
$color-create: var(el-color-business-dark-2);
.top-tools__left {
display: flex;
@@ -49,18 +50,16 @@ $color-white: var(--el-color-white);
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
background-color: var(--cn-bg-color-light);
//border-color: #FFC4B9;
border-color: var(--el-color-danger-light-5);
i {
//color: #F0745A;
color: var(--el-color-danger);
}
}
.top-tool-btn--create {
background-color: var(--el-color-business) !important;
border-color: #2E88A6 !important;
border-color: $color-create !important;
color: $color-white;
i {
@@ -69,8 +68,8 @@ $color-white: var(--el-color-white);
}
.top-tool-btn--create:hover {
background-color: #57B8D9 !important;
border-color: #2E88A6 !important;
background-color: var(--el-color-business-light-2) !important;
border-color: $color-create !important;
color: $color-white;
i {
@@ -79,8 +78,8 @@ $color-white: var(--el-color-white);
}
.top-tool-btn--create:focus {
background-color: #31A5CD !important;
border-color: #2E88A6 !important;
background-color: var(--el-color-business) !important;
border-color: $color-create !important;
color: $color-white !important;
i {
@@ -91,7 +90,7 @@ $color-white: var(--el-color-white);
.top-tool-btn--create:disabled {
opacity: 0.66;
background-color: var(--el-color-business) !important;
border-color: #2E88A6 !important;
border-color: $color-create !important;
color: $color-white;
i {

4
src/assets/css/components/views/report/report.scss
View File

@@ -35,10 +35,8 @@ $bg-color-dark: var(--el-border-color-dark);
}
.cn-report-left-menu.cn-active {
//background: #F4FAFF;
background: var(--el-color-primary-light-9);
background: var(--el-color-business-light-9);
border-radius: 2px;
//color: #0091FF;
color: var(--el-color-business);
}
}