perf: 优化endpoint侧滑内asset列表、asset选择弹框样式

1.asset搜索框样式优化
2.asset列表内asset不可选状态的样式优化
This commit is contained in:
陈劲松
2020-02-20 11:38:23 +08:00
parent 55d2a38283
commit 9574f189a3
4 changed files with 23 additions and 12 deletions

View File

@@ -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;

View File

@@ -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>

View File

@@ -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>

View File

@@ -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;