提交

src/App.vue

@@ -114,4 +114,27 @@ input[type="number"] {
   font-style: normal;
   font-display: swap;
 }
+
+.no-scrollbar {
+  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 浏览器的滚动条 */
+  }
+}
 </style>

src/views/apartmentDetail.vue

@@ -21,15 +21,16 @@
                         <div class="indicate">1/3</div>
                     </div>
                     <div class="slideshow-across flexflex">
-                        <div class="slideshow-btn left flexcenter">
+                        <div class="slideshow-btn left flexcenter" @click="handleslideshow('left')">
                             <img class="arrow" src="@/assets/img/publicImage/gray-arrow.svg" />
                         </div>
-                        <div class="box flex1">
+                        <div class="slideshow-list box no-scrollbar  flex1 flexacenter">
-                            <!-- <div class="item" v-for=" item in info['attachment']"> -->
+                            <div class="item" :class="{ 'pitch': index == 0 }"
-                            <!-- <img :src="item" /> -->
+                                v-for="(item, index) in info['thumbnailList']">
-                            <!-- </div> -->
+                                <img class="img" :src="item" />
+                            </div>
                         </div>
-                        <div class="slideshow-btn flexcenter">
+                        <div class="slideshow-btn flexcenter" @click="handleslideshow('right')">
                             <img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" />
                         </div>
                     </div>
@@ -98,12 +99,12 @@
                             <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] != 0" class="rotate180 arrow"
+                                    <img v-if="mediaBtnstate[index] && mediaBtnstate[index] != 0" class="rotate180 arrow"
                                         src="@/assets/img/publicImage/black-arrow.svg" alt="">
-                                    <img v-show="mediaBtnstate[index] == 0" class="arrow"
+                                    <img v-else="mediaBtnstate[index] == 0" class="arrow"
                                         src="@/assets/img/publicImage/gray-arrow.svg" alt="">
                                 </div>
-                                <div class="media-list flexacenter" :class="`element${index}`">
+                                <div class="media-list flexacenter no-scrollbar" :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" />
@@ -152,8 +153,8 @@
                         <img class="icon" src="@/assets/img/apartmentDetail/location-icon.png">
                         {{ info.location || '位置' }}
                     </div>
-                    <view-map :latlng="{ longitude: info['coordinate'][0], latitude: info['coordinate'][1] }"
+                    <!-- <view-map :latlng="{ longitude: info['coordinate'][0], latitude: info['coordinate'][1] }"
-                        :name="info['address']"></view-map>
+                        :name="info['address']"></view-map> -->
 
                     <!-- 交通 -->
                     <div class="traffic-box" v-if="info['traffic']">
@@ -515,8 +516,8 @@ const handleMediaBtn = (type, index) => {
     const element = document.querySelector(`.element${index}`);
     if (element) {
         let left
-        if (type == 'left') left = element.scrollLeft - 50
+        if (type == 'left') left = element.scrollLeft - 86
-        else left = element.scrollLeft + 50
+        else left = element.scrollLeft + 86
         const scrollOptions = {
             left,
             behavior: 'smooth'
@@ -524,14 +525,35 @@ const handleMediaBtn = (type, index) => {
         element.scrollTo(scrollOptions);
 
         nextTick(() => {
-
             setTimeout(() => {
                 if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
                 else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
                 else mediaBtnstate.value[index] = 2
             }, 150);
         })
+    }
+}
 
+// 顶部轮播图的左右按钮
+const handleslideshow = (type) => {
+    const element = document.querySelector(`.slideshow-list`);
+    if (element) {
+        let left
+        if (type == 'left') left = element.scrollLeft - 100
+        else left = element.scrollLeft + 100
+        const scrollOptions = {
+            left,
+            behavior: 'smooth'
+        };
+        element.scrollTo(scrollOptions);
+
+        nextTick(() => {
+            setTimeout(() => {
+                // if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
+                // else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
+                // else mediaBtnstate.value[index] = 2
+            }, 150);
+        })
     }
 }
 
@@ -668,7 +690,39 @@ const handleMediaBtn = (type, index) => {
                     }
 
                     .box {
-                        background-color: #50e3c2;
+                        width: 360px;
+                        overflow: auto;
+
+                        .item {
+                            height: 60px;
+                            margin-right: 6px;
+                            position: relative;
+                            cursor: pointer;
+
+                            &::after {
+                                content: "";
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                                background-color: rgba(255, 255, 255, 0.501960784313725);
+                            }
+
+                            &.pitch {
+                                &::after {
+                                    height: 0;
+                                }
+                            }
+
+                            // overflow: hidden;
+
+                            .img {
+                                height: 100%;
+                                border-radius: 10px;
+
+                            }
+                        }
                     }
 
                     .arrow {
@@ -892,26 +946,7 @@ const handleMediaBtn = (type, index) => {
                             .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 {