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-31 16:59:16 +08:00
parent de637cffbd
commit f76cb3ced0
4 changed files with 157 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/biserialListItem/biserialListItem.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}">
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow&&pageType==1" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow&&pageType==2" alt="">
<div class="item" ref="list" @click="watchInfo" :class="{ 's-w-100': detailShow }">
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2"
alt="">
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
@@ -19,7 +20,7 @@
</div>
<div class="tab-item mg-l-8"
v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
{{ listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
{{ listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
</div>
<div class="tab-item mg-l-8"
v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
@@ -39,33 +40,42 @@
}}
</div>
</div>
<div class="address-text dis-f al-item" v-if="data && data.data && data.data.location">
<div class="address-text dis-f al-item"
v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<span v-if="!Array.isArray(data.data.location)">{{
<span>{{
location && location.data && location.data[1] ? `${location && location.data &&
location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} >
${location &&
location.data[data && data.data && data.data.location]}` : ''
}}</span>
<span v-if="Array.isArray(data.data.location)">{{
location && location.data && location.data[data && data.data &&
data.data.location && data.data.location[0].substring(0, 1)]
}}>
<span v-for="(item, i) in data.data.location">
{{ location &&
location.data[item] }}
</span>
</span>
</div>
<div class="dis-f" style="flex-wrap: wrap;"
v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
<div class="address-text dis-f al-item mg-r-15" v-if="data && data.data && data.data.location"
v-for="(item, i) in data.data.location" :key="i">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<span>{{
location && location.data && location.data[1] ? `${location && location.data &&
location.data[item.substring(0,
1)]} >
${location &&
location.data[item]}` : ''
}}</span>
</div>
</div>
<div class="price-text dis-f" style="align-items: end;">
<span class="unit">HK$</span>
<span class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
&& data.data.rent }}</span>
<span class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data &&
<span class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
&&
data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
<span>/{{data && data.data && data.data.rentalperiod}}</span>
<span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ listData.data.rentalduration[data.data && data.data.rentalduration]
}}]</span>
<span>/{{ data && data.data && data.data.rentalperiod }}</span>
<span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{
listData.data.rentalduration[data.data && data.data.rentalduration]
}}]</span>
</div>
</div>
<div class="img">
@@ -84,7 +94,7 @@
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
alt="">
</div>
<div class="btm-box dis-f al-item" :class="{'jus-bet':detailShow}">
<div class="btm-box dis-f al-item" :class="{ 'jus-bet': detailShow }">
<div class="dis-f al-item">
<img :src="data && data.data && data.data.avatar" class="user-img" alt="">
<span class="user-name">{{ data && data.data && data.data.author }}</span>
@@ -97,7 +107,7 @@
data.data.intermediary_text
}}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png"
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
</div>
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
@@ -156,17 +166,17 @@ location.data = store.state.indexData && store.state.indexData.config && store.s
//数据包
let listData = reactive({ data: {} })
listData.data = store.state.indexData && store.state.indexData.config||{}
listData.data = store.state.indexData && store.state.indexData.config || {}
let pageType=ref('')
let pageType = ref('')
//跳转
let router = useRouter()
let watchInfo = () => {
let seachData=router.currentRoute.value.query
if(pageType.value===4){
for(let key in data){
store.state.seachSelect['seachPage'][key]=seachData[key]
let seachData = router.currentRoute.value.query
if (pageType.value === 4) {
for (let key in data) {
store.state.seachSelect['seachPage'][key] = seachData[key]
}
}
router.push({
@@ -179,7 +189,7 @@ let watchInfo = () => {
onMounted(() => {
imgRef = getCurrentInstance()
pageType.value=data.data.intermediary===1?2:data.data.intermediary===6?3:1
pageType.value = data.data.intermediary === 1 ? 2 : data.data.intermediary === 6 ? 3 : 1
})
</script>
@@ -257,13 +267,13 @@ img {
margin-bottom: 20px;
cursor: pointer;
.detail-tab{
width:32px;
height:32px;
.detail-tab {
width: 32px;
height: 32px;
position: absolute;
top:0;
right:0;
z-index:66;
top: 0;
right: 0;
z-index: 66;
}
.mg-t-20 {
@@ -311,6 +321,7 @@ img {
font-size: 18px;
color: #000000;
text-align: left;
word-wrap: break-word;
}
.mg-l-8 {
@@ -318,7 +329,7 @@ img {
}
.tab-item {
padding:2px 5px;
padding: 2px 5px;
background: inherit;
background-color: rgba(242, 242, 242, 1);
border: none;
@@ -334,6 +345,10 @@ img {
text-align: center;
}
.mg-r-15 {
margin-right: 15px;
}
.address-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
@@ -342,6 +357,7 @@ img {
color: #555555;
margin-top: 20px;
.img {
width: 18px;
height: 18px;

1
src/components/detail/breadcrumb.vue
View File

@@ -260,6 +260,7 @@ img {
color: #000000;
line-height: 35px;
width: 820px;
word-wrap:break-word;
}
.tool-btn-box {