<!-- * @Author: zwq * @Date: 2023-08-21 14:26:23 * @LastEditors: zwq * @LastEditTime: 2023-08-31 14:36:15 * @Description: --> <template> <div class="app-container"> <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> <div class="mainbody"> <div v-for="a in 3" :key="a"> <el-row type="flex" justify="space-around"> <el-col :span="5" v-for="i in 4" :key="i"> <el-row type="flex" justify="space-between"> <el-col :span="12" v-for="j in 2" :key="j"> <div class="dashboard-layout-item" v-for="z in 2" :key="z" style="background: #ffd781; float: left"> <div class="dashboard-layout-item-cricle" style="background: #16dc09" /> {{ i + '+' + j + '+' + z }} </div> </el-col> </el-row> <el-row type="flex" justify="space-between"> <el-col :span="12" v-for="j in 2" :key="j"> <div class="dashboard-layout-item" v-for="z in 2" :key="z" style="background: #ffd781; float: left"> <div class="dashboard-layout-item-cricle" style="background: #16dc09" /> {{ i + '+' + j + '+' + z }} </div> </el-col> </el-row> </el-col> </el-row> <el-divider class="divider"></el-divider> <el-row type="flex" justify="space-around"> <el-col :span="5" v-for="i in 4" :key="i"> <el-row type="flex" justify="space-between"> <el-col :span="12" v-for="j in 2" :key="j"> <div class="dashboard-layout-item" v-for="z in 2" :key="z" style="background: #ffd781; float: left"> <div class="dashboard-layout-item-cricle" style="background: #16dc09" /> {{ i + '+' + j + '+' + z }} </div> </el-col> </el-row> <el-row type="flex" justify="space-between"> <el-col :span="12" v-for="j in 2" :key="j"> <div class="dashboard-layout-item" v-for="z in 2" :key="z" style="background: #ffd781; float: left"> <div class="dashboard-layout-item-cricle" style="background: #16dc09" /> {{ i + '+' + j + '+' + z }} </div> </el-col> </el-row> </el-col> </el-row> </div> </div> </div> </template> <script> import basicPage from '../mixins/basic-page'; import { getWarehouseStorehousePage } from '@/api/asrs/warehouseStorehouse'; export default { mixins: [basicPage], data() { return { urlOptions: { getDataListURL: getWarehouseStorehousePage, }, listQuery: { wareLayer: 1, }, formConfig: [ { type: 'select', label: '选择层', selectOptions: [ { id: 1, name: '1' }, { id: 2, name: '2' }, { id: 3, name: '3' }, { id: 4, name: '4' }, ], param: 'value', filterable: true, defaultSelect: 1, clearable: false, }, { type: 'button', btnName: '搜索', name: 'search', color: 'primary', }, ], }; }, components: {}, created() {}, methods: { buttonClick(val) { switch (val.btnName) { case 'search': this.listQuery.wareLayer = val.value; this.getDataList(); break; default: console.log(val); } }, }, }; </script> <style lang="scss" scoped> .mainbody{ display: flex; gap: 50px; flex-direction: column; } .dashboard-layout-item { width: 80px; text-align: center; height: 32px; box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8); border-radius: 2px 4px 4px 2px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; .dashboard-layout-item-cricle { display: inline-block; width: 12px; height: 12px; border-radius: 6px; margin-right: 6px; } } .el-divider--horizontal { margin: 10px 0; } .el-divider{ background-color: black; } </style>