no message
This commit is contained in:
DESKTOP-RQ919RC\Pc
6
src/assets/img/apartmentDetail/collect-red.svg
Normal file
6
src/assets/img/apartmentDetail/collect-red.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="22px" height="21px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -298 -980 )">
|
||||
<path d="M 21.2596153846154 7.52930056710775 C 21.7532051282051 7.60869565217391 22 7.81159420289855 22 8.13799621928166 C 22 8.33207309388784 21.8854166666667 8.54379332073094 21.65625 8.77315689981096 L 16.8569711538462 13.4574669187146 L 17.9939903846154 20.0737240075614 C 18.0028044871795 20.1354757403907 18.0072115384615 20.2236925015753 18.0072115384615 20.3383742911153 C 18.0072115384615 20.523629489603 17.9609375 20.6802142407057 17.8683894230769 20.8081285444234 C 17.7758413461538 20.9360428481411 17.6414262820513 21 17.4651442307692 21 C 17.2976762820513 21 17.1213942307692 20.9470699432892 16.9362980769231 20.8412098298677 L 11 17.7183364839319 L 5.06370192307692 20.8412098298677 C 4.86979166666667 20.9470699432892 4.69350961538461 21 4.53485576923077 21 C 4.34975961538461 21 4.2109375 20.9360428481411 4.11838942307692 20.8081285444234 C 4.02584134615385 20.6802142407057 3.97956730769231 20.523629489603 3.97956730769231 20.3383742911153 C 3.97956730769231 20.2854442344045 3.98838141025641 20.1972274732199 4.00600961538461 20.0737240075614 L 5.14302884615385 13.4574669187146 L 0.330528846153846 8.77315689981096 C 0.110176282051282 8.53497164461248 0 8.32325141776938 0 8.13799621928166 C 0 7.81159420289855 0.246794871794872 7.60869565217391 0.740384615384615 7.52930056710775 L 7.37740384615385 6.5633270321361 L 10.3521634615385 0.542533081285443 C 10.5196314102564 0.18084436042848 10.7355769230769 0 11 0 C 11.2644230769231 0 11.4803685897436 0.18084436042848 11.6478365384615 0.542533081285443 L 14.6225961538462 6.5633270321361 L 21.2596153846154 7.52930056710775 Z " fill-rule="nonzero" fill="#f95d5d" stroke="none" transform="matrix(1 0 0 1 298 980 )" />
|
||||
</g>
|
||||
</svg>
|
||||
@@ -737,6 +737,10 @@
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .details-box .details-left .type-box .item .btn .collect.red {
|
||||
background-color: #ffeff3;
|
||||
border-color: #f4dbe1;
|
||||
}
|
||||
.content .details-box .details-left .type-box .item .btn .collect .icon {
|
||||
width: 18px;
|
||||
height: 17px;
|
||||
|
||||
@@ -935,6 +935,11 @@
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&.red {
|
||||
background-color: rgba(255, 239, 243, 1);
|
||||
border-color: rgba(244, 219, 225, 1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 17px;
|
||||
|
||||
@@ -10,13 +10,13 @@
|
||||
<img v-if="item.selection" class="gter-select" src="@/assets/img/publicImage/gter-select.png" />
|
||||
<div class="name flexflex">{{ item.title }}</div>
|
||||
<img class="img" v-lazy="item['image']" @load="loadload" />
|
||||
<div class="apartment-introduce flexacenter">
|
||||
<!-- <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>
|
||||
<div class="label-list flexacenter">
|
||||
<div class="label-item flexacenter blue">
|
||||
@@ -326,7 +326,7 @@ const loadload = () => {
|
||||
}
|
||||
|
||||
.distance {
|
||||
padding: 0 12px 12px 29px;
|
||||
padding: 0 1px 12px 29px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
.figure {
|
||||
font-size: 14px;
|
||||
@@ -361,9 +361,12 @@ const loadload = () => {
|
||||
border-radius: 30px;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
padding: 0 8px;
|
||||
margin-right: 6px;
|
||||
padding: 0 6px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.vehicle-icon {
|
||||
width: 14px;
|
||||
|
||||
@@ -199,7 +199,7 @@ watch(() => props.item.status, (newValue, oldValue) => {
|
||||
stateData.value = stateObj[data.status]
|
||||
})
|
||||
|
||||
const cancelCollection = token => emit('cancelCollection', { token, index: props['index'] })
|
||||
const cancelCollection = token => emit('cancelCollection', { token })
|
||||
|
||||
// 点击跳转详情页
|
||||
const goDetail = status => {
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
|
||||
<div class="name">{{ company.title }}</div>
|
||||
<div class="full-name flex1">{{ info.propaganda }}</div>
|
||||
<div class="more flexacenter" @click="handleClickNav('eleseEle')">
|
||||
<div class="more flexacenter" v-if="withsameapartments" @click="handleClickNav('eleseEle')">
|
||||
同品牌
|
||||
<img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||
</div>
|
||||
@@ -225,7 +225,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn flexacenter">
|
||||
<div class="collect flexcenter">
|
||||
<div v-if="item.iscollection" class="collect flexcenter red" @click="roomCollect(item.id, index)">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/collect-red.svg" />
|
||||
已收藏
|
||||
</div>
|
||||
<div v-else class="collect flexcenter" @click="roomCollect(item.id, index)">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/collect-hollow-black.svg" />
|
||||
收藏
|
||||
</div>
|
||||
@@ -439,8 +443,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box flexflex" v-if="item.images.length > 0">
|
||||
<div class="img-item" v-for="(item, index) in item.images" :key="index" @click="openFacilitiesImg(item.img[0])">
|
||||
<img class="icon" :src="item.img[0]" />
|
||||
<div class="img-item" v-for="(item, index) in item.images" :key="index" @click="openFacilitiesImg(item.img[0].imageurl)">
|
||||
<img class="icon" :src="item.img[0].thumbnail" />
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -765,7 +769,7 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then((res) => {
|
||||
proxy.$get("https://api.gter.net/v1/apartment/details", { uniqid }).then((res) => {
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res["message"]);
|
||||
return;
|
||||
@@ -804,8 +808,8 @@ const init = () => {
|
||||
const facility = data.info.facility;
|
||||
|
||||
if (facility) {
|
||||
facility["public"][0].images = ["https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skdX7qqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtZCjvF5wr_-kU8uRQ0NDI5", "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skfHvqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MsIAzvG5Ar_-kU8uRQ0NDI5"];
|
||||
facility["public"][1].images = ["https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skdXfqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtdDG6W5Q7_-kU8uRQ0NDI5", "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skfXnqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtcA2vF5A7_-kU8uRQ0NDI5"];
|
||||
// facility["public"][0].images = ["https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skdX7qqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtZCjvF5wr_-kU8uRQ0NDI5", "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skfHvqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MsIAzvG5Ar_-kU8uRQ0NDI5"];
|
||||
// facility["public"][1].images = ["https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skdXfqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtdDG6W5Q7_-kU8uRQ0NDI5", "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skfXnqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtcA2vF5A7_-kU8uRQ0NDI5"];
|
||||
|
||||
let list = [];
|
||||
facilityArr.forEach((key) => {
|
||||
@@ -919,13 +923,17 @@ const openFacilities = () => {
|
||||
const openFacilitiesImg = (current) => {
|
||||
const list = facilitylist.value || [];
|
||||
let urls = [];
|
||||
|
||||
// element.images.forEach((ele) => {
|
||||
// ele.img.forEach((e) => {
|
||||
// urls.push(e.imageurl);
|
||||
// });
|
||||
// });
|
||||
list.forEach((element) => {
|
||||
element.images.forEach((ele) => {
|
||||
ele.img.forEach((imageurl) => {
|
||||
ele.img.forEach((e) => {
|
||||
urls.push({
|
||||
imageurl,
|
||||
thumbnail: imageurl,
|
||||
imageurl: e.imageurl,
|
||||
thumbnail: e.thumbnail,
|
||||
type: "attachment",
|
||||
});
|
||||
});
|
||||
@@ -1050,7 +1058,8 @@ const handleClickNav = (value) => {
|
||||
let dualBrandList = ref([]); // 同品牌数据
|
||||
// 同品牌请求数据
|
||||
const dualBrandData = () => {
|
||||
proxy.$get("/tenement/pc/api/apartment", { token }).then((res) => {
|
||||
// proxy.$get("/tenement/pc/api/apartment", { token }).then((res) => {
|
||||
proxy.$get("https://api.gter.net/v1/apartment/lists", { token }).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
let data = res.data;
|
||||
dualBrandList.value = data.data;
|
||||
@@ -1369,6 +1378,17 @@ const openMap = () => {
|
||||
viewMapRef.value.showPop();
|
||||
isSelectSchool.value = false;
|
||||
};
|
||||
|
||||
const roomCollect = (id, index) => {
|
||||
console.log(id, index);
|
||||
|
||||
proxy.$post("https://api.gter.net/v1/apartment/roomCollection", { id }).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data;
|
||||
ElMessage.success(res.message);
|
||||
roomList.value[index].iscollection = data.status || 0;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@@ -72,7 +72,48 @@
|
||||
|
||||
<div class="list wid1200 flexflex" v-show="tabState == 'fav'" ref="gridContainer">
|
||||
<div class="item" v-for="(item, index) in favData['list']" :key="item.id" @click="goApartmentDetail(item)">
|
||||
<div v-if="item.collectiontype == 'apartment'" class="apartment-item">
|
||||
<div v-if="item.typetype == 'apartmentroomfav'" class="apartment-item">
|
||||
<div class="apartment-top flexacenter">
|
||||
<img class="icon" src="@/assets/img/publicImage/apartment-icon.png" />
|
||||
<img class="title" src="@/assets/img/publicImage/apartment-title.png" />
|
||||
</div>
|
||||
<div class="apartment-title">{{ item.title }}</div>
|
||||
<div class="apartment-header flexflex">
|
||||
<div class="apartment-room-img" v-if="item.image">
|
||||
<img class="img" :src="item.image" />
|
||||
<img class="media-icon" v-if="item.videos.length > 0" src="@/assets/img/apartmentDetail/media-icon.svg" />
|
||||
</div>
|
||||
<div class="apartment-room-content flexflex">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="type-tags flexacenter" v-if="item.allowance || item?.tags?.length != 0">
|
||||
<div class="tags-item flexcenter first" v-if="item.allowance">仅剩{{ item.allowance }}间</div>
|
||||
<template v-if="item?.tags?.length != 0">
|
||||
<div class="tags-item flexcenter" v-for="(it, ii) in item.tags" :key="ii">{{ it }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="price-box flexacenter">
|
||||
<div class="new flexacenter">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="cost">{{ item.discountprice || item.price }}</div>
|
||||
/月
|
||||
</div>
|
||||
<div class="former" v-if="item.discountprice">HK$ {{ item.price }}/月</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="apartment-bottom flexacenter">
|
||||
<div class="apartment-bottom-location flexacenter flex1">
|
||||
<img class="apartment-bottom-icon" src="@/assets/img/publicImage/location-icon.png" />
|
||||
<span class="apartment-bottom-text flex1 ellipsis">{{ item.address }}</span>
|
||||
</div>
|
||||
<div class="apartment-bottom-btn flexacenter" @click.stop="cancelCollection(item)">
|
||||
<img class="apartment-bottom-btn-icon" src="@/assets/img/publicImage/black-circle-cross.svg" />
|
||||
取消收藏
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="item.typetype == 'apartmentcollection'" class="apartment-item">
|
||||
<div class="apartment-top flexacenter">
|
||||
<img class="icon" src="@/assets/img/publicImage/apartment-icon.png" />
|
||||
<img class="title" src="@/assets/img/publicImage/apartment-title.png" />
|
||||
@@ -81,13 +122,33 @@
|
||||
<img class="apartment-header-img" :src="item.image || item.imageurl" />
|
||||
<div class="apartment-header-content flexflex">
|
||||
<div class="apartment-header-title ellipsis">{{ item.title }}</div>
|
||||
<div class="apartment-header-tips ellipsis">{{ item.propaganda }}</div>
|
||||
<div class="apartment-header-types flex">
|
||||
<div v-for="(it, i) in item.othertags" :key="i" class="apartment-header-types-item flexcenter">{{ it }}</div>
|
||||
<!-- <div class="apartment-header-tips ellipsis">{{ item.propaganda }}</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">0服务费</div>
|
||||
<div class="label-item red" v-for="(item, index) in item.hottags" :key="index">{{ item }}</div>
|
||||
<div class="label-item" v-for="(item, index) in item.tags" :key="index">{{ item }}</div>
|
||||
</div>
|
||||
<div class="flexacenter">
|
||||
<div class="price flexacenter flex1">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="value">{{ item.rentprice }}</div>
|
||||
/月起
|
||||
</div>
|
||||
<div class="type flexacenter">
|
||||
共{{ item.roomnum }}个房型
|
||||
<img class="icon" src="@/assets/img/publicImage/arrow-return.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="apartment-header-types flex">
|
||||
<div v-for="(it, i) in item.othertags" :key="i" class="apartment-header-types-item flexcenter">{{ it }}</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="apartment-type-box flexflex flex1">
|
||||
<!-- <div class="apartment-type-box flexflex flex1">
|
||||
<div class="apartment-type-list flexflex flex1">
|
||||
<div class="apartment-type-list-item flexacenter" v-for="(it, index) in item.roomlist" :key="index">
|
||||
<div class="apartment-type-list-item-name ellipsis flex1">{{ it.name }}</div>
|
||||
@@ -104,7 +165,7 @@
|
||||
个房型
|
||||
<img class="apartment-type-arrow" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="apartment-bottom flexacenter">
|
||||
<div class="apartment-bottom-location flexacenter flex1">
|
||||
<img class="apartment-bottom-icon" src="@/assets/img/publicImage/location-icon.png" />
|
||||
@@ -288,17 +349,28 @@ const getFavData = () => {
|
||||
text: "Loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
|
||||
// .$post("/tenement/pc/api/user/favList", {
|
||||
// .$post("/tenement/pc/api/user/collectionList", {
|
||||
proxy
|
||||
// .$post("/tenement/pc/api/user/favList", {
|
||||
.$post("/tenement/pc/api/user/collectionList", {
|
||||
page: favData.value["page"],
|
||||
})
|
||||
.$post("https://app.gter.net/tenement/v2/api/user/collections", { page: favData.value["page"] })
|
||||
.then((res) => {
|
||||
if (res.code != 200) return;
|
||||
let data = res.data;
|
||||
console.log("data", data);
|
||||
let list = data.data || [];
|
||||
list = list.map((item) => {
|
||||
const newItem = item.data ? { ...item.data } : { ...item };
|
||||
newItem.typetype = item.type;
|
||||
newItem.token = item.token;
|
||||
if (newItem.typetype === "apartmentcollection" && typeof newItem.tags === "string") newItem.tags = newItem.tags.split(",");
|
||||
return newItem;
|
||||
});
|
||||
|
||||
favData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1;
|
||||
favData.value["list"] = favData.value["list"].concat(data["data"] || []);
|
||||
favData.value["list"] = favData.value["list"].concat(list || []);
|
||||
favData.value["limit"] = data["limit"];
|
||||
|
||||
nextTick(() => {
|
||||
masonryInstance.reloadItems();
|
||||
masonryInstance.layout();
|
||||
@@ -320,20 +392,36 @@ const cutTab = (value) => {
|
||||
// 取消收藏
|
||||
let cancelCollection = (data) => {
|
||||
let url = "/tenement/pc/api/user/operation";
|
||||
if (data["collectiontype"] == "apartment") url = "/tenement/pc/api/user/apartmentCollection";
|
||||
// if (data["type"] == "apartment") url = "/tenement/pc/api/user/apartmentCollection";
|
||||
// if (data["typetype"] == "apartmentcollection") url = "https://api.gter.net/v1/apartment/collection";
|
||||
// if (data["typetype"] == "apartmentroomfav") url = "https://api.gter.net/v1/apartment/roomCollection";
|
||||
|
||||
url = "https://app.gter.net/tenement/v2/api/user/unfav";
|
||||
|
||||
const token = data["token"];
|
||||
const list = favData.value.list || [];
|
||||
const index = list.findIndex((item) => item.token == token);
|
||||
if (index == -1) return;
|
||||
|
||||
// const list = favData.value.list || [];
|
||||
console.log("list", list);
|
||||
|
||||
proxy
|
||||
.$post(url, {
|
||||
token: data["token"],
|
||||
token,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code != 200) return;
|
||||
favData.value.list.splice(data["index"], 1);
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message);
|
||||
return;
|
||||
}
|
||||
favData.value.list.splice(index, 1);
|
||||
count.value["fav"]--;
|
||||
|
||||
if (favData.value.list.length == 0 && favData.value["page"] != 0) {
|
||||
favData.value["page"] = 1;
|
||||
getFavData();
|
||||
} else refillData(data["index"]);
|
||||
} else refillData(index);
|
||||
|
||||
nextTick(() => {
|
||||
masonryInstance.reloadItems();
|
||||
@@ -347,15 +435,25 @@ let cancelCollection = (data) => {
|
||||
const refillData = (index) => {
|
||||
if (favData.value["page"] == 0 || loading["visible"].value) return;
|
||||
const page = favData.value["page"] - 1;
|
||||
|
||||
proxy
|
||||
.$post("/tenement/pc/api/user/favList", {
|
||||
.$post("https://app.gter.net/tenement/v2/api/user/collections", {
|
||||
page,
|
||||
limit: favData.value["limit"],
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code != 200) return;
|
||||
let data = res.data["data"] || [];
|
||||
favData.value["list"].push(data[data.length - 1]);
|
||||
let list = data.data || [];
|
||||
list = list.map((item) => {
|
||||
const newItem = item.data ? { ...item.data } : { ...item };
|
||||
newItem.typetype = item.type;
|
||||
newItem.token = item.token;
|
||||
if (newItem.typetype === "apartmentcollection" && typeof newItem.tags === "string") newItem.tags = newItem.tags.split(",");
|
||||
return newItem;
|
||||
});
|
||||
|
||||
// let data = res.data["data"] || [];
|
||||
favData.value["list"].push(list[list.length - 1]);
|
||||
nextTick(() => {
|
||||
masonryInstance.reloadItems();
|
||||
masonryInstance.layout();
|
||||
@@ -684,8 +782,8 @@ onUnmounted(() => {
|
||||
|
||||
.apartment-item {
|
||||
width: 590px;
|
||||
height: 360px;
|
||||
padding: 0 0 20px;
|
||||
// height: 360px;
|
||||
// padding: 0 0 20px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
@@ -712,14 +810,25 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.apartment-header {
|
||||
.apartment-title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.apartment-header {
|
||||
padding: 0 20px 26px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
.apartment-header-img {
|
||||
width: 209px;
|
||||
height: 140px;
|
||||
border-radius: 15px;
|
||||
margin-right: 20px;
|
||||
object-fit: cover;
|
||||
width: 240px;
|
||||
height: 161px;
|
||||
}
|
||||
|
||||
.apartment-header-content {
|
||||
@@ -729,28 +838,194 @@ onUnmounted(() => {
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.apartment-header-tips {
|
||||
color: #aaaaaa;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
// .apartment-header-tips {
|
||||
// color: #aaaaaa;
|
||||
// font-size: 14px;
|
||||
// margin-bottom: 20px;
|
||||
// }
|
||||
|
||||
.apartment-header-types {
|
||||
height: 76px;
|
||||
overflow: hidden;
|
||||
.apartment-header-types-item {
|
||||
display: inline-flex;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
background-color: rgba(224, 240, 255, 1);
|
||||
border-radius: 5px;
|
||||
color: #447eb3;
|
||||
// .apartment-header-types {
|
||||
// height: 76px;
|
||||
// overflow: hidden;
|
||||
// .apartment-header-types-item {
|
||||
// display: inline-flex;
|
||||
// height: 28px;
|
||||
// padding: 0 12px;
|
||||
// background-color: rgba(224, 240, 255, 1);
|
||||
// border-radius: 5px;
|
||||
// color: #447eb3;
|
||||
// font-size: 13px;
|
||||
// margin-right: 10px;
|
||||
// margin-bottom: 10px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.label-list {
|
||||
flex-wrap: wrap;
|
||||
// padding-bottom: 14px;
|
||||
padding-bottom: 1px;
|
||||
// border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.label-item {
|
||||
.safety-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 8px;
|
||||
color: #555555;
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
.unit {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
color: #f95d5d;
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: 13px;
|
||||
color: #555555;
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apartment-room-img {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin-right: 20px;
|
||||
|
||||
.img {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.media-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.apartment-room-content {
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.type-tags {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 7px;
|
||||
// margin-bottom: 20px;
|
||||
|
||||
.tags-item {
|
||||
height: 24px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 4px;
|
||||
line-height: 26px;
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 8px;
|
||||
padding: 0 9px;
|
||||
|
||||
&.first {
|
||||
border: 1px solid rgba(80, 227, 194, 1);
|
||||
color: #50e3c2;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-box {
|
||||
padding-bottom: 3px;
|
||||
|
||||
.new {
|
||||
margin-right: 13px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
|
||||
.unit {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cost {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
color: #f95d5d;
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.former {
|
||||
font-size: 14px;
|
||||
color: #aaaaaa;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -824,7 +1099,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.apartment-bottom {
|
||||
height: 58px;
|
||||
height: 66px;
|
||||
padding: 0 30px;
|
||||
|
||||
.apartment-bottom-location {
|
||||
font-size: 15px;
|
||||
@@ -836,7 +1112,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.apartment-bottom-text {
|
||||
width: 450px;
|
||||
width: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user