116 lines
2.7 KiB
Vue
116 lines
2.7 KiB
Vue
<template>
|
||
<div class="p-2 houselist">
|
||
<PageHeader>
|
||
<template #content>
|
||
<div class="houseAdressBox">
|
||
<span class="mr-50px">当前小区：北境碧桂园小区</span>
|
||
<span>小区地址：北境朝北市塔里克儿大道368号</span>
|
||
</div>
|
||
<div class="houseTypeBox flex">
|
||
<div
|
||
class="housetype"
|
||
:class="{
|
||
active: active === index
|
||
}"
|
||
@click="changeHouseType(index)"
|
||
v-for="(house, index) in housetypelist"
|
||
:key="index"
|
||
>
|
||
{{ house }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</PageHeader>
|
||
<div class="houseBody mt-10px w-full flex align-center justify-center">
|
||
<building></building>
|
||
<unit></unit>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup name="Houselist" lang="ts">
|
||
import building from './components/building.vue';
|
||
import unit from './components/unit.vue';
|
||
import PageHeader from '@/components/Pageheader/index.vue';
|
||
const housetypelist = ['住宅', '办公', '商用', '公寓'];
|
||
|
||
const active = ref(0);
|
||
const changeHouseType = (index: number) => {
|
||
active.value = index;
|
||
};
|
||
|
||
let ojb = {
|
||
'code': 200,
|
||
'msg': '操作成功',
|
||
'data': [
|
||
{
|
||
'unitNo': '1',
|
||
'houses': '{"houseId":5,"houseNo":"1201室"}, {"houseId":6,"houseNo":"1202室"}',
|
||
'houseCount': 2,
|
||
'floorNo': '12',
|
||
'buildingId': 54564
|
||
},
|
||
{
|
||
'unitNo': '1',
|
||
'houses': '{"houseId":1,"houseNo":"1301室"}, {"houseId":2,"houseNo":"1302室"}',
|
||
'houseCount': 2,
|
||
'floorNo': '13',
|
||
'buildingId': 54564
|
||
},
|
||
{
|
||
'unitNo': '2',
|
||
'houses': '{"houseId":7,"houseNo":"1201室"}',
|
||
'houseCount': 1,
|
||
'floorNo': '12',
|
||
'buildingId': 54564
|
||
},
|
||
{
|
||
'unitNo': '2',
|
||
'houses': '{"houseId":3,"houseNo":"1301室"}, {"houseId":4,"houseNo":"1302室"}',
|
||
'houseCount': 2,
|
||
'floorNo': '13',
|
||
'buildingId': 54564
|
||
}
|
||
]
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.houselist {
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
height: calc(100vh - 84px);
|
||
min-height: calc(100vh - 84px);
|
||
.houseBody {
|
||
height: calc(100% - 200px);
|
||
}
|
||
}
|
||
.houseAdressBox {
|
||
margin-top: 25px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
color: rgba(102, 102, 102, 1);
|
||
font-size: 14px;
|
||
}
|
||
.houseTypeBox {
|
||
margin-top: 20px;
|
||
.housetype {
|
||
$activeColor: rgba(26, 117, 255, 1);
|
||
cursor: pointer;
|
||
width: 100px;
|
||
height: 40px;
|
||
line-height: 20px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
font-size: 14px;
|
||
text-align: center;
|
||
border: 1px solid transparent;
|
||
margin-left: -1px;
|
||
|
||
&:hover,
|
||
&.active {
|
||
color: $activeColor;
|
||
border-bottom-color: $activeColor;
|
||
}
|
||
}
|
||
}
|
||
</style>
|