XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

公寓列表瀑布流

Browse Source
This commit is contained in:
A1300399510
2023-07-17 11:50:19 +08:00
parent 5760d0890b
commit cb3198febc
4 changed files with 270 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/components/public/apartment-item.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<div class="item flexflex">
<img class="img" :src="item['image']">
<div class="title">{{ item['title'] }}</div>
<div class="hint">{{ item['propaganda'] }}</div>
<div class="tab-box flexflex">
<div class="tab-item flexcenter" v-for="it in item['tags'].split(',')">{{ it }}</div>
</div>
<div class="location flexacenter">
<img class="location-icon" src="@/assets/img/publicImage/location-icon.png">{{ item['address'] }}
</div>
<div class="type-list">
<div class="type-item flexacenter" v-for="it in item['roomlist']">
<div class="type-name flex1">{{ it['name'] }}</div>
<div class="type-data flexacenter">
<div class="unit">HK$</div>
<div class="price">{{ it['price'] }}</div>
/月
</div>
</div>
</div>
<div class="type-quantity flexacenter">
共
<div class="type-quantity-number">{{ item['roomnum'] }}</div>
个房型
<img class="black-arrow" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
</template>
<script setup>
const props = defineProps({
item: Object,
});
</script>
<style lang="less" scoped>
.item {
width: 386px;
background-color: rgba(255, 255, 255, 1);
border-radius: 20px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
flex-direction: column;
padding: 10px 10px 0;
margin-bottom: 20px;
position: relative;
height: fit-content;
.img {
width: 366px;
height: 244px;
border-radius: 10px;
margin-bottom: 19px;
}
.title {
font-weight: 650;
font-size: 20px;
color: #000000;
margin-bottom: 10px;
padding-left: 6px;
}
.hint {
color: #AAAAAA;
font-size: 14px;
margin: 0 6px 20px;
}
.tab-box {
flex-wrap: wrap;
margin-bottom: 14px;
padding-left: 6px;
.tab-item {
height: 28px;
background-color: rgba(224, 240, 255, 1);
border-radius: 5px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 13px;
color: #447EB3;
padding: 0 11px;
margin-right: 10px;
margin-bottom: 10px;
}
}
.location {
.location-icon {
width: 18px;
height: 18px;
margin-right: 2px;
}
font-size: 15px;
color: #555555;
margin-bottom: 16px;
padding-left: 6px;
}
.type-list {
width: 354px;
// height: 108px;
background: rgba(246, 246, 246, 1);
border-radius: 12px;
padding: 0 10px;
margin: 0 6px;
.type-item {
height: 54px;
&:not(:last-of-type) {
border-bottom: 1px solid #ebebeb;
}
.type-name {
color: #000000;
font-size: 15px;
}
.type-data {
font-size: 14px;
.unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
color: #000000;
}
.price {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
font-size: 20px;
color: #F95D5D;
margin: 0 5px;
}
font-size: 14px;
color: #555555;
}
}
}
.type-quantity {
font-size: 14px;
color: #555555;
margin: 24px auto;
.type-quantity-number {
font-weight: 650;
font-size: 14px;
color: #000000;
height: 18px;
background-color: rgba(253, 223, 109, 1);
border-radius: 9px;
padding: 0 8px;
margin: 0 8px;
}
.black-arrow {
width: 7px;
height: 12px;
margin-left: 8px;
}
}
}
</style>