2748 lines
111 KiB
Vue
2748 lines
111 KiB
Vue
<template>
|
|
<div>
|
|
<pageTopBar></pageTopBar>
|
|
<div class="dis-f jus-x al-item" :class="{'mg-b-80':pageType==3}">
|
|
<div class="body-maxWidth mg-t-35">
|
|
<breadcrumb :data="housingInfo['data']" :operation='setOperation'></breadcrumb>
|
|
<el-affix :offset="0" @change="changeTitleType" z-index="700">
|
|
<div class="top-bar-box dis-f jus-x" v-show="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" v-if="pageType == 2 &&
|
|
housingInfo['data'] &&
|
|
housingInfo['data'].isintermediary == 1" alt="">
|
|
<div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified"></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>/月</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">
|
|
<img src="../assets/img/detail/collect.png" class="tool-icon" alt="">
|
|
<img src="../assets/img/detail/collectT.png" v-show="false" class="tool-icon"
|
|
alt="">
|
|
<span>
|
|
收藏
|
|
</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['title']"></transmit-btn>
|
|
</div>
|
|
</div>
|
|
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
|
|
<div class="contact-btn" style="margin:0 0 0 10px;" @click="getConcatData">
|
|
联系方式
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-affix>
|
|
<div class="dis-f jus-bet" style="margin-top: -15px;">
|
|
<div class="info-box">
|
|
<div class="detail-price-box">
|
|
<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>/月</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.rentalduration
|
|
=== '0' ?
|
|
'不限' : `${housingInfo['data'] && housingInfo['data'].info.rentalduration}
|
|
${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }}
|
|
</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">
|
|
<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" @click="imageShow = true"
|
|
v-show="imgList.length > 0">
|
|
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
|
|
@click.stop="moveImageList('left')" v-show="imgListTab === 0&&imageLIst[imageLIst.length-1]>800">
|
|
<img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
|
|
style="transform: rotate(180deg);" @click.stop="moveImageList('left')"
|
|
v-show="imgListTab > 0&&imageLIst[imageLIst.length-1]>800">
|
|
<img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
|
|
@click.stop="moveImageList('right')" v-show="imgList.length - 1 !== imgListTab&&imageLIst[imageLIst.length-1]>800">
|
|
<img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
|
|
style="transform: rotate(180deg);" @click.stop="moveImageList('right')"
|
|
v-show="imgList.length - 1 === imgListTab&&imageLIst[imageLIst.length-1]>800">
|
|
<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">
|
|
<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" ref="imgData" :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;" ref="imgData" :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>
|
|
基本信息
|
|
</span>
|
|
</div>
|
|
<!-- -->
|
|
<div class="need-housing-info" v-if="pageType == 3">
|
|
<div class="info dis-f al-item">
|
|
<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">
|
|
<div class="title-box">
|
|
所在楼层
|
|
</div>
|
|
<div class="text"
|
|
v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor" :key="i"
|
|
:class="{ 'mg-l-30': i === 0 }">
|
|
{{
|
|
item == 0 ? '不限' :
|
|
indexData['data'] &&
|
|
indexData['data']['config'] &&
|
|
indexData['data']['config']['floor'][item]
|
|
}}
|
|
<!-- {{ housingInfo['data'] && housingInfo['data'].info.floor }} -->
|
|
</div>
|
|
</div>
|
|
<div class="info dis-f al-item">
|
|
<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">
|
|
<div class="title-box">
|
|
晾晒区
|
|
</div>
|
|
<div class="text"
|
|
v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea"
|
|
:key="i" :class="{ 'mg-l-30': i === 0 }">
|
|
{{
|
|
item == 0 ? '不限' :
|
|
indexData['data'] &&
|
|
indexData['data']['config'] &&
|
|
indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
|
|
housingInfo['data'].info.sunshinearea]
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="info dis-f al-item">
|
|
<div class="title-box">
|
|
面积
|
|
</div>
|
|
<div class="text mg-l-30">
|
|
<span>
|
|
{{
|
|
housingInfo['data'] && housingInfo['data'].info.acreage[0] ? housingInfo['data']
|
|
&&
|
|
housingInfo['data'].info.acreage[0] : 0
|
|
}}
|
|
</span>~
|
|
<span>
|
|
{{
|
|
housingInfo['data'] && housingInfo['data'].info.acreage[1] ? housingInfo['data']
|
|
&&
|
|
housingInfo['data'].info.acreage[1] : 0
|
|
}}
|
|
</span>
|
|
平方呎
|
|
</div>
|
|
</div>
|
|
<div class="info dis-f al-item">
|
|
<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.publishergender]
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="info dis-f al-item">
|
|
<div class="title-box">
|
|
发布者性别
|
|
</div>
|
|
<div class="text mg-l-30">
|
|
{{
|
|
housingInfo['data'] && housingInfo['data'].info.gender ?
|
|
indexData['data'] &&
|
|
indexData['data']['config'] &&
|
|
indexData['data']['config']['gender'][housingInfo['data'] &&
|
|
housingInfo['data'].info.gender] :
|
|
'不限'
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- -->
|
|
<div class="info-box-s" v-if="pageType == 1 || pageType == 2">
|
|
<div class="info dis-f al-item">
|
|
<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">
|
|
<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">
|
|
|
|
|
{{
|
|
indexData['data'] &&
|
|
indexData['data']['config'] &&
|
|
indexData['data']['config']['elevator'][housingInfo['data'] &&
|
|
housingInfo['data'].info.elevator]
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div class="info dis-f al-item">
|
|
<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" style="margin-top:30px;">
|
|
<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" style="margin-top:30px;">
|
|
<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">
|
|
<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>
|
|
<span>
|
|
{{
|
|
location && location[item]
|
|
}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- -->
|
|
<div class="map-box" v-if="pageType == 1 || pageType == 2">
|
|
<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;">
|
|
<div v-if="housingInfo['data']">
|
|
<mapInfo :latlng="{
|
|
latitude: housingInfo['data'].info.longitude * 1,
|
|
longitude: housingInfo['data'].info.latitude * 1
|
|
}" :name="housingInfo['data'].info.address"></mapInfo>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f jus-x" v-if="distanceList.length && pageType != 3">
|
|
<div class="distance-box dis-f jus-bet">
|
|
<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" alt="">
|
|
</div>
|
|
<div class="distance-info-data dis-f" v-if="distanceList.length > 0">
|
|
<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>
|
|
{{ item && item.name }}
|
|
<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="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" style="justify-content:space-around;">
|
|
<div v-for="(item, i) in distanceList" class="box-text" :key="item && 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 houseing-info-box-s">
|
|
房源ID: <span class="houseing-id" @click="clone('123456789')">{{ housingInfo['data'] &&
|
|
housingInfo['data'].info.uid }}</span>
|
|
<span class="browse-box">
|
|
浏览: <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view
|
|
}}</span>
|
|
</span>
|
|
</div>
|
|
<div class="dis-f al-item houseing-info-box-s">
|
|
<span>
|
|
收藏: <span class="text">
|
|
{{ housingInfo['data'] && housingInfo['data'].info.count_fav }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="dis-f al-item houseing-info-box-s">
|
|
<span>
|
|
发布: <span class="text">
|
|
{{ housingInfo['data'] && housingInfo['data'].info.timestamp }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="dis-f al-item houseing-info-box-s" 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">
|
|
发布者对房源信息的真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。
|
|
<div>
|
|
如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
|
|
<el-dropdown>
|
|
<span class="text-line" @click="clone('gternet2')">{{
|
|
concatInfo.data && concatInfo.data.wechat }}</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>
|
|
<div class="wx-qrcode-s">
|
|
<img :src="concatInfo.data && concatInfo.data.wechatqrcode"
|
|
style="width:130px;height:130px" alt="">
|
|
</div>
|
|
</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 == 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']&&['config']['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="">
|
|
<span>认证房源 x{{ housingInfo['data'] && housingInfo['data'].verifiedlistingcount }}</span>
|
|
</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>
|
|
<div class="right-tool-box mg-t-20 dis-f al-item jus-x" style="flex-wrap:wrap;">
|
|
<div class="dis-f jus-x ">
|
|
<img src="../assets/img/detail/wxTitle.png" class="wx-title" alt="">
|
|
</div>
|
|
<div class="dis-f jus-x ">
|
|
<div class="wx-qrcode-box dis-f jus-x al-item">
|
|
<img src="../assets/img/detail/wxQrCode.svg" class="wx-qrcode" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="dis-f jus-x s-w-100">
|
|
<div class="wx-qrcode-tps-box dis-f al-item">
|
|
<img src="../assets/img/detail/qrCodeIcon.png" class="icon" alt="">
|
|
手机查看该房源
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-tool-box mg-t-20 dis-f al-item jus-x" style="flex-wrap:wrap;">
|
|
<div class="dis-f jus-x ">
|
|
<img src="../assets/img/detail/crowdTitle.png" class="wx-title" alt="">
|
|
</div>
|
|
<div class="dis-f jus-x ">
|
|
<div class="crowd-box dis-f jus-x al-item">
|
|
<img :src="concatInfo.data && concatInfo.data.wechatqrcode" class="img" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="dis-f jus-x s-w-100">
|
|
<div class="wx-qrcode-tps-box dis-f al-item crowd-text">
|
|
<img src="../assets/img/detail/qrCodeIcon.png" class="icon" alt="">
|
|
入群请添加
|
|
<span class="name-text">方同学的小助手</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<div class="body-maxWidth housing-title" style="margin-top:30px;">
|
|
附近房源
|
|
</div>
|
|
</div>
|
|
<div class="dis-f jus-x al-item" style="position: relative;z-index:-1;" 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 != 3">
|
|
- {{ loadText }} -
|
|
</div>
|
|
<footerTool></footerTool>
|
|
<div class="pop-box" v-show="showConcat">
|
|
<!-- 两种信息 -->
|
|
<!-- 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 style="padding:0 0 30px 0;"
|
|
:class="[{ 's-w-100': concatData.data && concatData.data.count === 2 }]">
|
|
<div class="liner-title">
|
|
联系方式
|
|
</div>
|
|
<div class="whatsapp-box"
|
|
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 style="width:120px;">
|
|
{{ 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="whatsapp-box"
|
|
v-if="concatData.data && concatData.data.whatsapp && 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 style="width:120px;">
|
|
{{ 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="whatsapp-box"
|
|
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 style="width:120px;">
|
|
{{ 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 class="dis-f jus-x al-item whatsapp-wx-box s-w-100"
|
|
v-if="concatData.data && concatData.data.count === 2 && concatData.data.wechatdata.aid !== 0">
|
|
<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"></div>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
<div v-if="concatData.data && concatData.data.count > 2 && concatData.data.wechatdata.url">
|
|
<div class="wx-qrcode-s">
|
|
<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>
|
|
<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" :close="cloaseImageShow" :list="imgList"></watchImage>
|
|
<!-- 右下角咨询 -->
|
|
<circle-btn></circle-btn>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, onMounted, ref, nextTick, onBeforeUnmount } from 'vue'
|
|
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
|
|
import circleBtn from '@/components/public/circle-btn.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 } 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 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 cloaseImageShow = () => {
|
|
imageShow.value = false
|
|
}
|
|
|
|
//图片组实例
|
|
let imageList = ref(null)
|
|
//图片数组
|
|
let imgList = ref([])
|
|
|
|
//图片距离
|
|
let imageLIst = ref([])
|
|
|
|
let imgListTab = ref(0)
|
|
//计时器
|
|
let interval = ''
|
|
//点击方向按钮
|
|
let moveImageList = (type) => {
|
|
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIst.value.length - 1 && type === 'right')) return
|
|
type === 'left' ? imgListTab.value-- : imgListTab.value++
|
|
setOffsetWidth(imageLIst.value[imgListTab.value], type)
|
|
}
|
|
//设置滚动
|
|
let setOffsetWidth = (num, type) => {
|
|
let scroll = 0
|
|
let clientWidth = imageList.value.clientWidth
|
|
let scrollWidth = imageList.value.scrollWidth
|
|
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 >= scrollWidth) {
|
|
clearInterval(interval)
|
|
}
|
|
})
|
|
}
|
|
|
|
let imgData = ref(null)
|
|
//获取图片宽度
|
|
let setImageWidth = (num) => {
|
|
imageLIst.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20
|
|
}
|
|
|
|
//学校地址数据
|
|
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: '复制成功',
|
|
type:'success',
|
|
center: true,
|
|
})
|
|
}
|
|
|
|
//显示联系方式
|
|
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)
|
|
console.log(imgList.value)
|
|
}
|
|
|
|
let location = store.state.indexData.config && store.state.indexData.config.location
|
|
//设置顶部导航
|
|
let setNavigation = () => {
|
|
let type = store.state.indexData.config && store.state.indexData.config.type
|
|
indexData['data'] = store.state.indexData
|
|
console.log('routeLis',store.state)
|
|
console.log(location)
|
|
if (!location) return
|
|
if (pageType.value == 1 || pageType.value == 2) {
|
|
// type=location&data=["2.2"]&areaItem={"id":2,"name":"九龙"}
|
|
console.log(`${store.state.routeList['secondaryIndex'].path}/location/${housingInfo['data']['info'].location.substring(0, 1)}`)
|
|
store.state.routeList['thirdIndex'] = {
|
|
path: `${store.state.routeList['secondaryIndex'].path}/location/${housingInfo['data']['info'].location.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'] = {
|
|
path: "",
|
|
title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
|
|
}
|
|
}
|
|
}
|
|
//中介数据
|
|
let contacts = reactive({
|
|
data: {
|
|
}
|
|
})
|
|
|
|
//获取房源详情
|
|
let getHousingInfo = () => {
|
|
api.details({
|
|
uniqid: uniqid.value
|
|
}).then(res => {
|
|
console.log(res)
|
|
if (res.code === 200) {
|
|
housingInfo['data'] = res.data
|
|
setHousingArr()
|
|
setNavigation()
|
|
distanceList.value = distanceList.value.concat(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 (housingInfo['data'].info.verified&&pageType.value!=3) {
|
|
getPublisherList()
|
|
} else if(pageType.value!=3){
|
|
recommendList()
|
|
}
|
|
|
|
} else {
|
|
ElMessage({
|
|
message: res.message
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
//收藏
|
|
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 = () => {
|
|
showConcat.value = true
|
|
console.log(concatData['data'])
|
|
if (concatData['data']) return
|
|
api.contactData({
|
|
token: housingInfo['data'].token
|
|
}).then(res => {
|
|
console.log(res)
|
|
if (res.code === 200) {
|
|
concatData['data'] = res.data
|
|
let dataCount = 0
|
|
Object.keys(concatData['data']).map(res => {
|
|
console.log(res === 'wechatdata' && concatData['data'][res].aid != 0)
|
|
if ((concatData['data'][res] && res != 'wechatdata') || (res === 'wechatdata' && concatData['data'][res].aid != 0)) {
|
|
dataCount++
|
|
}
|
|
})
|
|
concatData['data']['count'] = dataCount
|
|
console.log(concatData)
|
|
}
|
|
})
|
|
}
|
|
|
|
//判断更新时间
|
|
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) {
|
|
if (loadMore.value) {
|
|
loadMore.value = false
|
|
pages.value += 1
|
|
if (housingInfo['data'].info.verified) {
|
|
getPublisherList()
|
|
} else {
|
|
recommendList()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//瀑布流列表
|
|
let recommendListData = ref([])
|
|
//广告参数
|
|
let pagevalue = ref(0)
|
|
//加载提示
|
|
let loadText = ref('加载中......')
|
|
//获取瀑布流数据
|
|
let recommendList = () => {
|
|
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.length === 0) return
|
|
if (res.data.pagevalue) {
|
|
recommendListData.value = recommendListData.value.concat(res.data.data)
|
|
pagevalue.value = res.data.pagevalue
|
|
}
|
|
if (res.data.data.length >= 30) {
|
|
loadMore.value = true
|
|
} else {
|
|
loadMore.value = false
|
|
loadText.value = '到底了'
|
|
}
|
|
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) {
|
|
publisherList.value = publisherList.value.concat(res.data)
|
|
if (res.data.length >= 30) {
|
|
loadMore.value = true
|
|
} else {
|
|
loadMore.value = false
|
|
loadText.value = '到底了'
|
|
}
|
|
} else {
|
|
ElMessage({
|
|
message: res.message,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
//瀑布流模块
|
|
const gridContainer = ref(null);
|
|
let masonryInstance = null
|
|
|
|
let router = useRouter()
|
|
onMounted(() => {
|
|
let { id, type } = router.currentRoute.value.query
|
|
uniqid.value = id
|
|
pageType.value = type
|
|
getHousingInfo()
|
|
masonryInstance = new Masonry(gridContainer.value, {
|
|
itemSelector: '.waterfall-box',
|
|
gutter: 10
|
|
});
|
|
if (pageType.value != 3) {
|
|
setTimeout(() => {
|
|
window.addEventListener('scroll', onPageSrcoll, true);
|
|
document.body.scrollTop=0
|
|
}, 1000)
|
|
}
|
|
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', onPageSrcoll, true);
|
|
})
|
|
|
|
</script>
|
|
<style scoped>
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.dis-f {
|
|
display: flex;
|
|
}
|
|
|
|
.jus-x {
|
|
justify-content: center;
|
|
}
|
|
|
|
.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-b-80{
|
|
margin-bottom:80px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 999;
|
|
|
|
.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;
|
|
|
|
.round {
|
|
width: 180px;
|
|
height: 180px;
|
|
background: rgba(218, 246, 241, 0.5);
|
|
border-radius: 50%;
|
|
margin-left: 80px;
|
|
|
|
.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 60px;
|
|
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 {
|
|
margin-top: 50px;
|
|
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 100px 0 100px
|
|
}
|
|
}
|
|
|
|
.liner-title {
|
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 24px;
|
|
color: #000000;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contact-btn {
|
|
width: 260px;
|
|
height: 48px;
|
|
background: -webkit-linear-gradient(89.9999999999999deg, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
|
|
background: -moz-linear-gradient(1.27897692436818E-13deg, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
|
|
background: linear-gradient(1.27897692436818E-13deg, 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 25px;
|
|
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;
|
|
}
|
|
|
|
.icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.concat-btn-box {
|
|
width: 0px;
|
|
overflow: hidden;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
.concat-btn-show {
|
|
width: 270px;
|
|
}
|
|
|
|
.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;
|
|
|
|
.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;
|
|
|
|
.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:10px;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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: 15px;
|
|
}
|
|
|
|
.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: 2px 3px;
|
|
}
|
|
|
|
.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: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 666;
|
|
|
|
.detail-price-box {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #555555;
|
|
|
|
.rent {
|
|
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
|
font-weight: 900;
|
|
font-size: 28px;
|
|
color: #F95D5D;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.unit {
|
|
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
|
font-weight: 900;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.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: 35px;
|
|
|
|
.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: 20px;
|
|
|
|
.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 {
|
|
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: 50px;
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 14px;
|
|
color: #333;
|
|
padding: 10px 0;
|
|
border-bottom: 1px dashed rgba(237, 237, 237, 1);
|
|
width: 100%;
|
|
}
|
|
|
|
.mg-l-30 {
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-box-s {
|
|
margin-top: 30px;
|
|
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;
|
|
|
|
.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: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.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 0px;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
color: #7F7F7F;
|
|
|
|
.houseing-info-box-s {
|
|
padding: 0 15px;
|
|
border-right: 1px dashed #d7d7d7;
|
|
}
|
|
|
|
.browse-box {
|
|
margin-left: 160px;
|
|
|
|
.text {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.houseing-id {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.map-box {
|
|
margin-top: 50px;
|
|
|
|
.introduce-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #333;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.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-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;
|
|
|
|
|
|
.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: 110px;
|
|
z-index: 666;
|
|
width: 100%;
|
|
max-height: 610px;
|
|
overflow-y: scroll;
|
|
transition: all 0.2s linear;
|
|
|
|
.top-box {
|
|
height: 70px;
|
|
}
|
|
|
|
.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 {
|
|
height: 50px;
|
|
width: 1px;
|
|
border-left: 1px dashed #e7e7e7;
|
|
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-style: solid;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
::-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: 1px;
|
|
width: 743px;
|
|
border: 1px dashed #d7d7d7;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|