diff --git a/package.json b/package.json
index e7b3480d..438f55e9 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"@amcharts/amcharts4": "^4.10.38",
"@amcharts/amcharts4-geodata": "^4.1.20",
"@antv/g6": "^4.8.17",
+ "@element-plus/icons-vue": "^2.3.1",
"axios": "^0.21.1",
"babel-plugin-lodash": "~3.3.0",
"codemirror": "^5.65.1",
@@ -20,7 +21,7 @@
"dayjs": "^1.10.5",
"dexie": "~3.2.0",
"echarts": "^5.1.1",
- "element-plus": "~1.0.2-beta.71",
+ "element-plus": "^2.5.1",
"h3-js": "~3.7.2",
"lib-flexible": "^0.3.2",
"lodash": "^4.17.21",
@@ -46,8 +47,8 @@
"@babel/core": "~7.22.5",
"@babel/plugin-proposal-class-properties": "~7.18.0",
"@babel/plugin-proposal-private-methods": "~7.18.0",
- "@babel/plugin-transform-runtime": "~7.22.0",
"@babel/plugin-proposal-private-property-in-object": "~7.21.0",
+ "@babel/plugin-transform-runtime": "~7.22.0",
"@babel/preset-env": "~7.22.0",
"@babel/preset-typescript": "~7.22.0",
"@commitlint/cli": "^9.1.2",
@@ -70,8 +71,8 @@
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "~3.3.0",
"@vue/component-compiler-utils": "~3.3.0",
- "@vue/test-utils": "~2.4.0",
"@vue/server-renderer": "~3.3.0",
+ "@vue/test-utils": "~2.4.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.0.0",
"compression-webpack-plugin": "^8.0.1",
@@ -85,6 +86,8 @@
"jest": "~26.6.0",
"ts-jest": "~26.5.0",
"uglifyjs-webpack-plugin": "^2.2.0",
+ "unplugin-auto-import": "^0.17.5",
+ "unplugin-vue-components": "^0.26.0",
"vue-jest": "^5.0.0-alpha.10"
},
"browserslist": [
diff --git a/public/index.html b/public/index.html
index d559de20..53327c82 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
Cyber Narrator
-
+
diff --git a/src/Login.vue b/src/Login.vue
index cee5e22b..4f3b2482 100644
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -7,15 +7,18 @@
+ >
+
+
+
+
-
diff --git a/src/assets/css/common/cover-element-plus.scss b/src/assets/css/common/cover-element-plus.scss
new file mode 100644
index 00000000..3ece9d97
--- /dev/null
+++ b/src/assets/css/common/cover-element-plus.scss
@@ -0,0 +1,90 @@
+.el-drawer__body {
+ padding: 0 !important;
+}
+.el-tabs__item {
+ display: inline-block !important;
+ height: var(--el-tabs-header-height);
+ line-height: var(--el-tabs-header-height);
+}
+
+.el-table--border::before, .el-table__border-left-patch {
+ width: 0 !important;
+}
+.el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
+ height: 0 !important;
+}
+
+.el-popper.is-pure {
+ margin-top: -10px;
+}
+.el-select__wrapper {
+ min-height: 28px !important;
+}
+.el-input__wrapper {
+ height: 28px;
+}
+.el-input--mini .el-input__inner {
+ height: 28px !important;
+ line-height: 28px !important;
+}
+.el-table td.el-table__cell div {
+ margin-left: -1px;
+}
+.el-table .sort-caret.ascending {
+ border-bottom-color: #c0c4cc !important;
+}
+.el-table .ascending .sort-caret.ascending {
+ border-bottom-color: #699dc9 !important;
+}
+.el-table .sort-caret.descending {
+ border-top-color: #c0c4cc !important;
+}
+.el-table .descending .sort-caret.descending {
+ border-top-color: #699dc9 !important;
+}
+.el-radio.el-radio--large {
+ height: auto !important;
+}
+.el-radio {
+ height: auto !important;
+}
+.el-radio__input.is-checked + .el-radio__label {
+ color: $--color-primary !important;
+}
+.el-radio__input.is-checked .el-radio__inner {
+ background: $--color-primary !important;
+ border-color: $--color-primary !important;
+}
+.el-radio__label {
+ padding-left: 10px !important;
+}
+.el-tag {
+ min-width: 24px;
+ height: 24px !important;
+ line-height: 24px !important;
+}
+.el-popover.el-popper {
+ padding: 0 !important;
+}
+.my-header-cell-class .el-checkbox__input{
+ display: none;
+}
+.el-dialog {
+ padding: 0 !important;
+}
+.el-switch.is-checked .el-switch__core {
+ background-color: $--color-primary !important;
+}
+.el-date-table td.end-date .el-date-table-cell__text, .el-date-table td.start-date .el-date-table-cell__text {
+ background-color: $--color-primary !important;
+}
+.el-date-table td.available:hover {
+ color: $--color-primary !important;
+}
+.el-picker__popper.el-popper {
+ margin-top: 8px;
+}
+//.el-button:hover {
+// color: $--color-primary !important;
+// border-color: $--color-primary !important;
+//}
diff --git a/src/assets/css/common/part-select.scss b/src/assets/css/common/part-select.scss
index 1505d481..0f415909 100644
--- a/src/assets/css/common/part-select.scss
+++ b/src/assets/css/common/part-select.scss
@@ -1,6 +1,6 @@
// 部分 select 通用样式
.common-select.el-select__popper {
- top: 27px !important;
+ //top: 27px !important;
.el-popper__arrow {
display: none;
}
diff --git a/src/assets/css/common/right-box-common.scss b/src/assets/css/common/right-box-common.scss
index e7cd88f1..770b9a99 100644
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
@@ -64,6 +64,9 @@
}
}
}
+ }
+ .container__form {
+
}
.el-form-item__content {
.input-box {
@@ -136,6 +139,9 @@
.el-input__inner:focus {
border-color: darken($--right-box-border-color, 20%);
}
+ .el-form-item__label {
+ padding-bottom: 2px;
+ }
}
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
border-color: #F56C6C
@@ -301,4 +307,24 @@
.el-form-item__content .el-autocomplete .el-input-group {
vertical-align: unset;
}
+ .el-input__wrapper {
+ border-radius: 2px;
+ height: 32px !important;
+ line-height: 32px !important;
+ //box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
+ box-shadow: 0 0 0 1px #e7eaed inset;
+ }
+ .el-input__inner, .el-textarea__inner {
+ border: none !important;
+ }
+ .el-select__wrapper {
+ height: 32px;
+ line-height: 32px;
+ }
+ .el-switch.is-checked .el-switch__core {
+ background-color: $--color-primary;
+ }
+ .el-textarea__inner {
+ font-size: 12px;
+ }
}
diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index 951e7fb2..169eb1a8 100644
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -55,6 +55,10 @@
.top-tool-btn--search:focus {
border-left: none !important;
}
+ .el-input--small .el-input__wrapper {
+ height: 28px !important;
+ border-radius: 2px 0 0 2px !important;
+ }
}
.top-tool-right {
@@ -196,7 +200,7 @@
position: absolute;
width: calc(100% - 40px);
border: 1px solid $--right-box-border-color;
- border-bottom: none;
+ //border-bottom: none;
border-radius:4px;
.caret-wrapper {
@@ -214,7 +218,7 @@
}
td {
- padding: 8px 0;
+ padding: 3px 0 4px 0;
border-bottom: 1px solid $--right-box-border-color;
}
th {
@@ -399,6 +403,9 @@
.margin-t-20{
margin-top: 20px;
}
+.margin-r-3{
+ margin-right: 3px;
+}
.tooltip-column-name {
color: #aeb0b9;
height:40px;
diff --git a/src/assets/css/components/components/advancedSearch/advanced-search2.scss b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
index 2bb692be..567076e2 100644
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -16,7 +16,7 @@
margin-right: 12px;
background-color: transparent;
- .el-icon-search {
+ i {
color: #3976CB;
}
}
@@ -51,14 +51,14 @@
line-height: 39px;
background: #38ACD2;
- .el-icon-search {
+ i {
font-size: 22px;
color: #fff;
}
}
}
.search__suffix-close {
- .el-icon-error {
+ i {
font-size: 17px;
color: #C4C4C4;
cursor: pointer;
@@ -87,7 +87,7 @@
border-radius: 2px;
padding-left: 10px;
padding-right: 80px;
- background-color: white;
+ background-color: $--select-bg-color-1;
border: 1px solid #DEDEDE;
&::-webkit-scrollbar {
@@ -151,6 +151,20 @@
color: #333;
font-weight: bold;
cursor: text;
+ .el-select {
+ min-width: 210px !important;
+ min-height: 20px !important;
+ height: 20px;
+ cursor: pointer;
+ }
+ .el-select__wrapper {
+ height: 28px;
+ margin-top: -4px;
+ cursor: pointer;
+ }
+ .el-select__wrapper.is-focused {
+ box-shadow: 0 0 0 1px $--color-primary inset !important;
+ }
}
.condition__operator {
color: #3976CB;
@@ -180,7 +194,13 @@
padding-left: 65px;
}
-.el-popover.my-popper-class {
+.my-popper-class {
width: auto !important;
- padding: 8px 12px !important;
+ padding: 8px 10px !important;
+}
+.el-input__wrapper.is-focus {
+ box-shadow: 0 0 0 1px $--color-primary inset !important;
+}
+.el-select-dropdown__item.is-selected {
+ color: #2c72c6 !important;
}
diff --git a/src/assets/css/components/components/advancedSearch/codemirror.scss b/src/assets/css/components/components/advancedSearch/codemirror.scss
index 0b3fbee4..24a949c4 100644
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/src/assets/css/components/components/advancedSearch/codemirror.scss
@@ -2,7 +2,7 @@
.CodeMirror {
/* Set height, width, borders, and global font properties here */
- height: 40px;
+ height: 40px !important;
color: black;
direction: ltr;
border: 1px solid #CECECE;
@@ -22,7 +22,7 @@
/* PADDING */
.CodeMirror-lines {
- padding: 9px 5px; /* Vertical padding around content */
+ //padding: 9px 5px; /* Vertical padding around content */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
@@ -187,6 +187,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
position: relative;
border-right: 50px solid transparent;
width: 3000px; // 避免搜索过长导致换行
+ height: 30px;
+ overflow-y: hidden;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
@@ -222,7 +224,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
}
.CodeMirror-gutter {
white-space: normal;
- height: 100%;
+ height: 100% !important;
display: inline-block;
vertical-align: top;
margin-bottom: -50px;
@@ -249,6 +251,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
.CodeMirror-lines {
cursor: text;
min-height: 1px; /* prevents collapsing before first draw */
+ margin-top: 4px;
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
@@ -391,11 +394,6 @@ span.CodeMirror-selectedtext { background: none; }
//color: #D85512;
}
-.CodeMirror-lines {
- /*height: 20px;*/
- //padding: 3px 0;
-}
-
.in-coder-panel {
margin-left: 2px;
}
diff --git a/src/assets/css/components/components/common/TimeRange/date-time-range.scss b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
index bad3efc7..e48b3c98 100644
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -32,8 +32,10 @@
padding: 0 10px;
display: flex;
justify-content: space-around;
- background: #FFFFFF;
- border: 1px solid #DEDEDE;
+ //background: #FFFFFF;
+ background: var(--el-fill-color-blank);
+ //border: 1px solid #DEDEDE;
+ border: 1px solid var(--el-border-color);
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 2px;
height: 28px;
@@ -56,7 +58,8 @@
.date-range-title {
font-size: 14px;
- color: #666666;
+ //color: #666666;
+ color: $--text-color-4;
font-weight: 600;
padding: 14px 0 7px 8px;
}
@@ -71,7 +74,8 @@
white-space: nowrap;
display: inline-block;
margin: 0 5px;
- color: #353636;
+ //color: #353636;
+ color: $--text-color-1;
.cn-icon-Data {
color: #575757;
}
@@ -88,7 +92,8 @@
.date-range-panel {
height: 426px;
width: 500px;
- background: #FFFFFF;
+ //background: #FFFFFF;
+ background: $--select-bg-color-1;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
position: absolute;
right: 0;
@@ -102,7 +107,8 @@
.content-title {
font-size: 14px;
- color: #666666;
+ //color: #666666;
+ color: var(--el-text-color-primary);
font-weight: 400;
margin-bottom: 12px;
}
@@ -134,9 +140,13 @@
.date-range-history-item:hover {
/*font-weight: 600;*/
- background: #f9f9f9;
+ //background: #f9f9f9;
+ background: $--select-bg-color-hover-1;
}
}
+ .el-range-editor.el-input__wrapper{
+ opacity: 0;
+ }
}
.date-range-panel-content-right {
@@ -156,15 +166,18 @@
display: flex;
flex-direction: column;
justify-content: center;
- color: #333333;
+ //color: #333333;
+ color: var(--el-text-color-primary);
font-weight: 400;
padding: 0 10px;
cursor: pointer;
}
li.active {
- background: #F2F9FF;
- color: #0091FF;
+ //background: #F2F9FF;
+ //color: #0091FF;
+ background: $--select-bg-color-1;
+ color: var(--el-color-primary);
font-weight: 400;
.cn-icon-check {
@@ -175,8 +188,10 @@
}
li:hover {
- background: #F2F9FF;
- color: #0091FF;
+ //background: #F2F9FF;
+ background: var(--el-color-primary-light-9);
+ //color: #0091FF;
+ color: var(--el-color-primary);
}
}
}
diff --git a/src/assets/css/components/components/common/TimeRange/time-refresh.scss b/src/assets/css/components/components/common/TimeRange/time-refresh.scss
index 8231bea5..c3194845 100644
--- a/src/assets/css/components/components/common/TimeRange/time-refresh.scss
+++ b/src/assets/css/components/components/common/TimeRange/time-refresh.scss
@@ -17,8 +17,9 @@
.refresh-list{
position: absolute;
z-index: 2;
- background: #FFFFFF;
- border: 1px solid #DEDEDE;
+ //background: #FFFFFF;
+ background: $--select-bg-color-1;
+ border: 1px solid var(--el-border-color);
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 2px;
top: 30px;
@@ -29,13 +30,13 @@
display: flex;
flex-direction: column;
justify-content: center;
- color: #333333;
+ color: $--text-color-5;
cursor: pointer;
position: relative;
padding: 8px 0 8px 12px;
}
.refresh-list-item.active{
- background: #F2F9FF;
+ background: $--select-bg-color-1;
color: #0091FF;
font-weight: 400;
.cn-icon-check{
@@ -45,7 +46,8 @@
}
}
.refresh-list-item:hover{
- background: #F2F9FF;
+ //background: #F2F9FF;
+ background: $--select-bg-color-hover-1;
color: #0091FF;
}
}
@@ -66,5 +68,6 @@
.el-button--mini{
padding: 4px 6px !important;
min-height: 28px !important;
+ height: 28px !important;
}
}
diff --git a/src/assets/css/components/components/common/chart-tab.scss b/src/assets/css/components/components/common/chart-tab.scss
index 133dbdb4..df0019cd 100644
--- a/src/assets/css/components/components/common/chart-tab.scss
+++ b/src/assets/css/components/components/common/chart-tab.scss
@@ -17,8 +17,9 @@
box-shadow: none;
&>.el-tabs__header {
- background-color: white;
- border-color: #E2E5EC;
+ //background-color: white;
+ background-color: $--select-bg-color-1;
+ border-color: $--border-color-2;
.el-tabs__nav-wrap {
padding-left: 27px;
@@ -33,6 +34,7 @@
}
.el-tabs__nav {
z-index: 1;
+ display: inline-block;
}
.el-tabs__item.is-top {
@@ -40,7 +42,7 @@
line-height: 35px;
.chart-tabs__label {
- color: #353636;
+ color: $--text-color-1;
font-size: 14px;
font-weight: bold;
box-sizing: border-box;
@@ -53,7 +55,7 @@
}
&.is-active {
.chart-tabs__label {
- color: #353636;
+ color: $--text-color-1;
i {
color: #046EC9;
diff --git a/src/assets/css/components/components/common/pagination.scss b/src/assets/css/components/components/common/pagination.scss
index f7389ad5..5f88b388 100644
--- a/src/assets/css/components/components/common/pagination.scss
+++ b/src/assets/css/components/components/common/pagination.scss
@@ -1,16 +1,89 @@
-.pagination {
- padding-top: 8px;
- text-align: center;
- max-height: 42px;
+//.pagination {
+// padding-top: 8px;
+// text-align: center;
+// max-height: 42px;
+//
+// .el-pagination {
+// max-height: 42px;
+// padding-right: 0;
+// }
+// .pagination-size-select .el-input--mini .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;
+// }
+//}
- .el-pagination {
- max-height: 42px;
- padding-right: 0;
- }
- .pagination-size-select .el-input--mini .el-input__inner{
- height: 20px;
- line-height: 20px;
- margin: 5px 0 5px 5px;
+.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;
@@ -23,54 +96,44 @@
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 {
+ .el-pagination .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 {
+ .btn-next, .btn-prev {
+ background-color: $--content-right-background-color !important;
+ }
+ .el-pager li.is-active {
+ background-color: #699dc9;
+ color: #fff;
+ 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{
+ width: 100px;
height: 20px;
- border-color: rgba(154,154,154,0.20);
+ line-height: 20px;
+ min-height: 20px !important;
+ margin: 5px 0 5px 5px;
+ padding: 4px 8px 4px 10px;
+ font-size: 12px;
+ border-radius: 2px;
}
- .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;
+ .el-select__suffix {
+ svg {
+ width: 12px;
+ height: 12px;
+ }
}
+ //el-icon el-select__caret el-select__icon
}
diff --git a/src/assets/css/components/components/layout/layout.scss b/src/assets/css/components/components/layout/layout.scss
index 2a681c1b..16102bca 100644
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -1,6 +1,7 @@
.cn-container {
height: calc(100% - 100px);
- background-color: $--content-right-background-color;
+ //background-color: $--content-right-background-color;
+ background-color: var(--bg-color);
width: 100%;
&>div {
height: 100%;
@@ -49,8 +50,9 @@
display: flex;
align-items: center;
height: 40px;
- background-color: #f7f7f7;
- border-bottom: 1px solid #E2E5EC;
+ //background-color: #f7f7f7;
+ background-color: var(--el-bg-color-overlay);
+ border-bottom: 1px solid $--border-color;
.cn-icon-a-NetworkAnalytics {
margin-left: 20px;
@@ -68,88 +70,6 @@
.header__left-breadcrumb-item-select{
display:flex;
align-items: center;
- .search-input{
- width:100%;
- padding: 4px 4px 0px 4px;
- .el-input__inner{
- padding:0px 4px;
- background: #FFFFFF;
- border: 1px solid #C5C5C5;
- box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
- border-radius: 2px;
- font-size: 12px;
- /*color: rgba(87,87,87,0.60);*/
- letter-spacing: 0;
- font-weight: 400;
- }
- }
- .breadcrumb-button{
- align-items: center;
- width: 100%;
- height: 24px;
- justify-content: center;
- line-height: 24px;
- padding: 0px 6px;
- span {
- margin-right: 6px;
- }
- }
- .breadcrumb-button:hover,.breadcrumb-button__active {
- cursor:pointer;
- background: rgba(113,113,113,0.10);
- box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
- border-radius: 2px;
- }
- .breadcrumb__popper{
- top: -7px !important;
- width:auto !important;
- max-height:206px;
- overflow:hidden;
- padding: 0px !important;
- background: #FFFFFF;
- border:1px solid #C5C5C5 !important;
- box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
- border-radius: 2px !important;
- .el-row {
- width: 100% !important;
- }
- .selected {
- color: #0091ff;
- font-weight: bold;
- }
- .el-popper {
- max-height: 405px;
- }
- .select-dropdown {
- max-height:172px;
- width:100%;
- margin: 1px 0px;
- overflow:auto;
- list-style: none;
- padding:4px 0px;
- box-sizing: border-box;
- .select-dropdown__item:hover{
- background-color: #F5F7FA !important;
- }
- .select-dropdown__item{
- width:100%;
- height:30px;
- padding:0px 11px;
- line-height:30px;
- position: relative;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: #666665;
- display: list-item;
- text-align: -webkit-match-parent;
- box-sizing: border-box;
- cursor: pointer;
- font-size: 12px;
- font-weight: 400;
- }
- }
- }
}
}
}
@@ -250,6 +170,9 @@
font-size: 12px;
}
}
+ .header-menu--item {
+ outline-style: initial;
+ }
}
.left-menu--pin {
width: 20px;
@@ -297,3 +220,93 @@
border-radius: 4px;
border: 2px solid transparent;
}
+
+.breadcrumb__popper{
+ top: 96px !important;
+ width: 180px !important;
+ min-width: 180px;
+ max-height:206px;
+ overflow:hidden;
+ padding: 0 !important;
+ background: #963131;
+ border:1px solid #C5C5C5 !important;
+ box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+ border-radius: 2px !important;
+ .el-row {
+ width: 100% !important;
+ }
+ .selected {
+ color: #0091ff;
+ font-weight: bold;
+ }
+ .el-popper {
+ max-height: 405px;
+ }
+ .select-dropdown {
+ max-height:172px;
+ width:100%;
+ margin: 1px 0px;
+ overflow:auto;
+ list-style: none;
+ padding:4px 0px;
+ box-sizing: border-box;
+ .select-dropdown__item:hover{
+ background-color: #F5F7FA !important;
+ }
+ .select-dropdown__item{
+ width:100%;
+ height:30px;
+ padding:0px 11px;
+ line-height:30px;
+ position: relative;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: #666665;
+ display: list-item;
+ text-align: -webkit-match-parent;
+ box-sizing: border-box;
+ cursor: pointer;
+ font-size: 12px;
+ font-weight: 400;
+ }
+ }
+}
+
+.search-input{
+ width:100%;
+ padding: 4px 4px 0px 4px;
+ .el-input__wrapper {
+ border: 1px solid #C5C5C5;
+ box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+ }
+ .el-input__inner{
+ //padding:0px 4px;
+ //background: #FFFFFF;
+ //border: 1px solid #C5C5C5;
+ //box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+ border-radius: 2px;
+ font-size: 12px;
+ /*color: rgba(87,87,87,0.60);*/
+ letter-spacing: 0;
+ font-weight: 400;
+ margin-left: -7px;
+ }
+}
+.breadcrumb-button{
+ align-items: center;
+ width: 100%;
+ height: 24px;
+ justify-content: center;
+ line-height: 24px;
+ padding: 0px 6px;
+ span {
+ margin-right: 6px;
+ }
+}
+.breadcrumb-button:hover,.breadcrumb-button__active {
+ cursor:pointer;
+ background: rgba(113,113,113,0.10);
+ box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+ border-radius: 2px;
+}
diff --git a/src/assets/css/components/components/rightBox/report/reportBox.scss b/src/assets/css/components/components/rightBox/report/reportBox.scss
index 0ab72d19..d7961f2b 100644
--- a/src/assets/css/components/components/rightBox/report/reportBox.scss
+++ b/src/assets/css/components/components/rightBox/report/reportBox.scss
@@ -4,6 +4,7 @@
.el-checkbox {
margin-right: 24px;
line-height: 28px;
+ margin-top: -2px;
}
.el-checkbox-group {
line-height: 28px;
@@ -108,10 +109,40 @@
height: 32px;
margin: 10px 0 0 10px;
}
+ .el-input__wrapper {
+ height: 32px !important;
+ padding: 1px 11px !important;
+ border-radius: 2px;
+ }
+ .el-input__inner {
+ padding: 0;
+ }
+
+ .el-form-item__content {
+ line-height: 40px !important;
+ }
+ }
+ .el-input__inner {
+ border: none;
+ }
+ .el-select--small .el-select__wrapper {
+ padding: 0 10px;
+ min-height: 32px !important;
+ line-height: 32px !important;
+ margin-top: -2px;
+ border-radius: 2px;
}
}
.right-box__select--param {
- .el-input__prefix {
+ //.el-select--small .el-select__prefix {
+ // left: 0;
+ // background-color: #f5f7fa;
+ // color: #999;
+ // padding: 0 1.07143rem;
+ // border: 1px solid #dcdfe6;
+ // border-radius: 2px 0 0 2px;
+ //}
+ .el-select__prefix, .el-input__prefix {
left: 0;
background-color: #f5f7fa;
color: #999;
@@ -119,5 +150,11 @@
border: 1px solid #dcdfe6;
border-radius: 2px 0 0 2px;
}
+ .el-select__wrapper {
+ padding-left: 0 !important;
+ }
}
}
+.my-form-item .el-form-item__content {
+ display: block !important;
+}
diff --git a/src/assets/css/components/components/table/common.scss b/src/assets/css/components/components/table/common.scss
index 592aacac..3e15b4fb 100644
--- a/src/assets/css/components/components/table/common.scss
+++ b/src/assets/css/components/components/table/common.scss
@@ -86,9 +86,12 @@
width:28px !important;
height:28px !important;
padding:unset !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
i {
font-size: 14px;
- color: #575757;
+ color: $--text-color-2;
margin-right:unset !important;
}
}
diff --git a/src/assets/css/components/views/administration/Appearance.scss b/src/assets/css/components/views/administration/Appearance.scss
index af9a9b7c..79f08b22 100644
--- a/src/assets/css/components/views/administration/Appearance.scss
+++ b/src/assets/css/components/views/administration/Appearance.scss
@@ -10,6 +10,21 @@
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;
+ padding: 0 10px 0 16px;
+ font-size: 13px;
+ }
+ }
+ .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
+ margin-bottom: 4px;
+ }
.el-input {
width:600px;
}
@@ -60,3 +75,6 @@
}
}
}
+.el-popper.is-pure {
+ margin-top: 0;
+}
diff --git a/src/assets/css/components/views/charts2/dnsEventChart.scss b/src/assets/css/components/views/charts2/dnsEventChart.scss
index 7c3987fe..33ebec62 100644
--- a/src/assets/css/components/views/charts2/dnsEventChart.scss
+++ b/src/assets/css/components/views/charts2/dnsEventChart.scss
@@ -1,7 +1,7 @@
.dns-event-chart {
width: 100%;
height: 100%;
- border: 1px solid #E2E5EC;
+ border: 1px solid $--border-color;
border-radius: 4px;
display: flex;
justify-content: space-between;
diff --git a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
index a81dd3a2..c3984d3f 100644
--- a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
+++ b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
@@ -1,7 +1,7 @@
.el-popper.analysis-popper {
- top: -5px !important;
+ margin-top: -5px !important;
padding: 0;
- border: 1px solid #C5C5C5;
+ border: 1px solid #C5C5C5 !important;
border-radius: 4px;
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
diff --git a/src/assets/css/components/views/charts2/entityDetailLine.scss b/src/assets/css/components/views/charts2/entityDetailLine.scss
index 07fbb450..6bac0d7a 100644
--- a/src/assets/css/components/views/charts2/entityDetailLine.scss
+++ b/src/assets/css/components/views/charts2/entityDetailLine.scss
@@ -8,7 +8,7 @@
align-items: center;
& > .el-select {
- width: 162px;
+ width: 162px !important;
margin-right: 10px;
.select-prefix {
@@ -34,15 +34,23 @@
.line-select-metric {
margin-right: 20px;
- .el-input__inner {
+ .el-select__wrapper {
width: 127px;
height: 24px;
line-height: 24px;
+ min-height: 24px !important;
padding-left: 4px;
font-size: 12px;
- color: #2C72C6;
font-weight: 400;
border-radius: 2px;
+ .el-select__placeholder {
+ color: #2C72C6 !important;
+ margin-left: 1px;
+ }
+ .el-select__suffix {
+ margin-right: -2px;
+ margin-top: 2px;
+ }
}
}
diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss
index 312bcaa0..20b564d0 100644
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -7,7 +7,7 @@
.network-overview-apps-title {
font-size: 14px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 600;
display: flex;
align-items: flex-end;
@@ -20,7 +20,7 @@
&>span {
font-size: 12px;
- color: #575757;
+ color: $--text-color-2;
font-weight: 400;
margin-right: 3px;
}
@@ -45,7 +45,7 @@
.el-select__caret {
line-height: 24px;
width: 16px;
- color: #575757;
+ color: $--text-color-2;
}
}
}
@@ -62,14 +62,14 @@
padding-top: 10px;
.app-card {
- border: 1px solid #E2E5EC;
+ border: 1px solid $--border-color;
border-radius: 4px;
display: flex;
height: 100px;
flex-direction: column;
&.app-card--create {
- background-color: #F7F7F7;
+ background-color: $--block-bg-color-1;
justify-content: center;
align-items: center;
@@ -81,7 +81,7 @@
}
span {
font-size: 12px;
- color: #353636;
+ color: $--text-color-1;
cursor: pointer;
}
}
@@ -119,12 +119,12 @@
border-radius: 2px;
font-size: 12px;
padding-left: 6.8px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 400;
i {
margin-right: 5.67px;
font-size: 12px;
- color: #575757;
+ color: $--text-color-2;
}
}
.app-card-title-more-delete:hover {
@@ -155,7 +155,7 @@
display: flex;
.app-card__body-content-number {
font-size: 14px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 700;
margin-right: 6px;
}
@@ -171,7 +171,7 @@
justify-content: center;
position: relative;
top: 50%;
- color: #717171;
+ color: $--text-color-3;
margin-top: -10px;
background-color: rgba(113, 113, 113, 0.12);
}
@@ -188,12 +188,12 @@
margin-top: -2px;
margin-bottom: 2px;
font-size: 12px;
- color: #778391;
+ color: $--text-color-3;
}
.app-card__body-previous {
display: flex;
font-size: 12px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 400;
div:nth-of-type(1) {
margin-right: 5px;
@@ -207,6 +207,10 @@
.add-app-drawer {
height: 526px !important;
+ .el-drawer__body {
+ padding: 0 !important;
+ }
+
.add-app {
display: flex;
flex-direction: column;
@@ -216,14 +220,14 @@
display: flex;
justify-content: space-between;
height: 46px;
- background-color: white;
+ background-color: $--select-bg-color-1;
.header__title {
padding-left: 20px;
font-size: 16px;
font-weight: bold;
line-height: 46px;
- color: #353636;
+ color: $--text-color-1;
}
.header__operations {
display: flex;
@@ -261,6 +265,12 @@
flex: 1;
position: relative;
}
+ .el-tabs__item {
+ display: inline-block;
+ }
+ .el-tabs__item:hover {
+ color: #046eca;
+ }
.el-tabs__item.is-top {
height: 50px;
line-height: 60px;
@@ -280,18 +290,25 @@
right: 28px;
top: 11px;
width: 280px;
- .el-input.el-input--mini {
- .el-input__inner {
- background: #FFFFFF;
- border: 1px solid #DEDEDE;
- box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
- border-radius: 14px;
+ .el-input__wrapper {
+ border-radius: 14px;
+ font-size: 12px;
+ .el-input.el-input--mini {
+ .el-input__inner {
+ font-size: 12px !important;
+ //background: #FFFFFF;
+ //border: 1px solid #DEDEDE;
+ //box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+ //border-radius: 14px;
+ }
}
- &.el-input--prefix {
+ .el-input__prefix-inner {
i {
- color: #575757;
+ color: $--text-color-2;
font-size: 16px;
font-weight: 600;
+ margin-left: -2px;
+ margin-right: 6px
}
}
}
@@ -350,7 +367,7 @@
.body__app-left-title {
font-family: Helvetica-Bold;
font-size: 16px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 700;
margin-bottom: 6px;
}
@@ -375,7 +392,7 @@
}
.body__app-value {
font-size: 12px;
- color: #717171;
+ color: $--text-color-3;
line-height: 18px;
font-weight: 400;
max-height: 54px;
diff --git a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
index 7b2ec15b..14bcf362 100644
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
@@ -1,11 +1,11 @@
.ddos-detection {
height: 100%;
- border: 1px solid #E2E5EC;
+ border: 1px solid $--border-color;
border-radius: 4px;
background: rgba(113,113,113,0.06);
.ddos-detection-title {
font-size: 14px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 600;
margin-top: 15px;
i {
@@ -34,7 +34,7 @@
flex-direction: column;
.ddos-detection-type-value-name {
font-size: 12px;
- color: #575757;
+ color: $--text-color-2;
line-height: 12px;
font-weight: 400;
margin-bottom: 12px;
@@ -53,23 +53,27 @@
.el-button {
margin-right: 20px;
width: 117px;
+ height: 29.6px;
min-height: 28px;
- background: #FBFBFB;
- border: 1px solid #C5C5C5;
+ background: $--button-color-1;
+ border: 1px solid $--border-color-1;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
span {
font-size: 12px;
- color: #575757;
+ color: $--text-color-2;
font-weight: 500;
i {
- transform: rotate(-90deg);
- color: #575757;
+ //transform: rotate(-90deg);
+ color: $--text-color-2;
font-size: 12px;
margin-left: 4px;
}
}
+ &:hover {
+ background: $--button-bg-color-1 !important;
+ }
}
}
}
diff --git a/src/assets/css/components/views/charts2/networkOverviewLine.scss b/src/assets/css/components/views/charts2/networkOverviewLine.scss
index f4c92ae0..e7c736cf 100644
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss
@@ -2,7 +2,7 @@
height: 100%;
width: 100%;
position: relative;
- border: 1px solid #E2E5EC;
+ border: 1px solid $--border-color;
border-radius: 4px;
.chart-drawing {
height: 100%;
@@ -35,6 +35,10 @@
display: flex;
//flex: 1;
.line-select__operation {
+ .el-select__wrapper {
+ height: 24px !important;
+ min-height: 24px !important;
+ }
.el-input__inner {
width: 100px;
}
@@ -42,6 +46,10 @@
.line-select-reference-line {
margin-right: 20px;
.line-select__operation {
+ .el-select__wrapper {
+ height: 24px !important;
+ min-height: 24px !important;
+ }
.el-input__inner {
width: 127px;
}
@@ -54,17 +62,36 @@
display: flex;
align-items: center;
.line-select__operation {
+ min-width: 127px;
height: 24px;
margin-left: 3px;
box-shadow: none;
border-radius: 2px;
- .el-input__inner {
- padding-left: 4px;
- line-height: 24px;
+ .el-select__wrapper {
+ min-height: 24px !important;
+ //padding-left: 4px;
+ line-height: 24px !important;
height: 24px;
font-size: 12px;
- color: #2C72C6;
+ color: $--text-color-6;
font-weight: 400;
+ padding: 5px 6px 4px 5px !important;
+ .el-select__placeholder {
+ color: $--text-color-6;
+ }
+ .el-select__suffix {
+ .el-icon {
+ color: #575757;
+ }
+ }
+ //.el-input__inner {
+ // padding-left: 4px;
+ // line-height: 24px;
+ // height: 24px;
+ // font-size: 12px;
+ // color: #2C72C6;
+ // font-weight: 400;
+ //}
}
.el-input__suffix {
display: flex;
@@ -111,14 +138,14 @@
.line-value-unit-number {
font-family: Helvetica-Bold;
font-size: 28px;
- color: #353636;
+ color: $--text-color-1;
margin-right: 4px;
}
.line-value-unit-number2 {
font-size: 0;
span {
font-size: 12px;
- color: #575757;
+ color: $--text-color-2;
font-weight: 400;
}
}
diff --git a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
index c04484dc..1a68dcb7 100644
--- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
@@ -1,12 +1,12 @@
.performance-event {
height: 100%;
- border: 1px solid #E2E5EC;
+ border: 1px solid $--border-color;
border-radius: 4px;
background: rgba(113,113,113,0.06);
.performance-event-title {
margin-top: 15px;
font-size: 14px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 600;
line-height: 1;
i {
@@ -24,7 +24,7 @@
height: 1px;
width: calc(100% - 40px);
margin: auto;
- background: #E2E5EC;
+ background: $--border-color;
}
.performance-event-pie {
position: relative;
@@ -38,26 +38,30 @@
}
.pie-button.el-button {
width: 96px;
+ height: 29.6px;
}
.el-button {
width: 117px;
min-height: 28px;
- background: #FBFBFB;
- border: 1px solid #C5C5C5;
+ background: $--button-color-1;
+ border: 1px solid $--border-color-1;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
margin-left: 30px;
span {
font-size: 12px;
- color: #575757;
+ color: $--text-color-2;
font-weight: 500;
i {
- transform: rotate(-90deg);
- color: #575757;
+ //transform: rotate(-90deg);
+ color: $--text-color-2;
font-size: 12px;
margin-left: 4px;
}
}
+ &:hover {
+ background: $--button-bg-color-1 !important;
+ }
}
}
diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
index 2d5bd888..9a026ff4 100644
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -52,11 +52,11 @@
display:flex;
flex-direction:column;
align-items: flex-start;
- color: #778391;
+ color: $--text-color-3;
font-weight: 400;
.data-column__span {
font-weight: bold;
- color:#353636;
+ color: $--text-color-1;
}
.unit__span {
color: #778391;
@@ -122,9 +122,9 @@
}
}
.tab-table__average {
- border: 1px solid #E2E5EC;
+ border: 1px solid $--border-color;
border-radius: 4px 4px 0 0;
- padding: 1px;
+ //padding: 1px;
.data-click:hover{
cursor: pointer;
}
@@ -187,7 +187,7 @@
height: 0px;
}
.el-table thead {
- color: $grey;
+ color: $--text-color-1;
}
.el-table__empty-text{
line-height:20px !important;
@@ -198,6 +198,7 @@
justify-content: center;
align-items: flex-start;
line-height:18px;
+ padding: 1px 10px 0 11px !important;
.caret-wrapper {
margin-top:3px;
}
@@ -228,6 +229,13 @@
background: #749F4D;
}
}
+ .el-table__border-left-patch {
+ width: 0;
+ }
+ .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
+ width: 0;
+ height: 0;
+ }
}
.el-tabs__header {
margin-bottom: 10px;
@@ -245,8 +253,8 @@
}
.el-tabs__item {
padding: 0 10px;
- height: 33px;
- color: $grey;
+ height: 40px;
+ color: $--text-color-1;
font-size: 14px;
&.el-tabs__item.is-top.is-active {
@@ -340,8 +348,153 @@
}
}
}
+.customize-tab__popper{
+ max-height:405px;/*calc(100% - 136px);*/
+ overflow:hidden;
+ padding: 0px !important;
+ background: #FFFFFF;
+ /*border: 1px solid #C5C5C5;*/
+ border:1px solid #C5C5C5 !important;
+ box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+ border-radius: 2px !important;
+ .el-popper {
+ max-height: 405px;
+ }
+ .el-tabs__header{
+ font-size: 12px;
+ color:green !important;
+ font-weight: 500;
+ margin: 0px ;
+ border-bottom: 1px solid #E2E5EC;
+ height: 30px !important;
+ }
+ .el-tabs__content {
+ max-height: 358px !important;
+ margin:8px 0 6px 0;
+ }
+ .el-tabs__nav{
+ width:100%;
+ }
+ .el-tabs__nav-wrap {
+ margin-bottom: 0px !important;
+ }
+ .el-tabs__item{
+ width:50%;
+ text-align:center;
+ padding:0px;
+ height:30px;
+ line-height: 30px;
+ font-size: 12px;
+ color: #353636;
+ font-weight: 500;
+ }
+ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+ border-top: 3px solid #38ACD2;
+ }
+ .el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
+ border-radius: 2.5px 0 0 0;
+ }
+ .el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
+ border-radius: 0 2.5px 0 0 ;
+ border-left: 1px #E2E5EC solid !important;
+ }
+ .el-tabs--card > .el-tabs__header .el-tabs__item{
+ border-bottom: 0px ;
+ border-top: 3px solid white;
+ color: #353636;
+ }
+ .el-tabs--card > .el-tabs__header .el-tabs__nav {
+ border:0px ;
+ }
+
+ .list {
+ list-style: none;
+ padding-inline-start: 0px !important;
+ /*height:375px;*/
+ max-height: 358px !important;
+ overflow:auto;
+ margin:0 0;
+ .drag-move {
+ transition: transform 0.3s;
+ }
+
+ .list-item:last-child {
+ margin-bottom: 6px;
+ }
+ .list-item {
+ width:100%;
+ color: #575757;
+ margin-bottom: 0px;
+ height: 24px;
+ line-height: 24px;
+ text-align: left;
+ font-weight:400;
+ font-size:12px;
+
+ .icon-drag{
+ cursor: move;
+ margin-left:6px;
+ margin-right:3px;
+ }
+
+ .el-checkbox__input.is-checked .el-checkbox__inner {
+ width: 14px;
+ height: 14px;
+ background-color: #38ACD2;
+ border-color: #38ACD2;
+ border-radius: 2px;
+ }
+ .el-checkbox__input .el-checkbox__inner {
+ width: 14px;
+ height: 14px;
+ background-color: #F2F7F9;
+ border: 1px solid rgba(0,0,0,0.15);
+ border-radius: 2px;
+ }
+ .el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
+ font-size: 12px;
+ color: #575757;
+ font-weight: 400;
+ }
+ }
+ }
+ /*top:0px !important;
+ right:200px !important;
+ transform: translateY(126px) !important;*/
+}
+.fixed-row {
+ display:flex;
+ justify-content: flex-start;
+ align-items: center;
+ //background: white;
+ background: var(--el-bg-color);
+ width: 100%;
+ height:40px;
+ border:solid 1px $--border-color;
+ //border: 1px solid var(var(--el-border-color-lighter));
+ padding-left:10px !important;
+ text-align: left;
+ border-radius:0 0 4px 4px;
+ color:#046eca;
+ .fixed-button {
+ display:flex;
+ justify-content: center;
+ padding:7px 10px;
+ align-items: center;
+ height: 30px;
+ }
+ .fixed-button:hover {
+ cursor:pointer;
+ background: #e6f4ff;
+ box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+ border-radius: 4px;
+ }
+}
+.btn-up{
+ margin-top:40px;
+}
.tab-search__popper{
- top: -7px !important;
+ margin-top: -7px;
width:auto !important;
max-height:206px;
overflow:hidden;
@@ -354,10 +507,10 @@
width:100%;
padding: 4px 4px 0px 4px;
.el-input__inner{
- padding:0px 4px;
- background: #FFFFFF;
- border: 1px solid #C5C5C5;
- box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+ //padding:0px 4px;
+ //background: #FFFFFF;
+ //border: 1px solid #C5C5C5;
+ //box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
border-radius: 2px;
font-size: 12px;
/*color: rgba(87,87,87,0.60);*/
@@ -405,140 +558,3 @@
}
}
}
-.customize-tab__popper{
- max-height:405px;/*calc(100% - 136px);*/
- overflow:hidden;
- padding: 0px !important;
- background: #FFFFFF;
- /*border: 1px solid #C5C5C5;*/
- border:1px solid #C5C5C5 !important;
- box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
- border-radius: 2px !important;
- .el-popper {
- max-height: 405px;
- }
- .el-tabs__header{
- font-size: 12px;
- color:green !important;
- font-weight: 500;
- margin: 0px ;
- border-bottom: 1px solid #E2E5EC;
- }
- .el-tabs__content {
- max-height: 358px !important;
- margin:8px 0 6px 0;
- }
- .el-tabs__nav{
- width:100%;
- }
- .el-tabs__nav-wrap {
- margin-bottom: 0px !important;
- }
- .el-tabs__item{
- width:50%;
- text-align:center;
- padding:0px;
- height:30px;
- line-height: 30px;
- font-size: 12px;
- color: #353636;
- font-weight: 500;
- }
- .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
- border-top: 3px solid #38ACD2;
- }
- .el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
- border-radius: 2.5px 0 0 0;
- }
- .el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
- border-radius: 0 2.5px 0 0 ;
- border-left: 1px #E2E5EC solid !important;
- }
- .el-tabs--card > .el-tabs__header .el-tabs__item{
- border-bottom: 0px ;
- border-top: 3px solid white;
- }
- .el-tabs--card > .el-tabs__header .el-tabs__nav {
- border:0px ;
- }
-
- .list {
- list-style: none;
- padding-inline-start: 0px !important;
- /*height:375px;*/
- max-height: 358px !important;
- overflow:auto;
- margin:0 0;
- .drag-move {
- transition: transform 0.3s;
- }
-
- .list-item:last-child {
- margin-bottom: 6px;
- }
- .list-item {
- width:100%;
- color: #575757;
- margin-bottom: 0px;
- height: 24px;
- line-height: 24px;
- text-align: left;
- font-weight:400;
- font-size:12px;
-
- .icon-drag{
- cursor: move;
- margin-left:6px;
- margin-right:3px;
- }
-
- .el-checkbox__input.is-checked .el-checkbox__inner {
- background-color: #38ACD2;
- border-color: #38ACD2;
- border-radius: 2px;
- }
- .el-checkbox__input .el-checkbox__inner {
- background-color: #F2F7F9;
- border: 1px solid rgba(0,0,0,0.15);
- border-radius: 2px;
- }
- .el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
- font-size: 12px;
- color: #575757;
- font-weight: 400;
- }
- }
- }
- /*top:0px !important;
- right:200px !important;
- transform: translateY(126px) !important;*/
-}
-.fixed-row {
- display:flex;
- justify-content: flex-start;
- align-items: center;
- background: white;
- width: 100%;
- height:40px;
- border:solid 1px #E2E5EC;
- padding-left:10px !important;
- text-align: left;
- border-radius:0 0 4px 4px;
- color:#046eca;
- .fixed-button {
- display:flex;
- justify-content: center;
- padding:7px 10px;
- align-items: center;
- height: 30px;
- }
- .fixed-button:hover {
- cursor:pointer;
- background: #e6f4ff;
- box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
- border-radius: 4px;
- }
-}
-.btn-up{
- margin-top:40px;
-}
diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index 859eef28..492b7ebd 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -73,11 +73,14 @@
padding: 5px 0;
.data-column__span {
font-size: 12px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 600;
}
}
}
+ .el-table__cell {
+ padding: 13px 0;
+ }
.el-table__header-wrapper .el-table__header {
tr th:nth-last-child(-n+3) {
text-align: center;
@@ -86,7 +89,7 @@
.el-table__body-wrapper.is-scrolling-none {
height: 306px !important;
tr td {
- padding: 13px 0;
+ padding: 13px 0 !important;
}
tr td:nth-last-child(-n+3) {
text-align: center;
@@ -99,6 +102,7 @@
.data-total {
display: flex !important;
.data-total-category-icon {
+ margin-left: -2px;
i {
font-size: 16px;
margin-right: 12px;
@@ -120,6 +124,7 @@
width: 34px;
line-height: 20px;
text-align: center;
+ margin-left: -2px;
}
.data-score.data-score-red {
background: #E26154;
@@ -133,6 +138,7 @@
.data-score-no-data {
width: 34px;
text-align: center;
+ margin-left: -2px;
}
}
.data-total-value {
diff --git a/src/assets/css/components/views/charts2/npmAppEventTable.scss b/src/assets/css/components/views/charts2/npmAppEventTable.scss
index 67105ac2..cad88d6b 100644
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -47,7 +47,7 @@
padding: 4px 0;
.data-column__span {
font-size: 12px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 600;
}
}
@@ -116,4 +116,7 @@
left: 0;
top: 32px;
}
+ .el-table .cell {
+ padding: 0 10px !important;
+ }
}
diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss
index 28a2a211..2b627720 100644
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -24,12 +24,29 @@
position: absolute;
right: 10px;
top: 10px;
+ display: inline-block;
+
+ .el-select__wrapper {
+ font-size: 12px;
+ padding: 0;
+ }
.el-select__popper.map-select-down {
top: 32px !important;
.el-popper__arrow {
display: none;
}
}
+ .el-select__placeholder {
+ padding-left: 16px;
+ color: #2c72c6;
+ }
+ .el-select__prefix {
+ padding-left: 5px;
+ }
+ .el-select__suffix {
+ padding-right: 10px;
+ padding-bottom: 2px;
+ }
.map-select {
margin-left: 10px;
@@ -40,6 +57,19 @@
width: 110px;
}
}
+ .map-select__location {
+ &.el-select {
+ width: 222px;
+ }
+ .el-select__wrapper {
+ min-height: 28px;
+ height: 28px;
+ .el-select__placeholder {
+ padding-left: 4px;
+ color: #c0c4cc;
+ }
+ }
+ }
}
.map-legend {
display: flex;
diff --git a/src/assets/css/components/views/charts2/npmRecentEvents.scss b/src/assets/css/components/views/charts2/npmRecentEvents.scss
index ea104dfb..c85bd123 100644
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -20,12 +20,36 @@
border: 1px solid #E2E5EC;
border-radius: 4px;
padding: 1px;
+
+ .el-scrollbar__thumb {
+ background: rgba(0,0,0,0);
+ //width: calc(100% - 200px) !important;
+ }
+ .el-table__empty-block {
+ width: calc(100% - 2px) !important;
+ }
+ .el-table__empty-text {
+ line-height: 25px !important;
+ .table-no-data {
+ //margin-left: -2px !important;
+ .icon {
+ width: 30px;
+ height: 30px;
+ margin-left: 1px;
+ }
+ .table-no-data__title {
+ font-size: 14px;
+ color: #575757;
+ font-weight: 400;
+ }
+ }
+ }
.el-table__header-wrapper {
tr th {
padding: 4px 0;
.data-column__span {
font-size: 12px;
- color: #353636;
+ color: $--text-color-1;
font-weight: 600;
}
}
@@ -34,20 +58,6 @@
tr td {
padding: 6.75px 0;
}
- .el-table__empty-block .el-table__empty-text {
- line-height: 25px;
- .table-no-data {
- .icon {
- width: 30px;
- height: 30px;
- }
- .table-no-data__title {
- font-size: 14px;
- color: #575757;
- font-weight: 400;
- }
- }
- }
}
}
.data-recent-table {
@@ -106,4 +116,7 @@
.el-table--group::after,.el-table--border::after, .el-table::before {
height: 0px;
}
+ .el-table .cell {
+ padding: 0 10px !important;
+ }
}
diff --git a/src/assets/css/components/views/charts2/npmTabs.scss b/src/assets/css/components/views/charts2/npmTabs.scss
index d0daf613..af7618d9 100644
--- a/src/assets/css/components/views/charts2/npmTabs.scss
+++ b/src/assets/css/components/views/charts2/npmTabs.scss
@@ -18,6 +18,7 @@
&>.el-tabs__header {
background-color: white;
+ //background-color: #f00;
border-color: #E2E5EC;
.el-tabs__nav-wrap {
diff --git a/src/assets/css/components/views/charts2/npmTrafficLine.scss b/src/assets/css/components/views/charts2/npmTrafficLine.scss
index 6ca3a0a0..9b4d08d8 100644
--- a/src/assets/css/components/views/charts2/npmTrafficLine.scss
+++ b/src/assets/css/components/views/charts2/npmTrafficLine.scss
@@ -22,17 +22,37 @@
}
.line-select__operation {
height: 24px;
+ min-height: 24px;
margin-left: 3px;
box-shadow: none;
border-radius: 2px;
- .el-input__inner {
+ .el-select__wrapper {
width: 225px;
- height: 24px;
+ height: 24px !important;
+ min-height: 24px !important;
padding-left: 4px;
line-height: 24px;
font-size: 12px;
- color: #2C72C6;
font-weight: 400;
+ .el-select__placeholder {
+ color: #2C72C6;
+ margin-left: 1px;
+ }
+ .el-input__inner {
+ width: 225px;
+ height: 24px;
+ padding-left: 4px;
+ line-height: 24px;
+ font-size: 12px;
+ color: #2C72C6;
+ font-weight: 400;
+ }
+ .el-select__suffix {
+ margin-right: -7px;
+ i {
+ color: #575757 !important;
+ }
+ }
}
.el-input__suffix {
display: flex;
diff --git a/src/assets/css/components/views/charts2/panel.scss b/src/assets/css/components/views/charts2/panel.scss
index 90390276..f1f9c018 100644
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -21,7 +21,8 @@
font-size: 24px;
line-height: 24px;
font-weight: 900;
- color: #353636;
+ //color: #353636;
+ color: $--text-color-1;
display:flex;
.score {
.circle-icon {
@@ -76,7 +77,7 @@
display: flex;
&>.el-select {
- width: 162px;
+ width: 162px !important;
margin-right: 10px;
.select-prefix {
@@ -96,6 +97,22 @@
.panel__time {
display: flex;
}
+ .el-select__wrapper {
+ height: 28px !important;
+ min-height: 20px !important;
+ padding: 5px 7px 4px 5px !important;
+ .el-select__prefix {
+ .select-prefix {
+ margin-right: -5px !important;
+ }
+ }
+ .el-select__suffix {
+ .el-icon {
+ margin-left: -17px !important;
+ margin-top: -2px !important;
+ }
+ }
+ }
}
}
.chart-list {
diff --git a/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss b/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
index 7b9ceef3..ebb9e73a 100644
--- a/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
@@ -1,6 +1,17 @@
.form-setting__block {
width: 620px;
+ &.el-form-item {
+ margin-bottom: 20px;
+ margin-top: -4px;
+ }
+ .el-select__wrapper, .el-input__wrapper {
+ min-height: 24px !important;
+ height: 24px !important;
+ }
+ .el-switch__label.is-active {
+ color: $--text-color-1;
+ }
.el-form-item__label {
height: 14px;
line-height: 14px;
diff --git a/src/assets/css/components/views/detections/detection-create/detection-form.scss b/src/assets/css/components/views/detections/detection-create/detection-form.scss
index f82c0da9..ecc9dc56 100644
--- a/src/assets/css/components/views/detections/detection-create/detection-form.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form.scss
@@ -135,6 +135,16 @@
.el-collapse-item__content {
padding-bottom: 0 !important;
}
+ .el-input__wrapper, .el-select__wrapper {
+ height: 24px !important;
+ line-height: 24px !important;
+ min-height: 24px !important;
+ width: 112px;
+ margin: 0 12px;
+ }
+ .el-input__inner {
+ padding: 0 15px !important;
+ }
}
}
diff --git a/src/assets/css/components/views/detections/detection-filter.scss b/src/assets/css/components/views/detections/detection-filter.scss
index 091fc8dc..45e64dc9 100644
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -130,7 +130,10 @@
}
.new-detection-filter-content {
padding: 20px;
-
+ .el-checkbox {
+ display: inline-block !important;
+ height: auto !important;
+ }
.new-filter-content-title {
font-family: NotoSansHans-Medium;
font-size: 14px;
@@ -145,11 +148,12 @@
.new-filter-content-checkbox {
line-height: 16px;
- margin-bottom: 10px;
+ margin-bottom: 13.6px;
font-family: NotoSansSChineseRegular;
font-size: 14px;
color: #353636;
font-weight: 400;
+ display: flex !important;
.el-checkbox__inner {
width: 16px !important;
@@ -185,6 +189,7 @@
font-size: 14px;
color: #353636;
font-weight: 400;
+ padding-left: 10px !important;
}
}
}
diff --git a/src/assets/css/components/views/detections/detection-table.scss b/src/assets/css/components/views/detections/detection-table.scss
index c65a0eea..ce5eb322 100644
--- a/src/assets/css/components/views/detections/detection-table.scss
+++ b/src/assets/css/components/views/detections/detection-table.scss
@@ -1,4 +1,10 @@
.detection-table {
+ .el-table td, .el-table th {
+ padding: 12px 0;
+ }
+ .el-table .el-table__cell.is-center {
+ padding-top: 4px;
+ }
.el-table th > .cell, .el-table .cell {
padding-left: 0 !important;
padding-right: 0 !important;
diff --git a/src/assets/css/components/views/detections/detection-tools.scss b/src/assets/css/components/views/detections/detection-tools.scss
index a2f3b0f4..a5e97b10 100644
--- a/src/assets/css/components/views/detections/detection-tools.scss
+++ b/src/assets/css/components/views/detections/detection-tools.scss
@@ -129,6 +129,10 @@
.el-input--small {
line-height: 27px;
+ .el-input__wrapper {
+ height: 28px !important;
+ border-radius: 2px 0 0 2px !important;
+ }
.el-input__inner {
height: 28px;
diff --git a/src/assets/css/components/views/entityExplorer/entity-explorer.scss b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
index 7d5419bd..23f96654 100644
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -90,6 +90,8 @@
font-size: 14px;
color: #353636;
font-weight: 400;
+ height: 20.8px;
+ line-height: 20.8px;
.entity-hide-entity {
margin-left: 20px;
diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
index 9dd56ea0..a6a06d4b 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -64,6 +64,7 @@
i {
color: #23BF9A;
margin-right: 4px;
+ margin-top: 2px;
}
}
diff --git a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
index 478b35e3..510c17f9 100644
--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -161,6 +161,9 @@
padding-left: 18px;
}
}
+ .el-scrollbar__bar {
+ visibility: hidden;
+ }
}
.clear-all {
padding-left: 18px;
diff --git a/src/assets/css/components/views/report/report.scss b/src/assets/css/components/views/report/report.scss
index 20db63d4..8761760a 100644
--- a/src/assets/css/components/views/report/report.scss
+++ b/src/assets/css/components/views/report/report.scss
@@ -78,11 +78,37 @@
color: #1b2e3b;
background: #ebeef5;
}
+ .el-range-editor--small.el-input__wrapper {
+ height: 32px;
+ line-height: 32px;
+ }
.cn-detection__footer {
text-align: center;
+ display: flex;
+ justify-content: center;
.el-pagination__jump {
margin-left: 3px;
}
+ .el-pagination__goto {
+ display: none;
+ }
+ .el-input--small {
+ width: 46px !important;
+ .el-input__wrapper {
+ height: 22px;
+ }
+ }
+ .el-pagination--small {
+ .btn-prev {
+ margin-right: 10px;
+ }
+ .btn-next {
+ margin-left: 10px;
+ }
+ &span {
+ color: $--color-text-primary;
+ }
+ }
}
}
.block.drop-down-time {
@@ -176,6 +202,12 @@
}
}
}
+ .el-table__border-left-patch, .el-table--border::before {
+ width: 0;
+ }
+ .el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
+ height: 0;
+ }
}
}
.table-operation-all {
diff --git a/src/assets/css/components/views/setting/knowledgeBase.scss b/src/assets/css/components/views/setting/knowledgeBase.scss
index f3af03a8..44efdcea 100644
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -169,6 +169,8 @@
align-items: center;
.card-title-name {
width:100%;
+ height: 19.2px;
+ line-height: 19.2px;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space:nowrap;
@@ -996,6 +998,10 @@
padding-left: 20px;
overflow: auto;
+ .el-form--label-top .el-form-item .el-form-item__label {
+ margin-bottom: 3px !important;
+ }
+
.enable-form__mt {
.el-form {
margin-top:6px;
@@ -1176,6 +1182,7 @@
}
.el-textarea__inner {
padding-left: 8px;
+ font-size: 12px;
}
.form-select__disable {
@@ -1188,6 +1195,13 @@
.form-select__enable {
width: 100%;
+ .el-select__wrapper {
+ //padding-left: 22px !important;
+ .el-select__inner {
+ background-color: #521919 !important;
+ padding-left: 22px !important;
+ }
+ }
.el-input__inner {
background-color: white !important;
padding-left: 22px !important;
@@ -1899,6 +1913,7 @@
padding-top:0px;
padding-right:30px;
padding-left:30px;
+ padding-bottom:30px;
.dialog-message {
padding-left:0px !important;
padding-right:0px !important;
@@ -1920,12 +1935,21 @@
&.update-dialog__table--system-user {
height: calc(100% - 139px);
}
+ &.el-table .el-table__cell {
+ padding: 12px 0 !important;
+ }
+ &.el-table .el-table__row .el-table__cell {
+ padding: 8px 0 !important;
+ }
}
.update-knowledge-form {
.el-upload {
width:100%;
}
.form-input {
+ .el-input__wrapper {
+ padding: 1px 16px !important;
+ }
.el-input__inner{
padding-right: 50px !important;
font-size: 14px;
@@ -1936,7 +1960,8 @@
border: 1px solid rgba(222,222,222,1);
box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
border-radius: 2px;
- width:100%;
+ //width:100%;
+ width: 1020px;
height:28px;
min-height:28px !important;
color: #575757;
@@ -1962,6 +1987,16 @@
}
.knowledge-remark {
margin-bottom:0px !important;
+ .el-textarea__inner {
+ font-size: 12px;
+ padding: 5px 15px;
+ }
+ }
+ .el-form--label-top .el-form-item .el-form-item__label {
+ margin-bottom: 0 !important;
+ }
+ .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
+ line-height: 14px;
}
}
.dialog-footer {
diff --git a/src/assets/css/components/views/system/Plugin.scss b/src/assets/css/components/views/system/Plugin.scss
index 0de85e8d..541a0932 100644
--- a/src/assets/css/components/views/system/Plugin.scss
+++ b/src/assets/css/components/views/system/Plugin.scss
@@ -58,4 +58,7 @@
-webkit-line-clamp: 2; // 超出多少行
-webkit-box-orient: vertical;
}
+ .cn-table .el-table:not(.chart-table) td {
+ padding: 8px 0 !important;
+ }
}
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 02ab7b44..6c80af3a 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -27,18 +27,20 @@ $--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语
/* 主题 */
-.theme-light {
- $--theme: light;
- @import './themes/theme-light.scss'; // 加载主题变量
- @import './themes/src/index.scss'; // 加载ele样式
- @import './components/index'; // 加载cn组件样式
- @import './common/index.scss'; // 加载通用样式
-}
+$--color-text-primary: #303133 !default;
+$--border-color: #E2E5EC;
-.theme-dark {
+@import './themes/theme-light.scss'; // 加载主题变量
+@import './components/index'; // 加载cn组件样式
+@import './common/index.scss'; // 加载通用样式
+@import "common/cover-element-plus"; // 覆盖新版elemen-plus样式
+
+.dark {
$--theme: dark;
@import './themes/theme-dark.scss'; // 加载主题变量
- @import './themes/src/index.scss'; // 加载ele样式
@import './components/index'; // 加载cn组件样式
@import './common/index.scss'; // 加载通用样式
+ .fixed-button:hover {
+ background: #40474b !important;
+ }
}
diff --git a/src/assets/css/themes/THEME_README.md b/src/assets/css/themes/THEME_README.md
index bf66b293..837146ba 100644
--- a/src/assets/css/themes/THEME_README.md
+++ b/src/assets/css/themes/THEME_README.md
@@ -11,3 +11,23 @@
- theme-chalk/src/mixins/mixins.scss 改动较多,如需了解请比对文件差异
- // $arrow-selector: #{& + '__arrow'};
改为 $arrow-selector: '.el-popper__arrow';
+
+### 20240118__element-plus升级
+#### 变动事项
+
+- elemen-plus由1.0.2-beta.71升级至2.5.1,旧版本是将element-plus源文件放到theme/src中进行部分修改使用,现在弃用该方案,直接使用element-plus组件,部分组件有差异改动,对比界面进行调整并记录在cover-element.scss
+- 弃用之前的主题写法,改为官网的主题切换方法。删除body上的class,在html上添加class="dark"。默认明亮主题light,暗黑主题dark,默认引入theme-light.scss样式文件,暗黑主题theme-dark.scss样式文件
+- 如需添加暗黑样式,先在theme-light.scss添加唯一样式名,再到theme-dark中添加同名样式。如在light中添加字体颜色$--text-color-1: #353636;,则需要在dark中添加$--text-color-1: #d8d8d8;
+- header.vue的第四级面包屑导航栏,以及NetworkOverviewTabs.vue第一列搜索的popover。原结构的popover被上一层div包裹,但在html中解析成两个div,原来的popper-class需要提出来,不要在原div的class下,否则样式错乱
+
+#### 新旧组件差异
+
+- table表格:自定义单元格样式cell-style。老版cell-style接受格式为string/object,新版疑似仅接受object,string格式会报错。表头格式header-cell-style同理。
+- input输入框1:老版el-input是包含class为el-input__inner的input,新版el-input在此基础上被class="el-input__wrapper"的div包裹。在老版的el-input__inner改动的样式,需要在el-input__wrapper上修改
+- input输入框2:老版给input添加icon,是给属性prefix-icon添加icon名。新版是在prefix插槽里添加icon标签
+- icon图标:老版使用:。新版则是svg文件,需要单独引入封装成component的格式,使用时:
+- select选择器:新版被el-select__wrapper的div包裹,与旧版顺序不同。
+- * input和select的右侧图标和maxlength间距新版比旧版略大
+- drawer抽屉:在header.vue中遇到,custom-class="cn-menu",渲染后class中没有cn-menu,也许是按需引入导致的,额外标注
+- message-box弹窗:新版在旧版的el-message-box的外层包裹了一层父div el-overlay-message-box,导致原样式会错乱
+- dialog: custom在2.4版本后被移除,使用class替代,插槽中的title也在2.4版本后移除,使用header替代
diff --git a/src/assets/css/themes/src/table-column.scss b/src/assets/css/themes/src/table-column.scss
index fd786ead..31bbc429 100644
--- a/src/assets/css/themes/src/table-column.scss
+++ b/src/assets/css/themes/src/table-column.scss
@@ -94,4 +94,4 @@
margin-bottom: 0;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/themes/theme-dark.scss b/src/assets/css/themes/theme-dark.scss
index 042c3d96..90484333 100644
--- a/src/assets/css/themes/theme-dark.scss
+++ b/src/assets/css/themes/theme-dark.scss
@@ -60,3 +60,23 @@ $--border-color-light: #E7EAED;
$--chart-box-border-color: $--border-color-light;
$--chart-title-hover-background-color: #323238;
@import './common';
+
+
+$--border-color: #363637;
+$--text-color-1: #d8d8d8;
+$--text-color-2: #afafaf;
+$--text-color-3: #a4adb7;
+$--text-color-4: #BEBEBE;
+$--text-color-5: #D8D8D8;
+$--text-color-6: #2764ad;
+
+$--button-color-1: #1D1D1D;
+$--button-bg-color-1: #303030;
+$--border-color-1: var(--el-text-color-disabled);
+$--border-color-2: #6C6E72;
+
+$--select-bg-color-1: #1D1E1F;
+$--select-bg-color-hover-1: #18222C;
+$--select-bg-color-hover-2: #18222C;
+
+$--block-bg-color-1: #181818;
diff --git a/src/assets/css/themes/theme-light.scss b/src/assets/css/themes/theme-light.scss
index ec0ca16c..cc08f726 100644
--- a/src/assets/css/themes/theme-light.scss
+++ b/src/assets/css/themes/theme-light.scss
@@ -61,3 +61,22 @@ $--border-color-light: #E7EAED;
$--chart-box-border-color: $--border-color-light;
$--chart-title-hover-background-color: $--background-color-1;
@import './common';
+
+$--text-color-1: #353636;
+$--text-color-2: #575757;
+$--text-color-3: #778391;
+$--text-color-4: #666666;
+$--text-color-5: #333333;
+$--text-color-6: #2C72C6;
+
+$--button-color-1: #FBFBFB;
+$--button-bg-color-1: #EBF1F4;
+$--border-color-1: #C5C5C5;
+$--border-color-2: #E2E5EC;
+$--border-color-3: #DEDEDE;
+
+$--select-bg-color-1: #FFFFFF;
+$--select-bg-color-hover-1: #f9f9f9;
+$--select-bg-color-hover-2: #F2F9FF;
+
+$--block-bg-color-1: #F7F7F7;
diff --git a/src/components/advancedSearch/TagMode.vue b/src/components/advancedSearch/TagMode.vue
index 007f6794..cc5296b8 100644
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -7,9 +7,13 @@
>
-
+
+
+
+
diff --git a/src/components/advancedSearch/TextMode.vue b/src/components/advancedSearch/TextMode.vue
index 50cc0242..63fefde7 100644
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -11,7 +11,7 @@
@@ -21,11 +21,13 @@
-
+
+
-
+
+
diff --git a/src/components/common/popBox/TopToolMoreOptions.vue b/src/components/common/popBox/TopToolMoreOptions.vue
index 10d88712..c091b63d 100644
--- a/src/components/common/popBox/TopToolMoreOptions.vue
+++ b/src/components/common/popBox/TopToolMoreOptions.vue
@@ -29,7 +29,7 @@
action=""
class="upload-demo"
drag>
-
+
{{$t('overall.dragFileTip')}},{{$t('overall.or')}} {{$t('overall.clickUpload')}}
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 9515ea28..d7264370 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -35,6 +35,12 @@
+
+
+
+
+
+
@@ -46,8 +52,9 @@