From 8cea7d46704357d1a2f3740a2599824d65ff7724 Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Tue, 8 Aug 2023 18:31:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E7=82=B9=E5=87=BB=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=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 | 102 +++++++++++++++++++++++++++++--------------
 1 file changed, 69 insertions(+), 33 deletions(-)

diff --git a/src/views/detail.vue b/src/views/detail.vue
index 891e1c7..9a11b1b 100644
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -53,10 +53,15 @@
                                         </div>
                                         <div class="dis-f al-item">
                                             <div class="tool-btn dis-f al-item jus-x">
-                                                <div class="dis-f al-item" @click="setOperation">
-                                                    <img src="../assets/img/detail/collect.png"
-                                                        v-show="housingInfo['data'] && !housingInfo['data'].isfav"
-                                                        class="tool-icon" alt="">
+                                                <div class="dis-f al-item fav-btn" @click="setOperation">
+                                                    <div class="pos-r" style="width:20px;height:20px;">
+                                                        <img src="../assets/img/detail/collect.png"
+                                                            v-show="housingInfo['data'] && !housingInfo['data'].isfav"
+                                                            class="fav-img fav-img-t" alt="">
+                                                        <img src="../assets/img/detail/collectT.png"
+                                                            v-show="housingInfo['data'] && !housingInfo['data'].isfav"
+                                                            class="fav-img fav-img-f" alt="">
+                                                    </div>
                                                     <img src="../assets/img/detail/collectT.png"
                                                         v-show="housingInfo['data'] && housingInfo['data'].isfav"
                                                         class="tool-icon" alt="">
@@ -99,8 +104,8 @@
                                 {{
                                     housingInfo['data'] && housingInfo['data'].info.rent[0]
                                 }}~{{
-                                    housingInfo['data'] && housingInfo['data'].info.rent[1]
-                                }}
+    housingInfo['data'] && housingInfo['data'].info.rent[1]
+}}
                             </span>
                             <span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
                         </div>
@@ -482,33 +487,33 @@
                                 </div>
                                 <el-scrollbar v-if="distanceList.length > 0" height="500px">
                                     <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">
+                                        <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>
                                                 </div>
                                             </div>
                                         </div>
+                                    </div>
                                     <!-- <div class="distance-box-s">
                             
                                     </div> -->
@@ -790,7 +795,8 @@
             </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" v-show="item&&item.verified">
+                    <biserialItem v-for="(item, i) in publisherList" :detailShow="true" :key="i" :item="item"
+                        v-show="item && item.verified">
                     </biserialItem>
                 </div>
             </div>
@@ -1281,7 +1287,7 @@ let contacts = reactive({
 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) {
@@ -1961,7 +1967,8 @@ img {
 .top-contact-btn {
     width: 200px !important;
 }
-.contact-btn:hover{
+
+.contact-btn:hover {
     background: -webkit-linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
     background: -moz-linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
     background: linear-gradient(0, rgba(168, 209, 247, 1) -4%, rgba(213, 232, 249, 1) 102%);
@@ -2061,6 +2068,18 @@ img {
             width: 210px;
         }
 
+        .fav-btn{
+
+        }
+
+        .fav-btn:hover .fav-img-f{
+            opacity: 0.4;
+        }
+
+        .fav-btn:hover .fav-img-t{
+            opacity:0;
+        }
+
         .tool-btn {
             width: 199px;
             height: 48px;
@@ -2077,6 +2096,22 @@ img {
             font-size: 14px;
             cursor: pointer;
 
+            .fav-img{
+                width: 20px;
+                height:20px;
+                position: absolute;
+                top:0;
+                left:0;
+                transition: all linear 0.2s;
+            }
+
+            .fav-img-f{
+                opacity:0;
+            }
+            .fav-img-t{
+                opacity:1;
+            }
+
             .tool-icon {
                 width: 20px;
                 height: 20px;
@@ -2433,7 +2468,8 @@ img {
                     flex-shrink: 0;
                     position: relative;
                 }
-                .img:hover{
+
+                .img:hover {
                     box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
                     -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
                     -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
@@ -2545,7 +2581,7 @@ img {
                 font-style: normal;
                 color: #7F7F7F;
                 font-size: 14px;
-                padding:15px 0;
+                padding: 15px 0;
 
                 .title-box {
                     width: 65px;