play-video-app/pages/play/index.vue

<template>
	<view class="play">
		<video-player :videoUrl="videoUrl"></video-player>
		<view class="anthologys_detail">
			<view class="anthology" @click="show = true">
				<view class="ant">
					<image :src="play_img" class="play"></image>
					<text class="ant-text">大夏第一赘婿(1/94)</text>
				</view>
				<view class="ant">
					<text>选集</text>
					<pv-icon name="icon-shangla" color='#fff'
						:customStyle="{ fontSize: '32rpx',marginLeft:'8rpx'}"></pv-icon>
				</view>
			</view>
			<view class="hot">
				<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '32rpx'}"></pv-icon>
				<text>12.8W</text>
			</view>

		</view>
		<u-popup :show="show" @close="close" @open="open" safeAreaInsetBottom :round="15">
			<view class="opera">
				<view class="opera-top">
					<view class="title">
						<image class="cover" :src="coverImg"></image>
						<view class="name">
							<text>大夏第一赘婿</text>
							<text>共94集·已完结</text>
						</view>
					</view>
					<view @click="close"><pv-icon name="icon-xiala"
							:customStyle="{ fontSize: '40rpx',fontWeight: 'bold'}"></pv-icon></view>

				</view>
				<view class="serice">
					<u-tabs :list="tabs" lineWidth="0" lineColor="#f56c6c" :activeStyle="{
                            color: '#62C5C6',
                            transform: 'scale(1)'
                        }" :inactiveStyle="{
                            color: '#000',
                            transform: 'scale(1)'
                        }" itemStyle="padding-left: 0px; padding-right: 20px; height: 34px;">
					</u-tabs>
					<view class="numbers">
						<view class="num">
							<view class="num_item num_item_select" v-for="(item,index) in list" :key="index">
								<text class="num_text">{{item}}</text>
								<view class="num_play">
									<view></view>
									<view></view>
									<view></view>
								</view>
								<view class="lock">
									<pv-icon name="icon-v-locked" color="#A37449"
										:customStyle="{ fontSize: '20rpx',fontWeight: 'bold'}"></pv-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import defaultConfig from '@/config/default.js'

	export default {
		data() {
			return {
				show: false,
				videoUrl: '/static/video/luo-sun.mp4', //路径
				play_img: defaultConfig.ossImgUrl + '/playVideo/video/ic_search.png',
				coverImg: 'https://obs-fanxing.obs.cn-east-3.myhuaweicloud.com/retail/main/img_bgtop.png',
				tabs: [{
					name: '1-50',
				}, {
					name: '51-94'
				}],
				list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
					28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
				]
			}
		},
		onReady:function(){},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	.play {
		width: 100%;
		height: 100%;

		.anthologys_detail {
			box-sizing: border-box;
			width: 100%;
			padding: 0 24rpx 0 34rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
			position: absolute;
			bottom: calc(70rpx + constant(safe-area-inset-bottom));
			bottom: calc(70rpx);
			z-index: 99;

			.anthology {
				flex-grow: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// height: 72rpx;
				background: #1A1A1A;
				border-radius: 72rpx;
				padding: 16rpx 20rpx;
				font-size: 32rpx;

				// width: 572rpx;
				.ant {
					display: flex;
					align-items: center;

					.ant-text {
						margin-left: 16rpx;
					}
				}

				.play {
					width: 40rpx;
					height: 40rpx;

				}
			}

			.hot {
				width: 150rpx;
				text-align: right;

				text {
					margin-left: 8rpx;
				}
			}
		}

		.opera {
			padding: 20rpx 30rpx;

			.opera-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.title {
					display: flex;

					.cover {
						width: 80rpx;
						height: 108rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.name {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						text:nth-child(1) {
							color: #000;
							font-size: 40rpx;
							font-weight: bold;
						}

						text:nth-child(2) {
							color: #999;
							font-size: 30rpx;
						}
					}
				}
			}

			.serice {
				overflow: hidden;

				.numbers {
					height: 600rpx;
					overflow: scroll;

					.num {
						display: flex;
						flex-wrap: wrap;

						.num_item {
							display: flex;
							justify-content: center;
							align-items: center;
							width: calc(20% - 20rpx);
							height: 110rpx;
							margin: 10rpx;
							background: #FAFAFA;
							color: #000;
							box-sizing: border-box;
						}

						.num_item_select {
							background: #E9F9F9;
							position: relative;

							.num_text {
								color: #62C5C6;
							}

							.num_play {
								position: absolute;
								left: 10rpx;
								bottom: 10rpx;
								display: flex;
								align-items: flex-end;

								view {
									width: 6rpx;
									background: #62C5C6;
									margin-right: 6rpx;
									border-radius: 6rpx;
								}

								view:nth-child(1) {
									height: 21rpx;
								}

								view:nth-child(2) {
									height: 16rpx;
								}

								view:nth-child(3) {
									height: 18rpx;
								}
							}

							.lock {
								position: absolute;
								top: 0;
								right: 0;
								width: 40rpx;
								height: 40rpx;
								background: #F9E2B7;
								border-radius: 0rpx 12rpx 0rpx 12rpx;
								// text-align: center;
								// line-height: 40rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}

					}

				}
			}
		}
	}
</style>