siyu_app/pages/course/video/living.vue

<template>
	<view>
		<view class="view">
			<video src="https://es.admin.506720281.com/mp4/1.mp4"
			:controls="false"
			:show-center-play-btn="false">
			</video>
		
			<view class="top es es-ac es-h-88" :style="'top:'+top+'px'">
				<image class="es-w-18 es-h-31 es-mr-20" src="/static/images/other/ret-white.png"></image>
				<view class="name-bg es-brc es-h-60 es es-ac">
					<view class="es-icon-57 es-br es-oh es-bc-red es es-ac es-pc">
						<image class="es-icon-57" src="/static/logo.png"></image>
					</view>
					<view class="es-c-white es-fw-500 es-fs-28 es-ml-11 es-mr-30" style="max-width: 6em;">名字</view>
					<image class="es-icon-27 es-mr-21" src="/static/images/other/video/add.png"></image>
				</view>
			</view>
			
			<view class="top es es-ac es-h-88" :style="'top:'+top+'px'" style="margin-top: 88rpx;">
				<view class="es-f1"></view>
				<view class="es">
					<image class="es-br es-icon-57 es-ml-10" src="/static/logo.png"></image>
					<image class="es-br es-icon-57 es-ml-10" src="/static/logo.png"></image>
					<image class="es-br es-icon-57 es-ml-10" src="/static/logo.png"></image>
				</view>
				<view class="es-w-70"></view>
				<view class="person es es-ac">
					<view class="num es-fs-28 es-fw-500 es es-ac es-pc es-c-white">188人</view>
				</view>
			</view>

			<view class="right">
				<view class="item">
					<view class="icon">
						<image src="/static/images/other/video/like.png"></image>
						<view class="es es-ac es-pc">
							<image class="es-w-42 es-h-40" src="/static/images/other/video/like2.png"></image>
						</view>
					</view>
					<view class="text">1.8万</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="/static/images/other/video/collect.png"></image>
						<view class="es es-ac es-pc">
							<image class="es-w-42 es-h-40" src="/static/images/other/video/collect2.png"></image>
						</view>
					</view>
					<view class="text">1.8万</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="/static/images/other/video/star.png"></image>
						<view class="es es-ac es-pc">
							<image class="es-w-42 es-h-40" src="/static/images/other/video/star2.png"></image>
						</view>
					</view>
					<view class="text">1.8万</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="/static/images/other/video/point.png"></image>
						<view class="es es-ac es-pc">
							<image class="es-w-52 es-h-14" src="/static/images/other/video/point2.png"></image>
						</view>
					</view>
					<view class="text">1.8万</view>
				</view>

				<view class="es-h-100"></view>
				<view class="es-h-100"></view>
				<view class="es-h-50"></view>
				<view class="es-auto-bottom"></view>
			</view>

			<view class="bottom">
				<view class="es">
					<view class="es-f1 es-mr-50 ipt es-br es-oh es es-ac">
						<view class="es-f1 es-ipt">
							<input placeholder="说点什么..." placeholder-class="es-c-white" class="es-c-white" />
						</view>
						<view class="emotion es-mr-25">
							<image src="/static/images/other/video/emotion.png"></image>
						</view>
					</view>

					<view class="item">
						<view class="icon">
							<image src="/static/images/other/video/car.png"></image>
							<view class="es es-ac es-pc">
								<image class="es-w-38 es-h-38" src="/static/images/other/video/car2.png"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="es-h-50"></view>
				<view class="es-h-50"></view>
				<view class="es-auto-bottom"></view>
			</view>

		</view>

	</view>
</template>

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

			uni.getSystemInfo({
				success: (res) => {
					this.top = res.safeArea.top;
				}
			});


		},
		methods: {


		}
	}
</script>

<style>
	.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;
	}

	.right .item {
		width: 90rpx;
		margin-top: 30rpx;
		padding-bottom: 10rpx;
		position: relative;
	}

	.right .item .icon {
		width: 90rpx;
		height: 90rpx;
	}

	.right .item .icon view {
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
	}

	.icon>image {
		width: 100%;
		height: 100%;
	}

	.text {
		text-align: center;
		color: white;
		font-size: 24rpx;
		margin-top: 12rpx;
		width: 100%;
	}


	.bottom {
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 30rpx;
		right: 30rpx;
		/* width: calc(100% - 60rpx); */
	}

	.bottom .item {
		position: relative;
	}

	.bottom .item .icon {
		width: 74rpx;
		height: 74rpx;
	}

	.bottom .item .icon view {
		width: 74rpx;
		height: 74rpx;
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
	}

	.bottom .ipt {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.emotion {
		width: 41rpx;
		height: 41rpx;
	}

	.emotion image {
		width: 100%;
		height: 100%;
	}

	.es-ipt,
	.es-ipt input {
		background-color: inherit;
	}





	.top {
		position: fixed;
		left: 0rpx;
		width: 100%;
		top: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.name-bg {
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 100rpx;
	}

	.person {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 88rpx;
	}

	.person .num {
		background-color: rgba(255, 100, 3, 1);
		height: 58rpx;
		border-radius: 100rpx 0 0 100rpx;
		padding: 0 30rpx;
	}
</style>