diff --git a/src/assets/img/publicImage/arrow-return.svg b/src/assets/img/publicImage/arrow-return.svg
new file mode 100644
index 0000000..6c1808b
--- /dev/null
+++ b/src/assets/img/publicImage/arrow-return.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="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -716 -1275 )">
+    <path d="M 5.25 10.046875  C 5.38541666666667 10.046875  5.50260416666667 9.99739583333333  5.6015625 9.8984375  L 9.1484375 6.3515625  C 9.24739583333333 6.25260416666667  9.296875 6.13541666666667  9.296875 6  C 9.296875 5.86458333333333  9.24739583333333 5.74739583333333  9.1484375 5.6484375  L 5.6015625 2.1015625  C 5.50260416666667 2.00260416666667  5.38541666666667 1.953125  5.25 1.953125  C 5.11458333333333 1.953125  4.99739583333333 2.00260416666667  4.8984375 2.1015625  L 4.1015625 2.8984375  C 4.00260416666667 2.99739583333333  3.953125 3.11458333333333  3.953125 3.25  C 3.953125 3.38541666666667  4.00260416666667 3.50260416666667  4.1015625 3.6015625  L 6.5 6  L 4.1015625 8.3984375  C 4.00260416666667 8.49739583333333  3.953125 8.61458333333333  3.953125 8.75  C 3.953125 8.88541666666667  4.00260416666667 9.00260416666667  4.1015625 9.1015625  L 4.8984375 9.8984375  C 4.99739583333333 9.99739583333333  5.11458333333333 10.046875  5.25 10.046875  Z M 11.1953125 2.98828125  C 11.7317708333333 3.90755208333333  12 4.91145833333333  12 6  C 12 7.08854166666667  11.7317708333333 8.09244791666666  11.1953125 9.01171875  C 10.6588541666667 9.93098958333333  9.93098958333333 10.6588541666667  9.01171875 11.1953125  C 8.09244791666667 11.7317708333333  7.08854166666667 12  6 12  C 4.91145833333333 12  3.90755208333333 11.7317708333333  2.98828125 11.1953125  C 2.06901041666667 10.6588541666667  1.34114583333333 9.93098958333333  0.8046875 9.01171875  C 0.268229166666667 8.09244791666666  0 7.08854166666667  0 6  C 0 4.91145833333333  0.268229166666667 3.90755208333333  0.8046875 2.98828125  C 1.34114583333333 2.06901041666667  2.06901041666667 1.34114583333333  2.98828125 0.8046875  C 3.90755208333333 0.268229166666666  4.91145833333333 0  6 0  C 7.08854166666667 0  8.09244791666667 0.268229166666666  9.01171875 0.8046875  C 9.93098958333333 1.34114583333333  10.6588541666667 2.06901041666667  11.1953125 2.98828125  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 716 1275 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/publicImage/collect-icon.svg b/src/assets/img/publicImage/collect-icon.svg
new file mode 100644
index 0000000..9fd92f9
--- /dev/null
+++ b/src/assets/img/publicImage/collect-icon.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="16px" height="15px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1123 -864 )">
+    <path d="M 11.625 13.1663516068053  L 10.9326923076923 9.18714555765596  L 13.875 6.37996219281663  L 9.81730769230769 5.79395085066163  L 8 2.18336483931947  L 6.18269230769231 5.79395085066163  L 2.125 6.37996219281663  L 5.06730769230769 9.18714555765596  L 4.36538461538461 13.1663516068053  L 8 11.2854442344045  L 11.625 13.1663516068053  Z M 15.4615384615385 5.37807183364839  C 15.8205128205128 5.43478260869565  16 5.57971014492754  16 5.81285444234405  C 16 5.95148078134846  15.9166666666667 6.10270951480781  15.75 6.26654064272212  L 12.2596153846154 9.6124763705104  L 13.0865384615385 14.3383742911153  C 13.0929487179487 14.3824826717076  13.0961538461538 14.4454946439824  13.0961538461538 14.5274102079395  C 13.0961538461538 14.8424700693132  12.9647435897436 15  12.7019230769231 15  C 12.5801282051282 15  12.4519230769231 14.9621928166352  12.3173076923077 14.8865784499055  L 8 12.65595463138  L 3.68269230769231 14.8865784499055  C 3.54166666666667 14.9621928166352  3.41346153846154 15  3.29807692307692 15  C 3.16346153846154 15  3.0625 14.9543163201008  2.99519230769231 14.8629489603025  C 2.92788461538462 14.7715816005041  2.89423076923077 14.6597353497164  2.89423076923077 14.5274102079395  C 2.89423076923077 14.4896030245747  2.90064102564103 14.4265910522999  2.91346153846154 14.3383742911153  L 3.74038461538462 9.6124763705104  L 0.240384615384615 6.26654064272212  C 0.0801282051282051 6.09640831758034  0 5.94517958412098  0 5.81285444234405  C 0 5.57971014492754  0.179487179487179 5.43478260869565  0.538461538461538 5.37807183364839  L 5.36538461538461 4.68809073724008  L 7.52884615384615 0.387523629489602  C 7.65064102564103 0.1291745431632  7.80769230769231 0  8 0  C 8.19230769230769 0  8.34935897435897 0.1291745431632  8.47115384615385 0.387523629489602  L 10.6346153846154 4.68809073724008  L 15.4615384615385 5.37807183364839  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1123 864 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/publicImage/collect-pitch-icon.svg b/src/assets/img/publicImage/collect-pitch-icon.svg
new file mode 100644
index 0000000..96b5cd6
--- /dev/null
+++ b/src/assets/img/publicImage/collect-pitch-icon.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="16px" height="15px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -715 -864 )">
+    <path d="M 15.4615384615385 5.37807183364839  C 15.8205128205128 5.43478260869565  16 5.57971014492754  16 5.81285444234405  C 16 5.95148078134846  15.9166666666667 6.10270951480781  15.75 6.26654064272212  L 12.2596153846154 9.6124763705104  L 13.0865384615385 14.3383742911153  C 13.0929487179487 14.3824826717076  13.0961538461538 14.4454946439824  13.0961538461538 14.5274102079395  C 13.0961538461538 14.6597353497164  13.0625 14.7715816005041  12.9951923076923 14.8629489603025  C 12.9278846153846 14.9543163201008  12.8301282051282 15  12.7019230769231 15  C 12.5801282051282 15  12.4519230769231 14.9621928166352  12.3173076923077 14.8865784499055  L 8 12.65595463138  L 3.68269230769231 14.8865784499055  C 3.54166666666667 14.9621928166352  3.41346153846154 15  3.29807692307692 15  C 3.16346153846154 15  3.0625 14.9543163201008  2.99519230769231 14.8629489603025  C 2.92788461538462 14.7715816005041  2.89423076923077 14.6597353497164  2.89423076923077 14.5274102079395  C 2.89423076923077 14.4896030245747  2.90064102564103 14.4265910522999  2.91346153846154 14.3383742911153  L 3.74038461538462 9.6124763705104  L 0.240384615384615 6.26654064272212  C 0.0801282051282051 6.09640831758034  0 5.94517958412098  0 5.81285444234405  C 0 5.57971014492754  0.179487179487179 5.43478260869565  0.538461538461538 5.37807183364839  L 5.36538461538461 4.68809073724008  L 7.52884615384615 0.387523629489602  C 7.65064102564103 0.1291745431632  7.80769230769231 0  8 0  C 8.19230769230769 0  8.34935897435897 0.1291745431632  8.47115384615385 0.387523629489602  L 10.6346153846154 4.68809073724008  L 15.4615384615385 5.37807183364839  Z " fill-rule="nonzero" fill="#fddf6d" stroke="none" transform="matrix(1 0 0 1 715 864 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/publicImage/flame-icon.png b/src/assets/img/publicImage/flame-icon.png
new file mode 100644
index 0000000..da230b9
Binary files /dev/null and b/src/assets/img/publicImage/flame-icon.png differ
diff --git a/src/assets/img/publicImage/gter-select.png b/src/assets/img/publicImage/gter-select.png
new file mode 100644
index 0000000..2c1cda0
Binary files /dev/null and b/src/assets/img/publicImage/gter-select.png differ
diff --git a/src/assets/img/publicImage/safety-icon.png b/src/assets/img/publicImage/safety-icon.png
new file mode 100644
index 0000000..98b1ff6
Binary files /dev/null and b/src/assets/img/publicImage/safety-icon.png differ
diff --git a/src/assets/img/publicImage/walk-icon.png b/src/assets/img/publicImage/walk-icon.png
new file mode 100644
index 0000000..8dc3507
Binary files /dev/null and b/src/assets/img/publicImage/walk-icon.png differ
diff --git a/src/components/apartment/seachModule.vue b/src/components/apartment/seachModule.vue
index 682510f..16b7303 100644
--- a/src/components/apartment/seachModule.vue
+++ b/src/components/apartment/seachModule.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="dis-f jus-x al-item" style="position: relative; z-index: 333;">
+    <div class="dis-f jus-x al-item" style="position: relative; z-index: 333">
         <div class="body-maxWidth" :class="{ seachPage: !props.seachPage }">
             <div class="s-w-100 seach-box-bg">
                 <div class="seach-box">
                     <div class="top-seach dis-f al-item" v-if="props.seachPage">
-                        <div style="position: absolute; left: -8px; top: 20px;">
+                        <div style="position: absolute; left: -8px; top: 20px">
                             <div class="location-box dis-f jus-x al-item">
                                 <img src="../../assets/homeImage/addressImg.png" class="img" alt="" />
                                 香港
@@ -15,18 +15,17 @@
                         <div class="flexacenter seek-input">
                             <el-popover v-model:visible="historyShow" placement="bottom" :width="560" trigger="click" :show-arrow="false" popper-style="background: transparent;padding:0;box-shadow: none;border: none;transform: translateX(50px);">
                                 <template #reference>
-                                    <el-input class="search-input" v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID" @keyup.enter="handleKeyword(pitchValue['keyword'])" style="height: 40px; width: 460px;" maxlength="15"></el-input>
+                                    <el-input class="search-input" v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID" @keyup.enter="handleKeyword(pitchValue['keyword'])" style="height: 40px; width: 460px" maxlength="15"></el-input>
                                 </template>
                                 <div class="dis-f al-item pos-r">
                                     <div class="seach-hiosory-box scrollbar">
                                         <div class="seach-history-info">
-                                            <div v-if="historyArr.length != 0" style="margin-bottom: 30px;">
+                                            <div v-if="historyArr.length != 0" style="margin-bottom: 30px">
                                                 <div class="title">历史搜索</div>
                                                 <div class="info-box">
                                                     <div :class="flexacenter" v-for="(item, i) in historyArr" :key="i" class="btn flexacenter" @click="handleKeyword(item)">
                                                         <div class="flexflex">{{ item }}</div>
                                                         <img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" alt="" />
-                                                        <img />
                                                     </div>
                                                 </div>
                                             </div>
@@ -46,8 +45,8 @@
                             </div>
                         </div>
 
-                        <div class="tool-btn dis-f jus-x al-item add-btn" style="position: relative;">
-                            <img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
+                        <div class="tool-btn dis-f jus-x al-item add-btn" style="position: relative">
+                            <img style="margin-right: 5px" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
                             发布房源
                             <choosing-identity></choosing-identity>
                         </div>
@@ -75,7 +74,7 @@
                     <!-- 展示的 展开和隐藏按钮 -->
                     <div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'">
                         <b>筛选</b>
-                        <div class="screen-btn-text" style="margin-left: 0;">：学校附近</div>
+                        <div class="screen-btn-text" style="margin-left: 0">：学校附近</div>
                         |
                         <div class="screen-btn-text">品牌</div>
                         |
@@ -88,35 +87,105 @@
                     </div>
 
                     <div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }">
-                        <div class="option-left">
-                            <div class="option-item flexflex" style="padding-bottom: 10px;">
-                                <div class="option-title">学校附近</div>
-                                <div class="option-box flexflex flex1">
-                                    <div class="item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div>
-                                    <div class="item flexcenter" v-for="(item, index) in nearSchoolList" :key="index" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
-                                </div>
+                        <div class="option-item flexflex" style="padding-bottom: 15px">
+                            <div class="option-title">学校附近</div>
+                            <div class="option-box flexflex flex1">
+                                <div class="school-item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div>
+                                <div class="school-item flexcenter" v-for="(item, index) in nearSchoolList" :key="index" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
                             </div>
-                            <div class="option-item flexflex" style="padding-top: 20px;">
-                                <div class="option-title flexacenter">租金</div>
-                                <div class="option-box flexacenter flex1 option-input-box">
-                                    <div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" />HK$/月</div>
-
-                                    <div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
-                                        <img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
-                                        清除金额
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- <div class="option-item flexflex">
-                                <div class="option-title">房型</div>
-                                <div class="option-box flexflex flex1">
-                                    <div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">不限</div>
-                                    <div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div>
-                                </div>
-                            </div> -->
                         </div>
-                        <div class="option-right">
+                        <div class="option-item flexflex" style="padding-bottom: 15px">
+                            <div class="option-title">标签筛选</div>
+                            <div class="option-box flexflex flex1">
+                                <div class="school-item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div>
+                                <div class="school-item flexcenter" v-for="(item, index) in nearSchoolList" :key="index" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
+                            </div>
+                        </div>
+                        <div class="option-item flexflex" :class="{ 'show-eliminate': pitchValue['rent_min'] || pitchValue['rent_max'] }" style="padding-bottom: 23px">
+                            <div class="option-title flexacenter">租金</div>
+                            <div class="option-box flexacenter option-input-box" style="white-space: nowrap">
+                                <div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span style="font-size: 18px">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" />HK$/月</div>
+
+                                <div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
+                                    <img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
+                                    清除金额
+                                </div>
+                            </div>
+
+                            <div class="fill"></div>
+
+                            <div class="option-title flexacenter">品牌</div>
+
+                            <div class="option-box flexacenter">
+                                <el-dropdown trigger="click" popper-class="option-dropdown-box">
+                                    <div class="option-dropdown flexacenter">
+                                        <span class="option-dropdown-value ellipsis">{{ brandKey[pitchValue["companyid"]] || "不限" }}</span>
+                                        <img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
+                                    </div>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <el-dropdown-item :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">
+                                                <div class="dropdown-value">不限</div>
+                                                <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
+                                            </el-dropdown-item>
+                                            <el-dropdown-item :class="{ pitch: item.id == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
+                                                <div class="dropdown-value">{{ item["name"] }}</div>
+                                                <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
+                                            </el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+
+                            <div class="fill"></div>
+
+                            <div class="option-title flexacenter">房型</div>
+                            <div class="option-box flexacenter flex1">
+                                <el-dropdown trigger="click" popper-class="option-dropdown-box">
+                                    <div class="option-dropdown flexacenter">
+                                        <span class="option-dropdown-value ellipsis">{{ roomTypeKey[pitchValue["roomtype"]] || "不限" }}</span>
+                                        <img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
+                                    </div>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <el-dropdown-item :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">
+                                                <div class="dropdown-value">不限</div>
+                                                <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
+                                            </el-dropdown-item>
+                                            <el-dropdown-item :class="{ pitch: item.id == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">
+                                                <div class="dropdown-value">{{ item["name"] }}</div>
+                                                <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
+                                            </el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+
+                            <div class="fill"></div>
+
+                            <div class="option-title flexacenter">楼型</div>
+                            <div class="option-box flexacenter flex1">
+                                <el-dropdown trigger="click" popper-class="option-dropdown-box">
+                                    <div class="option-dropdown flexacenter">
+                                        <span class="option-dropdown-value ellipsis">{{ roomlistingsKey[pitchValue["roomlistings"]] || "不限" }}</span>
+                                        <img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
+                                    </div>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <el-dropdown-item :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">
+                                                <div class="dropdown-value">不限</div>
+                                                <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
+                                            </el-dropdown-item>
+                                            <el-dropdown-item :class="{ pitch: item.id == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
+                                                <div class="dropdown-value">{{ item["name"] }}</div>
+                                                <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
+                                            </el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+                        </div>
+                        <div class="option-right" v-if="false">
                             <div class="option-item flexflex">
                                 <div class="option-title flexacenter">品牌</div>
                                 <div class="option-box flexacenter flex1">
@@ -127,11 +196,11 @@
                                         </div>
                                         <template #dropdown>
                                             <el-dropdown-menu>
-                                                <el-dropdown-item :class="{ 'pitch': 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">
+                                                <el-dropdown-item :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">
                                                     <div class="dropdown-value">不限</div>
                                                     <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
                                                 </el-dropdown-item>
-                                                <el-dropdown-item :class="{ 'pitch': item.id == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
+                                                <el-dropdown-item :class="{ pitch: item.id == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
                                                     <div class="dropdown-value">{{ item["name"] }}</div>
                                                     <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
                                                 </el-dropdown-item>
@@ -151,11 +220,11 @@
                                         </div>
                                         <template #dropdown>
                                             <el-dropdown-menu>
-                                                <el-dropdown-item :class="{ 'pitch': 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">
+                                                <el-dropdown-item :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">
                                                     <div class="dropdown-value">不限</div>
                                                     <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
                                                 </el-dropdown-item>
-                                                <el-dropdown-item :class="{ 'pitch': item.id == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">
+                                                <el-dropdown-item :class="{ pitch: item.id == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">
                                                     <div class="dropdown-value">{{ item["name"] }}</div>
                                                     <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
                                                 </el-dropdown-item>
@@ -175,11 +244,11 @@
                                         </div>
                                         <template #dropdown>
                                             <el-dropdown-menu>
-                                                <el-dropdown-item :class="{ 'pitch': 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">
+                                                <el-dropdown-item :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">
                                                     <div class="dropdown-value">不限</div>
                                                     <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
                                                 </el-dropdown-item>
-                                                <el-dropdown-item :class="{ 'pitch': item.id == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
+                                                <el-dropdown-item :class="{ pitch: item.id == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
                                                     <div class="dropdown-value">{{ item["name"] }}</div>
                                                     <img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
                                                 </el-dropdown-item>
@@ -225,17 +294,17 @@
 </template>
 
 <script setup>
-import { ref, toRefs, computed, watchEffect, reactive, defineProps, nextTick } from "vue"
-import { useStore } from "vuex"
-import store from "../../store/index"
-import { useRoute, useRouter } from "vue-router"
-import choosingIdentity from "@/components/edit/choosingIdentity.vue"
+import { ref, toRefs, computed, watchEffect, reactive, defineProps, nextTick } from "vue";
+import { useStore } from "vuex";
+import store from "../../store/index";
+import { useRoute, useRouter } from "vue-router";
+import choosingIdentity from "@/components/edit/choosingIdentity.vue";
 
-const usestore = useStore()
-const { wechat } = toRefs(usestore.state)
-const router = useRouter()
+const usestore = useStore();
+const { wechat } = toRefs(usestore.state);
+const router = useRouter();
 
-const route = useRoute()
+const route = useRoute();
 
 const props = defineProps({
     count: {
@@ -249,32 +318,32 @@ const props = defineProps({
     initPitchValue: {
         type: Object,
     },
-})
+});
 
-const emit = defineEmits(["handleTransfer"])
+const emit = defineEmits(["handleTransfer"]);
 
-let state = ref("unfold") // 筛选状态  unfold 展开  pack 收起
+let state = ref("unfold"); // 筛选状态  unfold 展开  pack 收起
 
 //搜索框
-let historyShow = ref(false)
-let setHistoryShow = () => (historyShow.value = historyShow.value) // 修改历史记录框的显示状态 通过input的 焦点状态判断的
+let historyShow = ref(false);
+let setHistoryShow = () => (historyShow.value = historyShow.value); // 修改历史记录框的显示状态 通过input的 焦点状态判断的
 
-let historyArr = ref([]) //历史查找记录
-let hotArr = reactive({ data: [] })
+let historyArr = ref([]); //历史查找记录
+let hotArr = reactive({ data: [] });
 
 //获取历史搜索记录
-historyArr.value = JSON.parse(localStorage.getItem("historyArr")) || []
+historyArr.value = JSON.parse(localStorage.getItem("historyArr")) || [];
 
-let nearSchoolList = reactive([{ name: "不限", id: 0 }]) //学校附近
+let nearSchoolList = reactive([{ name: "不限", id: 0 }]); //学校附近
 
-let roomTypeList = reactive([]) // 房型
-let roomTypeKey = reactive([]) // 房型 键值对
+let roomTypeList = reactive([]); // 房型
+let roomTypeKey = reactive([]); // 房型 键值对
 
-let roomlistingsList = reactive([]) // 楼型
-let roomlistingsKey = reactive([]) // 楼型 键值对
+let roomlistingsList = reactive([]); // 楼型
+let roomlistingsKey = reactive([]); // 楼型 键值对
 
-let brandList = reactive([]) // 品牌数据
-let brandKey = reactive([]) // 品牌数据 键值对
+let brandList = reactive([]); // 品牌数据
+let brandKey = reactive([]); // 品牌数据 键值对
 
 // 筛选条件
 let pitchValue = ref({
@@ -285,102 +354,102 @@ let pitchValue = ref({
     school: 0,
     roomlistings: 0,
     keyword: "",
-})
+});
 
 watchEffect(() => {
     // nearSchoolList = store.state.apartment.school || []
-    nearSchoolList = store.state.schoolList || []
-    roomTypeList = store.state.apartment.roomtype || []
-    roomTypeKey = store.state.roomTypeKey || {}
-    roomlistingsList = store.state.apartment.roomlistings || []
-    roomlistingsKey = store.state.roomlistingsKey || {}
-    brandList = store.state.apartment.brand || []
-    brandKey = store.state.brandKey || {}
-    hotArr.data = store.state.indexData.hotSearcheWords
-    pitchValue.value = { ...pitchValue.value, ...props.initPitchValue }
-})
+    nearSchoolList = store.state.schoolList || [];
+    roomTypeList = store.state.apartment.roomtype || [];
+    roomTypeKey = store.state.roomTypeKey || {};
+    roomlistingsList = store.state.apartment.roomlistings || [];
+    roomlistingsKey = store.state.roomlistingsKey || {};
+    brandList = store.state.apartment.brand || [];
+    brandKey = store.state.brandKey || {};
+    hotArr.data = store.state.indexData.hotSearcheWords;
+    pitchValue.value = { ...pitchValue.value, ...props.initPitchValue };
+});
 
 if (route.query["companyid"]) {
-    pitchValue.value["companyid"] = route.query["companyid"]
-    state.value = "unfold"
+    pitchValue.value["companyid"] = route.query["companyid"];
+    state.value = "unfold";
 }
 
 // 是否点击里 清除金额按钮 因为输入金额后再点击清除按钮是会先请求有金额的列表
-let clearingAmountState = false
+let clearingAmountState = false;
 // 点击清除金额
 const clearingAmount = () => {
-    clearingAmountState = true
-    pitchValue.value["rent_min"] = null
-    pitchValue.value["rent_max"] = null
-    emit("handleTransfer", pitchValue)
-}
+    clearingAmountState = true;
+    pitchValue.value["rent_min"] = null;
+    pitchValue.value["rent_max"] = null;
+    emit("handleTransfer", pitchValue);
+};
 
 // 金额的失去焦点事件
 const rentBlur = () => {
     setTimeout(() => {
-        if (!clearingAmountState) emit("handleTransfer", pitchValue)
-    }, 300)
-}
+        if (!clearingAmountState) emit("handleTransfer", pitchValue);
+    }, 300);
+};
 
 // 搜索框输入中
-const rentInput = () => (clearingAmountState = false)
+const rentInput = () => (clearingAmountState = false);
 
 // 点击历史搜索和热门推荐
-const handleKeyword = value => {
-    sessionStorage.setItem("houseingPageType", "")
-    router.push(`/seachPage?keyword=${value}`)
+const handleKeyword = (value) => {
+    sessionStorage.setItem("houseingPageType", "");
+    router.push(`/seachPage?keyword=${value}`);
     if (historyArr.value.indexOf(value) == -1 && value) {
-        historyArr.value.unshift(value)
-        storingHistory()
+        historyArr.value.unshift(value);
+        storingHistory();
     }
-}
+};
 
 //搜索数据
 let seachList = () => {
     if (historyArr.value.indexOf(pitchValue.value["keyword"] && pitchValue.value["keyword"]) == -1) {
-        historyArr.value.unshift(pitchValue.value["keyword"])
-        storingHistory()
+        historyArr.value.unshift(pitchValue.value["keyword"]);
+        storingHistory();
     }
 
-    historyShow.value = false
+    historyShow.value = false;
 
-    emit("handleTransfer", pitchValue)
-}
+    emit("handleTransfer", pitchValue);
+};
 
 // 存储历史记录 并判断长度
 const storingHistory = () => {
-    if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10)
-    localStorage.setItem("historyArr", JSON.stringify(historyArr.value))
-}
+    if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10);
+    localStorage.setItem("historyArr", JSON.stringify(historyArr.value));
+};
 
 // 选择选项
 const selectOption = (type, value) => {
     switch (type) {
         case "nearSchool":
-            pitchValue.value["school"] = value
-            break
+            pitchValue.value["school"] = value;
+            break;
         case "roomType":
-            pitchValue.value["roomtype"] = value
-            break
+            pitchValue.value["roomtype"] = value;
+            break;
         case "brand":
-            pitchValue.value["companyid"] = value
-            break
+            pitchValue.value["companyid"] = value;
+            break;
         case "roomlistings":
-            pitchValue.value["roomlistings"] = value
-            break
+            pitchValue.value["roomlistings"] = value;
+            break;
         default:
-            break
+            break;
     }
     nextTick(() => {
-        emit("handleTransfer", pitchValue)
-    })
-}
+        emit("handleTransfer", pitchValue);
+    });
+};
 
 //删除历史记录
-let deleteSeachVal = i => {
-    historyArr.value.splice(i, 1)
-    localStorage.setItem("historyArr", JSON.stringify(historyArr.value))
-}
+let deleteSeachVal = (i) => {
+    historyArr.value.splice(i, 1);
+    localStorage.setItem("historyArr", JSON.stringify(historyArr.value));
+};
 </script>
 <style scoped lang="less">
 * {
@@ -449,9 +518,10 @@ let deleteSeachVal = i => {
         border-radius: 16px;
 
         .top-seach {
-            padding: 20px;
+            // padding: 20px;
             position: relative;
             justify-content: end;
+            padding: 23px 20px 24px;
 
             .intermediary-btn {
                 background: rgba(241, 245, 247, 1);
@@ -636,7 +706,8 @@ let deleteSeachVal = i => {
     .quantity {
         color: #555555;
         font-size: 15px;
-        height: 72px;
+        // height: 72px;
+        height: 64px;
         font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
 
         .b {
@@ -652,6 +723,7 @@ let deleteSeachVal = i => {
     overflow: hidden;
     // height: 0;
     transition: height 0.25s linear 0s;
+    padding-top: 22px;
 
     &.option-area-unfold {
         // height: 335px;
@@ -659,101 +731,149 @@ let deleteSeachVal = i => {
         border-bottom: 1px solid #ebebeb;
     }
 
-    .option-left,
-    .option-right {
-        width: 600px;
+    // .option-left,
+    // .option-right {
+    // width: 600px;
 
-        &:not(:last-of-type) {
-            border-right: 1px #ebebeb dotted;
+    // &:not(:last-of-type) {
+    //     border-right: 1px #ebebeb dotted;
+    // }
+
+    .option-item {
+        // width: 540px;
+        // padding-top: 24px;
+        padding-bottom: 20px;
+        margin: 0 0 0 20px;
+
+        // &:not(:last-of-type) {
+        //     border-bottom: 1px #ebebeb dotted;
+        // }
+
+        .option-title {
+            font-size: 14px;
+            color: #7f7f7f;
+            width: 61px;
+            padding: 0 2px;
+            line-height: 30px;
+            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+            margin-right: 20px;
+            justify-content: flex-end;
         }
 
-        .option-item {
-            // width: 540px;
-            padding-top: 24px;
-            padding-bottom: 20px;
-            margin: 0 30px 0 20px;
-
-            &:not(:last-of-type) {
-                border-bottom: 1px #ebebeb dotted;
-            }
-
-            .option-title {
-                font-size: 14px;
-                color: #b5b5b5;
-                width: 90px;
-                line-height: 30px;
+        &.show-eliminate {
+            .wid22 {
+                width: 0;
             }
 
             .option-box {
-                flex-wrap: wrap;
+                .option-dropdown {
+                    width: 145x;
+                }
+            }
+        }
 
-                .item {
-                    padding: 5px 10px;
+        .wid22 {
+            width: 12px;
+            transition: all 0.3s;
+        }
+
+        .option-box {
+            flex-wrap: wrap;
+
+            .school-item {
+                padding: 5px 10px;
+                height: 30px;
+                display: flex;
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                font-weight: 400;
+                font-size: 14px;
+                text-align: center;
+                line-height: 30px;
+                border-radius: 10px;
+                margin-right: 10px;
+                margin-bottom: 10px;
+                cursor: pointer;
+                border: 1px solid transparent;
+                background-color: rgba(242, 242, 242, 1);
+                color: #333333;
+
+                &:hover {
+                    border: 1px solid rgba(235, 235, 235, 1);
+                }
+
+                &.pitch {
+                    background-color: #50e3c2;
+                    color: #fff;
+                    border: 1px solid #50e3c2;
+                }
+            }
+
+            &.option-input-box {
+                font-weight: 400;
+                font-size: 14px;
+                color: #555555;
+                line-height: 20px;
+
+                .eliminate {
+                    width: 96px;
                     height: 30px;
-                    display: flex;
-                    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
-                    font-weight: 400;
+                    background-color: rgba(246, 246, 246, 1);
+                    border-radius: 50px;
                     font-size: 14px;
-                    text-align: center;
-                    line-height: 30px;
-                    border-radius: 10px;
-                    margin-right: 10px;
-                    margin-bottom: 10px;
-                    cursor: pointer;
                     color: #7f7f7f;
-                    border: 1px solid transparent;
+                    cursor: pointer;
+                    margin-left: 10px;
 
-                    &:hover {
-                        border: 1px solid rgba(235, 235, 235, 1);
-                    }
-
-                    &.pitch {
-                        color: #50e3c2;
-                        border: 1px solid #50e3c2;
-                        background: #eefcf9;
+                    .eliminate-icon {
+                        width: 14px;
+                        height: 14px;
+                        margin-right: 3px;
                     }
                 }
 
-                &.option-input-box {
-                    font-weight: 400;
+                .option-input {
+                    width: 100px;
+                    height: 40px;
+                    border: 1px solid rgba(179, 179, 179, 1);
+                    border-radius: 10px;
+                    // outline: none;
                     font-size: 14px;
-                    color: #555555;
-                    line-height: 20px;
+                    margin: 0 10px;
+                    padding: 10px;
 
-                    .eliminate {
-                        width: 96px;
-                        height: 30px;
-                        background-color: rgba(246, 246, 246, 1);
-                        border-radius: 50px;
-                        font-size: 14px;
-                        color: #7f7f7f;
-                        cursor: pointer;
-
-                        .eliminate-icon {
-                            width: 14px;
-                            height: 14px;
-                            margin-right: 3px;
-                        }
+                    &:first-of-type {
+                        margin-left: 0;
                     }
+                }
+            }
 
-                    .option-input {
-                        width: 100px;
-                        height: 40px;
-                        border: 1px solid rgba(179, 179, 179, 1);
-                        border-radius: 10px;
-                        // outline: none;
-                        font-size: 14px;
-                        margin: 0 10px;
-                        padding: 10px;
+            .option-dropdown {
+                width: 150px;
+                height: 40px;
+                transition: all 0.3s;
+                background-color: rgba(246, 246, 246, 1);
+                border-radius: 10px;
+                justify-content: space-between;
+                padding-left: 12px;
+                padding-right: 10px;
+                cursor: pointer;
+                background-color: rgba(246, 246, 246, 0);
+                border: 1px solid rgba(179, 179, 179, 1);
 
-                        &:first-of-type {
-                            margin-left: 0;
-                        }
-                    }
+                .option-dropdown-value {
+                    font-size: 14px;
+                    color: #000000;
+                    line-height: 24px;
+                }
+
+                .option-dropdown-img {
+                    width: 12px;
+                    height: 7px;
                 }
             }
         }
     }
+    // }
 
     .option-right {
         padding-top: 18px;
@@ -920,7 +1040,8 @@ let deleteSeachVal = i => {
     border-radius: 65px;
     overflow: hidden;
     background-color: #f6f6f6;
-    border: solid 1px var(--el-input-border-color, var(--el-border-color));
+    border: solid 1px rgb(235, 235, 235);
+    height: 40px;
 
     ::v-deep .el-input__wrapper {
         box-shadow: none;
@@ -960,7 +1081,8 @@ let deleteSeachVal = i => {
 
 <style lang="less">
 .el-popper.el-dropdown__popper.option-dropdown-box {
-    width: 477px;
+    width: 260px;
+
     background-color: rgba(255, 255, 255, 1);
     border-radius: 10px;
     -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647);
diff --git a/src/components/public/apartment-item.vue b/src/components/public/apartment-item.vue
index edef836..d591c48 100644
--- a/src/components/public/apartment-item.vue
+++ b/src/components/public/apartment-item.vue
@@ -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;
+                    }
+                }
             }
         }
     }
diff --git a/src/views/apartmentDetail.vue b/src/views/apartmentDetail.vue
index 5a4d71b..58ca9b4 100644
--- a/src/views/apartmentDetail.vue
+++ b/src/views/apartmentDetail.vue
@@ -5,7 +5,7 @@
         <div class="header">
             <div class="top flexflex">
                 <div class="brand-abstract flexflex">
-                    <div class="flexacenter" style="height: min-content;">
+                    <div class="flexacenter" style="height: min-content">
                         <a class="item" href="/">港校租房</a>
                         <img class="arrow" alt="箭头" src="@/assets/img/publicImage/yellow-arrow.svg" />
                         <a class="item" href="/apartment">品牌公寓</a>
@@ -27,9 +27,7 @@
                             </el-carousel-item>
                         </el-carousel>
                         <div class="indicate-type flexacenter" v-if="indicateTypeState()">
-                            <div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'lives' }" v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">
-                                直播
-                            </div>
+                            <div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'lives' }" v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">直播</div>
                             <div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'videos' }" v-if="info['videos'] && info['videos'].length != 0" @click="slideshowType('videos')">视频</div>
                             <div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'attachment' }" v-if="info['attachment'] && info['attachment'].length != 0" @click="slideshowType('attachment')">图片</div>
                         </div>
@@ -57,22 +55,48 @@
                 <div class="header-right flex1">
                     <img class="header-bj" alt="头部的地图背景" src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.jpg" />
                     <!-- <img class="header-shade" src="@/assets/img/apartmentDetail/apartmentDetail-header-shade.svg"> -->
-                    <div class="tab-box flexflex" v-if="info['tags'] && info['tags'].length != 0">
+                    <!-- <div class="tab-box flexflex" v-if="info['tags'] && info['tags'].length != 0">
                         <div class="tab-item wordbreak flexcenter" v-for="(item, index) in info['tags']" :key="index">{{ item }}</div>
-                    </div>
+                    </div> -->
                     <div class="apartment-name wordbreak" v-if="info['title']">{{ info["title"] }}</div>
-                    <div class="synopsis wordbreak">{{ info["introduction"] }}</div>
-                    <div class="place flexacenter" v-if="info['address']">
-                        <div class="left flexacenter">
-                            <img class="icon" alt="位置与交通-图标" src="@/assets/img/publicImage/location-icon.png" />
-                            <div class="place-text ellipsis">{{ info["address"] }}</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="right flexacenter" @click="handleClickNav('addressEle')">
-                            位置与交通
-                            <img class="icon" alt="位置与交通-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
+                        <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="introduce">
+                        <div class="introduce-head flexacenter">
+                            <img class="icon" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
+                            <div class="name">iRent</div>
+                            <div class="full-name flex1">油尖旺中心地带的品质公寓</div>
+                            <div class="more flexacenter">
+                                同品牌
+                                <img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
+                            </div>
+                        </div>
+                        <div class="synopsis wordbreak">{{ info["introduction"] }}</div>
+                    </div>
+
+                    <!-- <div class="synopsis wordbreak">{{ info["introduction"] }}</div> -->
+                    <div class="place flexacenter" v-if="info['address']">
+                        <div class="place-head flexacenter">
+                            <img class="icon" alt="位置与交通-图标" src="@/assets/img/publicImage/location-icon.png" />
+                            <div class="text flex1 ellipsis">{{ info["address"] }}</div>
+                            <div class="more flexacenter" @click="handleClickNav('addressEle')">
+                                位置与交通
+                                <img class="icon" alt="位置与交通-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
+                            </div>
                         </div>
                     </div>
-                    <div class="else flexacenter" v-if="withsameapartments">
+                    <!-- <div class="else flexacenter" v-if="withsameapartments">
                         <div class="left flexacenter">
                             <img class="icon" alt="同品牌其他公寓-图标" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
                             同品牌其他公寓
@@ -81,7 +105,7 @@
                             <div class="quantity flexcenter" :aria-label="withsameapartments + '个同品牌其他公寓'">{{ withsameapartments }}</div>
                             <img class="icon" alt="同品牌其他公寓-箭头" src="@/assets/img/publicImage/black-arrow.svg" />
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
@@ -223,7 +247,7 @@
                             </div>
                             <div class="distance-info-data dis-f">
                                 <div class="distance-info-left">
-                                    <div class="distance-info-left-item flexcenter" :class="{ 'pitch': index == academyPitchIndex }" v-for="(item, index) in annexSchoolList" :key="index" @click="selectAcademyIndex(index)">{{ item.alias }}</div>
+                                    <div class="distance-info-left-item flexcenter" :class="{ pitch: index == academyPitchIndex }" v-for="(item, index) in annexSchoolList" :key="index" @click="selectAcademyIndex(index)">{{ item.alias }}</div>
                                 </div>
                                 <el-scrollbar ref="elscrollbarRef" :style="{ height: 50 * annexSchoolList.length + 'px' }">
                                     <div class="distance-info-right flex1">
@@ -258,12 +282,12 @@
                                                     <!-- 地铁 -->
                                                     <div v-else-if="item.type == 'bus' && item.bustype == '地铁线路'" class="journey-value flex1 subway flexacenter">
                                                         <div class="subway-name flexcenter">{{ item.name }}</div>
-                                                        <div class="flex1" style="white-space: nowrap;">{{ item.via_num }}站·{{ item.durationText }}</div>
+                                                        <div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
                                                     </div>
                                                     <!-- 公交 -->
                                                     <div v-else-if="item.type == 'bus' && item.bustype == '普通公交线路'" class="journey-value flex1 bus flexacenter">
                                                         <div class="bus-name flexcenter">{{ item.name }}</div>
-                                                        <div class="flex1" style="white-space: nowrap;">{{ item.via_num }}站·{{ item.durationText }}</div>
+                                                        <div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
                                                     </div>
                                                 </div>
                                             </div>
@@ -325,7 +349,7 @@
                 <!-- 品牌介绍 -->
                 <div class="details-item company" v-if="company" ref="companyEle">
                     <div class="details-header flexacenter">
-                        <img class="icon" style="width: 20px; height: 20px;" src="@/assets/img/apartmentDetail/introduce-icon.png" />
+                        <img class="icon" style="width: 20px; height: 20px" src="@/assets/img/apartmentDetail/introduce-icon.png" />
                         品牌介绍
                     </div>
                     <img class="company-img flexflex" v-lazy="company['imageurl']" />
@@ -333,9 +357,7 @@
                 </div>
 
                 <div class="details-item hint-box">
-                    <div class="hint-item">
-                        温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。
-                    </div>
+                    <div class="hint-item">温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。</div>
                     <div class="hint-item"></div>
                     <div class="hint-item flexacenter">公寓/酒店/中介房源推广合作请联系：<a @click="copy('ad@gter.net')">ad@gter.net</a></div>
                 </div>
@@ -422,179 +444,179 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from "vue"
-import { ElMessage, valueEquals } from "element-plus"
-import { useStore } from "vuex"
+import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from "vue";
+import { ElMessage, valueEquals } from "element-plus";
+import { useStore } from "vuex";
 
-import pageTopBar from "../components/pageTopBar/pageTopBar.vue"
-import footerpage from "@/components/footer/footer.vue"
-import viewMap from "@/components/public/viewMap.vue"
-import transmitBtn from "@/components/public/transmitBtn.vue"
-import backToTop from "@/components/public/backToTop.vue"
-import imageWatch from "@/components/detail/imageWatch.vue"
-import phoneqrcode from "@/components/public/phoneQRcode.vue"
-import groupqrcode from "@/components/public/group-QRcode.vue"
-import api from "@/utils/api"
+import pageTopBar from "../components/pageTopBar/pageTopBar.vue";
+import footerpage from "@/components/footer/footer.vue";
+import viewMap from "@/components/public/viewMap.vue";
+import transmitBtn from "@/components/public/transmitBtn.vue";
+import backToTop from "@/components/public/backToTop.vue";
+import imageWatch from "@/components/detail/imageWatch.vue";
+import phoneqrcode from "@/components/public/phoneQRcode.vue";
+import groupqrcode from "@/components/public/group-QRcode.vue";
+import api from "@/utils/api";
 
-import { useRouter, useRoute } from "vue-router"
-let router = useRouter()
+import { useRouter, useRoute } from "vue-router";
+let router = useRouter();
 
-const route = useRoute()
+const route = useRoute();
 
 watch(route, () => {
-    uniqid = router.currentRoute.value.query["uniqid"]
-    pitchSchool = router.currentRoute.value.query["school"] || ""
-    info.value = {}
-    roomList.value = []
-    carouselsconfig.value = { lives: {}, videos: {}, attachment: {} }
-    navList.value = []
-    navTab.value = "roomEle"
-    dualBrandList.value = []
-    contactReservationState.value = false
-    customerservicelist.value = []
-    mediaBtnstate.value = {}
+    uniqid = router.currentRoute.value.query["uniqid"];
+    pitchSchool = router.currentRoute.value.query["school"] || "";
+    info.value = {};
+    roomList.value = [];
+    carouselsconfig.value = { lives: {}, videos: {}, attachment: {} };
+    navList.value = [];
+    navTab.value = "roomEle";
+    dualBrandList.value = [];
+    contactReservationState.value = false;
+    customerservicelist.value = [];
+    mediaBtnstate.value = {};
 
-    slideshowList.value = null
-    detailsLeft.value = null
-    token = ""
+    slideshowList.value = null;
+    detailsLeft.value = null;
+    token = "";
 
-    carouselIndex.value = 0
-    allCarouselsData.value = []
+    carouselIndex.value = 0;
+    allCarouselsData.value = [];
     // mediaBtnstate.value = {}
-    init()
-    distanceSchool()
-})
+    init();
+    distanceSchool();
+});
 
-let { uniqid } = router.currentRoute.value.query
-let pitchSchool = route.query.school || 0
+let { uniqid } = router.currentRoute.value.query;
+let pitchSchool = route.query.school || 0;
 
-import { copyToClipboard, metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js"
+import { copyToClipboard, metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js";
 
-const { proxy } = getCurrentInstance()
-const store = useStore()
+const { proxy } = getCurrentInstance();
+const store = useStore();
 
-let imageShow = ref(false) // 查看大图弹窗的状态
-let imageList = ref([]) // 查看大图弹窗的状态
-let imageIndex = ref(0) // 查看大图弹窗的状态
-let imageType = "" // 查看大图弹窗的状态
+let imageShow = ref(false); // 查看大图弹窗的状态
+let imageList = ref([]); // 查看大图弹窗的状态
+let imageIndex = ref(0); // 查看大图弹窗的状态
+let imageType = ""; // 查看大图弹窗的状态
 const cloaseImageShow = (list, index, type) => {
     if (list && imageType != type) {
-        imageList.value = list
-        imageIndex.value = index
-        imageType = type
+        imageList.value = list;
+        imageIndex.value = index;
+        imageType = type;
     }
-    imageShow.value = !imageShow.value
-}
+    imageShow.value = !imageShow.value;
+};
 
 // 房间类型
-let roomList = ref([])
-let info = ref({})
+let roomList = ref([]);
+let info = ref({});
 
 let facilitiesKeyValue = {
     // 设施的键值对
     public: "公共",
     kitchen: "餐厨",
     lavatory: "洗手间",
-}
+};
 
-let withsameapartments = ref(0) // 其他公寓数量
-let attachment = ref([]) // 轮播图数据
+let withsameapartments = ref(0); // 其他公寓数量
+let attachment = ref([]); // 轮播图数据
 
-let company = {} // 品牌数据
-let token = ""
-let qrcode = ref("") // 小程序详情二维码
+let company = {}; // 品牌数据
+let token = "";
+let qrcode = ref(""); // 小程序详情二维码
 
-let allCarouselsData = ref([])
+let allCarouselsData = ref([]);
 
 onMounted(() => {
-    init()
-    distanceSchool()
-})
+    init();
+    distanceSchool();
+});
 
 const init = () => {
-    proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
+    proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then((res) => {
         if (res.code != 200) {
-            ElMessage.error(res["message"])
-            return
+            ElMessage.error(res["message"]);
+            return;
         }
-        let data = res.data
+        let data = res.data;
 
-        data["roomList"].forEach(element => {
-            element["images"].forEach(element => {
-                element["type"] = "attachment"
-            })
-            element["videos"].forEach(element => {
-                element["type"] = "videos"
-            })
-        })
+        data["roomList"].forEach((element) => {
+            element["images"].forEach((element) => {
+                element["type"] = "attachment";
+            });
+            element["videos"].forEach((element) => {
+                element["type"] = "videos";
+            });
+        });
 
-        roomList.value = data["roomList"]
-        data["info"]["coordinate"] = data["info"]["coordinate"].split(",").map(item => {
-            return +item
-        })
+        roomList.value = data["roomList"];
+        data["info"]["coordinate"] = data["info"]["coordinate"].split(",").map((item) => {
+            return +item;
+        });
 
-        info.value = data["info"]
-        attachment.value = data["info"]["attachment"]
-        withsameapartments.value = data["withsameapartments"]
-        company = data["company"]
-        token = data["token"]
-        qrcode.value = data["qrcode"]
+        info.value = data["info"];
+        attachment.value = data["info"]["attachment"];
+        withsameapartments.value = data["withsameapartments"];
+        company = data["company"];
+        token = data["token"];
+        qrcode.value = data["qrcode"];
 
-        handleAllCarouselsData()
+        handleAllCarouselsData();
 
-        document.title = data?.info?.title || "港校租房-品牌公寓详情"
+        document.title = data?.info?.title || "港校租房-品牌公寓详情";
 
-        nextTick(() => handleNavData())
+        nextTick(() => handleNavData());
 
-        if (data.withsameapartments > 0) dualBrandData()
-    })
-}
+        if (data.withsameapartments > 0) dualBrandData();
+    });
+};
 
-let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} })
+let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} });
 
 // 处理 轮播图大图的索引 tab
 const handleAllCarouselsData = () => {
-    let targetInfo = { ...info.value }
+    let targetInfo = { ...info.value };
 
-    let accumulativeTotal = 0 // 累计
+    let accumulativeTotal = 0; // 累计
     for (const key in carouselsconfig.value) {
         carouselsconfig.value[key] = {
             amount: targetInfo[key].length,
             index: accumulativeTotal,
-        }
-        accumulativeTotal += targetInfo[key].length
+        };
+        accumulativeTotal += targetInfo[key].length;
     }
 
-    targetInfo["lives"].forEach(element => {
-        element["type"] = "lives"
-        allCarouselsData.value.push(element)
-    })
+    targetInfo["lives"].forEach((element) => {
+        element["type"] = "lives";
+        allCarouselsData.value.push(element);
+    });
 
-    targetInfo["videos"].forEach(element => {
-        element["type"] = "videos"
-        allCarouselsData.value.push(element)
-    })
+    targetInfo["videos"].forEach((element) => {
+        element["type"] = "videos";
+        allCarouselsData.value.push(element);
+    });
 
-    let thumbnailList = targetInfo["thumbnailList"]
+    let thumbnailList = targetInfo["thumbnailList"];
 
     targetInfo["attachment"].forEach((element, index) => {
         element = {
             imageurl: element,
             thumbnail: thumbnailList[index],
-        }
-        element["type"] = "attachment"
-        allCarouselsData.value.push(element)
-    })
-}
+        };
+        element["type"] = "attachment";
+        allCarouselsData.value.push(element);
+    });
+};
 
-const roomEle = ref(null)
-const specialEle = ref(null)
-const addressEle = ref(null)
-const messageEle = ref(null)
-const facilitiesEle = ref(null)
-const lifeEle = ref(null)
-const companyEle = ref(null)
-const eleseEle = ref(null)
+const roomEle = ref(null);
+const specialEle = ref(null);
+const addressEle = ref(null);
+const messageEle = ref(null);
+const facilitiesEle = ref(null);
+const lifeEle = ref(null);
+const companyEle = ref(null);
+const eleseEle = ref(null);
 
 let navconfig = [
     {
@@ -625,36 +647,36 @@ let navconfig = [
         name: "品牌介绍",
         value: "companyEle",
     },
-]
-let navList = ref([])
+];
+let navList = ref([]);
 
-let navTab = ref("roomEle")
+let navTab = ref("roomEle");
 
 // 处理 navList 数据
 const handleNavData = () => {
-    navconfig.forEach(element => {
-        if (eval(element["value"]).value) navList.value.push(element)
-    })
-}
+    navconfig.forEach((element) => {
+        if (eval(element["value"]).value) navList.value.push(element);
+    });
+};
 
 // 处理点击nav 滚动事件
-const handleClickNav = value => {
-    let scrollTop = eval(value).value.offsetTop + 136
-    window.scrollTo({ top: scrollTop, behavior: "smooth" })
-}
+const handleClickNav = (value) => {
+    let scrollTop = eval(value).value.offsetTop + 136;
+    window.scrollTo({ top: scrollTop, behavior: "smooth" });
+};
 
-let dualBrandList = ref([]) // 同品牌数据
+let dualBrandList = ref([]); // 同品牌数据
 // 同品牌请求数据
 const dualBrandData = () => {
-    proxy.$get("/tenement/pc/api/apartment", { token }).then(res => {
-        if (res.code != 200) return
-        let data = res.data
-        dualBrandList.value = data.data
-    })
-}
+    proxy.$get("/tenement/pc/api/apartment", { token }).then((res) => {
+        if (res.code != 200) return;
+        let data = res.data;
+        dualBrandList.value = data.data;
+    });
+};
 
 // 点击转发的复制链接按钮
-const copy = value =>
+const copy = (value) =>
     copyToClipboard(value).then(() => {
         ElMessage({
             message: "复制成功",
@@ -662,17 +684,17 @@ const copy = value =>
             offset: 320,
             duration: 1000,
             customClass: "message-info",
-        })
-    })
+        });
+    });
 
-let contactReservationState = ref(false) // 联系预订客服的弹窗状态
-let customerservicelist = ref([]) // 联系预订客服的弹窗状态
+let contactReservationState = ref(false); // 联系预订客服的弹窗状态
+let customerservicelist = ref([]); // 联系预订客服的弹窗状态
 
 // 修改 客服 弹窗状态
 const modificationContact = () => {
-    if (customerservicelist.value.length == 0) contactReservationService()
-    else contactReservationState.value = !contactReservationState.value
-}
+    if (customerservicelist.value.length == 0) contactReservationService();
+    else contactReservationState.value = !contactReservationState.value;
+};
 
 // 联系预订客服 请求数据
 const contactReservationService = () => {
@@ -681,212 +703,212 @@ const contactReservationService = () => {
             customerservice: info.value["customerservice"],
             token,
         })
-        .then(res => {
-            if (res.code != 200) return
-            let data = res.data
-            customerservicelist.value = data["customerservicelist"]
-            contactReservationState.value = !contactReservationState.value
-        })
-}
+        .then((res) => {
+            if (res.code != 200) return;
+            let data = res.data;
+            customerservicelist.value = data["customerservicelist"];
+            contactReservationState.value = !contactReservationState.value;
+        });
+};
 
-let mediaBtnstate = ref({}) // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击
+let mediaBtnstate = ref({}); // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击
 
 const handleMediaBtn = (type, index) => {
-    const element = document.querySelector(`.element${index}`)
+    const element = document.querySelector(`.element${index}`);
     if (element) {
-        let left
-        if (type == "left") left = element.scrollLeft - 86
-        else left = element.scrollLeft + 86
+        let left;
+        if (type == "left") left = element.scrollLeft - 86;
+        else left = element.scrollLeft + 86;
         const scrollOptions = {
             left,
             behavior: "smooth",
-        }
-        element.scrollTo(scrollOptions)
+        };
+        element.scrollTo(scrollOptions);
 
         nextTick(() => {
             setTimeout(() => {
-                if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
-                else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
-                else mediaBtnstate.value[index] = 2
-            }, 150)
-        })
+                if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0;
+                else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1;
+                else mediaBtnstate.value[index] = 2;
+            }, 150);
+        });
     }
-}
+};
 
-let slideshowList = ref(null) // 轮播图小图的节点
+let slideshowList = ref(null); // 轮播图小图的节点
 
-let carouselIndex = ref(0) // 轮播图的索引
+let carouselIndex = ref(0); // 轮播图的索引
 
-const remarkCaruselUp = ref(null)
+const remarkCaruselUp = ref(null);
 
-const carouselChange = value => {
-    carouselIndex.value = value
-    const element = slideshowList.value
-    const elementchild = element.querySelector(`.item${value}`)
+const carouselChange = (value) => {
+    carouselIndex.value = value;
+    const element = slideshowList.value;
+    const elementchild = element.querySelector(`.item${value}`);
 
-    let left = elementchild.offsetLeft - element.offsetLeft
+    let left = elementchild.offsetLeft - element.offsetLeft;
     const scrollOptions = {
         left,
         behavior: "smooth",
-    }
-    element.scrollTo(scrollOptions)
-}
+    };
+    element.scrollTo(scrollOptions);
+};
 
 // 顶部轮播图的左右按钮
-const handleslideshow = type => {
-    if (type == "left" && carouselIndex.value != 0) remarkCaruselUp.value.prev()
-    if (type != "left" && carouselIndex.value != allCarouselsData.value.length - 1) remarkCaruselUp.value.next()
-}
+const handleslideshow = (type) => {
+    if (type == "left" && carouselIndex.value != 0) remarkCaruselUp.value.prev();
+    if (type != "left" && carouselIndex.value != allCarouselsData.value.length - 1) remarkCaruselUp.value.next();
+};
 
 // 直接点击轮播图的小图就行切换
-const slideshowItem = index => remarkCaruselUp.value.setActiveItem(index)
+const slideshowItem = (index) => remarkCaruselUp.value.setActiveItem(index);
 // 直接点击大图的 类型
-const slideshowType = type => slideshowItem(carouselsconfig.value[type].index)
+const slideshowType = (type) => slideshowItem(carouselsconfig.value[type].index);
 
-let detailsLeft = ref(null)
+let detailsLeft = ref(null);
 
 onMounted(() => {
-    window.addEventListener("scroll", handleScroll)
-})
+    window.addEventListener("scroll", handleScroll);
+});
 
 onUnmounted(() => {
-    window.removeEventListener("scroll", handleScroll)
-})
+    window.removeEventListener("scroll", handleScroll);
+});
 
-const gobrand = item => router.push(`/apartmentDetail?uniqid=${item.uniqid}`)
+const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
 
 const handleScroll = () => {
-    if (Math.random() > 0.3) return
+    if (Math.random() > 0.3) return;
     for (let i = 0; i < navList.value.length; i++) {
-        let element = navList.value[i]
+        let element = navList.value[i];
 
-        const rect = eval(element.value).value.getBoundingClientRect()
-        const distanceToTop = rect.top
+        const rect = eval(element.value).value.getBoundingClientRect();
+        const distanceToTop = rect.top;
         if (distanceToTop >= 0) {
-            navTab.value = element.value
-            break
+            navTab.value = element.value;
+            break;
         }
     }
-}
+};
 
 const indicateTypeState = () => {
-    let total = 0 // 累计
+    let total = 0; // 累计
     for (const key in carouselsconfig.value) {
-        if (carouselsconfig.value[key]["amount"] > 0) total++
+        if (carouselsconfig.value[key]["amount"] > 0) total++;
     }
 
-    return total > 1 ? true : false
-}
+    return total > 1 ? true : false;
+};
 
 // 公共跳转
-const publicJump = path => router.push(path)
+const publicJump = (path) => router.push(path);
 
 // 获取 距离学校距离
 const distanceSchool = () => {
     api.detailsDistance({
         uniqid,
         istype: 2,
-    }).then(res => {
-        const data = res.data
-        if (res.code != 200) return
+    }).then((res) => {
+        const data = res.data;
+        if (res.code != 200) return;
 
-        let specialSchoolDistanceTarget = null
-        let academyPitchIndexTarget = 0
-        const school = pitchSchool || ""
-        let annexSchoolOmitTarget = []
+        let specialSchoolDistanceTarget = null;
+        let academyPitchIndexTarget = 0;
+        const school = pitchSchool || "";
+        let annexSchoolOmitTarget = [];
         data.forEach((element, index) => {
-            element["distanceText"] = metersToKilometers(element.distance)
-            element.list.forEach(ele => {
-                ele["durationText"] = secondsToHoursMinutes(ele.duration, "chinese")
-                ele["durationText2"] = secondsToHoursMinutes(ele.duration)
-                ele["distanceText"] = metersToKilometers(ele.distance)
+            element["distanceText"] = metersToKilometers(element.distance);
+            element.list.forEach((ele) => {
+                ele["durationText"] = secondsToHoursMinutes(ele.duration, "chinese");
+                ele["durationText2"] = secondsToHoursMinutes(ele.duration);
+                ele["distanceText"] = metersToKilometers(ele.distance);
                 if (Object.prototype.toString.call(ele.publictransport) === "[object Object]") {
-                    ele.publictransport["durationText"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0, "chinese")
-                    ele.publictransport["durationText2"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0)
-                    const segments = ele.publictransport["segments"]
+                    ele.publictransport["durationText"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0, "chinese");
+                    ele.publictransport["durationText2"] = secondsToHoursMinutes(ele?.publictransport?.duration || 0);
+                    const segments = ele.publictransport["segments"];
                     if (Array.isArray(segments)) {
-                        segments.forEach(e => {
-                            e["via_num"] = 1 + Math.floor(e.via_num)
-                            e["durationText"] = secondsToHoursMinutes(e.duration)
-                            e["distanceText"] = metersToKilometers(e.distance, "chinese")
-                        })
+                        segments.forEach((e) => {
+                            e["via_num"] = 1 + Math.floor(e.via_num);
+                            e["durationText"] = secondsToHoursMinutes(e.duration);
+                            e["distanceText"] = metersToKilometers(e.distance, "chinese");
+                        });
                     }
-                } else ele.publictransport = null
-            })
+                } else ele.publictransport = null;
+            });
 
             if (school == element.id) {
-                academyPitchIndexTarget = index
-                const obj = element.list[0] || {}
-                let toolText = "步行"
-                if (Object.prototype.toString.call(obj.publictransport) === "[object Object]") toolText = "公交地铁"
+                academyPitchIndexTarget = index;
+                const obj = element.list[0] || {};
+                let toolText = "步行";
+                if (Object.prototype.toString.call(obj.publictransport) === "[object Object]") toolText = "公交地铁";
                 specialSchoolDistanceTarget = {
                     alias: element.alias,
                     distanceText: obj["distanceText"],
                     durationText: obj.publictransport?.durationText2 || obj["durationText2"],
                     toolText,
-                }
-            } else annexSchoolOmitTarget.push(element)
-        })
+                };
+            } else annexSchoolOmitTarget.push(element);
+        });
 
-        if (specialSchoolDistanceTarget) annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 4)
-        else annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 5)
+        if (specialSchoolDistanceTarget) annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 4);
+        else annexSchoolOmitTarget = annexSchoolOmitTarget.slice(0, 5);
 
-        annexSchoolOmit.value = annexSchoolOmitTarget
-        annexSchoolList.value = data
-        targetAcademyPitch.value = data[academyPitchIndexTarget]
-        specialSchoolDistance.value = specialSchoolDistanceTarget
-        academyPitchIndex.value = academyPitchIndexTarget
-    })
-}
+        annexSchoolOmit.value = annexSchoolOmitTarget;
+        annexSchoolList.value = data;
+        targetAcademyPitch.value = data[academyPitchIndexTarget];
+        specialSchoolDistance.value = specialSchoolDistanceTarget;
+        academyPitchIndex.value = academyPitchIndexTarget;
+    });
+};
 
-let annexSchoolOmit = ref([]) // 附近院校 前面 7个 或者 6个的
-let annexSchoolList = ref([]) // 附近院校数据
-let academyPitchIndex = ref(0) // 附近学校距离选中院校 下标
-let targetAcademyPitch = ref({}) // 附近学校距离选中院校 数据
-let specialSchoolDistance = ref(null) // 特殊的 用户带有school参数 则需要特殊显示 学校距离
-const elscrollbarRef = ref(null) // 滚动条
+let annexSchoolOmit = ref([]); // 附近院校 前面 7个 或者 6个的
+let annexSchoolList = ref([]); // 附近院校数据
+let academyPitchIndex = ref(0); // 附近学校距离选中院校 下标
+let targetAcademyPitch = ref({}); // 附近学校距离选中院校 数据
+let specialSchoolDistance = ref(null); // 特殊的 用户带有school参数 则需要特殊显示 学校距离
+const elscrollbarRef = ref(null); // 滚动条
 
 // 选择附近学校距离的学校下标
-const selectAcademyIndex = index => {
-    academyPitchIndex.value = index || 0
-    targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value]
-    elscrollbarRef.value.setScrollTop(0)
-}
+const selectAcademyIndex = (index) => {
+    academyPitchIndex.value = index || 0;
+    targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value];
+    elscrollbarRef.value.setScrollTop(0);
+};
 
 // 选择附近学校距离的学校下标
-const selectIndex = id => {
-    if (!id) id = pitchSchool
-    const data = annexSchoolOmit.value || []
+const selectIndex = (id) => {
+    if (!id) id = pitchSchool;
+    const data = annexSchoolOmit.value || [];
     data.forEach((element, index) => {
         if (element.id == id) {
-            academyPitchIndex.value = index || 0
-            targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value]
+            academyPitchIndex.value = index || 0;
+            targetAcademyPitch.value = annexSchoolList.value[academyPitchIndex.value];
         }
-    })
+    });
 
     // showDistance.value = true
-}
+};
 
 //显示详情
-let showDistance = ref(false)
+let showDistance = ref(false);
 
 // 点击收藏
 const handleCollect = () => {
-    api.apartmentCollection({ token }).then(res => {
-        if (res.code != 200) return
-        const data = res.data
-        info.value.iscollect = data.status || 0
-        ElMessage.success(res.message)
-    })
-}
+    api.apartmentCollection({ token }).then((res) => {
+        if (res.code != 200) return;
+        const data = res.data;
+        info.value.iscollect = data.status || 0;
+        ElMessage.success(res.message);
+    });
+};
 
 // 设置媒体列表的类名
-const getClass = index => {
+const getClass = (index) => {
     return {
         pitch: index === carouselIndex.value,
         [`item${index}`]: true,
-    }
-}
+    };
+};
 </script>
 
 <style lang="less" scoped>
@@ -999,7 +1021,7 @@ const getClass = index => {
                             height: 340px;
                             display: flex;
                             align-items: center;
-                            border-radius: 5px;
+                            border-radius: 8px;
 
                             .img {
                                 width: 100%;
@@ -1167,18 +1189,106 @@ const getClass = index => {
                 }
 
                 .apartment-name {
-                    font-size: 28px;
-                    color: #000000;
-                    line-height: 46px;
+                    // font-size: 28px;
+                    // color: #000000;
+                    // line-height: 46px;
                     margin-bottom: 20px;
+                    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                    font-weight: 650;
+                    font-style: normal;
+                    font-size: 32px;
+                    color: #000000;
                 }
 
-                .synopsis {
-                    font-size: 14px;
-                    color: #7f7f7f;
-                    line-height: 24px;
-                    margin-bottom: 20px;
-                    white-space: pre-wrap;
+                .label-list {
+                    flex-wrap: wrap;
+                    padding-bottom: 14px;
+                    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;
+                        line-height: 26px;
+                        padding: 0 8px;
+                        font-size: 13px;
+                        margin-right: 10px;
+                        margin-bottom: 8px;
+
+                        &.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);
+                        }
+                    }
+                }
+
+                .introduce {
+                    padding-top: 20px;
+                    .introduce-head {
+                        margin-bottom: 12px;
+                        .icon {
+                            width: 18px;
+                            height: 18px;
+                        }
+
+                        .name {
+                            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                            font-weight: 650;
+                            font-style: normal;
+                            font-size: 16px;
+                            color: #000000;
+                            margin-left: 12px;
+                            margin-right: 11px;
+                        }
+
+                        .full-name {
+                            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                            font-weight: 400;
+                            font-style: normal;
+                            color: #555;
+                            font-size: 14px;
+                        }
+
+                        .more {
+                            color: #333333;
+                            font-size: 14px;
+                            .icon {
+                                width: 6px;
+                                height: 10px;
+                                margin-left: 10px;
+                            }
+                        }
+                    }
+
+                    .synopsis {
+                        font-size: 14px;
+                        color: #7f7f7f;
+                        line-height: 24px;
+                        margin-bottom: 20px;
+                        white-space: pre-wrap;
+                        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                        padding-left: 29px;
+                    }
                 }
 
                 .place-text {
diff --git a/src/views/housingView/apartment.vue b/src/views/housingView/apartment.vue
index 00d09b0..6354e94 100644
--- a/src/views/housingView/apartment.vue
+++ b/src/views/housingView/apartment.vue
@@ -72,7 +72,7 @@ onMounted(() => {
     // 初始化瀑布流
     masonryInstance = new Masonry(gridContainer.value, {
         itemSelector: ".item",
-        gutter: 15,
+        gutter: 22,
     })
 
     // masonryInstanceMore = new Masonry(moreShowList.value, {
@@ -240,7 +240,7 @@ const handlecollect = uniqid => {
 }
 
 .list {
-    margin: 32px auto 0;
+    margin: 20px auto 0;
     flex-wrap: wrap;
     justify-content: space-between;