1

src/views/hall/direct.vue

@@ -62,16 +62,6 @@
                     </div>
                   </el-col>
                   <el-col :span="24" class="videoDown">
-                    <!-- <el-carousel type="card" height="50px" :autoplay="false">
-                      <el-carousel-item
-                        v-for="(item, index) in videoData"
-                        :key="index"
-                        :class="menuIndex == index ? 'indexClass' : 'videodata'"
-                        @click.native="changeMenu(index, item)"
-                      >
-                        第{{ index + 1 }}辑
-                      </el-carousel-item>
-                    </el-carousel> -->
                     <div class="swiper-container">
                       <div class="swiper-wrapper">
                         <div
@@ -980,12 +970,6 @@ export default {
             color: #fff;
             background: #409eff;
           }
-          // /deep/.el-carousel__item--card {
-          //   width: 10%;
-          // }
-          // /deep/.el-carousel__indicators {
-          //   display: none;
-          // }
         }
       }
     }

src/views/halltwo/directTwo.vue

@@ -112,26 +112,21 @@
                   </div>
                 </el-col>
                 <el-col :span="24" class="down">
-                  <el-carousel :interval="4000" type="card" height="50px" :autoplay="false">
-                    <el-carousel-item
-                      v-for="(item, index) in videoData"
-                      :key="index"
-                      :class="menuIndex == index ? 'indexClass' : 'videodata'"
-                      @click.native="changeMenu(index, item)"
-                    >
-                      {{ item.videointro }}
-                    </el-carousel-item>
-                  </el-carousel>
-                  <!-- <el-col
-                    :span="6"
-                    class=""
-                    v-for="(item, index) in dockInfo.videodata"
-                    :key="index"
-                    @click.native="changeMenu(index, item)"
-                    :class="menuIndex == index ? 'indexClass' : 'videodata'"
-                  >
-                    {{ item.videointro }}
-                  </el-col> -->
+                  <div class="swiper-container">
+                    <div class="swiper-wrapper">
+                      <div
+                        v-for="(item, index) in videoData"
+                        :key="index"
+                        :class="`${menuIndex == index ? 'indexClass' : 'videodata'} swiper-slide`"
+                        @click="changeMenu(index, item)"
+                      >
+                        <p>第{{ index + 1 }}辑</p>
+                      </div>
+                    </div>
+                    <!-- 如果需要导航按钮 -->
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-button-next"></div>
+                  </div>
                 </el-col>
               </el-col>
               <el-col :span="12" class="right">
@@ -531,6 +526,18 @@ export default {
       let res = await this.dockFetch(this.id);
       if (this.$checkRes(res)) {
         this.$set(this, `videoData`, res.data.videodata);
+        this.$nextTick(() => {
+          var mySwiper = new Swiper('.swiper-container', {
+            slidesPerView: 4,
+            centeredSlides: true,
+            centeredSlidesBounds: true,
+            // 如果需要前进后退按钮
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+          });
+        });
         this.changeMenu('0', this.videoData[0]);
       }
     },
@@ -769,11 +776,15 @@ export default {
           height: 50px;
           overflow: hidden;
           border: 1px solid #ccc;
+          .swiper-container {
+            width: 100%;
+            height: 50px;
+          }
           .videodata {
             border-radius: 10px;
             background: #cccccc8f;
-            height: 50px;
-            line-height: 50px;
+            height: 39px;
+            line-height: 39px;
             text-align: center;
             margin: 0 5px;
             font-weight: bold;
@@ -785,8 +796,8 @@ export default {
           }
           .indexClass {
             border-radius: 10px;
-            height: 50px;
-            line-height: 50px;
+            height: 39px;
+            line-height: 39px;
             text-align: center;
             margin: 0 5px;
             font-weight: bold;