<template>
|
<div class="event-video-content">
|
<div class="video-player">
|
<video :src="curVideo.ClipPath" controls></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="item.Cover" alt />
|
<div class="time">{{item.EventTime}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
eventVideoArr: {
|
type: Array,
|
default: () => { return [] }
|
}
|
},
|
data () {
|
return {
|
curVideo: {},
|
}
|
},
|
watch: {
|
eventVideoArr (n, o) {
|
if (n.length) {
|
this.curVideo = n[0]
|
}
|
}
|
},
|
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 (data) {
|
this.curVideo = data;
|
}
|
}
|
}
|
</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: aquamarine;
|
}
|
}
|
.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: 112.5px;
|
margin: 10px 40px;
|
//background: rgb(200, 223, 251);
|
padding: 10px;
|
border: 1px solid #eee;
|
border-radius: 3px;
|
&.act {
|
border-color: #0096fa;
|
}
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
