perf: 优化endpoint侧滑内asset列表、asset选择弹框样式
1.asset搜索框样式优化 2.asset列表内asset不可选状态的样式优化
This commit is contained in:
@@ -161,8 +161,8 @@ li{
|
|||||||
}
|
}
|
||||||
.nz-btn.nz-btn-size-normal:not(.nz-btn-size-alien) {
|
.nz-btn.nz-btn-size-normal:not(.nz-btn-size-alien) {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 4px 8px;
|
height: 24px;
|
||||||
max-height: 24px;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
.nz-btn.nz-btn-size-small {
|
.nz-btn.nz-btn-size-small {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@@ -172,7 +172,8 @@ li{
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.nz-btn-size-large {
|
.nz-btn-size-large {
|
||||||
padding: 6px 15px;
|
padding: 0 15px;
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
.nz-btn.nz-btn-size-normal.nz-btn-size-alien { //弹框顶部异形按钮
|
.nz-btn.nz-btn-size-normal.nz-btn-size-alien { //弹框顶部异形按钮
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|||||||
@@ -116,6 +116,8 @@
|
|||||||
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
|
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
|
||||||
<!--<asset-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
|
<!--<asset-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
|
||||||
ref="addEndpointBox"></asset-box>-->
|
ref="addEndpointBox"></asset-box>-->
|
||||||
|
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
|
||||||
|
ref="addEndpointBox"></add-endpoint-box>
|
||||||
<asset-add-unit :add-unit-show='addUnitShow' @refreshData="refreshAsset" ref="assetAddUnit"
|
<asset-add-unit :add-unit-show='addUnitShow' @refreshData="refreshAsset" ref="assetAddUnit"
|
||||||
@sendStateData="closeAsset"></asset-add-unit>
|
@sendStateData="closeAsset"></asset-add-unit>
|
||||||
<alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
|
<alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@
|
|||||||
<div class="right-child-box-title">{{$t('asset.asset')}}</div>
|
<div class="right-child-box-title">{{$t('asset.asset')}}</div>
|
||||||
<!--end--标题-->
|
<!--end--标题-->
|
||||||
<!--begin--搜索框-->
|
<!--begin--搜索框-->
|
||||||
<div class="endpoint-asset-search">
|
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light endpoint-asset-search">
|
||||||
<button id="search-asset-drop" type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
|
<button id="search-asset-drop" type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
|
||||||
<span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
|
<span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
|
||||||
<span>
|
<span>
|
||||||
@@ -60,8 +60,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="line-100"></div>
|
<div class="line-100"></div>
|
||||||
<div class="endpoint-sub-table-body">
|
<div class="endpoint-sub-table-body">
|
||||||
<div v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
|
|
||||||
<div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
|
<div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
|
||||||
|
<div :id="index" @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
|
||||||
<div class="endpoint-sub-table-col">{{item.host}}</div>
|
<div class="endpoint-sub-table-col">{{item.host}}</div>
|
||||||
<el-popover trigger="hover" placement="right-start" :content="item.sn" >
|
<el-popover trigger="hover" placement="right-start" :content="item.sn" >
|
||||||
<div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
|
<div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
|
||||||
@@ -783,9 +783,11 @@
|
|||||||
/* begin--搜索框*/
|
/* begin--搜索框*/
|
||||||
.endpoint-asset-search {
|
.endpoint-asset-search {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: right;
|
|
||||||
padding: 7px 8px 0 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
.endpoint-asset-search button {
|
||||||
|
height: 22px !important;
|
||||||
}
|
}
|
||||||
.endpoint-asset-search-dropdown {
|
.endpoint-asset-search-dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -822,6 +824,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
border-right: 1px solid rgba(162,162,162,0.5);
|
||||||
}
|
}
|
||||||
/* end--搜索框*/
|
/* end--搜索框*/
|
||||||
|
|
||||||
@@ -841,6 +844,7 @@
|
|||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
color: #656565;
|
color: #656565;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.endpoint-sub-table-row:hover {
|
.endpoint-sub-table-row:hover {
|
||||||
background-color: #dadada;
|
background-color: #dadada;
|
||||||
@@ -876,9 +880,8 @@
|
|||||||
.endpoint-sub-table-body-dialog {
|
.endpoint-sub-table-body-dialog {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #e9ebec;
|
background-color: rgba(255, 255, 255, 0.7);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0.2;
|
|
||||||
}
|
}
|
||||||
.endpoints-clear-btn {
|
.endpoints-clear-btn {
|
||||||
margin: 6px 0 0 7px;
|
margin: 6px 0 0 7px;
|
||||||
@@ -920,4 +923,8 @@
|
|||||||
.endpoints-box-endpoints .el-form-item.is-error {
|
.endpoints-box-endpoints .el-form-item.is-error {
|
||||||
margin-bottom: 22px;
|
margin-bottom: 22px;
|
||||||
}
|
}
|
||||||
|
.endpoint-asset-search input {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -56,7 +56,7 @@
|
|||||||
<!---->
|
<!---->
|
||||||
<div class="pop-item-wider " >
|
<div class="pop-item-wider " >
|
||||||
<!-- begin--搜索框-->
|
<!-- begin--搜索框-->
|
||||||
<div class="endpoint-asset-search">
|
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light endpoint-asset-search">
|
||||||
<button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
|
<button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
|
||||||
<span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
|
<span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
|
||||||
<span>
|
<span>
|
||||||
@@ -443,11 +443,12 @@
|
|||||||
/* begin--搜索框*/
|
/* begin--搜索框*/
|
||||||
.endpoint-asset-search {
|
.endpoint-asset-search {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: right;
|
|
||||||
padding: 7px 8px 0 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: -16px;
|
margin-top: -16px;
|
||||||
}
|
}
|
||||||
|
.endpoint-asset-search button {
|
||||||
|
height: 22px !important;
|
||||||
|
}
|
||||||
.endpoint-asset-search-dropdown {
|
.endpoint-asset-search-dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 34px;
|
top: 34px;
|
||||||
|
|||||||
Reference in New Issue
Block a user