perf:左侧菜单背景色修改&project state列悬浮框样式调整
This commit is contained in:
@@ -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';
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;*/
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user