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

<template>
	<view class="content">
		<view class="topSection">
			<image class="bg_top" src="https://dm.static.elab-plus.com/yezhu/h5/backgroundImg.png" mode=""></image>
			<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">
						<levelView currentLevel='3500' nextLevel='5000' currentLevelTxt='lv5' nextLevelTxt='lv6'></levelView>
					</view>
				</view>
			</view>
		</view>
	    <view class="content_body" :style="{background:color4}">
			
		</view>
	</view>
</template>

<script>
	import levelView from '@/components/leve-view/leve-view.vue';
	let app = getApp();
	export default {
		data() {
           return{
			   color4:'#F5F5F7'
		   }
		},
		mounted() {
          this.color4 = app.globalData.color4;
		},
		methods: {

		},
		components:{
			levelView
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100vw;
		height: 100vh;
	}
	.content {
		width: 100%;
		height: 100%;
		position: relative;
		
		.topSection{
			position: relative;
			z-index: 100;
		}
		
		.bg_top{
			width: 100%;
			height: 470rpx;
			position: absolute;
			top:0;
			left:0;
			z-index: 100;
		}
		
		.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-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;
					margin-top: 5rpx;
					
					.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;
						}
					}
				}
				
			}
			
		}
		
		.content_body{
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: calc(100% - 470rpx);
			margin-top: -24rpx;
			z-index: 102;
			position: relative;
		}
	}
</style>