详情页顶部设置

This commit is contained in:
luJianJun 2023-07-31 18:12:04 +08:00
parent 1c3bf8e9c5
commit 6a195c67e6
3 changed files with 95 additions and 87 deletions

View File

@ -59,7 +59,7 @@
location && location.data && location.data[1] ? `${location && location.data &&
location.data[item.substring(0,
1)]} >
${location &&
${item.length===1?'不限':location &&
location.data[item]}` : ''
}}</span>
</div>

View File

@ -47,7 +47,9 @@
</div>
<div class="dis-f jus-x al-item s-w-100">
<img src="../assets/homeImage/listOnMore.svg" class="list-btn" alt="">
<img src="../assets/homeImage/listMore.svg" class="list-btn mg-l-20" alt="">
<img src="../assets/homeImage/listOnMore.svg" class="list-btn r-no-list mg-l-20" alt="">
<!-- <img src="../assets/homeImage/listMore.svg"
class="list-btn mg-l-20" alt=""> -->
</div>
</div>
<div class="information-wx-img" style="margin-top:20px;">
@ -424,6 +426,10 @@ img {
.list-btn {
width: 8px;
height: 14px;
cursor: pointer;
}
.r-no-list{
transform: rotate(180deg);
}
.mg-l-20 {

View File

@ -1,89 +1,85 @@
<template>
<div class="box-min-1200-src">
<pageTopBar></pageTopBar>
<el-affix :offset="0" @change="changeTitleType" z-index="666">
<div class="top-bar-box dis-f jus-x" v-if="titleType">
<div class="top-bar dis-f al-item jus-bet">
<div class="dis-f al-item">
<img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing" v-if="pageType == 1 &&
housingInfo['data'] &&
housingInfo['data'].info.verified" alt="">
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo"
style="margin-right:10px;" v-if="pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1" alt="">
<div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
|| pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1"></div>
<span class="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit">HK$</span>
<span class="rent" v-if="pageType != 3">{{ housingInfo['data'] &&
housingInfo['data'].info.rent }}</span>
<span class="rent" v-if="pageType == 3">
{{
housingInfo['data'] && housingInfo['data'].info.rent[0]
}}~
{{
housingInfo['data'] && housingInfo['data'].info.rent[1]
}}
</span>
<span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
<div class="line"></div>
<div class="dis-f al-item">
{{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type.substring(0, 1)]
}}
<img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="">
{{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type]
}}
</div>
</div>
<div class="dis-f al-item">
<div class="tool-btn dis-f al-item jus-x">
<div class="dis-f al-item" @click="setOperation">
<img src="../assets/img/detail/collect.png"
v-show="housingInfo['data'] && !housingInfo['data'].isfav" class="tool-icon" alt="">
<img src="../assets/img/detail/collectT.png"
v-show="housingInfo['data'] && housingInfo['data'].isfav" class="tool-icon" alt="">
<span>
{{ housingInfo['data'] && housingInfo['data'].isfav ?
housingInfo['data'] && housingInfo['data']['info'].count_fav : '收藏' }}
</span>
</div>
<div class="line" style="margin:0 20px;"></div>
<div class="dis-f al-item" style="position: relative;">
<img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
<span>
转发
</span>
<transmit-btn v-if="housingInfo.data" :qrcode="housingInfo.data['qrcode']"
:title="housingInfo.data.info['subject']"></transmit-btn>
</div>
</div>
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
<div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;" @click="getConcatData">
联系方式
</div>
</div>
</div>
</div>
</div>
</el-affix>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<breadcrumb :data="housingInfo['data']" :operation='setOperation'></breadcrumb>
<div class="dis-f jus-bet" style="margin-top: -15px;">
<div class="info-box">
<el-affix :offset="0" @change="changeTitleType" z-index="666">
<div class="top-bar-box dis-f jus-x" v-if="titleType">
<div class="top-bar dis-f al-item jus-bet">
<div class="dis-f al-item">
<img src="../assets/img/detail/authenticationHousing.png"
class="authentication-housing" v-if="pageType == 1 &&
housingInfo['data'] &&
housingInfo['data'].info.verified" alt="">
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo"
style="margin-right:10px;" v-if="pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1" alt="">
<div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
|| pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1"></div>
<span class="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit">HK$</span>
<span class="rent" v-if="pageType != 3">{{ housingInfo['data'] &&
housingInfo['data'].info.rent }}</span>
<span class="rent" v-if="pageType == 3">
{{
housingInfo['data'] && housingInfo['data'].info.rent[0]
}}~
{{
housingInfo['data'] && housingInfo['data'].info.rent[1]
}}
</span>
<span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
<div class="line"></div>
<div class="dis-f al-item">
{{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type.substring(0, 1)]
}}
<img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="">
{{ indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['type'][housingInfo['data'] &&
housingInfo['data'].info.type]
}}
</div>
</div>
<div class="dis-f al-item">
<div class="tool-btn dis-f al-item jus-x">
<div class="dis-f al-item" @click="setOperation">
<img src="../assets/img/detail/collect.png"
v-show="housingInfo['data'] && !housingInfo['data'].isfav"
class="tool-icon" alt="">
<img src="../assets/img/detail/collectT.png"
v-show="housingInfo['data'] && housingInfo['data'].isfav"
class="tool-icon" alt="">
<span>
{{ housingInfo['data'] && housingInfo['data'].isfav ?
housingInfo['data'] && housingInfo['data']['info'].count_fav : '收藏' }}
</span>
</div>
<div class="line" style="margin:0 20px;"></div>
<div class="dis-f al-item" style="position: relative;">
<img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
<span>
转发
</span>
<transmit-btn v-if="housingInfo.data" :qrcode="housingInfo.data['qrcode']"
:title="housingInfo.data.info['subject']"></transmit-btn>
</div>
</div>
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
<div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;"
@click="getConcatData">
联系方式
</div>
</div>
</div>
</div>
</div>
</el-affix>
<div class="detail-price-box">
<span class="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit" :style="{ 'font-size': pageType === 3 ? '20px' : '' }">HK$</span><span
@ -359,7 +355,7 @@
</span>
<span class="text" style="margin-left:0;"
v-if="housingInfo['data'] && housingInfo['data'].info.elevator&&housingInfo['data'].info.elevator!=-1">
v-if="housingInfo['data'] && housingInfo['data'].info.elevator && housingInfo['data'].info.elevator != -1">
<span style="color: #D7D7D7;">|</span>
{{
indexData['data'] &&
@ -433,11 +429,11 @@
<div class="icon dis-f jus-x al-item">
<img src="../assets/img/detail/moreAllow.svg" class="icon-img" alt="">
</div>
<span>
<div class="text-box">
{{
item.length == 1 ? '不限' : location && location[item]
}}
</span>
</div>
</div>
</div>
</div>
@ -549,7 +545,8 @@
<div class="houseing-info-box dis-f al-item jus-bet">
<div class="dis-f al-item">
房源ID : &nbsp<span class="houseing-id" @click="clone(housingInfo['data'] &&
housingInfo['data'].info.uid)">{{ housingInfo['data'] &&housingInfo['data'].info.uid }}</span>
housingInfo['data'].info.uid)">{{ housingInfo['data']
&& housingInfo['data'].info.uid }}</span>
<span class="browse-box">
浏览 : <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view
}}</span>
@ -1223,7 +1220,7 @@ let setNavigation = () => {
}
}
}
console.log(111, store.state.routeList)
// console.log(111, store.state.routeList)
}
//
let contacts = reactive({
@ -1334,7 +1331,7 @@ const onPageSrcoll = (e) => {
if (loadMore.value) {
loadMore.value = false
pages.value += 1
if (housingInfo['data']&&housingInfo['data'].isintermediary) {
if (housingInfo['data'] && housingInfo['data'].isintermediary) {
getPublisherList()
} else {
recommendList()
@ -2393,6 +2390,11 @@ img {
margin-top: 15px;
}
.text-box {
width: 700px;
word-wrap: break-word;
}
.icon {
width: 16px;
height: 16px;
@ -2551,7 +2553,7 @@ img {
.houseing-info-box-s {
height: 17px;
width:1px;
width: 1px;
border-right: 1px dashed #d7d7d7;
}