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

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;