diff --git a/src/assets/img/detail/infoBtnBg.svg b/src/assets/img/detail/infoBtnBg.svg
new file mode 100644
index 0000000..d0a2e8e
--- /dev/null
+++ b/src/assets/img/detail/infoBtnBg.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="90px" height="101px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="1240.69879518072" y1="1382" x2="1072.6265060241" y2="1584" id="LinearGradient932">
+      <stop id="Stop933" stop-color="#50e3c2" offset="0" />
+      <stop id="Stop934" stop-color="#ffffff" stop-opacity="0.8" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1116 -1424 )">
+    <path d="M 1116 1424  L 1194 1424  A 12 12 0 0 1 1206 1436 L 1206 1513  A 12 12 0 0 1 1194 1525 L 1116 1525  L 1116 1424  Z " fill-rule="nonzero" fill="url(#LinearGradient932)" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/detail/line.svg b/src/assets/img/detail/line.svg
new file mode 100644
index 0000000..ec94f67
--- /dev/null
+++ b/src/assets/img/detail/line.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="729px" height="5px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -389 -1473 )">
+    <path d="M 390 1475  L 1116 1475  " stroke-width="2" stroke-dasharray="2,2" stroke="#d7d7d7" fill="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/detail/mapIcon.png b/src/assets/img/detail/mapIcon.png
new file mode 100644
index 0000000..1d0f967
Binary files /dev/null and b/src/assets/img/detail/mapIcon.png differ
diff --git a/src/assets/img/detail/mapMarkIcon.png b/src/assets/img/detail/mapMarkIcon.png
new file mode 100644
index 0000000..5c8f865
Binary files /dev/null and b/src/assets/img/detail/mapMarkIcon.png differ
diff --git a/src/assets/img/detail/markIcon.svg b/src/assets/img/detail/markIcon.svg
new file mode 100644
index 0000000..fac307c
--- /dev/null
+++ b/src/assets/img/detail/markIcon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="10px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -432 -1470 )">
+    <path d="M 437 1471  C 439.24 1471  441 1472.76  441 1475  C 441 1477.24  439.24 1479  437 1479  C 434.76 1479  433 1477.24  433 1475  C 433 1472.76  434.76 1471  437 1471  Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" />
+    <path d="M 437 1471  C 439.24 1471  441 1472.76  441 1475  C 441 1477.24  439.24 1479  437 1479  C 434.76 1479  433 1477.24  433 1475  C 433 1472.76  434.76 1471  437 1471  Z " stroke-width="2" stroke="#333333" fill="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/detail.vue b/src/views/detail.vue
index fded4fd..b5be0f0 100644
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -54,8 +54,12 @@
                             <div class="img-list-box dis-f jus-x al-item">
                                 <img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
                                     @click="moveImageList('left')">
+                                <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
+                                    style="transform: rotate(180deg);" @click="moveImageList('left')">
                                 <img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
                                     @click="moveImageList('right')">
+                                <img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
+                                    style="transform: rotate(180deg);" @click="moveImageList('right')">
                                 <div class="dis-f al-item list-box" ref="imageList">
                                     <div v-for="(item, i) in imgList" :key="i">
                                         <div class="video" v-if="item === 1">
@@ -81,7 +85,7 @@
                                     基本信息
                                 </span>
                             </div>
-                            <div class="info-box-s dis-f">
+                            <div class="info-box-s">
                                 <div class="info">
                                     <span>
                                         房屋类型
@@ -96,7 +100,7 @@
                                     </span>
                                     <span class="text">
                                         28
-                                    </span>|<span class="text">
+                                    </span>|<span class="text" style="margin-left:0;">
                                         有电梯
                                     </span>
                                 </div>
@@ -108,7 +112,7 @@
                                         阳台
                                     </span>
                                 </div>
-                                <div class="info">
+                                <div class="info" style="margin-top:30px;">
                                     <span>
                                         面积
                                     </span>
@@ -116,7 +120,7 @@
                                         680 平方呎
                                     </span>
                                 </div>
-                                <div class="info">
+                                <div class="info" style="margin-top:30px;">
                                     <span>
                                         性别要求
                                     </span>
@@ -126,6 +130,37 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="map-box">
+                            <div class="dis-f al-item title-box">
+                                <img src="../assets/img/detail/mapIcon.png" class="img" alt="">
+                                <span class="title">九龙 > 油麻地/旺角/太子</span>
+                            </div>
+                            <div class="dis-f jus-x" style="margin-top:15px;">
+                                <div class="map-s">
+                                    <div class="pop-box">
+                                        <div class="address-box dis-f al-item jus-bet">
+                                            <div class="dis-f al-item">
+                                                <img src="../assets/img/detail/mapMarkIcon.png" class="img" alt="">
+                                                <span>独立大厦</span>
+                                            </div>
+                                            <img src="../assets/img/detail/moreNot.svg" class="icon" alt="">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="dis-f jus-x">
+                            <div class="distance-box dis-f jus-bet">
+                                <div class="dis-f al-item">
+                                    <!-- <img src="../assets/img/detail/line.svg" class="line-img" alt=""> -->
+                                    <div class="line-img"></div>
+                                </div>
+                                <div class="info-btn-bg">
+                                    <img src="../assets/img/detail/infoBtnBg.svg" class="info-btn-bg" alt="">
+                                </div>
+                            </div>
+                        </div>
+
                     </div>
                     <div>
                         <div></div>
@@ -402,10 +437,11 @@ img {
 
         .info-box-s {
             margin-top: 30px;
+            display: flex;
             flex-wrap: wrap;
 
             .info {
-                width: 150px;
+                width: 276px;
                 font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                 font-weight: 400;
                 font-style: normal;
@@ -418,7 +454,7 @@ img {
                     font-style: normal;
                     font-size: 16px;
                     color: #333;
-                    margin-left:30px;
+                    margin-left: 30px;
                 }
             }
         }
@@ -437,6 +473,98 @@ img {
             color: #000000;
         }
     }
+
+    .map-box {
+        margin-top: 50px;
+
+        .title-box {
+            font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+            font-weight: 650;
+            font-style: normal;
+            font-size: 20px;
+            color: #000000;
+
+            .img {
+                width: 20px;
+                height: 24px;
+                margin-right: 10px;
+            }
+        }
+
+        .map-s {
+            width: 100%;
+            height: 300px;
+            border-radius: 10px;
+            position: relative;
+
+            .pop-box {
+                position: absolute;
+                width: 100%;
+                height: 300px;
+                background-color: rgba(51, 51, 51, 0.298039215686275);
+                border-radius: 10px;
+                top: 0;
+                left: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .address-box {
+                    width: 180px;
+                    height: 40px;
+                    background: inherit;
+                    background-color: rgba(51, 51, 51, 0.8);
+                    border: none;
+                    border-radius: 10px;
+                    -moz-box-shadow: none;
+                    -webkit-box-shadow: none;
+                    box-shadow: none;
+                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                    font-weight: 400;
+                    font-style: normal;
+                    font-size: 18px;
+                    color: #FFFFFF;
+                    padding: 10px;
+
+                    .img {
+                        width: 22px;
+                        height: 22px;
+                        margin-right: 8px;
+                    }
+
+                    .icon {
+                        width: 8px;
+                        height: 12px;
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+    }
+
+    .distance-box {
+        width: 100%;
+        height: 101px;
+        background: inherit;
+        background-color: rgba(255, 255, 255, 1);
+        box-sizing: border-box;
+        border-width: 1px;
+        border-style: solid;
+        border-color: rgba(242, 242, 242, 1);
+        border-radius: 12px;
+        margin-top:20px;
+
+        .line-img {
+            height: 1px;
+            width: 743px;
+            border: 1px dashed #d7d7d7;
+        }
+
+        .info-btn-bg {
+            width: 90px;
+            height: 101px;
+        }
+    }
 }
 </style>
   
\ No newline at end of file