|
|
@@ -1,28 +1,47 @@
|
|
|
<template>
|
|
|
<view class="video-container">
|
|
|
- <view class="video-list">
|
|
|
- <view class="video-item">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <van-overlay :show="showOverlay" @tap="onClickHideOverlay">
|
|
|
- <view class="overlay-wrapper">
|
|
|
- <video v-if="videoUrl" :src="videoUrl" controls autoplay loop @tap.stop></video>
|
|
|
+ <nav-bar title="精彩视频" @init="onInitNavbar"></nav-bar>
|
|
|
+ <u-scroll-view :tabbar-conflict="true">
|
|
|
+ <view class="main-container">
|
|
|
+ <view class="video-list">
|
|
|
+ <view class="video-item" v-for="(item, index) in videoList" :key="index">
|
|
|
+ <image :mode="imageMode" :src="item.cover_url" class="cover-img" />
|
|
|
+ <view class="video-play" @tap="videoPlay(item)">
|
|
|
+ <view class="iconfont icon-playcircle"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <van-overlay :show="showOverlay" @tap="onClickHideOverlay">
|
|
|
+ <view class="overlay-wrapper">
|
|
|
+ <video v-if="videoUrl" :src="videoUrl" controls autoplay loop @tap.stop></video>
|
|
|
+ </view>
|
|
|
+ </van-overlay>
|
|
|
</view>
|
|
|
- </van-overlay>
|
|
|
+ </u-scroll-view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { getDashboardInfo } from '@/api'
|
|
|
+ import NavBar from '@/components/layout/nav-bar'
|
|
|
+ import UScrollView from '@/components/common/u-scroll-view'
|
|
|
+ import VanOverlay from '@/wxcomponents/vant/overlay/index'
|
|
|
+ import {
|
|
|
+ getDashboardInfo
|
|
|
+ } from '@/api'
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- },
|
|
|
+ components: { NavBar, UScrollView, VanOverlay },
|
|
|
data() {
|
|
|
return {
|
|
|
showOverlay: false,
|
|
|
- videoList: []
|
|
|
+ videoList: [],
|
|
|
+ videoUrl: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ imageMode: {
|
|
|
+ type: String,
|
|
|
+ default: 'aspectFill' // 参考https://zh.uniapp.dcloud.io/component/image.html
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -35,15 +54,67 @@
|
|
|
getVideoData() {
|
|
|
getDashboardInfo('', process.env.CONFERENCE_WEBSITE).then(res => {
|
|
|
this.videoList = res.data.module3.video
|
|
|
- console.log(this.videoList)
|
|
|
})
|
|
|
},
|
|
|
+ videoPlay(item) {
|
|
|
+ this.videoUrl = item.url
|
|
|
+ this.showOverlay = true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .video-container{
|
|
|
+ .video-container {
|
|
|
+ .video-list {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ grid-gap: 30rpx;
|
|
|
+
|
|
|
+ .video-item {
|
|
|
+ width: 100%;
|
|
|
+ aspect-ratio: 5/3;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .cover-img {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-play {
|
|
|
+ @include display-flex-center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: auto;
|
|
|
+ background-color: rgba(229, 117, 25, 0.5);
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .overlay-wrapper {
|
|
|
+ @include display-flex-center;
|
|
|
+ height: 100%;
|
|
|
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
xiaokuang