xiaokuang 4 tháng trước cách đây
mục cha
commit
0c1b8e47e5
2 tập tin đã thay đổi với 67 bổ sung58 xóa
  1. 0 4
      components/common/u-swiper/index.vue
  2. 67 54
      pages/video/index.vue

+ 0 - 4
components/common/u-swiper/index.vue

@@ -176,10 +176,6 @@
 						this.logoList[i].push(this.data[k])
 					}
 				}
-        console.log('-------------------')
-        console.log(this.data)
-        console.log(this.logoList,this.useComponentName)
-        console.log('-------------------')
 			}
 		}
 	}

+ 67 - 54
pages/video/index.vue

@@ -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>