siyu_app/components/es-living-pop/es-living-pop.vue

<template>
	<view style="width: 100%;">

		<!-- #ifndef APP-PLUS -->
		<view class="top es es-ac es-h-88" :style="'top:'+top+'px'">
			<image class="es-w-18 es-h-31 es-mr-20 es-ml-30" src="/static/images/other/ret-white.png"></image>
			<view class="name-bg es-brc es-h-60 es es-ac es-br">
				<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;"><text
						class="es-c-white">名字</text></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-80"></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>
		<!-- #endif -->

		<view class="right" :style="'padding-bottom: '+bottom+'px;'">
			<view class="es-w-95 es es-ver es-ac es-pc es-mt-25">
				<view class="es-icon-95 es es-ac es-pc">
					<image class="es-icon-95 icon-bg" src="/static/images/other/video/like.png"></image>
					<image class="es-icon-42" src="/static/images/other/video/like2.png"></image>
				</view>
				<view class="es-mt-10">
					<text class="es-c-white es-fw-500 es-fs-24">1.8万</text>
				</view>
			</view>
			<view class="es-w-95 es es-ver es-ac es-pc es-mt-25">
				<view class="es-icon-95 es es-ac es-pc">
					<image class="es-icon-95 icon-bg" src="/static/images/other/video/collect.png"></image>
					<image class="es-icon-42" src="/static/images/other/video/collect2.png"></image>
				</view>
				<view class="es-mt-10">
					<text class="es-c-white es-fw-500 es-fs-24">1.8万</text>
				</view>
			</view>
			<view class="es-w-95 es es-ver es-ac es-pc es-mt-25">
				<view class="es-icon-95 es es-ac es-pc">
					<image class="es-icon-95 icon-bg" src="/static/images/other/video/star.png"></image>
					<image class="es-icon-42" src="/static/images/other/video/star2.png"></image>
				</view>
				<view class="es-mt-10">
					<text class="es-c-white es-fw-500 es-fs-24">1.8万</text>
				</view>
			</view>
			<view class="es-w-95 es es-ver es-ac es-pc es-mt-25">
				<view class="es-icon-95 es es-ac es-pc">
					<image class="es-icon-95 icon-bg" src="/static/images/other/video/point.png"></image>
					<image class="es-w-52 es-h-14" src="/static/images/other/video/point2.png"></image>
				</view>
				<view class="es-mt-10">
					<text class="es-c-white es-fw-500 es-fs-24">{{w}}</text>
				</view>
			</view>
			<view class="es-h-100"></view>
			<view class="es-h-100"></view>
		</view>

		<view class="bottom">
			<view class="es es-ac">
				<view class="es-br ipt es es-ac" :style="'width:'+w+'px'">
					<text class="es-fs-24 es-fw-500 es-ml-31" style="color: rgba(255,255,255,0.15);">说点什么...</text>
					<view class="es-h-74 es es-ac es-pc" style="position: absolute;right: 31rpx;top:0;">
						<image src="/static/images/other/video/emotion.png" class="es-icon-42"></image>
					</view>
				</view>
				<view class="es-w-95 es-h-95 es es-ver es-ac es-pc es-ml-37">
					<view class="es-icon-74 es es-ac es-pc">
						<image class="es-icon-74 icon-bg" src="/static/images/other/video/car.png"></image>
						<image class="es-icon-38" src="/static/images/other/video/car2.png"></image>
					</view>
				</view>
			</view>
			<view class="" :style="'height:'+bottom+'px'"></view>
		</view>
		<view class="es-w-100" id="block"></view>
		
	</view>
</template>

<script>
	export default {
		name: "es-living-pop",
		data() {
			return {
				top: 0,
				bottom: 40,
				w: 0,
			};
		},
		created: function() {
			
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.safeArea.top;
				}
			});

			setTimeout(e => {
				
				// let px = r1.width / 100; //1r像素占用宽度
				let px = uni.getSystemInfoSync().screenWidth/750;
				this.w = parseInt(uni.getSystemInfoSync().screenWidth - px * (30 + 30 + 95 + 37));
				
			}, 50)


		}
	}
</script>

<style>
	.top{
		position: absolute;
		left:0;
		top:0;
		width:100%;
	}
	
	.right,.bottom {
		position: absolute;
		bottom: 80rpx;
		/* padding-bottom: env(safe-area-inset-bottom); */
	}

	.right {
		right: 30rpx;
	}

	.icon-bg {
		position: absolute;
		left: 0;
		top: 0;
	}

	.bottom {
		width: 100%;
		left: 30rpx;
	}

	.bottom .ipt {
		height: 74rpx;
		border-radius: 100rpx;
		background-color: rgba(0,0,0,0.5);
	}


	.person {
		position: absolute;
		right: 0;
		height: 88rpx;
	}
	
	.person .num {
		background-color: rgba(255, 100, 3, 1);
		height: 58rpx;
		border-radius: 100rpx 0 0 100rpx;
		padding: 0 20rpx;
	} 
	
	.es-icon-42{
		width: 42rpx !important;
		height: 42rpx !important;
	}
	.es-icon-38{
		width: 38rpx !important;
		height: 38rpx !important;
	}
	
	.es-w-52{
		width: 52rpx !important;
	}
	.es-h-14{
		height: 14rpx !important;
	}
	
	image:nth-child(2){
		z-index: 1;
	}
	
</style>