公寓列表改为4列

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>
+                                        <div class="contact-btn top-contact-btn" style="margin: 0 0 0 10px;" @click="getConcatData">联系方式</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, {