3067 lines
127 KiB
Vue
3067 lines
127 KiB
Vue
<template>
|
||
<div style="min-width:1200px;overflow-x: scroll;overflow-y: visible;">
|
||
<pageTopBar></pageTopBar>
|
||
<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">
|
||
<div style="position:absolute;top:0;left:0">
|
||
<el-affix :offset="0" @change="changeTitleType" z-index="1002" style="width: 1200px">
|
||
<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="!Array.isArray(housingInfo['data'] && housingInfo['data'].info.rent)">{{
|
||
housingInfo['data'] &&
|
||
housingInfo['data'].info.rent }}</span>
|
||
<span class="rent"
|
||
v-if="Array.isArray(housingInfo['data'] && housingInfo['data'].info.rent)">
|
||
{{
|
||
housingInfo['data'] && housingInfo['data'].info.rent[0]
|
||
}}<span
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.rent[1]">~{{ housingInfo['data']
|
||
&& housingInfo['data'].info.rent[1] }}</span>
|
||
</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 fav-btn" @click="setOperation">
|
||
<div class="pos-r" style="width:20px;height:20px;">
|
||
<img src="../assets/img/detail/collect.png"
|
||
v-show="housingInfo['data'] && !housingInfo['data'].isfav"
|
||
class="fav-img fav-img-t" alt="">
|
||
<img src="../assets/img/detail/collectT.png"
|
||
v-show="housingInfo['data'] && !housingInfo['data'].isfav"
|
||
class="fav-img fav-img-f" alt="">
|
||
</div>
|
||
<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">
|
||
<img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
|
||
<span>
|
||
转发
|
||
</span>
|
||
<transmit-btn v-if="housingInfo.data" :concatType="concatType"
|
||
:qrcode="housingInfo.data['qrcode']"
|
||
:title="housingInfo.data.info['subject']"
|
||
type="housingTop"></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>
|
||
<div class="detail-price-box dis-f" style="align-items: end;">
|
||
<span class="need-houing-type" v-if="pageType == 3">预算</span>
|
||
<span class="unit" :class="{ 'line-h-17': pageType == 3 }"
|
||
:style="{ 'font-size': pageType === 3 ? '20px' : '' }">HK$</span>
|
||
<!-- <span class="rent"
|
||
v-if="pageType != 3">{{
|
||
housingInfo['data'] && housingInfo['data'].info.rent }}</span> -->
|
||
<span class="rent"
|
||
v-if="!Array.isArray(housingInfo['data'] && housingInfo['data'].info.rent)">{{
|
||
housingInfo['data'] &&
|
||
housingInfo['data'].info.rent }}</span>
|
||
<span class="rent" v-if="Array.isArray(housingInfo['data'] && housingInfo['data'].info.rent)">
|
||
{{
|
||
housingInfo['data'] && housingInfo['data'].info.rent[0]
|
||
}}<span
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.rent[1]">~{{ housingInfo['data'] &&
|
||
housingInfo['data'].info.rent[1] }}</span>
|
||
</span>
|
||
<span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
|
||
</div>
|
||
<div class="dis-f al-item detail-condition-box">
|
||
<div class="condition condition-border">
|
||
<div class="dis-f al-item">
|
||
<div class="icon">
|
||
|
||
</div>
|
||
{{ indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['type'][housingInfo['data'] &&
|
||
housingInfo['data'].info.type.substring(0, 1)]
|
||
}}
|
||
</div>
|
||
<div class="type-text">
|
||
{{ indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['type'][housingInfo['data'] &&
|
||
housingInfo['data'].info.type]
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="condition condition-border">
|
||
<div class="dis-f al-item">
|
||
<div class="icon">
|
||
|
||
</div>
|
||
租期
|
||
</div>
|
||
<div class="type-text">
|
||
{{ !housingInfo['data'] || housingInfo['data'] &&
|
||
housingInfo['data'].info && housingInfo['data'].info.rentalduration
|
||
=== '0' ?
|
||
'不限' : `${indexData['data'] && indexData['data']['config'] &&
|
||
indexData['data']['config']['rentalduration'][housingInfo['data']
|
||
&& housingInfo['data'].info.rentalduration]}` }}
|
||
</div>
|
||
</div>
|
||
<div class="condition">
|
||
<div class="dis-f al-item">
|
||
<div class="icon">
|
||
|
||
</div>
|
||
起租日期
|
||
</div>
|
||
<div class="type-text">
|
||
{{ housingInfo['data'] && housingInfo['data'].info.leasetime || '随时' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="image-box"
|
||
v-if="(housingInfo['data'] && housingInfo['data'].info &&housingInfo['data'].info.video&& housingInfo['data'].info.video.length>0) ||
|
||
(housingInfo['data'] && housingInfo['data'].info &&housingInfo['data'].info.picturegroup&& housingInfo['data'].info.picturegroup.length>0)">
|
||
<div class="dis-f al-item">
|
||
<img src="../assets/img/detail/videoIcon.png" v-if="housingInfo['data'] &&
|
||
housingInfo['data'].info.video &&
|
||
housingInfo['data'].info.video.length > 0" class="img-video" alt="">
|
||
<div class="num-box" v-if="housingInfo['data'] &&
|
||
housingInfo['data'].info.video &&
|
||
housingInfo['data'].info.video.length">
|
||
{{ housingInfo['data'] && housingInfo['data'].info.video ?
|
||
housingInfo['data'] && housingInfo['data'].info.video.length : 0 }}</div>
|
||
<img src="../assets/img/detail/imageIcon.png" v-if="housingInfo['data'] &&
|
||
housingInfo['data'].info.picturegroup &&
|
||
housingInfo['data'].info.picturegroup.length" class="img-icon" alt="">
|
||
<div class="num-box" v-if="housingInfo['data'] &&
|
||
housingInfo['data'].info.picturegroup &&
|
||
housingInfo['data'].info.picturegroup.length">
|
||
{{ housingInfo['data'] &&
|
||
housingInfo['data'].info.picturegroup && housingInfo['data'].info.picturegroup.length
|
||
|| 0 }}
|
||
</div>
|
||
</div>
|
||
<div class="img-list-box dis-f jus-x al-item" v-show="imgList.length > 0">
|
||
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
|
||
v-show="imgListTab === 0 && scrollWidth > clientWidth">
|
||
<img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
|
||
style="transform: rotate(180deg);" @click.stop="moveImageList('left')"
|
||
v-show="imgListTab > 0 && scrollWidth > clientWidth">
|
||
<img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
|
||
@click.stop="moveImageList('right')" v-show="imgList.length - 1 !== imgListTab &&
|
||
scrollWidth > clientWidth &&
|
||
imageLIstLeft[imgListTab] + clientWidth < scrollWidth">
|
||
<img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
|
||
style="transform: rotate(180deg);" v-show="scrollWidth > clientWidth &&
|
||
imageLIstLeft[imgListTab] + clientWidth >= scrollWidth">
|
||
<div class="dis-f al-item list-box s-w-100" ref="imageList" v-if="imgList.length > 0">
|
||
<div v-for="(item, i) in imgList" :key="i"
|
||
@click.stop="imageIndex = i, imageShow = true" ref="imgData">
|
||
<div class="video" v-if="item && !item.thumbnail">
|
||
<div class="icon-box dis-f jus-x al-item">
|
||
<img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
|
||
</div>
|
||
<img class="video" :src="item.image" @load="setImageWidth(i)"
|
||
@error="setImageWidth(i)" alt="">
|
||
</div>
|
||
<div class="img dis-f" v-if="item && item.thumbnail">
|
||
<img class="img" style="margin:0;" :src="item.thumbnail"
|
||
@load="setImageWidth(i)" @error="setImageWidth(i)" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="housing-info">
|
||
<div class="title dis-f al-item">
|
||
<img src="../assets/img/detail/infoIcon.png" class="img" alt="">
|
||
<span>
|
||
{{ pageType != 3 ? '基本信息' : '基本要求' }}
|
||
</span>
|
||
</div>
|
||
<!-- -->
|
||
<div class="need-housing-info" v-if="pageType == 3">
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.property">
|
||
<div class="title-box">
|
||
房屋类型
|
||
</div>
|
||
<div class="text mg-l-30">
|
||
<span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.property"
|
||
:key="i">
|
||
<span v-show="i != 0">/</span>{{
|
||
item == 0 ? '不限' :
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['property'][item]
|
||
}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.floor">
|
||
<div class="title-box">
|
||
所在楼层
|
||
</div>
|
||
<div class="text mg-l-30"
|
||
v-if="Array.isArray(housingInfo['data'] && housingInfo['data'].info.floor)">
|
||
<span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor"
|
||
:key="i">
|
||
<span v-show="i != 0">/</span>{{
|
||
item == 0 ? '不限' :
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['floor'][item]
|
||
}}
|
||
</span>
|
||
<!-- {{ housingInfo['data'] && housingInfo['data'].info.floor }} -->
|
||
</div>
|
||
<div class="text mg-l-30"
|
||
v-if="!Array.isArray(housingInfo['data'] && housingInfo['data'].info.floor)">
|
||
<span>
|
||
{{ housingInfo['data'] && housingInfo['data'].info.floor }}层
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.elevator">
|
||
<div class="title-box">
|
||
电梯
|
||
</div>
|
||
<div class="text mg-l-30">
|
||
{{
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['elevator'][housingInfo['data'] &&
|
||
housingInfo['data'].info.elevator]
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.sunshinearea">
|
||
<div class="title-box">
|
||
晾晒区
|
||
</div>
|
||
<div class="text mg-l-30">
|
||
<span
|
||
v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea"
|
||
:key="i"><span v-show="i != 0">/</span>{{
|
||
item == 0 ? '不限' :
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['sunshinearea'][item]
|
||
}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.acreage[0]">
|
||
<div class="title-box">
|
||
面积
|
||
</div>
|
||
<div class="text mg-l-30">
|
||
<span v-if="Array.isArray(housingInfo['data'] && housingInfo['data'].info.acreage)">
|
||
<span>
|
||
{{
|
||
housingInfo['data'] && housingInfo['data'].info.acreage[0] ?
|
||
housingInfo['data']
|
||
&&
|
||
housingInfo['data'].info.acreage[0] : 0
|
||
}}
|
||
</span><span v-if="housingInfo['data'] && housingInfo['data'].info.acreage[1] ? housingInfo['data']
|
||
&&
|
||
housingInfo['data'].info.acreage[1] : 0">~{{
|
||
housingInfo['data'] && housingInfo['data'].info.acreage[1] ?
|
||
housingInfo['data']
|
||
&&
|
||
housingInfo['data'].info.acreage[1] : 0
|
||
}}
|
||
</span>
|
||
</span>
|
||
<span
|
||
v-if="!Array.isArray(housingInfo['data'] && housingInfo['data'].info.acreage)">
|
||
{{
|
||
housingInfo['data'] && housingInfo['data'].info.acreage
|
||
}}
|
||
</span>
|
||
平方呎
|
||
</div>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.gender">
|
||
<div class="title-box">
|
||
同住人性别要求
|
||
</div>
|
||
<div class="text mg-l-30">
|
||
{{
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['gender'][housingInfo['data'] &&
|
||
housingInfo['data'].info.gender]
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.publishergender">
|
||
<div class="title-box">
|
||
发布者性别
|
||
</div>
|
||
<div class="text mg-l-30">
|
||
{{
|
||
housingInfo['data'] && housingInfo['data'].info.publishergender ?
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['gender'][housingInfo['data'] &&
|
||
housingInfo['data'].info.publishergender] :
|
||
'不限'
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="info-box-s" v-if="pageType != 3">
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.property">
|
||
<div class="title-box">
|
||
房屋类型
|
||
</div>
|
||
<span class="text">
|
||
{{
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['property'][housingInfo['data'] &&
|
||
housingInfo['data'].info.property]
|
||
}}
|
||
</span>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.elevator">
|
||
<div class="title-box">
|
||
所在楼层
|
||
</div>
|
||
<span class="text">
|
||
{{ housingInfo['data'] && housingInfo['data'].info.floor }} 
|
||
</span>
|
||
|
||
<span class="text" style="margin-left:0;"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.elevator && housingInfo['data'].info.elevator != -1">
|
||
<span style="color: #D7D7D7;">|</span>
|
||
{{
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['elevator'][housingInfo['data'] &&
|
||
housingInfo['data'].info.elevator]
|
||
}}
|
||
</span>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.sunshinearea">
|
||
<div class="title-box">
|
||
晾晒区
|
||
</div>
|
||
<span class="text">
|
||
{{
|
||
indexData['data'] &&
|
||
housingInfo['data'] &&
|
||
housingInfo['data'].info.sunshinearea
|
||
!== -1 ?
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
|
||
housingInfo['data'].info.sunshinearea] : ''
|
||
}}
|
||
</span>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.acreage">
|
||
<div class="title-box">
|
||
面积
|
||
</div>
|
||
<span class="text">
|
||
{{
|
||
housingInfo['data'] && housingInfo['data'].info.acreage ? housingInfo['data'] &&
|
||
housingInfo['data'].info.acreage : 0
|
||
}} 平方呎
|
||
</span>
|
||
</div>
|
||
<div class="info dis-f al-item"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.gender">
|
||
<div class="title-box">
|
||
性别要求
|
||
</div>
|
||
<span class="text">
|
||
{{
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['gender'][housingInfo['data'] &&
|
||
housingInfo['data'].info.gender]
|
||
}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 求房源-目标区域 -->
|
||
<div class="housing-info" v-if="pageType == 3">
|
||
<div class="title dis-f al-item">
|
||
<img src="../assets/img/detail/mapIcon.png" class="img" alt="">
|
||
<span>
|
||
目标区域
|
||
</span>
|
||
</div>
|
||
<div class="need-housing-location"
|
||
v-if="Array.isArray(housingInfo['data'] && housingInfo['data'].info.location)">
|
||
<div class="dis-f al-item" :class="{ 'mg-t-15': i != 0 }"
|
||
v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.location" :key="i">
|
||
<span>
|
||
{{
|
||
location && location[item.substring(0, 1)]
|
||
}}
|
||
</span>
|
||
<div class="icon dis-f jus-x al-item">
|
||
<img src="../assets/img/detail/moreAllow.svg" class="icon-img" alt="">
|
||
</div>
|
||
<div class="text-box">
|
||
{{
|
||
item.length == 1 ? '不限' : location && location[item]
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="need-housing-location"
|
||
v-if="!Array.isArray(housingInfo['data'] && housingInfo['data'].info.location)">
|
||
<div class="dis-f al-item" :class="{ 'mg-t-15': i != 0 }">
|
||
<span>
|
||
{{
|
||
location && location[housingInfo['data'] &&
|
||
housingInfo['data']['info'].location.substring(0, 1)]
|
||
}}
|
||
</span>
|
||
<div class="icon dis-f jus-x al-item">
|
||
<img src="../assets/img/detail/moreAllow.svg" class="icon-img" alt="">
|
||
</div>
|
||
<div class="text-box">
|
||
{{
|
||
housingInfo['data'] && housingInfo['data']['info'].location.length == 1 ? '不限' :
|
||
location && location[housingInfo['data'] && housingInfo['data']['info'].location]
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
|
||
<div class="map-box" style="margin-top:45px;"
|
||
v-if="pageType != 3 && housingInfo['data'] && housingInfo['data'].info.location">
|
||
<div class="dis-f al-item title-box">
|
||
<img src="../assets/img/detail/mapIcon.png" class="img" alt="">
|
||
<span class="title">{{
|
||
location && location[housingInfo['data'] &&
|
||
housingInfo['data']['info'].location.substring(0, 1)]
|
||
}} >
|
||
{{
|
||
location && location[housingInfo['data'] && housingInfo['data']['info'].location]
|
||
}}</span>
|
||
</div>
|
||
<div class="dis-f jus-x" style="margin-top:15px;"
|
||
v-if="housingInfo['data'] && housingInfo['data'].info.latitude">
|
||
<div>
|
||
<mapInfo :latlng="{
|
||
longitude: housingInfo['data'].info.longitude * 1,
|
||
latitude: housingInfo['data'].info.latitude * 1
|
||
}" :name="housingInfo['data'].info.address"></mapInfo>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dis-f jus-x pos-r"
|
||
v-if="distanceList[0] && distanceList[0].name && pageType != 3 && distanceList.length > 1">
|
||
<div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
|
||
:style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
|
||
<div class="top-box"></div>
|
||
<div class="title-box dis-f al-item jus-x">
|
||
<span class="title">房源距离院校</span>
|
||
<img src="../assets/img/detail/close.png" class="close-icon"
|
||
@click="showDistance = false" alt="">
|
||
</div>
|
||
<el-scrollbar v-if="distanceList.length > 0" height="500px">
|
||
<div class="distance-info-data dis-f">
|
||
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
|
||
:key="index" :class="{ 'mg-t-50': index > 0 }">
|
||
<div class="icon-box dis-f al-item jus-x"
|
||
:class="{ 'home-icon': item && item.address }">
|
||
<div class="line" v-show="index > 0"></div>
|
||
<img src="../assets/img/detail/school.png" class="icon"
|
||
v-show="item && !item.address" alt="">
|
||
<img src="../assets/img/detail/home.png" class="icon"
|
||
v-show="item && item.address" alt="">
|
||
</div>
|
||
<div :style="{ 'width': index > 0 ? '200px' : '500px' }">
|
||
{{ item && item.name }}
|
||
</div>
|
||
<div class="dis-f" style="flex-wrap: wrap;width:480px" v-if="index != 0">
|
||
<div v-for="(items, i) in item && item.point" :key="i">
|
||
<span class="address-info">
|
||
{{ items.title }}
|
||
</span>
|
||
<span v-html="setDistanceList(items && `${items.distance}`)">
|
||
</span>
|
||
<!-- <span class="distance-text">
|
||
1.1公里
|
||
</span> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="distance-box-s">
|
||
|
||
</div> -->
|
||
</el-scrollbar>
|
||
</div>
|
||
<div class="distance-box dis-f jus-bet">
|
||
<div class="dis-f al-item" style="position:relative;" @click="setShowDistance">
|
||
<!-- <img src="../assets/img/detail/line.svg" class="line-img" alt=""> -->
|
||
<div class="dis-f al-item s-w-100" style="position:absolute;">
|
||
<div class="line-school-box dis-f al-item s-w-100"
|
||
style="justify-content:space-around;">
|
||
<div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id"
|
||
v-show="i < 9 && item.id">
|
||
<div :class="{ 'far-s': item && item.recently_distance > 4 }"
|
||
v-if="item && !item.address" class="text-c">
|
||
{{ item && item.recently_distance }}km
|
||
</div>
|
||
<div class="dis-f jus-x" v-if="item && !item.address">
|
||
<img src="../assets/img/detail/markIcon.svg"
|
||
v-if="item && item.recently_distance <= 4" class="marker-icon"
|
||
alt="">
|
||
<img src="../assets/img/detail/markIconNot.svg"
|
||
v-if="item && item.recently_distance > 4" class="marker-icon"
|
||
alt="">
|
||
</div>
|
||
<div :class="{ 'far-s': item && item.recently_distance > 4 }" class="text-c"
|
||
v-if="item && !item.address">{{
|
||
item && item.alias }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="line-img"></div>
|
||
</div>
|
||
<div class="info-btn-bg" @click="setShowDistance">
|
||
<div class="info-btn-s dis-f al-item">
|
||
详情
|
||
<img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="">
|
||
</div>
|
||
<img src="../assets/img/detail/infoBtnBg.svg" class="info-btn-bg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="map-box">
|
||
<div class="dis-f al-item title-box">
|
||
<img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt="">
|
||
<span class="title">更多介绍</span>
|
||
</div>
|
||
<div class="introduce-text"
|
||
v-html="housingInfo['data'] && housingInfo['data'].info.introduction">
|
||
</div>
|
||
</div>
|
||
<div class="houseing-info-box dis-f al-item jus-bet">
|
||
<div class="dis-f al-item">
|
||
房源ID :  <span class="houseing-id" @click="clone(housingInfo['data'] &&
|
||
housingInfo['data'].info.id)">{{ housingInfo['data'] &&
|
||
housingInfo['data'].info.id }}</span>
|
||
<span class="browse-box">
|
||
浏览 :<span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view
|
||
}}</span>
|
||
</span>
|
||
</div>
|
||
<div class="houseing-info-box-s"></div>
|
||
<div class="dis-f al-item">
|
||
<span>
|
||
收藏 :  <span class="text">
|
||
{{ housingInfo['data'] && housingInfo['data'].info.count_fav }}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div class="houseing-info-box-s"></div>
|
||
<div class="dis-f al-item">
|
||
<span>
|
||
发布 :  <span class="text">
|
||
{{ housingInfo['data'] && housingInfo['data'].info.timestamp }}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div class="houseing-info-box-s"></div>
|
||
<div class="dis-f al-item" style="border-right:0px">
|
||
<span>
|
||
更新 :  <span class="text">
|
||
{{ housingInfo['data'] && housingInfo['data'].info.updatetime }}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="statement-box">
|
||
<div class="title">
|
||
免责声明
|
||
</div>
|
||
<div class="mg-t-15 line-h-30">
|
||
发布者对房源信息的真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。
|
||
<div>
|
||
如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
|
||
<el-popover placement="bottom" trigger="hover">
|
||
<div class="wx-qrcode-s">
|
||
<img :src="concatInfo.data && concatInfo.data.wechatqrcode"
|
||
style="width:130px;height:130px" alt="">
|
||
</div>
|
||
<template #reference>
|
||
<span class="text-line line-h-30" style="border-color: #fff;"
|
||
@click="clone(concatInfo.data && concatInfo.data.wechat)">{{
|
||
concatInfo.data && concatInfo.data.wechat }}</span>
|
||
</template>
|
||
</el-popover>
|
||
<!-- <el-dropdown style="border-color:#fff;">
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item>
|
||
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown> -->
|
||
），我们会及时处理。谢谢！
|
||
</div>
|
||
</div>
|
||
<div class="mg-t-30">
|
||
公寓/酒店/中介房源推广合作请联系：<span class="text-line" @click="clone('ad@gter.net')">ad@gter.net</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="right-tool-box">
|
||
<div class="dis-f jus-x">
|
||
<img :src="housingInfo['data'] && housingInfo['data'].info.avatar" class="user-img" alt="">
|
||
</div>
|
||
<div class="user-name">
|
||
{{ housingInfo['data'] && housingInfo['data'].info.author }}
|
||
</div>
|
||
<div class="dis-f jus-x"
|
||
v-if="pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1">
|
||
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" alt="">
|
||
</div>
|
||
<div class="dis-f jus-x"
|
||
v-if="pageType != 2 || (pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary != 1)">
|
||
<div class="user-type">
|
||
{{
|
||
indexData['data'] &&
|
||
indexData['data']['config'] &&
|
||
indexData['data']['config']['intermediary'][
|
||
housingInfo['data'] &&
|
||
housingInfo['data'].info.intermediary]
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="dis-f al-item jus-x time-box">
|
||
<img src="../assets/img/detail/timeIcon.svg" class="icon" alt="">
|
||
<span>
|
||
{{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
|
||
}}更新 </span>
|
||
</div>
|
||
<div v-if="checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)">
|
||
<div class="dis-f al-item jus-x time-box" v-if="housingInfo['data'] &&
|
||
housingInfo['data'].intermediarylistingcount > 0 &&
|
||
housingInfo['data']['info']['intermediary'] == 1 &&
|
||
housingInfo['data'].isintermediary == 1">
|
||
<img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
|
||
<span>房源 x{{ housingInfo['data'] && housingInfo['data'].intermediarylistingcount
|
||
}}</span>
|
||
</div>
|
||
<div class="dis-f al-item jus-x time-box"
|
||
v-if="housingInfo['data'] && housingInfo['data'].verifiedlistingcount">
|
||
<img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
|
||
<div class="dis-f al-item">认证房源 x {{ housingInfo['data'] &&
|
||
housingInfo['data'].verifiedlistingcount }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="intermediary-info-box" v-if="housingInfo['data'] && housingInfo['data'].contacts">
|
||
<div v-if="contacts['data'].proxynumber">
|
||
<span>
|
||
代理人牌照号：
|
||
</span>
|
||
<span>
|
||
{{ contacts['data'].proxynumber }}
|
||
</span>
|
||
</div>
|
||
<div class="mg-t-10" v-if="contacts['data'].companyname">
|
||
<span>
|
||
代理人牌照号：
|
||
</span>
|
||
<span>
|
||
{{ contacts['data'].companyname }}
|
||
</span>
|
||
</div>
|
||
<div class="mg-t-10" v-if="contacts['data'].companyaddress">
|
||
<span>
|
||
公司地址：
|
||
</span>
|
||
<span>
|
||
{{ contacts['data'].companyaddress }}
|
||
</span>
|
||
</div>
|
||
<div class="mg-t-10" v-if="contacts['data'].companylicensenumber">
|
||
<span>
|
||
公司牌照号：
|
||
</span>
|
||
<span>
|
||
{{ contacts['data'].companylicensenumber }}
|
||
</span>
|
||
</div>
|
||
<div class="dis-f jus-x" v-if="contacts['data'].businesscard">
|
||
<div class="business-card-btn dis-f jus-x al-item" @click="showBusinessCard = true">
|
||
<img src="../assets/img/detail/businessCard.png" class="logo" alt="">
|
||
查看名片
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dis-f jus-x ">
|
||
<div class="contact-btn" @click="getConcatData">
|
||
联系方式
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-affix position="top" :offset="0" @change="changeConcatType">
|
||
</el-affix>
|
||
<phoneqrcode class="mg-t-20" type="housing"
|
||
:qrcode="housingInfo['data'] && housingInfo['data'].qrcode">
|
||
</phoneqrcode>
|
||
<groupqrcode></groupqrcode>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 中介名片弹窗 -->
|
||
<div class="dis-f jus-x al-item business-card-img-pop" v-show="showBusinessCard">
|
||
<img src="../assets/img/detail/imageClose.svg" @click="showBusinessCard = false" class="close-img" alt="">
|
||
<img :src="contacts['data'].businesscard && contacts['data'].businesscard[0].image" class="img" alt="">
|
||
</div>
|
||
<!-- 推荐 -->
|
||
<div class="dis-f jus-x" v-if="pageType != 3 && (recommendListData.length > 0 || publisherList.length > 0)">
|
||
<div class="body-maxWidth housing-title" style="margin-top:50px;">
|
||
{{ pageType == 2 && housingInfo['data'].isintermediary ? `发布者的其他房源（${publisherList.length}）` :
|
||
pageType == 1 && housingInfo['data'] && housingInfo['data']['info'].verified ?
|
||
`发布者的其他认证房源（${publisherList.length}）` : '附近房源' }}
|
||
</div>
|
||
</div>
|
||
<div class="dis-f jus-x al-item" style="position: relative;" v-if="pageType != 3">
|
||
<div class="body-maxWidth" v-show="recommendListData.length > 0">
|
||
<div ref="gridContainer"
|
||
style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
|
||
<indexWaterfallBox v-for="(items, i) in recommendListData" :data="items" :key="items.id">
|
||
</indexWaterfallBox>
|
||
</div>
|
||
</div>
|
||
<div class="body-maxWidth" v-if="publisherList.length > 0">
|
||
<div style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
|
||
<biserialItem v-for="(item, i) in publisherList" :detailShow="true" :key="i" :item="item">
|
||
</biserialItem>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dis-f jus-x bottom-tps"
|
||
v-if="(pageType === 1 && recommendListData.length > 0) || (pageType === 2 && recommendListData.length > 0 && housingInfo['data'] && housingInfo['data'].isintermediary)">
|
||
- {{ loadText }} -
|
||
</div>
|
||
<footerTool class="mg-t-60"></footerTool>
|
||
</div>
|
||
<div class="pop-mask" v-show="showConcat">
|
||
<div class="pop-box">
|
||
<!-- 多种信息 -->
|
||
<!-- third-concat -->
|
||
<div class="pop-big-box" v-show="concatData.data && concatData.data.count > 1"
|
||
:class="{ 'third-concat': concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3 }">
|
||
<div class="pop-info-box dis-f jus-x al-item"
|
||
:class="{ 'third-concat': concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3 }">
|
||
<div class="pop-big-bg dis-f jus-x al-item"
|
||
:class="{ 'third-concat': concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3 }">
|
||
<div class="user-liner-box dis-f al-item"
|
||
:class="{ 'jus-bet': concatData.data && concatData.data.count > 2 }">
|
||
<!-- class='s-w-100' -->
|
||
<div class="s-w-100">
|
||
<div class="liner-title"
|
||
:class="{ 'mg-b-50': concatData.data && concatData.data.count == 2 && concatData.data.wechatdata.url }">
|
||
联系方式
|
||
</div>
|
||
<div class="dis-f jus-bet s-w-100">
|
||
<div
|
||
v-if="concatData.data && (concatData.data.count > 2 || (!concatData.data.wechatdata.url && concatData.data.count == 2))">
|
||
<div class="mg-b-30"
|
||
v-if="concatData.data && concatData.data.wechat && concatData.data.count >= 2">
|
||
<div class="dis-f al-item">
|
||
<img src="../assets/img/detail/wxIcon.png" class="whatsapp-icon" alt="">
|
||
微信
|
||
</div>
|
||
<div class="dis-f al-item box-text mg-l-35">
|
||
<div class="num-text">
|
||
{{ concatData.data && concatData.data.wechat }}
|
||
</div>
|
||
<div class="clone-btn dis-f al-item jus-x mg-l-50"
|
||
@click.stop="clone(concatData.data.wechat)">
|
||
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
|
||
复制
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mg-b-30" v-if="concatData.data && concatData.data.count >= 2">
|
||
<div class="dis-f al-item">
|
||
<img src="../assets/img/detail/WhatsAppIcon.png" class="whatsapp-icon"
|
||
alt="">
|
||
WhatsApp
|
||
</div>
|
||
<div class="dis-f al-item box-text mg-l-35">
|
||
<div class="num-text">
|
||
{{ concatData.data && concatData.data.whatsapp }}
|
||
</div>
|
||
<div class="clone-btn dis-f al-item jus-x mg-l-50"
|
||
@click.stop="clone(concatData.data.whatsapp)">
|
||
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
|
||
复制
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mg-b-30"
|
||
v-if="concatData.data && concatData.data.tel && concatData.data.count >= 2">
|
||
<div class="dis-f al-item">
|
||
<img src="../assets/img/detail/phoneIcon.png" class="whatsapp-icon" alt="">
|
||
电话号码
|
||
</div>
|
||
<div class="dis-f al-item box-text mg-l-35">
|
||
<div class="num-text">
|
||
{{ concatData.data && concatData.data.tel }}
|
||
</div>
|
||
<div class="clone-btn dis-f al-item jus-x mg-l-50"
|
||
@click.stop="clone(concatData.data.tel)">
|
||
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
|
||
复制
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="concatData.data && concatData.data.count > 2 && concatData.data.wechatdata.url">
|
||
<div class="wx-qrcode-s dis-f jus-x al-item">
|
||
<img :src="concatData.data && concatData.data.wechatdata.url" class="user-img"
|
||
alt="">
|
||
</div>
|
||
<div style="margin-top:15px;font-size:14px;text-align: center;">
|
||
<div>
|
||
微信扫码添加好友
|
||
</div>
|
||
<div style="margin-top:5px;font-size:14px;">
|
||
备注：寄托租房
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="round dis-f jus-x al-item"
|
||
:class="{ 'mg-t-20': concatData.data && concatData.data.count > 2 && !concatData.data.wechatdata.url }"
|
||
v-if="concatData.data && concatData.data.count >= 2 && !concatData.data.wechatdata.url">
|
||
<div class="deepen dis-f jus-x al-item">
|
||
<div class="center-box dis-f jus-x al-item">
|
||
<div class="center-s dis-f jus-x al-item">
|
||
<div class="drop">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dis-f al-item whatsapp-wx-box s-w-100 jus-sp"
|
||
v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid !== 0 && concatData.data.wechatdata.url">
|
||
<div>
|
||
<div>
|
||
<div v-if="concatData.data.whatsapp">
|
||
WhatsApp
|
||
</div>
|
||
<div v-if="concatData.data.tel">
|
||
电话
|
||
</div>
|
||
<div v-if="concatData.data.wechat">
|
||
微信
|
||
</div>
|
||
</div>
|
||
<div class="text-s">
|
||
{{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat
|
||
||
|
||
'' }}
|
||
</div>
|
||
<div class="dis-f jus-x al-item mg-t-60">
|
||
<div class="clone-btn dis-f al-item jus-x"
|
||
@click.stop="clone(concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || '')">
|
||
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
|
||
复制
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="liner" v-if="concatData.data && concatData.data.wechatdata.url"></div>
|
||
<div v-if="concatData.data && concatData.data.wechatdata.url">
|
||
<div class="wx-qrcode-s dis-f jus-x al-item">
|
||
<img :src="concatData.data && concatData.data.wechatdata.url" class="user-img"
|
||
alt="">
|
||
</div>
|
||
<div style="margin-top:15px;font-size:14px;text-align: center;">
|
||
<div>
|
||
微信扫码添加好友
|
||
</div>
|
||
<div style="margin-top:5px;font-size:14px;">
|
||
备注：寄托租房
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="round dis-f jus-x al-item"
|
||
v-if="concatData.data && !concatData.data.wechatdata.url">
|
||
<div class="deepen dis-f jus-x al-item">
|
||
<div class="center-box dis-f jus-x al-item">
|
||
<div class="center-s dis-f jus-x al-item">
|
||
<div class="drop">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img src="../assets/img/detail/threePopBigBg.svg" class="pop-bg third-bg" style="width:700px;"
|
||
alt=""
|
||
v-if="concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3">
|
||
<img src="../assets/img/detail/threePopbigMap.svg" style="width:700px;"
|
||
v-if="concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3"
|
||
class="map third-bg" alt="">
|
||
<img src="../assets/img/detail/popBigBg.svg"
|
||
v-if="concatData.data && concatData.data.count === 3 ? concatData.data.wechatdata.url : concatData.data && concatData.data.count < 3"
|
||
class="pop-bg third-bg" alt="">
|
||
<img src="../assets/img/detail/popBigBgMap.svg"
|
||
v-if="concatData.data && concatData.data.count === 3 ? concatData.data.wechatdata.url : concatData.data && concatData.data.count < 3"
|
||
class="map third-bg" alt="">
|
||
</div>
|
||
</div>
|
||
<img src="../assets/img/detail/bigPopBg.svg"
|
||
v-if="concatData.data && concatData.data.count === 3 ? concatData.data.wechatdata.url : concatData.data && concatData.data.count < 3"
|
||
class="pop-big-bg" alt="">
|
||
<img src="../assets/img/detail/threeConcatbgImg.svg"
|
||
v-if="concatData.data && concatData.data.count === 3 ? !concatData.data.wechatdata.url : concatData.data && concatData.data.count > 3"
|
||
class="third-concat" alt="">
|
||
<img src="../assets/img/detail/close.png" class="close-img" @click="showConcat = false" alt="">
|
||
</div>
|
||
<!-- 一种信息 -->
|
||
<div class="pop" v-show="concatData.data && concatData.data.count === 1">
|
||
<div class="pop-bg-s-box dis-f jus-x al-item">
|
||
<div class="pop-bg-s">
|
||
<div class="pos-a pop-bg-s" style="z-index:666;">
|
||
<div class="title s-w-100">
|
||
联系方式
|
||
</div>
|
||
<div class="s-w-100 mg-t-35" v-if="concatData.data && concatData.data.wechatdata.aid != 0">
|
||
<div class="wx-qrcode s-w-100 dis-f al-item jus-x">
|
||
<img :src="concatData.data && concatData.data.wechatdata.url" class="img" alt="">
|
||
</div>
|
||
<div style="margin-top:15px">
|
||
<div>
|
||
微信扫码添加好友
|
||
</div>
|
||
<div style="margin-top:5px">
|
||
备注：寄托租房
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s-w-100"
|
||
v-if="concatData.data && (concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat)">
|
||
<div class="whatsapp-title" v-if="concatData.data.whatsapp">
|
||
WhatsApp
|
||
</div>
|
||
<div class="whatsapp-title" v-if="concatData.data.tel">
|
||
电话
|
||
</div>
|
||
<div class="whatsapp-title" v-if="concatData.data.wechat">
|
||
微信
|
||
</div>
|
||
<div class="whatsapp-text">
|
||
{{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || ''
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="s-w-100 dis-f jus-x al-item mg-t-35">
|
||
<div class="clone-btn dis-f al-item jus-x"
|
||
v-if="concatData.data && (concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat)"
|
||
@click.stop="clone(concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat)">
|
||
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
|
||
复制
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img src="../assets/img/detail/popSBg.svg" class="pop-bg-s pos-a" alt="">
|
||
<img src="../assets/img/detail/popSbgMap.svg" class="pop-bg-s" alt="">
|
||
</div>
|
||
</div>
|
||
<img src="../assets/img/detail/close.png" @click="showConcat = false" class="close-img" alt="">
|
||
<img src="../assets/img/detail/popBg.svg" class="img" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<watchImage :show="imageShow" :index="imageIndex" :close="cloaseImageShow" :list="imgList"></watchImage>
|
||
<back-to-top></back-to-top>
|
||
<!-- 举报 -->
|
||
<report :id="uniqid"></report>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, onMounted, ref, nextTick, onBeforeUnmount, watch } from 'vue'
|
||
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
|
||
import api from "../utils/api";
|
||
import footerTool from '@/components/footer/footer.vue'
|
||
import watchImage from '../components/detail/imageWatch.vue'
|
||
import breadcrumb from '../components/detail/breadcrumb.vue'
|
||
import mapInfo from '../components/public/viewMap.vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
|
||
import Masonry from 'masonry-layout';
|
||
import transmitBtn from '@/components/public/transmitBtn.vue'
|
||
import biserialItem from '../components/biserialListItem/biserialListItem.vue'
|
||
import backToTop from '@/components/public/backToTop.vue'
|
||
import phoneqrcode from '@/components/public/phoneQRcode.vue';
|
||
import groupqrcode from '@/components/public/group-QRcode.vue';
|
||
import report from '@/components/public/report.vue'
|
||
|
||
import store from '@/store';
|
||
|
||
//页面类型
|
||
let pageType = ref('')
|
||
|
||
//加载状态
|
||
let loadMore = ref(true)
|
||
//推荐列表页数
|
||
let pages = ref(1)
|
||
let uniqid = ref('')
|
||
|
||
//显示中介名片
|
||
let showBusinessCard = ref(false)
|
||
//查看图片
|
||
let imageShow = ref(false)
|
||
let imageIndex = ref(0)
|
||
let cloaseImageShow = () => {
|
||
imageShow.value = false
|
||
}
|
||
|
||
//图片组实例
|
||
let imageList = ref(null)
|
||
//图片数组
|
||
let imgList = ref([])
|
||
|
||
//图片距离
|
||
let imageLIstLeft = ref([])
|
||
|
||
let imgListTab = ref(0)
|
||
//计时器
|
||
let interval = ''
|
||
let clientWidth = ref(null)
|
||
let scrollWidth = ref(null)
|
||
//点击方向按钮
|
||
let moveImageList = (type) => {
|
||
if (type === 'right' && imgScrollBottom()) return
|
||
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIstLeft.value.length - 1 && type === 'right')) return
|
||
type === 'left' ? imgListTab.value-- : imgListTab.value++
|
||
setOffsetWidth(imageLIstLeft.value[imgListTab.value], type)
|
||
}
|
||
//设置滚动
|
||
let setOffsetWidth = (num, type) => {
|
||
let scroll = 0
|
||
interval = setInterval(() => {
|
||
if (!imageList.value) {
|
||
clearInterval(interval)
|
||
return
|
||
}
|
||
scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
|
||
if ((type === 'left' ? num >= scroll : num <= scroll) || scroll + clientWidth.value >= scrollWidth.value) {
|
||
clearInterval(interval)
|
||
}
|
||
})
|
||
}
|
||
|
||
//判断是否触底
|
||
let imgScrollBottom = () => {
|
||
let clientWidth = imageList.value.clientWidth
|
||
let scrollWidth = imageList.value.scrollWidth
|
||
return imageLIstLeft.value[imgListTab.value] + clientWidth >= scrollWidth
|
||
}
|
||
|
||
let imgData = ref(null)
|
||
//获取图片宽度
|
||
let setImageWidth = (num) => {
|
||
imageLIstLeft.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20
|
||
if (imageLIstLeft.value.length === imgList.value.length) {
|
||
clientWidth.value = imageList.value.clientWidth
|
||
scrollWidth.value = imageList.value.scrollWidth
|
||
}
|
||
}
|
||
|
||
//学校地址数据
|
||
let distanceList = ref([])
|
||
|
||
//地址数字高亮
|
||
let setDistanceList = (text = '') => {
|
||
if (!text) return text
|
||
let oRegExp = new RegExp(/\d+(\.\d+)?/, "g");
|
||
text = text.replace(/\d+(\.\d+)?/g, `<span style="font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;font-style: normal;
|
||
font-size: 14px;
|
||
color: #62B1FF;
|
||
margin-left: 5px;">${text.match(oRegExp) ? text.match(oRegExp)[0] : ''}公里</span>`)
|
||
return text
|
||
}
|
||
|
||
//显示详情
|
||
let showDistance = ref(false)
|
||
//学校地址详情
|
||
let setShowDistance = () => {
|
||
showDistance.value = !showDistance.value
|
||
}
|
||
|
||
let titleType = ref(false)
|
||
//标题
|
||
let changeTitleType = () => {
|
||
titleType.value = !titleType.value
|
||
}
|
||
|
||
let concatType = ref(false)
|
||
//联系方式顶部显示
|
||
let changeConcatType = () => {
|
||
concatType.value = !concatType.value
|
||
}
|
||
|
||
//复制
|
||
let clone = (text) => {
|
||
const textareaEle = document.createElement("textarea");
|
||
document.body.appendChild(textareaEle);
|
||
// 2. 将需要复制的文本传入输入框, 并调用 select 方法, 选中输入框中文本
|
||
textareaEle.value = text;
|
||
textareaEle.select();
|
||
textareaEle.readOnly = 'readOnly';
|
||
// 3. 调用复制选中文本的方法
|
||
document.execCommand('copy');
|
||
// 4. 销毁输入框
|
||
document.body.removeChild(textareaEle);
|
||
ElMessage({
|
||
message: '复制成功',
|
||
center: true,
|
||
offset: 320,
|
||
duration: 1000,
|
||
customClass: 'message-info'
|
||
})
|
||
}
|
||
|
||
//显示联系方式
|
||
let showConcat = ref(false)
|
||
|
||
//数据包
|
||
let indexData = reactive({})
|
||
//房源详情
|
||
let housingInfo = reactive({})
|
||
//联系
|
||
let concatInfo = reactive({})
|
||
|
||
let setHousingArr = () => {
|
||
// let arr = []
|
||
// arr = housingInfo['data'].info.video ? arr.concat(housingInfo['data'] && housingInfo['data'].info.video) : []
|
||
// arr = housingInfo['data'].info.picturegroup ? arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup) : []
|
||
// imgList.value = imgList.value.concat(arr)
|
||
|
||
if (housingInfo['data'].info.video) {
|
||
housingInfo['data'].info.video.forEach(element => {
|
||
element['type'] = 'videos'
|
||
})
|
||
|
||
imgList.value = [...imgList.value, ...housingInfo['data'].info.video]
|
||
}
|
||
if (housingInfo['data'].info.picturegroup) {
|
||
housingInfo['data'].info.picturegroup.forEach(element => {
|
||
element['type'] = 'attachment'
|
||
})
|
||
imgList.value = [...imgList.value, ...housingInfo['data'].info.picturegroup]
|
||
}
|
||
|
||
|
||
}
|
||
|
||
let location = store.state.indexData.config && store.state.indexData.config.location
|
||
//设置顶部导航
|
||
// intermediary 1中介 2-5个人 6求房源
|
||
let setNavigation = () => {
|
||
let type = store.state.indexData.config && store.state.indexData.config.type
|
||
indexData['data'] = store.state.indexData
|
||
if (!location) return
|
||
if (pageType.value == 1 || pageType.value == 2) {
|
||
// location=3.8,3.13&areaItem=3
|
||
store.state.routeList['secondaryIndex'] = {
|
||
path: pageType.value === 2 ? '/intermediaryHousing' :
|
||
pageType.value === 3 ? '/needHousing' : '/personHousing',
|
||
title: pageType.value === 2 ? '中介房源' :
|
||
pageType.value === 3 ? '求房源' : '个人房源'
|
||
}
|
||
store.state.routeList['thirdIndex'] = {
|
||
path: `${store.state.routeList['secondaryIndex'].path}`,
|
||
query: {
|
||
location: '',
|
||
areaItem: housingInfo['data']['info'].location.substring(0, 1),
|
||
types: housingInfo['data']['info'].type.substring(0, 1)
|
||
},
|
||
title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源`
|
||
}
|
||
if (housingInfo['data']['info'].location.length > 0)
|
||
store.state.routeList['fourthIndex'] = {
|
||
query: {
|
||
location: housingInfo['data']['info'].location.substring(0, 3),
|
||
areaItem: housingInfo['data']['info'].location.substring(0, 1),
|
||
types: housingInfo['data']['info'].type
|
||
},
|
||
path: `${store.state.routeList['secondaryIndex'].path}`,
|
||
|
||
title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
|
||
}
|
||
} else {
|
||
store.state.routeList = {
|
||
index: {
|
||
path: '/',
|
||
title: '港校租房'
|
||
},
|
||
secondaryIndex: {
|
||
path: '/needHousing',
|
||
title: '求房源'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//中介数据
|
||
let contacts = reactive({
|
||
data: {
|
||
}
|
||
})
|
||
|
||
//获取房源详情
|
||
let getHousingInfo = () => {
|
||
api.details({
|
||
uniqid: uniqid.value,
|
||
uid: store.state.user.uid
|
||
}).then(res => {
|
||
// console.log(res)
|
||
if (res.code === 200) {
|
||
housingInfo['data'] = res.data
|
||
pageType.value = housingInfo['data']['info'].intermediary === 1 ? 2 : housingInfo['data']['info'].intermediary === 6 ? 3 : 1 //1个人 2中介 3求房源
|
||
setHousingArr()
|
||
setNavigation()
|
||
distanceList.value = housingInfo['data']['info'].pointData || []
|
||
distanceList.value.unshift({
|
||
address: true,
|
||
name: housingInfo['data']['info'].address,
|
||
})
|
||
concatInfo['data'] = store.state.indexData.wechat
|
||
if (res.data.contacts) contacts['data'] = res.data.contacts
|
||
|
||
if ((pageType.value == 2 && housingInfo['data'].isintermediary) || (pageType.value == 1 && housingInfo['data']['info'].verified)) {
|
||
getPublisherList()
|
||
} else if (pageType.value != 3) {
|
||
recommendList()
|
||
} else {
|
||
loadMore.value = false
|
||
}
|
||
|
||
} else {
|
||
ElMessage({
|
||
message: res.message
|
||
})
|
||
loadMore.value = false
|
||
}
|
||
})
|
||
}
|
||
|
||
//收藏
|
||
let setOperation = () => {
|
||
api.operation({
|
||
token: housingInfo['data'].token
|
||
}).then(res => {
|
||
// console.log(res)
|
||
if (res.code === 200) {
|
||
housingInfo['data'].info.count_fav = res.data.count
|
||
housingInfo['data'].isfav = res.data.status
|
||
} else {
|
||
ElMessage({
|
||
message: res.message
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
//获取联系方式
|
||
let concatData = reactive({})
|
||
let getConcatData = () => {
|
||
if (concatData['data']) {
|
||
showConcat.value = true
|
||
return
|
||
}
|
||
api.contactData({
|
||
token: housingInfo['data'].token
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
showConcat.value = true
|
||
concatData['data'] = res.data
|
||
let dataCount = 0
|
||
Object.keys(concatData['data']).map(res => {
|
||
if ((concatData['data'][res] && res != 'wechatdata') || (res === 'wechatdata' && concatData['data'][res].aid != 0)) {
|
||
dataCount++
|
||
}
|
||
})
|
||
concatData['data']['count'] = dataCount
|
||
}
|
||
})
|
||
}
|
||
|
||
//判断更新时间
|
||
let checkUpdateTime = (Time) => {
|
||
const now = new Date();
|
||
let time = new Date(Time)
|
||
const diff = now - time;
|
||
const seconds = Math.floor(diff / 1000);
|
||
const minutes = Math.floor(seconds / 60);
|
||
const hours = Math.floor(minutes / 60);
|
||
const days = Math.floor(hours / 24);
|
||
if (seconds < 60) return `${seconds}秒前`;
|
||
else if (minutes < 60) return `${minutes}分钟前`;
|
||
else if (hours < 24) return `${hours}小时前`;
|
||
else if (days < 7) return `${days}天前`;
|
||
else return Time;
|
||
}
|
||
|
||
//监听滚动条
|
||
const onPageSrcoll = (e) => {
|
||
let body = document.documentElement ? document.documentElement : document.body ?
|
||
document.body :
|
||
document.querySelector('.element');
|
||
let scrollTop = body.scrollTop
|
||
let clientHeight = body.clientHeight
|
||
let offsetHeight = body.offsetHeight
|
||
if (scrollTop + clientHeight >= offsetHeight - 200) {
|
||
if (loadMore.value) {
|
||
loadMore.value = false
|
||
pages.value += 1
|
||
if (housingInfo['data'] && housingInfo['data'].isintermediary) {
|
||
getPublisherList()
|
||
} else {
|
||
recommendList()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//瀑布流列表
|
||
let recommendListData = ref([])
|
||
//广告参数
|
||
let pagevalue = ref(0)
|
||
//加载提示
|
||
let loadText = ref('下拉加载更多')
|
||
//获取瀑布流数据
|
||
let recommendList = () => {
|
||
loadText.value = '加载中.....'
|
||
api.recommendList({
|
||
page: pages.value,
|
||
limit: 30,
|
||
type: 'nearby',
|
||
pagevalue: pagevalue.value,
|
||
token: housingInfo['data'].token
|
||
}).then(res => {
|
||
// console.log(res)
|
||
if (res.code === 200) {
|
||
if (res.data.data && res.data.data.length >= 30) {
|
||
loadMore.value = true
|
||
loadText.value = '下拉加载更多'
|
||
} else {
|
||
loadMore.value = false
|
||
loadText.value = '到底了'
|
||
}
|
||
if (res.data.length === 0) return
|
||
if (res.data.pagevalue) {
|
||
recommendListData.value = recommendListData.value.concat(res.data.data)
|
||
pagevalue.value = res.data.pagevalue
|
||
}
|
||
nextTick(() => {
|
||
masonryInstance.reloadItems();
|
||
masonryInstance.layout();
|
||
|
||
setTimeout(() => {
|
||
masonryInstance.reloadItems();
|
||
masonryInstance.layout();
|
||
}, 3000)
|
||
})
|
||
} else {
|
||
ElMessage({
|
||
message: res.message,
|
||
center: true,
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
//发布者其他房源
|
||
let publisherList = ref([])
|
||
//获取发布者其他房源
|
||
let getPublisherList = () => {
|
||
api.publisherList({
|
||
page: pages.value,
|
||
limit: 30,
|
||
token: housingInfo['data'].token
|
||
}).then(res => {
|
||
// console.log(res)
|
||
if (res.code === 200) {
|
||
if (res.data.length >= 30) {
|
||
loadMore.value = true
|
||
} else {
|
||
loadMore.value = false
|
||
loadText.value = '到底了'
|
||
}
|
||
publisherList.value = publisherList.value.concat(res.data)
|
||
} else {
|
||
ElMessage({
|
||
message: res.message,
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
//瀑布流模块
|
||
const gridContainer = ref(null);
|
||
let masonryInstance = null
|
||
|
||
let router = useRouter()
|
||
let route = useRoute()
|
||
|
||
watch(route, () => {
|
||
let { id } = router.currentRoute.value.query
|
||
uniqid.value = id
|
||
pageType.value = housingInfo['data']['info'].intermediary === 1 ? 2 : housingInfo['data']['info'].intermediary === 6 ? 3 : 1 //1个人 2中介 3求房源
|
||
publisherList.value = []
|
||
recommendListData.value = []
|
||
getHousingInfo()
|
||
})
|
||
|
||
onMounted(() => {
|
||
let { id } = router.currentRoute.value.query
|
||
uniqid.value = id
|
||
getHousingInfo()
|
||
masonryInstance = new Masonry(gridContainer.value, {
|
||
itemSelector: '.item',
|
||
gutter: 10
|
||
});
|
||
if (pageType.value != 3) {
|
||
window.addEventListener('scroll', onPageSrcoll);
|
||
document.body.scrollTop = 0
|
||
}
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener('scroll', onPageSrcoll);
|
||
})
|
||
|
||
</script>
|
||
<style scoped lang="less">
|
||
img {
|
||
object-fit: contain;
|
||
}
|
||
|
||
.dis-f {
|
||
display: flex;
|
||
}
|
||
|
||
.jus-x {
|
||
justify-content: center;
|
||
}
|
||
|
||
.jus-sp {
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.al-item {
|
||
align-items: center;
|
||
}
|
||
|
||
.pos-r {
|
||
position: relative;
|
||
}
|
||
|
||
.body-maxWidth {
|
||
width: 1200px;
|
||
min-width: 1200px;
|
||
}
|
||
|
||
.s-w-100 {
|
||
width: 100%;
|
||
}
|
||
|
||
.jus-bet {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.mg-t-20 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.text-line {
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.pos-a {
|
||
position: absolute;
|
||
}
|
||
|
||
.mg-t-60 {
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.housing-title {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 20px;
|
||
color: #333;
|
||
}
|
||
|
||
.bottom-tps {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #555555;
|
||
text-align: center;
|
||
padding: 30px 0;
|
||
}
|
||
|
||
.need-houing-type {
|
||
background-color: rgba(80, 227, 194, 1);
|
||
border: none;
|
||
border-radius: 6px;
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
padding: 0px 5px;
|
||
font-size: 14px;
|
||
margin-right: 10px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.clone-btn {
|
||
width: 100px;
|
||
height: 32px;
|
||
background: inherit;
|
||
background-color: rgba(97, 177, 252, 1);
|
||
border: none;
|
||
border-radius: 46px;
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
cursor: pointer;
|
||
|
||
.icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
.business-card-img-pop {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #4c4c4c;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1003;
|
||
|
||
.close-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.img {
|
||
width: 800px;
|
||
height: 800px;
|
||
}
|
||
}
|
||
|
||
.pop-box {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
z-index: 999;
|
||
left: 0;
|
||
top: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.third-concat {
|
||
height: 560px !important;
|
||
}
|
||
|
||
.third-bg {
|
||
height: 480px !important;
|
||
}
|
||
|
||
.pop-big-box {
|
||
width: 800px;
|
||
height: 460px;
|
||
background: -webkit-linear-gradient(55.7576382179894deg, rgba(255, 255, 255, 1) 33%, rgba(253, 223, 109, 1) 100%);
|
||
background: -moz-linear-gradient(34.2423617820106deg, rgba(255, 255, 255, 1) 33%, rgba(253, 223, 109, 1) 100%);
|
||
background: linear-gradient(34.2423617820106deg, rgba(255, 255, 255, 1) 33%, rgba(253, 223, 109, 1) 100%);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(230, 221, 185, 1);
|
||
border-radius: 0px;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
|
||
position: relative;
|
||
|
||
.pop-info-box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.pop-big-bg {
|
||
width: 700px;
|
||
height: 368px;
|
||
font-family: 'ArialMT', 'Arial', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 13px;
|
||
letter-spacing: normal;
|
||
color: #333333;
|
||
|
||
.mg-l-80 {
|
||
margin-left: 80px;
|
||
}
|
||
|
||
.round {
|
||
width: 180px;
|
||
height: 180px;
|
||
background: rgba(218, 246, 241, 0.5);
|
||
border-radius: 50%;
|
||
|
||
.deepen {
|
||
width: 130px;
|
||
height: 130px;
|
||
border-radius: 50%;
|
||
background: rgba(192, 239, 236, 0.4);
|
||
|
||
.center-box {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
background: rgba(155, 236, 220, 0.6);
|
||
|
||
.center-s {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
background: rgba(80, 227, 194, 0.7);
|
||
|
||
.drop {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: rgba(253, 223, 109, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-liner-box {
|
||
width: 700px;
|
||
height: 368px;
|
||
position: absolute;
|
||
z-index: 333;
|
||
padding: 0px 80px 0 45px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
|
||
.wx-qrcode-s {
|
||
width: 130px;
|
||
height: 130px;
|
||
border-radius: 8px;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
|
||
background: #fff;
|
||
|
||
.user-img {
|
||
width: 125px;
|
||
height: 125px;
|
||
}
|
||
}
|
||
|
||
.whatsapp-wx-box {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
|
||
.text-s {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 24px;
|
||
color: #000000;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.mg-t-60 {
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.liner {
|
||
width: 1px;
|
||
height: 190px;
|
||
border: 1px solid #e2e7ec;
|
||
margin: 0 30px 0 30px
|
||
}
|
||
}
|
||
|
||
.liner-title {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 24px;
|
||
color: #000000;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.mg-b-50 {
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.mg-b-30 {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.box-text {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
margin-top: 20px;
|
||
|
||
.num-text {
|
||
width: 180px;
|
||
word-wrap: break-word;
|
||
}
|
||
}
|
||
|
||
.mg-l-35 {
|
||
margin-left: 35px;
|
||
}
|
||
|
||
.mg-l-50 {
|
||
margin-left: 50px;
|
||
}
|
||
|
||
.whatsapp-box {
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.whatsapp-icon {
|
||
width: 25px;
|
||
height: 24px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.pop-bg {
|
||
width: 690px;
|
||
height: 358px;
|
||
position: absolute;
|
||
z-index: 222;
|
||
}
|
||
|
||
.map {
|
||
width: 700px;
|
||
height: 368px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.close-img {
|
||
width: 16px;
|
||
height: 16px;
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pop-bg-s-box {
|
||
width: 400px;
|
||
height: 400px;
|
||
position: absolute;
|
||
|
||
.pop-bg-s {
|
||
width: 320px;
|
||
height: 320px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
text-align: center;
|
||
color: #333;
|
||
font-size: 14px;
|
||
|
||
.whatsapp-title {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.whatsapp-text {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 24px;
|
||
color: #000000;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.wx-qrcode {
|
||
width: 146px;
|
||
height: 146px;
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
border-radius: 8px;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
margin: 0 auto;
|
||
|
||
.img {
|
||
width: 130px;
|
||
height: 130px;
|
||
}
|
||
}
|
||
|
||
.mg-t-35 {
|
||
margin-top: 35px;
|
||
}
|
||
|
||
.mg-t-30 {
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.title {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 20px;
|
||
color: #000000;
|
||
text-align: center;
|
||
margin-top: 25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.pop {
|
||
width: 400px;
|
||
height: 400px;
|
||
background: -webkit-linear-gradient(68.6007191374175deg, rgba(255, 255, 255, 1) 17%, rgba(253, 223, 109, 1) 100%);
|
||
background: -moz-linear-gradient(21.3992808625825deg, rgba(255, 255, 255, 1) 17%, rgba(253, 223, 109, 1) 100%);
|
||
background: linear-gradient(21.3992808625825deg, rgba(255, 255, 255, 1) 17%, rgba(253, 223, 109, 1) 100%);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(230, 221, 185, 1);
|
||
border-radius: 0px;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
|
||
position: relative;
|
||
|
||
.bg-img {
|
||
height: 400px;
|
||
width: 400px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-contact-btn {
|
||
width: 200px !important;
|
||
}
|
||
|
||
.contact-btn:hover {
|
||
background: -webkit-linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
|
||
background: -moz-linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
|
||
background: linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
|
||
}
|
||
|
||
.contact-btn {
|
||
width: 260px;
|
||
height: 48px;
|
||
background: -webkit-linear-gradient(0, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
|
||
background: -moz-linear-gradient(0, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
|
||
background: linear-gradient(0, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(204, 230, 255, 1);
|
||
border-radius: 46px;
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 17px;
|
||
color: #3B6C99;
|
||
text-align: center;
|
||
line-height: 48px;
|
||
margin-top: 35px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.top-bar-box {
|
||
width: 100%;
|
||
|
||
.line {
|
||
width: 1px;
|
||
height: 19px;
|
||
margin: 0 20px;
|
||
background: #ebebeb;
|
||
}
|
||
|
||
.authentication-housing {
|
||
width: 88px;
|
||
height: 16px;
|
||
}
|
||
|
||
.intermediary-logo {
|
||
width: 85px;
|
||
height: 20px;
|
||
}
|
||
|
||
.top-bar {
|
||
width: 1200px;
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
border-radius: 16px;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
font-size: 14px;
|
||
padding: 15px 35px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
|
||
.unit {
|
||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||
font-weight: 900;
|
||
color: #000000;
|
||
}
|
||
|
||
.rent {
|
||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||
font-weight: 900;
|
||
color: #F95D5D;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.icon {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.concat-btn-box {
|
||
width: 0px;
|
||
overflow: hidden;
|
||
transition: all 0.2s linear;
|
||
}
|
||
|
||
.concat-btn-show {
|
||
width: 210px;
|
||
}
|
||
|
||
.fav-btn {}
|
||
|
||
.fav-btn:hover .fav-img-f {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.fav-btn:hover .fav-img-t {
|
||
opacity: 0;
|
||
}
|
||
|
||
.tool-btn {
|
||
width: 199px;
|
||
height: 48px;
|
||
background: inherit;
|
||
background-color: rgba(246, 246, 246, 0);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
border-radius: 122px;
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
|
||
.fav-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
transition: all linear 0.2s;
|
||
}
|
||
|
||
.fav-img-f {
|
||
opacity: 0;
|
||
}
|
||
|
||
.fav-img-t {
|
||
opacity: 1;
|
||
}
|
||
|
||
.tool-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.right-tool-box {
|
||
width: 304px;
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
border-radius: 16px;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
font-size: 14px;
|
||
padding: 35px 25px;
|
||
|
||
.intermediary-info-box {
|
||
width: 100%;
|
||
background: inherit;
|
||
background-color: rgba(246, 246, 246, 0.603921568627451);
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 13px;
|
||
color: #7F7F7F;
|
||
padding: 20px 10px;
|
||
margin-top: 30px;
|
||
box-sizing: border-box;
|
||
line-height: 20px;
|
||
word-wrap: break-word;
|
||
|
||
.business-card-btn {
|
||
width: 100px;
|
||
height: 30px;
|
||
background: inherit;
|
||
background-color: rgba(246, 246, 246, 0);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(215, 215, 215, 1);
|
||
border-radius: 4px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #333;
|
||
cursor: pointer;
|
||
margin-top: 15px;
|
||
|
||
.logo {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
.mg-t-10 {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.intermediary-logo {
|
||
width: 85px;
|
||
height: 20px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.wx-title {
|
||
width: 201px;
|
||
height: 24px;
|
||
}
|
||
|
||
.crowd-text {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif !important;
|
||
font-weight: 400 !important;
|
||
color: #555555 !important;
|
||
}
|
||
|
||
.wx-qrcode-tps-box {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
margin-top: 30px;
|
||
|
||
.icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
.crowd-box {
|
||
width: 120px;
|
||
height: 120px;
|
||
margin-top: 30px;
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border: none;
|
||
border-radius: 15px;
|
||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||
|
||
.img {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
|
||
.name-text {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
color: #000000;
|
||
font-size: 14px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.wx-qrcode-box {
|
||
width: 120px;
|
||
height: 120px;
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border: none;
|
||
border-radius: 70px;
|
||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||
margin-top: 30px;
|
||
|
||
.wx-qrcode {
|
||
width: 103px;
|
||
height: 103px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.user-img {
|
||
width: 74px;
|
||
height: 74px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user-name {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
color: #333;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.user-type {
|
||
margin-top: 15px;
|
||
background: inherit;
|
||
background-color: rgba(98, 177, 255, 1);
|
||
border: none;
|
||
border-radius: 42px;
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 24px;
|
||
padding: 0px 6px;
|
||
}
|
||
|
||
.time-box {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #555555;
|
||
margin-top: 25px;
|
||
|
||
.icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-box {
|
||
width: 876px;
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
border-radius: 16px;
|
||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||
font-size: 14px;
|
||
padding: 30px 20px;
|
||
position: relative;
|
||
/* z-index: 333; */
|
||
|
||
.detail-price-box {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #555555;
|
||
line-height: 16px;
|
||
|
||
.rent {
|
||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||
font-weight: 900;
|
||
font-size: 28px;
|
||
color: #F95D5D;
|
||
margin: 0 5px;
|
||
line-height: 22px;
|
||
}
|
||
|
||
.unit {
|
||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||
font-weight: 900;
|
||
color: #000000;
|
||
line-height: 13px;
|
||
}
|
||
|
||
.line-h-17 {
|
||
line-height: 17px;
|
||
}
|
||
}
|
||
|
||
.detail-condition-box {
|
||
width: 816px;
|
||
height: 80px;
|
||
background: inherit;
|
||
background-color: rgba(246, 246, 246, 1);
|
||
border: none;
|
||
border-radius: 12px;
|
||
margin-top: 30px;
|
||
|
||
.condition-border {
|
||
border-right: 1px solid #ebebeb;
|
||
}
|
||
|
||
.condition {
|
||
padding: 15px 0;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #7F7F7F;
|
||
width: 272px;
|
||
|
||
.icon {
|
||
border: 6px solid #61b1fc;
|
||
border-top: 6px solid transparent;
|
||
border-right: 6px solid transparent;
|
||
border-bottom: 6px solid transparent;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.type-text {
|
||
margin-top: 8px;
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 17px;
|
||
color: #000000;
|
||
margin-left: 22px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image-box {
|
||
margin-top: 50px;
|
||
|
||
.img-video {
|
||
width: 26px;
|
||
height: 26px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.img-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin: 0 5px 0 10px;
|
||
}
|
||
|
||
.num-box {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: #fdda55;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
color: #333333;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.img-list-box {
|
||
padding: 0 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 115px;
|
||
width: 100%;
|
||
cursor: pointer;
|
||
margin-top: 15px;
|
||
|
||
.list-box::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.list-box {
|
||
overflow-x: scroll;
|
||
height: 120px;
|
||
color: #fff;
|
||
|
||
.icon-box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background: rgba(51, 51, 51, 0.733333333333333);
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
z-index: 66;
|
||
|
||
.icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
|
||
.video {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
margin-right: 10px;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.img:hover {
|
||
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
|
||
-moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
|
||
-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.img {
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
margin-right: 10px;
|
||
flex-shrink: 0
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
width: 10px;
|
||
height: 17px;
|
||
}
|
||
|
||
.left-icon {
|
||
position: absolute;
|
||
left: 0px;
|
||
}
|
||
|
||
.right-icon {
|
||
position: absolute;
|
||
right: 0px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.housing-info {
|
||
margin-top: 60px;
|
||
|
||
.need-housing-location {
|
||
margin-top: 20px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #000000;
|
||
|
||
.mg-t-15 {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.text-box {
|
||
width: 700px;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: #fdda55;
|
||
margin: 0 8px;
|
||
|
||
.icon-img {
|
||
width: 5px;
|
||
height: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.need-housing-info {
|
||
margin-top: 30px;
|
||
|
||
.info {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #7F7F7F;
|
||
font-size: 14px;
|
||
|
||
.title-box {
|
||
width: 120px;
|
||
}
|
||
|
||
.text {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #333;
|
||
padding: 10px 0;
|
||
border-bottom: 1px dashed rgba(237, 237, 237, 1);
|
||
width: 100%;
|
||
}
|
||
|
||
.mg-l-10 {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.mg-l-30 {
|
||
margin-left: 30px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-box-s {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.info {
|
||
width: 276px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #7F7F7F;
|
||
font-size: 14px;
|
||
padding: 15px 0;
|
||
|
||
.title-box {
|
||
width: 65px;
|
||
}
|
||
|
||
.text {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #333;
|
||
margin-left: 25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 20px;
|
||
height: 22px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.title {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 20px;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.statement-box {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #7F7F7F;
|
||
font-size: 13px;
|
||
margin-top: 30px;
|
||
|
||
.line-h-30 {
|
||
line-height: 30px;
|
||
}
|
||
|
||
.wx-qrcode-s {
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
border-radius: 16px;
|
||
-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.078431372);
|
||
padding: 15px;
|
||
|
||
.img {
|
||
width: 130px;
|
||
height: 130px;
|
||
}
|
||
}
|
||
|
||
.mg-t-15 {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.mg-t-30 {
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.title {
|
||
font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 15px;
|
||
color: #7F7F7F;
|
||
}
|
||
}
|
||
|
||
.houseing-info-box {
|
||
width: 100%;
|
||
background: inherit;
|
||
background-color: rgba(246, 246, 246, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
border-radius: 10px;
|
||
margin-top: 45px;
|
||
padding: 10px 15px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #7F7F7F;
|
||
font-size: 13px;
|
||
|
||
.houseing-info-box-s {
|
||
height: 17px;
|
||
width: 1px;
|
||
background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
|
||
background-size: 4px 2px;
|
||
background-repeat: repeat-y;
|
||
}
|
||
|
||
.browse-box {
|
||
margin-left: 130px;
|
||
|
||
.text {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.houseing-id {
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
.map-box {
|
||
margin-top: 60px;
|
||
|
||
.introduce-text {
|
||
line-height: 35px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #333;
|
||
margin-top: 20px;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.title-box {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 20px;
|
||
color: #000000;
|
||
|
||
.img {
|
||
width: 20px;
|
||
height: 24px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.more-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.map-s {
|
||
width: 100%;
|
||
height: 300px;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
|
||
.pop-box {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 300px;
|
||
background-color: rgba(51, 51, 51, 0.298039215686275);
|
||
border-radius: 10px;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.address-box {
|
||
width: 180px;
|
||
height: 40px;
|
||
background: inherit;
|
||
background-color: rgba(51, 51, 51, 0.8);
|
||
border: none;
|
||
border-radius: 10px;
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
padding: 10px;
|
||
|
||
.img {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.icon {
|
||
width: 8px;
|
||
height: 12px;
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.show-distance-info-box {
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
-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);
|
||
transition: all 0.2s linear;
|
||
}
|
||
|
||
.distance-info-box {
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
height: 0;
|
||
border-radius: 16px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 130px;
|
||
z-index: 666;
|
||
width: 100%;
|
||
max-height: 610px;
|
||
transition: all 0.2s linear;
|
||
overflow: hidden;
|
||
|
||
.top-box {
|
||
height: 70px;
|
||
}
|
||
|
||
// .distance-box-s {
|
||
// height: 500px;
|
||
// overflow-y: scroll;
|
||
// }
|
||
|
||
// .distance-box-s ::-webkit-scrollbar {
|
||
// width: 8px;
|
||
// }
|
||
|
||
.distance-info-data {
|
||
padding: 30px 45px 0 45px;
|
||
position: relative;
|
||
justify-content: space-around;
|
||
flex-direction: column;
|
||
|
||
.home-icon {
|
||
background: #ffcc17 !important;
|
||
}
|
||
|
||
.icon-box {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: #50e3c2;
|
||
margin-right: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.line {
|
||
background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
|
||
background-size: 5px 2px;
|
||
background-repeat: repeat-y;
|
||
height: 50px;
|
||
width: 1px;
|
||
position: absolute;
|
||
top: -50px;
|
||
}
|
||
|
||
.mg-t-50 {
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.school-info {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #333;
|
||
|
||
.address-info {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-left: 30px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title-box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 70px;
|
||
background: -webkit-linear-gradient(270deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
|
||
background: -moz-linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
|
||
background: linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-color: rgba(235, 235, 235, 1);
|
||
border-radius: 16px;
|
||
border-bottom-right-radius: 0px;
|
||
border-bottom-left-radius: 0px;
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
width: 100%;
|
||
|
||
.title {
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 20px;
|
||
color: #000000;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
position: absolute;
|
||
right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.distance-box {
|
||
width: 100%;
|
||
height: 101px;
|
||
background: inherit;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(242, 242, 242, 1);
|
||
border-radius: 12px;
|
||
margin-top: 20px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
/* ::-webkit-scrollbar {
|
||
display: none;
|
||
} */
|
||
|
||
.line-school-box {
|
||
width: 100%;
|
||
height: 101px;
|
||
|
||
.box-text {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
}
|
||
|
||
.text-c {
|
||
text-align: center
|
||
}
|
||
|
||
.far-s {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #7F7F7F;
|
||
text-align: center;
|
||
}
|
||
|
||
.marker-icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin: 10px auto;
|
||
}
|
||
}
|
||
|
||
.line-img {
|
||
height: 2px;
|
||
width: 743px;
|
||
background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
|
||
background-size: 4px 2px;
|
||
background-repeat: repeat-x;
|
||
}
|
||
|
||
.address-box {
|
||
height: 100%;
|
||
padding: 15px 0;
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
text-align: center;
|
||
|
||
.icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
.address-text {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.info-btn-bg {
|
||
width: 90px;
|
||
height: 101px;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.info-btn-s {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
text-align: center;
|
||
position: absolute;
|
||
z-index: 66;
|
||
|
||
.icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pop-mask {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1100;
|
||
}
|
||
|
||
::deep .el-dropdown {
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.message-info {
|
||
background: #000000;
|
||
border-color: #000000;
|
||
color: #fff;
|
||
|
||
.el-message__content {
|
||
color: #fff;
|
||
}
|
||
|
||
.el-icon {
|
||
display: none;
|
||
}
|
||
}
|
||
.el-popper.is-light{
|
||
border-radius:10px !important;
|
||
}
|
||
</style>
|
||
|