|
|
@@ -62,16 +62,31 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="videoDown">
|
|
|
- <el-carousel :interval="4000" type="card" height="50px" :autoplay="false">
|
|
|
+ <!-- <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)"
|
|
|
>
|
|
|
- {{ item.videointro }}
|
|
|
+ 第{{ index + 1 }}辑
|
|
|
</el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
+ </el-carousel> -->
|
|
|
+ <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>
|
|
|
@@ -454,6 +469,7 @@ export default {
|
|
|
},
|
|
|
data: () => ({
|
|
|
achievezb: require('@/assets/3.png'),
|
|
|
+ hand: require('@/assets/emotion/flower2.gif'),
|
|
|
touxiang: require('@/assets/emotion/touxiang.png'),
|
|
|
videodisplay: 'list',
|
|
|
activeName: 'second',
|
|
|
@@ -759,6 +775,18 @@ export default {
|
|
|
let res = await this.dockFetch(this.dock_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]);
|
|
|
}
|
|
|
},
|
|
|
@@ -924,11 +952,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;
|
|
|
@@ -940,14 +972,20 @@ 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;
|
|
|
color: #fff;
|
|
|
background: #409eff;
|
|
|
}
|
|
|
+ // /deep/.el-carousel__item--card {
|
|
|
+ // width: 10%;
|
|
|
+ // }
|
|
|
+ // /deep/.el-carousel__indicators {
|
|
|
+ // display: none;
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
}
|
