优化页面-手机端响应式

This commit is contained in:
zhanglipeng
2020-11-19 10:25:11 +08:00
parent 9221a1a547
commit 10c309fcd2
17 changed files with 1637 additions and 1176 deletions

View File

@ -1,64 +1,67 @@
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
label-width="68px"
>
<el-form-item label="幼儿姓名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入幼儿姓名"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="幼儿性别" prop="xb">
<el-select
v-model="queryParams.xb"
placeholder="请选择幼儿性别"
clearable
size="small"
style="width: 240px"
>
<el-option
v-for="dict in sexOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="当前状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择当前状态"
clearable
size="small"
style="width: 240px"
>
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
<el-form :model="queryParams" ref="queryForm" label-width="70px">
<el-row :gutter="10">
<el-col :xs="24" :ms="12" :md="5">
<el-form-item label="幼儿姓名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入幼儿姓名"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :ms="12" :md="5">
<el-form-item label="幼儿性别" prop="xb">
<el-select
v-model="queryParams.xb"
placeholder="请选择幼儿性别"
clearable
size="small"
>
<el-option
v-for="dict in sexOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :ms="12" :md="5">
<el-form-item label="当前状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择当前状态"
clearable
size="small"
>
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :ms="12" :md="4">
<el-form-item class="no-margin">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="mb8 btn-list">
@ -1118,7 +1121,7 @@ export default {
submitForm_tb: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
console.log(this.ids + "---" + this.form.classid);
// console.log(this.ids + "---" + this.form.classid);
updateChild_tb(this.form, this.ids).then((response) => {
if (response.code === 200) {
this.msgSuccess("调班成功");
@ -1232,3 +1235,20 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.el-select {
width: 100%;
}
.my-date-picker {
width: 100%;
}
.edit-btns {
.el-button {
display: block;
margin: 0 auto;
}
}
.no-margin ::v-deep.el-form-item__content {
margin: 0 !important;
}
</style>