diff --git a/src/views/apartmentDetail.vue b/src/views/apartmentDetail.vue
index eca3280..e60e0d7 100644
--- a/src/views/apartmentDetail.vue
+++ b/src/views/apartmentDetail.vue
@@ -83,7 +83,7 @@
             <div class="details-left flex1">
                 <!-- 房间类型 -->
                 <div class="type-box" v-if="roomList.length != 0" ref="roomEle">
-                    <div class="type-item flexacenter" v-for="item in roomList">
+                    <div class="type-item flexacenter" v-for="(item, index) in roomList">
                         <img class="type-icon" v-if="item['status'] == 1"
                             src="@/assets/img/apartmentDetail/apartment-have.svg" />
                         <img class="type-icon" v-else src="@/assets/img/apartmentDetail/apartment-not.svg" />
@@ -93,11 +93,18 @@
                                 <div class="tags-item flexcenter first" v-if="item.allowance">仅剩{{ item.allowance }}间</div>
                                 <div class="tags-item flexcenter" v-for="it in item.tags">{{ it }}</div>
                             </div>
-                            <div class="media-box flexflex">
-                                <div class="media-btn left flexcenter">
-                                    <img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" alt="">
+
+                            <!-- <view class="room-type-media" wx:if="{{ item.videos.length != 0 || item.images.length != 0 }}"> -->
+                            <!-- {{ mediaBtnstate[index] != 1 }} -->
+                            <div class="media-box flexflex" v-if="item.videos.length != 0 || item.images.length != 0">
+                                <div class="media-btn flexcenter" @click="handleMediaBtn('left', index)"
+                                    v-if="item.videos.length + item.images.length > 5">
+                                    <img v-show="mediaBtnstate[index] != 1" class="left arrow"
+                                        src="@/assets/img/publicImage/black-arrow.svg" alt="">
+                                    <img v-show="mediaBtnstate[index] == 1" class="arrow"
+                                        src="@/assets/img/publicImage/gray-arrow.svg" alt="">
                                 </div>
-                                <div class="media-list flexacenter">
+                                <div class="media-list flexacenter" :class="`element${index}`">
                                     <div class="media-item flexcenter" v-for="it in item['videos']">
                                         <img class="media-img" :src="it['thumbnail']">
                                         <img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
@@ -106,7 +113,8 @@
                                         <img class="media-img" :src="it['thumbnail']">
                                     </div>
                                 </div>
-                                <div class="media-btn flexcenter">
+                                <div class="media-btn flexcenter" @click="handleMediaBtn('right', index)"
+                                    v-if="item.videos.length + item.images.length > 5">
                                     <img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" alt="">
                                 </div>
                             </div>
@@ -458,12 +466,6 @@ const handleClickNav = (value) => {
 
     window.scrollTo({ top: scrollTop, behavior: 'smooth' });
 
-
-    // roomEle.value.scrollIntoView({ top: 100, behavior: 'smooth' });
-    // const scrollTop = elementObj[value].offsetTop - 110;
-
-    // window.scrollTo({ top: scrollTop, behavior: 'smooth' });
-
 }
 
 
@@ -508,6 +510,32 @@ const contactReservationService = () => {
 }
 
 
+let mediaBtnstate = ref({})  // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击
+
+const handleMediaBtn = (type, index) => {
+    const element = document.querySelector(`.element${index}`);
+    if (element) {
+        let left
+        if (type == 'left') left = element.scrollLeft - 50
+        else left = element.scrollLeft + 50
+        const scrollOptions = {
+            left,
+            behavior: 'smooth'
+        };
+        element.scrollTo(scrollOptions);
+
+        nextTick(() => {
+            console.log(element.scrollLeft + 460, element.scrollWidth);
+            if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
+            else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
+            else mediaBtnstate.value[index] = 2
+
+        })
+
+    }
+}
+
+
 </script>
 
 <style lang="less" scoped>
@@ -860,11 +888,29 @@ const contactReservationService = () => {
                         }
 
                         .media-box {
-                            max-width: 460px;
-                            // overflow: auto;
-
                             .media-list {
+                                max-width: 460px;
                                 overflow: auto;
+                                scrollbar-width: none;
+                                /* 隐藏滚动条 */
+
+                                &::-webkit-scrollbar {
+                                    width: 0;
+                                    background-color: transparent;
+                                }
+
+                                &::-webkit-scrollbar-thumb {
+                                    background-color: transparent;
+                                }
+
+                                &::-webkit-scrollbar-track {
+                                    background-color: transparent;
+                                }
+
+                                &::-webkit-scrollbar {
+                                    display: none;
+                                    /* 隐藏 Chrome 浏览器的滚动条 */
+                                }
                             }
 
                             .media-item {
@@ -893,11 +939,13 @@ const contactReservationService = () => {
                                 height: 80px;
                                 width: 30px;
                                 cursor: pointer;
-
-                                &.left {
+                                .rotate180{
                                     transform: rotate(180deg);
+
                                 }
 
+
+
                                 .arrow {
                                     width: 10px;
                                     height: 17px;