h5-elab-open-ownerUnion/pages/homePage/homePage.vue

<template>
	<view class="content">
		<view class="topSection" style="background: url('https://dm.static.elab-plus.com/yezhu/h5/backgroundImg.png') center/100% 100% no-repeat;">
			<view class="liveContent">
				<view class="backDiv"></view>
				<view class="title">分享好房 · 躺平赚钱</view>
				<view class="subTitle">新手赚钱帮助 ></view>
				<view class="levelDiv" style="background: url('https://dm.static.elab-plus.com/yezhu/h5/icon_line_back.png') center/100% 100% no-repeat;">
					<view class="level_top">
						<image class="level_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_Level.png" mode=""></image>
						<view class="level_text">Lv5</view>
						<view class="level_des">/达到 5000 收益可升级</view>
						<view class="level_update">
							<text>升级攻略</text>
							<image class="level_right_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_right.png" mode=""></image>
						</view>
					</view>
					<view class="level_bottom">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {

		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100vw;
		height: 100vh;
	}
	.content {
		width: 100%;
		height: 100%;
		background-color: #F5F5F7;
		position: relative;
		
		.liveContent {
			width: 100%;
			height: 470rpx;
			z-index: 100;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			
			.backDiv {
				top: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba($color: #000000, $alpha: 0.1);
				z-index: 1;
			}
			
			.title {
				margin-top: 96rpx;
				font-size: 44rpx;
				font-family: Verdana, Verdana-Bold;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				z-index: 2;
			}
			
			.subTitle {
				font-size: 28rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: left;
				color: #ffffff;
				margin-top: 20rpx;
				z-index: 2;
			}
			
			.levelDiv {
				margin-top: 82rpx;
				width: calc(100% - 60rpx);
				height: 152rpx;
				z-index: 2;
				display: flex;
				flex-direction: column;
				padding: 25rpx 30rpx;
				box-sizing: border-box;
				
				.level_top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: nowrap;
					align-items: center;
					
					.level_icon {
						width: 37rpx;
						min-width: 37rpx;
						max-width: 37rpx;
						height: 35rpx;
						margin-right: 13rpx;
						margin-top: -5rpx;
					}
					
					.level_text {
						font-size: 48rpx;
						font-family: FontName, FontName-Regular;
						font-weight: 500;
						text-align: left;
						font-style: oblique;
						color: #f5c8a8;
						line-height: 40rpx;
						letter-spacing: 1.92rpx;
						margin-right: 8rpx;
						margin-top: -7rpx;
					}
					
					.level_des {
						font-size: 22rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: left;
						color: #f5c8a8;
						white-space: nowrap;
						flex-grow: 1;
					}
					
					.level_update {
						font-size: 24rpx;
						font-family: Verdana, Verdana-Bold;
						font-weight: 700;
						text-align: right;
						color: #f5c8a8;
						letter-spacing: 0.96rpx;
						display: flex;
						align-items: center;
						
						.level_right_icon {
							margin-left: 8rpx;
							width: 6rpx;
							height: 7rpx;
						}
					}
				}
				
			}
			
		}
		
	}
</style>