3171 lines
132 KiB
Vue
3171 lines
132 KiB
Vue
<template>
|
||
<div style="min-width: 1200px; overflow-x: hidden; 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 class="top-bar-box dis-f jus-x">
|
||
<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 class="rent" v-if="housingInfo['data'] && housingInfo['data'].info.rent[1]" style="margin: 0;">~</span><span class="rent" style="margin: 0;" 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 style="margin-left: 5px;">
|
||
{{ 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>
|
||
<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 class="rent" style="margin: 0;" 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" :class="{ 'no-img-pd': scrollWidth <= clientWidth }">
|
||
<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 style="margin-bottom: 20px;">
|
||
<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="dis-f jus-x pos-r" v-if="pageType != 3 && annexSchoolList.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' }"> -->
|
||
|
||
<el-popover :width="814" trigger="click" popper-style="padding: 0" :show-arrow="false" v-model:visible="showDistance">
|
||
<template #reference>
|
||
<div class="distance-box dis-f jus-bet">
|
||
<div class="dis-f al-item" style="position: relative;" @click="setShowDistance">
|
||
<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 class="box-text" v-if="specialSchoolDistance" @click="selectIndex()">
|
||
<div class="distance-item-value special flexacenter">
|
||
<div class="mileage">{{ specialSchoolDistance.distanceText }}</div>
|
||
<img v-if="specialSchoolDistance.toolText == '步行'" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
|
||
<img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" />
|
||
<div class="tool-time">{{ specialSchoolDistance?.durationText2 }}</div>
|
||
</div>
|
||
<div class="dis-f jus-x">
|
||
<img src="../assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
|
||
</div>
|
||
<div class="text-c">{{ specialSchoolDistance.alias }}</div>
|
||
</div>
|
||
<div v-for="(item, i) in annexSchoolOmit" class="box-text" :key="i" @click="selectIndex(item.id)">
|
||
<div class="distance-item-value flexacenter">
|
||
<div class="mileage">{{ item.distanceText }}</div>
|
||
<img v-if="!item.list[0].publictransport" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
|
||
<img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" />
|
||
<div class="tool-time">{{ item.list[0]?.publictransport?.durationText2 || item.list[0]?.durationText2 }}</div>
|
||
</div>
|
||
<div class="dis-f jus-x">
|
||
<img src="../assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
|
||
</div>
|
||
<div class="text-c">{{ 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>
|
||
</template>
|
||
<div class="distance-info-box pos-r" :style="{ height: `${50 * annexSchoolList.length + 70}px` }">
|
||
<div class="title-box dis-f al-item jus-x">
|
||
房源
|
||
<img class="distance-arrow" src="@/assets/img/detail/arrow-circle-blue.svg" />
|
||
院校
|
||
<img src="../assets/img/detail/close.png" class="close-icon" @click="showDistance = false" alt="" />
|
||
</div>
|
||
<div class="distance-info-data dis-f">
|
||
<div class="distance-info-left">
|
||
<div class="distance-info-left-item flexcenter" :class="{ 'pitch': index == academyPitchIndex }" v-for="(item, index) in annexSchoolList" :key="index" @click="selectAcademyIndex(index)">{{ item.alias }}</div>
|
||
</div>
|
||
<el-scrollbar ref="elscrollbarRef" :style="{ height: 50 * annexSchoolList.length + 'px' }">
|
||
<div class="distance-info-right flex1">
|
||
<div class="distance-header-box flexacenter">
|
||
<div class="flexacenter">
|
||
<div class="distance-header-icon flexcenter">
|
||
<img src="@/assets/img/detail/home.png" alt="" class="distance-header-img" />
|
||
</div>
|
||
{{ targetAcademyPitch.school }}
|
||
</div>
|
||
<div class="distance-header-hint">本数据来自高德地图，仅供参考。</div>
|
||
</div>
|
||
|
||
<div class="academy-school-item" v-for="(item, index) in targetAcademyPitch.list" :key="index">
|
||
<div class="academy-school-item-header flexacenter">
|
||
<div class="academy-school-item-left flexacenter">
|
||
<div class="academy-school-item-name">{{ item.title }}</div>
|
||
<div class="academy-school-item-number">{{ item.distanceText || "1km" }}</div>
|
||
</div>
|
||
<div class="academy-school-item-right flexacenter">
|
||
<img v-if="item.publictransport" class="academy-school-item-icon" src="@/assets/img/detail/subway-icon.png" mode="widthFix" />
|
||
<img v-else class="academy-school-item-icon" src="@/assets/img/detail/walk-icon.png" mode="widthFix" />
|
||
<div class="academy-school-item-time">{{ item?.publictransport?.durationText || item.durationText || "1分钟" }}</div>
|
||
</div>
|
||
<img class="arrow-green" mode="widthFix" src="@/assets/img/detail/arrow-green.svg" />
|
||
</div>
|
||
<div class="academy-school-item-journey" v-if="item.publictransport">
|
||
<div class="journey-item flexacenter" v-for="(item, index) in item.publictransport.segments" :key="index">
|
||
<div class="circle"></div>
|
||
<!-- 步行 骑行 -->
|
||
<div v-if="item.type == 'walking'" class="journey-value flex1">步行{{ item.distanceText }}</div>
|
||
<!-- 地铁 -->
|
||
<div v-else-if="item.type == 'bus' && item.bustype == '地铁线路'" class="journey-value flex1 subway flexacenter">
|
||
<div class="subway-name flexcenter">{{ item.name }}</div>
|
||
<div class="flex1" style="white-space: nowrap;">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||
</div>
|
||
<!-- 公交 -->
|
||
<div v-else-if="item.type == 'bus' && item.bustype == '普通公交线路'" class="journey-value flex1 bus flexacenter">
|
||
<div class="bus-name flexcenter">{{ item.name }}</div>
|
||
<div class="flex1" style="white-space: nowrap;">{{ item.via_num }}站·{{ item.durationText }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
</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>
|
||
<div class="body-maxWidth" v-show="recommendListData.length > 0">
|
||
<div class="gridContainer" ref="gridContainer" style="margin-top: 15px; display: flex; flex-wrap: wrap; margin-bottom: 50px; width: 876px;">
|
||
<indexWaterfallBox v-for="items in recommendListData" :data="items" :key="items.id" :listMasonryInstance="masonryInstance" :isdetail="true"> </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 class="dis-f jus-x bottom-tps" v-if="(recommendListData.length > 0 && housingInfo['data'] && !housingInfo['data']['info'].verified) || (recommendListData.length > 0 && housingInfo['data'] && !housingInfo['data'].isintermediary)">- {{ loadText }} -</div>
|
||
</div>
|
||
</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> -->
|
||
<watchImage v-if="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"
|
||
|
||
import { metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js"
|
||
|
||
//页面类型
|
||
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 scrollMove = false
|
||
//点击方向按钮
|
||
let moveImageList = type => {
|
||
console.log("type", type, imgListTab.value, imageLIstLeft)
|
||
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
|
||
if (scrollMove) return
|
||
scrollMove = true
|
||
interval = setInterval(() => {
|
||
if (!imageList.value) {
|
||
scrollMove = false
|
||
clearInterval(interval)
|
||
return
|
||
}
|
||
scroll = type === "left" ? (imageList.value.scrollLeft -= 10) : (imageList.value.scrollLeft += 10)
|
||
if (type === "left" ? num >= scroll : num <= scroll) {
|
||
scrollMove = false
|
||
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
|
||
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
|
||
// showDistance.value = true
|
||
}
|
||
|
||
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 ? "求房源" : "个人房源",
|
||
}
|
||
housingInfo["data"]["info"].location = housingInfo["data"]["info"].location + ""
|
||
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 => {
|
||
if (res.code === 200) {
|
||
const data = res.data
|
||
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
|
||
}
|
||
|
||
document.title = data?.info?.subject || "港校租房-详情"
|
||
} else {
|
||
ElMessage({
|
||
message: res.message,
|
||
})
|
||
loadMore.value = false
|
||
}
|
||
})
|
||
}
|
||
|
||
//收藏
|
||
let setOperation = () => {
|
||
api.operation({
|
||
token: housingInfo["data"].token,
|
||
}).then(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 => {
|
||
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 => {
|
||
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()
|
||
|
||
let pitchSchool = "" // 筛选页面带过来的 学校ID
|
||
|
||
watch(route, () => {
|
||
let { id } = router.currentRoute.value.query
|
||
uniqid.value = id
|
||
pitchSchool = route.query["school"] || ""
|
||
pageType.value = housingInfo["data"]["info"].intermediary === 1 ? 2 : housingInfo["data"]["info"].intermediary === 6 ? 3 : 1 //1个人 2中介 3求房源
|
||
publisherList.value = []
|
||
recommendListData.value = []
|
||
getHousingInfo()
|
||
distanceSchool()
|
||
})
|
||
|
||
// const gridContainer = ref(null)
|
||
|
||
onMounted(() => {
|
||
let { id } = router.currentRoute.value.query
|
||
uniqid.value = id
|
||
pitchSchool = route.query["school"] || ""
|
||
getHousingInfo()
|
||
distanceSchool()
|
||
masonryInstance = new Masonry(gridContainer.value, {
|
||
itemSelector: ".item",
|
||
gutter: 10,
|
||
})
|
||
if (pageType.value != 3) {
|
||
window.addEventListener("scroll", onPageSrcoll)
|
||
document.body.scrollTop = 0
|
||
}
|
||
|
||
// listMasonryInstance = new Masonry(gridContainer.value, {
|
||
// itemSelector: ".item",
|
||
// gutter: 20,
|
||
// })
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener("scroll", onPageSrcoll)
|
||
})
|
||
|
||
// 获取 距离学校距离
|
||
const distanceSchool = () => {
|
||
api.detailsDistance({
|
||
uniqid: uniqid.value,
|
||
istype: 1,
|
||
}).then(res => {
|
||
const data = res.data
|
||
if (res.code != 200) return
|
||
|
||
let specialSchoolDistanceTarget = null
|
||
let academyPitchIndexTarget = 0
|
||
const school = pitchSchool || ""
|
||
let annexSchoolOmitTarget = []
|
||
data.forEach((element, index) => {
|
||
element["distanceText"] = metersToKilometers(element.distance)
|
||
element.list.forEach(ele => {
|
||
ele["durationText"] = secondsToHoursMinutes(ele.duration, "chinese")
|
||
ele["durationText2"] = secondsToHoursMinutes(ele.duration)
|
||
ele["distanceText"] = metersToKilometers(ele.distance)
|
||
if (Object.prototype.toString.call(ele.publictransport) === "[object Object]") {
|
||
ele.publictransport["durationText"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0, "chinese")
|
||
ele.publictransport["durationText2"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0)
|
||
const segments = ele.publictransport["segments"]
|
||
if (Array.isArray(segments)) {
|
||
segments.forEach(e => {
|
||
e["via_num"] = 1 + Math.floor(e.via_num)
|
||
e["durationText"] = secondsToHoursMinutes(e.duration)
|
||
e["distanceText"] = metersToKilometers(e.distance, "chinese")
|
||
})
|
||
}
|
||
} else ele.publictransport = null
|
||
})
|
||
|
||
if (school == element.id) {
|
||
academyPitchIndexTarget = index
|
||
const obj = element.list[0] || {}
|
||
let toolText = "步行"
|
||
if (Object.prototype.toString.call(obj.publictransport) === "[object Object]") toolText = "公交地铁"
|
||
specialSchoolDistanceTarget = {
|
||
alias: element.alias,
|
||
distanceText: obj["distanceText"],
|
||
durationText: obj.publictransport?.durationText2 || obj["durationText2"],
|
||
toolText,
|
||
}
|
||
} else annexSchoolOmitTarget.push(element)
|
||
})
|
||
|
||
if (specialSchoolDistanceTarget) annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 4)
|
||
else annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 5)
|
||
|
||
annexSchoolOmit.value = annexSchoolOmitTarget
|
||
annexSchoolList.value = data
|
||
targetAcademyPitch.value = data[academyPitchIndexTarget]
|
||
specialSchoolDistance.value = specialSchoolDistanceTarget
|
||
academyPitchIndex.value = academyPitchIndexTarget
|
||
})
|
||
}
|
||
|
||
let annexSchoolOmit = ref([]) // 附近院校 前面 7个 或者 6个的
|
||
let annexSchoolList = ref([]) // 附近院校数据
|
||
let academyPitchIndex = ref(0) // 附近学校距离选中院校 下标
|
||
let targetAcademyPitch = ref({}) // 附近学校距离选中院校 数据
|
||
let specialSchoolDistance = ref(null) // 特殊的 用户带有school参数 则需要特殊显示 学校距离
|
||
const elscrollbarRef = ref(null) // 滚动条
|
||
|
||
// 选择附近学校距离的学校下标
|
||
const selectAcademyIndex = index => {
|
||
academyPitchIndex.value = index || 0
|
||
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value]
|
||
elscrollbarRef.value.setScrollTop(0)
|
||
}
|
||
|
||
// 选择附近学校距离的学校下标
|
||
const selectIndex = id => {
|
||
if (!id) id = pitchSchool
|
||
const data = annexSchoolOmit.value || []
|
||
data.forEach((element, index) => {
|
||
if (element.id == id) {
|
||
academyPitchIndex.value = index || 0
|
||
targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value]
|
||
}
|
||
})
|
||
|
||
// showDistance.value = true
|
||
}
|
||
|
||
let listMasonryInstance = null
|
||
</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;
|
||
width: 876px;
|
||
}
|
||
|
||
.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: 150px !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%);
|
||
background: -webkit-linear-gradient(341.999824797531deg, rgba(98, 177, 255, 1) -3%, rgba(128, 255, 255, 1) 128%);
|
||
background: -moz-linear-gradient(108.000175202469deg, rgba(98, 177, 255, 1) -3%, rgba(128, 255, 255, 1) 128%);
|
||
background: linear-gradient(108.000175202469deg, rgba(98, 177, 255, 1) -3%, rgba(128, 255, 255, 1) 128%);
|
||
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: #fff;
|
||
text-align: center;
|
||
line-height: 48px;
|
||
margin-top: 35px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.top-bar-box {
|
||
position: fixed;
|
||
width: 100%;
|
||
left: 0;
|
||
bottom: 10px;
|
||
z-index: 1002;
|
||
|
||
.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: 750px;
|
||
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: 60px;
|
||
-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: 10px 11px 10px 30px;
|
||
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: 160px;
|
||
}
|
||
|
||
.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: #f3f5f6;
|
||
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;
|
||
font-size: 14px;
|
||
color: #555;
|
||
border: 1px solid rgba(215, 215, 215, 1);
|
||
}
|
||
|
||
.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 30px;
|
||
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: 3px;
|
||
margin-left: -2px;
|
||
}
|
||
|
||
.img-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin: 0 5px 0 0px;
|
||
}
|
||
|
||
.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;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.no-img-pd {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.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;
|
||
// scrollbar-color: transparent transparent;
|
||
// scrollbar-track-color: transparent;
|
||
// -ms-scrollbar-track-color: transparent;
|
||
// -ms-overflow-style: none; // 微软
|
||
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;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.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: 15px;
|
||
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: 15px;
|
||
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: 271px;
|
||
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: 15px;
|
||
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: 15px;
|
||
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: 1px solid 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;
|
||
border: 1px solid transparent;
|
||
.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-bottom: 1px solid rgba(235, 235, 235, 1);
|
||
border-radius: 16px 16px 0 0;
|
||
|
||
// .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;
|
||
top: 20px;
|
||
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: 724px;
|
||
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;
|
||
}
|
||
.distance-box {
|
||
.distance-item-value {
|
||
height: 24px;
|
||
padding: 0 8px;
|
||
background-color: rgba(246, 246, 246, 1);
|
||
border-radius: 29px;
|
||
|
||
&.special {
|
||
background: linear-gradient(to right, rgba(255, 255, 255, 0.8) -14%, rgba(80, 227, 194, 0.8) 100%);
|
||
}
|
||
|
||
.mileage {
|
||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||
font-weight: 650;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.tool-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 3px;
|
||
}
|
||
|
||
.tool-time {
|
||
font-size: 13px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.distance-info-box {
|
||
.title-box {
|
||
font-weight: 650;
|
||
font-size: 20px;
|
||
color: #000000;
|
||
|
||
height: 70px;
|
||
border-bottom: 1px solid #ebebeb;
|
||
border-radius: 16px 16px 0 0;
|
||
|
||
.distance-arrow {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 0 28px;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.distance-info-data {
|
||
.distance-info-left {
|
||
width: 70px;
|
||
flex-direction: column;
|
||
border-right: 1px solid #ebebeb;
|
||
box-sizing: content-box;
|
||
|
||
.distance-info-left-item {
|
||
width: 100%;
|
||
height: 50px;
|
||
font-size: 14px;
|
||
color: #555555;
|
||
cursor: pointer;
|
||
&.pitch {
|
||
font-weight: 650;
|
||
color: #000000;
|
||
background: linear-gradient(to right, rgba(255, 255, 255, 0.8) -14%, rgba(80, 227, 194, 0.8) 100%);
|
||
}
|
||
|
||
&:last-of-type {
|
||
border-radius: 0 0 0 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.distance-info-right {
|
||
padding: 30px 40px;
|
||
.distance-header-box {
|
||
color: #333333;
|
||
font-weight: 650;
|
||
font-size: 16px;
|
||
margin-bottom: 30px;
|
||
justify-content: space-between;
|
||
.distance-header-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
background-color: #fddf6d;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
|
||
.distance-header-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
|
||
.distance-header-hint {
|
||
color: #a09e9e;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.academy-school-item {
|
||
background-color: rgba(246, 246, 246, 1);
|
||
border-radius: 12px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.academy-school-item-header {
|
||
font-size: 16px;
|
||
width: 670px;
|
||
height: 65px;
|
||
justify-content: space-between;
|
||
padding-left: 22px;
|
||
padding-right: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.academy-school-item-header .arrow-green {
|
||
width: 7px;
|
||
height: 12px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.academy-school-item-name {
|
||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||
font-weight: 650;
|
||
color: #000000;
|
||
}
|
||
|
||
.academy-school-item-number {
|
||
color: rgb(51, 51, 51);
|
||
margin-left: 4px;
|
||
font-weight: 400;
|
||
font-family: "ArialMT", "Arial", sans-serif;
|
||
}
|
||
|
||
.academy-school-item-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.academy-school-item-time {
|
||
color: #000;
|
||
font-weight: 650;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.academy-school-item-journey {
|
||
border-top: 1px solid #ebebeb;
|
||
padding-top: 22px;
|
||
padding-left: 22px;
|
||
padding-bottom: 30px;
|
||
position: relative;
|
||
}
|
||
|
||
.journey-item {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.journey-item:not(:last-of-type) {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.academy-school-item-journey::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 26.4px;
|
||
width: 1px;
|
||
height: 100%;
|
||
display: block;
|
||
background-image: linear-gradient(to bottom, #aaaaaa 50%, transparent 50%);
|
||
background-size: 1px 4px; /* 控制虚线的宽度和间距 */
|
||
}
|
||
|
||
.journey-item:first-of-type::after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: -22px;
|
||
left: 0;
|
||
width: 9px;
|
||
height: calc(50% + 22px);
|
||
background-color: rgba(246, 246, 246, 1);
|
||
}
|
||
|
||
.journey-item:last-of-type::after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
bottom: -30px;
|
||
left: 0;
|
||
width: 9px;
|
||
height: calc(50% + 30px);
|
||
background-color: rgba(246, 246, 246, 1);
|
||
}
|
||
|
||
.journey-item .circle {
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 50%;
|
||
background-color: #f6f6f6;
|
||
border: 1px solid #797979;
|
||
box-sizing: border-box;
|
||
margin-right: 20px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.journey-item .journey-value {
|
||
color: #333;
|
||
font-size: 13px;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.journey-item .journey-value.subway {
|
||
color: #aaaaaa;
|
||
}
|
||
|
||
.journey-item .journey-value.subway .subway-name {
|
||
padding: 3.5px 11px;
|
||
background-color: rgba(51, 51, 51, 1);
|
||
border-radius: 10px;
|
||
color: #fff;
|
||
margin-right: 10px;
|
||
max-width: 570px;
|
||
}
|
||
|
||
.journey-item .journey-value.bus {
|
||
color: #aaaaaa;
|
||
}
|
||
|
||
.journey-item .journey-value.bus .bus-name {
|
||
padding: 3.5px 11px;
|
||
background-color: rgba(80, 227, 194, 0);
|
||
box-sizing: border-box;
|
||
border: 1px solid rgba(51, 51, 51, 1);
|
||
border-radius: 10px;
|
||
margin-right: 10px;
|
||
color: #333333;
|
||
max-width: 570px;
|
||
}
|
||
|
||
.academy-school-hint {
|
||
color: #a09e9e;
|
||
font-size: 13px;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|