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 15:07:31 +08:00
parent c8f24835d3
commit f5e9e2ec62
7 changed files with 189 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
<template>
<div>
<div class="waterfall-box" >
<div class="waterfall-box" v-if="itemData.type !== 'adv'"
:class="{ 'waterfall-box-housing': itemData.type === 'housing' }">
<div class="flexflex pos-r">
<div class="box-tab-type" v-if="itemData.intermediarytext">
{{ itemData.intermediarytext }}
@@ -8,29 +9,35 @@
<div class="intermediary-type" v-if="itemData.isintermediary">
认证中介
</div>
<img class="apartment-img" src="../../assets/homeImage/shopImg.svg" />
<div class="authentication-box" v-if="(itemData.type==='housing'&&itemData.verified)||(itemData.type==='apartment'&&itemData.isintermediary)">
<img class="apartment-img" :src="itemData.imageLocal || itemData.image"
v-if="itemData.type === 'housing' || itemData.type === 'apartment'" />
<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" v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData.title }}
<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}`}}
{{ itemData.housingtype }}
{{ itemData.elevator === -1 || !itemData.elevator ? '' : `· ${itemData.elevator}` }}
{{ itemData.sunshinearea === -1 || !itemData.sunshinearea ? '' : `· ${itemData.sunshinearea}` }}
{{ `· ${itemData.gender}` }}
{{ itemData.leaseterm ? `· ${itemData.leaseterm}` : '' }}
</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="" v-if="itemData.type === 'apartment'">
<span class="address-text" v-if="itemData.type === 'apartment'">九龙 > 尖沙咀/佐敦</span>
</div>
<div style="padding:0 10px;margin-top:12px;" v-if="itemData.type === 'housing'">
<!-- <div style="padding: 0 10px;margin-top:15px;" class="dis-f al-item" v-if="itemData.type === 'housing'">
<img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="">
<span class="address-text">九龙 > 尖沙咀/佐敦</span>
</div> -->
<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="price">{{ itemData.rent }}</span>
<span class="date">/月</span>
</div>
<!-- <div class="title">
@@ -39,9 +46,6 @@
<!-- <div class="info-text">
年轻有活力且超有玩趣的公寓
</div> -->
<!-- <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">
@@ -71,12 +75,15 @@
<!-- <div class="apartment-price-more flexcenter">更多</div> -->
<!-- <div class="color-scheme" style="background: #b3c7f4;"></div> -->
<div class="apartment-top flexcenter" v-if="itemData.type === 'apartment'">
<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>
<img :src="itemData.imageLocal || itemData.image" class="live-img" v-if="itemData.type === 'adv'" alt="">
</div>
</template>
@@ -134,9 +141,14 @@ let itemData = props.data
margin-left: 3px;
}
.pd-b-10{
padding-bottom:10px;
.pd-b-10 {
padding-bottom: 10px;
}
.waterfall-box-housing {
border-radius: 16px 16px 35px 16px !important;
}
.waterfall-box {
width: 285px;
background: inherit;
@@ -229,6 +241,10 @@ let itemData = props.data
text-overflow: ellipsis;
word-break: break-all;
margin-top: 8px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
.type {
width: 40px;
@@ -317,8 +333,8 @@ let itemData = props.data
font-size: 15px;
color: #000000;
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -348,8 +364,10 @@ let itemData = props.data
.apartment-img {
width: 275px;
height: 193px;
border-radius: 10px;
margin: 5px auto;
object-fit: cover;
}
.apartment-top {
@@ -376,15 +394,16 @@ let itemData = props.data
}
.live-img {
width: 301px;
height: 349px;
width: 285px;
/* height: 349px; */
border-radius: 16px;
margin-bottom: 20px;
cursor: pointer;
}
.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>
}</style>