diff --git a/public/index.html b/public/index.html
index a3fa33c..783a864 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,39 +1,34 @@
 <!DOCTYPE html>
 <html lang="">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <!-- <link rel="icon" href="./favicon.ico"> -->
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+        <title>港校租房</title>
+    </head>
 
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <!-- <link rel="icon" href="./favicon.ico"> -->
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title>港校租房</title>
-</head>
+    <body>
+        <noscript>
+            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+        </noscript>
+        <script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script>
 
-<body>
-  <noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
-      Please enable it to continue.</strong>
-  </noscript>
-  <script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script>
-
-  <div id="app"></div>
-  <div style="display:none;">
-    <script type="text/javascript" src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script>
-    <script type="text/javascript">
-      console.log("111");
-      var _hmt = _hmt || [];
-      (function () {
-        var hm = document.createElement("script");
-        hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746";
-        var s = document.getElementsByTagName("script")[0];
-        s.parentNode.insertBefore(hm, s);
-      })();
-    </script>
-  </div>
-  <!-- built files will be auto injected -->
-  <script src="https://app.gter.net/bottom?tpl=footer"></script>
-
-</body>
-
-</html>
\ No newline at end of file
+        <div id="app"></div>
+        <div style="display: none;">
+            <script type="text/javascript" src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script>
+            <script type="text/javascript">
+                var _hmt = _hmt || []
+                ;(function () {
+                    var hm = document.createElement("script")
+                    hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"
+                    var s = document.getElementsByTagName("script")[0]
+                    s.parentNode.insertBefore(hm, s)
+                })()
+            </script>
+        </div>
+        <!-- built files will be auto injected -->
+        <script src="https://app.gter.net/bottom?tpl=footer"></script>
+    </body>
+</html>
diff --git a/src/assets/img/detail/arrow-circle-blue.svg b/src/assets/img/detail/arrow-circle-blue.svg
new file mode 100644
index 0000000..a302fc0
--- /dev/null
+++ b/src/assets/img/detail/arrow-circle-blue.svg
@@ -0,0 +1,6 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -995 -13670 )">
+    <path d="M 19.796875 12.703125  C 19.984375 12.515625  20.078125 12.28125  20.078125 12  C 20.078125 11.71875  19.984375 11.484375  19.796875 11.296875  L 18.375 9.875  L 12.71875 4.21875  C 12.53125 4.03125  12.296875 3.9375  12.015625 3.9375  C 11.734375 3.9375  11.5 4.03125  11.3125 4.21875  L 9.890625 5.640625  C 9.703125 5.828125  9.609375 6.0625  9.609375 6.34375  C 9.609375 6.625  9.703125 6.859375  9.890625 7.046875  L 12.84375 10  L 5 10  C 4.72916666666667 10  4.49479166666667 10.0989583333333  4.296875 10.296875  C 4.09895833333333 10.4947916666667  4 10.7291666666667  4 11  L 4 13  C 4 13.2708333333333  4.09895833333333 13.5052083333333  4.296875 13.703125  C 4.49479166666667 13.9010416666667  4.72916666666667 14  5 14  L 12.84375 14  L 9.890625 16.953125  C 9.69270833333333 17.1510416666667  9.59375 17.3854166666667  9.59375 17.65625  C 9.59375 17.9270833333333  9.69270833333333 18.1614583333333  9.890625 18.359375  L 11.3125 19.78125  C 11.5 19.96875  11.734375 20.0625  12.015625 20.0625  C 12.296875 20.0625  12.53125 19.96875  12.71875 19.78125  L 18.375 14.125  L 19.796875 12.703125  Z M 22.390625 5.9765625  C 23.4635416666667 7.81510416666666  24 9.82291666666666  24 12  C 24 14.1770833333333  23.4635416666667 16.1848958333333  22.390625 18.0234375  C 21.3177083333333 19.8619791666667  19.8619791666667 21.3177083333333  18.0234375 22.390625  C 16.1848958333333 23.4635416666667  14.1770833333333 24  12 24  C 9.82291666666667 24  7.81510416666667 23.4635416666667  5.9765625 22.390625  C 4.13802083333333 21.3177083333333  2.68229166666667 19.8619791666667  1.609375 18.0234375  C 0.536458333333333 16.1848958333333  0 14.1770833333333  0 12  C 0 9.82291666666666  0.536458333333333 7.81510416666666  1.609375 5.9765625  C 2.68229166666667 4.13802083333333  4.13802083333333 2.68229166666666  5.9765625 1.609375  C 7.81510416666667 0.536458333333331  9.82291666666667 0  12 0  C 14.1770833333333 0  16.1848958333333 0.536458333333331  18.0234375 1.609375  C 19.8619791666667 2.68229166666666  21.3177083333333 4.13802083333333  22.390625 5.9765625  Z " fill-rule="nonzero" fill="#62b1ff" stroke="none" transform="matrix(1 0 0 1 995 13670 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/detail/subway-icon.png b/src/assets/img/detail/subway-icon.png
new file mode 100644
index 0000000..468547c
Binary files /dev/null and b/src/assets/img/detail/subway-icon.png differ
diff --git a/src/assets/img/detail/walk-icon.png b/src/assets/img/detail/walk-icon.png
new file mode 100644
index 0000000..8dc3507
Binary files /dev/null and b/src/assets/img/detail/walk-icon.png differ
diff --git a/src/views/detail.vue b/src/views/detail.vue
index 9d048c2..e1b98ac 100644
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -1,96 +1,56 @@
 <template>
-    <div style="min-width:1200px;overflow-x: hidden;overflow-y: visible;">
+    <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>
+                <breadcrumb :data="housingInfo['data']" :operation="setOperation"></breadcrumb>
                 <div class="dis-f jus-bet" style="margin-top: -15px;">
                     <div class="info-box">
-                        <div style="position:absolute;top:0;left:0">
-                            <el-affix :offset="0" @change="changeTitleType" z-index="1002" style="width: 1200px">
+                        <div style="position: absolute; top: 0; left: 0;">
+                            <el-affix :offset="0" @change="changeTitleType" z-index="1002" style="width: 1200px;">
                                 <div class="top-bar-box dis-f jus-x" v-if="titleType">
                                     <div class="top-bar dis-f al-item jus-bet">
                                         <div class="dis-f al-item">
-                                            <img src="../assets/img/detail/authenticationHousing.png"
-                                                class="authentication-housing" v-if="pageType == 1 &&
-                                                    housingInfo['data'] &&
-                                                    housingInfo['data'].info.verified" alt="">
-                                            <img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo"
-                                                style="margin-right:10px;" v-if="pageType == 2 &&
-                                                    housingInfo['data'] &&
-                                                    housingInfo['data'].isintermediary == 1" alt="">
-                                            <div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
-                                                || pageType == 2 &&
-                                                housingInfo['data'] &&
-                                                housingInfo['data'].isintermediary == 1"></div>
+                                            <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 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>
+                                            <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]
-                                                }}
+                                                {{ 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 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 : '收藏'
-                                                        }}
+                                                    <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="line" style="margin: 0 20px;"></div>
                                                 <div class="dis-f al-item">
-                                                    <img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
+                                                    <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>
+                                                    <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 class="contact-btn top-contact-btn" style="margin: 0 0 0 10px;" @click="getConcatData">
                                                     联系方式
                                                 </div>
                                             </div>
@@ -101,123 +61,71 @@
                         </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="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 }}</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>
+                                {{ 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>
+                            <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 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]
-                                    }}
+                                    {{ 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 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]}` }}
+                                    {{ !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 class="icon"></div>
                                     起租日期
                                 </div>
                                 <div class="type-text">
-                                    {{ housingInfo['data'] && housingInfo['data'].info.leasetime || '随时' }}
+                                    {{ (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="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 }}
+                                <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="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 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="">
+                                                <img src="../assets/img/detail/videoStop.svg" class="icon" alt="" />
                                             </div>
-                                            <img class="video" :src="item.image" @load="setImageWidth(i)"
-                                                @error="setImageWidth(i)" alt="">
+                                            <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="">
+                                            <img class="img" style="margin: 0;" :src="item.thumbnail" @load="setImageWidth(i)" @error="setImageWidth(i)" alt="" />
                                         </div>
                                     </div>
                                 </div>
@@ -225,227 +133,121 @@
                         </div>
                         <div class="housing-info">
                             <div class="title dis-f al-item">
-                                <img src="../assets/img/detail/infoIcon.png" class="img" alt="">
+                                <img src="../assets/img/detail/infoIcon.png" class="img" alt="" />
                                 <span>
-                                    {{ pageType != 3 ? '基本信息' : '基本要求' }}
+                                    {{ 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="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>
+                                        <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="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>
+                                    <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 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="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]
-                                        }}
+                                        {{ 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="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>
+                                        <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="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> {{ 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 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="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]
-                                        }}
+                                        {{ 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="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] :
-                                            '不限'
-                                        }}
+                                        {{ 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="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]
-                                        }}
+                                        {{ 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="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"> {{ 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 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="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] : ''
-                                        }}
+                                        {{ 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="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>
+                                    <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="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]
-                                        }}
+                                        {{ indexData["data"] && indexData["data"]["config"] && indexData["data"]["config"]["gender"][housingInfo["data"] && housingInfo["data"].info.gender] }}
                                     </span>
                                 </div>
                             </div>
@@ -453,145 +255,121 @@
                         <!-- 求房源-目标区域 -->
                         <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="">
+                                <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">
+                            <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)]
-                                        }}
+                                        {{ 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="">
+                                        <img src="../assets/img/detail/moreAllow.svg" class="icon-img" alt="" />
                                     </div>
                                     <div class="text-box">
-                                        {{
-                                            item.length == 1 ? '不限' : location && location[item]
-                                        }}
+                                        {{ 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="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)]
-                                        }}
+                                        {{ 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="">
+                                        <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]
-                                        }}
+                                        {{ 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="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>
+                                <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 class="dis-f jus-x" style="margin-top: 15px;" v-if="housingInfo['data'] && housingInfo['data'].info.latitude">
                                 <div>
-                                    <mapInfo :latlng="{
-                                        longitude: housingInfo['data'].info.longitude * 1,
-                                        latitude: housingInfo['data'].info.latitude * 1
-                                    }" :name="housingInfo['data'].info.address"></mapInfo>
+                                    <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"> -->
-                        <div class="dis-f jus-x pos-r"
-                            v-if="distanceList[0] && distanceList[0].name && pageType != 3 && distanceList.length > 1">
-                            <div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
-                                :style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
-                                <div class="top-box"></div>
+
+                        <div class="dis-f jus-x pos-r" v-if="distanceList[0] && distanceList[0].name && pageType != 3 && distanceList.length > 1">
+                            <!-- <div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }" :style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }"> -->
+                            <div class="distance-info-box pos-r show-distance-info-box" style="height: 611px;">
                                 <div class="title-box dis-f al-item jus-x">
-                                    <span class="title">房源距离院校</span>
-                                    <img src="../assets/img/detail/close.png" class="close-icon"
-                                        @click="showDistance = false" alt="">
+                                    房源
+                                    <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>
-                                <el-scrollbar v-if="distanceList.length > 0" height="500px">
+                                <el-scrollbar v-if="distanceList.length > 0" height="541px">
                                     <div class="distance-info-data dis-f">
-                                        <div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
-                                            :key="index" :class="{ 'mg-t-50': index > 0 }">
-                                            <div class="icon-box dis-f al-item jus-x"
-                                                :class="{ 'home-icon': item && item.address }">
-                                                <div class="line" v-show="index > 0"></div>
-                                                <img src="../assets/img/detail/school.png" class="icon"
-                                                    v-show="item && !item.address" alt="">
-                                                <img src="../assets/img/detail/home.png" class="icon"
-                                                    v-show="item && item.address" alt="">
-                                            </div>
-                                            <div :style="{ 'width': index > 0 ? '200px' : '500px' }">
-                                                {{ item && item.name }}
-                                            </div>
-                                            <div class="dis-f" style="flex-wrap: wrap;width:480px" v-if="index != 0">
-                                                <div v-for="(items, i) in item && item.point" :key="i">
-                                                    <span class="address-info">
-                                                        {{ items.title }}
-                                                    </span>
-                                                    <span v-html="setDistanceList(items && `${items.distance}`)">
-                                                    </span>
-                                                    <!-- <span class="distance-text">
-                                                    1.1公里
-                                                </span> -->
+                                        <div class="distance-info-left">
+                                            <div class="distance-info-left-item flexcenter pitch" v-for="(item, index) in 15" :key="index">中大</div>
+                                        </div>
+
+                                        <div class="distance-info-right flex1">
+                                            <div class="distance-header-box flexacenter">
+                                                <div class="distance-header-icon flexcenter">
+                                                    <img src="@/assets/img/detail/home.png" alt="" class="distance-header-img" />
                                                 </div>
+                                                香港科技大学
                                             </div>
                                         </div>
+                                        <!-- <div class="dis-f al-item school-info" v-for="(item, index) in distanceList" :key="index" :class="{ 'mg-t-50': index > 0 }">
+                                            <div class="icon-box dis-f al-item jus-x" :class="{ 'home-icon': item && item.address }">
+                                                <div class="line" v-show="index > 0"></div>
+                                                <img src="../assets/img/detail/school.png" class="icon" v-show="item && !item.address" alt="" />
+                                                <img src="../assets/img/detail/home.png" class="icon" v-show="item && item.address" alt="" />
+                                            </div>
+                                            <div :style="{ 'width': index > 0 ? '200px' : '500px' }">{{ item && item.name }}</div>
+                                            <div class="dis-f" style="flex-wrap: wrap; width: 480px;" v-if="index != 0">
+                                                <div v-for="(items, i) in item && item.point" :key="i">
+                                                    <span class="address-info">{{ items.title }}</span>
+                                                    <span v-html="setDistanceList(items && `${items.distance}`)"></span>
+                                                </div>
+                                            </div>
+                                        </div> -->
                                     </div>
-                                    <!-- <div class="distance-box-s">
-                            
-                                    </div> -->
                                 </el-scrollbar>
                             </div>
                             <div class="distance-box dis-f jus-bet">
-                                <div class="dis-f al-item" style="position:relative;" @click="setShowDistance">
-                                    <!-- <img src="../assets/img/detail/line.svg" class="line-img" alt=""> -->
-                                    <div class="dis-f al-item s-w-100" style="position:absolute;">
-                                        <div class="line-school-box dis-f al-item s-w-100"
-                                            style="justify-content:space-around;">
-                                            <div v-for="(item, i) in distanceList" class="box-text" :key="item && item.id"
-                                                v-show="i < 9 && item.id">
-                                                <div :class="{ 'far-s': item && item.recently_distance > 4 }"
-                                                    v-if="item && !item.address" class="text-c">
+                                <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 v-for="(item, i) in distanceList" class="box-text" :key="item && item.id" v-show="i < 6 && item.id">
+                                                <!-- <div :class="{ 'far-s': item && item.recently_distance > 4 }" v-if="item && !item.address" class="text-c"> -->
+                                                <!-- <div :class="{ 'far-s': item && item.recently_distance > 4 }" v-if="item && !item.address" class="text-c">
                                                     {{ item && item.recently_distance }}km
+                                                </div> -->
+                                                <div class="distance-item-value flexacenter">
+                                                    <div class="mileage">1.1km</div>
+                                                    <img class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
+                                                    <!-- <img class="tool-icon" src="@/assets/img/detail/subway-icon.png" /> -->
+                                                    <div class="tool-time">21min</div>
                                                 </div>
                                                 <div class="dis-f jus-x" v-if="item && !item.address">
-                                                    <img src="../assets/img/detail/markIcon.svg"
-                                                        v-if="item && item.recently_distance <= 4" class="marker-icon"
-                                                        alt="">
-                                                    <img src="../assets/img/detail/markIconNot.svg"
-                                                        v-if="item && item.recently_distance > 4" class="marker-icon"
-                                                        alt="">
+                                                    <img src="../assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
+                                                    <!-- <img src="../assets/img/detail/markIcon.svg" v-if="item && item.recently_distance <= 4" class="marker-icon" alt="" /> -->
+                                                    <!-- <img src="../assets/img/detail/markIconNot.svg" v-if="item && item.recently_distance > 4" class="marker-icon" alt="" /> -->
                                                 </div>
-                                                <div :class="{ 'far-s': item && item.recently_distance > 4 }" class="text-c"
-                                                    v-if="item && !item.address">{{
-                                                        item && item.alias }}</div>
+                                                <!-- <div :class="{ 'far-s': item && item.recently_distance > 4 }" class="text-c" v-if="item && !item.address">{{ item && item.alias }}</div> -->
+                                                <div class="text-c" v-if="item && !item.address">{{ item && item.alias }}</div>
                                             </div>
                                         </div>
                                     </div>
@@ -599,37 +377,32 @@
                                 </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="">
+                                        更多
+                                        <img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="" />
                                     </div>
-                                    <img src="../assets/img/detail/infoBtnBg.svg" class="info-btn-bg" alt="">
+                                    <img src="../assets/img/detail/infoBtnBg.svg" class="info-btn-bg" alt="" />
                                 </div>
                             </div>
                         </div>
                         <div class="map-box">
                             <div class="dis-f al-item title-box">
-                                <img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt="">
+                                <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 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>
+                                房源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 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 }}
+                                        {{ housingInfo["data"] && housingInfo["data"].info.count_fav }}
                                     </span>
                                 </span>
                             </div>
@@ -637,15 +410,15 @@
                             <div class="dis-f al-item">
                                 <span>
                                     发布 : &nbsp;<span class="text">
-                                        {{ housingInfo['data'] && housingInfo['data'].info.timestamp }}
+                                        {{ 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">
+                            <div class="dis-f al-item" style="border-right: 0px;">
                                 <span>
                                     更新 : &nbsp;<span class="text">
-                                        {{ housingInfo['data'] && housingInfo['data'].info.updatetime }}
+                                        {{ housingInfo["data"] && housingInfo["data"].info.updatetime }}
                                     </span>
                                 </span>
                             </div>
@@ -660,13 +433,10 @@
                                     如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
                                     <el-popover placement="bottom" trigger="hover">
                                         <div class="wx-qrcode-s">
-                                            <img :src="concatInfo.data && concatInfo.data.wechatqrcode"
-                                                style="width:130px;height:130px" alt="">
+                                            <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>
+                                            <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;">
@@ -681,108 +451,69 @@
                                     ），我们会及时处理。谢谢！
                                 </div>
                             </div>
-                            <div class="mg-t-30">
-                                公寓/酒店/中介房源推广合作请联系：<span class="text-line" @click="clone('ad@gter.net')">ad@gter.net</span>
-                            </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="">
+                                <img :src="housingInfo['data'] && housingInfo['data'].info.avatar" class="user-img" alt="" />
                             </div>
                             <div class="user-name">
-                                {{ housingInfo['data'] && housingInfo['data'].info.author }}
+                                {{ 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 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="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]
-                                    }}
+                                    {{ 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>
+                                <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 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 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>
+                                    <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>
+                                    <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>
+                                    <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>
+                                    <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="">
+                                        <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 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>
+                        <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>
@@ -790,36 +521,28 @@
         </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="">
+            <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 class="body-maxWidth housing-title" style="margin-top: 50px;">
+                {{ pageType == 2 && housingInfo["data"].isintermediary ? `发布者的其他房源（${publisherList.length}）` : pageType == 1 && housingInfo["data"] && housingInfo["data"]["info"].verified ? `发布者的其他认证房源（${publisherList.length}）` : "附近房源" }}
             </div>
         </div>
-        <div class="dis-f  jus-x al-item" style="position: relative;" v-if="pageType != 3">
+        <div class="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, i) in recommendListData" :data="items" :key="items.id">
-                        </indexWaterfallBox>
+                    <div ref="gridContainer" style="margin-top: 15px; display: flex; flex-wrap: wrap; margin-bottom: 50px; width: 876px;">
+                        <indexWaterfallBox v-for="(items, i) in recommendListData" :data="items" :key="items.id"> </indexWaterfallBox>
                     </div>
                 </div>
                 <div class="body-maxWidth" v-if="publisherList.length > 0">
-                    <div style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
-                        <biserialItem v-for="(item, i) in publisherList" :detailShow="true" :key="i" :item="item">
-                        </biserialItem>
+                    <div 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 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>
@@ -828,106 +551,87 @@
         <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 }">
+            <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 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 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="">
+                                                <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 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="">
+                                                <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 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="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="">
+                                                <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 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 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="">
+                                            <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 style="margin-top: 15px; font-size: 14px; text-align: center;">
                                             <div>
                                                 微信扫码添加好友
                                             </div>
-                                            <div style="margin-top:5px;font-size:14px;">
+                                            <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="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 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 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">
@@ -941,14 +645,11 @@
                                             </div>
                                         </div>
                                         <div class="text-s">
-                                            {{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat
-                                                ||
-                                                '' }}
+                                            {{ 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 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>
@@ -956,14 +657,13 @@
                                     <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="">
+                                            <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 style="margin-top: 15px; font-size: 14px; text-align: center;">
                                             <div>
                                                 微信扫码添加好友
                                             </div>
-                                            <div style="margin-top:5px;font-size:14px;">
+                                            <div style="margin-top: 5px; font-size: 14px;">
                                                 备注：寄托租房
                                             </div>
                                         </div>
@@ -983,51 +683,38 @@
                                 </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="">
+                        <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="">
+                <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="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="">
+                                    <img :src="concatData.data && concatData.data.wechatdata.url" class="img" alt="" />
                                 </div>
-                                <div style="margin-top:15px">
+                                <div style="margin-top: 15px;">
                                     <div>
                                         微信扫码添加好友
                                     </div>
-                                    <div style="margin-top:5px">
+                                    <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="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>
@@ -1038,25 +725,22 @@
                                     微信
                                 </div>
                                 <div class="whatsapp-text">
-                                    {{ concatData.data.whatsapp || concatData.data.tel || concatData.data.wechat || ''
-                                    }}
+                                    {{ 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 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="">
+                        <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="">
+                <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>
@@ -1065,36 +749,36 @@
     <!-- 举报 -->
     <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';
+<script setup>
+import { reactive, onMounted, ref, nextTick, onBeforeUnmount, watch } from "vue"
+import pageTopBar from "../components/pageTopBar/pageTopBar.vue"
+import api from "../utils/api"
+import footerTool from "@/components/footer/footer.vue"
+import watchImage from "../components/detail/imageWatch.vue"
+import breadcrumb from "../components/detail/breadcrumb.vue"
+import mapInfo from "../components/public/viewMap.vue"
+import { ElMessage } from "element-plus"
+import { useRouter, useRoute } from "vue-router"
+import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue"
+import Masonry from "masonry-layout"
+import transmitBtn from "@/components/public/transmitBtn.vue"
+import biserialItem from "../components/biserialListItem/biserialListItem.vue"
+import backToTop from "@/components/public/backToTop.vue"
+import phoneqrcode from "@/components/public/phoneQRcode.vue"
+import groupqrcode from "@/components/public/group-QRcode.vue"
+import report from "@/components/public/report.vue"
+
+import store from "@/store"
 
 //页面类型
-let pageType = ref('')
+let pageType = ref("")
 
 //加载状态
 let loadMore = ref(true)
 //推荐列表页数
 let pages = ref(1)
-let uniqid = ref('')
+let uniqid = ref("")
 
 //显示中介名片
 let showBusinessCard = ref(false)
@@ -1115,15 +799,15 @@ let imageLIstLeft = ref([])
 
 let imgListTab = ref(0)
 //计时器
-let interval = ''
+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++
+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++
     // console.log(imageLIstLeft.value[imgListTab.value])
     setOffsetWidth(imageLIstLeft.value[imgListTab.value], type)
 }
@@ -1138,8 +822,8 @@ let setOffsetWidth = (num, type) => {
             clearInterval(interval)
             return
         }
-        scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
-        if ((type === 'left' ? num >= scroll : num <= scroll)) {
+        scroll = type === "left" ? (imageList.value.scrollLeft -= 10) : (imageList.value.scrollLeft += 10)
+        if (type === "left" ? num >= scroll : num <= scroll) {
             scrollMove = false
             clearInterval(interval)
         }
@@ -1155,7 +839,7 @@ let imgScrollBottom = () => {
 
 let imgData = ref(null)
 //获取图片宽度
-let setImageWidth = (num) => {
+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
@@ -1168,14 +852,17 @@ let setImageWidth = (num) => {
 let distanceList = ref([])
 
 //地址数字高亮
-let setDistanceList = (text = '') => {
+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;
+    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>`)
+                            margin-left: 5px;">${text.match(oRegExp) ? text.match(oRegExp)[0] : ""}公里</span>`
+    )
     return text
 }
 
@@ -1199,23 +886,23 @@ let changeConcatType = () => {
 }
 
 //复制
-let clone = (text) => {
-    const textareaEle = document.createElement("textarea");
-    document.body.appendChild(textareaEle);
+let clone = text => {
+    const textareaEle = document.createElement("textarea")
+    document.body.appendChild(textareaEle)
     // 2. 将需要复制的文本传入输入框, 并调用 select 方法, 选中输入框中文本
-    textareaEle.value = text;
-    textareaEle.select();
-    textareaEle.readOnly = 'readOnly';
+    textareaEle.value = text
+    textareaEle.select()
+    textareaEle.readOnly = "readOnly"
     // 3. 调用复制选中文本的方法
-    document.execCommand('copy');
+    document.execCommand("copy")
     // 4. 销毁输入框
-    document.body.removeChild(textareaEle);
+    document.body.removeChild(textareaEle)
     ElMessage({
-        message: '复制成功',
+        message: "复制成功",
         center: true,
         offset: 320,
         duration: 1000,
-        customClass: 'message-info'
+        customClass: "message-info",
     })
 }
 
@@ -1235,21 +922,19 @@ let setHousingArr = () => {
     // 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'
+    if (housingInfo["data"].info.video) {
+        housingInfo["data"].info.video.forEach(element => {
+            element["type"] = "videos"
         })
 
-        imgList.value = [...imgList.value, ...housingInfo['data'].info.video]
+        imgList.value = [...imgList.value, ...housingInfo["data"].info.video]
     }
-    if (housingInfo['data'].info.picturegroup) {
-        housingInfo['data'].info.picturegroup.forEach(element => {
-            element['type'] = 'attachment'
+    if (housingInfo["data"].info.picturegroup) {
+        housingInfo["data"].info.picturegroup.forEach(element => {
+            element["type"] = "attachment"
         })
-        imgList.value = [...imgList.value, ...housingInfo['data'].info.picturegroup]
+        imgList.value = [...imgList.value, ...housingInfo["data"].info.picturegroup]
     }
-
-
 }
 
 let location = store.state.indexData.config && store.state.indexData.config.location
@@ -1257,77 +942,74 @@ let location = store.state.indexData.config && store.state.indexData.config.loca
 // intermediary 1中介 2-5个人 6求房源
 let setNavigation = () => {
     let type = store.state.indexData.config && store.state.indexData.config.type
-    indexData['data'] = store.state.indexData
+    indexData["data"] = store.state.indexData
     if (!location) return
     if (pageType.value == 1 || pageType.value == 2) {
         // location=3.8,3.13&areaItem=3
-        store.state.routeList['secondaryIndex'] = {
-            path: pageType.value === 2 ? '/intermediaryHousing' :
-                pageType.value === 3 ? '/needHousing' : '/personHousing',
-            title: pageType.value === 2 ? '中介房源' :
-                pageType.value === 3 ? '求房源' : '个人房源'
+        store.state.routeList["secondaryIndex"] = {
+            path: pageType.value === 2 ? "/intermediaryHousing" : pageType.value === 3 ? "/needHousing" : "/personHousing",
+            title: pageType.value === 2 ? "中介房源" : pageType.value === 3 ? "求房源" : "个人房源",
         }
-        store.state.routeList['thirdIndex'] = {
-            path: `${store.state.routeList['secondaryIndex'].path}`,
+        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)
+                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)]}房源`
+            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'] = {
+        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
+                    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}`,
+                path: `${store.state.routeList["secondaryIndex"].path}`,
 
-                title: `${location[housingInfo['data']['info'].location]}${type[housingInfo['data']['info'].type]}`
+                title: `${location[housingInfo["data"]["info"].location]}${type[housingInfo["data"]["info"].type]}`,
             }
     } else {
         store.state.routeList = {
             index: {
-                path: '/',
-                title: '港校租房'
+                path: "/",
+                title: "港校租房",
             },
             secondaryIndex: {
-                path: '/needHousing',
-                title: '求房源'
-            }
+                path: "/needHousing",
+                title: "求房源",
+            },
         }
     }
 }
 //中介数据
 let contacts = reactive({
-    data: {
-    }
+    data: {},
 })
 
 //获取房源详情
 let getHousingInfo = () => {
     api.details({
         uniqid: uniqid.value,
-        uid: store.state.user.uid
+        uid: store.state.user.uid,
     }).then(res => {
         // console.log(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求房源
+            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 = housingInfo["data"]["info"].pointData || []
             distanceList.value.unshift({
                 address: true,
-                name: housingInfo['data']['info'].address,
+                name: housingInfo["data"]["info"].address,
             })
-            concatInfo['data'] = store.state.indexData.wechat
-            if (res.data.contacts) contacts['data'] = res.data.contacts
+            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)) {
+            if ((pageType.value == 2 && housingInfo["data"].isintermediary) || (pageType.value == 1 && housingInfo["data"]["info"].verified)) {
                 getPublisherList()
             } else if (pageType.value != 3) {
                 recommendList()
@@ -1335,12 +1017,10 @@ let getHousingInfo = () => {
                 loadMore.value = false
             }
 
-            document.title = data?.info?.subject || '港校租房-详情'
-
-
+            document.title = data?.info?.subject || "港校租房-详情"
         } else {
             ElMessage({
-                message: res.message
+                message: res.message,
             })
             loadMore.value = false
         }
@@ -1350,15 +1030,15 @@ let getHousingInfo = () => {
 //收藏
 let setOperation = () => {
     api.operation({
-        token: housingInfo['data'].token
+        token: housingInfo["data"].token,
     }).then(res => {
         // console.log(res)
         if (res.code === 200) {
-            housingInfo['data'].info.count_fav = res.data.count
-            housingInfo['data'].isfav = res.data.status
+            housingInfo["data"].info.count_fav = res.data.count
+            housingInfo["data"].isfav = res.data.status
         } else {
             ElMessage({
-                message: res.message
+                message: res.message,
             })
         }
     })
@@ -1367,48 +1047,46 @@ let setOperation = () => {
 //获取联系方式
 let concatData = reactive({})
 let getConcatData = () => {
-    if (concatData['data']) {
+    if (concatData["data"]) {
         showConcat.value = true
         return
     }
     api.contactData({
-        token: housingInfo['data'].token
+        token: housingInfo["data"].token,
     }).then(res => {
         if (res.code === 200) {
             showConcat.value = true
-            concatData['data'] = res.data
+            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)) {
+            Object.keys(concatData["data"]).map(res => {
+                if ((concatData["data"][res] && res != "wechatdata") || (res === "wechatdata" && concatData["data"][res].aid != 0)) {
                     dataCount++
                 }
             })
-            concatData['data']['count'] = dataCount
+            concatData["data"]["count"] = dataCount
         }
     })
 }
 
 //判断更新时间
-let checkUpdateTime = (Time) => {
-    const now = new Date();
+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 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');
+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
@@ -1416,7 +1094,7 @@ const onPageSrcoll = (e) => {
         if (loadMore.value) {
             loadMore.value = false
             pages.value += 1
-            if (housingInfo['data'] && housingInfo['data'].isintermediary) {
+            if (housingInfo["data"] && housingInfo["data"].isintermediary) {
                 getPublisherList()
             } else {
                 recommendList()
@@ -1430,25 +1108,25 @@ let recommendListData = ref([])
 //广告参数
 let pagevalue = ref(0)
 //加载提示
-let loadText = ref('下拉加载更多')
+let loadText = ref("下拉加载更多")
 //获取瀑布流数据
 let recommendList = () => {
-    loadText.value = '加载中.....'
+    loadText.value = "加载中....."
     api.recommendList({
         page: pages.value,
         limit: 30,
-        type: 'nearby',
+        type: "nearby",
         pagevalue: pagevalue.value,
-        token: housingInfo['data'].token
+        token: housingInfo["data"].token,
     }).then(res => {
         // console.log(res)
         if (res.code === 200) {
             if (res.data.data && res.data.data.length >= 30) {
                 loadMore.value = true
-                loadText.value = '下拉加载更多'
+                loadText.value = "下拉加载更多"
             } else {
                 loadMore.value = false
-                loadText.value = '到底了'
+                loadText.value = "到底了"
             }
             if (res.data.length === 0) return
             if (res.data.pagevalue) {
@@ -1456,12 +1134,12 @@ let recommendList = () => {
                 pagevalue.value = res.data.pagevalue
             }
             nextTick(() => {
-                masonryInstance.reloadItems();
-                masonryInstance.layout();
+                masonryInstance.reloadItems()
+                masonryInstance.layout()
 
                 setTimeout(() => {
-                    masonryInstance.reloadItems();
-                    masonryInstance.layout();
+                    masonryInstance.reloadItems()
+                    masonryInstance.layout()
                 }, 3000)
             })
         } else {
@@ -1480,7 +1158,7 @@ let getPublisherList = () => {
     api.publisherList({
         page: pages.value,
         limit: 30,
-        token: housingInfo['data'].token
+        token: housingInfo["data"].token,
     }).then(res => {
         // console.log(res)
         if (res.code === 200) {
@@ -1488,7 +1166,7 @@ let getPublisherList = () => {
                 loadMore.value = true
             } else {
                 loadMore.value = false
-                loadText.value = '到底了'
+                loadText.value = "到底了"
             }
             publisherList.value = publisherList.value.concat(res.data)
         } else {
@@ -1500,7 +1178,7 @@ let getPublisherList = () => {
 }
 
 //瀑布流模块
-const gridContainer = ref(null);
+const gridContainer = ref(null)
 let masonryInstance = null
 
 let router = useRouter()
@@ -1509,7 +1187,7 @@ let route = useRoute()
 watch(route, () => {
     let { id } = router.currentRoute.value.query
     uniqid.value = id
-    pageType.value = housingInfo['data']['info'].intermediary === 1 ? 2 : housingInfo['data']['info'].intermediary === 6 ? 3 : 1  //1个人  2中介  3求房源
+    pageType.value = housingInfo["data"]["info"].intermediary === 1 ? 2 : housingInfo["data"]["info"].intermediary === 6 ? 3 : 1 //1个人  2中介  3求房源
     publisherList.value = []
     recommendListData.value = []
     getHousingInfo()
@@ -1522,17 +1200,17 @@ onMounted(() => {
     getHousingInfo()
     // distanceSchool()
     masonryInstance = new Masonry(gridContainer.value, {
-        itemSelector: '.item',
-        gutter: 10
-    });
+        itemSelector: ".item",
+        gutter: 10,
+    })
     if (pageType.value != 3) {
-        window.addEventListener('scroll', onPageSrcoll);
+        window.addEventListener("scroll", onPageSrcoll)
         document.body.scrollTop = 0
     }
 })
 
 onBeforeUnmount(() => {
-    window.removeEventListener('scroll', onPageSrcoll);
+    window.removeEventListener("scroll", onPageSrcoll)
 })
 
 // 获取 距离学校距离
@@ -1540,10 +1218,9 @@ const distanceSchool = () => {
     api.detailsDistance({
         uniqid: uniqid.value,
     }).then(res => {
-        console.log("res",res);
+        console.log("res", res)
     })
 }
-
 </script>
 <style scoped lang="less">
 img {
@@ -1602,7 +1279,7 @@ img {
 }
 
 .housing-title {
-    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
     font-weight: 650;
     font-style: normal;
     font-size: 20px;
@@ -1610,7 +1287,7 @@ img {
 }
 
 .bottom-tps {
-    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 14px;
@@ -1627,10 +1304,10 @@ img {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
-    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
     font-weight: 400;
     font-style: normal;
-    color: #FFFFFF;
+    color: #ffffff;
     text-align: center;
     padding: 0px 5px;
     font-size: 14px;
@@ -1649,11 +1326,11 @@ img {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
-    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 16px;
-    color: #FFFFFF;
+    color: #ffffff;
     cursor: pointer;
 
     .icon {
@@ -1732,7 +1409,7 @@ img {
             .pop-big-bg {
                 width: 700px;
                 height: 368px;
-                font-family: 'ArialMT', 'Arial', sans-serif;
+                font-family: "ArialMT", "Arial", sans-serif;
                 font-weight: 400;
                 font-style: normal;
                 font-size: 13px;
@@ -1784,7 +1461,7 @@ img {
                     position: absolute;
                     z-index: 333;
                     padding: 0px 80px 0 45px;
-                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                     font-weight: 400;
                     font-style: normal;
                     font-size: 16px;
@@ -1805,14 +1482,14 @@ img {
                     }
 
                     .whatsapp-wx-box {
-                        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                        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-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                             font-weight: 650;
                             font-style: normal;
                             font-size: 24px;
@@ -1828,12 +1505,12 @@ img {
                             width: 1px;
                             height: 190px;
                             border: 1px solid #e2e7ec;
-                            margin: 0 30px 0 30px
+                            margin: 0 30px 0 30px;
                         }
                     }
 
                     .liner-title {
-                        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+                        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                         font-weight: 650;
                         font-style: normal;
                         font-size: 24px;
@@ -1850,7 +1527,7 @@ img {
                     }
 
                     .box-text {
-                        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+                        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                         font-weight: 650;
                         font-style: normal;
                         font-size: 18px;
@@ -1914,7 +1591,7 @@ img {
         .pop-bg-s {
             width: 320px;
             height: 320px;
-            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
             font-weight: 400;
             font-style: normal;
             text-align: center;
@@ -1922,7 +1599,7 @@ img {
             font-size: 14px;
 
             .whatsapp-title {
-                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                 font-weight: 400;
                 font-style: normal;
                 font-size: 16px;
@@ -1930,7 +1607,7 @@ img {
             }
 
             .whatsapp-text {
-                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                 font-weight: 650;
                 font-style: normal;
                 font-size: 24px;
@@ -1968,7 +1645,7 @@ img {
             }
 
             .title {
-                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                 font-weight: 650;
                 font-style: normal;
                 font-size: 20px;
@@ -1979,7 +1656,6 @@ img {
         }
     }
 
-
     .pop {
         width: 400px;
         height: 400px;
@@ -2030,7 +1706,7 @@ img {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
-    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 17px;
@@ -2075,22 +1751,22 @@ img {
         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-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-family: "Arial-Black", "Arial Black", sans-serif;
             font-weight: 900;
             color: #000000;
         }
 
         .rent {
-            font-family: 'Arial-Black', 'Arial Black', sans-serif;
+            font-family: "Arial-Black", "Arial Black", sans-serif;
             font-weight: 900;
-            color: #F95D5D;
+            color: #f95d5d;
             margin: 0 5px;
         }
 
@@ -2110,7 +1786,8 @@ img {
             width: 210px;
         }
 
-        .fav-btn {}
+        .fav-btn {
+        }
 
         .fav-btn:hover .fav-img-f {
             opacity: 0.4;
@@ -2162,7 +1839,6 @@ img {
     }
 }
 
-
 .right-tool-box {
     width: 304px;
     background: inherit;
@@ -2184,11 +1860,11 @@ img {
         background-color: rgba(246, 246, 246, 0.603921568627451);
         border: none;
         border-radius: 8px;
-        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 13px;
-        color: #7F7F7F;
+        color: #7f7f7f;
         padding: 20px 10px;
         margin-top: 30px;
         box-sizing: border-box;
@@ -2205,7 +1881,7 @@ img {
             border-style: solid;
             border-color: rgba(215, 215, 215, 1);
             border-radius: 4px;
-            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
             font-weight: 400;
             font-style: normal;
             font-size: 14px;
@@ -2237,13 +1913,13 @@ img {
     }
 
     .crowd-text {
-        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif !important;
+        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-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 14px;
@@ -2276,7 +1952,7 @@ img {
     }
 
     .name-text {
-        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
         font-weight: 650;
         color: #000000;
         font-size: 14px;
@@ -2309,7 +1985,7 @@ img {
     }
 
     .user-name {
-        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 14px;
@@ -2327,7 +2003,7 @@ img {
         -moz-box-shadow: none;
         -webkit-box-shadow: none;
         box-shadow: none;
-        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
         font-weight: 400;
         font-style: normal;
         // color: #FFFFFF;
@@ -2340,7 +2016,7 @@ img {
     }
 
     .time-box {
-        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 14px;
@@ -2373,23 +2049,23 @@ img {
     /* z-index: 333; */
 
     .detail-price-box {
-        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        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-family: "Arial-Black", "Arial Black", sans-serif;
             font-weight: 900;
             font-size: 28px;
-            color: #F95D5D;
+            color: #f95d5d;
             margin: 0 5px;
             line-height: 22px;
         }
 
         .unit {
-            font-family: 'Arial-Black', 'Arial Black', sans-serif;
+            font-family: "Arial-Black", "Arial Black", sans-serif;
             font-weight: 900;
             color: #000000;
             line-height: 13px;
@@ -2415,10 +2091,10 @@ img {
 
         .condition {
             padding: 15px 0;
-            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
             font-weight: 400;
             font-style: normal;
-            color: #7F7F7F;
+            color: #7f7f7f;
             width: 272px;
 
             .icon {
@@ -2431,7 +2107,7 @@ img {
 
             .type-text {
                 margin-top: 8px;
-                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                 font-weight: 650;
                 font-style: normal;
                 font-size: 17px;
@@ -2465,7 +2141,7 @@ img {
             line-height: 20px;
             text-align: center;
             color: #333333;
-            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
             font-weight: 400;
             font-style: normal;
             font-size: 14px;
@@ -2533,7 +2209,7 @@ img {
                     height: 100px;
                     border-radius: 10px;
                     margin-right: 10px;
-                    flex-shrink: 0
+                    flex-shrink: 0;
                 }
             }
 
@@ -2559,7 +2235,7 @@ img {
 
         .need-housing-location {
             margin-top: 20px;
-            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
             font-weight: 400;
             font-style: normal;
             font-size: 15px;
@@ -2592,10 +2268,10 @@ img {
             margin-top: 30px;
 
             .info {
-                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                 font-weight: 400;
                 font-style: normal;
-                color: #7F7F7F;
+                color: #7f7f7f;
                 font-size: 14px;
 
                 .title-box {
@@ -2603,7 +2279,7 @@ img {
                 }
 
                 .text {
-                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                     font-weight: 400;
                     font-style: normal;
                     font-size: 15px;
@@ -2630,10 +2306,10 @@ img {
 
             .info {
                 width: 271px;
-                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                 font-weight: 400;
                 font-style: normal;
-                color: #7F7F7F;
+                color: #7f7f7f;
                 font-size: 14px;
                 padding: 15px 0;
 
@@ -2642,7 +2318,7 @@ img {
                 }
 
                 .text {
-                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                     font-weight: 400;
                     font-style: normal;
                     font-size: 15px;
@@ -2659,7 +2335,7 @@ img {
         }
 
         .title {
-            font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
             font-weight: 650;
             font-style: normal;
             font-size: 20px;
@@ -2668,10 +2344,10 @@ img {
     }
 
     .statement-box {
-        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
         font-weight: 400;
         font-style: normal;
-        color: #7F7F7F;
+        color: #7f7f7f;
         font-size: 13px;
         margin-top: 30px;
 
@@ -2706,11 +2382,11 @@ img {
         }
 
         .title {
-            font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
+            font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
             font-weight: 700;
             font-style: normal;
             font-size: 15px;
-            color: #7F7F7F;
+            color: #7f7f7f;
         }
     }
 
@@ -2725,10 +2401,10 @@ img {
         border-radius: 10px;
         margin-top: 45px;
         padding: 10px 15px;
-        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
         font-weight: 400;
         font-style: normal;
-        color: #7F7F7F;
+        color: #7f7f7f;
         font-size: 13px;
 
         .houseing-info-box-s {
@@ -2759,7 +2435,7 @@ img {
 
         .introduce-text {
             line-height: 35px;
-            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
             font-weight: 400;
             font-style: normal;
             font-size: 15px;
@@ -2769,7 +2445,7 @@ img {
         }
 
         .title-box {
-            font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
             font-weight: 650;
             font-style: normal;
             font-size: 20px;
@@ -2816,11 +2492,11 @@ img {
                     -moz-box-shadow: none;
                     -webkit-box-shadow: none;
                     box-shadow: none;
-                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                     font-weight: 400;
                     font-style: normal;
                     font-size: 18px;
-                    color: #FFFFFF;
+                    color: #ffffff;
                     padding: 10px;
 
                     .img {
@@ -2877,93 +2553,87 @@ img {
         //     width: 8px;
         // }
 
-        .distance-info-data {
-            padding: 30px 45px 0 45px;
-            position: relative;
-            justify-content: space-around;
-            flex-direction: column;
+        // .distance-info-data {
+        //     padding: 30px 45px 0 45px;
+        //     position: relative;
+        //     justify-content: space-around;
+        //     flex-direction: column;
 
-            .home-icon {
-                background: #ffcc17 !important;
-            }
+        //     .home-icon {
+        //         background: #ffcc17 !important;
+        //     }
 
-            .icon-box {
-                width: 32px;
-                height: 32px;
-                border-radius: 50%;
-                background: #50e3c2;
-                margin-right: 15px;
-                position: relative;
-            }
+        //     .icon-box {
+        //         width: 32px;
+        //         height: 32px;
+        //         border-radius: 50%;
+        //         background: #50e3c2;
+        //         margin-right: 15px;
+        //         position: relative;
+        //     }
 
-            .icon {
-                width: 20px;
-                height: 20px;
-            }
+        //     .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;
-            }
+        //     .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;
-            }
+        //     .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;
+        //     .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;
-                }
-            }
-        }
+        //         .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;
+            // position: absolute;
+            // top: 0;
+            // left: 0;
             height: 70px;
-            background: -webkit-linear-gradient(270deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
-            background: -moz-linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
-            background: linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%);
-            box-sizing: border-box;
-            border-width: 1px;
-            border-color: rgba(235, 235, 235, 1);
-            border-radius: 16px;
-            border-bottom-right-radius: 0px;
-            border-bottom-left-radius: 0px;
-            -moz-box-shadow: none;
-            -webkit-box-shadow: none;
-            box-shadow: none;
-            width: 100%;
+            // 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;
-            }
+            // .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;
             }
@@ -2992,7 +2662,7 @@ img {
             height: 101px;
 
             .box-text {
-                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                 font-weight: 400;
                 font-style: normal;
                 font-size: 14px;
@@ -3000,15 +2670,15 @@ img {
             }
 
             .text-c {
-                text-align: center
+                text-align: center;
             }
 
             .far-s {
-                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                 font-weight: 400;
                 font-style: normal;
                 font-size: 14px;
-                color: #7F7F7F;
+                color: #7f7f7f;
                 text-align: center;
             }
 
@@ -3030,7 +2700,7 @@ img {
         .address-box {
             height: 100%;
             padding: 15px 0;
-            font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
             font-weight: 650;
             font-style: normal;
             font-size: 14px;
@@ -3043,7 +2713,7 @@ img {
             }
 
             .address-text {
-                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                 font-weight: 400;
                 font-style: normal;
                 font-size: 14px;
@@ -3061,7 +2731,7 @@ img {
             align-items: center;
 
             .info-btn-s {
-                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                 font-weight: 400;
                 font-style: normal;
                 font-size: 14px;
@@ -3112,5 +2782,87 @@ img {
 .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;
+
+        .distance-arrow {
+            width: 24px;
+            height: 24px;
+            margin: 0 28px;
+        }
+    }
+
+    .distance-info-data {
+        .distance-info-left {
+            width: 70px;
+            flex-direction: column;
+            border-right: 1px solid #ebebeb;
+
+            .distance-info-left-item {
+                width: 69px;
+                height: 50px;
+                box-sizing: content-box;
+                &.pitch {
+                    background: linear-gradient(to right, rgba(255, 255, 255, 0.8) -14%, rgba(80, 227, 194, 0.8) 100%);
+                }
+            }
+        }
+
+        .distance-info-right {
+            .distance-header-box {
+                color: #333333;
+                font-weight: 650;
+                font-size: 20px;
+
+                .distance-header-icon {
+                    width: 36px;
+                    height: 36px;
+                    background-color: #fddf6d;
+                    border-radius: 50%;
+                    margin-right: 10px;
+
+                    .distance-header-img {
+                        width: 24px;
+                        height: 24px;
+                    }
+                }
+            }
+        }
+    }
+}
 </style>
-  
\ No newline at end of file
