不同分辨率自适应布局。vue 搜索栏，操作按钮自适应布局

标签

<div class="toolbar">
    <div>
        <el-button type="primary" :icon="Plus" size="default" @click="openAddCertificateUser">添加 </el-button>
        <el-button type="success" :icon="Plus" size="default" @click="openChoiseFile">导入 </el-button>
        <el-button type="success" :icon="Plus" size="default" >模板下载 </el-button>
        <input type="file" ref="fileInut" style="display: none;" @change="handleFileUpload" />
    </div>
    <div class="search">
        <el-select
            @change="changeCertificateType"
            v-model="pageParam.certificateType"
            placeholder="请选择证书类型"
            class="select-level searchinput"
            size="default"
            clearable
        >
            <el-option :key="1" label="模块证书" :value="1" />
            <el-option :key="2" label="课程证书" :value="2" />
            <el-option :key="3" label="培训证书" :value="3" />
            <el-option :key="4" label="生成证书" :value="4" />
        </el-select>
        <el-select
            @change="getCertificateUserList"
            v-model="pageParam.moduleId"
            :filterable="true"
            size="default"
            class="searchinput"
            placeholder="请选择模块"
            clearable
        >
            <el-option v-for="op in state.moduleList" :key="op.id" :label="op.moduleName" :value="op.id" />
        </el-select>
        <el-select
            clearable
            class="searchinput select-level"
            @change="getCertificateUserList"
            v-model="pageParam.lessionId"
            filterable
            placeholder="选择课程"
            size="default"
        >
            <el-option-group v-for="group in state.lessonList" :key="group.versionID" :label="group.versionName">
                <el-option v-for="item in group.lessonList" :key="item.id" :label="item.lessonName" :value="item.id" />
            </el-option-group>
        </el-select>
        <el-input v-model="pageParam.key" class="searchinput" placeholder="姓名、编号、名称" size="default" clearable />
        <el-button type="primary" :icon="Search" size="default" @click="getCertificateUserList">搜索</el-button>
    </div>
</div>

样式:

<style scoped="scoped" lang="scss">
.certificate-user-container {
    padding: 15px;
    .toolbar {
        display: flex;
        justify-content: space-between;
        .search {
            display: flex;
            .searchinput {
                width: 129px;
            }
        }
        .search > * {
            margin-left: 5px;
        }
        @media (min-width: 924px) {
            .search {
                display: flex;
                .searchinput {
                    width: 109px;
                }
            }
        }
        @media (min-width: 1024px) {
            .search {
                display: flex;
                .searchinput {
                    width: 141px;
                }
            }
        }
        // @media (min-width: 1024px) {
        //     .search {
        //         display: flex;
        //         .searchinput {
        //             width: 169px;
        //         }
        //     }
        // }
        @media (min-width: 1399px) {
            .search {
                display: flex;
                .searchinput {
                    width: 199px;
                }
            }
            .search > * {
                margin-left: 9px;
            }
        }
        @media (min-width: 1524px) {
            .search {
                display: flex;
                .searchinput {
                    width: 219px;
                }
            }
            .search > * {
                margin-left: 9px;
            }
        }
    }
}
</style>