flex响应式布局
HTML
<div class="flex_container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<!-- 添加空元素,防止最后一行元素拉伸 -->
<div class="empty_card"></div>
<div class="empty_card"></div>
<div class="empty_card"></div>
<div class="empty_card"></div>
<div class="empty_card"></div>
</div>
<div class="flex_container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<!-- 添加空元素,防止最后一行元素拉伸 -->
<div class="empty_card"></div>
<div class="empty_card"></div>
<div class="empty_card"></div>
<div class="empty_card"></div>
<div class="empty_card"></div>
</div>
css
.flex_container {
display: flex;
background-color: #f1f1f1;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.flex_container>div {
background-color: DodgerBlue;
color: white;
/* width: 200px; */ /* 不需要 */
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
cursor: pointer;
flex: 1;
min-width: 200px;
}
.empty_card {
height: 0;
margin-top: 0; /* 宽度和高度都设置为0,不占用空间 */
margin-right: 18px; /* 不可以忘记margin,否则有可能对不齐 */
}
.flex_container {
display: flex;
background-color: #f1f1f1;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.flex_container>div {
background-color: DodgerBlue;
color: white;
/* width: 200px; */ /* 不需要 */
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
cursor: pointer;
flex: 1;
min-width: 200px;
}
.empty_card {
height: 0;
margin-top: 0; /* 宽度和高度都设置为0,不占用空间 */
margin-right: 18px; /* 不可以忘记margin,否则有可能对不齐 */
}
HTML
<template>
<div>
<!-- 布局好的 -->
<div class="formDiv" style="margin-bottom: 0px;padding-bottom: 0px;">
<div style="margin-left: -25px;">
<el-form :model="ruleForm" ref="ruleForm" label-width="145px" class="demo-ruleForm">
<div class="form_div">
<div>
<el-form-item label="发票来源" prop="fply">
<el-select clearable v-model="ruleForm.fply" placeholder="请选择" style="width: 100%;">
<el-option label="全部" value="00"></el-option>
<el-option label="电子发票服务平台" value="01"></el-option>
<el-option label="增值税发票管理系统" value="02"></el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="发票状态" prop="fpzt">
<el-select multiple collapse-tags clearable v-model="ruleForm.fpzt" placeholder="请选择"
style="width: 100%;">
<button v-if="all2" type="text" class="Select-Button-1" @click="submit1('fpzt')">全选</button>
<button v-if="!all2" type="text" class="Select-Button-2" @click="submit2('qxfpzt')">全选</button>
<el-option label="正常" value="0"></el-option>
<el-option label="已作废" value="2"></el-option>
<el-option label="已冲红" value="3"></el-option>
<el-option label="已部分红冲" value="7"></el-option>
<el-option label="已全额红冲" value="8"></el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="发票风险等级" prop="fpfxdj">
<el-select clearable v-model="ruleForm.fpfxdj" placeholder="请选择" style="width: 100%;" multiple
collapse-tags>
<button v-if="all2" type="text" class="Select-Button-1" @click="submit1('fpfxdj')">全选</button>
<button v-if="!all2" type="text" class="Select-Button-2" @click="submit2('qxfpfxdj')">全选</button>
<el-option label="正常" value="01"></el-option>
<el-option label="异常凭证" value="02"></el-option>
<el-option label="疑点发票" value="03"></el-option>
</el-select>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="数电发票号码" prop="qdfphm">
<el-input placeholder="请输入内容" v-model="ruleForm.qdfphm" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="发票代码" prop="fpdm">
<el-input placeholder="请输入内容" v-model="ruleForm.fpdm" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="发票号码" prop="fphm">
<el-input placeholder="请输入内容" v-model="ruleForm.fphm" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="开票日期起" prop="kprqq">
<el-date-picker clearable v-model="ruleForm.kprqq" type="date" placeholder="请选择" style="width: 100%;"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="开票日期止" prop="kprqz">
<el-date-picker clearable v-model="ruleForm.kprqz" type="date" placeholder="请选择" style="width: 100%;"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</div>
<div v-show="!ShowFPform1" style="position: absolute;bottom: 0px;right: 10px;">
<el-form-item style="float: right;margin-right: 10px;">
<el-button style="background-color: #0052D9;color: white;" @click="onSubmit" icon="el-icon-search"
:loading="loading">查询</el-button>
<el-button @click="reset1" icon="el-icon-refresh-right">重置
</el-button>
<el-button type="text" @click="ShowFPform1 = true">展开 <i class="el-icon-arrow-down"></i>
</el-button>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="销方税号" prop="xfnsrsbh">
<el-input placeholder="请输入内容" v-model="ruleForm.xfnsrsbh" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="销方名称" prop="xfnsrmc">
<el-input placeholder="请输入内容" v-model="ruleForm.xfnsrmc" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="票种" prop="pz">
<el-select @change="selectChangeAll2" multiple collapse-tags clearable v-model="ruleForm.pz"
placeholder="请选择" style="width: 100%;">
<button v-if="all2" type="text" class="Select-Button-1" @click="submit1('szqx')">全选</button>
<button v-if="!all2" type="text" class="Select-Button-2" @click="submit2('szqxqx')">全选</button>
<el-option v-for="(item, index) in valueBoxDict" :key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div style="height: 51px;">
</div>
<div></div>
<div v-show="ShowFPform1" style="position: absolute;bottom: 0px;right: 10px;">
<el-form-item style="float: right;margin-right: 10px;">
<el-button style="background-color: #0052D9;color: white;" @click="onSubmit" icon="el-icon-search"
:loading="loading">查询</el-button>
<el-button @click="reset1" icon="el-icon-refresh-right">重置
</el-button>
<el-button type="text" @click="ShowFPform1 = false">收起 <i class="el-icon-arrow-up"></i>
</el-button>
</el-form-item>
</div>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ShowFPform1: false,
ruleForm: {}
}
}
}
</script>
<style scoped>
.flex_container {
display: flex;
background-color: #f1f1f1;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.flex_container>div {
background-color: DodgerBlue;
color: white;
/* width: 200px; */
/* 不需要 */
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
cursor: pointer;
flex: 1;
min-width: 200px;
}
.empty_card {
height: 0;
margin-top: 0;
/* 宽度和高度都设置为0,不占用空间 */
margin-right: 18px;
/* 不可以忘记margin,否则有可能对不齐 */
}
/* 布局好的 */
.form_div {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding-right: 20px;
padding-left: 20px;
position: relative;
}
.form_div>div {
flex: 1;
min-width: 380px;
}
.Select-Button-1 {
cursor: pointer;
width: 100%;
text-align: left;
height: 34px;
box-sizing: border-box;
padding-left: 20px;
padding-top: 5px;
border-style: none;
background-color: white;
font-size: 14px;
color: #606266;
}
.Select-Button-1:hover {
background-color: #F5F7FA;
}
.Select-Button-2:hover {
background-color: #F5F7FA;
}
.Select-Button-2 {
cursor: pointer;
width: 100%;
text-align: left;
height: 34px;
box-sizing: border-box;
padding-left: 20px;
padding-top: 5px;
border-style: none;
background-color: white;
font-size: 14px;
color: #0052d9;
font-weight: 700;
}
.empty_card {
height: 0;
margin-top: 0;
/* 宽度和高度都设置为0,不占用空间 */
margin-right: 18px;
/* 不可以忘记margin,否则有可能对不齐 */
}
</style>
<template>
<div>
<!-- 布局好的 -->
<div class="formDiv" style="margin-bottom: 0px;padding-bottom: 0px;">
<div style="margin-left: -25px;">
<el-form :model="ruleForm" ref="ruleForm" label-width="145px" class="demo-ruleForm">
<div class="form_div">
<div>
<el-form-item label="发票来源" prop="fply">
<el-select clearable v-model="ruleForm.fply" placeholder="请选择" style="width: 100%;">
<el-option label="全部" value="00"></el-option>
<el-option label="电子发票服务平台" value="01"></el-option>
<el-option label="增值税发票管理系统" value="02"></el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="发票状态" prop="fpzt">
<el-select multiple collapse-tags clearable v-model="ruleForm.fpzt" placeholder="请选择"
style="width: 100%;">
<button v-if="all2" type="text" class="Select-Button-1" @click="submit1('fpzt')">全选</button>
<button v-if="!all2" type="text" class="Select-Button-2" @click="submit2('qxfpzt')">全选</button>
<el-option label="正常" value="0"></el-option>
<el-option label="已作废" value="2"></el-option>
<el-option label="已冲红" value="3"></el-option>
<el-option label="已部分红冲" value="7"></el-option>
<el-option label="已全额红冲" value="8"></el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="发票风险等级" prop="fpfxdj">
<el-select clearable v-model="ruleForm.fpfxdj" placeholder="请选择" style="width: 100%;" multiple
collapse-tags>
<button v-if="all2" type="text" class="Select-Button-1" @click="submit1('fpfxdj')">全选</button>
<button v-if="!all2" type="text" class="Select-Button-2" @click="submit2('qxfpfxdj')">全选</button>
<el-option label="正常" value="01"></el-option>
<el-option label="异常凭证" value="02"></el-option>
<el-option label="疑点发票" value="03"></el-option>
</el-select>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="数电发票号码" prop="qdfphm">
<el-input placeholder="请输入内容" v-model="ruleForm.qdfphm" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="发票代码" prop="fpdm">
<el-input placeholder="请输入内容" v-model="ruleForm.fpdm" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="发票号码" prop="fphm">
<el-input placeholder="请输入内容" v-model="ruleForm.fphm" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="开票日期起" prop="kprqq">
<el-date-picker clearable v-model="ruleForm.kprqq" type="date" placeholder="请选择" style="width: 100%;"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="开票日期止" prop="kprqz">
<el-date-picker clearable v-model="ruleForm.kprqz" type="date" placeholder="请选择" style="width: 100%;"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</div>
<div v-show="!ShowFPform1" style="position: absolute;bottom: 0px;right: 10px;">
<el-form-item style="float: right;margin-right: 10px;">
<el-button style="background-color: #0052D9;color: white;" @click="onSubmit" icon="el-icon-search"
:loading="loading">查询</el-button>
<el-button @click="reset1" icon="el-icon-refresh-right">重置
</el-button>
<el-button type="text" @click="ShowFPform1 = true">展开 <i class="el-icon-arrow-down"></i>
</el-button>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="销方税号" prop="xfnsrsbh">
<el-input placeholder="请输入内容" v-model="ruleForm.xfnsrsbh" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="销方名称" prop="xfnsrmc">
<el-input placeholder="请输入内容" v-model="ruleForm.xfnsrmc" clearable> </el-input>
</el-form-item>
</div>
<div v-show="ShowFPform1">
<el-form-item label="票种" prop="pz">
<el-select @change="selectChangeAll2" multiple collapse-tags clearable v-model="ruleForm.pz"
placeholder="请选择" style="width: 100%;">
<button v-if="all2" type="text" class="Select-Button-1" @click="submit1('szqx')">全选</button>
<button v-if="!all2" type="text" class="Select-Button-2" @click="submit2('szqxqx')">全选</button>
<el-option v-for="(item, index) in valueBoxDict" :key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div style="height: 51px;">
</div>
<div></div>
<div v-show="ShowFPform1" style="position: absolute;bottom: 0px;right: 10px;">
<el-form-item style="float: right;margin-right: 10px;">
<el-button style="background-color: #0052D9;color: white;" @click="onSubmit" icon="el-icon-search"
:loading="loading">查询</el-button>
<el-button @click="reset1" icon="el-icon-refresh-right">重置
</el-button>
<el-button type="text" @click="ShowFPform1 = false">收起 <i class="el-icon-arrow-up"></i>
</el-button>
</el-form-item>
</div>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ShowFPform1: false,
ruleForm: {}
}
}
}
</script>
<style scoped>
.flex_container {
display: flex;
background-color: #f1f1f1;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.flex_container>div {
background-color: DodgerBlue;
color: white;
/* width: 200px; */
/* 不需要 */
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
cursor: pointer;
flex: 1;
min-width: 200px;
}
.empty_card {
height: 0;
margin-top: 0;
/* 宽度和高度都设置为0,不占用空间 */
margin-right: 18px;
/* 不可以忘记margin,否则有可能对不齐 */
}
/* 布局好的 */
.form_div {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding-right: 20px;
padding-left: 20px;
position: relative;
}
.form_div>div {
flex: 1;
min-width: 380px;
}
.Select-Button-1 {
cursor: pointer;
width: 100%;
text-align: left;
height: 34px;
box-sizing: border-box;
padding-left: 20px;
padding-top: 5px;
border-style: none;
background-color: white;
font-size: 14px;
color: #606266;
}
.Select-Button-1:hover {
background-color: #F5F7FA;
}
.Select-Button-2:hover {
background-color: #F5F7FA;
}
.Select-Button-2 {
cursor: pointer;
width: 100%;
text-align: left;
height: 34px;
box-sizing: border-box;
padding-left: 20px;
padding-top: 5px;
border-style: none;
background-color: white;
font-size: 14px;
color: #0052d9;
font-weight: 700;
}
.empty_card {
height: 0;
margin-top: 0;
/* 宽度和高度都设置为0,不占用空间 */
margin-right: 18px;
/* 不可以忘记margin,否则有可能对不齐 */
}
</style>