zhaoyang/sunProduct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
04eb40d0e40794287b6b7da1f4cb62174656d68d
sunProduct/src/views/system/house/HouseDetails.vue

250 lines
7.3 KiB
Vue
Raw Blame History

<template>
<div class="AddBuildingBox">
<PageHeader title="房屋信息"></PageHeader>
<div class="AddBuildingBody">
<div class="title">
<span>基本信息</span>
<el-button type="primary" text>编辑</el-button>
</div>
<div class="addBuildingFormBody">
<div class="descriptionsbox">
<div class="label">房号:</div>
<div class="value">娜美</div>
</div>
<div class="descriptionsbox">
<div class="label">所属小区:</div>
<div class="value">18100000000</div>
</div>
<div class="descriptionsbox">
<div class="label">楼栋:</div>
<div class="value">2栋</div>
</div>
<div class="descriptionsbox">
<div class="label">单元:</div>
<div class="value">2单元</div>
</div>
<div class="descriptionsbox">
<div class="label">楼层:</div>
<div class="value">3楼</div>
</div>
<div class="descriptionsbox">
<div class="label">建筑面积:</div>
<div class="value">112㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">公摊面积:</div>
<div class="value">12㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">户型:</div>
<div class="value">3室2厅2卫</div>
</div>
</div>
</div>
<div class="AddBuildingBody">
<div class="title">
<span>储藏室信息 </span>
<el-button type="primary" text>编辑</el-button>
</div>
<div class="addBuildingFormBody">
<div class="descriptionsbox">
<div class="label">房号:</div>
<div class="value">娜美</div>
</div>
<div class="descriptionsbox">
<div class="label">所属小区:</div>
<div class="value">18100000000</div>
</div>
<div class="descriptionsbox">
<div class="label">楼栋:</div>
<div class="value">2栋</div>
</div>
<div class="descriptionsbox">
<div class="label">单元:</div>
<div class="value">2单元</div>
</div>
<div class="descriptionsbox">
<div class="label">楼层:</div>
<div class="value">3楼</div>
</div>
<div class="descriptionsbox">
<div class="label">建筑面积:</div>
<div class="value">112㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">公摊面积:</div>
<div class="value">12㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">户型:</div>
<div class="value">3室2厅2卫</div>
</div>
</div>
</div>
<!-- 车位信息 -->
<div class="AddBuildingBody">
<div class="title">
<span>车位信息</span>
<el-button type="primary" text>编辑</el-button>
</div>
<div class="addBuildingFormBody">
<div class="descriptionsbox">
<div class="label">房号:</div>
<div class="value">娜美</div>
</div>
<div class="descriptionsbox">
<div class="label">所属小区:</div>
<div class="value">18100000000</div>
</div>
<div class="descriptionsbox">
<div class="label">楼栋:</div>
<div class="value">2栋</div>
</div>
<div class="descriptionsbox">
<div class="label">单元:</div>
<div class="value">2单元</div>
</div>
<div class="descriptionsbox">
<div class="label">楼层:</div>
<div class="value">3楼</div>
</div>
<div class="descriptionsbox">
<div class="label">建筑面积:</div>
<div class="value">112㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">公摊面积:</div>
<div class="value">12㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">户型:</div>
<div class="value">3室2厅2卫</div>
</div>
</div>
</div>
<!-- 收费项目 -->
<div class="AddBuildingBody">
<div class="title">
<span>收费项目</span>
</div>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="收费项目" />
<el-table-column prop="name" label="收费标准" />
<el-table-column prop="name" label="开始时间" />
<el-table-column prop="name" label="结束时间" />
<el-table-column prop="name" label="备注" />
<el-table-column prop="address" label="操作" />
</el-table>
</div>
</div>
<!-- 相关住户 -->
<div class="AddBuildingBody">
<div class="title">
<span>相关住户</span>
</div>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="姓名" />
<el-table-column prop="name" label="性别" />
<el-table-column prop="name" label="联系电话" />
<el-table-column prop="name" label="身份" />
<el-table-column prop="name" label="备注" />
<el-table-column prop="address" label="操作" />
</el-table>
</div>
</div>
<!-- 缴费账单 -->
<div class="AddBuildingBody">
<div class="title">
<span>缴费账单</span>
</div>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="姓名" />
<el-table-column prop="name" label="性别" />
<el-table-column prop="name" label="联系电话" />
<el-table-column prop="name" label="身份" />
<el-table-column prop="name" label="备注" />
<el-table-column prop="address" label="操作" />
</el-table>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}
];
</script>
<style scoped lang="scss">
.AddBuildingBox {
padding: 15px;
height: 100%;
width: 100%;
overflow-y: auto;
}
.AddBuildingBody {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
padding: 15px;
.title {
height: 40px;
line-height: 40px;
padding-left: 20px;
font-size: 15px;
background-color: rgba(255, 255, 255, 1);
color: rgba(16, 16, 16, 1);
border-bottom: 1px solid #bbbbbb;
margin-bottom: 20px;
}
.addBuildingFormBody {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
.descriptionsbox {
display: flex;
align-items: center;
margin: 10px 0;
font-size: 15px;
.label {
width: 100px;
text-align: right;
font-weight: 800;
}
.value {
flex: 1;
margin-left: 20px;
}
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink