|
@@ -112,15 +112,25 @@
|
|
|
width="940px"
|
|
|
append-to-body
|
|
|
:visible.sync="workVisible"
|
|
|
+
|
|
|
>
|
|
|
<!-- activeUrl -->
|
|
|
- <div class="sliderWrap" v-if="workVisible">
|
|
|
+ <div class="sliderWrap">
|
|
|
<div class="swiperWrap">
|
|
|
- <swiper ref="mySwiper" :options="swiperOptions" v-if="activeRow">
|
|
|
+ <swiper
|
|
|
+ v-if="activeRow"
|
|
|
+ ref="mySwiper"
|
|
|
+ :options="swiperOptions"
|
|
|
+ :auto-update="true"
|
|
|
+ :auto-destroy="false"
|
|
|
+ :delete-instance-on-destroy="true"
|
|
|
+ :cleanup-styles-on-destroy="true"
|
|
|
+ >
|
|
|
<swiper-slide
|
|
|
v-for="(item, index) in activeRow.urlList"
|
|
|
:key="index"
|
|
|
>
|
|
|
+ <!-- v-if="activeIndex == index" -->
|
|
|
<div class="videoWrap">
|
|
|
<video
|
|
|
style="width: 480px"
|
|
@@ -200,8 +210,6 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
|
|
|
-
|
|
|
-// import style (>= Swiper 6.x)
|
|
|
import "swiper/swiper-bundle.css";
|
|
|
import pagination from "@/components/Pagination/index";
|
|
|
import {
|
|
@@ -241,8 +249,11 @@ export default {
|
|
|
content: null,
|
|
|
title: null,
|
|
|
activeRow: null,
|
|
|
+ activeIndex: 0,
|
|
|
swiperOptions: {
|
|
|
// autoHeight: true,
|
|
|
+ observer: true, //修改swiper自己或子元素时,自动初始化swiper
|
|
|
+ observeParents: true, //修改swiper的父元素时,自动初始化swiper
|
|
|
speed: 300,
|
|
|
loop: true,
|
|
|
pagination: ".swiper-pagination",
|
|
@@ -251,8 +262,8 @@ export default {
|
|
|
prevEl: ".swiper-button-prev",
|
|
|
},
|
|
|
on: {
|
|
|
- slideChange: () => {
|
|
|
- console.log(this.activeRow);
|
|
|
+ slideChange: (val) => {
|
|
|
+ // this.activeIndex = val.realIndex;
|
|
|
},
|
|
|
},
|
|
|
|
|
@@ -333,6 +344,7 @@ export default {
|
|
|
}).then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
this.activeCommit = res.data.rows;
|
|
|
+
|
|
|
this.workVisible = true;
|
|
|
// item.up = false
|
|
|
}
|
|
@@ -342,12 +354,15 @@ export default {
|
|
|
this.activeUrl = "";
|
|
|
},
|
|
|
prev(val) {
|
|
|
-
|
|
|
- this.swiper.slidePrev();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.swiper.slidePrev();
|
|
|
+ });
|
|
|
},
|
|
|
next(val) {
|
|
|
- console.log(val)
|
|
|
- this.swiper.slideNext();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ console.log(this.swiper.slideNext());
|
|
|
+ this.swiper.slideNext();
|
|
|
+ });
|
|
|
},
|
|
|
lookReplied(row) {
|
|
|
// repliedVisible
|
|
@@ -385,17 +400,16 @@ export default {
|
|
|
flex-direction: row;
|
|
|
height: 100%;
|
|
|
}
|
|
|
-.videoWrap{
|
|
|
- min-height:640px;
|
|
|
+.videoWrap {
|
|
|
+ min-height: 640px;
|
|
|
|
|
|
- // background-color: #efefef;
|
|
|
- align-items: center;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
+ background-color: #efefef;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
}
|
|
|
|
|
|
.swiper-wrapper {
|
|
|
-
|
|
|
}
|
|
|
.sliderWrap {
|
|
|
width: 100%;
|