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

首页接口

Browse Source
This commit is contained in:
luJianJun
2023-07-13 10:07:16 +08:00
parent 5dcf49533d
commit 6ad28c4f0a
8 changed files with 306 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@@ -1,33 +1,36 @@
<template>
<div>
<div class="waterfall-box">
<div class="waterfall-box" >
<div class="flexflex pos-r">
<div class="box-tab-type">
招室友
<div class="box-tab-type" v-if="itemData.intermediarytext">
{{ itemData.intermediarytext }}
</div>
<div class="intermediary-type">
<div class="intermediary-type" v-if="itemData.isintermediary">
认证中介
</div>
<img class="apartment-img" src="../../assets/homeImage/shopImg.svg" />
<div class="authentication-box">
<div class="authentication-box" v-if="(itemData.type==='housing'&&itemData.verified)||(itemData.type==='apartment'&&itemData.isintermediary)">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/authenticationBg.svg" class="authentication-bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="authentication-text" alt="">
</div>
</div>
<div class="long-title">
<span class="type">123</span>1111111111111111111111111111111111111111111111111111111111111111
<span class="type" v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData.title }}
</div>
<div class="type-tab">
独卫套房 · 电梯 · 阳台 · 男女皆可
<span v-if="itemData.type === 'housing'">
{{ itemData.housingtype }} {{ itemData.elevator===-1||!itemData.elevator?'': `· ${itemData.elevator}` }}{{ itemData.sunshinearea===-1||!itemData.sunshinearea?'': `· ${itemData.sunshinearea}`}}{{`· ${itemData.gender}`}}
</span>
<span v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span>
</div>
<div style="padding: 0 10px;margin-top:15px;" class="dis-f al-item">
<img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="">
<span class="address-text">九龙 > 尖沙咀/佐敦</span>
<img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" v-if="itemData.type === 'apartment'">
<span class="address-text" v-if="itemData.type === 'apartment'">九龙 > 尖沙咀/佐敦</span>
</div>
<div style="padding:0 10px;margin-top:12px;">
<span class="unit">HK$</span>
<span class="price">7200</span>
<div style="padding:0 10px;margin-top:12px;" v-if="itemData.type === 'housing'">
<span class="unit">{{ itemData.currency }}</span>
<span class="price">{{itemData.rent}}</span>
<span class="date">/月</span>
</div>
<!-- <div class="title">
@@ -36,58 +39,59 @@
<!-- <div class="info-text">
年轻有活力且超有玩趣的公寓
</div> -->
<div class="corner-box">
<img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
</div>
<!-- <div class="suite-box">
<!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
<div class="suite-box" v-if="itemData.type === 'apartment'">
<div class="dis-f al-item jus-bet">
<div class="suite-type">
单人套间
{{ itemData.specifications && itemData.specifications[0].title }}
</div>
<div>
<span class="unit">HK$</span>
<span class="price">7200</span>
<span class="price">{{ itemData.specifications && itemData.specifications[0].value }}</span>
<span class="date">/月</span>
</div>
</div>
<div class="line"></div>
<div class="dis-f al-item jus-bet">
<div class="suite-type">
单人间
{{ itemData.specifications && itemData.specifications[1].title }}
</div>
<div>
<span class="unit">HK$</span>
<span class="price">5700</span>
<span class="price">{{ itemData.specifications && itemData.specifications[1].value }}</span>
<span class="date">/月</span>
</div>
</div>
</div> -->
</div>
<div class="corner-box" v-if="itemData.type === 'housing'">
<img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
</div>
<!-- <div class="apartment-price-more flexcenter">更多</div> -->
<!-- <div class="color-scheme" style="background: #b3c7f4;"></div> -->
<!-- <div class="apartment-top flexcenter">
<div class="apartment-top flexcenter" v-if="itemData.type === 'apartment'">
<img class="apartment-bottom-icon" src="../../assets/homeImage/apartment-bottom.png" />
<img class="apartment-icon" src="../../assets/homeImage/apartment-icon.png" />
<img class="apartment-text" src="../../assets/homeImage/apartment-text.png" />
</div> -->
</div>
</div>
</div>
</template>
<script setup>
</script>
<script>
export default {
props: {
data: {
type: Object,
default: function () {
return {}
}
import { defineProps, reactive } from 'vue'
const props = defineProps({
data: {
type: Object,
default: function () {
return {}
}
}
}
})
let itemData = props.data
</script>
<style scoped>
.pos-r {
@@ -130,6 +134,9 @@ export default {
margin-left: 3px;
}
.pd-b-10{
padding-bottom:10px;
}
.waterfall-box {
width: 285px;
background: inherit;
@@ -140,6 +147,7 @@ export default {
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
margin-bottom: 20px;
cursor: pointer;
.authentication-box {
width: 275px;
@@ -269,10 +277,10 @@ export default {
font-style: normal;
font-size: 14px;
color: #FFFFFF;
background:#6081d5;
line-height:24px;
text-align:center;
border-radius:5px;
background: #6081d5;
line-height: 24px;
text-align: center;
border-radius: 5px;
}
.title {
@@ -308,6 +316,10 @@ export default {
font-style: normal;
font-size: 15px;
color: #000000;
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
@@ -361,5 +373,18 @@ export default {
display: flex;
justify-content: center;
align-items: center;
}</style>
}
.live-img {
width: 301px;
height: 349px;
border-radius: 16px;
}
.live-img:hover {
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
</style>