diff --git a/src/assets/css/common/cover-element-plus.scss b/src/assets/css/common/cover-element-plus.scss index 1704e55c..3ece9d97 100644 --- a/src/assets/css/common/cover-element-plus.scss +++ b/src/assets/css/common/cover-element-plus.scss @@ -8,10 +8,10 @@ } .el-table--border::before, .el-table__border-left-patch { - //width: 0 !important; + width: 0 !important; } .el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before { - //height: 0 !important; + height: 0 !important; } .el-popper.is-pure { @@ -66,3 +66,25 @@ .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/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 3590af45..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 { 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 a5f3513e..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 @@ -144,6 +144,9 @@ background: $--select-bg-color-hover-1; } } + .el-range-editor.el-input__wrapper{ + opacity: 0; + } } .date-range-panel-content-right { diff --git a/src/assets/css/components/components/rightBox/report/reportBox.scss b/src/assets/css/components/components/rightBox/report/reportBox.scss index 4ac674b8..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,6 +150,9 @@ border: 1px solid #dcdfe6; border-radius: 2px 0 0 2px; } + .el-select__wrapper { + padding-left: 0 !important; + } } } .my-form-item .el-form-item__content { 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/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/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 a8fe5573..a0f95128 100644 --- a/src/assets/css/components/views/system/Plugin.scss +++ b/src/assets/css/components/views/system/Plugin.scss @@ -43,4 +43,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/themes/THEME_README.md b/src/assets/css/themes/THEME_README.md index 0d022a63..837146ba 100644 --- a/src/assets/css/themes/THEME_README.md +++ b/src/assets/css/themes/THEME_README.md @@ -12,10 +12,10 @@ - // $arrow-selector: #{& + '__arrow'}; 改为 $arrow-selector: '.el-popper__arrow'; -### 20240118element-plus升级 +### 20240118__element-plus升级 #### 变动事项 -- elemen-plus由1.0.2-beta.71升级至2.5.1,旧版本是将element-plus源文件放到theme/src中进行部分修改使用,现在启用该方法,直接使用element-plus组件,部分组件有差异改动,对比界面进行调整并记录在xxx.scss +- 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下,否则样式错乱 @@ -28,4 +28,6 @@ - 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/components/layout/Header.vue b/src/components/layout/Header.vue index 6da5b2b3..3ccc4640 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -135,6 +135,7 @@ direction="ttb" custom-class="cn-menu" modal-class="cn-menu-modal" + class="cn-menu" :with-header="false" :show-close="false" > diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue index 1ed5fa35..7f6ce74f 100644 --- a/src/components/rightBox/settings/RoleBox.vue +++ b/src/components/rightBox/settings/RoleBox.vue @@ -27,8 +27,8 @@ diff --git a/src/components/table/administration/OperationLogTable.vue b/src/components/table/administration/OperationLogTable.vue index c2eb657d..2d8fc378 100644 --- a/src/components/table/administration/OperationLogTable.vue +++ b/src/components/table/administration/OperationLogTable.vue @@ -157,3 +157,9 @@ export default { } } + + diff --git a/src/components/table/report/ReportTable.vue b/src/components/table/report/ReportTable.vue index 9eb3d7be..6176f68c 100644 --- a/src/components/table/report/ReportTable.vue +++ b/src/components/table/report/ReportTable.vue @@ -3,8 +3,9 @@ + + diff --git a/src/components/table/setting/knowledgeBaseTableForCard.vue b/src/components/table/setting/knowledgeBaseTableForCard.vue index ad3c98b2..e6108063 100644 --- a/src/components/table/setting/knowledgeBaseTableForCard.vue +++ b/src/components/table/setting/knowledgeBaseTableForCard.vue @@ -32,7 +32,7 @@
@@ -107,9 +107,8 @@ 'update-dialog__table--psiphon3': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab === 'intelligenceLearning', 'update-dialog__table--system-user': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab !== 'intelligenceLearning' }" - :header-cell-style="{background:'#f5f7fa',color:'#353636',fontWeight: '400',fontSize: '12px',borderRight: 'none',borderBottom: 'none'}" - cell-style="padding:6px 0px;font-size: 12px;color: #353636;font-weight: 400;line-height: 20px;border-right:none;" - header-cell-style="padding:8px 0px;font-size: 12px;color: #353636;font-weight: 500;border-right:none;"> + :cell-style="myCellStyle" + :header-cell-style="myHeaderCellStyle">