perf: 修复有些按钮组有空白间隙的问题

This commit is contained in:
陈劲松
2020-04-20 17:21:52 +08:00
parent 1c69f9ef01
commit 6daada6373
3 changed files with 29 additions and 22 deletions

View File

@@ -258,7 +258,7 @@ li{
} }
.nz-btn-group { .nz-btn-group {
border-radius: 4px; border-radius: 4px;
display: inline-block; display: flex;
} }
.nz-btn-group-size-small { .nz-btn-group-size-small {
max-height: 24px; max-height: 24px;
@@ -314,11 +314,14 @@ li{
padding: 0 5px; padding: 0 5px;
font-size: 12px; font-size: 12px;
} }
.input-x-mini-22 .el-input__icon {
line-height: 22px;
}
.input-x-mini-24 .el-input__inner { .input-x-mini-24 .el-input__inner {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
padding: 0 10px; padding: 0 10px;
font-size: 13px; font-size: 12px;
} }
.input-x-mini-24 .el-input__icon { .input-x-mini-24 .el-input__icon {
line-height: 24px; line-height: 24px;
@@ -1642,7 +1645,13 @@ li{
.el-table__fixed-body-wrapper { .el-table__fixed-body-wrapper {
height: calc(100% - 42px) !important; height: calc(100% - 42px) !important;
} }
.ant-table-scroll {
max-height: unset !important;
height: 100%;
}
.ant-table-scroll .el-table {
height: 100% !important;
}
/*model侧滑中下拉框*/ /*model侧滑中下拉框*/
.autocomplete-dropdown { .autocomplete-dropdown {
display: flex; display: flex;

View File

@@ -49,7 +49,7 @@
</div> </div>
</div> </div>
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div> <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
<pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :height="$tableHeight.noPagination" <pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
class="nz-table endpoint-query-table" style="width: 100%;" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false" ref="endpointQueryTable" class="nz-table endpoint-query-table" style="width: 100%;" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false" ref="endpointQueryTable"
@selection-change="selectChange"> @selection-change="selectChange">
<pl-table-column <pl-table-column
@@ -75,7 +75,7 @@
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span> <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
</el-popover> </el-popover>
<span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span> <span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
&lt;!&ndash; <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>&ndash;&gt; <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>
</template> </template>
</pl-table-column> </pl-table-column>
<pl-table-column <pl-table-column

View File

@@ -32,6 +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 style="display: inline-block">
<div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search"> <div class="nz-btn-group nz-btn-group-size-small 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>
@@ -39,10 +40,7 @@
<i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i> <i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i>
<i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i> <i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i>
</span> </span>
</button><div </button><el-input style="width: 100px;" class="input-x-mini-24 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input><button
class="endpoint-asset-search-input">
<el-input class="input-x-mini-22 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input>
</div><button
type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" id="search-asset"><i @click="searchAsset" class="el-icon-search"></i></button> type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" id="search-asset"><i @click="searchAsset" class="el-icon-search"></i></button>
<div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow"> <div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
@@ -50,6 +48,7 @@
<div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="search-asset-sn">SN</div> <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="search-asset-sn">SN</div>
</div> </div>
</div> </div>
</div>
<!--end--搜索框--> <!--end--搜索框-->
<!-- begin--table--> <!-- begin--table-->
@@ -824,12 +823,11 @@
} }
/* begin--搜索框*/ /* begin--搜索框*/
.endpoint-asset-search { .endpoint-asset-search {
display: inline-block;
position: relative; position: relative;
margin-left: 44px; margin-left: 44px;
} }
.endpoint-asset-search button { .endpoint-asset-search button {
height: 22px !important; height: 24px !important;
} }
.endpoint-asset-search-dropdown { .endpoint-asset-search-dropdown {
position: absolute; position: absolute;