|
@@ -1,26 +1,31 @@
|
|
|
<template>
|
|
|
- <page-layout class="video-container">
|
|
|
- <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>
|
|
|
- </u-scroll-view>
|
|
|
- <float-button></float-button>
|
|
|
- <van-dialog id="van-dialog" />
|
|
|
- </page-layout>
|
|
|
+ <page-layout class="video-container">
|
|
|
+ <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">
|
|
|
+ <view class="video-box">
|
|
|
+ <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 class="video-title">
|
|
|
+ {{item.title}}
|
|
|
+ </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>
|
|
|
+ </u-scroll-view>
|
|
|
+ <float-button></float-button>
|
|
|
+ <van-dialog id="van-dialog" />
|
|
|
+ </page-layout>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -31,11 +36,11 @@
|
|
|
import {
|
|
|
getDashboardInfo
|
|
|
} from '@/api'
|
|
|
- import PageLayout from "@/components/layout/page-layout";
|
|
|
+ import PageLayout from "@/components/layout/page-layout";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
- PageLayout,
|
|
|
+ PageLayout,
|
|
|
NavBar,
|
|
|
UScrollView,
|
|
|
VanOverlay,
|
|
@@ -64,6 +69,7 @@
|
|
|
getVideoData() {
|
|
|
getDashboardInfo('', process.env.CONFERENCE_WEBSITE).then(res => {
|
|
|
this.videoList = res.data.module3.video
|
|
|
+ console.log(this.videoList);
|
|
|
})
|
|
|
},
|
|
|
videoPlay(item) {
|
|
@@ -79,41 +85,48 @@
|
|
|
.video-list {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr;
|
|
|
- grid-gap: 30rpx;
|
|
|
+ grid-gap: 40rpx;
|
|
|
|
|
|
.video-item {
|
|
|
- width: 100%;
|
|
|
- aspect-ratio: 5/3;
|
|
|
- position: relative;
|
|
|
- border-radius: 14rpx;
|
|
|
- overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ grid-gap: 20rpx;
|
|
|
|
|
|
- .cover-img {
|
|
|
- position: absolute;
|
|
|
+ .video-box {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ .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;
|
|
|
+ .iconfont {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 50rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -128,4 +141,4 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|