From 6ce8b8f5ba79bc0d60ea512391d1ec3de89cab64 Mon Sep 17 00:00:00 2001 From: luJianJun <2587063613@qq.com> Date: Thu, 3 Aug 2023 16:55:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/detail.vue | 317 ++++++++++++++++++++++--------------------- 1 file changed, 163 insertions(+), 154 deletions(-) diff --git a/src/views/detail.vue b/src/views/detail.vue index 5021692..478d182 100644 --- a/src/views/detail.vue +++ b/src/views/detail.vue @@ -470,52 +470,54 @@ -
-
-
-
-
- 房源距离院校 - -
-
-
-
-
-
- - -
+
+
+
+ 房源距离院校 + +
+
+
+
+
+
+ + +
+
{{ item && item.name }} -
-
- - {{ items.title }} - - - - -
+
+
+ v-show="i < 9 && item.id">
{{ item && item.recently_distance }}km @@ -557,8 +559,7 @@
房源ID :  {{ housingInfo['data'] && housingInfo['data'].info.id - }} + housingInfo['data'].info.id)">{{ housingInfo['data'] && housingInfo['data'].info.id}} 浏览 :{{ housingInfo['data'] && housingInfo['data'].info.count_view }} @@ -1177,7 +1178,7 @@ let clone = (text) => { message: '复制成功', center: true, offset: 320, - duration:1000, + duration: 1000, customClass: 'message-info' }) } @@ -2623,7 +2624,9 @@ img { .houseing-info-box-s { height: 17px; width: 1px; - border-right: 1px dashed #d7d7d7; + background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%); + background-size: 4px 2px; + background-repeat: repeat-y; } .browse-box { @@ -2736,6 +2739,126 @@ img { transition: all 0.2s linear; } + .distance-info-box { + background: inherit; + background-color: rgba(255, 255, 255, 1); + box-sizing: border-box; + height: 0; + border-radius: 16px; + position: absolute; + left: 0; + top: 130px; + z-index: 666; + width: 100%; + max-height: 610px; + transition: all 0.2s linear; + overflow: hidden; + + .top-box { + height: 70px; + } + + .distance-box-s { + height: 500px; + overflow-y: scroll; + } + .distance-box-s ::-webkit-scrollbar{ + width: 8px; + } + + .distance-info-data { + padding: 30px 45px 0 45px; + position: relative; + justify-content: space-around; + flex-direction: column; + + .home-icon { + background: #ffcc17 !important; + } + + .icon-box { + width: 32px; + height: 32px; + border-radius: 50%; + background: #50e3c2; + margin-right: 15px; + position: relative; + } + + .icon { + width: 20px; + height: 20px; + } + + .line { + background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%); + background-size: 5px 2px; + background-repeat: repeat-y; + height: 50px; + width: 1px; + position: absolute; + top: -50px; + } + + .mg-t-50 { + margin-top: 50px; + } + + .school-info { + font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #333; + + .address-info { + font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #333; + margin-left: 30px; + } + } + } + + .title-box { + position: absolute; + top: 0; + left: 0; + height: 70px; + background: -webkit-linear-gradient(270deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%); + background: -moz-linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%); + background: linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%); + box-sizing: border-box; + border-width: 1px; + border-style: solid; + border-color: rgba(235, 235, 235, 1); + border-radius: 16px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + width: 100%; + + .title { + font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #000000; + } + + .close-icon { + width: 16px; + height: 16px; + position: absolute; + right: 20px; + } + } + } + .distance-box { width: 100%; height: 101px; @@ -2749,122 +2872,6 @@ img { margin-top: 20px; cursor: pointer; position: relative; - - .distance-info-box { - background: inherit; - background-color: rgba(255, 255, 255, 1); - box-sizing: border-box; - height: 0; - border-radius: 16px; - position: absolute; - left: 0; - top: 110px; - z-index: 666; - width: 100%; - max-height: 610px; - transition: all 0.2s linear; - overflow: hidden; - - .top-box { - height: 70px; - } - - .distance-box-s { - height: 500px; - overflow-y: scroll; - } - - .distance-info-data { - padding: 30px 45px 0 45px; - position: relative; - justify-content: space-around; - flex-direction: column; - - .home-icon { - background: #ffcc17 !important; - } - - .icon-box { - width: 32px; - height: 32px; - border-radius: 50%; - background: #50e3c2; - margin-right: 15px; - position: relative; - } - - .icon { - width: 20px; - height: 20px; - } - - .line { - height: 50px; - width: 1px; - border-left: 1px dashed #e7e7e7; - position: absolute; - top: -50px; - } - - .mg-t-50 { - margin-top: 50px; - } - - .school-info { - font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; - font-weight: 650; - font-style: normal; - font-size: 16px; - color: #333; - - .address-info { - font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #333; - margin-left: 30px; - } - } - } - - .title-box { - position: absolute; - top: 0; - left: 0; - height: 70px; - background: -webkit-linear-gradient(270deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%); - background: -moz-linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%); - background: linear-gradient(180deg, rgba(209, 248, 239, 1) 0%, rgba(255, 255, 255, 1) 144%); - box-sizing: border-box; - border-width: 1px; - border-style: solid; - border-color: rgba(235, 235, 235, 1); - border-radius: 16px; - border-bottom-right-radius: 0px; - border-bottom-left-radius: 0px; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; - width: 100%; - - .title { - font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; - font-weight: 650; - font-style: normal; - font-size: 20px; - color: #000000; - } - - .close-icon { - width: 16px; - height: 16px; - position: absolute; - right: 20px; - } - } - } - /* ::-webkit-scrollbar { display: none; } */ @@ -2902,9 +2909,11 @@ img { } .line-img { - height: 1px; + height: 2px; width: 743px; - border: 1px dashed #d7d7d7; + background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%); + background-size: 4px 2px; + background-repeat: repeat-x; } .address-box {