siyu_app/pages/course/video/video.vue

<template>
	<view class="view">
		<video src="https://es.admin.506720281.com/mp4/1.mp4"
			:controls="false"
			:show-center-play-btn="false"
		></video>
		
		
		<view class="right">
			<view class="item">
				<view class="logo es-br es-oh">
					<image src="/static/logo.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="/static/images/other/video/icon-1.png"></image>
				</view>
				<view class="text">1.8万</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="/static/images/other/video/icon-2.png"></image>
				</view>
				<view class="text">3255</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="/static/images/other/video/icon-3.png"></image>
				</view>
				<view class="text">1.1万</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="/static/images/other/video/icon-4.png"></image>
				</view>
				<view class="text">1265</view>
			</view>
							
			<view class="es-h-100"></view>
			<view class="es-auto-bottom"></view>
		</view>
		
		<view class="left">
			<view class="name es-h-74 es es-ac">
				<view class="bg">
					<image src="/static/images/other/video/bg.png"></image>
				</view>
				<image class="rank-icon" src="/static/images/other/video/rank.png"></image>
				<view class="rank-text es-fs-26 es-fw-500 es-c-white">精选热销榜·第二名</view>				
				<view class="es-w-30"></view>
			</view>
			<view class="goods">
				<view class="icon">
					<image src="/static/logo.png"></image>
				</view>
				<view class="es-omit es-fw es-fs-30 es-mt-19">御君方蜂胶胶囊御君方蜂胶胶囊</view>
			</view>
			
			<view class="es-h-100"></view>
			<view class="es-auto-bottom"></view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				
			}
		},
		onLoad(options) {
			
			
		},
		methods: {
			

		}
	}
</script>

<style>
	.view,.right,.left{
		position: absolute;
	}
	
	.view{
		width: 100%;
		height: 100%;
		/* position: fixed; */
		left:0;top:0;
	}
	.view video{
		width: 100%;
		height: 100%;
	}
	.right{
		/* position: fixed; */
		z-index: 1;
		right:30rpx;
		bottom:0rpx;
	}
	
	.left{
		/* position: fixed; */
		left:30rpx;
		bottom:0;
	}
	
	.right .item{
		width: 100rpx;
		margin-top: 30rpx;
		padding-bottom: 10rpx;
		border-radius: 100rpx;
	}
	.right .icon{
		width: 80rpx;
		height: 80rpx;
		margin-left: 10rpx;
	}
	image{
		width: 100%;
		height: 100%;
	}
	.right .text{
		color:white;
		text-align: center;
		font-size: 22rpx;
		margin-top: 10rpx;
	}
	.right .logo{
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
	}
	
	

	
	.left .name{
		position: relative;
		color: white;
	}
	.left .rank-icon{
		width: 74rpx;
		height: 74rpx;
		z-index: 1;
	}
	.left .rank-text{
		z-index: 1;
	}
	.bg{
		position: absolute;
		left:0;top:0;
		width: 100%;
		height: 100%;
	}
	.goods{
		width: 290rpx;
		background-color: rgba(255,255,255,0.7);
		padding:20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	.goods .icon{
		/* background-color: white; */
		border-radius: 34rpx;
		overflow: hidden;
		width: 250rpx;
		height: 250rpx;
	}
	.goods .icon image{
		width: 100%;
		height: 100%;
	}
	
	
	
</style>