|
|
|
@ -24,6 +24,8 @@
|
|
|
|
|
height="100%"
|
|
|
|
|
:src="bigPicPath"
|
|
|
|
|
controls="controls"
|
|
|
|
|
:poster="videopath"
|
|
|
|
|
autoplay
|
|
|
|
|
></video>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bigimg" v-else>
|
|
|
|
@ -82,8 +84,11 @@
|
|
|
|
|
class="smallnoPic"
|
|
|
|
|
v-else-if="item.path.indexOf('videos') !== -1"
|
|
|
|
|
>
|
|
|
|
|
<!-- <img src="../../assets/img/img.jpg" v-if="item.thumb == ''" v-else/> -->
|
|
|
|
|
<img :src="item.thumb" />
|
|
|
|
|
<img
|
|
|
|
|
src="../../assets/img/loading.jpg"
|
|
|
|
|
v-if="item.thumb.indexOf('jpg') == -1"
|
|
|
|
|
/>
|
|
|
|
|
<img :src="item.thumb" v-else />
|
|
|
|
|
<p class="videoicon"><i class="el-icon-video-play"></i></p>
|
|
|
|
|
<p class="timeInfo">
|
|
|
|
|
<el-tooltip
|
|
|
|
@ -154,6 +159,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
isshowArrow: true, //判断是否显示切换按钮
|
|
|
|
|
bigPicPath: "", //大图地址
|
|
|
|
|
videopath: "",
|
|
|
|
|
smallPicPath: "", //小图地址
|
|
|
|
|
bigNum: 0, //判断大图是第几张
|
|
|
|
|
fiveList: [], //小图图片list
|
|
|
|
@ -185,6 +191,7 @@ export default {
|
|
|
|
|
this.page * this.pagesize
|
|
|
|
|
);
|
|
|
|
|
this.bigPicPath = this.fiveList[this.activeSmall].path;
|
|
|
|
|
this.videopath = this.fiveList[this.activeSmall].thumb;
|
|
|
|
|
},
|
|
|
|
|
//大图点击左侧切换图片
|
|
|
|
|
leftClick() {
|
|
|
|
@ -361,12 +368,12 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
.videoicon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 45%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 73%;
|
|
|
|
|
left: 10%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
i {
|
|
|
|
|
font-size: 38px;
|
|
|
|
|
color: #409eff;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.borderActive {
|
|
|
|
|