品牌公寓列表html
This commit is contained in:
A1300399510
parent
2e5147329f
commit
5760d0890b
87
package-lock.json
generated
87
package-lock.json
generated
@ -5,12 +5,13 @@
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "港校租房",
|
||||
"name": "zufang",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.3.7",
|
||||
"masonry-layout": "^4.2.2",
|
||||
"sass-loader": "^8.0.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-meta": "^3.0.0-alpha.2",
|
||||
@ -4821,6 +4822,11 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/desandro-matches-selector": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
|
||||
"integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg=="
|
||||
},
|
||||
"node_modules/destroy": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
|
||||
@ -5180,6 +5186,11 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/ev-emitter": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
|
||||
"integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
|
||||
},
|
||||
"node_modules/event-pubsub": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/event-pubsub/-/event-pubsub-4.3.0.tgz",
|
||||
@ -5382,6 +5393,14 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/fizzy-ui-utils": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
|
||||
"integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
|
||||
"dependencies": {
|
||||
"desandro-matches-selector": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
@ -5511,6 +5530,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-size": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
|
||||
"integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q=="
|
||||
},
|
||||
"node_modules/get-stream": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
|
||||
@ -6676,6 +6700,15 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/masonry-layout": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
|
||||
"integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==",
|
||||
"dependencies": {
|
||||
"get-size": "^2.0.2",
|
||||
"outlayer": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.14",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
|
||||
@ -7356,6 +7389,16 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/outlayer": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
|
||||
"integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
|
||||
"dependencies": {
|
||||
"ev-emitter": "^1.0.0",
|
||||
"fizzy-ui-utils": "^2.0.0",
|
||||
"get-size": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/p-finally": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
|
||||
@ -13965,6 +14008,11 @@
|
||||
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
|
||||
"dev": true
|
||||
},
|
||||
"desandro-matches-selector": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
|
||||
"integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg=="
|
||||
},
|
||||
"destroy": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
|
||||
@ -14250,6 +14298,11 @@
|
||||
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
|
||||
"dev": true
|
||||
},
|
||||
"ev-emitter": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
|
||||
"integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
|
||||
},
|
||||
"event-pubsub": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/event-pubsub/-/event-pubsub-4.3.0.tgz",
|
||||
@ -14416,6 +14469,14 @@
|
||||
"path-exists": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"fizzy-ui-utils": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
|
||||
"integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
|
||||
"requires": {
|
||||
"desandro-matches-selector": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
@ -14503,6 +14564,11 @@
|
||||
"has-symbols": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"get-size": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
|
||||
"integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q=="
|
||||
},
|
||||
"get-stream": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
|
||||
@ -15362,6 +15428,15 @@
|
||||
"semver": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"masonry-layout": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
|
||||
"integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==",
|
||||
"requires": {
|
||||
"get-size": "^2.0.2",
|
||||
"outlayer": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"mdn-data": {
|
||||
"version": "2.0.14",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
|
||||
@ -15862,6 +15937,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"outlayer": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
|
||||
"integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
|
||||
"requires": {
|
||||
"ev-emitter": "^1.0.0",
|
||||
"fizzy-ui-utils": "^2.0.0",
|
||||
"get-size": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"p-finally": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.3.7",
|
||||
"masonry-layout": "^4.2.2",
|
||||
"sass-loader": "^8.0.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-meta": "^3.0.0-alpha.2",
|
||||
|
||||
BIN
src/assets/img/publicImage/location-icon.png
Normal file
BIN
src/assets/img/publicImage/location-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user