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

4.6新样式

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-05-09 18:27:24 +08:00
parent 1ea3894be8
commit 3e4daeb420
11 changed files with 1062 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,82 +1,134 @@
<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" src="@/assets/img/apartmentDetail/collect.jpg" />
<img v-else class="collect-icon" src="@/assets/img/apartmentDetail/collect-star.jpg" />
<img class="collect-icon" v-if="item.iscollect == 0" src="@/assets/img/publicImage/collect-icon.svg" />
<img class="collect-icon" v-else src="@/assets/img/publicImage/collect-pitch-icon.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']" @load="loadload" />
<div class="title">{{ item["title"] }}</div>
<div class="img-box">
<img class="gter-select" src="@/assets/img/publicImage/gter-select.png" />
<div class="name flexflex">iRent佐敦一期公寓</div>
<img class="img" v-lazy="item['image']" @load="loadload" />
<div class="apartment-introduce flexacenter">
<div class="remark-on flexacenter">
<img class="fang-icon" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_Zwocn3qqsgFptxhcq_cQnrld6YjDgwVBq_D-81qNDQyOQ~~" />
方同学点评
</div>
<div class="remark-text flex1 ellipsis">交通和生活都非常便利，房间整洁完善交通和生活都非常便利，房间整洁完善交通和生活都非常便利，房间整洁完善</div>
</div>
</div>
<div class="label-list flexacenter">
<div class="label-item flexacenter blue">
<img class="safety-icon" src="@/assets/img/publicImage/safety-icon.png" />
实地考察
</div>
<div class="label-item flexacenter violet">费用全包</div>
<div class="label-item flexacenter red">费用全包</div>
<div class="label-item flexacenter">费用全包</div>
<div class="label-item flexacenter">费用全包</div>
<div class="label-item flexacenter">费用全包</div>
<div class="label-item flexacenter">费用全包</div>
</div>
<!-- <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, index) in item['tags'].split(',')" :key="index">{{ it }}</div>
</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>
<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, 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="distance flexflex">
<div class="figure flexacenter">
距离
<div class="school">城大</div>
<div class="mile">1.3km</div>
</div>
<!-- <span class="area-distance">1.36km</span> -->
<div class="vehicle-list flex1 flexflex">
<div class="vehicle-item flexacenter" v-for="item in 3" :key="index">
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
42min
</div>
</div>
</div>
<div class="type-quantity flexacenter">
<div class="collect-type flexacenter">
<div class="collect flexacenter flex1">
<img class="flame-icon" src="@/assets/img/publicImage/flame-icon.png" />
近15天36人收藏
</div>
<div class="house-type flexacenter">
共8个房型
<img class="icon" src="@/assets/img/publicImage/arrow-return.svg" />
</div>
</div>
<div class="type-list" v-if="item['roomlist']">
<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="price flexflex">
<div class="type-data flexacenter">
<div class="unit">HK$</div>
<div class="price">{{ it["price"] }}</div>
/月
</div>
<div class="original-price">HK$8600/月</div>
</div>
</div>
</div>
<!-- <div class="type-quantity flexacenter">
共
<div class="type-quantity-number">{{ item["roomnum"] }}</div>
个房型
<img class="black-arrow" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div> -->
</div>
</template>
<script setup>
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import { redirectToExternalWebsite } from "@/utils/util.js"
const router = useRouter()
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,
masonryInstance: Object,
})
});
const emit = defineEmits(["handlecollect"])
const emit = defineEmits(["handlecollect"]);
const goapArtmentDetails = () => {
let url = `/apartmentDetail?uniqid=${props["item"].uniqid}`
if (props?.pitchValue?.school) url += `&school=${props.pitchValue["school"]}`
let url = `/apartmentDetail?uniqid=${props["item"].uniqid}`;
if (props?.pitchValue?.school) url += `&school=${props.pitchValue["school"]}`;
redirectToExternalWebsite(url)
}
redirectToExternalWebsite(url);
};
// 点击收藏后传过父组件
const handleCollect1 = uniqid => emit("handlecollect", uniqid)
const handleCollect1 = (uniqid) => emit("handlecollect", uniqid);
const loadload = () => {
props.masonryInstance && props.masonryInstance.reloadItems()
props.masonryInstance && props.masonryInstance.layout()
}
props.masonryInstance && props.masonryInstance.reloadItems();
props.masonryInstance && props.masonryInstance.layout();
};
</script>
<style lang="less" scoped>
.item {
// width: 386px;
width: 288.75px;
width: 385px;
// 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);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
// border-radius: 20px;
border-radius: 24px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
flex-direction: column;
padding: 10px 10px 0;
padding-top: 7px;
padding-bottom: 16px;
margin-bottom: 20px;
position: relative;
height: fit-content;
@@ -89,29 +141,131 @@ const loadload = () => {
}
.collect-box {
width: 50px;
height: 50px;
width: 24px;
height: 24px;
border-radius: 50%;
position: absolute;
top: 5px;
right: 5px;
// background: #447eb3;
top: 10px;
right: 10px;
z-index: 1;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.4);
.collect-icon {
width: 25px;
height: 25px;
border-radius: 50%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
width: 16px;
height: 15px;
}
}
.img {
// width: 366px;
width: 268.75px;
// height: 244px;
.img-box {
position: relative;
border-radius: 16px;
margin-bottom: 12px;
// object-fit: cover;
overflow: hidden;
margin: 0 7px 16px;
.gter-select {
position: absolute;
top: 0;
left: 0;
width: 158px;
height: 24px;
}
.name {
height: 32px;
background-color: rgba(255, 255, 255, 0.847058823529412);
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 16px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 20px;
color: #000000;
padding: 0 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: max-content;
}
.img {
// width: 366px;
// width: 268.75px;
width: 371px;
// height: 244px;
// object-fit: cover;
display: block;
}
.apartment-introduce {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.63921568627451);
color: #ffffff;
font-size: 13px;
padding-left: 6px;
padding-right: 17px;
.remark-on {
font-size: 13px;
color: #d7d7d7;
margin-right: 6px;
.fang-icon {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 6px;
}
}
.remark-text {
width: 247px;
}
}
}
.label-list {
flex-wrap: wrap;
margin: 0 12px 7px;
.label-item {
color: #555555;
text-align: center;
height: 22px;
background-color: rgba(235, 235, 235, 1);
border-radius: 8px;
padding: 0 8px;
font-size: 13px;
width: fit-content;
margin-bottom: 8px;
margin-right: 10px;
&.blue {
color: #ffffff;
background-color: rgba(98, 177, 255, 1);
}
&.violet {
color: #ffffff;
background-color: rgba(128, 128, 255, 1);
}
&.red {
color: #ffffff;
background-color: rgba(249, 93, 93, 1);
}
.safety-icon {
width: 14px;
height: 14px;
margin-right: 5px;
}
}
}
.title {
@@ -160,8 +314,82 @@ const loadload = () => {
font-size: 14px;
color: #555555;
margin-bottom: 10px;
padding-left: 6px;
margin: 0 12px 9px;
// margin-bottom: 9px;
// padding-left: 6px;
}
.distance {
padding: 0 12px 12px 29px;
border-bottom: 1px dashed #d7d7d7;
.figure {
font-size: 14px;
color: #555555;
text-align: right;
line-height: 26px;
margin-right: 5px;
.school {
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 14px;
color: #000000;
margin: 0 3px;
}
.mile {
font-size: 14px;
color: #50e3c2;
}
}
.vehicle-list {
flex-wrap: wrap;
.vehicle-item {
height: 22px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(127, 127, 127, 1);
border-radius: 30px;
font-size: 12px;
color: #333333;
padding: 0 8px;
margin-right: 6px;
.vehicle-icon {
width: 14px;
height: 14px;
margin-right: 5px;
}
}
}
}
.collect-type {
margin: 0 12px;
height: 52px;
.collect {
.flame-icon {
width: 20px;
height: 20px;
margin-right: 7px;
}
font-size: 13px;
color: #555555;
}
.house-type {
font-size: 13px;
color: #555555;
.icon {
width: 12px;
height: 12px;
margin-left: 5px;
}
}
}
.type-list {
@@ -170,8 +398,7 @@ const loadload = () => {
background: rgba(246, 246, 246, 1);
border-radius: 12px;
padding: 0 10px;
margin: 0 6px;
margin: 0 12px;
.type-item {
height: 54px;
@@ -185,23 +412,45 @@ const loadload = () => {
padding-right: 15px;
}
.type-data {
.unit {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
}
.price {
flex-direction: column;
align-items: flex-end;
.type-data {
.unit {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
}
.price {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 18px;
color: #f95d5d;
margin: 0 5px;
}
.price {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 18px;
color: #f95d5d;
margin: 0 5px;
}
font-size: 13px;
color: #555555;
font-size: 13px;
color: #555555;
}
.original-price {
text-align: right;
font-size: 13px;
color: #7f7f7f;
position: relative;
width: max-content;
&::after {
position: absolute;
top: 50%;
left: -4px;
transform: translateY(-50%);
content: "";
width: calc(100% + 6px);
height: 1px;
display: block;
border-bottom: 1px solid #000;
}
}
}
}
}