perf:左侧菜单背景色修改&project state列悬浮框样式调整

This commit is contained in:
wangwenrui
2020-04-17 15:21:39 +08:00
parent 134cc24ce4
commit 5a0f8b09ab
4 changed files with 16 additions and 6 deletions

View File

@@ -25,4 +25,6 @@ $content-left-text-color: #666; //左侧菜单默认字色
$dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色 $dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
$left-menu-bgcolor:#FFF;
@import './main.scss'; @import './main.scss';

View File

@@ -1685,7 +1685,7 @@ li{
width: 90px; width: 90px;
} }
.left-menu-bg .el-collapse-item__header,.left-menu-bg .el-collapse-item__content{ //当左侧菜单含有el-collapse组件时使用 .left-menu-bg .el-collapse-item__header,.left-menu-bg .el-collapse-item__content{ //当左侧菜单含有el-collapse组件时使用
background-color: #e2e2e2; background-color: $left-menu-bgcolor;
} }
.transparent-pop{ //防止popover的提示框挡住页面元素无法操作 .transparent-pop{ //防止popover的提示框挡住页面元素无法操作
pointer-events: none; pointer-events: none;

View File

@@ -4,7 +4,7 @@
<slot name="content-left"></slot> <slot name="content-left"></slot>
<div @click="toggleStat" class="bottom-icon"> <div @click="toggleStat" class="bottom-icon">
<div class="bottom-divider"></div> <div class="bottom-divider"></div>
<div style="display: inline-block;float: right"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line':isShrink,'nz-icon nz-icon-push-pin-fill':!isShrink}" :style="{color:!isShrink?'#EE9D3F':''}"></i></div> <div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line':isShrink,'nz-icon nz-icon-push-pin-fill':!isShrink}" :style="{color:!isShrink?'#EE9D3F':''}"></i></div>
</div> </div>
</div> </div>
<div class="content-right right-slot" :class="{'right-slot-open':isShrink}"> <div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
@@ -49,7 +49,7 @@
} }
.content .left-slot{ .content .left-slot{
position: relative; position: relative;
background-color: #e2e2e2; background-color: $left-menu-bgcolor;
/*border-bottom: 1px solid #eeeeee;*/ /*border-bottom: 1px solid #eeeeee;*/
/*transition: all 100ms;*/ /*transition: all 100ms;*/
} }

View File

@@ -134,10 +134,14 @@
</div> </div>
<!-- <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>--> <!-- <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>-->
<span v-else-if="item.prop == 'state'" > <span v-else-if="item.prop == 'state'" >
<el-popover placement="right" width="50" trigger="hover" :content="getStateContent(scope.row)"> <el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
<div slot="reference" style="width: 20px"> <div slot="reference" style="width: 20px">
<div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div> <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
</div> </div>
<div >
<div v-if="scope.row.state == '1'">up</div>
<div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
</div>
</el-popover> </el-popover>
</span> </span>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -622,10 +626,10 @@
getStateContent:function(row){ getStateContent:function(row){
if(row){ if(row){
if(row.state == 1){ if(row.state == 1){
return 'up'; return 'up';
}else{ }else{
return 'down'; // return 'down'+'['+this.getStateErrorMsg(row)+']';
return `down:${this.getStateErrorMsg(row)}`
} }
} }
}, },
@@ -1120,4 +1124,8 @@
.project .sidebar-info-item{ .project .sidebar-info-item{
margin:0px !important; margin:0px !important;
} }
.small-pop{
width: 25px !important;
min-width: unset !important;
}
</style> </style>