适配不同分辨率下的页面,分辨率较小时一行内容展示不下会分成两行甚至更多行来展示,CSS处理如下:
<div class="top" >
<el-col class="selectContent">
<label for="">名称</label>
<div class="selectPart">
<el-input v-model="harmfulForm.specitemName" placeholder="请输入" />
</div>
<label for="">优先级</label>
<div class="selectPart">
<el-select clearable v-model="harmfulForm.level" placeholder="请选择">
<el-option v-for="item in priorityList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<label for="">时间</label>
<div class="selectPart" style="width:auto">
<el-date-picker
v-model="harmfulForm.date"
type="datetimerange"
unlink-panels
:shortcuts="shortcuts"
:clearable="false"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="dateChange"
/>
</div>
</div>
<div>
<el-button v-btn type="primary" @click="onharmfulSubmit"><span class="btnIcon btnIcon-search2"></span><span class="buttonContent">查询</span></el-button>
<el-button v-btn type="primary" plain @click="harmfulreset" class="resetBtn" ><span class="btnIcon btnIcon-loop"></span></el-button>
</div>
</el-col>
</div>
<style lang="scss" scoped>
.top .selectContent {
display: flex;
text-align: right;
flex-wrap: wrap;
margin-bottom: -15px;
.selectPart {
display: inline-block;
width: 10%;
margin-right: 20px;
margin-bottom: 15px;
}
}
</style>