diff --git a/src/assets/img/apartmentDetail/arrow-black.svg b/src/assets/img/apartmentDetail/arrow-black.svg
new file mode 100644
index 0000000..e84f6f7
--- /dev/null
+++ b/src/assets/img/apartmentDetail/arrow-black.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="6px" height="11px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -514 -1044 )">
+    <path d="M 5.89690721649484 5.24649298597194  C 5.96563573883162 5.31997327989312  6 5.40447561790247  6 5.5  C 6 5.59552438209753  5.96563573883162 5.68002672010688  5.89690721649484 5.75350701402806  L 1.09278350515464 10.8897795591182  C 1.02405498281787 10.9632598530394  0.945017182130584 11  0.855670103092783 11  C 0.766323024054983 11  0.687285223367698 10.9632598530394  0.618556701030928 10.8897795591182  L 0.103092783505155 10.3386773547094  C 0.0343642611683849 10.2651970607882  0 10.1806947227789  0 10.0851703406814  C 0 9.98964595858383  0.0343642611683849 9.90514362057448  0.103092783505155 9.83166332665331  L 4.15463917525773 5.5  L 0.103092783505155 1.16833667334669  C 0.0343642611683849 1.09485637942552  0 1.01035404141617  0 0.914829659318638  C 0 0.819305277221107  0.0343642611683849 0.734802939211756  0.103092783505155 0.661322645290581  L 0.618556701030928 0.110220440881764  C 0.687285223367698 0.0367401469605875  0.766323024054983 0  0.855670103092783 0  C 0.945017182130584 0  1.02405498281787 0.0367401469605875  1.09278350515464 0.110220440881764  L 5.89690721649484 5.24649298597194  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 514 1044 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/apartmentDetail/orientation.png b/src/assets/img/apartmentDetail/orientation.png
new file mode 100644
index 0000000..e9a7a06
Binary files /dev/null and b/src/assets/img/apartmentDetail/orientation.png differ
diff --git a/src/assets/img/apartmentDetail/same-brand-recommendation.png b/src/assets/img/apartmentDetail/same-brand-recommendation.png
new file mode 100644
index 0000000..c3aaba6
Binary files /dev/null and b/src/assets/img/apartmentDetail/same-brand-recommendation.png differ
diff --git a/src/assets/img/apartmentDetail/same-brand.png b/src/assets/img/apartmentDetail/same-brand.png
index c3aaba6..2d3b723 100644
Binary files a/src/assets/img/apartmentDetail/same-brand.png and b/src/assets/img/apartmentDetail/same-brand.png differ
diff --git a/src/assets/img/apartmentDetail/subway-icon.png b/src/assets/img/apartmentDetail/subway-icon.png
new file mode 100644
index 0000000..468547c
Binary files /dev/null and b/src/assets/img/apartmentDetail/subway-icon.png differ
diff --git a/src/assets/img/apartmentDetail/taxi-icon.png b/src/assets/img/apartmentDetail/taxi-icon.png
new file mode 100644
index 0000000..367e9ae
Binary files /dev/null and b/src/assets/img/apartmentDetail/taxi-icon.png differ
diff --git a/src/assets/img/apartmentDetail/tick-circle-red.svg b/src/assets/img/apartmentDetail/tick-circle-red.svg
new file mode 100644
index 0000000..7fba509
--- /dev/null
+++ b/src/assets/img/apartmentDetail/tick-circle-red.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1676 -556 )">
+    <path d="M 19.78125 10.171875  C 19.96875 9.984375  20.0625 9.75  20.0625 9.46875  C 20.0625 9.17708333333333  19.96875 8.9375  19.78125 8.75  L 18.359375 7.34375  C 18.1614583333333 7.14583333333333  17.9270833333333 7.046875  17.65625 7.046875  C 17.3854166666667 7.046875  17.1510416666667 7.14583333333333  16.953125 7.34375  L 10.578125 13.703125  L 7.046875 10.171875  C 6.84895833333333 9.97395833333333  6.61458333333333 9.875  6.34375 9.875  C 6.07291666666667 9.875  5.83854166666667 9.97395833333333  5.640625 10.171875  L 4.21875 11.578125  C 4.03125 11.765625  3.9375 12.0052083333333  3.9375 12.296875  C 3.9375 12.578125  4.03125 12.8125  4.21875 13  L 9.875 18.65625  C 10.0729166666667 18.8541666666667  10.3072916666667 18.953125  10.578125 18.953125  C 10.859375 18.953125  11.0989583333333 18.8541666666667  11.296875 18.65625  L 19.78125 10.171875  Z M 22.390625 5.9765625  C 23.4635416666667 7.81510416666666  24 9.82291666666666  24 12  C 24 14.1770833333333  23.4635416666667 16.1848958333333  22.390625 18.0234375  C 21.3177083333333 19.8619791666667  19.8619791666667 21.3177083333333  18.0234375 22.390625  C 16.1848958333333 23.4635416666667  14.1770833333333 24  12 24  C 9.82291666666667 24  7.81510416666667 23.4635416666667  5.9765625 22.390625  C 4.13802083333333 21.3177083333333  2.68229166666667 19.8619791666667  1.609375 18.0234375  C 0.536458333333333 16.1848958333333  0 14.1770833333333  0 12  C 0 9.82291666666666  0.536458333333333 7.81510416666666  1.609375 5.9765625  C 2.68229166666667 4.13802083333333  4.13802083333333 2.68229166666666  5.9765625 1.609375  C 7.81510416666667 0.536458333333331  9.82291666666667 0  12 0  C 14.1770833333333 0  16.1848958333333 0.536458333333331  18.0234375 1.609375  C 19.8619791666667 2.68229166666666  21.3177083333333 4.13802083333333  22.390625 5.9765625  Z " fill-rule="nonzero" fill="#f95d5d" stroke="none" transform="matrix(1 0 0 1 1676 556 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/apartmentDetail/u1834.png b/src/assets/img/apartmentDetail/u1834.png
new file mode 100644
index 0000000..9bcc8e2
Binary files /dev/null and b/src/assets/img/apartmentDetail/u1834.png differ
diff --git a/src/assets/img/apartmentDetail/walk-icon.png b/src/assets/img/apartmentDetail/walk-icon.png
new file mode 100644
index 0000000..8dc3507
Binary files /dev/null and b/src/assets/img/apartmentDetail/walk-icon.png differ
diff --git a/src/assets/img/publicImage/apartment-icon.png b/src/assets/img/publicImage/apartment-icon.png
new file mode 100644
index 0000000..7d549a4
Binary files /dev/null and b/src/assets/img/publicImage/apartment-icon.png differ
diff --git a/src/assets/img/publicImage/apartment-title.png b/src/assets/img/publicImage/apartment-title.png
new file mode 100644
index 0000000..294b818
Binary files /dev/null and b/src/assets/img/publicImage/apartment-title.png differ
diff --git a/src/assets/styles/apartmentDetail.css b/src/assets/styles/apartmentDetail.css
index c943760..74d423a 100644
--- a/src/assets/styles/apartmentDetail.css
+++ b/src/assets/styles/apartmentDetail.css
@@ -235,7 +235,6 @@
   background-color: #ebebeb;
   border-radius: 8px;
   color: #555555;
-  line-height: 26px;
   padding: 0 8px;
   font-size: 13px;
   margin-right: 10px;
@@ -288,6 +287,7 @@
 .content .header .header-content .header-right .introduce .introduce-head .more {
   color: #333333;
   font-size: 14px;
+  cursor: pointer;
 }
 .content .header .header-content .header-right .introduce .introduce-head .more .icon {
   width: 6px;
@@ -424,7 +424,7 @@
   margin-right: 4px;
 }
 .content .operate-box-bj .operate-box .btn-box .btn-item.consult-btn {
-  width: 180px;
+  width: 138px;
   background: -webkit-linear-gradient(324.8544545deg, #62b1ff -11%, #80ffff 135%);
   background: -moz-linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%);
   background: linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%);
@@ -452,10 +452,12 @@
 }
 .content .details-box .details-left .special-offer .special-bj {
   width: 876px;
-  height: 169px;
+  height: 100px;
   position: absolute;
   top: 0;
   left: 0;
+  object-fit: cover;
+  border-radius: 10px;
 }
 .content .details-box .details-left .special-offer .head {
   width: 125px;
@@ -675,6 +677,7 @@
 .content .details-box .details-left .type-box .item .info .tags {
   margin-bottom: 16px;
   margin-bottom: 5px;
+  flex-wrap: wrap;
 }
 .content .details-box .details-left .type-box .item .info .tags .tags-item {
   width: fit-content;
@@ -825,10 +828,17 @@
 .content .details-box .details-left .details-item .traffic-box .traffic-title {
   margin-bottom: 16px;
 }
-.content .details-box .details-left .details-item.apartment-facilities .facility-box {
-  padding: 30px;
+.content .details-box .details-left .details-item.apartment-facilities {
+  transition: all 0.3s;
   position: relative;
 }
+.content .details-box .details-left .details-item.apartment-facilities.hide {
+  height: 820px;
+  overflow: hidden;
+}
+.content .details-box .details-left .details-item.apartment-facilities .facility-box {
+  padding: 30px 30px 30px 46px;
+}
 .content .details-box .details-left .details-item.apartment-facilities .facility-box .item:not(:last-of-type) {
   margin-bottom: 40px;
 }
@@ -855,7 +865,6 @@
   box-sizing: border-box;
 }
 .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label {
-  margin-bottom: 7px;
   flex-wrap: wrap;
 }
 .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label .label-item {
@@ -873,11 +882,15 @@
   height: 16px;
   margin-right: 10px;
 }
+.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box {
+  margin-top: 7px;
+}
 .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item {
   width: 110px;
   height: 110px;
   margin-right: 10px;
   position: relative;
+  cursor: pointer;
 }
 .content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item .icon {
   width: 110px;
@@ -898,6 +911,14 @@
   border-radius: 0 0 10px 10px;
   padding-left: 10px;
 }
+.content .details-box .details-left .details-item.details-message {
+  transition: all 0.3s;
+  position: relative;
+}
+.content .details-box .details-left .details-item.details-message.hide {
+  height: 820px;
+  overflow: hidden;
+}
 .content .details-box .details-left .details-item .bottom-btn {
   position: absolute;
   bottom: 0;
@@ -970,8 +991,6 @@
   margin-bottom: 20px;
   font-size: 18px;
   color: #000000;
-  background: -webkit-linear-gradient(350.34816653deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%);
-  background: -moz-linear-gradient(99.65183347deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%);
   background: linear-gradient(99.65183347deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%);
   border-radius: 12px;
   width: 304px;
@@ -980,6 +999,13 @@
   position: relative;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
 }
+.content .details-box .details-right .same-brand-title.like {
+  background: linear-gradient(-80.34816653deg, #d6dcf0 0%, #dae6f2 19%, #eff2cc 62%, #eff9f1 100%);
+}
+.content .details-box .details-right .same-brand-title.like .same-brand-icon {
+  width: 24px;
+  height: 24px;
+}
 .content .details-box .details-right .same-brand-title::after {
   content: "";
   position: absolute;
@@ -993,124 +1019,9 @@
   transform: translateX(-50%);
 }
 .content .details-box .details-right .same-brand-title .same-brand-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 4px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item {
-  width: 304px;
-  background-color: #ffffff;
-  border-radius: 17px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
-  padding: 8px 0;
-  margin-bottom: 20px;
-  cursor: pointer;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item:hover {
-  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275);
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header {
-  width: 288px;
-  height: 192px;
-  overflow: hidden;
-  border-radius: 17px;
-  margin: 0 auto 20px;
-  position: relative;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header .same-brand-img {
-  width: 288px;
-  height: 192px;
-  object-fit: none;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header .apartment-name {
-  font-weight: 650;
-  font-style: normal;
-  font-size: 16px;
-  color: #000000;
-  height: 32px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(255, 255, 255, 0.7);
-  padding: 0 15px;
-  border-radius: 40px;
-  width: max-content;
-  line-height: 30px;
-  max-width: 100%;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header .apartment-synopsis {
-  width: 100%;
-  height: 32px;
-  line-height: 32px;
-  background-color: rgba(0, 0, 0, 0.63921569);
-  border-radius: 0 0 10px 10px;
-  position: absolute;
-  bottom: 0;
-  font-size: 13px;
-  color: #d7d7d7;
-  padding: 0 10px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .site {
-  margin: 0 20px 20px;
-  color: #555555;
-  font-size: 14px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .site .site-icon {
-  width: 18px;
-  height: 18px;
-  margin-right: 4px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .price-box {
-  font-size: 14px;
-  color: #555555;
-  margin: 0 20px 31px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .price-box .price-item {
-  justify-content: space-between;
-  height: 50px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .price-box .price-item:not(:last-of-type) {
-  border-bottom: 1px solid #ebebeb;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .price-box .room-name {
-  font-size: 15px;
-  color: #000000;
-  padding-right: 5px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .price-box .unit {
-  font-family: "Arial-Black", "Arial Black", sans-serif;
-  font-weight: 900;
-  color: #000000;
-  font-size: 13px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .price-box .quantity {
-  font-family: "Arial-Black", "Arial Black", sans-serif;
-  font-weight: 900;
-  font-size: 18px;
-  color: #f95d5d;
-  margin: 0 5px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-quantity {
-  font-size: 14px;
-  color: #555555;
-  margin: 21px auto;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-quantity .quantity {
-  font-weight: 650;
-  font-size: 14px;
-  color: #000000;
-  line-height: 18px;
-  height: 18px;
-  background-color: #fddf6d;
-  border-radius: 9px;
-  padding: 0 8px;
-  margin: 0 8px;
-}
-.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-quantity .same-brand-quantity-icon {
-  width: 7px;
-  height: 12px;
-  margin-left: 8px;
+  width: 22px;
+  height: 22px;
+  margin-right: 7px;
 }
 .add-customer-mask {
   position: fixed;
diff --git a/src/assets/styles/apartmentDetail.less b/src/assets/styles/apartmentDetail.less
index 090985a..28dbf7a 100644
--- a/src/assets/styles/apartmentDetail.less
+++ b/src/assets/styles/apartmentDetail.less
@@ -290,7 +290,6 @@
                         background-color: rgba(235, 235, 235, 1);
                         border-radius: 8px;
                         color: #555555;
-                        line-height: 26px;
                         padding: 0 8px;
                         font-size: 13px;
                         margin-right: 10px;
@@ -344,6 +343,7 @@
                         .more {
                             color: #333333;
                             font-size: 14px;
+                            cursor: pointer;
                             .icon {
                                 width: 6px;
                                 height: 10px;
@@ -555,7 +555,7 @@
                     }
 
                     &.consult-btn {
-                        width: 180px;
+                        width: 138px;
                         background: -webkit-linear-gradient(324.854454500294deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
                         background: -moz-linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
                         background: linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
@@ -590,10 +590,12 @@
 
                 .special-bj {
                     width: 876px;
-                    height: 169px;
+                    height: 100px;
                     position: absolute;
                     top: 0;
                     left: 0;
+                    object-fit: cover;
+                    border-radius: 10px;
                 }
 
                 .head {
@@ -861,6 +863,7 @@
                         .tags {
                             margin-bottom: 16px;
                             margin-bottom: 5px;
+                            flex-wrap: wrap;
 
                             .tags-item {
                                 width: fit-content;
@@ -1218,9 +1221,15 @@
                 }
 
                 &.apartment-facilities {
+                    &.hide {
+                        height: 820px;
+                        overflow: hidden;
+                    }
+                    transition: all 0.3s;
+                    position: relative;
                     .facility-box {
-                        padding: 30px;
-                        position: relative;
+                        padding: 30px 30px 30px 46px;
+                        // position: relative;
                         .item {
                             &:not(:last-of-type) {
                                 margin-bottom: 40px;
@@ -1249,7 +1258,6 @@
                             }
 
                             .label {
-                                margin-bottom: 7px;
                                 flex-wrap: wrap;
                                 .label-item {
                                     font-size: 14px;
@@ -1270,11 +1278,13 @@
                             }
 
                             .img-box {
+                                margin-top: 7px;
                                 .img-item {
                                     width: 110px;
                                     height: 110px;
                                     margin-right: 10px;
                                     position: relative;
+                                    cursor: pointer;
                                     .icon {
                                         width: 110px;
                                         height: 110px;
@@ -1331,6 +1341,15 @@
                     }
                 }
 
+                &.details-message {
+                    &.hide {
+                        height: 820px;
+                        overflow: hidden;
+                    }
+                    transition: all 0.3s;
+                    position: relative;
+                }
+
                 .bottom-btn {
                     position: absolute;
                     bottom: 0;
@@ -1418,16 +1437,21 @@
                 margin-bottom: 20px;
                 font-size: 18px;
                 color: #000000;
-                background: -webkit-linear-gradient(350.348166533196deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
-                background: -moz-linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
                 background: linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
                 border-radius: 12px;
                 width: 304px;
                 height: 60px;
                 border: 5px solid #fff;
                 position: relative;
-                // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
                 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
+
+                &.like {
+                    background: linear-gradient(-80.3481665331958deg, rgba(214, 220, 240, 1) 0%, rgba(218, 230, 242, 1) 19%, rgba(239, 242, 204, 1) 62%, rgba(239, 249, 241, 1) 100%);
+                    .same-brand-icon {
+                        width: 24px;
+                        height: 24px;
+                    }
+                }
                 &::after {
                     content: "";
                     position: absolute;
@@ -1442,148 +1466,13 @@
                 }
 
                 .same-brand-icon {
-                    width: 24px;
-                    height: 24px;
-                    margin-right: 4px;
+                    width: 22px;
+                    height: 22px;
+                    margin-right: 7px;
                 }
             }
 
             .same-brand-list {
-                .same-brand-item {
-                    width: 304px;
-                    background-color: rgba(255, 255, 255, 1);
-                    border-radius: 17px;
-                    // -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
-                    // -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
-                    // box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
-                    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-                    padding: 8px 0;
-                    margin-bottom: 20px;
-                    cursor: pointer;
-
-                    &:hover {
-                        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275);
-                    }
-
-                    .same-brand-header {
-                        width: 288px;
-                        height: 192px;
-                        overflow: hidden;
-                        border-radius: 17px;
-                        margin: 0 auto 20px;
-                        position: relative;
-
-                        .same-brand-img {
-                            width: 288px;
-                            height: 192px;
-                            object-fit: none;
-                        }
-
-                        .apartment-name {
-                            font-weight: 650;
-                            font-style: normal;
-                            font-size: 16px;
-                            color: #000000;
-                            padding: 0 15px;
-                            height: 32px;
-                            position: absolute;
-                            top: 50%;
-                            left: 50%;
-                            transform: translate(-50%, -50%);
-                            background-color: rgba(255, 255, 255, 0.7);
-                            padding: 0 15px;
-                            border-radius: 40px;
-                            width: max-content;
-                            line-height: 30px;
-                            max-width: 100%;
-                        }
-
-                        .apartment-synopsis {
-                            width: 100%;
-                            height: 32px;
-                            line-height: 32px;
-                            background-color: rgba(0, 0, 0, 0.63921568627451);
-                            border-radius: 0 0 10px 10px;
-                            position: absolute;
-                            bottom: 0;
-                            font-size: 13px;
-                            color: #d7d7d7;
-                            padding: 0 10px;
-                        }
-                    }
-
-                    .site {
-                        margin: 0 20px 20px;
-                        color: #555555;
-                        font-size: 14px;
-
-                        .site-icon {
-                            width: 18px;
-                            height: 18px;
-                            margin-right: 4px;
-                        }
-                    }
-
-                    .price-box {
-                        font-size: 14px;
-                        color: #555555;
-                        margin: 0 20px 31px;
-
-                        .price-item {
-                            justify-content: space-between;
-                            height: 50px;
-
-                            &:not(:last-of-type) {
-                                border-bottom: 1px solid #ebebeb;
-                            }
-                        }
-
-                        .room-name {
-                            font-size: 15px;
-                            color: #000000;
-                            padding-right: 5px;
-                        }
-
-                        .unit {
-                            font-family: "Arial-Black", "Arial Black", sans-serif;
-                            font-weight: 900;
-                            color: #000000;
-                            font-size: 13px;
-                        }
-
-                        .quantity {
-                            font-family: "Arial-Black", "Arial Black", sans-serif;
-                            font-weight: 900;
-                            font-size: 18px;
-                            color: #f95d5d;
-                            margin: 0 5px;
-                        }
-                    }
-
-                    .same-brand-quantity {
-                        font-size: 14px;
-                        color: #555555;
-                        margin: 21px auto;
-
-                        .quantity {
-                            font-weight: 650;
-                            font-size: 14px;
-                            color: #000000;
-                            line-height: 18px;
-                            height: 18px;
-                            background-color: #fddf6d;
-                            border-radius: 9px;
-                            padding: 0 8px;
-                            margin: 0 8px;
-                        }
-
-                        .same-brand-quantity-icon {
-                            width: 7px;
-                            height: 12px;
-                            margin-left: 8px;
-                        }
-                    }
-                }
             }
         }
     }
diff --git a/src/components/apartment/sameBrandItem.vue b/src/components/apartment/sameBrandItem.vue
new file mode 100644
index 0000000..17768e0
--- /dev/null
+++ b/src/components/apartment/sameBrandItem.vue
@@ -0,0 +1,176 @@
+<template>
+    <div class="same-brand-item" @click="gobrand(props.item)">
+        <div class="same-brand-header">
+            <img class="same-brand-img" v-lazy="props.item['image']" />
+            <div class="apartment-name ellipsis">{{ props.item["title"] }}</div>
+            <div class="apartment-synopsis ellipsis">{{ props.item["propaganda"] }}</div>
+        </div>
+
+        <div class="site flexacenter">
+            <img class="site-icon" src="@/assets/img/publicImage/location-icon.png" />
+            <div class="site-text ellipsis">{{ props.item["address"] }}</div>
+        </div>
+
+        <div class="price-box">
+            <div class="price-item flexacenter" v-for="(it, i) in props.item['roomlist']" :key="i">
+                <div class="room-name ellipsis flex1">{{ it["name"] }}</div>
+                <div class="flexacenter">
+                    <div class="unit">HK$</div>
+                    <div class="quantity">{{ it["price"] }}</div>
+                    /月
+                </div>
+            </div>
+        </div>
+
+        <div class="same-brand-quantity flexcenter">
+            共
+            <div class="quantity">{{ props.item["roomnum"] }}</div>
+            个房型
+            <img class="same-brand-quantity-icon" src="@/assets/img/publicImage/black-arrow.svg" />
+        </div>
+    </div>
+</template>
+<script setup>
+import { defineProps } from "vue"
+
+const props = defineProps({
+    item: Object,
+});
+
+const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
+
+</script>
+<style scoped lang="less">
+.same-brand-item {
+    width: 304px;
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 17px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
+    padding: 8px 0;
+    margin-bottom: 20px;
+    cursor: pointer;
+
+    &:hover {
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275);
+    }
+
+    .same-brand-header {
+        width: 288px;
+        height: 192px;
+        overflow: hidden;
+        border-radius: 17px;
+        margin: 0 auto 20px;
+        position: relative;
+
+        .same-brand-img {
+            width: 288px;
+            height: 192px;
+            object-fit: none;
+        }
+
+        .apartment-name {
+            font-weight: 650;
+            font-style: normal;
+            font-size: 16px;
+            color: #000000;
+            padding: 0 15px;
+            height: 32px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(255, 255, 255, 0.7);
+            padding: 0 15px;
+            border-radius: 40px;
+            width: max-content;
+            line-height: 30px;
+            max-width: 100%;
+        }
+
+        .apartment-synopsis {
+            width: 100%;
+            height: 32px;
+            line-height: 32px;
+            background-color: rgba(0, 0, 0, 0.63921568627451);
+            border-radius: 0 0 10px 10px;
+            position: absolute;
+            bottom: 0;
+            font-size: 13px;
+            color: #d7d7d7;
+            padding: 0 10px;
+        }
+    }
+
+    .site {
+        margin: 0 20px 20px;
+        color: #555555;
+        font-size: 14px;
+
+        .site-icon {
+            width: 18px;
+            height: 18px;
+            margin-right: 4px;
+        }
+    }
+
+    .price-box {
+        font-size: 14px;
+        color: #555555;
+        margin: 0 20px 31px;
+
+        .price-item {
+            justify-content: space-between;
+            height: 50px;
+
+            &:not(:last-of-type) {
+                border-bottom: 1px solid #ebebeb;
+            }
+        }
+
+        .room-name {
+            font-size: 15px;
+            color: #000000;
+            padding-right: 5px;
+        }
+
+        .unit {
+            font-family: "Arial-Black", "Arial Black", sans-serif;
+            font-weight: 900;
+            color: #000000;
+            font-size: 13px;
+        }
+
+        .quantity {
+            font-family: "Arial-Black", "Arial Black", sans-serif;
+            font-weight: 900;
+            font-size: 18px;
+            color: #f95d5d;
+            margin: 0 5px;
+        }
+    }
+
+    .same-brand-quantity {
+        font-size: 14px;
+        color: #555555;
+        margin: 21px auto;
+
+        .quantity {
+            font-weight: 650;
+            font-size: 14px;
+            color: #000000;
+            line-height: 18px;
+            height: 18px;
+            background-color: #fddf6d;
+            border-radius: 9px;
+            padding: 0 8px;
+            margin: 0 8px;
+        }
+
+        .same-brand-quantity-icon {
+            width: 7px;
+            height: 12px;
+            margin-left: 8px;
+        }
+    }
+}
+</style>
diff --git a/src/components/apartment/seachModule.vue b/src/components/apartment/seachModule.vue
index d90a21a..a46db07 100644
--- a/src/components/apartment/seachModule.vue
+++ b/src/components/apartment/seachModule.vue
@@ -97,7 +97,7 @@
                         <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: tag == '' }" @click="selectOption('nearSchool', 0)">不限</div>
+                                <div class="school-item flexcenter" :class="{ pitch: pitchValue['tag'] == '' }" @click="selectOption('tag', 0)">不限</div>
                                 <div class="school-item flexcenter" v-for="(item, index) in tagList" :key="index" :class="{ pitch: item == pitchValue['tag'] }" @click="selectOption('tag', item)">{{ item }}</div>
                             </div>
                         </div>
diff --git a/src/components/public/apartment-item.vue b/src/components/public/apartment-item.vue
index 1d30f99..dcff230 100644
--- a/src/components/public/apartment-item.vue
+++ b/src/components/public/apartment-item.vue
@@ -41,23 +41,23 @@
         </div>
 
         <div class="distance flexflex">
-            <div class="figure flexacenter" v-if="item.distance?.distance">
+            <div class="figure flexflex" v-if="item.distance?.distance">
                 距离
                 <div class="school">{{ item.distance.alias }}</div>
-                <div class="mile">{{ item.distance.distance }}km</div>
+                <div class="mile">{{ calculateDistance(item.distance.distance) }}km</div>
             </div>
             <div class="vehicle-list flex1 flexflex">
                 <div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration">
-                    <img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
-                    {{ item.distance.walking_duration }}
+                    <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
+                    {{ calculateDuration(item.distance.walking_duration) }}
                 </div>
                 <div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration">
-                    <img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
-                    {{ item.distance.transit_duration }}
+                    <img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
+                    {{ calculateDuration(item.distance.transit_duration) }}
                 </div>
                 <div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration">
-                    <img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
-                    {{ item.distance.driving_duration }}
+                    <img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
+                    {{ calculateDuration(item.distance.driving_duration) }}
                 </div>
             </div>
         </div>
@@ -98,7 +98,7 @@
 <script setup>
 import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { redirectToExternalWebsite } from "@/utils/util.js";
+import { redirectToExternalWebsite, calculateDuration, calculateDistance } from "@/utils/util.js";
 const router = useRouter();
 
 const props = defineProps({
@@ -327,13 +327,13 @@ const loadload = () => {
 
     .distance {
         padding: 0 12px 12px 29px;
-        border-bottom: 1px dashed #d7d7d7;
+        border-bottom: 1px dotted #d7d7d7;
         .figure {
             font-size: 14px;
             color: #555555;
             text-align: right;
-            line-height: 26px;
-            margin-right: 5px;
+            line-height: 22px;
+            margin-right: 8px;
 
             .school {
                 font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
@@ -355,6 +355,7 @@ const loadload = () => {
 
             .vehicle-item {
                 height: 22px;
+                line-height: 22px;
                 background-color: rgba(255, 255, 255, 0);
                 border: 1px solid rgba(127, 127, 127, 1);
                 border-radius: 30px;
@@ -362,6 +363,7 @@ const loadload = () => {
                 color: #333333;
                 padding: 0 8px;
                 margin-right: 6px;
+                margin-bottom: 5px;
 
                 .vehicle-icon {
                     width: 14px;
diff --git a/src/components/public/viewMap.vue b/src/components/public/viewMap.vue
index 9b085e4..8ef50d4 100644
--- a/src/components/public/viewMap.vue
+++ b/src/components/public/viewMap.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue';
+import { ref, defineProps, defineExpose } from 'vue';
 
 const props = defineProps({
     latlng: Object,
@@ -67,6 +67,11 @@ const showPop = () => {
     // map.addControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
 }
 
+// 使用 defineExpose 暴露方法，这样父组件就能访问到
+defineExpose({
+    showPop
+})
+
 </script>
 
 <style lang="less" scoped>
diff --git a/src/store/index.js b/src/store/index.js
index 200b6bc..d038ce4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,46 +1,39 @@
-import { createStore } from 'vuex'
+import { createStore } from "vuex";
 
 export default createStore({
-  state: {
-    advData: [],
-    seachTypeData: [],
-    indexData: [],//首页数据
-    ListSelectBtn: [],//瀑布流选项
-    user: {},  // 我的信息数据
-    wechat: {}, // 微信号 二维码等数据
-    nav: [],  // 顶部的导航数据
-    apartment: {}, // 公寓筛选的字段
-    routeList: {
-      index: {
-        path: '/',
-        title: '港校租房'
-      },
-      secondaryIndex: {
-        path: '',
-        title: '',
-      }
-    },//导航路由列表
-    seachSelect: {
-      seachPage: {}
-    },//保存筛选条件
-    showloginmodal: false, // 是否需要登录状态
-    apartmentPitchValue: {}, // 公寓筛选的值 全局化
-    needPitchValue: {}, // 求房源筛选的值 全局化
-    personPitchValue: {}, // 个人筛选的值 全局化
-    intermediaryPitchValue: {}, // 中介筛选的值 全局化
-    locationObj: {}, // 地区数据
-    bannerData: {}, // 所有轮播数据
-  },
-  getters: {
-
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  },
-  plugins: [
-
-  ]
-})
+    state: {
+        advData: [],
+        seachTypeData: [],
+        indexData: [], //首页数据
+        ListSelectBtn: [], //瀑布流选项
+        user: {}, // 我的信息数据
+        wechat: {}, // 微信号 二维码等数据
+        nav: [], // 顶部的导航数据
+        apartment: {}, // 公寓筛选的字段
+        routeList: {
+            index: {
+                path: "/",
+                title: "港校租房",
+            },
+            secondaryIndex: {
+                path: "",
+                title: "",
+            },
+        }, //导航路由列表
+        seachSelect: {
+            seachPage: {},
+        }, //保存筛选条件
+        showloginmodal: false, // 是否需要登录状态
+        apartmentPitchValue: {}, // 公寓筛选的值 全局化
+        needPitchValue: {}, // 求房源筛选的值 全局化
+        personPitchValue: {}, // 个人筛选的值 全局化
+        intermediaryPitchValue: {}, // 中介筛选的值 全局化
+        locationObj: {}, // 地区数据
+        bannerData: {}, // 所有轮播数据
+    },
+    getters: {},
+    mutations: {},
+    actions: {},
+    modules: {},
+    plugins: [],
+});
\ No newline at end of file
diff --git a/src/utils/util.js b/src/utils/util.js
index adb4644..eba573f 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -70,7 +70,15 @@ function metersToKilometers(input, type) {
     return text
 }
 
+// 计算路程时间
+const calculateDuration = value => (value / 60).toFixed(1) + 'min';
+
+// 计算路程公里数
+const calculateDistance = value => (value / 1000).toFixed(1);
+
 module.exports = {
+    calculateDistance,
+    calculateDuration,
     setSeoTitle,
     redirectToExternalWebsite,
     goTologin,
diff --git a/src/views/apartmentDetail.vue b/src/views/apartmentDetail.vue
index da924db..414a25a 100644
--- a/src/views/apartmentDetail.vue
+++ b/src/views/apartmentDetail.vue
@@ -74,7 +74,7 @@
                             <img class="icon" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
                             <div class="name">{{ company.title }}</div>
                             <div class="full-name flex1">{{ info.propaganda }}</div>
-                            <div class="more flexacenter">
+                            <div class="more flexacenter" @click="handleClickNav('eleseEle')">
                                 同品牌
                                 <img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
                             </div>
@@ -94,23 +94,17 @@
 
                         <div class="figure flexacenter">
                             距离
-                            <div class="school">城大</div>
-                            1.3km
-                            <div class="btn">[切换院校]</div>
+                            <div class="school">{{ distancePitch.alias }}</div>
+                            {{ distancePitch.distance }}km
+                            <div class="btn" @click="openSelectSchool">[切换院校]</div>
                         </div>
 
                         <div class="vehicle flexflex">
-                            <div class="item flexacenter">
-                                <img class="icon" src="@/assets/img/publicImage/walk-icon.png" />
-                                2min
-                            </div>
-                            <div class="item flexacenter">
-                                <img class="icon" src="@/assets/img/publicImage/walk-icon.png" />
-                                2min
-                            </div>
-                            <div class="item flexacenter">
-                                <img class="icon" src="@/assets/img/publicImage/walk-icon.png" />
-                                2min
+                            <div class="item flexacenter" v-for="(item, index) in distancePitch.obj" :key="index">
+                                <img v-if="index == 'walking'" class="icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
+                                <img v-if="index == 'driving'" class="icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
+                                <img v-if="index == 'transit'" class="icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
+                                {{ item }}
                             </div>
                         </div>
                     </div>
@@ -139,18 +133,18 @@
                         <img v-else alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collect.png" />
                         收藏
                     </div>
-                    <div class="btn-item transmit-btn flexcenter" @click="handleTransmit">
+                    <!-- <div class="btn-item transmit-btn flexcenter" @click="handleTransmit">
                         <img alt="转发图标" class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
                         转发
                         <transmit-btn :qrcode="qrcode" :title="info['title']" type="apartment"></transmit-btn>
-                    </div>
+                    </div> -->
                     <div class="btn-item consult-btn flexcenter" @click="modificationContact">咨询</div>
                 </div>
             </div>
         </div>
         <div class="details-box flexflex">
             <div class="details-left flex1" ref="detailsLeft">
-                <div class="special-offer" v-if="info.promotionalactivities">
+                <div class="special-offer" v-if="info.promotionalactivities" ref="specialEle">
                     <img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" />
                     <img class="head" src="@/assets/img/publicImage/special-title.png" />
                     <img class="gift" src="@/assets/img/publicImage/special-gift.png" />
@@ -167,7 +161,7 @@
                     <img class="bottom-orange" src="@/assets/img/publicImage/special-bottom-orange.svg" />
                 </div>
 
-                <div class="remark">
+                <div class="remark" ref="inspectEle">
                     <div class="head flexacenter">
                         <div class="text">寄托实地考察</div>
                         <div class="more flexacenter">
@@ -188,7 +182,7 @@
                     </div>
                 </div>
 
-                <div class="remark">
+                <div class="remark" ref="followEle">
                     <div class="head flexacenter">
                         <div class="text">寄托回访</div>
                         <div class="more flexacenter">
@@ -235,7 +229,7 @@
                                 <img class="icon" src="@/assets/img/apartmentDetail/collect-hollow-black.svg" />
                                 收藏
                             </div>
-                            <div v-if="item.status == 1" class="consult flexcenter">
+                            <div v-if="item.status == 1" class="consult flexcenter" @click="modificationContact">
                                 <img class="icon" src="@/assets/img/apartmentDetail/consult-icon.png" />
                                 咨询
                             </div>
@@ -288,7 +282,7 @@
                 </div>
 
                 <!-- 费用说明 -->
-                <div class="details-item cost" v-if="costList.length > 0">
+                <div class="details-item cost" v-if="costList.length > 0" ref="costEle">
                     <div class="details-header flexacenter">
                         <img class="icon" src="@/assets/img/apartmentDetail/cost-icon.png" />
                         费用说明
@@ -319,7 +313,7 @@
                         <img class="icon" src="@/assets/img/apartmentDetail/bus-icon.svg" />
                         {{ info.location || "交通" }}
                     </div>
-                    <view-map :latlng="{ latitude: info['coordinate'][0], longitude: info['coordinate'][1] }" :name="info['address']"></view-map>
+                    <view-map ref="viewMapRef" :latlng="{ latitude: info['coordinate'][0], longitude: info['coordinate'][1] }" :name="info['address']"></view-map>
 
                     <template v-if="false">
                         <el-popover :width="814" trigger="click" popper-style="padding: 0" :show-arrow="false" v-model:visible="showDistance">
@@ -429,43 +423,46 @@
                 </div>
 
                 <!-- 公寓设施 -->
-                <div class="details-item apartment-facilities" v-if="info['facilities']" ref="facilitiesEle">
+                <div class="details-item apartment-facilities" :class="{ hide: isHideFacilities }" v-if="facilitylist.length > 0" ref="facilitiesEle">
                     <div class="details-header flexacenter">
                         <img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" />
                         公寓设施
                     </div>
 
                     <div class="facility-box">
-                        <div class="item" v-for="item in 4">
-                            <div class="head">公用设施（6）</div>
+                        <div class="item" v-for="(item, index) in facilitylist" :key="index">
+                            <div class="head">{{ item.name }}（{{ item.label.length }}）</div>
                             <div class="label flexflex">
-                                <div class="label-item flexacenter" v-for="item in 4">
+                                <div class="label-item flexacenter" v-for="(item, index) in item.label" :key="index">
                                     <img class="icon" src="@/assets/img/apartmentDetail/tick-circle-baby-blue.svg" />
-                                    无线网络
+                                    {{ item }}
                                 </div>
                             </div>
-                            <div class="img-box flexflex">
-                                <div class="img-item" v-for="item in 4">
-                                    <img class="icon" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d-JktdHnqqsgFptxhcq_cQnrld6R3X1dHBq_D-81qNDQyOQ~~" />
-                                    <div class="name">洗衣房</div>
+                            <div class="img-box flexflex" v-if="item.images.length > 0">
+                                <div class="img-item" v-for="(item, index) in item.images" :key="index" @click="openFacilitiesImg(item.img[0])">
+                                    <img class="icon" :src="item.img[0]" />
+                                    <div class="name">{{ item.name }}</div>
                                 </div>
                             </div>
                         </div>
-
-                        <div class="bottom-btn flexcenter">
-                            展开全部
-                            <img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" />
-                        </div>
+                    </div>
+                    <div class="bottom-btn flexcenter" v-if="isHideFacilities" @click="openFacilities">
+                        展开全部
+                        <img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" />
                     </div>
                 </div>
 
                 <!-- 房源详情 -->
-                <div class="details-item" v-if="info['message']" ref="messageEle">
+                <div class="details-item details-message" :class="{ hide: isHideDetails }" v-if="info['message']" ref="messageEle">
                     <div class="details-header flexacenter">
                         <img class="icon" src="@/assets/img/apartmentDetail/listing-details.png" />
                         房源详情
                     </div>
                     <div class="text" v-html="info['message']"></div>
+                    <div class="bottom-btn flexcenter" v-if="isHideDetails" @click="openDetails">
+                        展开全部
+                        <img class="icon" src="@/assets/img/publicImage/arrow-black-solid.svg" />
+                    </div>
                 </div>
 
                 <!-- 公寓设施 -->
@@ -525,38 +522,14 @@
                     同品牌其他公寓
                 </div>
 
-                <div class="same-brand-list" v-if="dualBrandList.length != 0">
-                    <div class="same-brand-item" v-for="(item, index) in dualBrandList" @click="gobrand(item)" :key="index">
-                        <div class="same-brand-header">
-                            <img class="same-brand-img" v-lazy="item['image']" />
-                            <div class="apartment-name ellipsis">{{ item["title"] }}</div>
-                            <div class="apartment-synopsis ellipsis">{{ item["propaganda"] }}</div>
-                        </div>
+                <same-brand-item v-for="(item, index) in dualBrandList" :item="item" :key="index"></same-brand-item>
 
-                        <div class="site flexacenter">
-                            <img class="site-icon" src="@/assets/img/publicImage/location-icon.png" />
-                            <div class="site-text ellipsis">{{ item["address"] }}</div>
-                        </div>
-
-                        <div class="price-box">
-                            <div class="price-item flexacenter" v-for="(it, i) in item['roomlist']" :key="i">
-                                <div class="room-name ellipsis flex1">{{ it["name"] }}</div>
-                                <div class="flexacenter">
-                                    <div class="unit">HK$</div>
-                                    <div class="quantity">{{ it["price"] }}</div>
-                                    /月
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="same-brand-quantity flexcenter">
-                            共
-                            <div class="quantity">{{ item["roomnum"] }}</div>
-                            个房型
-                            <img class="same-brand-quantity-icon" src="@/assets/img/publicImage/black-arrow.svg" />
-                        </div>
-                    </div>
+                <div class="same-brand-title like flexcenter" v-if="likeList.length != 0">
+                    <img class="same-brand-icon" src="@/assets/img/apartmentDetail/same-brand-recommendation.png" />
+                    猜你喜欢
                 </div>
+
+                <same-brand-item v-for="(item, index) in likeList" :item="item" :key="index"></same-brand-item>
             </div>
         </div>
     </div>
@@ -595,11 +568,52 @@
     </div>
     <footerpage></footerpage>
     <back-to-top></back-to-top>
+
+    <!-- 选择院校弹窗 -->
+    <el-dialog v-model="isSelectSchool" width="600" class="selectSchoolPop" :show-close="false">
+        <div class="title-box dis-f al-item jus-x">
+            选择院校
+            <img src="@/assets/img/detail/close.png" class="close-icon" @click="isSelectSchool = false" />
+        </div>
+
+        <div class="site flexacenter" bind:tap="to_map">
+            <img class="site-img" src="@/assets/img/apartmentDetail/orientation.png" />
+            <div class="site-text flex1">{{ info.address }}</div>
+            <div class="btn flexacenter" @click="openMap">
+                地图
+                <img class="btn-img" src="@/assets/img/apartmentDetail/arrow-black.svg" />
+            </div>
+        </div>
+        <div class="select-list" ref="selectSchoolRef">
+            <div class="select-item flexflex" :class="['item' + item.sid, { pitch: distancePitch.sid == item.sid }]" v-for="(item, index) in distanceList" :key="index" @click.stop="selectSchool(item.sid)">
+                <div class="select-icon flexcenter">
+                    <img class="select-img" src="@/assets/img/apartmentDetail/u1834.png" />
+                </div>
+                <div class="select-info flex1">
+                    <div class="select-name">{{ item.name }}</div>
+                    <div class="distance flexacenter">
+                        距离
+                        <div class="abbreviation">{{ item.alias }}</div>
+                        {{ item.distance }}km
+                    </div>
+                    <div class="vehicle flexflex flex1">
+                        <div class="item flexcenter" v-for="(item, index) in item.obj" :key="index">
+                            <img v-if="index == 'walking'" class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
+                            <img v-else-if="index == 'driving'" class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
+                            <img v-else class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
+                            {{ item }}
+                        </div>
+                    </div>
+                </div>
+                <img class="tick" v-if="distancePitch.sid == item.sid" src="@/assets/img/apartmentDetail/tick-circle-red.svg" />
+            </div>
+        </div>
+    </el-dialog>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from "vue";
-import { ElMessage, valueEquals } from "element-plus";
+import { ElMessage, ElDialog } from "element-plus";
 import { useStore } from "vuex";
 
 import pageTopBar from "../components/pageTopBar/pageTopBar.vue";
@@ -610,6 +624,8 @@ 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 sameBrandItem from "@/components/apartment/sameBrandItem.vue";
+
 import api from "@/utils/api";
 
 import { useRouter, useRoute } from "vue-router";
@@ -624,7 +640,7 @@ watch(route, () => {
     roomList.value = [];
     carouselsconfig.value = { lives: {}, videos: {}, attachment: {} };
     navList.value = [];
-    navTab.value = "roomEle";
+    navTab.value = "specialEle";
     dualBrandList.value = [];
     contactReservationState.value = false;
     customerservicelist.value = [];
@@ -636,6 +652,12 @@ watch(route, () => {
 
     carouselIndex.value = 0;
     allCarouselsData.value = [];
+
+    isHideFacilities.value = false;
+    facilitylist.value = [];
+    costList.value = [];
+    isHideDetails.value = false;
+
     // mediaBtnstate.value = {}
     init();
     distanceSchool();
@@ -644,7 +666,7 @@ watch(route, () => {
 let { uniqid } = router.currentRoute.value.query;
 let pitchSchool = route.query.school || 0;
 
-import { copyToClipboard, metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js";
+import { copyToClipboard, metersToKilometers, secondsToHoursMinutes, calculateDuration, calculateDistance } from "@/utils/util.js";
 
 const { proxy } = getCurrentInstance();
 const store = useStore();
@@ -726,12 +748,20 @@ const facilityKeyName = {
 };
 
 const facilityArr = ["public", "service", "sport", "outdoor", "security", "room"]; // 公寓设施 顺序
-
+let facilitylist = ref([]);
 let costList = ref([]);
 
+let pitchScreenSchool = ref(0); // 选择的学校
+
 onMounted(() => {
     init();
     distanceSchool();
+
+    let value = localStorage.getItem("apartmentPitchValue");
+    if (value) {
+        value = JSON.parse(value);
+        pitchScreenSchool = value.school;
+    }
 });
 
 const init = () => {
@@ -772,10 +802,12 @@ const init = () => {
         });
 
         const facility = data.info.facility;
-        console.log("facility", facility);
 
         if (facility) {
-            let facilitylist = [];
+            facility["public"][0].images = ["https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skdX7qqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtZCjvF5wr_-kU8uRQ0NDI5", "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skfHvqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MsIAzvG5Ar_-kU8uRQ0NDI5"];
+            facility["public"][1].images = ["https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skdXfqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtdDG6W5Q7_-kU8uRQ0NDI5", "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5skfXnqqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtcA2vF5A7_-kU8uRQ0NDI5"];
+
+            let list = [];
             facilityArr.forEach((key) => {
                 const target = facility[key];
                 let label = [];
@@ -792,7 +824,7 @@ const init = () => {
                 }
 
                 if (label.length > 0) {
-                    facilitylist.push({
+                    list.push({
                         key,
                         name: facilityKeyName[key],
                         label,
@@ -801,7 +833,7 @@ const init = () => {
                 }
             });
 
-            console.log("facilitylist", facilitylist);
+            facilitylist.value = list;
         }
 
         const feedescription = data.info.feedescription;
@@ -815,9 +847,6 @@ const init = () => {
                     });
                 }
             });
-
-            console.log("list", list);
-
             costList.value = list;
         }
 
@@ -832,12 +861,82 @@ const init = () => {
 
         document.title = data?.info?.title || "港校租房-品牌公寓详情";
 
-        nextTick(() => handleNavData());
+        nextTick(() => {
+            handleNavData();
+            getFacilitiesHeight();
+            getDetailsHeight();
+
+            getLikeList();
+            getMapDistance();
+
+            if (!data.info.promotionalactivities) navTab.value = "inspectEle";
+        });
 
         if (data.withsameapartments > 0) dualBrandData();
     });
 };
 
+let isHideDetails = ref(false);
+
+// 获取详情的高度
+const getDetailsHeight = () => {
+    let target = messageEle.value;
+    if (target) {
+        let height = target.offsetHeight;
+        if (height > 820) isHideDetails.value = true;
+    }
+};
+
+// 切换 详情 显示
+const openDetails = () => {
+    isHideDetails.value = !isHideDetails.value;
+    let target = messageEle.value;
+    let header = target.querySelector(".details-header");
+    let box = target.querySelector(".text");
+    if (target) target.style.height = header.offsetHeight + box.offsetHeight + "px";
+};
+
+let isHideFacilities = ref(false);
+// 获取设施的高度
+const getFacilitiesHeight = () => {
+    let target = facilitiesEle.value;
+    if (target) {
+        let height = target.offsetHeight;
+        if (height > 820) isHideFacilities.value = true;
+    }
+};
+
+// 切换 设施 显示
+const openFacilities = () => {
+    isHideFacilities.value = !isHideFacilities.value;
+    let target = facilitiesEle.value;
+    let header = target.querySelector(".details-header");
+    let box = target.querySelector(".facility-box");
+    if (target) target.style.height = header.offsetHeight + box.offsetHeight + "px";
+};
+
+// 点击打开设施图片预览
+const openFacilitiesImg = (current) => {
+    const list = facilitylist.value || [];
+    let urls = [];
+
+    list.forEach((element) => {
+        element.images.forEach((ele) => {
+            ele.img.forEach((imageurl) => {
+                urls.push({
+                    imageurl,
+                    thumbnail: imageurl,
+                    type: "attachment",
+                });
+            });
+        });
+    });
+
+    const index = urls.findIndex((item) => item.imageurl == current);
+
+    cloaseImageShow(urls, index, "facilities");
+};
+
 let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} });
 
 // 处理 轮播图大图的索引 tab
@@ -879,34 +978,51 @@ const roomEle = ref(null);
 const specialEle = ref(null);
 const addressEle = ref(null);
 const messageEle = ref(null);
+const costEle = ref(null);
 const facilitiesEle = ref(null);
 const lifeEle = ref(null);
 const companyEle = ref(null);
 const eleseEle = ref(null);
+const inspectEle = ref(null); // 实地考察 节点
+const followEle = ref(null); // 寄托回访 节点
+
+const viewMapRef = ref(null); // 地图组件
 
 let navconfig = [
-    {
-        name: "房间类型",
-        value: "roomEle",
-    },
     {
         name: "优惠活动",
         value: "specialEle",
     },
     {
-        name: "位置与交通",
-        value: "addressEle",
+        name: "实地考察",
+        value: "inspectEle",
     },
     {
-        name: "房源详情",
-        value: "messageEle",
+        name: "寄托回访",
+        value: "followEle",
+    },
+    {
+        name: "房间类型",
+        value: "roomEle",
+    },
+    {
+        name: "费用说明",
+        value: "costEle",
+    },
+    {
+        name: "交通",
+        value: "addressEle",
     },
     {
         name: "公寓设施",
         value: "facilitiesEle",
     },
     {
-        name: "生活",
+        name: "房源详情",
+        value: "messageEle",
+    },
+    {
+        name: "生活配套",
         value: "lifeEle",
     },
     {
@@ -916,7 +1032,7 @@ let navconfig = [
 ];
 let navList = ref([]);
 
-let navTab = ref("roomEle");
+let navTab = ref("specialEle");
 
 // 处理 navList 数据
 const handleNavData = () => {
@@ -1041,8 +1157,6 @@ onUnmounted(() => {
     window.removeEventListener("scroll", handleScroll);
 });
 
-const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
-
 const handleScroll = () => {
     if (Math.random() > 0.3) return;
     for (let i = 0; i < navList.value.length; i++) {
@@ -1175,6 +1289,86 @@ const getClass = (index) => {
         [`item${index}`]: true,
     };
 };
+
+let likeList = ref([]); // 猜你喜欢 数据
+
+// 获取猜你喜欢 数据
+const getLikeList = () => {
+    proxy.$get("https://api.gter.net/v1/apartment/lists", { token, guess: 1 }).then((res) => {
+        if (res.code != 200) return;
+        let data = res.data;
+        likeList.value = data.data;
+    });
+};
+
+let isSelectSchool = ref(false); // 选择学校状态
+
+let distancePitch = ref({});
+
+let distanceList = ref([]);
+
+const getMapDistance = () => {
+    proxy.$get("https://api.gter.net/v1/apartment/mapDistance", { token }).then((res) => {
+        if (res.code != 200) return;
+        const data = res.data || [];
+        const sid = pitchScreenSchool;
+        const distance = data.distance || [];
+        distance.sort((a, b) => a.distance - b.distance);
+        let arr = [];
+        let pitch = null;
+        distance.forEach((element) => {
+            let obj = {};
+            element.distance = calculateDistance(element.distance);
+            if (element.walking) obj["walking"] = calculateDuration(element.walking.duration);
+            if (element.transit) obj["transit"] = calculateDuration(element.transit.duration);
+            if (element.driving) obj["driving"] = calculateDuration(element.driving.duration);
+            const target = {
+                name: element.name,
+                distance: element.distance,
+                alias: element.alias,
+                sid: element.sid,
+                obj,
+            };
+            arr.push(target);
+            if (element.sid == sid) pitch = target;
+        });
+        if (pitch == null) pitch = arr[0];
+
+        distanceList.value = arr;
+        distancePitch.value = pitch;
+    });
+};
+
+const selectSchoolRef = ref(null);
+
+const openSelectSchool = () => {
+    isSelectSchool.value = true;
+
+    nextTick(() => {
+        const item = selectSchoolRef.value.querySelector(`.item${distancePitch.value.sid}`);
+        if (!item) return;
+        selectSchoolRef.value.scrollTo({ top: item.offsetTop - 20, behavior: "smooth" });
+    });
+};
+
+const selectSchool = (sid) => {
+    let list = distanceList.value;
+    distancePitch.value = list.find((item) => item.sid == sid);
+    isSelectSchool.value = false;
+
+    // 修改本地存储
+    let pitchValue = localStorage.getItem("apartmentPitchValue");
+    if (pitchValue) {
+        pitchValue = JSON.parse(pitchValue);
+        pitchValue.school = sid;
+        localStorage.setItem("apartmentPitchValue", JSON.stringify(pitchValue));
+    }
+};
+
+const openMap = () => {
+    viewMapRef.value.showPop();
+    isSelectSchool.value = false;
+};
 </script>
 
 <style lang="less" scoped>
@@ -1547,4 +1741,159 @@ const getClass = (index) => {
 .el-popper.is-light {
     border-radius: 10px !important;
 }
+
+.selectSchoolPop {
+    border-radius: 16px;
+    overflow: hidden;
+    .el-dialog__header {
+        display: none;
+    }
+
+    .el-dialog__body {
+        padding: 0;
+
+        .title-box {
+            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+            font-weight: 650;
+            font-style: normal;
+            font-size: 25px;
+            line-height: 26px;
+            color: #000000;
+            text-align: center;
+            padding-top: 25px;
+            padding-bottom: 16px;
+            .close-icon {
+                width: 20px;
+                height: 20px;
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                cursor: pointer;
+            }
+        }
+
+        .site {
+            height: 35px;
+            background-color: rgba(242, 242, 242, 1);
+            margin: 0 20px 24px;
+            border-radius: 210px;
+            padding-left: 10px;
+
+            .site-img {
+                width: 16px;
+                height: 16px;
+                margin-right: 6px;
+            }
+
+            .site-text {
+                font-size: 14px;
+                color: #000000;
+            }
+
+            .btn {
+                font-size: 13px;
+                color: #555555;
+                padding: 0 10px;
+                height: 100%;
+                cursor: pointer;
+
+                .btn-img {
+                    width: 6px;
+                    height: 11px;
+                    margin-left: 8px;
+                }
+            }
+        }
+
+        .select-list {
+            max-height: 500px;
+            overflow: auto;
+            position: relative;
+            .select-item {
+                padding: 10px 15px;
+                border-top: 1px dotted #d7d7d7;
+                cursor: pointer;
+                &.pitch {
+                    background-color: rgba(245, 244, 249, 1);
+
+                    .select-icon {
+                        background-color: #fddf6d;
+                    }
+                }
+
+                &:last-of-type {
+                    border-radius: 0 0 16px 16px;
+                }
+
+                .select-icon {
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 50%;
+                    background-color: #f2f2f2;
+                    align-self: flex-start;
+                    margin-right: 10px;
+
+                    .select-img {
+                        width: 20px;
+                        height: 20px;
+                    }
+                }
+
+                .select-info {
+                    .select-name {
+                        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                        font-weight: 650;
+                        font-style: normal;
+                        font-size: 16px;
+                        color: #000000;
+                    }
+
+                    .distance {
+                        font-size: 14px;
+                        color: #555555;
+                        margin-top: 7px;
+
+                        .abbreviation {
+                            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                            font-weight: 650;
+                            font-style: normal;
+                            color: #000000;
+                            margin: 0 4px;
+                        }
+                    }
+
+                    .vehicle {
+                        flex-wrap: wrap;
+
+                        .item {
+                            height: 20px;
+                            line-height: 20px;
+                            background-color: rgba(255, 255, 255, 0);
+                            border: 1px solid rgba(127, 127, 127, 1);
+                            border-radius: 30px;
+                            font-size: 14px;
+                            color: #333333;
+                            width: fit-content;
+                            padding: 0 5px;
+                            margin-top: 5px;
+                            margin-right: 10px;
+
+                            .vehicle-icon {
+                                width: 16px;
+                                height: 16px;
+                                margin-right: 5px;
+                            }
+                        }
+                    }
+                }
+
+                .tick {
+                    width: 20px;
+                    height: 20px;
+                    align-self: center;
+                }
+            }
+        }
+    }
+}
 </style>
diff --git a/src/views/housingView/apartment.vue b/src/views/housingView/apartment.vue
index 6354e94..6db2be1 100644
--- a/src/views/housingView/apartment.vue
+++ b/src/views/housingView/apartment.vue
@@ -36,36 +36,36 @@
 </template>
 
 <script setup>
-import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
-import seachModule from "@/components/apartment/seachModule.vue"
-import apartmentItem from "@/components/public/apartment-item.vue"
-import haveQuestions from "@/components/public/have-questions.vue"
-import pageFooter from "@/components/footer/footer.vue"
-import emptyDuck from "@/components/public/empty-duck.vue"
-import circleBtn from "@/components/public/circle-btn.vue"
-import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick, reactive } from "vue"
-import { ElLoading } from "element-plus"
-import Masonry from "masonry-layout"
-import { useRoute, useRouter } from "vue-router"
-import backToTop from "@/components/public/backToTop.vue"
-import store from "../../store/index"
-import api from "../../utils/api"
-import { ElMessage } from "element-plus"
+import pageTopBar from "../../components/pageTopBar/pageTopBar.vue";
+import seachModule from "@/components/apartment/seachModule.vue";
+import apartmentItem from "@/components/public/apartment-item.vue";
+import haveQuestions from "@/components/public/have-questions.vue";
+import pageFooter from "@/components/footer/footer.vue";
+import emptyDuck from "@/components/public/empty-duck.vue";
+import circleBtn from "@/components/public/circle-btn.vue";
+import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick, reactive } from "vue";
+import { ElLoading } from "element-plus";
+import Masonry from "masonry-layout";
+import { useRoute, useRouter } from "vue-router";
+import backToTop from "@/components/public/backToTop.vue";
+import store from "../../store/index";
+import api from "../../utils/api";
+import { ElMessage } from "element-plus";
 
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
 
-const route = useRoute()
+const route = useRoute();
 
 const props = defineProps({
     item: Object,
-})
+});
 
-const gridContainer = ref(null)
+const gridContainer = ref(null);
 
-let list = ref([])
-let listCount = ref(0) // 列表数量
+let list = ref([]);
+let listCount = ref(0); // 列表数量
 
-let masonryInstance = null
+let masonryInstance = null;
 // let masonryInstanceMore = null
 
 onMounted(() => {
@@ -73,59 +73,65 @@ onMounted(() => {
     masonryInstance = new Masonry(gridContainer.value, {
         itemSelector: ".item",
         gutter: 22,
-    })
+    });
 
     // masonryInstanceMore = new Masonry(moreShowList.value, {
     //     itemSelector: ".item",
     //     gutter: 20,
     // })
 
-    pitchValue.value = store.state.apartmentPitchValue
-    if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]
+    // pitchValue.value = store.getters.getApartmentPitchValue
+
+    const value = localStorage.getItem("apartmentPitchValue");
+    if (value) pitchValue.value = JSON.parse(value);
+
+    if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"];
 
     // banner()  // 获取轮播图数据
-    getData() // 获取列表数据
+    getData(); // 获取列表数据
 
-    window.addEventListener("scroll", handleScroll)
-})
+    window.addEventListener("scroll", handleScroll);
+});
 
 onUnmounted(() => {
-    window.removeEventListener("scroll", handleScroll)
-    window.removeEventListener("scroll", getMoreScroll, true)
-})
+    window.removeEventListener("scroll", handleScroll);
+    window.removeEventListener("scroll", getMoreScroll, true);
+});
 
-let loading = null // 加载
-let requestLoading = false // 接口加载中
-let page = 1
+let loading = null; // 加载
+let requestLoading = false; // 接口加载中
+let page = 1;
 const getData = () => {
-    if (page == 0 || requestLoading) return
+    if (page == 0 || requestLoading) return;
     loading = ElLoading.service({
         lock: true,
         text: "Loading",
         background: "rgba(0, 0, 0, 0.7)",
-    })
+    });
 
-    requestLoading = true
+    requestLoading = true;
+
+    localStorage.setItem("apartmentPitchValue", JSON.stringify(pitchValue.value));
 
     proxy
-        .$post("/tenement/pc/api/apartment", {
+        .$post("https://api.gter.net/v1/apartment/lists", {
             limit: 10,
             page,
             ...pitchValue.value,
         })
-        .then(res => {
-            if (res.code != 200) return
-            let data = res.data
-            list.value = list.value.concat(data.data || [])
-            page = data.page * data.limit >= data.count ? 0 : page + 1
+        .then((res) => {
+            if (res.code != 200) return;
+            let data = res.data;
+            list.value = list.value.concat(data.data || []);
+            page = data.page * data.limit >= data.count ? 0 : page + 1;
 
-            listCount = data.count
+            listCount = data.count;
             nextTick(() => {
-                masonryInstance.reloadItems()
-                masonryInstance.layout()
-                loading.close()
-                requestLoading = false
-            })
+                masonryInstance.reloadItems();
+                masonryInstance.layout();
+                loading.close();
+                requestLoading = false;
+            });
 
             // 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
             // if (data.data.length < 20 && (pitchValue.value["school"] || pitchValue.value["location"].length != 0)) {
@@ -133,18 +139,18 @@ const getData = () => {
             //     getMoreList()
             // }
         })
-        .catch(err => {
-            loading.close()
-            requestLoading = false
-        })
-}
+        .catch((err) => {
+            loading.close();
+            requestLoading = false;
+        });
+};
 
 const handleScroll = () => {
-    const scrollHeight = document.documentElement.scrollHeight
-    const clientHeight = document.documentElement.clientHeight
-    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-    if (scrollTop + clientHeight >= scrollHeight - 350) getData()
-}
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = document.documentElement.clientHeight;
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop + clientHeight >= scrollHeight - 350) getData();
+};
 
 let pitchValue = ref({
     companyid: 0,
@@ -155,84 +161,85 @@ let pitchValue = ref({
     school: 0,
     roomlistings: 0,
     keyword: "",
-})
+    tag: "",
+});
 
 // 筛选组件的参数的中转
-const handleTransfer = data => {
+const handleTransfer = (data) => {
     for (const key in data.value) {
         if (data.value[key] != pitchValue.value[key]) {
-            pitchValue.value = { ...data.value }
-            store.state.apartmentPitchValue = pitchValue.value
-            page = 1
-            list.value = []
-            getData()
-            break
+            pitchValue.value = { ...data.value };
+            store.state.apartmentPitchValue = pitchValue.value;
+            page = 1;
+            list.value = [];
+            getData();
+            break;
         }
     }
-}
+};
 
-let moreShowList = ref(null)
-let moreState = ref(false) // 更多列表 显示状态
-let morePage = ref(1)
-let moreList = ref([])
-let moreLoading = ref(false)
+let moreShowList = ref(null);
+let moreState = ref(false); // 更多列表 显示状态
+let morePage = ref(1);
+let moreList = ref([]);
+let moreLoading = ref(false);
 
 // 加载更多数据列表
 const getMoreList = () => {
-    if (morePage.value == 0 || moreLoading.value) return
-    moreLoading.value = true
+    if (morePage.value == 0 || moreLoading.value) return;
+    moreLoading.value = true;
     let postData = {
         page: morePage.value,
         ...pitchValue.value,
-    }
+    };
 
-    api.getMoreLists(postData).then(res => {
-        if (res.code != 200) return
-        const data = res.data
-        if (!data.data) return
+    api.getMoreLists(postData).then((res) => {
+        if (res.code != 200) return;
+        const data = res.data;
+        if (!data.data) return;
 
-        moreList.value = moreList.value.concat(data.data)
-        moreState.value = true
-        if (data.data && data.data.length < data.limit) morePage.value = 0
+        moreList.value = moreList.value.concat(data.data);
+        moreState.value = true;
+        if (data.data && data.data.length < data.limit) morePage.value = 0;
         else {
-            morePage.value++
-            window.addEventListener("scroll", getMoreScroll, true)
+            morePage.value++;
+            window.addEventListener("scroll", getMoreScroll, true);
         }
         nextTick(() => {
-            masonryInstanceMore.reloadItems()
-            masonryInstanceMore.layout()
-            moreLoading.value = false
-        })
-    })
-}
+            masonryInstanceMore.reloadItems();
+            masonryInstanceMore.layout();
+            moreLoading.value = false;
+        });
+    });
+};
 
 const getMoreScroll = () => {
-    let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
-    let scrollTop = body.scrollTop
-    let clientHeight = body.clientHeight
-    let offsetHeight = body.offsetHeight
-    if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
-}
+    let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element");
+    let scrollTop = body.scrollTop;
+    let clientHeight = body.clientHeight;
+    let offsetHeight = body.offsetHeight;
+    if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList();
+};
 
 // 处理列表的点击收藏
-const handlecollect = uniqid => {
-    let targetIndex = 0
-    let token = ""
+const handlecollect = (uniqid) => {
+    let targetIndex = 0;
+    let token = "";
 
     list.value.forEach((element, index) => {
         if (element.uniqid == uniqid) {
-            targetIndex = index
-            token = element.token || ""
+            targetIndex = index;
+            token = element.token || "";
         }
-    })
+    });
 
-    api.apartmentCollection({ token }).then(res => {
-        if (res.code != 200) return
-        const data = res.data
-        list.value[targetIndex]["iscollect"] = data.status
-        ElMessage.success(res.message)
-    })
-}
+    api.apartmentCollection({ token }).then((res) => {
+        if (res.code != 200) return;
+        const data = res.data;
+        list.value[targetIndex]["iscollect"] = data.status;
+        ElMessage.success(res.message);
+    });
+};
 </script>
 <style lang="less" scoped>
 .screen-box {
diff --git a/src/views/user.vue b/src/views/user.vue
index 7a2f5fd..be940a1 100644
--- a/src/views/user.vue
+++ b/src/views/user.vue
@@ -38,15 +38,15 @@
                 <template v-if="user['uid'] && user.identity != 0">
                     <img class="" src="@/assets/img/publicImage/cut-off-rule.svg" />
                     <div class="operate-item flexcenter identity">
-                        <div class="operate-item-shell flexcenter" :class="{ 'intermediary': user.identity == 1, 'personage': user.identity == -1 }">
+                        <div class="operate-item-shell flexcenter" :class="{ intermediary: user.identity == 1, personage: user.identity == -1 }">
                             <img class="operate-icon" src="@/assets/img/publicImage/intermediary-icon.png" />
                         </div>
                         <div class="operate-text">{{ identityObj[user.identity || -1] }}</div>
                         <div v-if="user.identity == 1" class="btn-qrcode">
-                            <authentication-info :type="2" style="height: 217px;"></authentication-info>
+                            <authentication-info :type="2" style="height: 217px"></authentication-info>
                         </div>
                         <div v-else class="btn-qrcode">
-                            <authentication-info :type="1" style="height: 217px;"></authentication-info>
+                            <authentication-info :type="1" style="height: 217px"></authentication-info>
                         </div>
                     </div>
                 </template>
@@ -54,8 +54,8 @@
         </div>
 
         <div class="tab-box flexacenter">
-            <div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'fav' }" @click="cutTab('fav')">我的收藏</div>
-            <div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'publish' }" @click="cutTab('publish')">我的发布</div>
+            <div class="tab-item flexcenter" :class="{ pitch: tabState == 'fav' }" @click="cutTab('fav')">我的收藏</div>
+            <div class="tab-item flexcenter" :class="{ pitch: tabState == 'publish' }" @click="cutTab('publish')">我的发布</div>
         </div>
     </div>
 
@@ -73,6 +73,10 @@
     <div class="list wid1200 flexflex" v-show="tabState == 'fav'" ref="gridContainer">
         <div class="item" v-for="(item, index) in favData['list']" :key="item.id" @click="goApartmentDetail(item)">
             <div v-if="item.collectiontype == 'apartment'" class="apartment-item">
+                <div class="apartment-top flexacenter">
+                    <img class="icon" src="@/assets/img/publicImage/apartment-icon.png" />
+                    <img class="title" src="@/assets/img/publicImage/apartment-title.png" />
+                </div>
                 <div class="apartment-header flexflex">
                     <img class="apartment-header-img" :src="item.image || item.imageurl" />
                     <div class="apartment-header-content flexflex">
@@ -125,9 +129,7 @@
         <empty-duck></empty-duck>
     </div>
 
-    <div class="bottom-tps" v-if="(tabState == 'fav' && favData['list'].length != 0 && favData['page'] == 0) || (tabState == 'publish' && publishData['list'].length != 0 && publishData['page'] == 0)">
-        - 到底了 -
-    </div>
+    <div class="bottom-tps" v-if="(tabState == 'fav' && favData['list'].length != 0 && favData['page'] == 0) || (tabState == 'publish' && publishData['list'].length != 0 && publishData['page'] == 0)">- 到底了 -</div>
 
     <!-- 有疑问 -->
     <have-questions></have-questions>
@@ -141,271 +143,272 @@
 </template>
 
 <script setup>
-import pageTopBar from "../components/pageTopBar/pageTopBar.vue"
-import systematicNotificationPop from "@/components/user/systematic-notification-pop.vue"
-import haveQuestions from "@/components/public/have-questions.vue"
-import pageFooter from "@/components/footer/footer.vue"
-import publicListItem from "@/components/public/public-list-item.vue"
-import emptyDuck from "@/components/public/empty-duck.vue"
-import choosingIdentity from "@/components/edit/choosingIdentity.vue"
-import backToTop from "@/components/public/backToTop.vue"
-import authenticationInfo from "@/components/seachModule/authenticationInfo.vue"
+import pageTopBar from "../components/pageTopBar/pageTopBar.vue";
+import systematicNotificationPop from "@/components/user/systematic-notification-pop.vue";
+import haveQuestions from "@/components/public/have-questions.vue";
+import pageFooter from "@/components/footer/footer.vue";
+import publicListItem from "@/components/public/public-list-item.vue";
+import emptyDuck from "@/components/public/empty-duck.vue";
+import choosingIdentity from "@/components/edit/choosingIdentity.vue";
+import backToTop from "@/components/public/backToTop.vue";
+import authenticationInfo from "@/components/seachModule/authenticationInfo.vue";
 
-import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick, pushScopeId } from "vue"
-import { useRoute, useRouter } from "vue-router"
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick, pushScopeId } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-import { ElLoading, ElMessage } from "element-plus"
-import Masonry from "masonry-layout"
-import store from "@/store/index"
+import { ElLoading, ElMessage } from "element-plus";
+import Masonry from "masonry-layout";
+import store from "@/store/index";
 
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
 
-const route = useRoute()
-let router = useRouter()
+const route = useRoute();
+let router = useRouter();
 
-const gridContainer = ref(null)
-const gridContainerpublish = ref(null)
-let masonryInstance = null
-let masonryInstancepublish = null
+const gridContainer = ref(null);
+const gridContainerpublish = ref(null);
+let masonryInstance = null;
+let masonryInstancepublish = null;
 
 onMounted(() => {
     masonryInstance = new Masonry(gridContainer.value, {
         itemSelector: ".item",
         gutter: 20,
-    })
+    });
     masonryInstancepublish = new Masonry(gridContainerpublish.value, {
         itemSelector: ".item",
         gutter: 20,
-    })
+    });
 
-    init()
+    init();
 
-    window.addEventListener("scroll", handleScroll)
-})
+    window.addEventListener("scroll", handleScroll);
+});
 
-let systematicState = ref(false) // 系统通知
-let user = ref({})
-let count = ref({}) // 发布和收藏的数量
-let newmessagenum = ref(0)
-let validityidentity = ref("")
-let tabState = ref("publish") // fav  publish
+let systematicState = ref(false); // 系统通知
+let user = ref({});
+let count = ref({}); // 发布和收藏的数量
+let newmessagenum = ref(0);
+let validityidentity = ref("");
+let tabState = ref("publish"); // fav  publish
 
 const identityObj = {
     1: "中介认证",
     "-1": "房源认证",
-}
+};
 
 // 打开消息提醒 并且 删除未读消息数
 const handleOpenMessage = () => {
-    systematicState.value = true
-    newmessagenum.value = 0
-}
+    systematicState.value = true;
+    newmessagenum.value = 0;
+};
 
 const init = () => {
     proxy
         .$post("/tenement/pc/api/user")
-        .then(res => {
-            if (res.code != 200) return
-            let data = res.data
+        .then((res) => {
+            if (res.code != 200) return;
+            let data = res.data;
 
             if (!route.query["tab"]) {
-                if (data.count["publish"] > 0) tabState.value = "publish"
-                else if (data.count["fav"] == 0) tabState.value = "publish"
-                else tabState.value = "fav"
-            } else tabState.value = route.query["tab"]
+                if (data.count["publish"] > 0) tabState.value = "publish";
+                else if (data.count["fav"] == 0) tabState.value = "publish";
+                else tabState.value = "fav";
+            } else tabState.value = route.query["tab"];
 
-            if (tabState.value == "publish") getPublishData()
-            else getFavData()
-            // tabState.value = "fav"
+            if (data.user?.uin == 4171117) tabState.value = "fav";
+
+            if (tabState.value == "publish") getPublishData();
+            else getFavData();
             // getFavData()
 
-            user.value = data.user
-            count.value = data.count
-            newmessagenum.value = data.newmessagenum
-            store.state.user["messagenum"] = data.newmessagenum
+            user.value = data.user;
+            count.value = data.count;
+            newmessagenum.value = data.newmessagenum;
+            store.state.user["messagenum"] = data.newmessagenum;
 
-            validityidentity.value = data.validityidentity
+            validityidentity.value = data.validityidentity;
         })
-        .finally(() => {})
-}
+        .finally(() => {});
+};
 
 let loading = ElLoading.service({
     lock: true,
     text: "Loading",
     background: "rgba(0, 0, 0, 0.7)",
     visible: false,
-})
+});
 
 let publishData = ref({
     page: 1,
     list: [],
-})
+});
 
-let stat = ref({}) // 我的发布的详细数量
+let stat = ref({}); // 我的发布的详细数量
 // 获取发布数据
 const getPublishData = () => {
-    if (publishData.value["page"] == 0 || loading["visible"].value) return
+    if (publishData.value["page"] == 0 || loading["visible"].value) return;
     loading = ElLoading.service({
         lock: true,
         text: "Loading",
         background: "rgba(0, 0, 0, 0.7)",
-    })
+    });
     proxy
         .$post("/tenement/pc/api/user/publishList", {
             page: publishData.value["page"],
         })
-        .then(res => {
-            if (res.code != 200) return
-            let data = res.data
+        .then((res) => {
+            if (res.code != 200) return;
+            let data = res.data;
             // data.data[0]['verifiedstatus'] = 1
-            stat.value = data["stat"]
-            publishData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1
-            publishData.value["list"] = publishData.value["list"].concat(data["data"] || [])
+            stat.value = data["stat"];
+            publishData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1;
+            publishData.value["list"] = publishData.value["list"].concat(data["data"] || []);
             nextTick(() => {
-                masonryInstancepublish.reloadItems()
-                masonryInstancepublish.layout()
-                loading.close()
-            })
+                masonryInstancepublish.reloadItems();
+                masonryInstancepublish.layout();
+                loading.close();
+            });
         })
         .finally(() => {
-            loading.close()
-        })
-}
+            loading.close();
+        });
+};
 
 let favData = ref({
     page: 1,
     list: [],
-})
+});
 
 // 获取收藏数据
 const getFavData = () => {
-    if (favData.value["page"] == 0 || loading["visible"].value) return
+    if (favData.value["page"] == 0 || loading["visible"].value) return;
     loading = ElLoading.service({
         lock: true,
         text: "Loading",
         background: "rgba(0, 0, 0, 0.7)",
-    })
+    });
     proxy
         // .$post("/tenement/pc/api/user/favList", {
         .$post("/tenement/pc/api/user/collectionList", {
             page: favData.value["page"],
         })
-        .then(res => {
-            if (res.code != 200) return
-            let data = res.data
-            favData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1
-            favData.value["list"] = favData.value["list"].concat(data["data"] || [])
-            favData.value["limit"] = data["limit"]
+        .then((res) => {
+            if (res.code != 200) return;
+            let data = res.data;
+            favData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1;
+            favData.value["list"] = favData.value["list"].concat(data["data"] || []);
+            favData.value["limit"] = data["limit"];
             nextTick(() => {
-                masonryInstance.reloadItems()
-                masonryInstance.layout()
-                loading.close()
-            })
+                masonryInstance.reloadItems();
+                masonryInstance.layout();
+                loading.close();
+            });
         })
         .finally(() => {
-            loading.close()
-        })
-}
+            loading.close();
+        });
+};
 
 // 切换 tab
-const cutTab = value => {
-    tabState.value = value
-    if (tabState.value == "publish" && publishData.value["list"].length == 0) getPublishData()
-    else if (tabState.value == "fav" && favData.value["list"].length == 0) getFavData()
-}
+const cutTab = (value) => {
+    tabState.value = value;
+    if (tabState.value == "publish" && publishData.value["list"].length == 0) getPublishData();
+    else if (tabState.value == "fav" && favData.value["list"].length == 0) getFavData();
+};
 
 // 取消收藏
-let cancelCollection = data => {
-    let url = "/tenement/pc/api/user/operation"
-    if (data["collectiontype"] == "apartment") url = "/tenement/pc/api/user/apartmentCollection"
+let cancelCollection = (data) => {
+    let url = "/tenement/pc/api/user/operation";
+    if (data["collectiontype"] == "apartment") url = "/tenement/pc/api/user/apartmentCollection";
     proxy
         .$post(url, {
             token: data["token"],
         })
-        .then(res => {
-            if (res.code != 200) return
-            favData.value.list.splice(data["index"], 1)
-            count.value["fav"]--
+        .then((res) => {
+            if (res.code != 200) return;
+            favData.value.list.splice(data["index"], 1);
+            count.value["fav"]--;
 
             if (favData.value.list.length == 0 && favData.value["page"] != 0) {
-                favData.value["page"] = 1
-                getFavData()
-            } else refillData(data["index"])
+                favData.value["page"] = 1;
+                getFavData();
+            } else refillData(data["index"]);
 
             nextTick(() => {
-                masonryInstance.reloadItems()
-                masonryInstance.layout()
-                loading.close()
-            })
-        })
-}
+                masonryInstance.reloadItems();
+                masonryInstance.layout();
+                loading.close();
+            });
+        });
+};
 
 // 取消输出后重新补充一条数据
-const refillData = index => {
-    if (favData.value["page"] == 0 || loading["visible"].value) return
-    const page = favData.value["page"] - 1
+const refillData = (index) => {
+    if (favData.value["page"] == 0 || loading["visible"].value) return;
+    const page = favData.value["page"] - 1;
     proxy
         .$post("/tenement/pc/api/user/favList", {
             page,
             limit: favData.value["limit"],
         })
-        .then(res => {
-            if (res.code != 200) return
-            let data = res.data["data"] || []
-            favData.value["list"].push(data[data.length - 1])
+        .then((res) => {
+            if (res.code != 200) return;
+            let data = res.data["data"] || [];
+            favData.value["list"].push(data[data.length - 1]);
             nextTick(() => {
-                masonryInstance.reloadItems()
-                masonryInstance.layout()
-            })
-        })
-}
+                masonryInstance.reloadItems();
+                masonryInstance.layout();
+            });
+        });
+};
 
 // 点击下架都修改状态
 const undercarriage = (index, status) => {
-    stat.value["listing"]--
-    stat.value["offshelf"]++
-    publishData.value["list"][index].status = status
+    stat.value["listing"]--;
+    stat.value["offshelf"]++;
+    publishData.value["list"][index].status = status;
     nextTick(() => {
-        masonryInstance.reloadItems()
-        masonryInstance.layout()
-    })
-}
+        masonryInstance.reloadItems();
+        masonryInstance.layout();
+    });
+};
 
 // 点击顶上去后改 数据 状态
-const goUp = index => (publishData.value["list"][index].isding = 1)
+const goUp = (index) => (publishData.value["list"][index].isding = 1);
 
 // 点击删除
 const handleDelete = (index, status) => {
-    if (status == 0) stat.value["draft"]--
-    else if (status == 1) stat.value["listing"]--
-    else stat.value["offshelf"]--
-    count.value["publish"]--
-    publishData.value["list"].splice(index, 1)
+    if (status == 0) stat.value["draft"]--;
+    else if (status == 1) stat.value["listing"]--;
+    else stat.value["offshelf"]--;
+    count.value["publish"]--;
+    publishData.value["list"].splice(index, 1);
     nextTick(() => {
-        masonryInstancepublish.reloadItems()
-        masonryInstancepublish.layout()
-        loading.close()
-    })
-}
+        masonryInstancepublish.reloadItems();
+        masonryInstancepublish.layout();
+        loading.close();
+    });
+};
 
 // 监听滚动到底部
 const handleScroll = () => {
-    if (!user.value["uid"]) return
-    const scrollHeight = document.documentElement.scrollHeight
-    const clientHeight = document.documentElement.clientHeight
-    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    if (!user.value["uid"]) return;
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = document.documentElement.clientHeight;
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     if (scrollTop + clientHeight >= scrollHeight - 350) {
-        if (tabState.value == "publish") getPublishData()
-        else getFavData()
+        if (tabState.value == "publish") getPublishData();
+        else getFavData();
     }
-}
+};
 
 // 跳转公寓详情页
-const goApartmentDetail = item => router.push(`/apartmentDetail?uniqid=${item.uniqid}`)
+const goApartmentDetail = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
 
 onUnmounted(() => {
-    window.removeEventListener("scroll", handleScroll)
-})
+    window.removeEventListener("scroll", handleScroll);
+});
 </script>
 
 <style lang="less" scoped>
@@ -682,7 +685,7 @@ onUnmounted(() => {
 .apartment-item {
     width: 590px;
     height: 360px;
-    padding: 20px;
+    padding: 0 0 20px;
     background-color: rgba(255, 255, 255, 1);
     border-radius: 16px;
     -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
@@ -690,6 +693,25 @@ onUnmounted(() => {
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
     margin-bottom: 20px;
 
+    .apartment-top {
+        // width: 590px;
+        height: 32px;
+        background: linear-gradient(93.1045259092644deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
+        border-radius: 15px 15px 0 0;
+        padding-left: 11px;
+        margin-bottom: 23px;
+        .icon {
+            width: 18px;
+            height: 18px;
+            margin-right: 6px;
+        }
+
+        .title {
+            width: 77px;
+            height: 18px;
+        }
+    }
+
     .apartment-header {
         margin-bottom: 20px;
         .apartment-header-img {