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

修改bug

Browse Source
This commit is contained in:
A1300399510
2024-04-16 15:16:47 +08:00
parent 249b326163
commit 8707053a9f
20 changed files with 146 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/biserialListItem/biserialListItem.vue
View File

@@ -42,6 +42,7 @@
${location && location.data[data && data.data && data.data.location]}`
: ""
}}</span>
<span v-if="item.distance && school" class="area-distance">{{ Math.round(item['distance'] * 10) / 10 }}km</span>
</div>
<div class="dis-f" style="flex-wrap: wrap;" v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
<template v-if="data && data.data && data.data.location">
@@ -468,4 +469,16 @@ img {
}
}
}
.area-distance {
margin-left: 16px;
color: #50e3c2;
position: relative;
&::after {
content: "|";
position: absolute;
left: -8px;
color: #d7d7d7;
}
}
</style>

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

@@ -1,29 +1,34 @@
<template>
<div class="item flexflex" @click="goapArtmentDetails">
<img class="img" v-lazy="item['image']">
<div class="title">{{ item['title'] }}</div>
<div class="hint">{{ item['propaganda'] }}</div>
<div class="collect-box flexcenter" @click.stop="handleCollect(item)">
<img class="collect-icon" style="width: 30px; height: 30px;" src="@/assets/img/apartmentDetail/collecting-shadows.svg" />
<!-- <img class="collect-icon" src="@/assets/img/apartmentDetail/collecting-yellow-shadows.svg" /> -->
</div>
<img class="img" v-lazy="item['image']" />
<div class="title">{{ item["title"] }}</div>
<div class="hint">{{ item["propaganda"] }}</div>
<div class="tab-box flexflex" v-if="item['tags']">
<div class="tab-item flexcenter" v-for="it in item['tags'].split(',')">{{ it }}</div>
<div class="tab-item flexcenter" v-for="(it, index) in item['tags'].split(',')" :key="index">{{ it }}</div>
</div>
<div class="location flexacenter" v-if="item['address']">
<img class="location-icon" src="@/assets/img/publicImage/location-icon.png">
<div class="ellipsis">{{ item['address'] }}</div>
<img class="location-icon" src="@/assets/img/publicImage/location-icon.png" />
<div class="ellipsis">{{ item["address"] }}</div>
<span class="area-distance" v-if="pitchValue['school'] && item['distance']">{{ Math.round(item["distance"] * 10) / 10 }}km</span>
</div>
<div class="type-list" v-if="item['roomlist']">
<div class="type-item flexacenter" v-for="it in item['roomlist']">
<div class="type-name flex1 ellipsis">{{ it['name'] }}</div>
<div class="type-item flexacenter" v-for="(it, index) in item['roomlist']" :key="index">
<div class="type-name flex1 ellipsis">{{ it["name"] }}</div>
<div class="type-data flexacenter">
<div class="unit">HK$</div>
<div class="price">{{ it['price'] }}</div>
<div class="price">{{ it["price"] }}</div>
/月
</div>
</div>
</div>
<div class="type-quantity flexacenter">
共
<div class="type-quantity-number">{{ item['roomnum'] }}</div>
<div class="type-quantity-number">{{ item["roomnum"] }}</div>
个房型
<img class="black-arrow" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
@@ -31,19 +36,25 @@
</template>
<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { redirectToExternalWebsite } from '@/utils/util.js'
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import { redirectToExternalWebsite } from "@/utils/util.js"
const router = useRouter()
const props = defineProps({
item: Object,
});
pitchValue: Object,
})
const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uniqid=${props['item'].uniqid}`)
const emit = defineEmits(["handlecollect"])
// router.push(`/apartmentDetail?uniqid=${props['item'].uniqid}`)
const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uniqid=${props["item"].uniqid}`)
// 点击收藏后传过父组件
const handlecollect = item => {
console.log("item", item)
emit("handlecollect", item)
}
</script>
<style lang="less" scoped>
@@ -67,6 +78,20 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.256862745098039);
}
.collect-box {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
// background: #447eb3;
cursor: pointer;
.collect-icon {
width: 40px;
height: 40px;
}
}
.img {
width: 366px;
height: 244px;
@@ -85,7 +110,7 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
}
.hint {
color: #AAAAAA;
color: #aaaaaa;
font-size: 14px;
margin: 0 6px 20px;
word-break: break-all;
@@ -101,10 +126,10 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
line-height: 28px;
background-color: rgba(224, 240, 255, 1);
border-radius: 5px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-size: 13px;
color: #447EB3;
color: #447eb3;
padding: 0 11px;
margin-right: 10px;
margin-bottom: 10px;
@@ -150,22 +175,21 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
font-size: 14px;
.unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
}
.price {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 20px;
color: #F95D5D;
color: #f95d5d;
margin: 0 5px;
}
font-size: 14px;
color: #555555;
}
}
}
@@ -194,4 +218,16 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
}
}
}
</style>
.area-distance {
margin-left: 16px;
color: #50e3c2;
position: relative;
&::after {
content: "|";
position: absolute;
left: -8px;
color: #d7d7d7;
}
}
</style>