no message

src/assets/img/apartmentDetail/collect-red.svg

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

src/assets/styles/apartmentDetail.css

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

src/assets/styles/apartmentDetail.less

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

src/components/public/apartment-item.vue

@@ -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,10 +361,13 @@ const loadload = () => {
                 border-radius: 30px;
                 font-size: 12px;
                 color: #333333;
-                padding: 0 8px;
+                padding: 0 6px;
-                margin-right: 6px;
                 margin-bottom: 5px;
                 
+                &:not(:last-of-type) {
+                    margin-right: 6px;
+                }
+
                 .vehicle-icon {
                     width: 14px;
                     height: 14px;

src/components/public/public-list-item.vue

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

src/views/apartmentDetail.vue

@@ -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])">
+                                <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]" />
+                                    <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"][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"][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,
+                    imageurl: e.imageurl,
-                    thumbnail: 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>

src/views/user.vue

@@ -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-tips ellipsis">{{ item.propaganda }}</div> -->
-                        <div class="apartment-header-types flex">
+                        <div class="label-list flexacenter">
-                            <div v-for="(it, i) in item.othertags" :key="i" class="apartment-header-types-item flexcenter">{{ it }}</div>
+                            <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("https://app.gter.net/tenement/v2/api/user/collections", { page: favData.value["page"] })
-        .$post("/tenement/pc/api/user/collectionList", {
-            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;
+            if (res.code != 200) {
-            favData.value.list.splice(data["index"], 1);
+                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"] || [];
+            let list = data.data || [];
-            favData.value["list"].push(data[data.length - 1]);
+            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;
+    // height: 360px;
-    padding: 0 0 20px;
+    // 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 {
+            // .apartment-header-tips {
-                color: #aaaaaa;
+            //     color: #aaaaaa;
-                font-size: 14px;
+            //     font-size: 14px;
-                margin-bottom: 20px;
+            //     margin-bottom: 20px;
-            }
+            // }
 
-            .apartment-header-types {
+            // .apartment-header-types {
-                height: 76px;
+            //     height: 76px;
-                overflow: hidden;
+            //     overflow: hidden;
-                .apartment-header-types-item {
+            //     .apartment-header-types-item {
-                    display: inline-flex;
+            //         display: inline-flex;
-                    height: 28px;
+            //         height: 28px;
-                    padding: 0 12px;
+            //         padding: 0 12px;
-                    background-color: rgba(224, 240, 255, 1);
+            //         background-color: rgba(224, 240, 255, 1);
-                    border-radius: 5px;
+            //         border-radius: 5px;
-                    color: #447eb3;
+            //         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;
             }
         }