1aa98fba by zhaoqian

自然幢表单样式提交

1 parent 2291a680
......@@ -58,11 +58,6 @@ const constantRoutes = [
code: 'zrz',
component: () => import('@/views/zrz/index'),
},
{
path: '/zrz1',
code: 'zrz1',
component: () => import('@/views/zrz/index1'),
}
]
}
]
......
......@@ -8,24 +8,11 @@
width: 100%;
}
.el-row{
border-top: 1px solid grey;
border-left: 1px solid grey;
border-right: 1px solid grey;
display: flex;
flex-wrap: wrap
}
.el-form-item{
font-weight: bold;
font-size: xx-large
}
.el-col{
border-right: 1px solid grey;
height: 45px;
}
td{
bgcolor:#F1F4FC;
width:8.33%
......
<template>
<div class="zrz content-form">
<el-form ref="form" :model="form" label-width="160px">
<table border="1" width="100%" cellspacing="1" cellpadding="2">
<table border="1" width="80%" cellspacing="1" cellpadding="2">
<tbody>
<tr>
<td colspan="1"></td>
......
<template>
<div class="zrz content-form">
     
<el-form ref="form" :model="form" label-width="160px">
       
<el-row>
<el-col :span="12">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
         
<el-col :span="12">
<el-form-item label="自然幢号">
<el-input v-model="form.name" style="width: 200px"></el-input>
<el-button @click.prevent="" type="primary" style="width:90px;margin-left:10px">生成</el-button>
</el-form-item> 
</el-col>
</el-row>
       
<el-row>
         
<el-col :span="12">
<el-form-item label="项目名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
         
<el-col :span="12">
 
<el-form-item label="不动产单元号">
<el-input v-model="form.name" style="width: 200px"></el-input>
<el-button @click.prevent="" type="primary" style="width:90px;margin-left:10px">生成</el-button>
</el-form-item>
         
</el-col>
       
</el-row>
       
<el-row>
         
<el-col :span="12">
<el-form-item label="建筑物名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
         
<el-col :span="12">
<el-form-item label="建筑物基本用途">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
       
<el-row>
         
<el-col :span="12">
<el-form-item label="房屋性质">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
         
<el-col :span="12">
<el-form-item label="竣工日期">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
       
<el-row>
         
<el-col :span="12">
<el-form-item label="建筑物高度(m)">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
         
<el-col :span="12">
<el-form-item label="总套数">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
       
<el-row>
         
<el-col :span="12">
<el-form-item label="幢用地面积(㎡)">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
         
<el-col :span="12">
<el-form-item label="幢占用地面积(㎡)">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
       
<el-row>
         
<el-col :span="12">
<el-form-item label="预测建筑面积(㎡)">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
         
<el-col :span="12">
<el-form-item label="实测建筑面积(㎡)">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
       
<el-row>
         
<el-col :span="12">
<el-form-item label="地下层数">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
         
<el-col :span="12">
<el-form-item label="地上层数">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
       
<el-row>
         
<el-col :span="12">
<el-form-item label="总层数">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
         
<el-col :span="12">
<el-form-item label="地下深度(m)">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
       
<el-row>
         
<el-col :span="12">
<el-form-item label="产别">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
         
<el-col :span="12">
<el-form-item label="产权来源">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
<el-row>
<el-col>
<el-form-item>
<label slot="label">
<el-button type="primary" size="mini" style="margin-right: 10px">添加</el-button>
<span>用途</span>
</label>
<el-row style="padding-top: 0px;border: 0">
<el-col :span="12">
<el-form-item label="规划用途">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用途">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
         
</el-col>
       
</el-row>
<el-row>
<el-col>
<el-form-item>
<label slot="label">
<el-button type="primary" size="mini" style="margin-right: 10px">添加</el-button>
<span>房屋用途</span>
</label>
<el-select v-model="value" placeholder="请选择" style="display:block;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
         
<el-col :span="24">
<el-form-item label="坐落">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
<el-row>
         
<el-col :span="24" style="height: 55px">
<el-form-item label="附加说明">
<el-input v-model="form.name" type="textarea" :rows="2"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
<el-row>
         
<el-col :span="24">
<el-form-item label="调查意见">
<el-input v-model="form.name"></el-input>
</el-form-item>
         
</el-col>
       
</el-row>
<el-row style="border-top: 1px solid grey;
border-left: 0;
border-right: 0;
border-right: 0;">
</el-row>
</el-form>
<div style="min-height: 120px"></div>
</div>
</template>
<script>
export default {
name: "index1",
data() {
return {
form: {
name: '',
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
<style rel="stylesheet/less" lang="less">
@import './index.less';
</style>
\ No newline at end of file