gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改assetCilckSearch的样式

Browse Source
This commit is contained in:
zhangyu
2021-10-15 10:22:02 +08:00
parent bf38f47b16
commit ed24261c5e
5 changed files with 79 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
View File

@@ -54,8 +54,8 @@
<div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}" suffix-icon="el-icon-search"/></div> <div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}" suffix-icon="el-icon-search"/></div>
<el-checkbox-group v-model="selectValue[item.key]"> <el-checkbox-group v-model="selectValue[item.key]">
<el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" > <el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" >
<span :title="item3.name" class="children-title-name"> {{item3.name}}</span> <!-- <span :title="item3.name" class="children-title-name"> {{item3.name}}</span>-->
<el-checkbox :label="item3.id+'-'+item4.id" :key="index4" v-for="(item4,index4) in item3.children">{{item4.name}}</el-checkbox> <el-checkbox :label="item3.id+'-'+item4.id" :key="index4" v-for="(item4,index4) in item3.children" :title="item3.name+'/'+item4.name">{{item3.name+'/'+item4.name}}</el-checkbox>
</el-dropdown-item> </el-dropdown-item>
</el-checkbox-group> </el-checkbox-group>
</el-dropdown-menu> </el-dropdown-menu>
@@ -128,7 +128,7 @@ export default {
const arr = label.split('-') const arr = label.split('-')
const obj = oldChildren.find(item => item.id == arr[0]) const obj = oldChildren.find(item => item.id == arr[0])
const children = obj.children.find(item => item.id == arr[1]) const children = obj.children.find(item => item.id == arr[1])
return children.name return obj.name + '/' + children.name
}, },
showDropDown (val, key) { showDropDown (val, key) {
this.searchStr = this.detailSearchListCopy[key].searchStr this.searchStr = this.detailSearchListCopy[key].searchStr
@@ -166,24 +166,24 @@ export default {
border-radius: 2px; border-radius: 2px;
} }
.search-detail-box:hover{ .search-detail-box:hover{
background-color: rgba(9,30,66,.13); background: #F9F9F9;
} }
.search-detail-box.select-dropdown{ .search-detail-box.select-dropdown{
background-color: rgba(9,30,66,.13); background: #F9F9F9;
}
.search-detail-box.show-my-dropdpwn{
background-color: #344563;
color: #fff;
.search-detail-title{
color: #fff;
}
.detail-top-search{
color: #fff;
}
.search-value{
color: #fff;
}
} }
/*.search-detail-box.show-my-dropdpwn{*/
/* background-color: #344563;*/
/* color: #fff;*/
/* .search-detail-title{*/
/* color: #fff;*/
/* }*/
/* .detail-top-search{*/
/* color: #fff;*/
/* }*/
/* .search-value{*/
/* color: #fff;*/
/* }*/
/*}*/
.detail-dropdown{ .detail-dropdown{
padding: 0 10px; padding: 0 10px;
height: 30px; height: 30px;

80
nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
View File

@@ -11,10 +11,10 @@
{{item.label}} {{item.label}}
</el-option> </el-option>
</el-select> </el-select>
<el-button @click="orderTypeChange" size="small" style="height: 32px;padding: 0 5px 0 5px;margin-left: 10px" class="detail-button"> <button @click="orderTypeChange" size="small" class="detail-button top-tool-btn table-column-setting margin-l-10">
<i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" /> <i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" />
<i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" /> <i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" />
</el-button> </button>
</div> </div>
<ul class="detail-row-box" ref="dataTable"> <ul class="detail-row-box" ref="dataTable">
<li v-for="(item,index) in tableData" :key="index" class="detail-row" @click="detailViewRightShow(item)" :class="item.id === detailViewRightObj.id ? 'selected' : ''"> <li v-for="(item,index) in tableData" :key="index" class="detail-row" @click="detailViewRightShow(item)" :class="item.id === detailViewRightObj.id ? 'selected' : ''">
@@ -157,44 +157,44 @@ export default {
padding: 0 15px; padding: 0 15px;
line-height: 40px; line-height: 40px;
align-items: center; align-items: center;
.detail-select{ /*.detail-select{*/
height: 30px; /* height: 30px;*/
line-height: 30px; /* line-height: 30px;*/
flex: 1; /* flex: 1;*/
/deep/ .el-input--small{ /* /deep/ .el-input--small{*/
height: 30px; /* height: 30px;*/
line-height: 30px; /* line-height: 30px;*/
background-color: rgba(9,30,66,0.08); /* background-color: rgba(9,30,66,0.08);*/
border: none; /* border: none;*/
color: #344563; /* color: #344563;*/
input{ /* input{*/
height: 30px; /* height: 30px;*/
line-height: 30px; /* line-height: 30px;*/
background-color: rgba(9,30,66,0.08); /* background-color: rgba(9,30,66,0.08);*/
border: none; /* border: none;*/
color: #344563; /* color: #344563;*/
} /* }*/
} /* }*/
} /*}*/
.detail-select:hover{ /*.detail-select:hover{*/
/deep/ .el-input--small{ /* /deep/ .el-input--small{*/
input{ /* input{*/
background-color: rgba(9,30,66,0.13); /* background-color: rgba(9,30,66,0.13);*/
} /* }*/
} /* }*/
} /*}*/
.detail-button{ /*.detail-button{*/
height: 28px; /* height: 28px;*/
line-height: 28px; /* line-height: 28px;*/
background-color: rgba(9,30,66,0.08); /* background-color: rgba(9,30,66,0.08);*/
border: none; /* border: none;*/
.nz-icon{ /* .nz-icon{*/
color: #344563; /* color: #344563;*/
} /* }*/
} /*}*/
.detail-button:hover{ /*.detail-button:hover{*/
background-color: rgba(9,30,66,0.13); /* background-color: rgba(9,30,66,0.13);*/
} /*}*/
} }
.detail-row-box{ .detail-row-box{
height: calc(100% - 40px); height: calc(100% - 40px);

30
nezha-fronted/src/components/common/labelFilter/clickSearch.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div :style="{'height': height + 'px'}" class="search-box__container"> <div :style="{'height': height + 'px'}" class="search-box__container">
<div v-for="(data, type, index) in titleSearchListCopy" v-cloak :key="index" ref="searchContentBox" :class="{'search-content-box-height': data.length == 0}" class="search-content-box"> <div v-for="(data, type, index) in titleSearchListCopy" v-cloak :key="index" ref="searchContentBox" :class="{'search-content-box-height': data.length == 0}" class="search-content-box">
<label class="search-title">{{data.label}}:</label> <div class="search-title">{{data.label}}:</div>
<el-skeleton v-if="data.type === 'checkBox'" :class="skeletonClass(data)" :loading="!data.show" :rows="1" class="search-items"> <el-skeleton v-if="data.type === 'checkBox'" :class="skeletonClass(data)" :loading="!data.show" :rows="1" class="search-items">
<template> <template>
<el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValue[data.key]" @change="selectValue.change === 0 && selectValue.change++"> <el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValue[data.key]" @change="selectValue.change === 0 && selectValue.change++">
@@ -365,7 +365,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: 15px 0 15px 17px; /*padding: 15px 0 15px 17px;*/
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $--right-box-border-color; border: 1px solid $--right-box-border-color;
background-color: #FFFFFF; background-color: #FFFFFF;
@@ -373,16 +373,17 @@ export default {
overflow-y: auto; overflow-y: auto;
} }
.search-title { .search-title {
position: absolute;
width: 130px; width: 130px;
top: 7px;
left: 0;
line-height: 18px;
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
letter-spacing: 0; letter-spacing: 0;
font-weight: 500; font-weight: 600;
overflow: hidden; overflow: hidden;
height: 100%;
line-height: 40px;
padding-left: 20px;
box-sizing: border-box;
background: #F9F9F9;
} }
.search-content-box--copy { .search-content-box--copy {
position: fixed; position: fixed;
@@ -392,13 +393,16 @@ export default {
min-height: 31px; min-height: 31px;
} }
.search-content-box,.search-content-box-height { .search-content-box,.search-content-box-height {
border-bottom: 1px solid $--primary-border-color;
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
padding: 5px 80px 5px 130px; padding: 0px 80px 0px 0px;
width: calc(100vw - 333px);
box-sizing: border-box; box-sizing: border-box;
height: 100%;
/*line-height: 40px;*/
/deep/ .el-checkbox__label { /deep/ .el-checkbox__label {
max-width: 150px; max-width: 150px;
@@ -408,11 +412,15 @@ export default {
vertical-align: text-bottom; vertical-align: text-bottom;
} }
} }
.search-content-box:last-of-type{
border-bottom: none;
}
.search-items { .search-items {
display: flex; display: flex;
width: 100%; flex: 1;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box;
line-height: 40px;
&.search-items--checkbox .el-skeleton { &.search-items--checkbox .el-skeleton {
height: 21px; height: 21px;
} }

2
nezha-fronted/src/components/common/language/en.js
View File

@@ -719,7 +719,7 @@ const en = {
pingInfo: 'Ping', pingInfo: 'Ping',
detail: { detail: {
list: 'List', list: 'List',
detail: 'Detail', detail: 'View',
orderBy: 'OrderBy', orderBy: 'OrderBy',
orderByLabel: 'Order by {label}' orderByLabel: 'Order by {label}'
} }

2
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -78,7 +78,7 @@
</nz-data-list> </nz-data-list>
<nzDetailView <nzDetailView
v-loading="detailViewLoading || tools.loading" v-loading="detailViewLoading || tools.loading"
v-show="detailType !== 'list'" v-if="detailType !== 'list'"
:api="url" :api="url"
ref="dataList" ref="dataList"
:layout="dataListLayout" :layout="dataListLayout"