XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

公寓列表改为4列

Browse Source
This commit is contained in:
A1300399510
2024-11-12 19:11:11 +08:00
parent d3c9439871
commit 62db4c21e8
24 changed files with 66 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/apartmentDetail/collect-star.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/img/apartmentDetail/collect.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

6
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@@ -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>

73
src/components/public/apartment-item.vue
View File

@@ -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-else class="collect-icon" src="@/assets/img/apartmentDetail/collecting-yellow-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-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;
height: 40px;
width: 25px;
height: 25px;
border-radius: 50%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}
}
.img {
width: 366px;
height: 244px;
// width: 366px;
width: 268.75px;
// height: 244px;
border-radius: 16px;
margin-bottom: 19px;
object-fit: cover;
margin-bottom: 12px;
// 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;
margin-right: 10px;
margin-bottom: 10px;
padding: 0 8px;
margin-right: 6px;
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;

18
src/views/detail.vue
View File

@@ -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;

4
src/views/housingView/apartment.vue
View File

@@ -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, {