From e9159ce7211f0f957c4b54911ac3e663902df025 Mon Sep 17 00:00:00 2001 From: A1300399510 Date: Thu, 3 Aug 2023 18:35:22 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/detail.vue | 333 ++++++++++++++++++++++--------------------- 1 file changed, 169 insertions(+), 164 deletions(-) diff --git a/src/views/detail.vue b/src/views/detail.vue index 3c44747..ebb72f8 100644 --- a/src/views/detail.vue +++ b/src/views/detail.vue @@ -67,15 +67,14 @@
-
+
转发 - + :title="housingInfo.data.info['subject']" type="housingTop">
@@ -471,54 +470,54 @@
-
-
-
-
-
- 房源距离院校 - -
-
-
-
-
-
- - -
+
+
+
+ 房源距离院校 + +
+
+
+
+
+
+ + +
+
{{ item && item.name }} -
-
- - {{ items.title }} - - - - -
+
+
-
+
-
{{ item && item.recently_distance }}km @@ -560,10 +559,9 @@
房源ID :  {{ housingInfo['data'] - && housingInfo['data'].info.uid }} + housingInfo['data'].info.id)">{{ housingInfo['data'] && housingInfo['data'].info.id}} - 浏览 : {{ housingInfo['data'] && housingInfo['data'].info.count_view + 浏览 :{{ housingInfo['data'] && housingInfo['data'].info.count_view }}
@@ -2279,7 +2277,7 @@ img { font-size: 14px; padding: 30px 20px; position: relative; - z-index: 333; + /* z-index: 333; */ .detail-price-box { font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; @@ -2626,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 { @@ -2731,7 +2731,7 @@ img { .show-distance-info-box { border-width: 1px; - border-style: solid; + /* border-style: solid; */ border-color: rgba(235, 235, 235, 1); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); @@ -2739,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; @@ -2752,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; } */ @@ -2905,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 { @@ -2973,8 +2979,7 @@ img { z-index: 999; } - -