<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 }}&nbsp; </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 :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 : &nbsp;<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>
                                    收藏 : &nbsp;<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>
                                    发布 : &nbsp;<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>
                                    更新 : &nbsp;<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 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"> </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 => {
    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()
})

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
    }
})

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 selectAcademyIndex = index => {
    academyPitchIndex.value = index || 0
    targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value]
}

// 选择附近学校距离的学校下标
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
}
</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: 200px !important;
}

// .contact-btn:hover {
//     background: -webkit-linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
//     background: -moz-linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
//     background: linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
// }

.contact-btn {
    width: 260px;
    height: 48px;
    // background: -webkit-linear-gradient(0, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
    // background: -moz-linear-gradient(0, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
    // background: linear-gradient(0, rgba(198, 228, 255, 1) -4%, rgba(232, 244, 255, 1) 102%);
    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: 0;
    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: 1200px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(235, 235, 235, 1);
        border-radius: 16px;
        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
        font-size: 14px;
        padding: 15px 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: 210px;
        }

        .fav-btn {
        }

        .fav-btn:hover .fav-img-f {
            opacity: 0.4;
        }

        .fav-btn:hover .fav-img-t {
            opacity: 0;
        }

        .tool-btn {
            width: 199px;
            height: 48px;
            background: inherit;
            background-color: rgba(246, 246, 246, 0);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(235, 235, 235, 1);
            border-radius: 122px;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 14px;
            cursor: pointer;

            .fav-img {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 0;
                left: 0;
                transition: all linear 0.2s;
            }

            .fav-img-f {
                opacity: 0;
            }

            .fav-img-t {
                opacity: 1;
            }

            .tool-icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
            }
        }
    }
}

.right-tool-box {
    width: 304px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(235, 235, 235, 1);
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    font-size: 14px;
    padding: 35px 25px;

    .intermediary-info-box {
        width: 100%;
        background: inherit;
        background-color: rgba(246, 246, 246, 0.603921568627451);
        border: none;
        border-radius: 8px;
        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #7f7f7f;
        padding: 20px 10px;
        margin-top: 30px;
        box-sizing: border-box;
        line-height: 20px;
        word-wrap: break-word;

        .business-card-btn {
            width: 100px;
            height: 30px;
            background: inherit;
            background-color: rgba(246, 246, 246, 0);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(215, 215, 215, 1);
            border-radius: 4px;
            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            margin-top: 15px;

            .logo {
                width: 22px;
                height: 22px;
                margin-right: 8px;
            }
        }

        .mg-t-10 {
            margin-top: 10px;
        }
    }

    .intermediary-logo {
        width: 85px;
        height: 20px;
        margin-top: 15px;
    }

    .wx-title {
        width: 201px;
        height: 24px;
    }

    .crowd-text {
        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif !important;
        font-weight: 400 !important;
        color: #555555 !important;
    }

    .wx-qrcode-tps-box {
        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #000000;
        margin-top: 30px;

        .icon {
            width: 14px;
            height: 14px;
            margin-right: 8px;
        }
    }

    .crowd-box {
        width: 120px;
        height: 120px;
        margin-top: 30px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 15px;
        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);

        .img {
            width: 100px;
            height: 100px;
        }
    }

    .name-text {
        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
        font-weight: 650;
        color: #000000;
        font-size: 14px;
        margin-left: 8px;
    }

    .wx-qrcode-box {
        width: 120px;
        height: 120px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 70px;
        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        margin-top: 30px;

        .wx-qrcode {
            width: 103px;
            height: 103px;
            border-radius: 50%;
        }
    }

    .user-img {
        width: 74px;
        height: 74px;
        border-radius: 50%;
    }

    .user-name {
        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        text-align: center;
        color: #333;
        margin-top: 8px;
    }

    .user-type {
        margin-top: 15px;
        // background: inherit;
        // background-color: rgba(98, 177, 255, 1);
        // border: none;
        border-radius: 42px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
        font-weight: 400;
        font-style: normal;
        // color: #FFFFFF;
        text-align: center;
        line-height: 24px;
        padding: 0px 6px;
        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;
                }

                .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>
