品牌公寓列表html

src/views/housingView/apartment.vue

@@ -1,61 +1,162 @@
 <template>
     <div>
         <pageTopBar></pageTopBar>
-        <seachModule></seachModule>
-        <div class="dis-f jus-x al-item">
-            <div class="body-maxWidth mg-t-35">
-                <div class="dis-f jus-bet">
-                    <div>
-                        <biserialItem></biserialItem>
-                    </div>
-                    <div></div>
+        <!-- <seachModule></seachModule> -->
+        <div class="list wid1200">
+            <div class="item flexflex">
+                <img class="img" src="https://axure-file.lanhuapp.com/md5__3b3872c54074c559daab0b82c0e0514a.svg">
+                <div class="title">iRent佐敦二期公寓</div>
+                <div class="hint">油尖旺中心地带的品质公寓</div>
+                <div class="tab-box flexflex">
+                    <div class="tab-item flexcenter" v-for="item in 9">阳台</div>
                 </div>
+                <div class="location flexacenter">
+                    <img class="location-icon" src="@/assets/img/publicImage/location-icon.png">油尖旺区爱景街8号
+                </div>
+
+                <div class="type-list">
+                    <div class="type-item flexacenter">
+                        <div class="type-name flex1">单人间</div>
+                        <div class="type-data flexacenter">
+                            <div class="unit">HK$</div>
+                            <div class="price">7800</div>
+                            /月
+                        </div>
+                    </div>
+                </div>
+                <div class=""></div>
             </div>
         </div>
+        <!-- <div ref="gridContainer">
+            <div v-for="item in items" :key="item.id" ref="gridItem" class="grid-item">{{ item.text }}</div>
+        </div> -->
 
     </div>
 </template>
   
 <script setup>
+
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
+import { ref, onMounted, watch } from 'vue';
+import Masonry from 'masonry-layout';
+
+const gridContainer = ref(null);
+const gridItem = ref([]);
+
+const items = [
+    { id: 1, text: 'Item 1' },
+    { id: 2, text: 'Item 2' },
+    { id: 3, text: 'Item 3' },
+    { id: 4, text: 'Item 3' },
+    { id: 5, text: 'Item 3' },
+    { id: 6, text: 'Item 3' },
+    { id: 7, text: 'Item 3' },
+    { id: 8, text: 'Item 3' },
+    { id: 9, text: 'Item 3' },
+    { id: 10, text: 'Item 3' },
+    { id: 11, text: 'Item 3' },
+    { id: 12, text: 'Item 3' },
+    // ...
+];
+
+onMounted(() => {
+    const masonryInstance = new Masonry(gridContainer.value, {
+        itemSelector: '.grid-item',
+        columnWidth: 200,
+        gutter: 10
+    });
+
+    watch(items, () => {
+        masonryInstance.reloadItems();
+        masonryInstance.layout();
+    });
+});
+
 </script>
-<style scoped>
-img {
-    object-fit: contain;
+<style lang="less" scoped>
+.list {
+    margin: 0 auto;
+    background-color: antiquewhite;
+
+    .item {
+        width: 386px;
+        background-color: rgba(255, 255, 255, 1);
+        border-radius: 20px;
+        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
+        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
+        flex-direction: column;
+        padding: 10px;
+
+        .img {
+            width: 366px;
+            height: 244px;
+            border-radius: 10px;
+            margin-bottom: 19px;
+            // margin: 0 auto;
+        }
+
+        .title {
+            font-weight: 650;
+            font-size: 20px;
+            color: #000000;
+            margin-bottom: 10px;
+        }
+
+        .hint {
+            color: #AAAAAA;
+            font-size: 14px;
+            margin-bottom: 20px;
+        }
+
+        .tab-box {
+            flex-wrap: wrap;
+            margin-bottom: 14px;
+
+            .tab-item {
+                height: 28px;
+                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;
+                margin-right: 10px;
+                margin-bottom: 10px;
+            }
+        }
+
+        .location {
+            .location-icon {
+                width: 18px;
+                height: 18px;
+                margin-right: 2px;
+            }
+
+            font-size: 15px;
+            color: #555555;
+        }
+
+        .type-list {
+            width: 354px;
+            // height: 108px;
+            background: rgba(246, 246, 246, 1);
+            border-radius: 12px;
+            padding: 0 10px;
+
+            .type-item {
+                height: 54px;
+            }
+        }
+
+    }
 }
 
-.dis-f {
-    display: flex;
-}
-
-.jus-x {
-    justify-content: center;
-}
-
-.al-item {
-    align-items: center;
-}
-
-.pos-r {
-    position: relative;
-}
-
-.body-maxWidth {
-    width: 1200px;
-    min-width: 1200px;
-}
-
-.s-w-100 {
-    width: 100%;
-}
-
-.jus-bet {
-    justify-content: space-between;
-}
-
-.mg-t-35 {
-    margin-top: 35px;
+.grid-item {
+    background-color: #eee;
+    padding: 10px;
 }
 </style>