<template>
|
<div class="event-video-content">
|
<div class="video-player">
|
<video :src="videoUrl" controls autoplay></video>
|
</div>
|
<div class="more-videos">
|
<div class="top">
|
<div class="title">更多视频</div>
|
<div class="total">
|
共
|
<span class="num">{{eventVideoArr.length}}</span>
|
条
|
</div>
|
</div>
|
<div class="gallery">
|
<div
|
class="video-item"
|
:class="{'act':item.ID == curVideo.ID}"
|
v-for="item in eventVideoArr"
|
:key="item.ID"
|
@click="checkVideo(item)"
|
>
|
<img :src="`/httpImage/` + item.Cover" alt />
|
<div class="time">{{item.EventTime}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getVideoUrl } from "@/api/shuohuang"
|
|
export default {
|
props: {
|
eventVideoArr: {
|
type: Array,
|
default: () => { return [] }
|
}
|
},
|
data() {
|
return {
|
curVideo: {},
|
videoUrl: ""
|
}
|
},
|
|
mounted() {
|
//this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
|
//this.curVideo = this.eventVideoArr[0];
|
this.$nextTick(() => {
|
this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
|
})
|
},
|
methods: {
|
checkVideo(item) {
|
this.curVideo = item;
|
getVideoUrl({ id: item.ID }).then(rsp => {
|
if (rsp && rsp.success) {
|
this.videoUrl = "/httpImage/" + rsp.data.videoUrl;
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.event-video-content {
|
padding: 10px 14px;
|
.video-player {
|
background: #fff;
|
margin-bottom: 14px;
|
video {
|
margin: 20px auto;
|
width: 576px;
|
height: 324px;
|
background: #000;
|
}
|
}
|
.more-videos {
|
background: #fff;
|
.top {
|
padding: 10px 20px;
|
display: flex;
|
justify-content: space-between;
|
.total {
|
.num {
|
padding: 0 2px;
|
color: #0096fa;
|
}
|
}
|
}
|
.gallery {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0 20px 10px;
|
height: 300px;
|
overflow-y: auto;
|
// &:after{
|
// content: "";
|
// flex: auto;
|
// }
|
.video-item {
|
width: 200px;
|
height: fit-content;
|
margin: 10px 40px;
|
//background: rgb(200, 223, 251);
|
padding: 10px;
|
border: 1px solid #eee;
|
border-radius: 3px;
|
cursor: pointer;
|
&.act {
|
border-color: #0096fa;
|
}
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
