gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-1072 feat: 主题切换

Browse Source
This commit is contained in:
chenjinsong
2021-11-01 17:23:01 +08:00
parent 1e017d3060
commit 914c096463
395 changed files with 23682 additions and 23372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/index.html
View File

@@ -35,9 +35,8 @@
</style>
</head>
<body>
<body class="theme-light">
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

12
nezha-fronted/src/App.vue
View File

@@ -35,15 +35,3 @@ export default {
width: 100%;
}
</style>
<style>
.app {
height: 100%;
overflow-y: hidden;
}
.app>.el-scrollbar__wrap>.el-scrollbar__view {
height: 100%;
}
.app>.el-scrollbar__bar.is-vertical {
display: none;
}
</style>

30
nezha-fronted/src/assets/css/THEME_README.md Normal file
View File

@@ -0,0 +1,30 @@
# 主题功能说明
### 说明
- 对项目中的主题相关颜色进行归类、抽取变量
- 代码中设置元素的颜色时，对主题相关色应使用变量，不应使用颜色值
- 切换主题时，更改body标签上的class
- 主题色归类变更时，需维护此文件
### 主题色归类
#### 1.主色
软件的主色，包括按钮、高亮、强调等时候的颜色
`确定按钮(保存、确认、提交)` &nbsp;`高亮字色` &nbsp;`背景色`
#### 2.背景色
- 空白背景色，默认主题下是白色
- 基础背景色，`表头` &nbsp;`小标题` &nbsp;`标签`
#### 3.字色
- 标题字色，`表头` &nbsp;`标题` &nbsp;`强调`
- 普通字色，`小标题` &nbsp;`正文`&nbsp;`普通`
- 次要字色，`提示` &nbsp;`说明`&nbsp;`次要`
#### 4.边框色
- 普通边框色，`输入框` &nbsp;`下拉框` &nbsp;`复选框`
- 浅边框色
#### 5.提示色
`成功` &nbsp;`警告` &nbsp;`危险` &nbsp;`普通` &nbsp;`复选框`

60
nezha-fronted/src/assets/css/common.scss
View File

@@ -7,6 +7,7 @@
height: 42px;
animation: loading-rotate 2s linear infinite;
display: none;
background-color: $--background-color-empty;
}
.el-loading-mask .el-loading-spinner{
background: url(~@/assets/img/loading.gif) no-repeat;
@@ -26,66 +27,47 @@
left: unset !important;
top: 30px;
}
//.nz-dropdown::after {
// content: '';
// display: block;
// width:0;
// height:0;
// overflow: hidden;
// font-size: 0;
// line-height: 0;
// border: 5px;
// border-style: dashed dashed solid dashed;
// border-color: transparent transparent #fff transparent;
// position: absolute;
// right: 3px;
// top: 44px;
// transform: translate(-50%, -54px);
//}
.el-checkbox__inner, .el-input__inner {
border-color: rgba(0,0,0,0.15)
}
.nz-icon-copy {
padding: 0 4px;
color: $--theme-color;
color: $--color-primary;
background-color: #FDF5E9;
border-radius: $--primary-border-radius;
border-radius: $--border-radius-small;
cursor: pointer;
}
.red {
color: $--danger-color !important;
color: $--color-danger !important;
}
.green {
color:$--success-color !important;
color:$--color-success !important;
}
.gray {
color: $--suspended-color !important;
color: $--color-suspended !important;
}
.monitorColor {
color: $--monitor-color !important;
color: $--color-monitor !important;
}
.dark-red {
color: #aa0000 !important;
}
.orange {
color: var(--theme-color) !important;
color: $--color-primary !important;
}
.red-bg {
background-color: $--danger-color !important;
background-color: $--color-danger !important;
}
.green-bg {
background-color:$--success-color !important;
background-color:$--color-success !important;
}
.gray-bg {
background-color: $--suspended-color !important;
background-color: $--color-suspended !important;
}
.dark-red-bg {
background-color: #aa0000 !important;
}
.orange-bg {
background-color: var(--theme-color) !important;
background-color: $--color-primary !important;
}
.timezone-area{
display: inline-block;
@@ -95,7 +77,7 @@
float: left;
margin-left: 10px;
font-family: PingFangSC-Regular;
color: #333333;
color: $--color-text-primary;
line-height: 20px;
font-weight: 400;
margin-top: 3px;
@@ -111,7 +93,7 @@
font-size: 14px;
margin-right: 10px;
font-family: PingFangSC-Regular;
color: #333333;
color: $--color-text-primary;
line-height: 20px;
font-weight: 400;
}
@@ -146,7 +128,7 @@
vertical-align: middle;
font-family: Roboto-Regular;
font-size: 15px;
color: #333333;
color: $--color-text-primary;
font-weight: 400;
}
.personal-dropdown__name {
@@ -157,8 +139,18 @@
vertical-align: middle;
font-family: Roboto-Regular;
font-size: 14px;
color: #999999;
color: $--color-text-secondary;
font-weight: 400;
padding-bottom: 10px;
}
}
td .nz-icon-gear:before{
color: $--color-text-regular;
}
.el-dropdown-menu {
background-color: $--background-color-empty !important;
border-color: transparent;
box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
border-radius: 2px;
}

204
nezha-fronted/src/assets/css/common/button.scss Normal file
View File

@@ -0,0 +1,204 @@
.nz-btn {
border-radius: $--button-border-radius;
cursor: pointer;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
white-space: nowrap;
font-size: 14px;
line-height: 16px;
position: relative;
}
.to-top {
position: fixed;
right: 17px;
border-radius: 50%;
height: 40px;
width: 40px;
border: none;
cursor: pointer;
opacity: 0;
background-color: #aaa;
outline: none;
z-index: 100;
color: white;
transition: opacity .2s linear, top .2s linear;
transform: translateY(-50%);
bottom: 35px;
}
.to-top.to-top-is-hover, .nz-table .el-table__body-wrapper.ps--scrolling-y .to-top {
opacity: 0.5;
}
.to-top>i {
font-size: 20px;
}
.to-top:hover {
opacity: 1;
color: white;
}
.nz-btn.nz-btn-size-normal {
font-size: 12px;
height: 28px;
padding: 0 8px;
}
.nz-btn.nz-btn-size-small {
font-size: 12px;
padding: 2px 5px;
}
.nz-btn.nz-btn-size-small i {
font-size: 12px;
}
.nz-btn-size-large {
padding: 0 15px;
height: 28px;
}
.nz-btn.nz-btn-style-light { /* 浅色按钮 */
background-image: $--background-color-empty;
border:0;
color: $--color-text-regular;
box-shadow: 0 0 1px 1px rgba(162,162,162,0.50);
letter-spacing: 0;
}
.nz-btn.nz-btn-style-pure-white { /*纯白色按钮*/
background-color: $--background-color-empty;
color: #444;
border: 1px solid #dcdfe6;
}
.nz-btn.nz-btn-size-small.nz-btn-style-square { /* 单图标时是个正方形*/
padding: 2px 5px;
}
.nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标时是个正方形*/
padding: 4px 6px;
}
.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) {
//background-image: $--background-color-empty-hover;
}
.nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) {
background-color: $--border-color-base;
}
.nz-btn.nz-btn-size-normal-new{
height: 30px;
line-height: 30px;
text-align: center;
min-width: 74px;
padding: 0 10px;
}
.nz-btn.nz-btn-size-small-new{
height: 24px;
line-height: 22px;
text-align: center;
min-width: 60px;
padding: 0 10px;
}
.nz-btn.nz-btn-size-mini-new{
height: 22px;
line-height: 22px;
text-align: center;
min-width: 40px;
padding: 0 5px;
}
.nz-btn.nz-btn-style-normal { /* 新版橙色按钮 */
background: $--color-primary;
color: white;
border: 1px solid $--color-primary;
}
.nz-btn.nz-btn-style-error-new { /* 新版红色色按钮 */
background: #EF7C62;
color: white;
border: 1px solid #EF7C62;
}
.nz-btn.nz-btn-style-light-new { /* 新版浅色按钮 */
background: $--background-color-empty;
border: 1px solid $--border-color-base;
color: $--color-text-regular;
letter-spacing: 0;
}
.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { /* 新版橙色按钮hover */
background: $--color-primary;
color: white;
border: 1px solid $--color-primary;
}
.nz-btn.nz-btn-style-error-new:hover:not(.nz-btn-disabled) { /* 新版红色按钮hover */
background: #F38b73;
color: white;
border: 1px solid #F38b73;
}
.nz-btn.nz-btn-style-light-new:hover:not(.nz-btn-disabled) { /* 新版浅色按钮hover */
border: 1px solid rgba(250,144,28,0.3);
color: $--color-text-regular;
letter-spacing: 0;
}
.nz-btn.nz-btn-style-normal:active:not(.nz-btn-disabled) { /* 新版橙色按钮active' */
background: $--color-primary;
color: white;
border-color: $--color-primary;
}
.nz-btn.nz-btn-style-error-new:active:not(.nz-btn-disabled) { /* 新版红色按钮active' */
background: #EF7C62;
color: white;
border-color: #Eb6D51;
}
.nz-btn.nz-btn-style-light-new:active:not(.nz-btn-disabled) { /* 新版浅色按钮active*/
border: 1px solid $--color-primary;
color: $--color-primary;
letter-spacing: 0;
}
.nz-btn:focus {
outline: 0;
}
.nz-btn .nz-btn-text{
font-weight: 500;
white-space: nowrap;
}
.nz-btn-disabled {
background-image: none;
opacity: .6;
cursor: default !important;
}
.nz-btn-group {
border-radius: 2px;
display: flex;
}
.nz-btn-group-size-small {
max-height: 24px;
}
.nz-btn-group .nz-btn:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.gray-filter {
filter: opacity(50%);
}
.nz-btn-group .nz-btn:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.nz-btn-group .nz-btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.nz-btn-group .nz-btn {
box-shadow: none;
vertical-align: top;
}
.nz-btn-group .nz-btn:not(:last-of-type) {
border-right: 1px solid rgba(162,162,162,0.50);
}
.nz-btn-group.nz-btn-group-light {
box-shadow: 0 0 1px 1px rgba(162,162,162,0.50);
}
.nz-btn-group .nz-input-group-middle input {
border-radius:0 !important;
border: none;
border-right: 1px solid rgba(162,162,162,0.50) !important;
}
.nz-btn-group .nz-input-group-left input {
border-radius: 4px 0 0 4px !important;
border: none;
border-right: 1px solid rgba(162,162,162,0.50) !important;
}
.nz-btn-group .nz-input-group-right input {
border-radius:0 4px 4px 0 !important;
border: none;
}

25
nezha-fronted/src/assets/css/common/checkbox.scss Normal file
View File

@@ -0,0 +1,25 @@
.el-checkbox__input.is-focus .el-checkbox__inner,
.el-checkbox__input .el-checkbox__inner:hover,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: $--color-primary;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: $--color-primary !important;
}
.el-checkbox__inner {
width: 16px !important;
height: 16px !important;
background-color: $--checkbox-background-color !important;
}
.el-checkbox__inner::after {
top: 2px;
left: 5px;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
top: 6px !important;
}
.el-checkbox__inner, .el-input__inner {
border-color: $--checkbox-border-color;
}

4
nezha-fronted/src/assets/css/common/index.scss Normal file
View File

@@ -0,0 +1,4 @@
@import './button.scss';
@import './checkbox.scss';
@import './tableCommon.scss';
@import './rightBoxCommon.scss';

19
nezha-fronted/src/assets/css/common/rightBoxCommon.scss
View File

@@ -24,7 +24,7 @@
align-items: center;
height: 60px;
padding: 0 20px;
border-bottom: 1px solid $--right-box-border-color;
border-bottom: 1px solid $--border-color-light;
box-sizing: border-box;
.header__title {
@@ -120,8 +120,8 @@
}
.el-input__inner, .el-textarea__inner {
padding: 0 10px;
border-radius: $--primary-border-radius;
border: 1px solid $--right-box-border-color;
border-radius: $--border-radius-small;
border: 1px solid $--border-color-light;
}
.el-textarea__inner {
padding: 5px 70px 4px 15px;
@@ -139,10 +139,10 @@
}
.el-input__inner:hover {
border-color: darken($--right-box-border-color, 10%);
border-color: darken($--border-color-light, 10%);
}
.el-input__inner:focus {
border-color: darken($--right-box-border-color, 20%);
border-color: darken($--border-color-light, 20%);
}
}
.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 {
@@ -164,8 +164,8 @@
.form__dotted-item {
padding: 10px 10px 6px 10px;
margin-bottom: 10px;
border: 1px dashed $--primary-border-color;
border-radius: $--primary-border-radius;
border: 1px dashed $--border-color-base;
border-radius: $--border-radius-small;
.el-form-item {
margin-bottom: 0;
@@ -184,7 +184,7 @@
width: 300px;
height: 28px;
border: 1px solid var(--theme-color-light-71);
border-radius: $--primary-border-radius;
border-radius: $--border-radius-small;
background-color: var(--theme-color-light-98);
i {
@@ -242,7 +242,7 @@
}
.footer__btn--light {
background-color: white;
border: 1px solid $--primary-border-color;
border: 1px solid $--border-color-base;
color: #333;
}
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
@@ -314,6 +314,7 @@
.right-box-select-top {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.api-select.right-public-box-select-top.right-public-box-dropdown-top {
.el-scrollbar__view.el-select-dropdown__list {

112
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -3,10 +3,10 @@
height: 100%;
width: 100%;
box-sizing: border-box;
background-color: #f6f6f6;
background-color: $--background-color-base;
.main-list {
background-color: white;
background-color: $--background-color-empty;
position: relative;
display: flex;
flex-direction: column;
@@ -17,9 +17,9 @@
.main-container {
padding: 10px;
height: 100%;
background-color: #f6f6f6;
background-color: $--background-color-base;
&>div {
background-color: white;
background-color: $--background-color-empty;
}
}
.main-list.main-list-with-sub {
@@ -43,8 +43,8 @@
align-items: center;
padding: 0 70px 0 15px;
height: 44px;
background-color: white;
border: 1px solid #E6EAED;
background-color: $--background-color-empty;
border: 1px solid $--border-color-light;
box-sizing: border-box;
}
@@ -73,7 +73,7 @@
height: 32px;
width: 36px;
cursor: pointer;
border: 1px solid $--primary-border-color;
border: 1px solid $--border-color-base;
outline: none;
border-radius: $--button-border-radius;
background-color: $--button-gray-background-color;
@@ -87,7 +87,7 @@
.top-tool-btn.top-tool-btn--text {
padding: 0 8px;
width: unset;
color: #666;
color: $--color-text-regular;
}
.top-tool-btn:hover:not(.nz-btn-disabled) {
background-color: $--button-gray-hover-background-color;
@@ -133,15 +133,15 @@
.sub-list-tab {
height: 100%;
width: 120px;
color: #666666;
color: $--color-text-regular;
font-size: 14px;
text-align: center;
box-sizing: border-box;
line-height: 40px;
&.sub-list-tab--active {
border-bottom: 2px solid $--theme-color;
color: #FA901C;
border-bottom: 2px solid $--color-primary;
color: $--color-primary;
}
}
@@ -155,12 +155,12 @@
height: 9px;
width: 100%;
box-shadow: inset 0 1px 0 0 #BEBEBE;
background-color: #e6eaed;
background-color: $--background-color-1;
position: absolute;
z-index: 1;
box-sizing: border-box;
user-select: none;
color: #5f6368;
color: $--color-text-regular;
cursor: ns-resize;
}
.sub-list-window-control {
@@ -177,12 +177,12 @@
margin-right: 20px;
}
.window-control-btn>i {
color: #999999;
color: $--color-text-secondary;
font-size: 14px;
transition: all .2s;
}
.window-control-btn>i:hover {
color: $--theme-color;
color: $--color-primary;
}
}
.mt-10.table-container.nz-table2 {
@@ -191,8 +191,8 @@
position: fixed;
right: 55px;
height: 42px;
border-bottom: 1px solid $--right-box-border-color;
background-color: white;
border-bottom: 1px solid $--border-color-light;
background-color: $--background-color-empty;
box-sizing: border-box;
}
}
@@ -208,7 +208,7 @@
.el-table:not(.chart-table) {
width: 100%;
border: 1px solid $--right-box-border-color;
border: 1px solid $--border-color-light;
border-bottom: none;
.caret-wrapper {
@@ -227,12 +227,14 @@
td {
padding: 8px 0;
border-bottom: 1px solid $--right-box-border-color;
border-bottom: 1px solid $--border-color-light;
}
tr {
background-color: $--table-row-background-color;
}
th {
border-color: $--right-box-border-color;
border-color: $--border-color-light;
padding: 8px 0;
background: #F9F9F9;
}
.el-table__header th:first-of-type {
border-left: none;
@@ -241,19 +243,14 @@
position: fixed;
right: 31px;
height: 42px;
border-bottom: 1px solid $--right-box-border-color;
background-color: white;
border-bottom: 1px solid $--border-color-light;
background-color: $--background-color-empty;
box-sizing: border-box;
}
thead {
color: #333;
color: $--color-text-primary;
}
.el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
background-color: var(--theme-color-light-96) !important;
}
.table-operation-title {
text-align: center;
}
@@ -269,13 +266,13 @@
transition: background-color linear .1s;
}
.table-operation-item.table-operation-item--disable{
border: 1px solid $--primary-border-color;
background-color: #DEDEDE;
border: 1px solid $--border-color-base;
background-color: $--border-color-base;
opacity: 0.6;
outline: none;
i {
font-size: 14px;
color: #fff;
color: $--background-color-empty;
}
}
&>.table-operation-item {
@@ -300,10 +297,10 @@
.table-operation-item.table-operation-item--more {
justify-content: center;
align-items: center;
border: 1px solid $--primary-border-color;
border: 1px solid $--border-color-base;
width: 30px;
i {
color: #999;
color: $--color-text-secondary;
font-size: 12px;
}
}
@@ -313,16 +310,13 @@
/* start--覆盖el-table边框、gutter等样式 */
.el-table__body-wrapper {
overflow: auto;
background-color: $--table-body-background-color;
}
.el-table__fixed-body-wrapper {
top: 42px !important;
}
.el-table__body-wrapper, .el-table__fixed-body-wrapper {
box-shadow: 1px 0 $--right-box-border-color;
.cell {
color: #333;
}
box-shadow: 1px 0 $--border-color-light;
}
.el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
visibility: hidden;
@@ -333,21 +327,21 @@
}
/* 最后一列用box-shadow模拟边框 */
//.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(3) {
// //box-shadow: 1px 0 $--right-box-border-color;
// border-left: 1px solid $--right-box-border-color;
// //box-shadow: 1px 0 $--border-color-light;
// border-left: 1px solid $--border-color-light;
//}
//.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
// border-right: none !important;
// box-shadow: 1px 0 $--right-box-border-color;
// box-shadow: 1px 0 $--border-color-light;
//}
.el-table__fixed-body-wrapper {
td:not(.is-hidden) {
border-left: 1px solid $--right-box-border-color;
border-left: 1px solid $--border-color-light;
}
}
.el-table__fixed-header-wrapper {
th:not(.is-hidden) {
border-left: 1px solid $--right-box-border-color;
border-left: 1px solid $--border-color-light;
}
th:last-of-type {
border-right: none !important;
@@ -376,8 +370,8 @@
position: fixed;
right: 31px;
height: 42px;
border-bottom: 1px solid #E7EAED;
background-color: white;
border-bottom: 1px solid $--border-color-light;
background-color: $--background-color-empty;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@@ -418,7 +412,7 @@
span {
font-size: 14px;
color: #666;
color: $--color-text-regular;
}
i {
@@ -426,7 +420,7 @@
}
}
.el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
border-color: #c7c7c7 !important;
border-color: $--border-color-base-focus !important;
}
.el-input__inner {
height: 24px !important;
@@ -434,7 +428,7 @@
}
.el-tag {
background-color: white;
background-color: $--background-color-empty;
i {
color: white;
top: 0;
@@ -449,7 +443,7 @@
box-shadow: none;
box-sizing: border-box;
border-radius: 0;
border-color: #c7c7c7;
border-color: $--border-color-base-focus;
.popper__arrow {
display: none;
@@ -466,7 +460,7 @@
position: absolute;
top: -1px;
height: 1px;
background-color: white;
background-color: $--background-color-empty;
}
.temp-form-box-input.el-input .el-input__inner {
text-overflow: ellipsis;
@@ -482,3 +476,19 @@
.fade-leave-active {
transition: opacity 1s;
}
/*table提示样式*/
.el-tooltip__popper.is-light {
border: 1px solid #EBEEF5;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.col-resize-area {
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
cursor: col-resize;
}

143
nezha-fronted/src/components/charts/chart.scss → nezha-fronted/src/assets/css/components/charts/chart.scss
View File

@@ -4,7 +4,7 @@
clear: both;
}
.clearfix{
margin-bottom: 0px;
margin-bottom: 0;
}
.hidden{
visibility: hidden;
@@ -43,11 +43,11 @@
cursor:pointer;
}
.legend-option-cell{
white-space: nowrap;padding: 0px 5px 0px 5px;
white-space: nowrap;padding: 0 5px 0 5px;
}
.legend-container table tr:hover{
background-color: #e6e6e6;
background-color: $--background-color-1;
}
.nz-icon-warning{
color: #e6a23c;
@@ -59,7 +59,6 @@
.legend-item{
text-overflow:ellipsis;
white-space:nowrap;
/*width:100%;*/
margin-right:10px;
overflow-x:hidden;
cursor:pointer;
@@ -76,7 +75,7 @@
width: 200px;
li {
padding-left:15px !important;
padding-right:0px !important;
padding-right: 0 !important;
width: calc(100% - 15px);
text-align: left;
i {
@@ -88,7 +87,7 @@
height: 36px;
li {
padding-left:15px !important;
padding-right:0px !important;
padding-right: 0 !important;
width:94px;
text-align: left;
i {
@@ -134,7 +133,7 @@
.panel-info-corner--error .panel-info-corner-inner {
border-left: 28px solid #e02f44;
border-right: none;
border-bottom: 28px solid rgba(0,0,0,0);
border-bottom: 28px solid $--background-color-empty;
}
.panel-info-corner-inner {
width: 0;
@@ -145,7 +144,7 @@
}
.chart-error-popper[x-placement^=top] .popper__arrow::after {
border-top-color: #e02f44 !important;
bottom:0px !important;
bottom: 0 !important;
}
.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
border-bottom-color: #e02f44;
@@ -163,7 +162,7 @@
}
.chart-warring-popper[x-placement^=top] .popper__arrow::after {
border-top-color: #e6a23c;
bottom:0px;
bottom: 0;
}
.chart-warring-popper[x-placement^=bottom] .popper__arrow::after {
border-bottom-color: #e6a23c;
@@ -183,7 +182,7 @@
.panel-info-corner--error .panel-info-corner-inner {
border-left: 28px solid #e6a23c;
border-right: none;
border-bottom: 28px solid rgba(0,0,0,0);
border-bottom: 28px solid $--background-color-empty;
}
.panel-info-corner-inner {
width: 0;
@@ -202,7 +201,7 @@
position: relative;
}
.resize-box {
border: 1px solid #E7EAED;
border: 1px solid $--border-color-light;
position: absolute;
box-sizing: border-box;
width: 100%;
@@ -255,17 +254,17 @@
.el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
background-color: #f9f9f9 !important;
background-color: lighten($--background-color-base, 10%) !important;
}
td {
padding: 9px 0;
border-bottom: 1px solid $--right-box-border-color;
border-bottom: 1px solid $--border-color-light;
}
th {
border-color: $--right-box-border-color;
border-color: $--border-color-light;
}
thead {
color: #333;
color: $--color-text-primary;
}
}
}
@@ -301,13 +300,10 @@
.chart-container.chart-detail {
height: 100%;
position: relative;
background-color: white;
background-color: $--background-color-empty;
.chartTitle:hover {
background-color:#efefef;
background-color: $--background-color-1;
}
//.chartTitle:not(.drag-disabled) {
// cursor: move;
//}
.chartTitle {
text-align: center;
width: 100%;
@@ -326,7 +322,7 @@
.chart-title-text {
font-size: 14px;
line-height: 26px;
color: #52545c;
color: $--color-text-regular;
display:flex;
justify-content:center;
align-items:center;
@@ -361,9 +357,9 @@
}
}
.chart-sub-title {
background-color: #efefef;
background-color: $--background-color-1;
font-size: 13px;
color: #505255;
color: $--color-text-regular;
padding-left: 5px;
height: 25px;
line-height: 25px;
@@ -382,7 +378,7 @@
>.content-item {
font-size: 13px;
line-height: 26px;
border-top: 1px solid rgb(235, 238, 245);
border-top: 1px solid $--border-color-light;
display: flex;
position: relative;
flex-wrap: wrap;
@@ -453,7 +449,7 @@
white-space: nowrap;
}
.content-item-key {
color: #666;
color: $--color-text-regular;
width: 35%;
height: 26px;
text-overflow: ellipsis;
@@ -470,7 +466,7 @@
box-sizing: border-box;
}
.item-value-sub:not(:last-of-type) {
border-bottom: 1px solid rgb(235, 238, 245);
border-bottom: 1px solid $--border-color-light;
}
.nz-table {
th .cell {
@@ -482,22 +478,22 @@
line-height: 26px;
}
.el-table__body {
background-color: white;
background-color: $--background-color-empty;
}
.el-table__body tr:last-of-type td {
border: none;
}
.el-table__body tr td {
background-color: white;
background-color: $--background-color-empty;
}
.el-table__body tr:hover>td {
background-color: white;
background-color: $--background-color-empty;
}
}
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
border-left: 1px solid rgb(235, 238, 245);
border-left: 1px solid $--border-color-light;
color: #1a1a1a;
width: 65%;
height: 99%;
@@ -509,7 +505,7 @@
border-top: none;
}
>.content-item:last-of-type {
border-bottom: 1px solid rgb(235, 238, 245);
border-bottom: 1px solid $--border-color-light;
}
}
}
@@ -522,9 +518,9 @@
.line-chart-block, .chart-table, .chart-single-stat, .chart-url,.chart-text, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{
height: 100%;
position: relative;
background-color: white;
background-color: $--background-color-empty;
.chartTitle:hover {
background-color:#efefef;
background-color: $--background-color-1;
}
.chartTitle {
text-align: center;
@@ -549,7 +545,7 @@
justify-content:space-between;
align-items:center;
height: 39px;
color: #333333;
color: $--color-text-primary;
font-weight: 400;
.chart-title-text{
max-width:calc(100% - 20px);
@@ -576,7 +572,7 @@
.line-area {
box-sizing: border-box;
background: #FFF;
background: $--background-color-empty;
min-height: 95px;
padding-left:8px;
padding-right:8px;
@@ -628,7 +624,7 @@
}
.line-area {
box-sizing: border-box;
background: #FFF;
background: $--background-color-empty;
height: 100%;
span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
display: block !important;
@@ -641,12 +637,12 @@
}
.element-top-border {
padding-bottom: 5px;
border-top: 1px solid #dfe7f2;
border-top: 1px solid $--border-color-base;
margin-top:-25px;
}
.element-bottom-border {
border-bottom: 1px solid #dfe7f2;
border-bottom: 1px solid $--border-color-base;
margin-bottom:-20px;
}
.pt10{
@@ -678,8 +674,6 @@
.rich-text-screen-container .text-content{
padding: 15px;
//border: 1px rgba(205,205,205,0.77);
//box-shadow:-1px 1px 9px -1px rgba(205,205,205,0.77);
height: calc(100% - 10px);
}
.rich-text-container .ql-container.ql-snow {
@@ -691,15 +685,6 @@
.chart-text-preview .ql-container.ql-snow {
border: unset !important;
}
/*.page-shadow{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.1);
z-index: 100;
}*/
.chart-table ,.chart-preview-dialog {
.nz-table .el-table__row .costom-value .cell{
padding: 1px 0;
@@ -722,7 +707,7 @@
.top-tool-btn {
height: 32px;
width: 36px;
border: 1px solid $--primary-border-color;
border: 1px solid $--border-color-base;
outline: none;
border-radius: $--button-border-radius;
background-color: $--button-gray-background-color;
@@ -736,14 +721,14 @@
.top-tool-btn.top-tool-btn--text {
padding: 0 8px;
width: unset;
color: #666;
color: $--color-text-regular;
}
.top-tool-btn:hover:not(.nz-btn-disabled) {
background-color: $--button-gray-hover-background-color;
}
.top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
background-color: $--button-gray-hover-background-color;
border: 1px solid #FBCEA4 !important;
border: 1px solid $--color-primary !important;
i {
color: $--button-gray-active-color;
}
@@ -766,6 +751,56 @@
text-align: left;
z-index: 1000;
border-radius: 5px;
background: #fff;
border: 1px solid #ebeef5;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
}
.center-content {
.content-static-url{
font-weight: bold;
font-size: 24px;
}
.content-static-tip{
font-size: 18px;
color: lightgrey;
}
}
.resize-box-group {
position: unset !important;
.chart-title .nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
}
.chart-title .nz-icon-arrow-down.is-active{
transform: rotate(
-90deg
);
}
.collapse-content{
font-size: 12px;
color: $--color-text-secondary;
}
}
.vue-resizable-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
cursor: se-resize;
box-sizing: border-box;
user-select: none;
z-index: 99;
}
.vue-resizable-handle:after {
border-right: 2px solid #acb6bf;
border-bottom: 2px solid #acb6bf;
content: "";
position: absolute;
right: 3px;
bottom: 3px;
width: 5px;
height: 5px;
box-sizing: inherit;
}

108
nezha-fronted/src/components/cli/webSSH.scss → nezha-fronted/src/assets/css/components/cli/webSSH.scss
View File

@@ -3,7 +3,7 @@
left: 0;
position: fixed;
bottom: 0;
background: #fff;
background: $--background-color-empty;
z-index: 2000;
height: 300px;
@@ -15,7 +15,7 @@
-webkit-align-items: center;
align-items: center;
justify-content: center;
background-color: #eaeaea;
background-color: $--background-color-1;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
@@ -26,7 +26,7 @@
z-index: 2;
font-size: 20px;
line-height: 8px;
color: #5f6368;
color: $--color-text-regular;
}
.shell-iconfont {
font-family: "cloudshell-scripts-iconfont";
@@ -38,7 +38,7 @@
.console-title-icon{
font-size:17px;
color: #909399;
color: $--color-text-secondary;
position: absolute;
top:8px;
line-height:1 !important;
@@ -46,31 +46,24 @@
.console-title-icon:hover:before,
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active,
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: $box-title-color;
color: $--color-text-primary;
}
.el-dialog {
.el-dialog__body{
overflow-x:hidden !important;/*防止console窗口x轴出现滚动条*/
}
.el-dialog__header{
}
}
.el-tabs--border-card>.el-tabs__content {
padding: 0px !important;
}
.el-tabs {
/*background-color: #F5F7FA;*/
padding: 0 !important;
}
.el-tabs .el-tabs__header {
margin-left:0px;
margin-left: 0;
margin-right: 150px;
height: 29px;
}
.el-tabs__nav-wrap{
margin-bottom: 0px;
margin-bottom: 0;
}
.el-tabs__nav{
@@ -92,7 +85,7 @@
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
border-top: solid 2px $global-text-color-active;
border-top: solid 2px $--color-primary;
height: 29px !important;
}
@@ -102,7 +95,7 @@
}
.el-menu.el-menu--horizontal .el-submenu__title i:first-child:before{
color: #909399;
color: $--color-text-secondary;
font-size:22px;
}
.el-menu.el-menu--horizontal .el-submenu__title i:first-child:hover:before{
@@ -110,18 +103,12 @@
}
.el-submenu__title:hover{
background-color:#FFF !important;
background-color:$--background-color-empty !important;
}
.upload-body{
text-align: center;
}
.footer:before{
/*content: '';*/
/*clear:both;*/
/*display: block;*/
/*height: 40px;*/
}
.nz-icon-728bianjiqi_zitidaxiao{
top:0 !important;
}
@@ -142,7 +129,7 @@
width: 60px;
}
.el-menu--horizontal .el-menu .el-menu-item.menuActive{
color: #303133;
color: $--color-text-primary;
}
.smallFont{
font-size: 12px;
@@ -168,12 +155,12 @@
height: 9px;
width: 100%;
box-shadow: inset 0 1px 0 0 #BEBEBE;
background-color: #e6eaed;
background-color: $--background-color-1;
position: absolute;
z-index: 1;
box-sizing: border-box;
user-select: none;
color: #5f6368;
color: $--color-text-regular;
cursor: ns-resize;
top: 0;
}
@@ -191,15 +178,78 @@
margin-right: 20px;
}
.window-control-btn>i {
color: #999999;
color: $--color-text-secondary;
font-size: 14px;
transition: all .2s;
}
.window-control-btn>i:hover {
color: $--theme-color;
color: $--color-primary;
}
}
.sub-list{
background: #000 !important;
}
/* 上滑resize工具条--end */
.config-dropdown.w260{
width: 260px;
}
.popover-webshell{
margin-top: 0 !important;
.popover-webshell-item{
padding: 5px;
font-family: Roboto-Regular;
font-size: 14px;
color: $--color-text-regular;
font-weight: 400;
.nz-icon{
margin-right: 5px;
font-size: 16px;
}
}
.popover-webshell-item:hover{
background: $--background-color-base;
font-family: Roboto-Regular;
font-size: 14px;
color: $--color-primary;
font-weight: 400;
}
.popper__arrow{
display: none;
}
}
div.sp-header{
display: none;
}
.horizontal .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
border: none;
}
.horizontal .el-menu--popup .el-menu-item.is-active{
background: $--background-color-empty;
}
.ani-webSHH-height {
transition: height .25s ease-in;
.sub-list {
background: $--background-color-1;
}
.flex .el-form-item__content {
display: flex;
}
.nz-btn-style-normal-new {
margin-left: 10px;
margin-top: 2px;
}
.custom .el-form-item {
width: calc(50% - 30px);
display: inline-block;
}
.custom .el-form-item:nth-child(even) {
margin-left: 10px;
}
.el-select--small {
width: 100%;
}
.custom-footer {
box-shadow: none;
}
}

65
nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss Normal file
View File

@@ -0,0 +1,65 @@
.alert-label, .alert-labelUp {
position: fixed;
background-color: $--background-color-empty;
z-index: 3000;
padding: 10px;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
.alert-label-info{
border: 1px solid $--border-color-light;
border-bottom: none;
font-size: 13px;
line-height: 26px;
}
.alert-label-box{
display: flex;
justify-content:space-between;
border-bottom: 1px solid $--border-color-light;
}
.alert-label-title{
text-align: left;
width: 110px;
border-right: 1px solid $--border-color-light;
color: $--color-text-regular;
padding: 0 3px 0 13px;
}
.alert-label-value{
text-align: left;
width: 150px;
color: #1a1a1a;
padding: 0 3px 0 13px;
word-break: break-all;
}
.danger{
background-color: $--color-danger;
color: white;
padding: 2px 5px;
border-radius: 4px;
}
.success{
background-color: $--color-success;
color: white;
padding: 2px 5px;
border-radius: 4px;
}
.active-icon{
margin-top: 0;
}
}
.alert-label::after, .alert-labelUp::after {
content: '';
display: block;
width:0;
height:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 5px;
border-style: dashed solid dashed dashed;
border-color: transparent #fff transparent transparent;
position: absolute;
top: 20px;
left: 0;
transform: translate(-100%, -50%);
}

113
nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss Normal file
View File

@@ -0,0 +1,113 @@
.alert-rule-tip {
position: fixed;
background-color: $--background-color-empty;
z-index: 3000;
padding: 10px;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.alert-rule-tip::after {
content: '';
display: block;
width:0;
height:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 5px;
border-style: dashed solid dashed dashed;
border-color: transparent #fff transparent transparent;
position: absolute;
top: 100px;
left: 0;
transform: translate(-100%, -50%);
}
.alert-rule-abs {
background-color: $--background-color-empty;
z-index: 3000;
padding: 10px;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.alert-rule-tip-Up {
position: fixed;
background-color: $--background-color-empty;
z-index: 3000;
padding: 10px;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.alert-rule-tip-Up::after {
content: '';
display: block;
width:0;
height:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 5px;
border-style: dashed solid dashed dashed;
border-color: transparent #fff transparent transparent;
position: absolute;
bottom: 95px;
left: 0;
transform: translate(-100%, -50%);
}
.alert-rule-abs-Up {
background-color: $--background-color-empty;
z-index: 3000;
padding: 10px;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.alert-rule-info{
border: 1px solid $--border-color-light;
border-bottom: none;
font-size: 13px;
line-height: 26px;
}
.alert-rule-box{
display: flex;
justify-content:space-between;
border-bottom: 1px solid $--border-color-light;
}
.alert-rule-title{
text-align: left;
width: 110px;
border-right: 1px solid $--border-color-light;
color: $--color-text-regular;
padding: 0 3px 0 13px;
}
.alert-rule-value{
text-align: left;
width: 150px;
color: #1a1a1a;
padding: 0 3px 0 13px;
word-wrap: break-word;
white-space: normal;
overflow: hidden;
i {
color: $--color-primary;
}
}
.severity .P1{
background: #F5846A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P2{
background: #F7A54A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P3{
background: #F1C13D;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}

54
nezha-fronted/src/assets/css/components/common/alert/selectAlertSilence.scss Normal file
View File

@@ -0,0 +1,54 @@
.movable {
.el-tree-node__content {
cursor: move;
.tree--node>span:first-of-type {
cursor: pointer;
}
.tree--node>span:last-of-type>span {
cursor: pointer;
}
}
}
.tree--node>span:last-of-type>span>i {
font-weight: normal !important;
}
.select-panel-tree {
height: 350px;
overflow: auto;
}
.select-panel-tree .el-tree-node__content {
height: 34px;
line-height: 34px;
}
.select-panel-tree .el-tree-node__content:hover {
color: $--color-primary;
}
.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: $--background-color-base;
font-weight: bold;
color: $--color-primary;
}
.tree--node {
display: flex;
justify-content: space-between;
width: calc(100% - 28px);
}
.tree--operation {
opacity: 0;
}
.tree--node:hover .tree--operation {
opacity: 1;
}
.panel-dropdown-btn {
color: #60BEFF;
}
.panel-dropdown-btn:hover {
color: #409EFF;
}
.panel-dropdown-btn-delete {
color: #F98D9A;
}
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}

134
nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss Normal file
View File

@@ -0,0 +1,134 @@
/* begin--二级顶部工具栏*/
.sub-top-tools {
display: flex;
height: 32px;
align-items: center;
justify-content: space-between;
border-top: 1px solid $--border-color-base;
border-bottom: 1px solid $--border-color-light;
margin: 0 -6px;
padding-right: 80px;
background-color: $--color-primary;
margin-bottom: 10px;
}
.sub-top-tools>div {
margin-top: 2px;
}
.sub-top-tools .top-tool-search {
width: 260px;
margin: -1px 0 0 0;
.select_input input {
background-color: $--background-color-empty;
}
}
.bottom-data-list .sub-container {
padding: 10px;
height: calc(100% - 64px);
background-color: $--background-color-base;
overflow-y: auto;
&>div {
background-color: $--background-color-empty;
}
&>.nz-table2 {
height: 100%;
padding-top: 20px !important;
}
}
.sub-top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right: 6px;
}
.sub-top-tool-right {
display: flex;
align-content: center;
}
.has-sub-popper {
color: $--color-danger;
}
.sub-box {
height: 50%;
position: relative;
}
.sub-list {
height: calc(100% - 9px);
position: absolute;
width: 100%;
z-index: 1;
top: 9px;
.sub-list__tabs {
height: 100%;
background-color: $--background-color-empty;
&>div {
height: 100%;
background-color: $--background-color-base;
&>.nz-table2 {
height: calc(100% - 92px);
padding: 20px 20px 0;
}
}
.chart-list{
.nz-table2 {
box-sizing: border-box;
padding: 0;
}
}
}
}
.main-and-sub-transition {
transition: .4s height;
}
.bottom-panel {
padding-top: 15px;
background-color: $--background-color-empty;
padding-bottom: 10px;
height: calc(100% - 30px);
}
.bottom-log {
padding: 15px;
}
.bottom-common {
padding: 20px;
height: 100%;
box-sizing: border-box;
}
.chart-temp{
height: calc(100% - 20px);
overflow-y: auto;
}
.resize-modal {
width: calc(100% - 240px);
opacity: 0.6;
background-color: #f5f9ff;
border: 1px solid #a7d0f7;
box-sizing: border-box;
position: fixed;
cursor: ns-resize;
display: none;
z-index: 20;
vertical-align: bottom;
bottom: 0;
}
.bottom-box .sub-container{
height: calc(100% - 64px);
}
.bottom-box .sub-container .nz-table2{
height: calc(100% - 20px);
}
/* end--二级顶部工具栏*/
.log-no-data {
height: 300px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: $--color-text-secondary;
}
.symbol-select .el-input__inner {
padding-left: 8px;
}

230
nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss Normal file
View File

@@ -0,0 +1,230 @@
.panel-tab-new {
.panel {
height: 100%;
}
.panel .el-table {
border-radius: 5px;
}
.panel-list-width {
width:240px;
}
.panel-dropdown-title {
line-height:24px;
padding-left:5px;
margin-left:10px;
margin-top: 3px;
text-align:left;
border-radius:4px;
width:120px;
height:24px;
border:solid 1px #d8dce1;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.panel-list-title {
min-height:24px;
width:100px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.panel-list-item {
width:190px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.content-right-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.content-right-option .nz-icon-delete {
color: #F98D9A;
}
.content-right-option .nz-icon-delete:hover {
color: #D96D7A;
}
.content-right-option .nz-icon-view {
color: #60BEFF;
}
.content-right-option .nz-icon-view:hover {
color: #409EFF;
}
/* begin-chart list*/
.table-list {
overflow-y: auto;
height: 100%;
padding: 20px 0;
box-sizing: border-box;
}
.box-content {
position: relative;
}
/* end-chart list*/
/* begin--Panel-自定义可编辑的el-select下拉框样式*/
.panel-dropdown-btn {
display: inline-block;
margin-left: 7px;
float: right;
color: #60BEFF;
font-size: 13px
}
.panel-dropdown-btn:hover {
color: #409EFF;
}
.panel-dropdown-btn-create {
display: inline-block;
float: left;
font-size: 13px;
color: #F98D9A;
width: 100%;
}
.panel-dropdown-btn-create:hover {
color: #D96D7A;
}
.panel-dropdown-btn-delete {
color: #F98D9A;
font-size: 13px
}
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}
.panel-dropdown-error-message {
color: #F98D9A;
}
/* end--Panel-自定义可编辑的el-select下拉框样式*/
.panel-select-width {
width: 150px;
}
.panel-refresh-interval {
margin-right: 5px;
float: right;
}
.panel-refresh-interval-select {
width: 95px;
}
.panel-calendar {
float: right;
margin-right: 1px;
}
.top-tools {
button {
background: $--background-color-empty;
outline: none;
border: 1px solid #ccc;
}
button:hover {
background: $--background-color-empty;
}
}
.nz-dashboard-dropdown {
height: 300px;
overflow-y: auto;
li {
/*padding: 0 20px !important;*/
padding-left:20px !important;
padding-right:0px !important;
width:240px;
white-space:nowrap;
overflow-x:hidden;
text-overflow:ellipsis;
}
}
.nz-dashboard-dropdown-bg {
background: $--color-primary;
color: #fff;
}
.el-dropdown-link {
cursor: pointer;
font-weight: bold;
}
.refresh {
display: flex;
background: $--background-color-empty;
border-radius: 4px;
align-items: center;
justify-content: center;
margin: 0 10px;
border: 1px solid #ccc;
span {
display: inline-block;
padding: 1px 8px;
}
}
.popover_ul li {
padding: 10px 3px;
cursor: pointer;
}
.popover_ul li:hover {
background: #fafafa !important;
color: $--color-primary !important;
}
.nz-dashboard-refresh {
border-right: 1px solid #ccc;
color: #F0BF84;
}
}
.nz-dashboard-dropdown {
z-index: 3001 !important;
}
.panel-calendar {
.el-range-editor--mini.el-input__inner {
height: 25px !important;
border-color: #d8d8d8;
}
.el-range-editor--mini .el-range__close-icon {
line-height: 18px;
}
.el-range-editor--mini .el-range__icon {
display: none;
}
.el-range-editor--mini .el-range-separator {
line-height: 17px;
}
.el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
padding-right: 0;
vertical-align: top;
}
.nz-dashboard-dropdown .nz-icon-edit {
font-size: 12px;
}
}

101
nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogCMDTab.scss Normal file
View File

@@ -0,0 +1,101 @@
.record-container {
height: calc(100% - 50px);
overflow: auto;
position: relative;
}
.record-container--record {
background-color: white;
width: calc(100% - 6px);
padding: 16px 15px 6px 15px;
border: 1px solid $--border-color-base;
box-sizing: border-box;
min-height: 100px;
.record--title {
color: $--color-text-primary;
font-size: 14px;
font-weight: bold;
margin-bottom: 12px;
}
.record--list {
display: grid;
gap: 6px 12px;
grid-template-columns: 150px auto;
font-size: 14px;
color: $--color-text-primary;
.detail--time {
line-height: 22px;
grid-column: 1/span 1;
display: flex;
font-size: 12px;
align-items: flex-start;
span {
background-color: $--background-color-1;
padding: 2px 10px;
}
}
.detail--cmd {
line-height: 22px;
grid-column: 2/span 1;
display: flex;
span {
padding: 2px 10px;
}
}
.detail--cmd__green {
background-color: #B4FDB1;
}
.detail--cmd__red {
background-color: #FFD2C2;
}
}
.record--more {
text-align: center;
margin-top: 15px;
.more-btn {
color: $--color-text-secondary;
cursor: pointer;
.nz-icon {
font-size: 14px;
}
}
}
}
.record-container--record-tip {
position: absolute;
right: 20px;
top: 17px;
.record--title {
color: $--color-text-primary;
font-size: 14px;
font-weight: bold;
margin-bottom: 12px;
}
.detail--cmd {
line-height: 22px;
font-size: 14px;
padding-left: 20px;
span {
padding: 3px 10px;
}
}
.detail--cmd__green {
background-color: #A7F29E;
}
.detail--cmd__red {
background-color: #FBe2DE;
}
}

67
nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogMonitorTab.scss Normal file
View File

@@ -0,0 +1,67 @@
.replay-tab {
height: 100%;
}
.replay-container {
height: 100%;
}
.record-console {
padding: 10px 4px 10px 10px;
background-color: black;
height: 100%;
}
.terminal-replay-progress {
height: 20px;
padding: 3px 0;
position: relative;
width: 500px;
}
#terminal-kill {
margin-bottom: 5px;
}
.terminal-replay-progress-bar {
top: 50%;
transform: translateY(-50%);
.el-progress-bar__inner {
transition: unset;
user-select: none;
}
}
.replay-operate {
.nz-btn {
margin-right: 8px;
.nz-icon {
font-size: 14px;
}
}
}
.operate-skip {
margin: 0 12px !important;
}
.time-box {
border: none;
border-radius: 16px;
}
.progress-controller {
position: absolute;
height: 14px;
width: 14px;
border-radius: 50%;
background-color: #409eef;
top: 50%;
transform: translate(-7px, -50%);
}
.progress-controller:hover {
background-color: #207ecf;
}

54
nezha-fronted/src/assets/css/components/common/bottomBox/terminalLogRecordTab.scss Normal file
View File

@@ -0,0 +1,54 @@
.replay-tab {
height: 100%;
}
.replay-container {
height: calc(100% - 40px);
}
.record-console {
padding: 10px 4px 10px 10px;
background-color: black;
height: calc(100% - 65px) !important;
}
.terminal-replay-progress {
height: 20px;
padding: 3px 0;
position: relative;
width: 500px;
}
.terminal-replay-progress-bar {
top: 50%;
transform: translateY(-50%);
.el-progress-bar__inner {
transition: unset;
user-select: none;
}
}
.replay-operate {
.nz-btn {
margin-right: 8px;
.nz-icon {
font-size: 14px;
}
}
}
.operate-skip {
margin: 0 12px !important;
}
.time-box {
border: none;
border-radius: 16px;
}
.progress-controller {
position: absolute;
height: 14px;
width: 14px;
border-radius: 50%;
background-color: #409eef;
top: 50%;
transform: translate(-7px, -50%);
}
.progress-controller:hover {
background-color: #207ecf;
}

57
nezha-fronted/src/assets/css/components/common/browserWindowZoom.scss Normal file
View File

@@ -0,0 +1,57 @@
.zoom {
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: $--background-color-empty;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
.zoom {
background: $--background-color-base;
border: 1px solid $--border-color-base;
border-radius: 2px;
width: 400px;
height: 108px;
position: absolute;
z-index: 1;
left: 50%;
top: 50px;
margin-left: -186px;
span {
margin-top: 15px;
font-size: 14px;
color: $--color-text-regular;
line-height: 20px;
font-weight: 400;
width: 350px;
height: 40px;
margin-left: 40px;
display: inline-block;
}
i {
position: absolute;
color: $--color-primary;
top: 15px;
left: 12px;
}
.zoom-button {
margin-top: 10px;
margin-left: 39px;
border: 1px solid $--border-color-base;
border-radius: 4px;
background-color: $--background-color-base;
color: #000;
font-style: italic;
font-weight: 900;
padding: 4px 10px;
}
}
}

24
nezha-fronted/src/assets/css/components/common/chartUnit.scss Normal file
View File

@@ -0,0 +1,24 @@
.chart-unit {
width: 100px;
}
.chart-unit.el-cascader .el-input.is-focus .el-input__inner {
border-color: #FBCEA4;
}
.chart-unit .el-input__suffix-inner {
color: #aaa;
}
.unit-pop-class .el-cascader-panel {
height: 200px;
background-color: $--background-color-empty;
}
.input-prepend {
height: 26px;
margin-top: 1px;
padding: 0 5px !important;
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.chart-unit .el-input__inner {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}

23
nezha-fronted/src/components/common/detailView/detailView.scss → nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
View File

@@ -1,3 +1,6 @@
.active{
color: $--color-primary;
}
.nz-detail-view{
width: 100%;
height: calc(100% - 60px);
@@ -8,7 +11,7 @@
align-items: center;
width: 100%;
justify-content: center;
color: #909399;
color: $--color-text-secondary;
font-size: 14px;
}
.nz-detail-view-left{
@@ -17,8 +20,8 @@
flex-direction: column;
margin: 0 10px 10px 20px;
height: calc(100% - 12px);
border: 1px solid #E7EAED;
/deep/ .data-detail {
border: 1px solid $--border-color-light;
.data-detail {
flex: 1;
height: calc(100% - 100px);
}
@@ -34,7 +37,7 @@
overflow: hidden;
padding-right: 10px;
}
/deep/ .el-pagination .btn-next, /deep/ .el-pagination .btn-prev {
.el-pagination .btn-next, .el-pagination .btn-prev {
border: none;
background: none;
padding: 0;
@@ -42,12 +45,12 @@
height: 100%;
margin-top: 0;
.el-icon{
background: #fff;
background: $--background-color-empty;
height: 100%;
font-size: 22px;
}
}
/deep/ .jump-input {
.jump-input {
width: 40px;
vertical-align: middle;
.el-input__inner {
@@ -58,16 +61,18 @@
}
}
/deep/ .jump-pages {
.jump-pages {
padding-left: 9px;
font-size: 14px;
color: #666666;
color: $--color-text-regular;
vertical-align: middle;
}
}
.detail-view {
.list-page div.main-container{
height: calc(100% - 20px);
width: calc(100% - 20px);
}
}

93
nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss Normal file
View File

@@ -0,0 +1,93 @@
.detail-view-top-search {
.search-detail-box{
display: inline-block;
margin-right: 20px;
transition: background-color .1s ease-out;
border-radius: 2px;
}
.search-detail-box:hover{
background: #F9F9F9;
}
.search-detail-box.select-dropdown{
background: #F9F9F9;
}
.detail-dropdown{
padding: 0 10px;
height: 30px;
line-height: 30px;
border-radius: 2px;
}
.search-detail-title {
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
line-height: 14px;
font-weight: 600;
margin-right: 10px;
}
.search-value{
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
line-height: 14px;
font-weight: 400;
}
.detail-top-search {
display: inline-block;
vertical-align: bottom;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width: 100px;
}
}
.detail-top-search-dropdown{
max-height: 300px;
overflow-y: auto;
.el-dropdown-menu__item{
background: $--background-color-empty !important;
padding: 0;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.el-checkbox{
width: calc(100% - 20px);
height: 36px;
padding: 0 0 0 20px;
display: flex;
align-items: center;
.el-checkbox__label{
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.el-checkbox:hover{
color: $--color-primary;
background-color: $--background-color-base !important;
}
.children-title-name{
width: calc(100% - 20px);
height: 36px;
padding-left: 20px;
font-size: 12px;
color: $--color-text-secondary;
line-height: 30px;
}
}
.el-dropdown-menu__item:not(.is-disabled):hover{
color: $--color-text-secondary;
background: $--background-color-empty !important;
}
}
.clear-all-select{
padding: 0 20px;
padding-left: 42px;
color: #0052cc;
font-size: 12px;
}
.clear-all-select:hover{
text-decoration: underline;
}

59
nezha-fronted/src/assets/css/components/common/detailView/list/common.scss Normal file
View File

@@ -0,0 +1,59 @@
.order-box{
display: flex;
height:40px;
padding: 0 15px;
line-height: 40px;
align-items: center;
}
.detail-row-box{
height: calc(100% - 40px);
overflow: hidden;
overflow-y: auto;
}
.detail-row{
width: 245px;
padding: 0 0 0 15px;
height: 60px;
border-bottom: 1px solid $--border-color-light;
cursor: pointer;
}
.detail-row:last-of-type{
border-bottom: none
}
.detail-row-info{
display: flex;
height: 100%;
width: calc(100% - 15px);
justify-content:center;
flex-direction: column;
> div{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asset-manageIp{
font-size: 16px;
color: $--color-text-primary;
font-weight: 400;
}
.asset-name {
padding-left: 22px;
width: calc(100% - 22px);
font-size: 14px;
color: $--color-text-secondary;
font-weight: 400;
}
}
.selected{
background: #FFFBF6;
}
.colorEF7458{
color: $--color-danger;
}
.color23BF9A{
color: $--color-success;
}
.colorFA901C{
color: $--color-warning;
}

29
nezha-fronted/src/assets/css/components/common/detailView/view/detailRightTop.scss Normal file
View File

@@ -0,0 +1,29 @@
.detail-title-box{
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
align-items: center;
height: 100%;
padding-left: 15px;
& > div{
height: 100%;
line-height: 60px;
margin-right: 40px;
}
.detail-title-key{
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
line-height: 20px;
font-weight: 400;
}
.detail-title-value{
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
line-height: 20px;
font-weight: 400;
margin-left: 10px;
}
}

73
nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss Normal file
View File

@@ -0,0 +1,73 @@
.detail-view-sub-box {
.detail-view-right-top {
height: 60px;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
margin-bottom: 10px
}
.sub-box {
height: 100%;
flex-direction: column;
}
.sub-list__tabs {
flex: 1;
background-color: $--background-color-empty;
height: calc(100% - 12px);
border: 1px solid $--border-color-light;
& > div {
height: 100%;
& > .nz-table2 {
height: calc(100% - 92px);
padding: 20px 20px 0;
}
}
.chart-list {
.nz-table2 {
box-sizing: border-box;
padding: 0;
}
}
}
.bottom-data-list .sub-container {
height: calc(100% - 45px);
position: relative;
padding: 0;
background-color: $--background-color-empty;
}
.sub-box .top-tools.top-tools--sub {
border: none;
padding: 0 15px 0 0;
margin-right: 15px;
margin-left: 20px;
border-bottom: 1px solid $--border-color-light;
}
.sub-box .list-width {
padding: 0;
}
.sub-box .nz-table2 {
padding: 20px;
height: 100%;
}
.sub-box .table-list {
padding: 0;
height: 100%;
}
.sub-box .pagination-bottom {
bottom: -3px;
}
.sub-box .sub-list-tab {
cursor: pointer;
}
}

67
nezha-fronted/src/assets/css/components/common/elementSet.scss Normal file
View File

@@ -0,0 +1,67 @@
.pop-custom {
padding: 0 12px 12px 12px;
border: 1px solid $--border-color-light;
box-shadow: $--pop-box-shadow;
position: absolute;
top: 60px;
right: 20px;
width: 200px;
color: $--color-text-regular;
background: $--background-color-empty;
border-radius: 4px;
z-index: 999999;
}
.pop-custom-top {
padding: 0 12px 12px 12px;
border: 1px solid $--border-color-light;
box-shadow: $--pop-box-shadow;
position: absolute;
top: 45px;
right: 20px;
width: 200px;
color: $--color-text-regular;
background: $--background-color-empty;
border-radius: 4px;
z-index: 999999;
}
.pop-custom-explore {
top: 33px;
}
.relative-position .pop-custom {
top: 33px;
}
.custom-labels {
margin-top: 12px;
width: 100%;
height: 300px;
}
.custom-labels i {
color: #04b330;
font-size: 14px;
position: absolute;
left: 5px;
top: 6px;
}
.custom-label {
padding: 2px 0 2px 25px;
position: relative;
cursor: default;
font-size: 14px;
}
.custom-title {
padding: 2px 0 2px 2px;
}
.custom-label-disabled {
cursor: not-allowed;
background: $--background-color-base;
opacity: 0.7;
}
.custom-bottom-btns {
margin-top: 7px;
display: flex;
justify-content: space-between;
align-items: center;
}
.unshow {
display: none;
}

108
nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss Normal file
View File

@@ -0,0 +1,108 @@
.arrow-down {
transform: rotate(0);
transition: all linear .2s;
}
.arrow-down.arrow-up {
transform: rotate(180deg);
}
.nz-label-search {
line-height: 40px;
margin: 6px 0;
.el-input__inner {
width: 60px;
}
}
.search-box__container {
flex-direction: column;
justify-content: center;
box-sizing: border-box;
border: 1px solid $--border-color-light;
background-color: $--background-color-empty;
overflow-x: hidden;
overflow-y: auto;
}
.search-title {
width: 130px;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 600;
overflow: hidden;
height: 100%;
line-height: 40px;
padding-left: 20px;
box-sizing: border-box;
background: $--background-color-base;
}
.search-content-box--copy {
position: fixed;
visibility: hidden;
}
.search-content-box-height.search-content-box {
min-height: 31px;
}
.search-content-box,.search-content-box-height {
border-bottom: 1px solid $--border-color-base;
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
padding: 0;
box-sizing: border-box;
/deep/ .el-checkbox__label {
max-width: 150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
vertical-align: text-bottom;
}
}
.search-content-box {
background: $--background-color-base;
align-items: unset;
}
.search-content-box:last-of-type{
border-bottom: none;
}
.search-items {
display: flex;
flex: 1;
flex-wrap: wrap;
box-sizing: border-box;
padding-left: 15px;
padding-right: 80px;
background: $--background-color-empty;
&.search-items--checkbox .el-skeleton {
height: 21px;
}
&.search-items--dropdown .el-skeleton {
height: 28px;
}
.el-checkbox{
line-height: 40px;
}
}
.more.search-items{
.el-checkbox{
line-height: 40px;
}
}
.search-more {
position: absolute;
right: 4px;
height: 22px;
line-height: 22px;
padding: 0 8px;
font-size: 12px;
color: $--color-text-primary;
box-sizing: border-box;
border: 1px solid $--border-color-base;
border-radius: 2px;
cursor: pointer;
i {
color: $--color-text-secondary;
font-size: 12px;
}
}

8
nezha-fronted/src/assets/css/components/common/loading.scss Normal file
View File

@@ -0,0 +1,8 @@
.el-loading-mask {
.loading-font {
color: #232f3e !important;
}
.el-loading-mask {
background-color: $--background-color-empty;
}
}

295
nezha-fronted/src/assets/css/components/common/login.scss Normal file
View File

@@ -0,0 +1,295 @@
.login {
.model {
height: 100%;
width: 100%;
background-color: rgba(130, 130, 135, 0.4);
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.logo {
z-index: 2;
width: 392px;
img{
width: 100%;
}
}
.login-main {
z-index: 2;
background: rgba(106,106,106,0.5);
border-radius: 8px;
padding: 55px 50px 0 50px;
}
.login-box {
z-index: 2;
width: 392px;
.login-label{
font-size: 22px;
color: #FFFFFF;
font-weight: 500;
}
.login-label-foot{
font-size: 14px;
color: #DEDEDE;
line-height: 20px;
font-weight: 500;
word-break: keep-all;
width: 90%;
}
}
.login-box .login-input {
padding: 12px 0;
height: 46px;
position: relative;
}
.login-box .login-input .nz-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 20px;
}
.login-box .login-input input {
height: 100%;
width: calc(100% - 60px);
background-color: rgba(0, 0, 0, 0.55);
padding-left: 60px;
font-size: 20px;
border: none;
outline: none;
color: white;
border-radius: 4px;
}
.login-foot {
padding-top: 15px;
display: flex;
width: 392px;
justify-content: space-between;
position: relative;
}
.login-btn {
color: white;
border-radius: 2px;
background-color: mix(white, #FA901C, 20%);
border: none;
outline: none;
height: 44px;
width: 100%;
cursor: pointer;
font-size: 14px;
transition: all linear .2s;
}
.login-btn:not(.nz-btn-disabled):hover {
background-color: mix(white, #FA901C, 30%);
}
.login-foot-lang {
position: relative;
cursor: pointer;
background: rgba(0,0,0,0.25);
border-radius: 4px;
padding: 0 14px;
}
.login-foot-lang .nz-icon:not(.nz-icon-arrow-up):not(.nz-icon-arrow-down) {
font-size: 30px;
color: white;
margin-right: 30px;
line-height: 45px;
}
.login-foot-lang-list {
position: absolute;
height: 25px;
padding: 12px;
background-color: rgba(0, 0, 0, 0.55);
top: 70px;
right: 0;
border-radius: 4px;
}
.login-foot-lang-list .nz-icon {
font-size: 25px;
color: white;
cursor: pointer;
}
.login-foot .el-loading-spinner {
width: 36px;
height: 36px;
}
.login-foot-lang-list::before {
content: " ";
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent rgba(0, 0, 0, 0.55) transparent;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
}
.login-foot-buildOn{
position: absolute;
bottom: 20px;
z-index: 100;
left: 50%;
transform: translateX(-50%);
a{
font-size: 14px;
color: #eee;
text-shadow: 1px 1px 3px #333;
text-decoration: none;
}
}
.nz-icon-arrow-down, .nz-icon-arrow-up {
position: absolute;
font-size: 18px;
color: white;
top: 50%;
right: 8px;
transform: translateY(-50%);
}
.login-license{
margin-top: 40px;
text-align: center;
line-height: 30px;
.license-warn{
color: #d92926;
text-shadow: 1px 1px 3px #ddd;
}
.license-info {
margin-bottom: 10px;
color: white;
text-shadow: 1px 1px 3px #333;
white-space: nowrap;
}
.login-btn{
height: 40px;
width: auto;
padding: 0 20px;
}
}
.login-dialog-title{
background: #F9F9F9;
font-size: 14px;
color: #666666;
letter-spacing: 0;
line-height: 20px;
font-weight: 400;
padding: 10px;
margin-bottom: 10px;
word-break: keep-all;
}
.login-dialog-title2{
background: rgba(246,248,250, 0.9);
border: 1px solid #E7EAED;
border-radius: 2px;
height: 248px;
padding: 15px;
position: relative;
.copy-value-content{
position: absolute;
right: 5px;
top: 5px;
cursor: pointer;
}
.login-dialog-recover{
height: calc(100% - 30px);overflow-y: auto
}
}
.enter-code{
font-size: 14px;
color: #666666;
letter-spacing: 0;
font-weight: 400;
margin-bottom: 10px;
}
.qrCode-box{
display: flex;
align-items: center;
}
.qrCode-content{
padding: 4px;
margin-left: 10px;
}
.qrCode-text{
width: 60%;
margin-left: 10px;
font-size: 14px;
color: #666666;
letter-spacing: 0;
font-weight: 400;
}
.qrCode-authKey{
background: rgba(246,248,250,09);
border: 1px solid #E7EAED;
border-radius: 2px;
padding: 5px 12px;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 400;
margin-top: 12px;
}
.footer {
.footer__btn {
margin: 0 15px;
height: 30px;
min-width: 74px;
padding: 0 15px;
color: white;
background-color: #FA901C;
border: none;
border-radius: 4px;
outline: none;
box-sizing: border-box;
font-size: 14px;
cursor: pointer;
transition: background-color linear .2s, color linear .1s;
}
.footer__btn:hover:not(.footer__btn--disabled) {
background-color: mix(white, #FA901C, 20%);
}
.footer__btn--light {
background-color: white;
border: 1px solid #DEDEDE;
color: #333;
}
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
background-color: white;
border-color: mix(white, #FA901C, 50%);
color: #FA901C;
}
.footer__btn--disabled {
opacity: .6;
cursor: default;
}
}
.nz-dialog .el-dialog__body{
padding-bottom: 0;
}
.verify-link{
font-family: Roboto-Black;
font-size: 14px;
color: #3C92F1;
letter-spacing: 0;
line-height: 20px;
font-weight: 400;
cursor: pointer;
}
.verify-link:hover{
border-bottom: 1px solid #3C92F1;
}
.circle{
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #CECECE;
margin-right: 10px;
}
}

110
nezha-fronted/src/assets/css/components/common/multipleTime.scss Normal file
View File

@@ -0,0 +1,110 @@
.multiple-time-box {
.loading-font {
color: #232f3e !important;
}
.popper-z-index {
z-index: 3000 !important;
}
.nz-dashboard-dropdown-bg {
background: $--color-primary;
color: #fff;
}
.calendar-dropdown-title {
line-height: 28px;
padding-left: 5px;
margin-left: 0;
margin-top: -3px !important;
text-align: left;
border-radius: 2px;
min-width: 80px;
height: 28px;
border: solid 1px $--border-color-base;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.el-dropdown-link {
cursor: pointer;
}
.calendar-popover {
line-height: 22px;
text-align: center;
}
.panel-time-picker-hidden {
width: 0 !important;
padding: 0 !important;
border: 0 !important;
height: 0 !important;
overflow: hidden;
}
.time-picker-button {
padding: 0 1px !important;
height: 24px !important;
margin-top: 0 !important;
}
.time-picker-left-button {
margin-right: 4px;
}
.time-picker-right-button {
margin-left: 4px;
}
.calendar-popover-text {
}
.multiple-time-box {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
}
.compare-box .nz-icon-compare {
border-right: none;
}
.calendar {
border: none;
box-sizing: content-box;
line-height: unset;
height: 100%;
margin-left: -6px;
margin-right: 10px;
}
.nz-icon-compare {
background: $--background-color-empty;
border: 1px solid $--border-color-base;
border-radius: 2px;
padding: 6px 8px;
}
.multiple-time-datepicker-enter-active {
animation: bounce-in .5s;
}
.multiple-time-datepicker-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
width: 0;
overflow: hidden;
}
100% {
width: 125px;
overflow: hidden;
}
}
}
.panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
left: 85% !important;
}
.panel-time-picker-popper .el-date-table td.today span {
color: #232f3e !important;
}
.panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
display:none;
}
.dropdown--suffix {
padding: 0 8px;
color: #aaa;
}

97
nezha-fronted/src/assets/css/components/common/nezhaColor.scss Normal file
View File

@@ -0,0 +1,97 @@
.nz-color {
.vc-sketch-field--single, .vc-sketch-field .vc-input__label {
display: none;
}
.vc-sketch-color-wrap {
margin-left: 16px;
}
.vc-sketch-presets {
line-height: 24px;
}
.vc-sketch-presets-color {
margin: 0 7px 0 0;
}
.vue-color {
position: fixed;
z-index: 1;
}
.color-content {
height: 0;
width: 0;
overflow: hidden;
position: absolute;
top: 15px;
left: 66px;
}
.color-tab {
height: 28px;
line-height: 28px;
border-radius: 5px 5px 0 0;
border: 1px solid $--border-color-light;
border-bottom: none;
background-color: $--background-color-empty;
display: flex;
justify-content: space-between;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
z-index: 2;
}
.color-tab div {
text-align: center;
flex: 1;
color: $--color-text-secondary;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
background: $--background-color-1;
cursor: pointer;
border-top: 2px solid transparent;
}
.color-tab div:hover {
color: $--color-primary;
}
.color-tab .color-active {
background-color: $--background-color-empty;
font-size: 14px;
color: $--color-primary;
font-weight: 700;
border-color: $--color-primary;
}
.color {
position: relative;
}
.color-show {
border: 1px solid $--border-color-light;
border-radius: 5px;
display: flex;
align-items: center;
height: 30px;
}
.color-show .color-text {
font-family: PingFangSC-Regular;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
}
.color-show-left {
width: 18px;
height: 18px;
border: 1px solid $--border-color-light;
border-radius: 5px;
margin: 0 5px;
text-align: center;
}
.color-arrows {
color: #C0C4CC;
position: absolute;
right: 12px;
}
.color-arrows .nz-icon {
font-size: 12px;
}
}

96
nezha-fronted/src/assets/css/components/common/nzTransfer.scss Normal file
View File

@@ -0,0 +1,96 @@
.nz-transfer {
display: flex;
justify-content: space-between;
.nz-transfer__box {
width: calc(50% - 7.5px);
border: 1px solid $--border-color-light;
border-radius: $--border-radius-small;
.box__header {
display: flex;
align-items: center;
padding: 0 10px;
height: 52px;
color: $--color-text-regular;
box-sizing: border-box;
border-bottom: 1px solid $--border-color-light;
input {
background-color: transparent !important;
}
}
.box__table {
height: calc(100% - 94px);
border-bottom: 1px solid $--border-color-light;
.el-table--border::after, .el-table--group::after, .el-table::before {
height: 0;
}
.el-table__row {
td {
border-color: $--border-color-light;
&:first-of-type .cell {
text-overflow: unset;
}
}
}
}
.box__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px 1px;
height: 42px;
box-sizing: border-box;
.jump-input {
width: 40px;
.el-input__inner {
padding: 0 5px;
height: 24px;
line-height: 24px;
}
}
.jump-pages {
padding-left: 9px;
font-size: 14px;
color: $--color-text-primary;
}
.top-tool-btn {
height: 28px;
width: 28px;
line-height: 28px;
}
.el-pagination {
display: flex;
align-items: center;
padding: 0;
.btn-prev, .btn-next {
border: none;
background-color: transparent !important;
}
.btn-prev {
margin: 0 5px;
}
.btn-next {
margin: 0;
}
}
}
}
}
.hide-row {
display: none !important;
}
.error{
border-color: #F56C6C !important;
}

75
nezha-fronted/src/assets/css/components/common/pagination.scss Normal file
View File

@@ -0,0 +1,75 @@
.pagination {
padding-top: 8px;
text-align: center;
max-height: 42px;
}
.pagination-top .pagination {
padding-top: 0;
}
.pagination .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-size-select input{
}
.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;
-webkit-box-sizing: border-box;
box-sizing: border-box;
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: $--background-color-base;
}
.btn-next, .btn-prev {
background-color: $--background-color-base !important;
}
.pagination input {
background-color: $--background-color-base !important;
}
.el-pager li.number{
color: $--color-text-regular;
letter-spacing: 0;
font-weight:normal;
background-color: $--background-color-base;
}
.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: $--color-text-regular;
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);
}

182
nezha-fronted/src/assets/css/components/common/popBox/guide.scss Normal file
View File

@@ -0,0 +1,182 @@
.guild-pop {
.el-dialog__header {
padding: 22px;
background-color: $--color-primary-light-1;
text-align: center;
.el-dialog__title {
color: white;
font-size: 24px;
}
.el-dialog__headerbtn {
top: 29px;
i {
color: white;
font-size: 24px;
}
}
}
.el-dialog__body {
display: flex;
flex-direction: column;
padding: 30px 30px 43px;
box-sizing: border-box;
.guide-list {
display: flex;
position: relative;
width: 100%;
height: 170px;
.guide-shadow {
position: absolute;
height: 100%;
width: 16.67%;
top: -1px;
left: 0;
transition: all linear .3s;
border-bottom: 3px solid #101B27;
background-color: $--background-color-base;
}
.guide-shadow:after {
position: absolute;
z-index: 11;
content: '';
border-style: solid;
transition-duration: .3s;
transition-property: bottom;
left: calc(50% - 6px);
bottom: -9px;
border-width: 6px 6px 0;
border-color: #424242 transparent transparent transparent;
}
.guide-item {
flex: 1;
position: relative;
&:not(:nth-of-type(2)):before {
top: 100px;
width: 50%;
height: 2px;
background-color: #d8d8d8;
position: absolute;
left: 0;
content: "";
}
&:not(:last-of-type):after {
top: 100px;
width: 50%;
height: 2px;
background-color: #d8d8d8;
position: absolute;
right: 0;
content: "";
}
&.guide-item--active{
.item__title {
color: #101B27;
font-weight: bold;
}
.item__icon {
border-color: #ABABAB;
background-color: $--background-color-empty;
cursor: pointer;
i {
color: #ABABAB;
}
}
.item__icon.item__icon--disabled {
cursor: not-allowed;
opacity: 0.4;
}
}
.item__title {
padding-top: 20px;
color: $--color-text-regular;
text-align: center;
font-size: 16px;
transition: all linear .3s;
}
.item__icon {
position: relative;
top: 23px;
left: 50%;
transform: translateX(-50%);
height: 62px;
width: 62px;
border: 1px solid $--border-color-light;
border-radius: 50%;
box-sizing: border-box;
background-color: $--background-color-base;
transition: all linear .3s;
z-index: 1;
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #BEBEBE;
font-size: 30px;
transition: all linear .3s;
}
}
}
}
.guide-desc {
display: flex;
flex-direction: column;
width: 100%;
height: 200px;
padding-bottom: 32px;
box-sizing: border-box;
border: 1px solid $--color-text-secondary;
.desc-text {
flex: auto;
padding: 0 30px;
display: flex;
align-items: center;
color: #101B27;
font-size: 18px;
word-break: keep-all;
}
.guide__btn-group {
display: flex;
justify-content: center;
height: 46px;
.guide__btn {
margin: 0 15px;
padding: 0 15px;
height: 100%;
color: white;
border: none;
border-radius: $--border-radius-small;
background-color: #666;
font-size: 18px;
outline: none;
cursor: pointer;
opacity: 1;
transition: all linear .2s;
}
.guide__btn:hover {
opacity: .9;
}
.guide__btn.guide__btn--disabled {
cursor: not-allowed;
opacity: 0.4;
}
}
}
}
}

60
nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss Normal file
View File

@@ -0,0 +1,60 @@
.movable {
.el-tree-node__content {
cursor: move;
.tree--node>span:first-of-type {
cursor: pointer;
}
.tree--node>span:last-of-type>span {
cursor: pointer;
}
}
}
.tree--node>span:last-of-type>span>i {
font-weight: normal !important;
}
.select-panel-tree {
height: 350px;
overflow: auto;
}
.select-panel-tree .el-tree-node__content {
height: 34px;
line-height: 34px;
}
.select-panel-tree .el-tree-node__content:hover {
color: $--color-primary;
}
.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: $--background-color-base;
font-weight: bold;
color: $--color-primary;
}
.tree--node {
display: flex;
justify-content: space-between;
width: calc(100% - 28px);
}
.tree--node span:nth-of-type(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
.tree--operation {
opacity: 0;
}
.tree--node:hover .tree--operation {
opacity: 1;
}
.panel-dropdown-btn {
color: #60BEFF;
}
.panel-dropdown-btn:hover {
color: #409EFF;
}
.panel-dropdown-btn-delete {
color: #F98D9A;
}
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}

62
nezha-fronted/src/assets/css/components/common/popBox/selectAssetType.scss Normal file
View File

@@ -0,0 +1,62 @@
.movable {
.el-tree-node__content {
cursor: move;
.tree--node > span:first-of-type {
cursor: pointer;
}
.tree--node > span:last-of-type > span {
cursor: pointer;
}
}
}
.tree--node > span:last-of-type > span > i {
font-weight: normal !important;
}
.select-panel-tree {
height: 350px;
overflow: auto;
}
.select-panel-tree .el-tree-node__content {
height: 34px;
line-height: 34px;
}
.select-panel-tree .el-tree-node__content:hover {
color: $--color-primary;
}
.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: $--background-color-base;
font-weight: bold;
color: $--color-primary;
}
.tree--node {
display: flex;
justify-content: space-between;
width: calc(100% - 28px);
}
.tree--operation {
opacity: 0;
}
.tree--node:hover .tree--operation {
opacity: 1;
}
.panel-dropdown-btn {
color: #60BEFF;
}
.panel-dropdown-btn:hover {
color: #409EFF;
}
.panel-dropdown-btn-delete {
color: #F98D9A;
}
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}
.tree--node__disabled {
opacity: .6;
}
.tree--node__disabled:hover {
cursor: not-allowed;
}

66
nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss Normal file
View File

@@ -0,0 +1,66 @@
.movable {
.el-tree-node__content {
cursor: move;
.tree--node > span:first-of-type {
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
.tree--node > span:last-of-type > span {
cursor: pointer;
}
}
}
.tree--node > span:last-of-type > span > i {
font-weight: normal !important;
}
.select-panel-tree {
height: 350px;
overflow: auto;
}
.select-panel-tree .el-tree-node__content {
height: 34px;
line-height: 34px;
}
.select-panel-tree .el-tree-node__content:hover {
color: $--color-primary;
}
.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: $--background-color-base;
font-weight: bold;
color: $--color-primary;
}
.tree--node {
display: flex;
justify-content: space-between;
width: calc(100% - 28px);
}
.tree--node span:nth-of-type(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
.tree--operation {
opacity: 0;
}
.tree--node:hover .tree--operation {
opacity: 1;
}
.panel-dropdown-btn {
color: #60BEFF;
}
.panel-dropdown-btn:hover {
color: #409EFF;
}
.panel-dropdown-btn-delete {
color: #F98D9A;
}
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}

50
nezha-fronted/src/assets/css/components/common/popBox/selectWalk.scss Normal file
View File

@@ -0,0 +1,50 @@
.select-walk-tree {
height: 350px;
overflow-y: auto;
}
.select-walk-tree .el-tree-node__content {
height: 34px;
line-height: 34px;
}
.select-walk-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: $--background-color-base;
font-weight: bold;
color: $--color-primary;
}
.select-walk-tree .el-tree .el-checkbox {
display: none;
}
.nz-pop-select-walk {
padding: 0 !important;
}
.walk-active {
color: $--color-primary;
}
.walk-tree-item {
height: 34px;
line-height: 34px;
}
.walk-detail {
z-index: 10000 !important;
}
.walk-pop {
position: fixed;
transform: translate(-100%, -100%);
}
.walk-pop::after {
content: '';
display: block;
width: 0;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 5px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #fff;
position: absolute;
right: 0;
top: 50%;
transform: translate(10px, -50%);
}

39
nezha-fronted/src/assets/css/components/common/project/L5/CanvasContextMenu.scss Normal file
View File

@@ -0,0 +1,39 @@
.menus {
color: #000;
background-color: $--background-color-empty;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
min-width: 1.8rem;
text-align: left;
padding: 0.08rem 0;
& > div {
line-height: 2.2;
a {
color: $--color-text-primary;
display: block;
padding: 0 0.2rem;
text-decoration: none;
cursor: pointer;
&:hover {
color: #1890ff;
}
&.flex {
display: flex;
}
&.disabled {
color: #ccc;
cursor: default;
}
}
}
.line {
background-color: transparent !important;
padding: 0;
margin: 0.05rem 0;
border-top: 1px solid $--border-color-light;
}
}

621
nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss Normal file
View File

@@ -0,0 +1,621 @@
.props-box label {
line-height: 32px;
width: 100px;
font-size: 14px;
text-align: right;
}
.props-box .iconLabel {
line-height: 32px;
width: 24px;
font-size: 14px;
text-align: center;
}
.props-box .el-tabs--card > .el-tabs__header {
background: #EEEEEE;
border: none;
}
.props-box .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
background: $--background-color-empty;
font-size: 14px;
color: $--color-primary;
font-weight: 700;
border-bottom-color: $--background-color-empty;
border-top: 3px solid $--color-primary;
}
.props-box .el-tabs--card > .el-tabs__header .el-tabs__item {
box-sizing: content-box;
height: 31px;
line-height: 31px;
}
.metric-selector-input-box {
width: calc(100% - 120px) !important;
}
.query-row .input-box {
margin: 0;
}
.legend-title {
width: 100px;
margin-right: 10px;
text-align: left;
padding-left: 0;
margin-left: 10px;
height: 32px;
line-height: 32px;
font-size: 14px;
color: $--color-text-regular;
}
.project-title {
background: #eeeeee;
height: 36px;
line-height: 36px;
border-radius: 0;
padding-left: 10px;
}
.project-content {
margin: 10px;
height: calc(100% - 50px);
overflow-y: auto;
.project-content-title {
background: $--background-color-base;
padding-left: 10px;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
height: 32px;
line-height: 31px;
margin-bottom: 5px;
}
.project-content-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
}
.half.project-content-item {
width: calc(50% - 15px);
height: 64px;
label {
width: auto;
}
}
.project-content-item {
padding-left: 10px;
display: inline-block;
position: relative;
width: 100%;
label {
font-family: PingFangSC-Regular;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
}
.h32 {
height: 32px;
}
}
}
.project-content.node-content {
overflow-y: unset;
height: auto;
.el-select-dropdown__wrap {
max-height: 190px;
}
}
.pens-data {
.el-form-item {
margin-bottom: 10px;
}
.half-form-item {
width: calc(50% - 5px);
display: inline-block;
}
.half-form-item--end {
margin-left: 5px;
}
.full-form-item {
width: 100%;
display: inline-block;
}
.form-row-title {
height: 32px;
line-height: 32px;
background: $--background-color-base;
font-size: 14px;
padding: 0 10px;
.el-form-item__content {
height: 100%;
line-height: 32px;
> div {
width: 100%;
}
}
.title__label {
font-size: 12px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
margin-left: 10px;
}
}
.el-form-item__content {
> div {
width: 100%;
}
}
.el-form-item__label {
line-height: 0;
padding: 0;
}
.element-item {
padding: 10px 10px 10px 0;
width: 100%;
margin-bottom: 10px;
margin-top: 10px;
}
.right-box-form .element-item.form-row-item {
width: calc(100% - 120px);
padding: 20px 20px 20px 0;
}
.form-row-item .nz-icon-minus-position .nz-icon-minus-medium {
background: rgba(236, 127, 102, 0.1);
padding: 2px 6px;
color: #EC7F66;
}
.form-row-item .nz-icon-minus-position {
right: 6px;
}
}
.sub-box {
padding: 0 10px;
}
.props-box {
.metric-selector-title {
margin-left: 10px;
width: 98px !important;
}
.query-row .input-box {
margin-right: 0 !important;
}
.el-cascader-node {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nz-cascade-temp {
box-sizing: border-box;
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.metric-selector-title {
background: $--background-color-empty !important;
}
.el-collapse-item__arrow.el-icon-arrow-right{
display: inline-block !important;
}
.el-select--mini {
width: 100%;
}
.el-tabs.el-tabs--card {
height: 100%;
.el-tabs__content {
height: calc(100% - 55px) !important;
overflow-y: auto;
padding: 0 10px;
}
}
.el-collapse {
background: $--background-color-empty;
border: none;
font-size: 14px;
}
.el-collapse-item__header {
padding: 0 10px;
background-color: #eeeeee;
height: 32px;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
line-height: 14px;
}
.el-collapse-item {
margin-bottom: 10px;
}
.el-collapse-item__wrap {
padding: 0 10px;
background-color: $--background-color-empty;
border: none;
}
.el-collapse-item__content {
padding: 10px 0 0 0;
}
.el-input-number__decrease, .el-input-number__increase {
visibility: hidden;
outline: none;
}
.el-input-number:focus {
.el-input-number__decrease, .el-input-number__increase {
visibility: visible;
outline: none;
}
}
.el-input-number:focus-within {
.el-input-number__decrease, .el-input-number__increase {
visibility: visible;
outline: none;
}
}
}
.thresholds-box {
background: $--background-color-empty;
border-top: 1px solid $--border-color-light;
border-left: 1px solid $--border-color-light;
border-radius: 2px;
font-size: 12px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
.thresholds-title {
font-size: 12px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 500;
}
.thresholds-cell {
border-bottom: 1px solid $--border-color-light;
border-right: 1px solid $--border-color-light;
padding: 5px 5px;
height: 42px;
line-height: 32px;
.el-input-group__prepend {
padding: 0 10px;
}
.is-arrow-active {
color: $--color-primary;
}
.nz-icon.nz-icon-arrow-up1 {
margin-right: -15px;
}
}
}
.value-mapping-add {
background: $--color-primary-light-3;
margin-bottom: 10px;
height: 24px;
line-height: 24px;
color: $--color-primary;
box-sizing: border-box;
}
.mb10 {
margin-bottom: 10px;
}
.mt10 {
margin-top: 10px;
}
.p10 {
padding: 10px;
}
.pl0 {
padding-left: 0;
}
.special-select .el-select.el-select--small {
width: 100%;
}
.special-select .el-input.el-input--prefix.el-input--suffix, .line-width .el-input.el-input--prefix.el-input--suffix {
border: 1px solid $--border-color-base;
height: 28px;
}
.special-select .el-input__inner, .line-width .el-input__inner {
display: none;
}
.special-select .el-input__prefix, .line-width .el-input__prefix {
height: 28px;
line-height: 28px;
color: #899FB7;
width: 100%;
}
.special-select .el-input__prefix > div {
width: 100%;
height: 100%;
}
.props-box {
position: relative;
width: 100%;
height: calc(100% - 20px);
padding-bottom: 20px;
.iconfont {
cursor: pointer;
}
.iconfontSize16 {
font-size: 16px;
margin-right: 5px;
}
.flex {
display: flex;
.full {
flex: 1;
}
}
.flex-warp {
flex-wrap: wrap;
}
.props-pen-item {
width: 50%;
.p10 {
position: relative;
}
.gradient-to {
.el-select.el-select--small {
vertical-align: top;
width: calc(100% - 42px);
margin-left: 5px;
}
}
.gradient-to-color {
display: inline-block;
width: calc(100% - 70px);
}
}
.icon-item {
width: 75%;
height: 100%;
padding-left: 25%;
}
.icon-item svg {
width: 100%;
height: 100%;
}
.del-btn {
position: absolute;
top: 0;
right: 0;
border: none;
cursor: pointer;
z-index: 2;
}
.del-btn:hover {
background: #D8D7D7 !important;
}
.bottom {
font-size: 14px;
position: absolute;
bottom: 10px;
left: 10px;
}
.el-input-number--small {
width: auto;
}
}
.color-content {
height: 0;
width: 0;
overflow: hidden;
position: absolute;
top: 15px;
left: 66px;
}
.thresholds-cell .color-content {
top: 32px;
left: 137px;
}
.color-tab {
position: absolute;
top: 43px;
left: 0;
height: 28px;
border-radius: 5px 5px 0 0;
width: 312px;
border: 1px solid #EBEEF5;
border-bottom: none;
background-color: $--background-color-empty;
display: flex;
justify-content: space-between;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
z-index: 1;
}
.color-tab div {
text-align: center;
flex: 1;
color: #909399;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
background: #E4E7ED;
cursor: pointer;
border-top: 2px solid transparent;
}
.color-tab div:hover {
color: #409EFF;
}
.color-tab .color-active {
background-color: $--background-color-empty;
font-size: 14px;
color: #FA901C;
font-weight: 700;
border-color: #FA901C;;
}
.color {
position: relative;
}
.color-show {
border: 1px solid $--border-color-light;
border-radius: 5px;
display: flex;
align-items: center;
width: 100%;
height: 30px;
}
.color-show .color-text {
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
}
.color-show-left {
width: 18px;
height: 18px;
border: 1px solid $--border-color-light;
border-radius: 5px;
margin: 0 5px;
}
.color-arrows {
color: #C0C4CC;
position: absolute;
right: 12px;
}
.color-arrows .nz-icon {
font-size: 12px;
}
.v-sub {
vertical-align: sub;
}
.font12 {
font-size: 12px;
}
.font20 {
font-size: 20px;
}
.can-clear.el-color-dropdown .el-color-dropdown__link-btn {
display: inline-block !important;
margin-right: 5px;
}
.no-style-class.el-color-picker__panel {
border-radius: 0 0 5px 5px;
border-top: none;
}
.icon-item {
width: 75%;
height: 100%;
padding-left: 25%;
}
.icon-item svg {
width: 180px;
height: 100%;
}
.el-color-predefine__color-selector:nth-child(10n+1) {
margin-left: 8px;
}
.el-color-predefine__color-selector {
margin: 0 0 8px 8px;
width: 22px;
height: 22px;
}
.color-before-select {
width: 60px;
border-radius: 4px 0 0 4px;
background: $--border-color-light;
}
.color-before-select .el-input__inner {
background: rgb(245, 247, 250);
}
.color-before-select .el-input__prefix {
left: 1px;
width: 30px;
height: 29px;
top: 1px;
}
.color-before-select .el-select-dropdown__item {
text-align: center;
}

300
nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss Normal file
View File

@@ -0,0 +1,300 @@
.mc {
.right-box .list-page .main-container {
background: $--background-color-empty;
}
.right-box-project-alert {
width: 850px;
padding-right: 30px;
}
.right-box-title {
font-weight: bold;
padding-left: 20px;
position: absolute;
z-index: 1;
}
.mc {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 11;
}
.top-tools {
float: right;
}
.top-tools > div {
margin-top: 6px;
}
.el-tooltip {
display: inline-block;
}
.red, .green {
color: white;
padding: 2px 5px;
border-radius: 4px;
}
.severity .P1 {
background: #F5846A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P2 {
background: #F7A54A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P3 {
background: #F1C13D;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
}
/* end--table*/
.expression-info{
padding: 5px;
height: 100%;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
.expression-info-title{
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 600;
line-height: 40px;
height: 40px;
border-bottom: 1px dashed $--border-color-base;
}
.expression-info-content{
height: calc(100% - 60px);
overflow-y: auto;
padding:5px;
}
.info-title{
overflow: hidden;
padding-right: 10px;
text-overflow: ellipsis;
line-height: 20px;
font-weight: 500;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
}
.info-content{
text-align: center;
}
}
.pop-data-info-content.info-content {
display: flex;
margin-right: 15px;
flex-direction: column;
justify-content: space-between;
.info-box {
background: $--background-color-empty;
border: 1px solid $--border-color-light;
width: 334px;
margin-bottom: 15px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 9px -1px rgba(205, 205, 205, 0.77);
}
.info-box-title {
background: $--background-color-1;
font-size: 14px;
color: $--color-text-primary;
height: 26px;
line-height: 26px;
padding-left: 12px;
font-weight: bold;
}
.info-box-content {
font-size: 12px;
color: $--color-text-primary;
}
.content-box {
padding: 0 12px;
height: 29px;
line-height: 24px;
}
.info-box-content .content-box:not(:last-child) {
border-bottom: 1px solid rgba(205, 205, 205, 0.77);
}
.content-title {
font-size: 12px;
color: $--color-text-primary;
width: 120px;
display: inline-block;
border-right: 1px solid rgba(205, 205, 205, 0.77);
padding: 3px 0;
}
.content-text {
width: 175px;
color: $--color-text-primary;
font-size: 12px;
display: inline-block;
padding: 3px 5px;
}
.module-type {
border: 1px solid #DCDCDC;
text-align: center;
width: 44px;
display: inline-block;
height: 20px;
margin: 0 auto;
line-height: 20px;
}
.module-type:first-child {
border-right-color: rgba(255, 140, 14, 0.54);
border-radius: 4px 0 0 4px;
margin-right: -4px;
border-right: none;
}
.module-type:last-child {
border-left-color: rgba(255, 140, 14, 0.54);
border-radius: 0 4px 4px 0;
z-index: -1;
}
.module-type-select {
border-color: rgba(255, 140, 14, 0.54);
color: rgba(255, 140, 14, 0.54);
}
}
.main-content {
display: flex;
margin-right: 15px;
flex-direction: column;
justify-content: space-between;
.tooltip--row {
position: relative;
height: 70px;
.legend-value {
font-size: 12px;
color: $--color-text-primary;
position: absolute;
left: 150px;
top: 6px;
}
.tooltip-chart {
height: 100%;
width: 100%;
}
}
.tooltip-alert--title span:first-of-type {
font-weight: 600;
}
.tooltip-alert--title span:last-of-type {
padding-left: 10px;
}
.tooltip-alert--row:last-of-type {
margin-bottom: unset;
}
.tooltip-alert--row {
padding: 0 10px;
margin-bottom: 10px;
height: 20px;
font-size: 12px;
display: flex;
.row--label {
width: 40px;
border-radius: 4px 0 0 4px;
color: white;
text-align: center;
}
.row--label__p1 {
background-color: #F2866E;
border-color: #F2866E;
}
.row--label__p2 {
background-color: #F89984;
border-color: #F89984;
}
.row--label__p3 {
background-color: #F7BA78;
border-color: #F7BA78;
}
.row--value {
padding: 0 8px;
min-width: 40px;
border: 1px solid;
border-radius: 0 4px 4px 0;
text-align: center;
}
.row--value__p1 {
color: #F2866E;
border-color: #F2866E;
}
.row--value__p2 {
color: #F89984;
border-color: #F89984;
}
.row--value__p3 {
color: #F7BA78;
border-color: #F7BA78;
}
}
.main-box {
background: $--background-color-empty;
border: 1px solid $--border-color-light;
width: 190px;
margin-bottom: 15px;
}
.main-box-title {
background: $--background-color-1;
font-size: 14px;
color: $--color-text-primary;
height: 26px;
line-height: 26px;
padding-left: 12px;
}
.main-box-content {
font-size: 12px;
color: $--color-text-primary;
padding: 12px;
}
.main-box-content .content-box:not(:last-child) {
margin-bottom: 5px;
}
.content-title {
color: $--color-text-regular;
}
.colorFFF {
color: #FFFFFF;
vertical-align: middle;
display: inline-block;
padding: 1px;
font-size: 10px;
margin-right: 5px;
line-height: 1;
}
}

73
nezha-fronted/src/assets/css/components/common/project/L5/topoTooltip.scss Normal file
View File

@@ -0,0 +1,73 @@
.tooltip-box {
background: $--background-color-empty;
box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.11);
border-radius: 4px;
padding: 10px;
max-height: 400px;
min-height: 200px;
height: 100%;
box-sizing: border-box;
.tooltip-box-chart {
border: 1px solid $--border-color-light;
max-height: 400px;
min-height: 200px;
height: 100%;
display: flex;
overflow: hidden;
.line-chart {
width: 300px;
flex: 1;
.resize-box {
border: none;
}
}
.chart-remark {
white-space: pre-wrap;
width: 110px;
font-size: 12px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
word-break: break-word;
padding-right: 5px;
height: calc(100% - 24px) !important;
margin-top: 24px;
padding-top: 5px;
line-height: 16px;
}
}
.tooltip-box-info {
border: 1px solid $--border-color-light;
background: $--background-color-empty;
max-height: 400px;
min-height: 200px;
min-width: 186px;
max-width: 300px;
}
.topology-chart-title {
text-align: left;
width: 100%;
line-height: 20px;
height: 24px;
padding: 5px 10px 0 10px;
box-sizing: border-box;
}
.topology-tool-tip .topology-chart-title {
margin-top: -23px;
border-bottom: 1px dashed $--border-color-base;
padding-left: 0;
margin-left: 10px;
padding: 0;
box-sizing: border-box;
width: 388px;
}
.topology-tool-tip .line-area {
margin-top: -15px;
}
}

173
nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss Normal file
View File

@@ -0,0 +1,173 @@
.scale-number-popover {
width: 111px;
min-width: 111px;
.el-popover {
width: 100%;
}
}
.scale-number-popover .scale-num-pop {
text-align: center;
font-size: 14px;
color: $--color-text-regular;
font-weight: 400;
width: 91px;
cursor: pointer;
}
.scale-number-popover .scale-num-pop.is-active {
color: $--color-primary;
}
.tool-top {
border-radius: 2px;
display: inline-flex;
.nz-icon {
font-size: 14px;
color: $--color-text-regular;
}
.top-tool-item {
cursor: pointer;
background: $--background-color-empty;
border: 1px solid $--border-color-base;
border-radius: 2px;
padding: 8px 11px;
line-height: 14px;
margin-right: 10px;
}
.top-tool-item-scale {
margin-left: 40px;
padding: 0;
position: relative;
.percent {
position: absolute;
top: 7px;
left: 68px;
font-size: 12px;
}
.scale-number {
width: 91px;
display: flex;
height: 30px;
line-height: 30px;
position: relative;
padding: 0 10px;
justify-content: space-between;
.scale-number-content {
width: 59px;
height: 100%;
text-align: center;
font-size: 12px;
display: block;
line-height: 28px;
}
.scale-number-symbol {
background: $--background-color-1;
height: 16px;
width: 16px;
display: inline-block;
color: $--color-text-primary;
font-size: 14px;
line-height: 16px;
border-radius: 50%;
text-align: center;
margin-top: 6px;
}
}
/deep/ .el-input--mini {
input {
border: none;
}
}
/deep/ .el-input-number--mini {
width: 111px;
}
/deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
border: none;
border-radius: 100%;
width: 16px;
height: 16px;
line-height: 16px;
margin-top: 6px;
}
/deep/ .el-input-number__decrease {
margin-left: 5px;
}
/deep/ .el-input-number__increase {
margin-right: 5px;
}
}
.top-tool-item-switch {
padding: 5px 11px;
label {
vertical-align: middle;
}
}
.top-tool-item-disabled {
color: #CECECE;
opacity: 0.3;
}
.tool-item-active {
background: #1a1a1a;
color: #fff;
}
.mb10 {
margin-bottom: 10px;
}
.mt10 {
margin-top: 10px;
}
.p10 {
padding: 10px;
}
.pl0 {
padding-left: 0;
}
.special-select {
vertical-align: middle;
}
.special-select .el-select.el-select--small {
width: 100%;
}
.special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
border: 1px solid $--border-color-base;
height: 28px;
}
.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
display: none;
}
.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
height: 28px;
line-height: 28px;
color: #899FB7;
width: 100%;
}
.special-select /deep/ .el-input__prefix > div {
width: 100%;
height: 100%;
}
.props-pen-item {
display: inline-block;
width: 130px;
}
.icon-item {
width: 100%;
height: 100%;
}
.icon-item svg {
width: 100%;
height: 100%;
}
}

12
nezha-fronted/src/components/common/project/chart.scss → nezha-fronted/src/assets/css/components/common/project/chart.scss
View File

@@ -4,7 +4,7 @@
clear: both;
}
.clearfix{
margin-bottom: 0px;
margin-bottom: 0;
}
.hidden{
visibility: hidden;
@@ -30,7 +30,7 @@
font-size:12px;
text-align:left;
left: 10px;
bottom: 0px;
bottom: 0;
line-height: 18px;
position: absolute;
padding-bottom:3px;
@@ -57,7 +57,7 @@
height: 180px;
li {
padding-left:15px !important;
padding-right:0px !important;
padding-right:0 !important;
width:140px;
text-align: left;
i {
@@ -69,7 +69,7 @@
height: 36px;
li {
padding-left:15px !important;
padding-right:0px !important;
padding-right:0 !important;
width:140px;
text-align: left;
i {
@@ -144,7 +144,7 @@
}
.chart-warring-popper[x-placement^=top] .popper__arrow::after {
border-top-color: #e6a23c;
bottom:0px;
bottom:0;
}
.chart-warring-popper[x-placement^=bottom] .popper__arrow::after {
border-bottom-color: #e6a23c;
@@ -591,7 +591,7 @@
}
.el-dialog__header{
padding: 20px 20px 0px;
padding: 20px 20px 0;
}
}

129
nezha-fronted/src/components/common/project/topology.scss → nezha-fronted/src/assets/css/components/common/project/topology.scss
View File

@@ -1,34 +1,3 @@
/deep/ .el-collapse-item__arrow.el-icon-arrow-right{
display: none !important;
}
/deep/ .el-collapse-item .is-active .nz-icon-arrow-right{
transform: rotate(90deg);
color: #FA901C;
}
/deep/ .el-collapse-item .title-delete{
display: none;
}
/deep/ .el-collapse-item .nz-icon-arrow-right{
transition: transform .3s;
color: #BEBEBE;
margin-right: 5px;
}
/deep/ .el-collapse-item:hover{
.el-collapse-item__header{
color: #FA901C;
}
.nz-icon-arrow-right{
color: #FA901C;
}
.title-delete{
display: block;
color: #FA901C;
}
}
.edit-topologyLine{
background: rgba(196,196,196,0.4) !important;
box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.27);
}
.project-box{
@keyframes model-error-animation {
0% {
@@ -63,7 +32,37 @@
width: 48px;
line-height: 48px;
}
.el-collapse-item__arrow.el-icon-arrow-right{
display: none !important;
}
.el-collapse-item .is-active .nz-icon-arrow-right{
transform: rotate(90deg);
color: $--color-primary;
}
.el-collapse-item .title-delete{
display: none;
}
.el-collapse-item .nz-icon-arrow-right{
transition: transform .3s;
color: #BEBEBE;
margin-right: 5px;
}
.el-collapse-item:hover{
.el-collapse-item__header{
color: $--color-primary;
}
.nz-icon-arrow-right{
color: $--color-primary;
}
.title-delete{
display: block;
color: $--color-primary;
}
}
.edit-topologyLine{
background: rgba(196,196,196,0.4) !important;
box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.27);
}
.model-error.nz-icon-shuidi {
color: #FADED7;
animation: model-error-animation .6s infinite ease-in-out;
@@ -103,15 +102,12 @@
@keyframes scaleTool-in {
from {
top: 0px;
left: 0px;
top: 0;
left: 0;
transform: scale(0.5);
}
}
.moduleIdRect{
/*border: 4px dashed #FA901C;*/
}
.module-rect-top{
border-top: 4px dashed #ff8c0a;
position: absolute;
@@ -177,7 +173,7 @@
}
.network-pop .no-selPop {
color: #999 !important;
color: $--color-text-secondary !important;
}
.network-pop .no-selPop .nz-icon-liubianxing {
@@ -185,7 +181,7 @@
}
.network-pop .no-selPop .nz-icon-chart {
color: #999;
color: $--color-text-secondary;
}
.network-info {
@@ -207,15 +203,15 @@
.facade-top > div{
width: 18%;
min-width: 315px;
background: #FFFFFF;
background: $--background-color-empty;
margin-right: 9px;
padding: 20px;
border: 1px solid #FFFFFF;
border: 1px solid $--background-color-empty;
box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
}
.facade-top-title{
font-size: 16px;
color: #333333;
color: $--color-text-primary;
font-weight: bold;
padding: 5px 0;
}
@@ -306,8 +302,8 @@
}
.el-dropdown-title {
background: #FFFFFF;
border: 1px solid $--primary-border-color;
background: $--background-color-empty;
border: 1px solid $--border-color-base;
border-radius: 2px;
width: 66px;
height: 28px;
@@ -325,13 +321,13 @@
position: relative;
border-radius: 2px;
overflow: visible;
background: #fff;
background: $--background-color-empty;
.pickTime{
margin-right: 10px;
}
.project-title {
height: 55px;
padding-bottom: 0px;
padding-bottom: 0;
}
.drag-header {
@@ -351,11 +347,6 @@
display: flex;
height: calc(100% - 1px);
width: 100%;
/*
height: calc(100% - 65px);
width: calc(100% - 10px);
margin: 5px;
*/
position: relative;
.tools {
@@ -365,7 +356,7 @@
position: absolute;
z-index: 1 !important;
left: 20px;
background-color: #f9f9f9;
background-color: $--background-color-base;
.title {
float: left;
@@ -385,9 +376,9 @@
z-index: 1 !important;
right: 0;
top: 0;
background: #FFFFFF;
background: $--background-color-empty;
box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
border-radius: 0px;
border-radius: 0;
}
}
.overview-page{
@@ -402,7 +393,7 @@
width: 100%;
}
.special-select /deep/ .el-select-dropdown {
.special-select .el-select-dropdown {
width: 130px !important;
.el-select-dropdown__item {
@@ -410,23 +401,23 @@
}
}
.special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
.special-select .el-input.el-input--prefix.el-input--suffix, .line-width .el-input.el-input--prefix.el-input--suffix {
border: 1px solid #DCDFE6;
height: 28px;
}
.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
.special-select .el-input__inner, .line-width .el-input__inner {
display: none;
}
.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
.special-select .el-input__prefix, .line-width .el-input__prefix {
height: 28px;
line-height: 28px;
color: #899FB7;
width: 100%;
}
.special-select /deep/ .el-input__prefix > div {
.special-select .el-input__prefix > div {
width: 100%;
height: 100%;
}
@@ -437,14 +428,14 @@
.upload-pic-label{
text-align: right;
font-size: 14px;
color: #666666;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
height: 30px;
line-height: 30px;
padding-right: 8px;
}
/deep/ .el-upload--text{
.el-upload--text{
width: 100%;
.el-upload-dragger{
width: 100%;
@@ -456,30 +447,30 @@
height: 30px;
text-align: center;
font-size: 14px;
color: #666666;
color: $--color-text-regular;
font-weight: 400;
line-height: 30px;
cursor: pointer;
.el-icon-plus{
color: #FA901C;
color: $--color-primary;
}
}
.top-tool-btn{
height: 32px;
width: 32px;
border: 1px solid $--primary-border-color;
border: 1px solid $--border-color-base;
outline: none;
border-radius: 2px;
background-color: #F9F9F9;
background-color: $--background-color-base;
-webkit-transition: background-color linear .1s;
transition: background-color linear .1s;
padding: 0;
}
.top-tool-btn:hover{
background-color: #fff;
background-color: $--background-color-empty;
}
.top-tool-btn:focus{
background-color: #fff;
background-color: $--background-color-empty;
border-color: #FBCEA4;
}
.top-tool-btn:focus .nz-icon{
@@ -491,7 +482,7 @@
right: 40px;
height: 90px;
width: 35px;
border: 1px solid #E7EAED;
border: 1px solid $--border-color-light;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
display: flex;
flex-direction: column;
@@ -499,7 +490,7 @@
width: 100%;
height: 50%;
opacity: 0.42;
background: #FFF;
background: $--background-color-empty;
align-items: center;
display: flex;
justify-content: center;

143
nezha-fronted/src/assets/css/components/common/project/topologyL5.scss Normal file
View File

@@ -0,0 +1,143 @@
.el-dropdown-menu {
.project-topology-add-node {
.el-collapse-item__header {
padding: 0 10px;
background-color: $--background-color-empty;
height: 32px;
}
.el-collapse-item__header.is-active {
background: $--background-color-base;
font-size: 14px;
color: $--color-primary;
font-weight: 700;
.el-collapse-item__arrow {
color: $--color-text-regular;
}
}
.el-collapse-item__wrap {
padding: 0 10px;
background-color: $--background-color-empty;
}
.el-collapse-item__content {
padding: 12px 0;
display: flex;
flex-wrap: wrap;
}
.el-card__body {
padding: 0;
height: 100%;
}
.handle {
position: absolute;
z-index: 2;
}
.buttons {
padding: 11px;
display: inline-block;
position: relative;
vertical-align: middle;
width: 26px;
.delIcon {
position: absolute;
width: 16px;
height: 16px;
border-radius: 10px;
font-size: 16px;
line-height: 16px;
text-align: center;
right: 2px;
top: 2px;
color: $--color-primary;
display: none;
cursor: pointer;
}
a {
display: inline-block;
color: $--color-text-primary;
width: 26px;
height: 26px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
line-height: 26px;
.iconfont {
font-size: 24px;
}
img {
max-width: 26px;
max-height: 26px;
}
&:hover {
color: #1890ff;
}
}
.upload-icon-box {
.el-icon-plus {
font-size: 14px;
margin-bottom: 10px;
}
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
}
}
.buttons{
border: 1px solid transparent;
}
.buttons:hover {
border-color: $--color-primary;
.delIcon {
display: inline-block;
}
}
}
.avatar-uploader {
line-height: 30px;
.el-icon-plus {
font-size: 12px;
color: $--color-primary;
margin: 0 8px 0 15px;
}
.el-upload--picture-card {
width: 100%;
height: 100%;
border: none;
color: #666;
font-size: 14px;
line-height: 30px;
text-align: left;
}
.el-upload--picture-card:hover, .el-upload:focus {
color: $--color-text-regular;
}
}
.avatar-uploader:active el-upload--picture-card {
color: #DB8B8B;
}
.avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus {
color: #DB8B8B;
}
}

202
nezha-fronted/src/assets/css/components/common/rightBox/addEndpointBox.scss Normal file
View File

@@ -0,0 +1,202 @@
.right-box-add-endpoint {
.nz-icon.nz-icon-shanchu1 {
font-size: 14px;
}
/* begin--子弹框*/
.right-sub-box {
width: 170px;
height: 225px;
position: fixed;
z-index: 2;
padding: 0;
}
.asset-and-endpoint{
width: 100%;
display: flex;
height: 480px;
}
.right-box-asset-table{
width: 37.5%;
margin-right: 2%;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
border-radius: 2px;
position: relative;
}
.disabled-asset-table{
position: absolute;
width: calc(100% - 2px);
height: calc(100% - 2px);
z-index: 2;
background: #999999;
left: 1px;
top: 1px;
opacity: 0.1;
}
.asset-allselect{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.right-box-endpoint-table{
width: 60%;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
border-radius: 2px;
}
/* end--table*/
/* end--子弹框*/
.search-box{
width: calc(100% - 10px);
padding: 10px 5px;
border-bottom: 1px solid $--border-color-light;
display: flex;
}
.jump-input{
width: 38px;
height: 24px;
}
.jump-pages{
font-size: 14px;
color: $--color-text-primary;
text-align: left;
line-height: 24px !important;
height: 24px !important;
font-weight: 400;
margin-left: 5px;
min-width: auto !important;
}
.jump-input .el-input__inner{
padding: 0 5px;
height: 24px;
line-height: 24px;
}
.table-bottom{
display: flex;
justify-content: space-between;
align-items: center;
}
.el-pagination .btn-next, .el-pagination .btn-prev{
margin-top: 3px;
}
.add-endpoint{
display: inline-block;
background: $--background-color-base;
border: 1px solid $--border-color-base;
border-radius: 2px;
width: 28px;
height: 28px;
margin: 7px 7px 0 0;
text-align: center;
line-height: 28px;
}
.top-tool-btn{
height: 32px;
width: 32px;
border: 1px solid $--border-color-base;
outline: none;
border-radius: 2px;
background-color: $--background-color-base;
-webkit-transition: background-color linear .1s;
transition: background-color linear .1s;
padding: 0;
}
.top-tool-btn:hover{
background-color: $--background-color-empty;
}
.top-tool-btn:focus{
background-color: $--background-color-empty;
border-color: #FBCEA4;
}
.top-tool-btn:focus .nz-icon{
color: #FBCEA4;
}
.el-form-item__content .el-input-group {
vertical-align: unset;
}
}
.el-table__row.hide-row{
display: none !important;
}
.right-box-add-endpoint {
.right-box-form>.el-form-item {
margin-left: 0;
}
.right-box-form-left.right-box-form .el-form-item .el-form-item__label {
width: 100px;
}
.asset-table .el-table td ,.asset-table .el-table th{
padding: 3px 0 !important;
}
}
.endpoint-asset-search .el-autocomplete>.el-input {
position: absolute;
}
.endpoint-asset-search .el-select {
width: 100px;
}
.endpoint-asset-search .el-cascader .el-input {
position: absolute;
height: 24px;
line-height: 24px;
input {
height: 24px;
line-height: 24px;
}
}
.endpoints-box-endpoints-title {
color: black;
font-weight: 400;
}
.right-box-endpoint-table .cell {
padding: 0 2px 0 10px;
}
.endpoints-box-endpoints .el-table .el-table__row td{
padding: 5px 0;
}
.module-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner,
.endpoint-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner {
cursor: pointer;
background-color: $--background-color-empty;
border-color: $--border-color-base;
color: $--color-text-regular;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.module-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover,
.endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover {
border-color: #c0c4cc;
}
.endpoints-box-endpoints .el-form-item {
margin-bottom: 0;
}
.endpoints-box-endpoints .el-form-item.is-error {
margin-bottom: 22px;
}
.input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus,
.input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus {
border-color: #F56C6C !important;
}
.asset-tip {
display: table;
.tip-row {
display: table-row;
.tip-cell {
display: table-cell;
padding: 2px 4px;
}
}
}
.error{
border-color: #F56C6C !important;
}

59
nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss Normal file
View File

@@ -0,0 +1,59 @@
.severity-circle{
position: absolute;
left: 10px;
top: 0;
}
.severity-box{
position: relative;
}
.severity-box /deep/ .el-select .el-input__inner{
padding-left: 25px;
}
.half-form-item {
width: calc(50% - 5px);
display: inline-block;
.el-form-item__content,.el-select{
width: 100%;
}
}
.right-box-alert-rule /deep/ .right-box__container .el-form-item__content .el-input-group--prepend{
width: 100%;
}
/deep/ .rich-text-editor{
line-height: 24px;
}
/deep/ .el-input-group__prepend{
position: relative;
.hide-icon{
width: 38px;
.el-input__inner{
border: none;
text-align: center;
}
}
}
.alert-rule-split-title{
background: $--background-color-base;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
line-height: 24px;
padding-left: 10px;
margin-bottom: 10px;
height: 24px;
}
/deep/ .el-form-item__content .el-input-group{
vertical-align: middle;
}
.severity-item{
color: $--color-text-secondary;
font-size: 12px;
max-width: 120px;
overflow: hidden;
}
.text-ellipsis{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}

98
nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss Normal file
View File

@@ -0,0 +1,98 @@
.range-time {
/deep/ .el-radio-button--small .el-radio-button__inner, /deep/ .el-radio-group {
width: 100%
}
/deep/ .el-radio-button {
width: 14.2%
}
/deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
width: 100%;
}
.datepicker {
margin-top: 20px;
display: flex;
justify-content: space-between;
.datepicker-box{
width: 48%;
flex: 1;
position: relative;
/deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner{
width: 100%;
}
/deep/ .el-input__inner{
text-align: center;
}
.datepicker-title{
position: absolute;
left: 15px;
z-index: 1;
}
}
}
}
.matchers{
/deep/ .el-input__prefix{
left: 0;
}
/deep/ .el-form-item__error{
left: 126px;
padding-top: 5px;
}
.matchers-type{
display: flex;
justify-content: space-between;
margin-top: 20px;
.matchers-type-title{
width: 125px;
background: $--border-color-light;
font-family: ArialMT;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
text-align: center;
}
/deep/ .matchers-type-title.el-select--small .el-input__inner{
background:$--border-color-light;
font-family: ArialMT;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
text-align: center;
border: none;
}
.matchers-type-content{
flex: 1;
}
}
}
/deep/ .silence-matchers-value{
width: calc(100% - 100px);
}
/deep/ .silence-matchers-key{
width: 100%;
}
.silence-matchers-regex{
margin-left: 10px;
}
/deep/ .param-box-row-key{
width: 36%;
}
/deep/ .param-box-row-value{
width: 50%;
}
.module-add-label{
display: inline-block;
width: 300px;
height: 18px;
background: #FFFCF9;
border: 1px solid #FFE0BD;
border-radius: 2px;
text-align: center;
line-height: 18px;
margin-right: 80px;
}

44
nezha-fronted/src/assets/css/components/common/rightBox/asset/assetBox.scss Normal file
View File

@@ -0,0 +1,44 @@
.placeholder-emphasize input::-webkit-input-placeholder {
color: $--color-text-regular !important;
}
.el-form__sub-title {
border: 1px solid $--border-color-light;
color: $--color-text-regular;
font-size: 14px;
padding: 0 10px;
line-height: 32px;
margin: 0 0 20px;
display: flex;
justify-content: space-between;
.el-switch {
line-height: 32px;
height: 32px;
}
.nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
color: #BDBDBD;
font-size: 12px;
}
.nz-icon-arrow-down.is-active{
transform: rotate(
-90deg
);
}
}
.need-rotate.nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
}
.need-rotate.nz-icon-arrow-down.is-active{
transform: rotate(
-180deg
);
}
.nz-btn-size-normal-new.nz-btn-style-light-new {
font-size: 12px;
color: #3C92F1;
i {
font-size: 12px;
}
}

20
nezha-fronted/src/assets/css/components/common/rightBox/assetStateBox.scss Normal file
View File

@@ -0,0 +1,20 @@
.right-box-asset-state {
.right-box-sub-title {
#add-notification {
border: none;
outline: none;
cursor: pointer;
i {
font-size: 17px;
background-color: $--background-color-base;
}
}
}
}
.notification-item {
.el-select {
width: 100px;
}
}

34
nezha-fronted/src/assets/css/components/common/rightBox/batchAddEndpoint.scss Normal file
View File

@@ -0,0 +1,34 @@
.right-box-modify-endpoint {
.error {
border: 1px solid #F56C6C !important;
}
.right-box-sub-title {
width: calc(100% - 70px);
margin-left: 15px;
}
.el-table thead .cell {
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
line-height: 14px;
font-weight: 400;
padding: 5px;
}
.table-operation-items {
display: flex;
justify-content: space-around;
}
.el-table th {
padding: 7px 0;
}
.configs-endpoint {
border-radius: 4px;
padding: 2px 7px;
}
.configs-endpoint.metrics {
color: #3C92F1;
}
.configs-endpoint.logs {
color: #25BF9A;
}
}

327
nezha-fronted/src/assets/css/components/common/rightBox/batchModifyEndpoint.scss Normal file
View File

@@ -0,0 +1,327 @@
.right-box-batch-modify-endpoint {
.nz-icon.nz-icon-shanchu1 {
font-size: 14px;
}
/* begin--子弹框*/
.right-sub-box {
width: 170px;
height: 225px;
position: fixed;
z-index: 2;
padding: 0;
}
/* begin--搜索框*/
.endpoint-asset-search {
position: relative;
margin: 0;
z-index: 11;
}
.endpoint-asset-search button {
height: 24px !important;
}
.endpoint-asset-search-dropdown {
position: absolute;
top: 25px;
background-color: #444;
border-radius: 2px;
width: 58px;
left: 0;
}
.endpoint-asset-search-dropdown-item {
text-align: center;
line-height: 22px;
height: 22px;
cursor: default;
color: white;
font-size: 12px;
}
.endpoint-asset-label-txt {
display: inline-block;
min-width: 19px;
text-align: center;
}
.endpoint-asset-search-dropdown-item:first-of-type {
border-radius: 4px 4px 0 0;
}
.endpoint-asset-search-dropdown-item:last-of-type {
border-radius: 0 0 4px 4px;
}
.endpoint-asset-search-dropdown-item:hover {
background-color: #222;
color: #ff9900;
}
.endpoint-asset-search-input {
display: inline-block;
width: 100px;
vertical-align: top;
}
.checkbox-mc{
position: absolute;
top: 0;
left: 0;
width: 14px;
height: 14px;
z-index:1;
}
/* end--搜索框*/
/* begin--table*/
.endpoint-sub-table {
padding-top: 13px;
height: calc(100% - 83px);
width: 320px;
}
.endpoint-sub-table-head {
line-height: 28px;
height: 30px;
width: 600px;
}
.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
line-height: 28px;
height: 30px;
color: $--color-text-regular;
position: relative;
width: 600px;
}
.endpoint-sub-table-row:hover {
background-color: #dadada;
cursor: default;
}
.endpoint-sub-table-row-active {
background-color: #dadada;
}
.endpoint-sub-table-row-selected {
background-color: $--color-text-regular;
color: white;
}
.endpoint-sub-table-col {
display: inline-block;
padding-left: 10px;
width: 100px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.endpoint-sub-table-paginate-all {
position: absolute;
left: 10px;
bottom: 17px;
color: #5a5a5a;
}
.endpoint-sub-table-body {
font-size: 15px;
position: relative;
height: calc(100% - 37px);
}
.endpoint-sub-table-body-dialog {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
z-index: 10;
top: 0;
}
.endpoints-clear-btn {
margin: 6px 0 0 7px;
}
.asset-and-endpoint{
width: 100%;
display: flex;
height: 480px;
}
.right-box-asset-table{
width: 37.5%;
margin-right: 2%;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
border-radius: 2px;
position: relative;
}
.disabled-asset-table{
position: absolute;
width: calc(100% - 2px);
height: calc(100% - 2px);
z-index: 2;
background: #999999;
left: 1px;
top: 1px;
opacity: 0.1;
}
.asset-allselect{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.right-box-endpoint-table{
width: 100%;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
border-radius: 2px;
}
/* end--table*/
/* end--子弹框*/
.search-box{
width: calc(100% - 10px);
padding: 10px 5px;
border-bottom: 1px solid $--border-color-light;
display: flex;
}
.new-search .search-input-all{
width: auto;
flex: 1;
}
.jump-input{
width: 38px;
height: 24px;
}
.jump-pages{
font-size: 14px;
color: #333333;
text-align: left;
line-height: 24px !important;
height: 24px !important;
font-weight: 400;
margin-left: 5px;
min-width: auto !important;
}
.jump-input .el-input__inner{
padding: 0 5px;
height: 24px;
line-height: 24px;
}
.table-bottom{
display: flex;
justify-content: space-between;
align-items: center;
}
.el-pagination .btn-next, .el-pagination .btn-prev{
margin-top: 3px;
}
.add-endpoint{
display: inline-block;
background: $--background-color-base;
border: 1px solid $--border-color-base;
border-radius: 2px;
width: 28px;
height: 28px;
margin: 7px 7px 0 0;
text-align: center;
line-height: 28px;
}
.top-tool-btn{
height: 32px;
width: 32px;
border: 1px solid $--border-color-base;
outline: none;
border-radius: 2px;
background-color: $--background-color-base;
-webkit-transition: background-color linear .1s;
transition: background-color linear .1s;
padding: 0;
}
.top-tool-btn:hover{
background-color: #fff;
}
.top-tool-btn:focus{
background-color: #fff;
border-color: #FBCEA4;
}
.top-tool-btn:focus .nz-icon{
color: #FBCEA4;
}
.el-form-item__content .el-input-group {
vertical-align: unset;
}
}
.el-table__row.hide-row{
display: none !important;
}
.right-box-modify-endpoint {
.right-box-form>.el-form-item {
margin-left: 0;
}
.right-box-form-left.right-box-form .el-form-item .el-form-item__label {
width: 100px;
}
.asset-table .el-table td ,.asset-table .el-table th{
padding: 3px 0 !important;
}
}
.endpoint-asset-search .el-autocomplete>.el-input {
position: absolute;
}
.endpoint-asset-search .el-select {
width: 100px;
}
.endpoint-asset-search .el-cascader .el-input {
position: absolute;
height: 24px;
line-height: 24px;
input {
height: 24px;
line-height: 24px;
}
}
.endpoints-box-endpoints-title {
color: black;
font-weight: 400;
}
.right-box-endpoint-table .cell {
padding: 0 2px 0 10px;
}
.endpoints-box-endpoints .el-table .el-table__row td{
padding: 5px 0;
}
.module-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner,
.endpoint-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner {
cursor: pointer;
background-color: white;
border-color: $--border-color-base;
color: $--color-text-regular;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.module-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover,
.endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover {
border-color: #c0c4cc;
}
.endpoints-box-endpoints .el-form-item {
margin-bottom: 0;
}
.endpoints-box-endpoints .el-form-item.is-error {
margin-bottom: 22px;
}
.input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus,
.input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus {
border-color: #F56C6C !important;
}
.asset-tip {
display: table;
.tip-row {
display: table-row;
.tip-cell {
display: table-cell;
padding: 2px 4px;
}
}
}
.endpointConfigsTips{
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.copy-value-content{
position: absolute;
right: 1px;
top: 4px;
}

229
nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss Normal file
View File

@@ -0,0 +1,229 @@
.right-box-edit-endpoint {
.module-walk-box {
width: 100%;
border: 1px solid $--border-color-base;
border-radius: 4px;
min-height: 32px;
margin-bottom: 22px;
padding: 3px 0;
}
.module-walk-box i {
color: #C0C4CC;
}
.walk-box-item {
padding: 5px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.walk-box-item-txt {
color: $--color-text-regular;
}
.walk-box-item-op span:first-of-type {
margin-right: 4px;
}
.walk-box-item-op span {
cursor: pointer;
}
.walk-box-op {
width: 18px;
margin: 5px 0 5px 15px;
cursor: pointer;
}
.el-cascader {
width: 100%;
}
.el-cascader__tags {
height: calc(100% - 10px);
width: 100%;
}
.right-box-module .el-cascader .el-input__inner {
height: 150px;
}
.right-box-form-tip{
color: $--color-text-secondary;
line-height: 21px;
}
.half-form-item {
width: calc(50% - 5px);
display: inline-block;
padding: 0;
}
.half-form-item:nth-child(even){
padding-left: 0;
}
.el-tabs__item{
width: 90px;
padding: 0;
text-align: center;
}
.el-tabs__item.is-active{
color: $--color-primary;
}
.el-tabs__active-bar{
background-color: $--color-primary;
}
.el-radio-group{
width: 100%;
}
.el-radio{
width: 100%;
}
.el-autocomplete{
width: 100%;
}
.need-rotate.nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
}
.need-rotate.nz-icon-arrow-down.is-active{
transform: rotate(-180deg);
}
.module-add-label{
display: inline-block;
width: 16px;
height: 18px;
background: rgba(250,144,28,0.1);
border: 1px solid #FFE0BD;
border-radius: 2px;
text-align: center;
line-height: 18px;
}
.configs-copy-value{
opacity: 0.9;
background: $--background-color-base;
border: 1px solid $--border-color-light;
border-radius: 2px;
height: 140px;
position: relative;
margin-top: 10px;
padding: 10px 0 10px 15px;
width:100%;
margin-left: 0;
pre{
max-height: 300px;
min-height: 100px;
}
}
.configs-copy-value .copy-value-content{
position: absolute;
right: 20px;
top: 14px;
cursor: pointer;
}
.ti-input{
min-height: 30px;
overflow-x: hidden;
border-radius: 2px;
padding: 0 !important;
}
.ti-tag{
background-color: $--background-color-base;
border-color: $--border-color-light;
color: $--color-text-secondary;
padding: 2px 4px!important;;
}
.el-form-item__content .el-input-group {
vertical-align: unset;
}
.special-tabs.el-tabs.el-tabs--top{
border: 1px dashed $--border-color-base;
padding: 7px 10px;
margin-top: 10px;
position: relative;
}
.nz-icon-minus-medium {
position: absolute;
right: 20px;
top: 15px;
background: rgba(236,127,102,0.1);
padding: 2px 6px;
color: #EC7F66;
}
.endpoint-title{
border: 1px solid $--border-color-light;
border-radius: 2px;
display: flex;
padding: 8px 10px;
justify-content: space-between;
}
.endpoint-title .endpoint-title-content{
font-family: Roboto-Medium;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
text-align: right;
font-weight: 500;
.nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
color: #BDBDBD;
font-size: 12px;
}
.nz-icon-arrow-down.is-active{
transform: rotate(
-90deg
);
}
}
.value-mapping-add {
background: rgba(250,144,28,0.1);
border: 1px solid #FFE0BD;
margin-bottom: 10px;
height: 24px;
line-height: 24px;
color: $--color-primary;
box-sizing: border-box;
}
#module-box-relabel .vue-tags-input{
max-width: unset;
}
.is-error .vue-tags-input{
border: 1px solid #F56C6C;
}
.right-box-module .el-cascader .el-input__inner {
height: 150px;
}
.pipeline-box{
display: flex;
justify-content: space-between;
border-bottom: 1px solid $--border-color-light;
padding-bottom: 3px;
margin-bottom: 10px;
.pipeline-title{
font-family: Roboto-Medium;
font-size: 14px;
color: $--color-primary;
letter-spacing: 0;
font-weight: 600;
text-transform: Capitalize;
}
}
}
.sub-label {
padding-right: 15px;
font-size: 14px;
color: $--color-text-regular;
text-align: left;
line-height: 30px;
padding-left: 15px;
font-weight: bold;
}
.sub-label-required::after {
content: '*';
color: #F56C6C;
margin-left: 4px;
}
.module-box-type {
margin: 25px 0 10px -15px;
}
.walk-close-box {
margin-left: 6px;
width: 14px;
}
.walk-close {
font-size: 12px;
}
.config-dropdown.hide-element{
border: none !important;
}

57
nezha-fronted/src/assets/css/components/common/rightBox/locationCascader.scss Normal file
View File

@@ -0,0 +1,57 @@
.location{
position: relative;
}
.reverse{
transform: rotate(-180deg);
}
.dropdown{
position: absolute;
width: 616px;
padding:5px;
background-color: $--background-color-empty;
display: none;
z-index: 2020;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.dropdown-active{
display: block !important;
height: 200px;
}
.location-container{
height: 100%;
width: 100%;
display: flex;
}
.location-container .container-item{
height: 100%;
flex: 1;
width: 0;
border-right: 1px solid $--border-color-light;
padding-left: 5px;
}
.container-item-content{
display: flex;
justify-content: space-between;
padding:5px;
}
.container-item-content .container-item-content_label{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $--color-text-regular;
}
.container-item-content .selected{
font-weight: 700;
color:#ee9d3f;
}
.container-item-content .container-item-content_label:hover{
color:#ee9d3f;
}
.dropdown-empty{
margin: 0;
text-align: center;
color: #999;
font-size: 14px;
}

17
nezha-fronted/src/assets/css/components/common/rightBox/menuBox.scss Normal file
View File

@@ -0,0 +1,17 @@
.right-box-menu .el-input-number .el-input__inner {
text-align: left !important;
}
.right-box-menu {
.right-box-sub-title {
#add-permission {
border: none;
outline: none;
cursor: pointer;
i {
font-size: 17px;
background-color: $--background-color-base;
}
}
}
}

237
nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss Normal file
View File

@@ -0,0 +1,237 @@
.right-box-module {
.module-walk-box {
width: 100%;
border: 1px solid $--border-color-base;
border-radius: 4px;
min-height: 32px;
margin-bottom: 22px;
padding: 3px 0;
}
.module-walk-box i {
color: #C0C4CC;
}
.walk-box-item {
padding: 5px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.walk-box-item-txt {
color: $--color-text-regular;
}
.walk-box-item-op span:first-of-type {
margin-right: 4px;
}
.walk-box-item-op span {
cursor: pointer;
}
.walk-box-op {
width: 18px;
margin: 5px 0 5px 15px;
cursor: pointer;
}
.el-cascader {
width: 100%;
}
.el-cascader__tags {
height: calc(100% - 10px);
width: 100%;
}
.right-box-module .el-cascader .el-input__inner {
height: 150px;
}
.right-box-form-tip{
color: $--color-text-secondary;
line-height: 21px;
}
.half-form-item {
width: calc(50% - 5px);
display: inline-block;
padding: 0;
}
.half-form-item:nth-child(even){
padding-left: 0;
}
.el-tabs__item{
width: 90px;
padding: 0;
text-align: center;
}
.el-tabs__item.is-active{
color: $--color-primary
}
.el-tabs__active-bar{
background-color: $--color-primary
}
.el-radio-group{
width: 100%;
}
.el-radio{
width: 100%;
}
.el-autocomplete{
width: 100%;
}
.need-rotate.nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
}
.need-rotate.nz-icon-arrow-down.is-active{
transform: rotate(
-180deg
);
}
.module-add-label{
display: inline-block;
width: 16px;
height: 18px;
background: rgba(250,144,28,0.1);
border: 1px solid #FFE0BD;
border-radius: 2px;
text-align: center;
line-height: 18px;
}
.configs-copy-value{
opacity: 0.9;
background: $--background-color-base;
border: 1px solid $--border-color-light;
border-radius: 2px;
height: 140px;
position: relative;
margin-top: 10px;
padding: 10px 0px 10px 15px;
width:100%;
margin-left: 0px;
pre{
max-height: 300px;
min-height: 100px;
}
}
.configs-copy-value .copy-value-content{
position: absolute;
right: 20px;
top: 14px;
cursor: pointer;
}
.ti-input{
min-height: 30px;
overflow-x: hidden;
border-radius: 2px;
padding: 0 !important;
}
.ti-tag{
background-color: $--background-color-base;
border-color: $--border-color-light;
color: $--color-text-secondary;
padding: 2px 4px!important;;
}
.el-form-item__content .el-input-group {
vertical-align: unset;
}
.special-tabs.el-tabs.el-tabs--top{
border: 1px dashed $--border-color-base;
padding: 7px 10px;
margin-top: 10px;
position: relative;
}
.nz-icon-minus-medium {
position: absolute;
right: 20px;
top: 15px;
background: rgba(236,127,102,0.1);
padding: 2px 6px;
color: #EC7F66;
}
.endpoint-title{
border: 1px solid $--border-color-light;
border-radius: 2px;
display: flex;
padding: 8px 10px;
justify-content: space-between;
}
.endpoint-title .endpoint-title-content{
font-family: Roboto-Medium;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
text-align: right;
font-weight: 500;
.nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
color: #BDBDBD;
font-size: 12px;
}
.nz-icon-arrow-down.is-active{
transform: rotate(
-90deg
);
}
}
.value-mapping-add {
background: rgba(250,144,28,0.1);
border: 1px solid #FFE0BD;
margin-bottom: 10px;
height: 24px;
line-height: 24px;
color: $--color-primary;
box-sizing: border-box;
}
#module-box-relabel .vue-tags-input{
max-width: unset;
}
.is-error .vue-tags-input{
border: 1px solid #F56C6C;
}
.pipeline-box{
display: flex;
justify-content: space-between;
border-bottom: 1px solid $--border-color-light;
padding-bottom: 3px;
margin-bottom: 10px;
.pipeline-title{
font-family: Roboto-Medium;
font-size: 14px;
color: $--color-primary;
letter-spacing: 0;
font-weight: 600;
text-transform: Capitalize;
}
}
}
.sub-label {
padding-right: 15px;
font-size: 14px;
color: $--color-text-regular;
text-align: left;
line-height: 30px;
padding-left: 15px;
font-weight: bold;
}
.sub-label-required::after {
content: '*';
color: #F56C6C;
margin-left: 4px;
}
.module-box-type {
margin: 25px 0 10px -15px;
}
.walk-close-box {
margin-left: 6px;
width: 14px;
}
.walk-close {
font-size: 12px;
}
.config-dropdown.hide-element{
border: none!important;
}
.param-box-row-symbol {
color: $--color-text-regular;
}
.module-form__label {
padding-bottom: 6px;
font-size: 14px;
line-height: 16px;
color: $--color-text-regular;
}

31
nezha-fronted/src/assets/css/components/common/rightBox/pipelineSelect.scss Normal file
View File

@@ -0,0 +1,31 @@
.pipeline{
width: 178px !important;
.el-select-group__wrap:not(:last-of-type){
padding-bottom: 0;
}
.el-select-group__title{
padding-left: 10px;
line-height: 32px;
}
.el-select-dropdown__item{
padding: 0 10px;
height: 32px;
line-height: 32px;
}
.el-select-group__wrap:not(:last-of-type)::after{
bottom: -2px;
left: 10px;
right: 10px;
}
.el-select-dropdown__wrap{
max-height: 300px;
}
.popper__arrow{
display: none !important;
}
}
.right-box__select{
position: absolute;
left: -55px;
top: 0;
}

66
nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/subBox.scss Normal file
View File

@@ -0,0 +1,66 @@
.right-sub-box {
width: 170px;
height: 225px;
position: fixed;
z-index: 2;
padding: 0;
/* start--param*/
.param-btn {
float: right;
height: 27px;
margin-top: -3px;
}
.param-btn-active {
background-color: #656565;
color: white;
border: 1px solid #656565;
}
.param-btn-active:hover, .param-btn-active:focus {
background-color: #656565;
color: white;
}
.param-btn-clear {
background-color: #D4D4D4;
border: 1px solid #D4D4D4;
color: white;
}
.param-btn-clear:hover, .param-btn-clear:focus {
background-color: #D4D4D4;
color: white;
}
.param-box {
height: 200px;
overflow: auto;
border: none;
}
.param-box-row {
padding: 7px 10px 0 10px;
position: relative;
}
.param-box-row:last-of-type {
padding-bottom: 7px;
}
.param-box-row-key, .param-box-row-value {
display: inline-block;
width: 50px;
}
.param-box-row-eq {
display: inline-block;
width: 14px;
text-align: center;
height: 22px;
line-height: 22px;
color: #c4c7cF;
}
/* end--param*/
}
.sub-box .add-btn{
width: 100%;
text-align: center;
height: 25px;
line-height: 25px;
position: absolute;
bottom: 0;
left: 0;
}

153
nezha-fronted/src/assets/css/components/common/rightBox/trafficSetting/trafficSettingTab.scss Normal file
View File

@@ -0,0 +1,153 @@
.asset-config-tab {
min-height: 100px;
max-height: 400px;
border: 1px solid $--border-color-light;
border-radius: 2px;
position: relative;
margin-left: 15px;
margin-top: 18px;
padding: 18px 18px 26px 40px;
.asset-item {
display: flex;
align-items: center;
margin-bottom: 18px;
.asset-item--label {
color: $--color-text-regular;
padding-right: 20px;
line-height: 32px;
}
.asset-item--input {
display: flex;
width: 100%;
padding-right: 10px;
.right-box-row-with-btn {
width: 100%;
}
}
.asset-item--btn {
height: 28px;
box-sizing: border-box;
line-height: 21px;
}
}
.endpoints-box-endpoints {
width: calc(100% - 39px);
border: 1px solid $--border-color-light;
border-radius: 2px;
padding-bottom: 10px;
table.el-table__body {
font-size: 16px;
}
}
.add-btn{
text-align: center;
}
#snmp-advanced{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
height: 30px;
top: 1px;
left: -1px;
}
.el-table tr:last-child td{
border-bottom: none;
}
.el-table .traffic-set-table-title{
color: $--color-primary;
}
}
.asset-config-tab .right-box-form-minus-box {
background-color: #FEF3F0 !important;
}
.asset-config-tab .right-box-form-minus-box .nz-icon {
color: #EF9A87 !important;
}
.tab-tags{
width: 100%;
height: 22px;
}
.tags-pop{
width: 110px;
text-align: center;
}
.tab-tags-item{
display: flex;
margin-bottom: 5px;
height: 20px;
line-height: 18px;
justify-content: center;
}
.tab-tags-item .tag-item-key{
border:1px solid #409eff;;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: #409eff;
min-width: 40px;
padding: 0 8px;
color: white;
}
.tab-tags-item .tag-item-value{
border:1px solid #409eff;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: $--background-color-empty;
min-width: 40px;
padding: 0 8px;
}
.tab-tags-item .tag-item-text{
background-color: $--background-color-empty;
width: 20px;
}
.taffic-setting-tab .el-table__row:hover{
.input__inner{
border-color: #c0c4cc;
}
}
.input__inner{
width: 120px;
height: 30px;
line-height: 30px;
padding-left: 15px;
border-radius: 2px;
border: 1px solid #DCDFE6;
}
.input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus,
.input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus {
border-color: #F56C6C !important;
}
.direction-checkbox .el-checkbox{
margin-right: 10px;
}
.direction-checkbox .el-checkbox__label{
padding-left: 0;
}
.not-allowed:hover{
cursor: not-allowed;
}
.asset-config-tab .asset-input .el-input__inner{
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/*mib 移植*/
.mib-browser-ad-search-item {
margin-bottom: 10px;
}
.mib-browser-ad-search .el-radio-group .el-radio-button__inner {
height: 24px;
line-height: 0;
}
.mib-browser-ad-search-label {
line-height: 24px;
}
.mib-browser-ad-search {
width: 450px;
}

345
nezha-fronted/src/assets/css/components/common/searchInput.scss Normal file
View File

@@ -0,0 +1,345 @@
.search-btn {
height: 30px;
width: 32px;
border: none;
outline: none;
cursor: pointer;
border-left: 1px solid $--border-color-base;
background-color: lighten($--background-color-base, 10%);
i {
color: $--color-text-regular;
font-size: 14px;
}
}
.search-btn:focus:not(.nz-btn-disabled) {
background-color: $--background-color-empty;
i {
color: $--color-primary;
}
}
.search-input-placeholder{
font-size: 12px;
color: $--color-text-secondary;
position: absolute;
left: 7px;
}
.top-tools input {
background-color: $--background-color-empty;
}
.new-search{
display: flex;
position: relative;
line-height: 25px;
border-radius: 2px;
border: 1px solid $--border-color-base;
}
.new-search .search-input-all{
width: 226px !important;
min-width: 226px;
background-color: $--input-background-color;
color: rgba(0,0,0,.55);
height: 30px;
line-height: 30px;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
display: flex;
position: relative;
* {
background-color: $--input-background-color;
}
}
input {
background-color: $--background-color-base;
}
.search-input-all .btn-retract{
padding: 0 4px;
text-align: center;
}
.search-input-all .search-history{
padding: 0 7px;
height: 18px;
line-height: 18px;
text-align: center;
border-right: 1px solid $--border-color-light;
margin-top: 6px;
position: relative;
}
.search-input-all .input-center-box{
flex: 1;
height: 100%;
overflow: hidden;
}
.search-input-all .clear-search{
padding: 0 5px;
text-align: center;
font-size: 12px;
}
.dataBackG{
background: darken($--background-color-base, 10%);
}
.none{
display: none !important;
}
.search-text{
display: inline-block;
margin-right: 20px;
}
.sreach_box{
position: relative;
width: 80%;
height: 25px;
padding: 20px;
background: $--background-color-empty;
margin: 200px auto;
}
.keyring_sreach_right_btn{
width: 18%;
height: 25px;
float: right;
line-height: 25px;
text-align: center;
border: 1px solid $--border-color-base;
}
.keyring_sreach_right_btn .right-btn-group{
float: left;
width: 80%;
border-right: 1px solid $--border-color-base;
box-sizing: border-box;
}
.keyring_sreach_right_btn .right-btn-icon{
float: left;
width: 19%;
}
.sreach_box .close_zhezhao{
position: absolute;
right: 0;
top: -50px;
width: 24px;
height: 25px;
border-radius: 50%;
background: $--background-color-empty;
text-align: center;
line-height: 28px;
font-size: 12px;
}
.localStorage_list_box{
position: absolute;
left: 10px;
top: 36px;
width: auto;
min-width:250px;
max-width: 350px;
height: auto;
border: 1px solid $--border-color-base;
background: $--background-color-empty;
color: #2e2e2e;
text-align: left;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 9999;
font-size: 12px;
}
.localStorage_list_box .list_box_title{
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
position: relative;
border-bottom: 1px solid $--border-color-base;
color: #2e2e2e;
}
.localStorage_list_box .list_box_title i{
position: absolute;
right: 10px;
top: 0;
}
.localStorage_list_box .list_box_content{
text-align: left;
padding: 5px 0;
box-sizing: border-box;
border-bottom: 1px solid $--border-color-base;
}
.localStorage_list_box ul li{
padding: 5px 10px;
line-height: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.localStorage_list_box ul li:hover{
background: darken($--background-color-base, 10%);
cursor:pointer;
}
.localStorage_list_box ul li span{
color: #2e2e2e;
}
.localStorage_list_box ul li .value{
font-weight: 600;
width: 350px;
}
.localStorage_list_box .list_box_clear{
padding-left: 10px;
line-height: 40px;
}
.localStorage_list_box .list_box_clear:hover{
background: darken($--background-color-base, 10%);
cursor:pointer;
}
.input-center-box .sreach_fixe_left{
width: auto;
display: flex;
height: 100%;
min-width: 100%;
}
.sreach_list{
display: flex;
justify-content:flex-start;
height: 100%;
padding-left: 10px;
}
.sreach_fixe_left .selectinfo_box{
display: flex;
flex-shrink: 0;
width: auto;
height: auto;
margin: 3px 2px;
font-size: 12px;
}
.selectinfo_box .select_condition{
float:left;
height: 13px;
padding: 3px;
background: $--background-color-base;
line-height: 13px;
color: rgba(0,0,0,.55);
}
.selectinfo_box .select_content{
float: left;
line-height: 13px;
height: 13px;
padding: 3px;
background: darken($--background-color-base, 10%);
color: rgba(0,0,0,0.85);
display: flex;
}
.selectinfo_box .select_content .nz-icon-close{
font-size: 12px;
}
.selectinfo_box .select_content>span {
max-width: 100px;
display: inline-block;
white-space: nowrap;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
}
.select_input{
height: 100%;
flex: 1;
float: left;
width: 100px;
}
.select_input input{
width: calc(100% - 1px);
height: 100%;
border: none;
float: left;
padding-left: 5px !important;
box-sizing: border-box;
outline: none;
}
.select_input input:focus {
border:none;
box-shadow:none;
outline: none;
}
.select_input .select_info_list{
position: fixed;
width: auto;
max-height: 240px;
padding: 5px 0;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow-y: auto;
z-index: 9999;
}
.select_info_list ul li{
padding: 5px 10px;
line-height: 20px;
text-overflow: ellipsis;
width: 150px;
word-break: break-all;
white-space: nowrap;
overflow: hidden;
}
.select_info_list ul li:hover{
background: darken($--background-color-base, 10%);
cursor: pointer;
}
.sreach_input .input{
flex: 1;
height: 100%;
padding-left: 10px !important;
box-sizing: border-box;
position: relative;
}
.sreach_input .input input{
width: 100%;
height: 100%;
border: none;
padding: 0 !important;
float: left;
}
.sreach_box input:focus {
outline: none;
border-color: transparent;
box-shadow: none;
}
.sreach_input input::placeholder{
color: rgba(0,0,0,0.55)
}
.input_list{
position: fixed;
width: auto;
max-width: 400px;
max-height: 240px;
min-width: 300px;
background: $--background-color-empty;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 101;
overflow-y: auto;
font-size: 12px;
}
.input_list ul{
padding: 4px 0;
}
.input_list ul li{
padding: 4px 10px;
line-height: 16px;
height: 20px;
}
.input_list ul li:hover{
background: darken($--background-color-base, 10%);
cursor:pointer;
}
.search-style-ind{
background: darken($--background-color-base, 10%);
cursor:pointer;
}
.sreach_fixe>i{
margin-right: 15px;
}
.is-disabled{
color: #C0C4CC;
cursor: not-allowed !important;
background: $--background-color-empty !important;
}
li {
list-style: none;
}

102
nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss Normal file
View File

@@ -0,0 +1,102 @@
.pointer{
background: $--color-primary;
border-radius: 2px;
border: none;
width: 40px;
height: 22px;
box-sizing: border-box;
text-align:center;
color: #fff;
font-size: 12px;
margin-right: 20px;
}
.alertLabelInfo{
border: 1px solid $--border-color-light;
border-bottom: none;
font-size: 13px;
line-height: 26px;
}
.alertLabelBox{
display: flex;
justify-content:space-between;
border-bottom: 1px solid $--border-color-light;
}
.alertLabelTitle{
text-align: left;
width: 90px;
border-right: 1px solid $--border-color-light;
color: #666;
padding: 0 3px 0 13px;
}
.alertLabelValue{
text-align: left;
width: 150px;
color: #1a1a1a;
padding: 0 3px 0 13px;
}
.danger{
background-color: #d64f40;
color: white;
padding: 2px 5px;
border-radius: 4px;
}
.success{
background-color: #50d050;
color: white;
padding: 2px 5px;
border-radius: 4px;
}
/deep/.active-icon{
margin-top: 0;
}
.contentTable{
height: calc(100% - 105px)
}
.contentProject{
height: calc(100% - 60px);
margin-bottom: 15px;
}
.tabelH100{
height: 100% !important;
}
/deep/.too-long-split{
vertical-align: bottom;
}
/deep/.el-tooltip{
display: inline-block;
}
/deep/.alert-clean-pop.el-popover{
top: -30px !important;
}
.pointer{
cursor: pointer;
}
.severity .P1{
background: #F5846A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P2{
background: #F7A54A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P3{
background: #F1C13D;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.red,.green{
color: white;
padding: 2px 5px;
border-radius: 4px;
}
/deep/ .nz-message .el-textarea textarea{
height: 108px !important;
}

45
nezha-fronted/src/assets/css/components/common/table/alert/alertRuleTable.scss Normal file
View File

@@ -0,0 +1,45 @@
.severity .P1 {
background: #F5846A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P2 {
background: #F7A54A;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.severity .P3 {
background: #F1C13D;
border-radius: 2px;
font-size: 12px;
color: #FFFFFF;
padding: 2px 6px;
}
.schedEnableTitle {
padding: 15px 20px;
}
.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian {
font-size: 14px;
color: $--color-primary;
margin-right: 12px;
}
.schedEnableTitle .week-item {
width: 32px;
height: 22px;
line-height: 22px;
opacity: 0.9;
background: $--background-color-base;
border-radius: 2px;
display: inline-block;
font-size: 12px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
padding-left: 3px;
margin-right: 12px;
margin-bottom: 6px;
}

30
nezha-fronted/src/assets/css/components/common/table/alert/alertSilenceTable.scss Normal file
View File

@@ -0,0 +1,30 @@
.silence-active{
background: #E3F2D9;
border-radius: 4px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #0AB000;
line-height: 14px;
font-weight: 400;
padding: 0 5px;
}
.silence-pending{
background: #FFECD9;
border-radius: 4px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: $--color-primary;
line-height: 20px;
font-weight: 400;
padding: 0 5px;
}
.silence-expired{
background: #9e9c98;
border-radius: 4px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #ffffff;
line-height: 14px;
font-weight: 400;
padding: 0 5px;
}

32
nezha-fronted/src/assets/css/components/common/table/asset/assetTable.scss Normal file
View File

@@ -0,0 +1,32 @@
.asset-table2 {
.el-table__row {
td {
position: relative;
}
}
.active-icon-content {
display: none;
position: absolute;
background: $--background-color-empty;
min-width: 150px;
border: 1px solid $--border-color-light;
padding: 12px;
z-index: 2000;
color: $--color-text-regular;
line-height: 1.4;
text-align: justify;
font-size: 14px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
left: 100%;
top: -60%;
width: auto;
white-space: nowrap;
transform: translateY(50%);
}
.ping-info:hover {
.active-icon-content {
display: block;
}
}
}

22
nezha-fronted/src/assets/css/components/common/table/settings/projectTable.scss Normal file
View File

@@ -0,0 +1,22 @@
.project-table {
.module-num{
font-size: 14px;
font-weight: 400;
cursor: pointer;
padding: 0 3px;
.nz-icon-overview-module{
color: rgb(122, 208, 188)
}
}
.alert-num{
padding: 0 3px;
cursor: pointer;
border-radius: 2px;
}
.colorEF7458{
color: #EF7458;
}
.color23BF9A{
color: #23BF9A;
}
}

25
nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss Normal file
View File

@@ -0,0 +1,25 @@
.user-table {
.flex-align-center {
display: flex;
align-items: center;
}
.el-tag.el-tag--mini {
border-radius: 10px;
font-size: 12px;
line-height: 12px;
height: 12px;
vertical-align: middle;
}
.user-name-top {
color: $--color-text-primary;
font-weight: 600;
font-size: 14px;
line-height: 14px;
vertical-align: middle;
}
.user-name-bottom {
color: $--color-text-secondary;
font-size: 14px;
line-height: 14px;
}
}

29
nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss Normal file
View File

@@ -0,0 +1,29 @@
.endpoint-query-tab {
.el-dialog__body {
height: calc(100% - 48px) !important;
padding-bottom: 0 !important;
width: calc(100% - 40px) !important;
}
.query-page-option {
width: 100%;
background: $--background-color-empty;
margin-top: 10px;
}
.pagination {
padding-top: 0;
}
.top-tool-btn--text {
background: $--background-color-empty;
border-radius: 2px 0 0 2px;
outline: none;
height: 32px;
border: 1px solid $--border-color-base;
border-right: none;
line-height: 30px;
margin-right: -5px;
padding: 0 5px;
}
}

72
nezha-fronted/src/assets/css/components/common/timePicker.scss Normal file
View File

@@ -0,0 +1,72 @@
.loading-font{
color: #232f3e !important;
}
.popper-z-index{
z-index: 3000 !important;
}
.calendar {
line-height: 40px;
height: 40px;
box-sizing: border-box;
border: 1px solid $--border-color-base;
border-radius: $--border-radius-small;
}
.calendar.calendar--small {
line-height: 32px;
height: 32px;
.calendar-dropdown-title {
line-height: 30px;
}
}
.nz-dashboard-dropdown-bg {
background: $--color-primary;
color: #fff;
}
.calendar-dropdown-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.el-dropdown-link {
cursor: pointer;
}
.calendar-popover{
line-height:22px;
text-align:center;
}
.panel-time-picker-hidden{
width: 0 !important;
padding: 0 !important;
border: 0 !important;
visibility: hidden !important;
}
.time-picker-button{
padding: 0 1px !important;
height:24px !important;
margin-top: 0 !important;
}
.time-picker-left-button{
margin-right: 4px;
}
.time-picker-right-button{
margin-left: 4px;
}
.panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
left: 85% !important;
}
.panel-time-picker-popper .el-date-table td.today span {
color: #232f3e !important;
}
.panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
display:none;
}
.dropdown--suffix {
padding: 0 8px;
color: #aaa;
}

85
nezha-fronted/src/assets/css/components/index.scss Normal file
View File

@@ -0,0 +1,85 @@
@import './charts/chart.scss';
@import './cli/webSSH.scss';
@import './common/alert/alertLabel.scss';
@import './common/alert/alertRuleInfo.scss';
@import './common/alert/selectAlertSilence.scss';
@import './common/bottomBox/bottomBox.scss';
@import './common/bottomBox/panelTabNew.scss';
@import './common/bottomBox/terminalLogCMDTab.scss';
@import './common/bottomBox/terminalLogMonitorTab.scss';
@import './common/bottomBox/terminalLogRecordTab.scss';
@import './common/detailView/list/common.scss';
@import './common/detailView/view/detailRightTop.scss';
@import './common/detailView/view/detailViewRight.scss';
@import './common/detailView/detailView.scss';
@import './common/detailView/detailViewTopSearch.scss';
@import './common/labelFilter/clickSearch.scss';
@import './common/popBox/guide.scss';
@import './common/popBox/selectAssetMetaGroup.scss';
@import './common/popBox/selectAssetType.scss';
@import './common/popBox/selectPanel.scss';
@import './common/popBox/selectWalk.scss';
@import './common/project/L5/popData/common.scss';
@import './common/project/L5/CanvasContextMenu.scss';
@import './common/project/L5/CanvasProps.scss';
@import './common/project/L5/topologyTopTool.scss';
@import './common/project/L5/topoTooltip.scss';
@import './common/project/chart.scss';
@import './common/project/topology.scss';
@import './common/project/topologyL5.scss';
@import './common/rightBox/asset/assetBox.scss';
@import './common/rightBox/trafficSetting/subBox.scss';
@import './common/rightBox/trafficSetting/trafficSettingTab.scss';
@import './common/rightBox/addEndpointBox.scss';
@import './common/rightBox/alertRuleBox.scss';
@import './common/rightBox/alertSilenceBox.scss';
@import './common/rightBox/assetStateBox.scss';
@import './common/rightBox/batchAddEndpoint.scss';
@import './common/rightBox/batchModifyEndpoint.scss';
@import './common/rightBox/editEndpointBoxNew.scss';
@import './common/rightBox/locationCascader.scss';
@import './common/rightBox/menuBox.scss';
@import './common/rightBox/moduleBox.scss';
@import './common/table/alert/alertMessageTable.scss';
@import './common/table/alert/alertRuleTable.scss';
@import './common/table/alert/alertSilenceTable.scss';
@import './common/table/asset/assetTable.scss';
@import './common/table/settings/userTable.scss';
@import './common/table/special/endpointQuery.scss';
@import './common/browserWindowZoom.scss';
@import './common/chartUnit.scss';
@import './common/elementSet.scss';
@import './common/loading.scss';
@import './common/login.scss';
@import './common/multipleTime.scss';
@import './common/nezhaColor.scss';
@import './common/nzTransfer.scss';
@import './common/pagination.scss';
@import './common/searchInput.scss';
@import './common/timePicker.scss';
@import './layout/container.scss';
@import './layout/header.scss';
@import './layout/home.scss';
@import './layout/leftMenu.scss';
@import './page/alert/alertMessage.scss';
@import './page/alert/nzAlertTag.scss';
@import './page/config/system/notifyMethodTab.scss';
@import './page/config/about.scss';
@import './page/config/agent.scss';
@import './page/config/assetMeta.scss';
@import './page/config/mibBrowser.scss';
@import './page/config/operationRecord.scss';
@import './page/config/profile.scss';
@import './page/config/profileChangePin.scss';
@import './page/config/setup.scss';
@import './page/config/system.scss';
@import './page/dashboard/explore/explore.scss';
@import './page/dashboard/explore/logTab.scss';
@import './page/dashboard/explore/promqlInput.scss';
@import './page/dashboard/overview/chart.scss';
@import './page/dashboard/overview/overview2.scss';
@import './page/dashboard/chartBox.scss';
@import './page/dashboard/panel.scss';
@import './page/monitor/project/project.scss';

9
nezha-fronted/src/assets/css/components/layout/container.scss Normal file
View File

@@ -0,0 +1,9 @@
.container {
box-sizing: border-box;
height: calc(100% - 50px);
background-color: $--background-color-base;
width: 100%;
&>div {
height: 100%;
}
}

152
nezha-fronted/src/assets/css/components/layout/header.scss Normal file
View File

@@ -0,0 +1,152 @@
.header {
display: flex;
height: 50px;
background-color: $--background-color-empty;
.personal-avatar {
cursor: pointer;
span {
width: 32px;
height: 32px;
display: inline-block;
line-height: 32px;
background: rgba(60,146,241,0.10);
font-size: 14px;
color: #3C92F1;
letter-spacing: 0;
font-weight: 500;
text-transform: capitalize;
border-radius: 100%;
}
}
.header-menu {
display: flex;
justify-content: flex-end;
flex-grow: 1;
.el-dropdown {
width: 60px;
text-align: center;
height: 36px;
line-height: 50px;
.el-dialog{
width: 1000px;
height: 70px;
.el-dialog__header{
background-color: $--color-primary;
.el-dialog__title{
color: #fff;
}
.el-dialog__close{
color: #fff;
line-height: 50px;
font-size: 30px;
}
}
}
}
}
.header-menu--item {
color: $--color-text-regular;
cursor: pointer;
transition: color linear .2s;
i {
font-size: 18px;
}
}
.header-menu--item:hover {
color: $--color-text-primary;
}
.header-menu__item {
i {
font-size: 20px;
cursor: pointer;
}
}
.personal {
display: flex;
.el-dropdown {
margin: 0 20px;
height: 36px;
line-height: 50px;
text-align: center;
}
.login-user {
color: $--color-text-primary;
i {
color: $--color-text-secondary;
font-size: 12px;
}
}
}
.right-tip {
position: absolute;
left: 30px;
top: 10px;
padding: 0 6px;
line-height: 15px;
height: 15px;
background-color: #ba3939;
opacity: .9;
border-radius: 7px;
color: white;
font-size: 6px;
}
.left-menu--pin {
width: 20px;
font-size: 20px;
font-weight: 100;
color: $--color-text-secondary;
transition: all .4s;
height: 100%;
line-height: 50px;
margin-left: 10px;
i {
transform: rotateY(0);
transition: transform .4s;
cursor: pointer;
}
i.icon-reverse {
transform: rotateY(180deg);
}
}
.left-menu--pin-normal{
}
.left-menu--pin-reverse{
}
}
.link-title a {
color: inherit;
text-decoration: none;
}
.nz-breakcrumb {
padding-left: 15px;
line-height: 50px;
.el-breadcrumb__item {
.el-breadcrumb__inner, .el-breadcrumb__separator {
color: $--color-text-secondary;
}
.el-breadcrumb__separator {
margin: 0 9px;
font-weight: 700;
}
}
.el-breadcrumb__item:last-of-type {
.el-breadcrumb__separator {
display: none;
}
}
}
.header-link-nodata{
color: $--color-text-secondary;
padding: 20px;
}
#header-to-profile, #header-to-logout {
padding: 0 20px;
font-size: 14px;
color: $--color-text-regular;
&:hover {
color: $--color-primary-light-2;
}
}

22
nezha-fronted/src/assets/css/components/layout/home.scss Normal file
View File

@@ -0,0 +1,22 @@
.home {
display: flex;
transition: all .2s;
background-color: $--background-color-empty;
.body {
flex: 1;
display: flex;
flex-direction: column;
width: calc(100% - 240px);
transition: all .2s;
}
}
.temp-dom {
visibility: hidden;
font-size: 14px;
position: fixed;
}
.temp-dom--12 {
visibility: hidden;
font-size: 12px;
position: fixed;
}

112
nezha-fronted/src/assets/css/components/layout/leftMenu.scss Normal file
View File

@@ -0,0 +1,112 @@
.left-menu {
display: flex;
flex-direction: column;
height: 100%;
background-color: $--left-menu-background-color-base;
.el-menu-item .nz-icon, .el-submenu .nz-icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px;
}
>.el-menu:not(.el-menu--collapse) {
width: 240px;
}
>.el-menu.menu-list {
height: calc(100% - 110px);
background-color: $--left-menu-background-color-base;
border-right: none;
overflow: auto;
.el-menu {
background-color: $--left-menu-background-color-base;
}
>.el-submenu.is-active .el-submenu__title {
background-color: $--left-menu-background-color-active !important;
}
.el-submenu.is-active>.el-submenu__title, .el-submenu.is-active>.el-submenu__title>i {
color: white !important;
}
.el-submenu.is-opened .el-menu-item:not(.is-active), .el-submenu.is-opened .el-submenu__title {
background-color: $--left-menu-background-color-open !important;
}
.is-opened.is-active{
background-color: $--left-menu-background-color-open !important;
}
.el-submenu.is-active:not(.is-opened)>.el-submenu__title{
border-left: 3px $--color-primary solid;
}
.el-menu-item.is-active {
background-color: $--left-menu-background-color-active !important;
border-left: 3px $--color-primary solid;
}
.el-menu-item, .el-submenu__title {
height: 46px;
line-height: 46px;
font-size: 14px;
position: relative;
border-left: 3px $--left-menu-background-color-active solid;
}
.el-submenu__icon-arrow {
position: absolute;
top: 16px;
right: 20px;
}
}
/*---滚动条默认显示样式--*/
>.el-menu::-webkit-scrollbar-thumb {
background-color: lighten($--background-color-base, .1);
border-radius: 2px;
border: none;
}
/*---鼠标点击滚动条显示样式--*/
>.el-menu::-webkit-scrollbar-thumb:hover {
background-color: $--background-color-base;
border-radius: 2px;
}
/*---滚动条大小--*/
>.el-menu::-webkit-scrollbar {
width: 6px;
height: 14px;
}
>.el-menu.header-logo {
border-right: none;
>.el-menu-item {
padding: 13px 0 0 18px !important;
height: 50px;
border-right: 1px solid $--left-menu-background-color-base;
box-sizing: border-box;
background-color: $--left-menu-background-color-open !important;
.logo {
display: flex;
box-sizing: border-box;
img {
box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
}
.system-name {
padding-left: 5px;
color: white;
font-size: 12px;
letter-spacing: 0;
line-height: 34px;
font-weight: 400;
}
}
}
}
}
.el-menu--popup {
.el-menu-item {
height: 49px;
line-height: 49px;
}
.el-menu-item.is-active {
background-color: $--left-menu-background-color-active !important;
}
}

6
nezha-fronted/src/assets/css/components/page/alert/alertMessage.scss Normal file
View File

@@ -0,0 +1,6 @@
.active {
border-bottom: 3px solid $--color-primary;
color: $--color-text-primary;
cursor: default;
font-weight: bold;
}

76
nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss Normal file
View File

@@ -0,0 +1,76 @@
.nz-alert-tag {
border: 1px solid;
height: 20px;
font-size: 12px;
line-height: 20px;
border-radius: 4px;
display: inline-block;
box-sizing: content-box;
.nz-alert-tag__label {
border-radius: 3px 0 0 3px;
padding: 0 4px;
min-width: 36px;
max-width: 100px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-break: break-all;
display: inline-block;
height: 21px;
box-sizing: content-box;
margin-left: -1px;
}
.nz-alert-tag__content {
border-radius: 0 3px 3px 0;
padding: 0 4px;
min-width: 36px;
max-width: 115px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-break: break-all;
display: inline-block;
}
.nz-alert-tag_normal {
border-color: #409eff;
.nz-alert-tag__label {
border-right: 1px solid #409eff;
background-color: #409eff;
color: white;
}
}
.nz-alert-tag_success {
border-color: #50d050;
.nz-alert-tag__label {
border-right: 1px solid #50d050;
background-color: #50d050;
color: white;
}
}
.nz-alert-tag_info {
border-color: #909399;
.nz-alert-tag__label {
border-right: 1px solid #909399;
background-color: #909399;
color: white;
}
}
.nz-alert-tag_danger {
border-color: #d64f40;
.nz-alert-tag__label {
border-right: 1px solid #d64f40;
background-color: #d64f40;
color: white;
}
}
.nz-alert-tag_warning {
border-color: #e6a23c;
.nz-alert-tag__label {
border-right: 1px solid #e6a23c;
background-color: #e6a23c;
color: white;
}
}
}

71
nezha-fronted/src/assets/css/components/page/config/about.scss Normal file
View File

@@ -0,0 +1,71 @@
.about {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-color: white;
border: 10px solid $--background-color-base;
box-sizing: border-box;
.about-label {
color: $--color-text-secondary;
}
.app-header {
display: flex;
min-width: 360px;
.header-logo {
font-size: 0;
background-color: rgba(0, 0, 0, 0.9);
border-radius: 2px;
}
.header-title {
padding-left: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
.app-name {
font-weight: bold;
line-height: 50px;
font-size: 20px;
color: $--color-text-primary;
}
.app-version {
font-size: 14px;
color: $--color-text-primary;
font-weight: 400;
}
}
}
.app-component {
width: 360px;
margin-top: 35px;
.component-title {
color: $--color-text-secondary;
height: 30px;
font-size: 14px;
line-height: 30px;
border-bottom: 1px solid $--color-text-secondary;
}
.component-content {
padding-top: 8px;
}
.app-component-row {
line-height: 28px;
display: flex;
color: $--color-text-primary;
font-size: 16px;
font-weight: 400;
justify-content: space-between;
}
}
}

44
nezha-fronted/src/assets/css/components/page/config/agent.scss Normal file
View File

@@ -0,0 +1,44 @@
.agent-dialog .agent-box{
padding:10px;
}
.agent-box >.right-box-form>.el-form-item.half-form-item{
width: 220px;
}
.agent-box >.right-box-form>.el-form-item.half-form-item:nth-child(odd){
width: 220px;
}
.agent-box .download-url{
margin-left: 12px !important;
}
.agent-box .download-url .url-copy i{
font-size: 20px;
}
.agent-box .download-url pre code {
border: 1px solid $--border-color-base;
border-radius: 0;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
line-height: 40px;
padding: 5px 20px 5px 5px;
white-space: nowrap;
background-color: $--background-color-base;
color: $--color-text-primary;
}
.agent-box .download-url code {
color: $--color-text-primary;
}
.download-url .el-input.is-disabled .el-input__inner{
background-color: $--background-color-base;;
border-color: $--border-color-light;
color: $--color-text-primary;
cursor: text;
}
.download-url .el-input__suffix {
position: absolute;
-webkit-transition: all .3s;
height: 100%;
color: $--color-text-primary;
text-align: center;
}

74
nezha-fronted/src/assets/css/components/page/config/assetMeta.scss Normal file
View File

@@ -0,0 +1,74 @@
.asset-meta {
.content {
display: flex;
height: calc(100% - 40px);
}
.asset-meta-group {
width: 200px;
height: calc(100% - 100px);
background-color: $--background-color-empty;
margin-right: 10px;
border: 1px solid $--border-color-base;
}
.asset-meta-table {
flex: 1;
}
.group-title {
background-color: $--background-color-1;
border-bottom: 1px solid $--background-color-empty;
display: flex;
justify-content: flex-end;
padding: 3px 5px;
}
.group-box {
height: 100%;
overflow-y: auto;
}
.el-tree-node.is-current > .el-tree-node__content {
background-color: $--background-color-base;
color: $--color-primary;
}
.el-tree-node.is-current > .el-tree-node__content .meta-group {
background-color: $--background-color-base;
color: $--color-primary;
}
.el-tree-node__content:hover .meta-group {
color: $--color-primary;
}
.meta-group {
color: $--color-text-regular;
display: flex;
justify-content: space-between;
width: 100%;
}
.meta-group .nz-icon-edit {
color: $--color-text-regular;
}
.meta-group .icon-box {
display: none;
}
.meta-group:hover .icon-box {
display: inline-block;
}
.panel-select-header {
text-align: center;
}
.panel-select-tail {
border-top: 1px solid $--border-color-base;
.panel-select-add {
line-height: 32px;
height: 32px;
display: inline-block;
cursor: pointer;
i {
color: $--color-primary;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
}
}
}
}

219
nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss Normal file
View File

@@ -0,0 +1,219 @@
.mib-browser-ad-search-item {
margin-bottom: 10px;
}
.mib-browser-ad-search .el-radio-group .el-radio-button__inner {
height: 24px;
line-height: 0;
}
.mib-browser-ad-search-label {
line-height: 24px;
}
.mib-browser-ad-search {
width: 450px;
}
.mib-browser-model-dropdown {
height: 300px;
overflow-y: auto;
}
.mib-browser {
.operation {
width: 90px;
}
#browser-advanced {
border-radius: 0;
border-right: 1px solid $--border-color-base-focus;
}
.mib-browser-btn-group {
position: relative;
}
.mib-browser-ad-tip {
position: absolute;
transform: translate(-100%, -100%);
top: 3px;
left: 114px;
width: 20px;
min-width: 0;
font-size: 12px;
text-align: center;
padding: 0;
color: $--border-color-base-focus;
height: 13px;
}
.mib-browser-ad-tip::after {
content: '';
display: block;
width:0;
height:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 4px;
border-style: solid dashed dashed dashed;
border-color: $--background-color-empty transparent transparent transparent;
position: absolute;
right: 0;
top: 50%;
transform: translate(-6px, 6px);
}
.mib-browser-box {
display: flex;
height: calc(100% - 55px);
width: 100%;
border: 1px solid $--border-color-base;
border-radius: 4px;
box-sizing: border-box;
}
.mib-browser-left {
height: 100%;
width: 28%;
}
.mib-browser-tree {
height: calc(69% - 40px);
background-color: $--background-color-empty;
border-radius: 4px 0 0 0;
font-size: 14px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
.mib-browser-detail {
height: 31%;
width: 100%;
}
.el-scrollbar__wrap .el-scrollbar__view, .el-scrollbar__wrap, .el-tree {
height: 100%;
}
.tree-detail-resize {
height: 2px;
width: 100%;
background-color: $--background-color-base;
cursor: ns-resize;
border: 1px solid $--border-color-base;
border-left: none;
border-right: none;
}
.mib-browser-detail-row {
line-height: 25px;
background-color: $--background-color-empty;
border-bottom: 1px solid $--border-color-base;
font-size: 14px;
display: flex;
}
.mib-browser-detail-row:last-of-type {
border-bottom: none;
position: relative;
}
.mib-browser-detail-row:last-of-type div:last-of-type {
position: absolute;
left: calc(25% + 2px);
width: calc(75% - 20px);
height: 100%;
padding-right: 12px;
overflow: auto;
}
/*第一列宽25%*/
.mib-browser-detail-row>div:first-of-type {
color: $--color-text-regular;
width: 25%;
word-break: break-all;
}
/*第一列宽75%*/
.mib-browser-detail-row>div:last-of-type {
width: 75%;
border-left: 1px solid $--border-color-base;
word-break: break-all;
}
.mib-browser-detail-row:not(:last-of-type) {
border-bottom: 1px solid $--border-color-base;
height: 25px;
}
.mib-browser-detail-row:last-of-type {
min-height: calc(100% - 182px);
}
.mib-browser-detail-row>div {
padding-left: 5px;
}
.mib-browser-detail-description {
padding: 0 14px 0 0;
}
.mib-browser-right {
width: calc(72% - 4px);
height: 100%;
}
.left-right-resize {
width: 2px;
border: 1px solid $--border-color-base;
background-color: $--background-color-base;
cursor: ew-resize;
height: 100%;
border-top: none;
border-bottom: none;
}
.mib-browser-table {
height: calc(100% - 50px) !important;
width: calc(100% - 20px) !important;
padding: 10px;
.ant-table-scroll {
max-height: unset !important;
width: 100%;
height: 100%;
.el-table {
height: calc(100% - 20px) !important;
width: calc(100% - 20px) !important;
}
.el-table__body-wrapper td {
padding: 2px 0 !important;
}
}
}
.mib-browser-table-title, .mib-browser-tree-title {
height: 30px;
line-height: 30px;
color: $--color-text-primary;
font-size: 16px;
border-bottom: 1px solid $--border-color-base;
padding: 0 5px 0 8px;
display: flex;
justify-content: space-between;
}
.mib-browser-table-op {
display: inline-block;
margin: 0 5px;
cursor: pointer;
color: $--color-text-regular;
}
.mib-browser-table-op.mib-browser-table-op-light {
color: #ccc;
cursor: default;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: $--background-color-base;
font-weight: bold;
color: $--color-primary;
}
.pagination-bottom {
display: none;
}
}
.mib-browser-table.nz-table th .cell {
height: 28px;
line-height: 28px;
}
.mib-browser-table.nz-table td .cell {
height: 28px;
min-height: 28px;
line-height: 28px;
}
.mib-browser .el-dialog .el-dialog__footer {
margin-top: 0;
}
.mib-browser .el-button:focus, .mib-browser .el-button:hover {
color: unset;
border-color: unset;
background-color: unset;
}

34
nezha-fronted/src/assets/css/components/page/config/operationRecord.scss Normal file
View File

@@ -0,0 +1,34 @@
.top-tool-left {
.profile-right__tabs-title {
display: flex;
justify-content: space-around;
align-items: flex-start;
padding-top: 19px;
.profile-right__tabs-active {
padding:0 10px;
font-size: 14px;
height: 30px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
cursor: pointer;
opacity: .6;
}
.is-active {
border-bottom: 2px solid $--color-primary;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: bold;
opacity: 1;
z-index: 1;
}
}
.profile-hr {
position: absolute;
top: 50px;
width: calc(100% - 40px);
height: 1px;
background-color: $--background-color-1;
}
}

344
nezha-fronted/src/assets/css/components/page/config/profile.scss Normal file
View File

@@ -0,0 +1,344 @@
.profile {
display: flex;
height: calc(100% - 10px);
.profile-left {
margin: 10px 0 10px 10px;
background: $--background-color-empty;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
border-radius: 2px;
height: calc(100% - 10px);
width: 360px;
overflow: auto;
position: relative;
.profile-left__header {
height: 200px;
width: calc(100% - 18px);
margin:0 0 50px 18px;
text-align: center;
display: flex;
justify-content: flex-start;
align-items: center;
.profile-left__header-avatar {
height: 80px;
width: 80px;
line-height: 80px;
margin-left: 20px;
span {
display: inline-block;
background: rgba(60,146,241,0.10);
text-transform: capitalize;
width: 100%;
height: 100%;
font-size: 30px;
color: #3C92F1;
letter-spacing: 0;
font-weight: 500;
border-radius: 100%;
}
}
.profile-left__header-username {
height: 80px;
padding-left: 15px;
text-align: left;
.name{
display: inline-block;
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
vertical-align: middle;
padding-top: 4px;
}
.MfaName{
display: inline-block;
max-width: 158px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
vertical-align: middle;
padding-top: 4px;
}
div:nth-of-type(1) {
max-width: 200px;
font-size: 18px;
color: $--color-text-primary;
letter-spacing: 0;
line-height: 22px;
font-weight: 500;
padding: 9px 0 0 0;
}
div:nth-of-type(2) {
font-size: 18px;
color: $--color-text-regular;
letter-spacing: 0;
line-height: 22px;
font-weight: 400;
}
.profile-left__header-username__span {
display: inline-block;
text-align: center;
width: 42px;
height: 24px;
line-height: 25px;
margin-left: 10px;
background-color: #ecf5ff;
border-color: #d9ecff;
border-radius: 10px;
font-size: 14px;
color: #409EFF;
letter-spacing: 0;
font-weight: 400;
}
}
}
.profile-left__btn {
border: 1px solid $--border-color-base-focus;
border-radius: 4px;
background: $--background-color-empty;
min-width: 132px;
height: 36px;
position: absolute;
top: 175px;
left: 100px;
padding: 0 20px;
cursor: pointer;
span {
font-size: 14px;
color: $--color-text-primary;
text-align: left;
line-height: 22px;
font-weight: 400;
}
i {
color: $--color-text-regular;
margin-right: 5px;
font-size: 18px
}
}
.profile-left__center:nth-of-type(7) {
margin-bottom: 0;
}
.profile-left__center {
margin: 0 0 20px 26px;
display: flex;
justify-content: flex-start;
.profile-role {
color: #00C398;
}
.profile-email {
color: #0093F8;
}
.profile-mobile {
color: #EC7F66;
}
.profile-laiyuan {
color: #8871DB;
}
.profile-lang {
color: #6F7CD2;
}
.profile-left__center-title {
margin-top: 1px;
div:nth-of-type(1) {
padding-bottom: 5px;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
}
div:nth-of-type(2) {
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
}
}
}
.profile-left__button {
margin-left: 50px;
.profile-left__button-footer__btn {
margin: 0 10px;
height: 30px;
min-width: 74px;
padding: 0 15px;
border-radius: 4px;
}
.footer__btn {
background-color: $--color-primary;
color: white;
border: 1px solid transparent;
}
.footer__btns {
background-color: $--background-color-empty;
color: $--color-text-primary;
border: 1px solid #ccc;
}
.footer__btns:hover {
opacity: .6;
color: $--color-primary;
border: 1px solid $--color-primary;
}
.footer__btn:hover {
opacity: .6;
}
.is-disabled,.is-disabled:hover{
color: #C0C4CC;
cursor: not-allowed;
background-image: none;
background-color: $--background-color-empty;
border-color: $--border-color-light;
}
}
.profile-left__bottom {
width: 320px;
margin: 0 10px 15px;
.profile-left__bottom-title {
width: 275px;
margin: auto;
padding: 0 0 30px 0;
div:nth-of-type(1) {
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
line-height: 25px;
font-weight: 400;
}
div:nth-of-type(2) {
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
line-height: 25px;
font-weight: 400;
}
}
}
}
}
.login-dialog-title{
background-color: $--background-color-base;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
line-height: 20px;
font-weight: 400;
padding: 10px;
margin-bottom: 10px;
word-break: keep-all;
}
.login-dialog-title2{
background: rgba(246,248,250, 0.9);
border: 1px solid $--border-color-light;
border-radius: 2px;
height: 248px;
padding: 15px;
position: relative;
.copy-value-content{
position: absolute;
right: 5px;
top: 5px;
cursor: pointer;
}
.login-dialog-recover{
height: calc(100% - 30px);
overflow-y: auto;
&>div {
color: $--color-text-secondary;
}
}
}
.enter-code{
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
margin-bottom: 10px;
}
.qrCode-box{
display: flex;
align-items: center;
}
.qrCode-content{
padding: 4px;
margin-left: 10px;
}
.qrCode-text{
width: 60%;
margin-left: 10px;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
}
.qrCode-authKey{
background-color: $--background-color-base;
border: 1px solid $--border-color-light;
border-radius: 2px;
padding: 5px 12px;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
font-weight: 400;
margin-top: 12px;
}
/deep/ .nz-dialog .el-dialog__body{
padding-bottom: 0;
}
.verify-link{
font-size: 14px;
color: #3C92F1;
letter-spacing: 0;
line-height: 20px;
font-weight: 400;
cursor: pointer;
}
.verify-link:hover{
border-bottom: 1px solid #3C92F1;
}
.circle{
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #CECECE;
margin-right: 10px;
}
.footer {
.footer__btn {
margin: 0 15px;
height: 30px;
min-width: 74px;
padding: 0 15px;
color: white;
background-color: $--color-primary;
border: none;
border-radius: 4px;
outline: none;
box-sizing: border-box;
font-size: 14px;
cursor: pointer;
transition: background-color linear .2s, color linear .1s;
}
.footer__btn:hover:not(.footer__btn--disabled) {
background-color: $--color-primary-light-2;
}
.footer__btn--light {
background-color: $--background-color-empty;
border: 1px solid $--border-color-base;
color: $--color-text-primary;
}
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
background-color: $--background-color-empty;
border-color: $--color-primary-light-5;
color: $--color-primary;
}
.footer__btn--disabled {
opacity: .6;
cursor: default;
}
}
.profile-hr {
height: 1px;
background-color: $--border-color-light;
width: 320px;
margin: 40px auto
}

63
nezha-fronted/src/assets/css/components/page/config/profileChangePin.scss Normal file
View File

@@ -0,0 +1,63 @@
.profile-change {
height: 100%;
padding: 10px 0 0 25px;
width: calc(100% - 50px);
overflow: hidden auto;
.profile-change__Pin {
min-width: 300px;
max-width: 600px;
width: calc(100% - 100px);
.profile-change__Pin-from {
.profile-change__Pin-input >>> .el-form-item__label{
padding: 0 !important;
line-height: 32px;
height: 32px;
}
.el-form-item {
margin-bottom: 15px;
}
}
.profile-change__Pin-button {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
.footer__btn {
margin: 0 10px;
height: 30px;
min-width: 74px;
padding: 0 10px;
color: white;
background-color: $--color-primary;
border: none;
border-radius: 4px;
outline: none;
box-sizing: border-box;
font-size: 14px;
cursor: pointer;
transition: background-color linear .2s, color linear .1s;
}
.footer__btn:hover:not(.footer__btn--disabled) {
background-color: $--color-primary-light-2;
}
.footer__btn--light {
background-color: $--background-color-empty;
border: 1px solid $--border-color-base;
color: $--color-text-primary;
}
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
background-color: $--background-color-empty;
border-color: $--color-primary-light-5;
color: $--color-primary;
}
.footer__btn--disabled {
opacity: .6;
cursor: default;
}
}
}
}

172
nezha-fronted/src/assets/css/components/page/config/setup.scss Normal file
View File

@@ -0,0 +1,172 @@
.setup {
width: 100%;
height: 100%;
margin: 0 auto;
.logo-header {
padding-left: 20px;
width: 100%;
height: 50px;
background-color: #202f3f;
position: relative;
}
.logo-header-text {
font-family: Verdand;
font-size: 18px;
font-weight: 400;
letter-spacing: 0;
color: $--border-color-base;
}
.language-select {
position: absolute;
top: 0;
right: 20px;
z-index: 2;
margin-top: 15px;
margin-right: 20px;
}
.flex-box{
height: calc(100% - 50px);
}
.step-box {
width: 240px;
height: 100%;
}
.setup-box {
width: calc(100% - 240px);
height: 100%;
}
.step-box .step-inner {
height: 100%;
padding: 20px;
padding-left: 0;
box-sizing: border-box;
}
.setup-box .setup-inner {
position: relative;
height: 100%;
padding: 40px 30px 0 30px;
border: 10px solid $--border-color-light;
box-sizing: border-box;
}
.setup-inner .setup-config {
position: relative;
height: 100%;
}
.setup-inner .setup-help {
width: calc(100% - 710px);;
height:calc(100% - 50px);
position: absolute;
top: 20px;
right: 0;
border-left: 1px solid $--border-color-light;
padding-left: 30px;
}
.setup-help .help-header {
font-family: Roboto-Medium;
font-size: 22px;
color: $--color-text-primary;
font-weight: 500;
margin-bottom: 20px;
}
.setup-help .help-body {
font-family: Roboto-Regular;
font-size: 16px;
color: $--color-text-primary;
line-height: 28px;
font-weight: 400;
}
.welcome {
line-height: 35px;
font-size: 16px;
}
.welcome .wel-header {
font-family: Roboto-Medium;
font-size: 26px;
color: $--color-text-primary;
font-weight: 500;
}
.wizard-header {
font-family: Roboto-Bold;
font-size: 14px;
color: $--color-text-primary;
font-weight: 700;
}
.welcome ul li {
list-style: inside !important;
font-family: Roboto-Regular;
font-size: 14px;
color: $--color-text-primary;
font-weight: 400;
}
.welcome pre {
border: 1px solid $--border-color-light;
border-left: 4px solid $--color-primary;
border-radius: 0;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
font-size: 14px;
background-color: $--background-color-base;
color: $--color-text-primary;
padding: 15px;
height: 48px;
line-height: 16px;
box-sizing: border-box;
}
.welcome .content-divider {
height: 1px;
width: 100%;
border-bottom: 1px solid $--border-color-light;
margin: 5px 0;
}
.setup-bottom-btn {
width: 100%;
height: 49px;
position: absolute;
bottom: 0;
right: 20px;
padding-top: 20px;
text-align: right;
}
/* 步骤条样式 */
.el-step{
height: 46px ;
}
.el-step .el-step__head{
display: none ;
}
.el-step .el-step__main{
padding-left: 20px ;
height: 46px ;
line-height: 46px;
}
.el-step .el-step__main .el-step__title{
padding: 0 0 0 20px;
font-family: Roboto-Medium;
font-size: 16px;
color: $--color-text-secondary;
letter-spacing: 0;
font-weight: 400;
margin-top: 11px;
}
.el-step .el-step__main .el-step__title.is-process{
border-left:2px solid $--color-primary ;
color: $--color-text-primary;
font-weight: 500;
padding-left: 18px;
}
.el-step .el-step__main .el-step__title.is-success{
color: $--color-text-primary;
font-weight: 500;
}
.el-step .el-step__main .el-step__description{
display: none ;
}
.el-select-dropdown__item.selected{
font-weight: 400;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom: unset !important;
color: $--color-text-primary;
background-color: transparent;
}
}

265
nezha-fronted/src/assets/css/components/page/config/system.scss Normal file
View File

@@ -0,0 +1,265 @@
.system {
height: 100%;
position: relative;
margin-top: 10px;
}
.system-config-form{
width: 61.8% !important;
position: relative;
}
.linkBox{
max-height: 800px;
width: 800px;
}
.scrollBox{
position: relative;
height: 600px;
margin-bottom: 20px;
}
.linkTitle{
display: flex;
align-items:center;
border-bottom: 2px solid $--border-color-base;
color: #6b778c;
font-size: 12px;
height: 24px;
line-height: 24px;
font-weight: 600;
}
.handle{
cursor: move !important;
padding:0 5px;
line-height: 34px;
}
.linkBtn{
height: 28px;
line-height: 0;
font-size: 12px;
}
.linkTitleHandle{
padding: 0 13px;
}
.linkAddBox{
display: flex;
padding: 10px 0;
border-bottom: 1px solid $--border-color-base;
font-size: 13px;
line-height: 34px;
}
.linkContent{
display: flex;
padding: 10px 0;
font-size: 13px;
line-height: 34px;
}
.linkContent:not(:last-child){
border-bottom: 1px solid $--border-color-base;
}
.linkFormContent{
display: flex;
line-height: 34px;
}
.linkTitleName{
width: 100px;
margin-right: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 31px;
}
.linkTitleUrl{
width: 462px;
margin-right: 12px;
height: 31px;
}
.linkTitleUrlContent{
display: inline-block;
width: 460px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 31px;
cursor: pointer;
outline: none;
}
.linkFormBtn .nz-icon-delete{
cursor: pointer;
color: $--color-primary;
margin-left: 10px;
}
.linkFormBtn .nz-icon-edit{
font-size: 14px;
cursor: pointer;
}
.nz-icon-create-square{
cursor: pointer;
color: $--color-text-primary;
}
/deep/ .el-form-item--small .el-form-item__error{
padding-top: 0;
}
.linkUrlTip{
width: 430px;
}
.system-config-form.terminal /deep/ .el-input-number--small{
width: 512px;
}
.system-config-form.basicForm /deep/ .el-input-number--small{
width: 512px;
}
.system-config-form /deep/ .el-input input{
text-align: left;
}
.utc-item {
color: $--color-text-secondary;
font-size: 12px;
}
.system-title{
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
text-align: left;
padding-left: 20px;
font-weight: 500;
margin-bottom: 30px;
}
.system-title-border{
border-top: 1px dashed $--border-color-light;
padding-top: 30px;
width: 699px;
}
.system {
background-color: $--background-color-empty;
padding: 10px;
.el-form-item:last-of-type.monitorLastEle {
.el-form-item__content{
margin-left: 180px !important;
margin-bottom: 20px;
}
}
.el-tabs__nav-scroll{
background-color: $--background-color-empty;
}
.el-tabs__nav-scroll,.el-tabs__header,.el-tabs__nav-wrap{
border-bottom: 0;
}
.el-form-item:last-of-type {
.el-form-item__content {
margin-left: 0 !important;
text-align: center;
}
.nz-btn {
margin: 0 10px;
}
}
.full-table {
.el-tabs__content{
height: calc( 100% - 100px);
}
.list-page .main-container{
padding: unset;
}
.table-column-setting,.pagination-bottom{
display: none;
}
}
.el-tabs__content {
padding-top: 25px;
border: 1px solid $--border-color-light;
}
.el-tabs__item {
outline: none;
box-sizing: border-box;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
color: $--color-primary;
background: $--background-color-empty;
border-bottom: none;
margin-left: .1px;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: $--color-primary;
opacity: .8;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item {
height: 40px;
background: $--background-color-base;
border: 1px solid $--border-color-light;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
margin-top: 0;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(:first-child) {
margin-left: 5px;
}
}
.system-config-form .el-form-item__content{
width: 512px;
}
.system-config-form .el-input{
width: 512px;
text-align: left;
}
.system-config-form .el-input__inner{
height: 28px;
line-height: 28px;
}
.system-tabs {
box-shadow: unset !important;
border:unset;
border-top: unset;
height: 100%;
}
.system-tabs .el-tabs--border-card{
box-shadow: unset !important;
height: 100%;
width: 100%;
border-bottom: unset;
border-left: unset;
}
.reset-form .el-checkbox-group{
margin-left: -28px !important;
}
.el-form-item__tip {
color: $--color-text-secondary !important;
position: absolute;
font-size: 12px;
margin-top: 5px;
line-height: 12px;
}
.el-form-item__tip + .el-form-item__error {
margin-top: 20px;
}
.el-form-item__tip.el-form-item__tip--two-row + .el-form-item__error {
margin-top: 34px;
}
.el-form-item.has-tip {
margin-bottom: 34px;
}
.el-form-item.has-tip--two-row {
margin-bottom: 54px;
}
@keyframes warnBackground {
0% {background-color: #FFFFFF;}
25% {background-color: #EF7458;}
50% {background-color: #FFFFFF;}
75% {background-color: #EF7458;}
100% {background-color: #FFFFFF;}
}
.warn-pop {
background-color: #FEF0F0;
border-color: #FEF0F0;
color:#F66C6C;
}
.warn-pop .popper__arrow:after{
border-top-color: #FEF0F0 !important;
}
.system .logo-upload-tip{
color:#F66C6C;
font-size: 12px;
line-height: 20px;
}

29
nezha-fronted/src/assets/css/components/page/config/system/notifyMethodTab.scss Normal file
View File

@@ -0,0 +1,29 @@
.notify-method-tab {
.notify-table{
height: calc(100% - 110px)
}
.notify-table .el-table{
height: calc(100% - 10px) !important;
}
.notificationMessage{
margin-left: 20px;
display: flex;
width: calc(100% - 39px);
background: $--background-color-base;
color: $--color-text-secondary;
margin-bottom: 10px;
font-size: 14px;
justify-content: left;
justify-items: center;
align-items: flex-start;
padding: 10px;
box-sizing: border-box;
}
.notificationMessage .nz-icon {
font-size: 20px;
}
.notificationMessage .more{
font-size: 14px;
cursor: pointer;
}
}

167
nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss Normal file
View File

@@ -0,0 +1,167 @@
.el-row:last-child {
margin-bottom: 0;
}
.el-col {
border-radius: 4px;
}
.bg-purple {
background: $--background-color-empty;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.common-float-left {
float: left;
display:inline-block;
}
.el-inner {
width: 200px;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 10px;
border-color: red;
}
.element-bottom-border {
padding-bottom: 5px;
border-bottom: 1px solid #dfe7f2;
margin-top: 15px;
}
/*metric样式--begin*/
.element-item {
&:first-of-type {
padding-top: 0;
.nz-icon-minus-position {
padding-top: 4px;
}
}
padding: 20px 0;
width: 100%;
border-bottom: 1px dashed $--border-color-base;
/deep/ .nz-icon-minus {
padding: 0 4px;
}
}
.element-item__padding.element-item {
padding: 0;
}
.nz-icon-minus-position {
padding: 24px 0 24px 0;
}
.right-box-form .element-item.form-row-item{
width: calc(100% - 60px);
padding: 10px 10px 5px 0;
}
.legend-title{
width: 108px;
margin-right: 10px;
text-align: left;
padding-left:10px;
height: 32px;
border-radius: $--border-radius-small;
line-height: 32px;
background: $--border-color-light;
color: $--color-text-regular;
}
/*metric样式--end*/
.label-center{
vertical-align: middle;
line-height: 34px;
}
.z-top {
/*z-index: 2900;*/
}
.save-chart-box{
z-index: 2900;
}
.mc{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 100;
}
/deep/ .el-color-picker{
position: absolute;
}
.range /deep/ .el-color-picker{
left: -17px;
}
.color-content{
height: 0;
width: 0;
overflow: hidden;
position: absolute;
top: -280px;
left: 280px;
}
.color-tab{
position: absolute;
top: -268px;
left: 144px;
height: 28px;
border-radius: 5px 5px 0 0;
width: 312px;
border: 1px solid $--border-color-light;
border-bottom: none;
background-color: $--background-color-empty;
display: flex;
justify-content: space-between;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.color-tab div{
text-align: center;
flex: 1;
color: $--color-text-secondary;
transition: all .3s cubic-bezier(.645,.045,.355,1);
background: #E4E7ED;
cursor: pointer;
}
.color-tab div:first-child{
border-right-color: $--border-color-base;
}
.color-tab div:hover{
color: #409EFF;
}
.color-tab .color-active{
color: #409EFF;
background-color: $--background-color-empty;
}
.color{
position: relative;
}
.color-show{
display: inline-block;
position: relative;
top: 1px;
}
.topology-box{
width: 100%;
height: 242px;
border: 1px solid $--border-color-light;
border-radius: 2px;
position: relative;
}
.topology-dialog{
position: fixed !important;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
z-index: 11;
}
.topology-mc{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

306
nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss Normal file
View File

@@ -0,0 +1,306 @@
.explores {
display: flex;
padding: 10px 0 10px 10px;
background-color: $--background-color-base;
box-sizing: border-box;
.el-table--border::after, .el-table--group::after, .el-table::before {
height: 0;
}
}
.explore-collapse.el-collapse {
border: none;
.el-collapse-item {
margin-bottom: 10px;
border: 1px solid $--border-color-light;
border-bottom: none;
}
.el-collapse-item__header {
height: 38px;
line-height: 38px;
flex-direction: row-reverse;
justify-content: flex-end;
i {
margin: 0 8px;
}
}
.el-collapse-item__content {
padding: 0 30px 20px;
}
}
.explore {
.chart-view__switch {
margin-top: 20px;
border: 1px solid $--border-color-light;
border-radius: 2px;
height: 50px;
line-height: 50px;
.el-switch.is-checked {
margin-left: 35px;
}
}
.explore-table {
.el-table {
position: static !important;
tr td .cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.explore-table-gear .cell {
display: flex;
justify-content: center;
}
}
.promqlInput {
.query-row > div:first-of-type {
margin-right: 10px;
}
}
.promqlInput:not(:first-of-type) {
margin-top: 10px;
}
.main-container {
padding: 0 !important;
overflow: auto;
}
.metric-table{
border-bottom: 1px solid $--border-color-light !important;
}
height: 100%;
border-right: 1px solid $--background-color-base;
.explore-close {
display: flex;
justify-content: flex-end;
padding: 18px 20px 4px 0;
span {
cursor: pointer;
}
i {
font-size: 14px;
color: $--color-text-primary;
}
}
.el-dropdown-link {
span:nth-of-type(1) {
color: $--color-primary;
padding-right: 10px;
}
span:nth-of-type(2) {
font-size: 16px;
color: $--color-text-primary;
font-weight: 500;
padding-right: 20px;
}
span:nth-of-type(3) {
color: #BEBEBE;
}
}
.chart-room {
width: 100%;
height: 300px
}
.introduce-view {
.info-room {
padding: 24px;
background-color: #e9edf2;
border-top: 3px solid #3274d9;
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
flex-grow: 1;
.cheat-sheet-item__title {
font-size: 21px;
}
.cheat-sheet-item__label {
font-size: 13px;
}
code {
font-family: Menlo, Monaco, Consolas, Courier New, monospace;
font-size: 11px;
background-color: $--background-color-1;
color: $--color-text-regular;
border: 1px solid $--border-color-base-focus;
border-radius: 4px;
}
}
.title-heard.info-room {
color: $--color-text-primary;
h1 {
font-size: 22px;
color: $--color-text-primary;
font-weight: 500;
}
.title-heard__divider {
width: 100%;
height: 1px;
border-bottom: 2px solid $--border-color-base;
margin: 5px 0 28px 0;
}
.introduce-view__content {
line-height: 28px;
margin-top: 18px;
h2 {
font-size: 22px;
margin-bottom: 5px;
color: $--color-text-primary;
font-weight: 400;
}
.introduce-view__content-label {
p {
font-size: 16px;
color: $--color-text-primary;
font-weight: 400;
}
span {
font-size: 14px;
color: $--color-text-regular;
font-weight: 400;
}
}
}
}
}
}
/*外部引用 样式start*/
.doc-content {
font-size: 16px;
}
.doc-content p, .doc-content.ul, .doc-content .alert {
margin: 15px 0 15px 0;
line-height: 1.5;
}
.doc-content .content-divider{
height: 1px;
width:100%;
border-bottom: 2px solid $--border-color-base-focus;
margin: 5px 0;
}
.doc-content > h1 {
color: #e6522c;
font-size: 30px;
text-transform: uppercase;
}
.doc-content > h1 a {
color: #000 !important;
}
.doc-content.blog > h1 {
text-transform: none;
}
.doc-content.blog .sponsor-logos > a > img {
width: 250px;
display: inline-block !important;
margin: 15px 55px;
}
.doc-content > h1 {
color: #e6522c;
font-size: 22px;
}
.doc-content > h2 {
color: #e6522c;
font-size: 18px;
}
.doc-content > h2 code {
color: #e6522c;
background: none;
}
.doc-content > h3 {
font-size: 20px;
font-weight: bold;
}
.doc-content > h4 {
font-weight: bold;
font-size: 18px;
margin-top: 20px;
}
.doc-content a.header-anchor {
padding-left: 15px;
color: gray;
text-decoration: none;
}
.doc-content img {
width: 90%;
margin-left: auto;
margin-right: auto;
display: block;
}
.doc-content img.orig-size {
width: auto;
margin-left: 0;
}
.doc-content .open-source-notice {
color: $--color-text-regular;
background-color: $--background-color-base;
text-align: center;
padding: 0.8em;
margin-top: 1.5em;
}
.toc {
padding: 1em;
background-color: $--background-color-base;
}
.toc-right {
float: right;
width: 40%;
margin: 0 0 0.5em 0.5em;
}
.toc ul {
padding: 0 0 0 1.5em;
margin: 0;
}
.toc a code {
color: #337ab7;
background-color: transparent;
}
pre {
border: 1px solid $--border-color-base;
border-left: 4px solid #e6522c;
border-radius: 0;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
background-color: $--background-color-base;
color: $--color-text-primary;
padding: 15px;
}
pre code {
white-space: pre;
}
code {
color: $--color-text-primary;
}
aside {
color: $--color-text-secondary;
padding-bottom: 8px;
border-bottom: 1px solid #aaa;
}
article {
margin: 10px 0 60px 0;
}
/*外部引用 样式end*/

104
nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss Normal file
View File

@@ -0,0 +1,104 @@
.log-detail {
position: relative;
* {
box-sizing: border-box;
}
.log-table{
position: relative;
min-height: 200px;
}
.log-table .nz-table2 {
padding: 10px 0 0 0;
position: relative;
.el-table__body {
border-collapse: separate;
border-spacing: 0 6px;
td {
vertical-align: top;
padding: 1px 0;
border: none;
}
td.el-table__expanded-cell {
padding: 0 0 0 60px;
background-color: $--background-color-base;
}
// 左侧边框
td:first-child {
border-left: 3px solid;
}
td.log-border--debug {
border-left-color: #1f78c1;
}
td.log-border--info {
border-left-color: #7eb26d;
}
td.log-border--warn {
border-left-color: #ff851b;
}
td.log-border--error {
border-left-color: #e24d42;
}
td.log-border--fatel {
border-left-color: #705da0;
}
td.log-border--trace {
border-left-color: #6ed0e0;
}
td.log-border--unknown {
border-left-color: #dde4ed;
}
td.el-table__expanded-cell:first-child {
border-left: none;
}
// 不换行
.log-row-wrap--no-wrap .cell {
white-space: nowrap;
overflow: visible;
.text-ellipsis{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
}
.cell {
.text-ellipsis{
overflow:visible;
text-overflow:unset;
white-space: unset;
}
}
}
}
.log-chart {
height: 300px;
width: 100%;
}
.log-operations {
display: flex;
align-items: center;
height: 50px;
width: 100%;
padding: 0 10px 0 20px;
border: 1px solid $--border-color-light;
border-radius: 2px;
.log-operation {
display: flex;
align-items: center;
&.log-operation--right {
margin-left: auto;
}
&:not(:last-of-type) {
margin-right: 30px;
}
.operation-label {
padding-right: 10px;
color: $--color-text-regular;
}
}
}
}

137
nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss Normal file
View File

@@ -0,0 +1,137 @@
.promqlInput {
.no-resize{
background: rgba(255,255,255,0);
}
.promqlInput {
position: relative;
width: 100%;
display: flex;
}
.promqlInput .query-row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.input-box .append-msg {
font-size: 12px;
line-height: 1;
padding-top: 4px;
}
.input-box .error {
color: #F56C6C;
}
.query-options .option {
width: 34px;
height: 29px !important;
line-height: 30px;
text-align: center;
}
.query-options .option:focus, .query-options .option:hover {
background-color: rgb(247, 248, 250);
}
.query-row .input-box {
flex: auto;
margin-right: 10px;
}
.metric-btn {
height: 29px !important;
width: 105px;
margin-left: 1px;
}
.metric-btn:hover, .metric-btn:focus {
background-image: linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%);
color: $--color-text-regular;
}
.metric-selector .el-cascader-panel {
height: 300px;
position: absolute;
z-index: 2100;
background-color: #FFF;
}
.expr-title {
width: 120px;
padding-right: 20px;
text-align: right;
color: $--color-text-regular;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
}
/deep/ .el-cascader-node {
padding: 0;
}
/deep/ .el-cascader-menu:last-child .el-cascader-node, /deep/ .el-cascader-node__label {
padding: 0;
}
.metric-selector-title{
width:108px;
margin-right: 10px;
height: 32px;
text-align: left;
padding: 0 0 0 10px;
font-weight: 400;
line-height: 33px;
background: $--border-color-light;
border-radius: $--border-radius-small;
font-size: 14px;
color: $--color-text-primary;
letter-spacing: 0;
}
.metric-selector-input-box{
width: calc(100% - 160px);
}
.metric-null-input-box{
width: 100%;
}
.metric-null-title{
width:100%;
font-weight: bold;
letter-spacing: 0;
}
.nz-cascade {
padding: 0 10px 0 25px;
position: relative;
}
.nz-cascade .nz-icon-template2 {
display: none;
}
.nz-cascade-temp .nz-icon-template2{
display: inline-block;
position: absolute;
left: 5px;
}
.cascader-panel-more {
text-align: center;
}
.temp-form-box{
width: 480px;
}
.temp-form-box .temp-form-box-title{
font-family: PingFangSC-Medium;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 600;
margin-bottom: 5px;
}
.temp-form-box .temp-form-box-col{
margin-right: 10px;
}
.explore-select-header {
text-align: center;
margin-bottom: 14px;
}
}

57
nezha-fronted/src/assets/css/components/page/dashboard/overview/chart.scss Normal file
View File

@@ -0,0 +1,57 @@
.chart-room {
.showMore{
text-align: center;
font-size: 12px;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.nz-icon-jinggao{
color: $--color-warning;
margin-right: 5px;
font-size: 14px;
}
.moreChart{
color: rgb(87, 148, 242);
cursor: pointer;
}
width: 100%;
height: 100%;
position: relative;
.legend-container{
overflow: auto;
width: calc(100% - 30px);
max-height:80px;
min-height:25px;
/*height: 80px;*/
font-size:12px;
text-align:left;
left: 10px;
bottom: 5px;
line-height: 18px;
position: absolute;
}
.legend-container .legend-item{
text-overflow:ellipsis;
white-space:nowrap;
overflow-x:hidden;
cursor:pointer;
display:inline-block;
float:left;
line-height: 20px;
}
.ft-gr{
color:lightgray;
}
.legend-shape{
display:inline-block;
margin-right:5px;
border-radius:10px;
width:15px;
height:5px;
vertical-align: middle;
}
}

129
nezha-fronted/src/components/page/dashboard/overview/overview2.scss → nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
View File

@@ -1,14 +1,14 @@
.overview {
height: calc(100% - 20px) !important;
padding: 0 10px;
background-color: #f6f6f6;
background-color: $--background-color-base;
}
.overview-content-header{
display: flex;
justify-content: space-between;
margin-top: 10px;
padding: 5px 0 0 0;
background-color: white;
background-color: $--dashboard-background-color-empty;
box-sizing: border-box;
}
.overview-content-header .header-title{
@@ -30,6 +30,7 @@
justify-content: space-between;
min-width: 310px;
padding-right: 7px !important;
color: $--color-text-primary;
}
.tool-container .pickTime{
margin-right: -20px;
@@ -39,7 +40,6 @@
display: inline-block;
height: 35px;
line-height: 35px;
color: #333333;
vertical-align: middle;
}
.content-row-box .content-col-box:first-child{
@@ -56,7 +56,7 @@
line-height: 1.3rem;
}
.date .sys-date{
color: #333333;
color: $--color-text-primary;
font-size: 0.75rem;
line-height: 0.75rem;
width: 88px;
@@ -68,11 +68,11 @@
.operation .screen-icon{
font-size: 1.35rem !important;
cursor: pointer;
color: #666666;
color: $--color-text-regular;
}
.overview-content {
padding: 0 10px;
background-color: white;
background-color: $--dashboard-background-color-empty;
box-sizing: border-box;
height: calc(100% - 50px);
width: 100%;
@@ -100,25 +100,25 @@
.content-row-box .content-col-box{
margin: 5px;
display: inline-block;
background-color: white;
background-color: $--background-color-empty;
flex: 1;
border-radius: 5px;
border: 1px solid #edecec;
border: 1px solid $--dashboard-card-border-color;
}
.content-col-title {
height: 2rem;
line-height: 2rem;
color: #333;
color: $--color-text-primary;
font-size: 0.875rem;
padding: 0 0.625rem;
background-color: #efefef;
background-color: $--dashboard-card-header-background-color;
border-radius: 5px 5px 0 0;
display: flex;
justify-content: space-between;
}
.content-col-title .el-dropdown {
font-size: 0.875rem;
color: #333;
color: $--color-text-primary;
.nz-icon-arrow-down {
font-size: 0.75rem;
margin: 0 1.2rem 0 0.8rem;
@@ -143,7 +143,7 @@
opacity: 0;
width: 0.8rem;
.el-input__suffix i {
color: #606266;
color: $--color-text-regular;
}
.el-cascader__tags {
display: none;
@@ -159,7 +159,7 @@
.el-input__inner {
height: 100% !important;
line-height: 1.6rem;
background-color: #efefef;
background-color: $--background-color-1;
width: 6.688rem;
padding-left: 0.625rem;
padding-right: 0.8rem;
@@ -171,7 +171,7 @@
.diy-content {
height: 2rem;
pointer-event: none;
color: #333;
color: $--color-text-primary;
span, i {
line-height: 2rem;
}
@@ -296,7 +296,7 @@
}
.content-alert-num {
position: absolute;
color: #666;
color: $--color-text-regular;
font-size: 0.7rem;
font-style: italic;
right: 0;
@@ -305,11 +305,11 @@
}
.content-num-box .content-col-content-title {
font-size: 0.875rem;
color: #666;
color: $--color-text-regular;
}
.content-col-content-num {
font-weight: bold;
color: #333;
color: $--color-text-primary;
}
.overview-tooltip-box {
@@ -358,7 +358,7 @@
position: fixed;
transform: translate(-100%, -50%);
min-width: unset;
background-color: rgba(255, 255, 255, 0.8) !important;
background-color: $--background-color-empty !important;
}
.axis-tooltip::after {
content: '';
@@ -384,7 +384,7 @@
.overview-loading .el-loading-spinner{
transform: scale(0.5);
top: -5px;
left: 0px;
left: 0;
}
.tooltip{
@@ -410,7 +410,7 @@
}
}
.tooltip--title {
color: #333333;
color: $--color-text-primary;
font-size: 14px;
font-weight: 600;
padding-bottom: 10px;
@@ -427,7 +427,7 @@
height: calc(100% - 30px);
.legend-value {
font-size: 12px;
color: #333333;
color: $--color-text-primary;
position: absolute;
//left: 155px;
//top: 35px;
@@ -447,7 +447,7 @@
.tooltip-asset {
width: 260px;
height: 150px;
border: 1px solid $--primary-border-color;
border: 1px solid $--border-color-base;
border-radius: 2px;
.tooltip-asset--title {
@@ -455,10 +455,10 @@
height: 24px;
line-height: 24px;
font-size: 14px;
color: #333333;
color: $--color-text-primary;
display: flex;
justify-content: space-between;
border-bottom: 1px solid $--primary-border-color;
border-bottom: 1px solid $--border-color-base;
box-sizing: border-box;
}
@@ -470,7 +470,7 @@
display: flex;
height: 75px;
box-sizing: border-box;
border-bottom: 1px solid $--primary-border-color;
border-bottom: 1px solid $--border-color-base;
}
.tooltip-asset--row + .tooltip-asset--row {
@@ -486,8 +486,8 @@
padding-left: 10px;
line-height: 75px;
font-size: 14px;
border-right: 1px solid $--primary-border-color;
color: #333333;
border-right: 1px solid $--border-color-base;
color: $--color-text-primary;
box-sizing: border-box;
}
.tooltip-asset--ping{
@@ -502,7 +502,7 @@
.tooltip-asset--sub-row {
padding-left: 10px;
font-size: 13px;
color: #333333;
color: $--color-text-primary;
line-height: 25px;
display: flex;
@@ -524,15 +524,15 @@
}
.red-sign {
background-color: $danger-color;
background-color: $--color-danger;
}
.green-sign {
background-color: $success-color;
background-color: $--color-success;
}
.gray-sign {
background-color: $suspended-color;
background-color: $--color-suspended;
}
span {
position: absolute;
@@ -572,7 +572,7 @@
.row--label {
width: 36px;
border-radius: 4px 0 0 4px;
color: white;
color: $--background-color-empty;
text-align: center;
}
@@ -630,3 +630,68 @@
margin-left: -11px;
}
.leaflet-control-zoom{
border: 1px solid $--border-color-light !important;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77) !important;
.leaflet-control-zoom-out,.leaflet-control-zoom-in{
opacity: .7;
background: #FFF;
}
}
.leaflet-control-attribution{
background-color: unset !important;
color: rgba(178, 178, 178, 0.77);
}
.error-item{
color: #FADED7 ;
animation: error-animation 1s infinite ease-in-out;
animation-direction:normal;
}
.real-marker{
pointer-events: none;
}
.my-pane {
position: fixed;
width: 1px;
z-index: 99999;
height: 1px;
background-color: transparent;
}
.leaflet-bottom{
z-index: 409;
}
.el-carousel--horizontal{
height: 100%;
}
.el-carousel__container{
height: calc(100% - 36px);
}
.el-carousel__item .project-name {
font-size: 18px;
margin: 0;
position: absolute;
z-index: 1;
}
.maskLayer{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 10;
cursor: pointer;
}
.el-carousel__indicator--horizontal .el-carousel__button{
background-color: #C0C4CC;
opacity: .24;
height: 10px;
width: 10px;
border-radius: 50%;
}
.el-carousel__indicator--horizontal.is-active .el-carousel__button{
opacity: 1;
}

68
nezha-fronted/src/assets/css/components/page/dashboard/panel.scss Normal file
View File

@@ -0,0 +1,68 @@
.border-t-1-de{
border-top: 1px solid $--border-color-base;
}
.border-t-1-tr{
border-top: 1px solid transparent;
}
.panel {
height: 100%;
display: flex;
flex-direction:column;
}
.panel .el-table {
border-radius: 5px;
}
/* begin-chart list*/
.table-list {
margin-top: 0;
overflow-y: auto;
height: calc(100% - 50px);
flex: 1;
}
.box-content {
position: relative;
height: 100%;
}
.panel-select-header {
display: flex;
justify-content: space-evenly;
margin-bottom: 15px;
}
.panel-select-tail {
border-top: 1px solid $--border-color-base;
.panel-select-add {
line-height: 32px;
height: 32px;
display: inline-block;
cursor: pointer;
i {
color: $--color-primary;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
}
}
}
/* end-chart list*/
.panel-loading {
position: fixed;
left: 250px;
top: 59px;
height: 100%;
width: 100%;
background: center center no-repeat $--background-color-empty;
z-index: 10;
}
.show-panel-name{
display: inline-block;
padding: 0 7px;
font-weight: bold;
max-width: 310px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
vertical-align: bottom;
}

61
nezha-fronted/src/assets/css/components/page/monitor/project/project.scss Normal file
View File

@@ -0,0 +1,61 @@
.main-list--project {
.main-list{
height: 100%;
width: 100%;
display: flex;
background: $--background-color-base;
.projectList{
flex: 1;
margin-right: 10px;
}
.projectTopo{
flex: 1;
margin-right: 10px;
}
.hide{
display: none;
}
.ml10{
margin-left: 10px;
}
}
.main-container{
padding-right: 0 !important;
}
}
.project-calendar .el-input__inner {
height: 24px;
}
.change-time-height {
height: 23px;
}
.date-pick-group {
display: flex;
align-items: center;
justify-content: space-between;
}
.date-pick-group button:first-of-type {
margin-right: 4px;
}
.date-pick-group button:last-of-type {
margin-left: 4px;
}
.project-list{
.project-page{
margin: 0 0 0 20px;
border: 1px solid $--border-color-light;
border-top: none;
.pagination{
padding: 5px 0;
}
}
.pagination-bottom{
width: calc(100% - 30px);
bottom: 18px;
}
}

4
nezha-fronted/src/assets/css/element-var.scss
View File

@@ -1,4 +0,0 @@
/* 改变主题色变量 */
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

4
nezha-fronted/src/components/page/dashboard/metricPreview.scss → nezha-fronted/src/assets/css/font/metricPreview.scss
View File

@@ -43,10 +43,10 @@
padding-left:5px;
}
input, textarea {
background-color: $content-right-background-color;
background-color: $--content-right-background-color;
}
.el-input__inner, .el-textarea__inner, .el-input__count {
background-color: $content-right-background-color;
background-color: $--content-right-background-color;
}
.el-textarea {
margin-top: 4px;

43
nezha-fronted/src/assets/css/index.scss Normal file
View File

@@ -0,0 +1,43 @@
@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
font-family: 'element-icons';
src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), /* chrome, firefox */
url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-display: auto;
font-style: normal;
}
$--font-path: '~element-ui/lib/theme-chalk/fonts'; // 避免ele原字体加载语句出错
[v-cloak] {
display: none !important;
}
body {
height: 100%;
min-width: 1024px;
margin:0 !important;
padding: 0 !important;
cursor: default !important;
}
html {
height: 100%;
overflow: hidden;
}
/* 默认主题和暗色主题 */
.theme-light {
@import './themes/theme-light.scss'; // 加载主题变量
@import './themes/src/index.scss'; // 加载ele样式
@import './components/index'; // 加载nezha组件样式
@import './common/index.scss'; // 加载通用样式
@import './common.scss';
@import '../stylus/main.scss';
}
.theme-dark {
@import './themes/theme-dark.scss'; // 加载主题变量
@import './themes/src/index.scss'; // 加载ele样式
@import './components/index'; // 加载nezha组件样式
@import './common/index.scss'; // 加载通用样式
@import './common.scss';
@import '../stylus/main.scss';
}

10
nezha-fronted/src/assets/css/main.scss
View File

@@ -1,7 +1,3 @@
@import './nzIcon.css';
@import './font.scss';
@import './theme.scss';
@import './common.scss';
@import '../stylus/index.scss';
@import './common/tableCommon.scss';
@import './common/rightBoxCommon.scss';
@import './nzIcon.css'; // 自定义图标的字体
@import './font.scss'; // 字体
@import './index.scss'; // 主样式

64
nezha-fronted/src/assets/css/theme.scss
View File

@@ -1,64 +0,0 @@
:root {
--theme-color: #FA901C; // 默认主题色，下方深化、浅化的色值默认值是写死的；用户自定义修改主题色后，由js计算新值
--theme-color-dark-10: #E18219; // 默认主题色 深10%
--theme-color-light-10: #FA9B33; // 默认主题色 浅10%
--theme-color-light-20: #FBA649; // 默认主题色 浅20%
--theme-color-light-30: #FBB160; // 默认主题色 浅30%
--theme-color-light-40: #FBBC77; // 默认主题色 浅40%
--theme-color-light-50: #FCC88D; // 默认主题色 浅50%
--theme-color-light-60: #FCD4A4; // 默认主题色 浅60%
--theme-color-light-71: #FFDFBD; // 默认主题色 浅71%
--theme-color-light-80: #FFEAD2; // 默认主题色 浅80%
--theme-color-light-90: #FFF5E8; // 默认主题色 浅90%
--theme-color-light-96: #FFFBF6; // 默认主题色 浅90%
--theme-color-light-98: #FFFCF8; // 默认主题色 浅98%
}
$--theme-color: var(--theme-color); // 主题色
$--primary-border-color: #DEDEDE;
$--primary-border-radius: 2px;
$--right-box-border-color: #E7EAED;
/* 按钮 */
$--button-border-radius: $--primary-border-radius; // 按钮圆角
$--button-primary-color: #FFF; // 普通按钮字色
$--button-primary-background-color: var(--theme-color); // 普通按钮背景色
$--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
$--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
$--button-gray-color: #666; // 灰色按钮字色
$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
$--button-gray-active-color: var(--theme-color); // 灰色按钮focus字色
$--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
$--button-gray-border-color: $--primary-border-color; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度
$--danger-color: #DE5D3F; //全局警告色红色
$--success-color: #23BF9A; //全局正常色绿色
$--warning-color: var(--theme-color); //全局警告橙色
$--suspended-color: #9e9c98; //全局停用色灰色
$--monitor-color: #98AEC5; //全局停用色灰色
:export {
themeColor: $--theme-color;
dangerColor: $--danger-color;
successColor: $--success-color;
warningColor: var(--theme-color);
suspendedColor: $--suspended-color;
monitorColor: $--monitor-color;
primaryBorderColor: $--primary-border-color;
rightBoxBorderColor: $--right-box-border-color;
}
/* element-ui变量覆盖 */
/*$--color-primary: red; // 覆盖element-ui的主题色
$--box-shadow-base: none; // 取消box-shadow
$--box-shadow-dark: none;
$--box-shadow-light: 0 28px 32px 0 red;
$--input-focus-border: red;
@import "~element-ui/packages/theme-chalk/src/index";*/

Some files were not shown because too many files have changed in this diff Show More