公寓列表改为4列

dist/img/collecting-shadows.27f03dd1.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="38px" height="38px" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <filter x="487px" y="1315px" width="38px" height="38px" filterUnits="userSpaceOnUse" id="filter689">
-      <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
-      <feGaussianBlur stdDeviation="2.5" in="shadowOffsetInner" result="shadowGaussian" />
-      <feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
-      <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.349019607843137 0  " in="shadowComposite" />
-    </filter>
-    <g id="widget690">
-      <image preserveAspectRatio="none" style="overflow:visible" width="28" height="28" xlink:href="data:image/png;base64,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" x="492px" y="1320px" />
-    </g>
-  </defs>
-  <g transform="matrix(1 0 0 1 -487 -1315 )">
-    <use xlink:href="#widget690" filter="url(#filter689)" />
-    <use xlink:href="#widget690" />
-  </g>
-</svg>

dist/img/collecting-yellow-shadows.d72e6fe6.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="44px" height="44px" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <filter x="484px" y="843px" width="44px" height="44px" filterUnits="userSpaceOnUse" id="filter691">
-      <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
-      <feGaussianBlur stdDeviation="4" in="shadowOffsetInner" result="shadowGaussian" />
-      <feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
-      <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.247058823529412 0  " in="shadowComposite" />
-    </filter>
-    <g id="widget692">
-      <image preserveAspectRatio="none" style="overflow:visible" width="28" height="28" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAAEFElEQVR4Ae1b0XHiMBCVMf+hgxMVhA7gOshVgFMAOTo46IBJCghUcCmB6yBXgaED+A/43hJ7hmAJSyvZYM6a8RhLu6v3njayLDtCNKVRoFHgf1YguAT5j/hpKEQSofMe9Z8IsRQieGt3nxdV46lcgF08egXJSEN0HnZfHjVtpVS3SomqCbqLnyZoijTNVB2lNmdM/DZVlgFJPJZ7sYtN4LdE2A26s5WJratNZRmwF/uxKVgbW9OYOrtKMgCj30lHv6MDclK/SbNgc1Lv/bKSDEhH1JQ8kYRg5hnjokrpGcAY/YxPJVlQegYg9SMa0YyVxbmzE7sHC3uWaekCANVPFjI4IT1/cX1N/UoV4CMeRQAiTcEo7GQaQ9Hkp6pUAXyMoI8Y56QqTQAPo5/hlphIS5sLShMA6IcZA9czJkP2PFLUdykCYMQGSN1BUeem7RSLYpra29ghtnuhe70Qu/u9CHqIht9JhLPE4bOscF+YIyDWB8m7EOFfPC9sXDuwEiCJR32AwCqNnuMTmYAkjY4rCBd/YFgCwwq4VkhnCNNaQxiczYpWABpVLEeHiUgGMAJhIc1CXo3VCuK8ByJYtkRrocsWpQAg38MK7ncNSevUR3aEP1SZkRPgc+QPz+0dXbSa1iufLXJ3AcaTW130UD5h5gTA5DasCyN7nHluCgFqN9nZ6CBPjVUCnNrc9LVCgGBxu4zz3HIC4J45u1UBVNxyAtC9EguIx1sTgTgZrQMy4vQ4i0XCa3Zd5zORb3df5ioO4KgvtyDCOfLE/KwAZFBnEYrIE7/cHECVx+UzdYLpcV09fgdTXdof4y/MgMwYLy3n9VklBouw+xxl2M+djQWgIPUQwZw8cbIS4PpFsCPPEuB6RbAnzxbg+kTgkScehXcBMlIVLCsnqvpL1LlgYQsAovISZDV9srGwBcDO0UADpvJqFyxsAcBSVs5U3yEbC1sAbJezO9Xz4LW4YGELgAVEnwfXv5cLFpYA2DqX/mm4ReRiYgkAqFcnABcTSwCXWddtnPXeXEwsAbhq6+F7aZGcKCwBXGZdDkgTHy4mlgAus64JGY4NMN1z/KwFoJennI4q8OlwsFkLACL0rYCPsqY9OzoQbO0jIGJYY2t76tgmzBbGE/xjxPELmDn+kWJM9TjucFRWOBngAC6Y4kMFeUL+EI/qqA2bVFOHDqxdMXfYF4zWBl4WIxUs6Jkdb2ZWJr3Rqg739YnlJuwWInZM4h/bcDMA4IoL/r7/YFS/0w6tKXmKSrbkQ74Uo7ing8XE0O6LGSsDKELBDvEa4Mcg8valN+YFMuIB3yzN4P5NHYK/JcYWgIAA2ABfcY4RZIDLu3S05iYvJMjftqSf30borw/fLfpbhiKcQeilbazGvlGgUaBRgBT4Bx4BLlsBzL06AAAAAElFTkSuQmCC" x="492px" y="851px" />
-    </g>
-  </defs>
-  <g transform="matrix(1 0 0 1 -484 -843 )">
-    <use xlink:href="#widget692" filter="url(#filter691)" />
-    <use xlink:href="#widget692" />
-  </g>
-</svg>

dist/index.html

@@ -1,4 +1,4 @@
-<!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"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.ff38af90.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.67334b08.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang 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>var _hmt = _hmt || []
+<!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"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.3b436294.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.dfe1f546.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang 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>var _hmt = _hmt || []
                 ;(function () {
                     var hm = document.createElement("script")
                     hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"

src/components/indexWaterfallBox/indexWaterfallBox.vue

@@ -454,7 +454,7 @@ const loadload = index => {
 }
 
 .apartment-top .apartment-bottom-icon {
-    width: 100%;
+    width: 224px;
     position: absolute;
     bottom: -1px;
     left: 0;
@@ -494,6 +494,10 @@ const loadload = index => {
         .apartment-img {
             width: 201.5px;
         }
+
+        .apartment-top .apartment-bottom-icon {
+            width: 211.5px;
+        }
     }
 }
 </style>

src/components/public/apartment-item.vue

@@ -1,10 +1,12 @@
 <template>
     <div class="item flexflex" @click="goapArtmentDetails">
         <div class="collect-box flexcenter" @click.stop="handleCollect1(item.uniqid)">
-            <img v-if="item.iscollect == 0" class="collect-icon" style="width: 30px; height: 30px;" src="@/assets/img/apartmentDetail/collecting-shadows.svg" />
+            <!-- <img v-if="item.iscollect == 0" class="collect-icon" style="width: 30px; height: 30px;" src="@/assets/img/apartmentDetail/collecting-shadows.svg" /> -->
-            <img v-else class="collect-icon" src="@/assets/img/apartmentDetail/collecting-yellow-shadows.svg" />
+            <!-- <img v-else class="collect-icon" src="@/assets/img/apartmentDetail/collecting-yellow-shadows.svg" /> -->
+            <img v-if="item.iscollect == 0" class="collect-icon" src="@/assets/img/apartmentDetail/collect.jpg" />
+            <img v-else class="collect-icon" src="@/assets/img/apartmentDetail/collect-star.jpg" />
         </div>
-        <img class="img" v-lazy="item['image']" />
+        <img class="img" v-lazy="item['image']" @load="loadload" />
         <div class="title">{{ item["title"] }}</div>
         <div class="hint">{{ item["propaganda"] }}</div>
         <div class="tab-box flexflex" v-if="item['tags']">
@@ -44,25 +46,30 @@ const router = useRouter()
 const props = defineProps({
     item: Object,
     pitchValue: Object,
+    masonryInstance: Object,
 })
 
 const emit = defineEmits(["handlecollect"])
 
 const goapArtmentDetails = () => {
     let url = `/apartmentDetail?uniqid=${props["item"].uniqid}`
-    if (props?.pitchValue?.school) url += `&school=${props.pitchValue['school']}`
+    if (props?.pitchValue?.school) url += `&school=${props.pitchValue["school"]}`
-    
+
     redirectToExternalWebsite(url)
 }
 
 // 点击收藏后传过父组件
 const handleCollect1 = uniqid => emit("handlecollect", uniqid)
-
+const loadload = () => {
+    props.masonryInstance.reloadItems()
+    props.masonryInstance.layout()
+}
 </script>
 
 <style lang="less" scoped>
 .item {
-    width: 386px;
+    // width: 386px;
+    width: 288.75px;
     background-color: rgba(255, 255, 255, 1);
     border-radius: 20px;
     -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
@@ -85,29 +92,33 @@ const handleCollect1 = uniqid => emit("handlecollect", uniqid)
         width: 50px;
         height: 50px;
         position: absolute;
-        top: 0;
+
-        right: 0;
+        top: 5px;
+        right: 5px;
         // background: #447eb3;
         cursor: pointer;
         .collect-icon {
-            width: 40px;
+            width: 25px;
-            height: 40px;
+            height: 25px;
+            border-radius: 50%;
+            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
         }
     }
 
     .img {
-        width: 366px;
+        // width: 366px;
-        height: 244px;
+        width: 268.75px;
+        // height: 244px;
         border-radius: 16px;
-        margin-bottom: 19px;
+        margin-bottom: 12px;
-        object-fit: cover;
+        // object-fit: cover;
     }
 
     .title {
         font-weight: 650;
-        font-size: 20px;
+        font-size: 17px;
         color: #000000;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
         padding-left: 6px;
         word-break: break-all;
     }
@@ -115,27 +126,27 @@ const handleCollect1 = uniqid => emit("handlecollect", uniqid)
     .hint {
         color: #aaaaaa;
         font-size: 14px;
-        margin: 0 6px 20px;
+        margin: 0 6px 8px;
         word-break: break-all;
     }
 
     .tab-box {
         flex-wrap: wrap;
-        margin-bottom: 14px;
+        margin-bottom: 4px;
         padding-left: 6px;
 
         .tab-item {
             // height: 28px;
-            line-height: 28px;
+            line-height: 24px;
             background-color: rgba(224, 240, 255, 1);
             border-radius: 5px;
             font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
             font-weight: 400;
             font-size: 13px;
             color: #447eb3;
-            padding: 0 11px;
+            padding: 0 8px;
-            margin-right: 10px;
+            margin-right: 6px;
-            margin-bottom: 10px;
+            margin-bottom: 6px;
             word-break: break-word;
         }
     }
@@ -147,14 +158,14 @@ const handleCollect1 = uniqid => emit("handlecollect", uniqid)
             margin-right: 2px;
         }
 
-        font-size: 15px;
+        font-size: 14px;
         color: #555555;
-        margin-bottom: 16px;
+        margin-bottom: 10px;
         padding-left: 6px;
     }
 
     .type-list {
-        width: 354px;
+        // width: 354px;
         // height: 108px;
         background: rgba(246, 246, 246, 1);
         border-radius: 12px;
@@ -170,13 +181,11 @@ const handleCollect1 = uniqid => emit("handlecollect", uniqid)
 
             .type-name {
                 color: #000000;
-                font-size: 15px;
+                font-size: 14px;
                 padding-right: 15px;
             }
 
             .type-data {
-                font-size: 14px;
-
                 .unit {
                     font-family: "Arial-Black", "Arial Black", sans-serif;
                     font-weight: 900;
@@ -186,12 +195,12 @@ const handleCollect1 = uniqid => emit("handlecollect", uniqid)
                 .price {
                     font-family: "Arial-Black", "Arial Black", sans-serif;
                     font-weight: 900;
-                    font-size: 20px;
+                    font-size: 18px;
                     color: #f95d5d;
                     margin: 0 5px;
                 }
 
-                font-size: 14px;
+                font-size: 13px;
                 color: #555555;
             }
         }
@@ -200,7 +209,7 @@ const handleCollect1 = uniqid => emit("handlecollect", uniqid)
     .type-quantity {
         font-size: 14px;
         color: #555555;
-        margin: 24px auto;
+        margin: 22px auto;
 
         .type-quantity-number {
             font-weight: 650;

src/views/detail.vue

@@ -48,9 +48,7 @@
                                         </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>
                                     </div>
                                 </div>
                             </div>
@@ -1798,7 +1796,7 @@ img {
 }
 
 .top-contact-btn {
-    width: 200px !important;
+    width: 150px !important;
 }
 
 // .contact-btn:hover {
@@ -1839,7 +1837,7 @@ img {
     position: fixed;
     width: 100%;
     left: 0;
-    bottom: 0;
+    bottom: 10px;
     z-index: 1002;
 
     .line {
@@ -1860,19 +1858,19 @@ img {
     }
 
     .top-bar {
-        width: 1200px;
+        width: 750px;
         background: inherit;
         background-color: rgba(255, 255, 255, 1);
         box-sizing: border-box;
         border-width: 1px;
         border-style: solid;
         border-color: rgba(235, 235, 235, 1);
-        border-radius: 16px;
+        border-radius: 60px;
         -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
         -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
         box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
         font-size: 14px;
-        padding: 15px 30px;
+        padding: 10px 11px 10px 30px;
         font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
         font-weight: 400;
         font-style: normal;
@@ -1905,7 +1903,7 @@ img {
         }
 
         .concat-btn-show {
-            width: 210px;
+            width: 160px;
         }
 
         .fav-btn {
@@ -1923,7 +1921,7 @@ img {
             width: 199px;
             height: 48px;
             background: inherit;
-            background-color: rgba(246, 246, 246, 0);
+            background-color:  #f3f5f6;
             box-sizing: border-box;
             border-width: 1px;
             border-style: solid;

src/views/housingView/apartment.vue

@@ -8,7 +8,7 @@
 
     <div class="list wid1200 flexflex" ref="gridContainer">
         <template v-if="list.length != 0">
-            <apartment-item v-for="(item, index) in list" :key="index" :item="item" :pitchValue="pitchValue" @handlecollect="handlecollect"></apartment-item>
+            <apartment-item v-for="(item, index) in list" :key="index" :item="item" :pitchValue="pitchValue" :masonryInstance="masonryInstance" @handlecollect="handlecollect"></apartment-item>
         </template>
     </div>
 
@@ -72,7 +72,7 @@ onMounted(() => {
     // 初始化瀑布流
     masonryInstance = new Masonry(gridContainer.value, {
         itemSelector: ".item",
-        gutter: 20,
+        gutter: 15,
     })
 
     // masonryInstanceMore = new Masonry(moreShowList.value, {