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 class="content_beginner_guide">
				<view class="title">
					<text class="title_txt">- 新手引导 -</text>
					<view class="title_right">
						<text class="title_right_txt">收起</text>
						<image class="title_right_cion" src="https://dm.static.elab-plus.com/yezhu/icon_shouqi.png" mode=""></image>
					</view>
					
				</view>
				<view class="guide_content">
					<view class="item_guide">
						<image class="guide_img" src="https://dm.static.elab-plus.com/yezhu/icon_yezhu.png" mode=""></image>
						<text class="guide_title">注册业主</text>
						<text class="guide_desc">业主注册审核\n实时等级升级</text>
					</view>
					<image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode=""></image>
					<view class="item_guide">
						<image class="guide_img" style="width: 72rpx;height: 72rpx;margin-top: 5rpx;" src="https://dm.static.elab-plus.com/yezhu/icon_pyq.png" mode=""></image>
						<text class="guide_title">分享项目</text>
						<text class="guide_desc">分享到朋友圈\n自动计算收益</text>
					</view>
					<image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode=""></image>
					<view class="item_guide">
						<image class="guide_img" style="width: 58rpx;height: 68rpx;margin-top: 9rpx;" src="https://dm.static.elab-plus.com/yezhu/icon_yz_money.png" mode=""></image>
						<text class="guide_title">提现到微信</text>
						<text class="guide_desc">实时查看收益\n快速提现到账</text>
					</view>
				</view>
				
			</view>
		    <view class="content_tab">
		    	<view class="tab_item">
		    		<image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_zcyz.png" mode=""></image>
		    		<text class="txt_tab">注册业主</text>
		    	</view>
		    	<view class="tab_item">
		    		<image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_shouyi.png" mode=""></image>
		    		<text class="txt_tab">收益排行榜</text>
		    	</view>
		    	<view class="tab_item">
		    		<image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_report.png" mode=""></image>
		    		<text class="txt_tab">效果报表</text>
		    	</view>
		    	<view class="tab_item">
		    		<image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_myinfo.png" mode=""></image>
		    		<text class="txt_tab">我的信息</text>
		    	</view>
		    </view>
		    <view class="content_tuiguang">
				<view class="content_tuiguang_city">
					<text class="city_num">4个</text>
					<text class="city_num_desc">推广任务</text>
					<view class="city_list">
						<text class="city_name">城市</text>
						<image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png" mode=""></image>
					</view>
					
				</view>
				<view class="content_tuiguang_money">
					<text class="money_num">￥50,176.00</text>
					<text class="money_num_des">剩余任务金额</text>
					<view class="money_list">
						<text class="money_name">类型</text>
						<image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png" mode=""></image>
					</view>
					<image class="money_bg" src="https://dm.static.elab-plus.com/yezhu/icon_money_bg.png" mode=""></image>
				</view>
			</view>
		    <view class="content_list">
				<view class="content_title">
					<view class="content_title_poi">
					</view>
					任务列表
				</view>
				<view class="content_hongbao">
					<view class="hongbao_left">
						<image class="icon_hongbao" src="https://dm.static.elab-plus.com/yezhu/icon_hongbao.png" mode=""></image>
						<view class="hongbao_left_info">
							<text class="hongbao_title">邀请好友注册</text>
							<text class="hongbao_money">完成邀请，可获得 ¥1/人</text>
						</view>
					</view>
					<view class="hongbao_right">
						邀请好友
					</view>
				</view>
				
				<view class="list_item">
					<image class="house_img" src="https://dm.static.elab-plus.com/yezhu/icon_house_test.png" mode=""></image>
					<view class="item_content">
						<text class="house_name">南京青龙山项目</text>
						<text class="house_hk">获客 ¥2/人、获电 ¥5/人</text>
						<view class="house_address">
							<image src="https://dm.static.elab-plus.com/yezhu/icon_location.png" mode=""></image>
							南京 · 4.5万/m² · 住宅
						</view>
						<view class="house_num">
							<image src="https://dm.static.elab-plus.com/yezhu/icon_family.png" mode=""></image>
							三口之家
						</view>
						<text class="house_desc">11月6日前推广赚佣金</text>
					</view>
					<view class="item_share">
						<image class="icon_share" src="https://dm.static.elab-plus.com/yezhu/icon_small_share.png" mode=""></image>
						<text class="icon_text">分享</text>
					</view>
					<view class="item_bg"></view>
				</view>
			</view>
			
			
		</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;
			padding: 1rpx;
			
			.content_beginner_guide{
				height: 354rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				margin-top: 40rpx;
				background: #ffffff;
				border-radius: 16rpx;
				box-sizing: border-box;
				
				.title{
					width: 100%;
					position: relative;
					height: 110rpx;
					.title_txt{
						font-size: 32rpx;
						font-family: FontName, FontName-Regular;
						font-weight: 400;
						text-align: left;
						color: #b1b1b1;
						font-style: italic;
						position: absolute;
						left: 50%;
						top: 30rpx;
						transform: translateX(-50%);
					}
					.title_right{
						position: absolute;
						right: 20rpx;
						top: 40rpx;
						display: flex;
						align-items: center;
						.title_right_txt{
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: right;
							color: #b1b1b1;
						}
						.title_right_cion{
							width: 10rpx;
							height: 6rpx;
							margin-left: 10rpx;
						}
					}
					
					
				}
				
				.guide_content{
					display: flex;
					padding-left: 40rpx;
					padding-right: 40rpx;
					box-sizing: border-box;
					justify-content: space-between;
				
					.item_guide{
						display: flex;
						flex-direction: column;
						align-items: center;
						.guide_img{
							width: 58rpx;
							height: 74rpx;
							margin-bottom: 17rpx;
						}
						.guide_title{
							font-size: 26rpx;
							font-family: Verdana, Verdana-Bold;
							font-weight: 700;
							text-align: center;
							color: #2c2c2c;
							margin-bottom: 8rpx;
						}
						.guide_desc{
							font-size: 22rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: center;
							color: #b1b1b1;
						}
					}
				    .icon_guide{
						width: 48rpx;
						height: 32rpx;
						margin-top: 20rpx;
					}
				}
			    
			}
			.content_tab{
				display: flex;
				box-sizing: border-box;
				height: 180rpx;
				background: #ffffff;
				border-radius: 16rpx;
				margin-top: 14rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				justify-content: space-between;
				.tab_item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.icon_tab{
						width: 96rpx;
						height: 96rpx;
					}
					.txt_tab{
						font-size: 24rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: center;
						color: #262626;
						margin-top: 2rpx;
					}
				}
			}
		    .content_tuiguang{
				height: 220rpx;
				display: flex;
				box-sizing: border-box;
				background: #ffffff;
				border-radius: 16rpx;
				margin-top: 14rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				justify-content: space-between;
				position: relative;
				
				.content_tuiguang_city{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 50%;
					.city_num{
						font-size: 40rpx;
						font-family: DIN Alternate, DIN Alternate-Bold;
						font-weight: 700;
						text-align: center;
						color: #262626;
					
					}
					.city_num_desc{
						font-size: 24rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: center;
						color: #b1b1b1;
					}
					.city_list{
						display: flex;
						justify-content: center;
						 margin-top: 52rpx;
						 align-items: center;
						.city_name{
							font-size: 26rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #262626;
						}
						.city_more{
							width: 26rpx;
							height: 26rpx;
							margin-left: 8rpx;
						}
					}
				}
			     .content_tuiguang_money{
					 display: flex;
					 flex-direction: column;
					 justify-content: center;
					 align-items: center;
					 width: 50%;
					 
					 .money_num{
						 font-size: 40rpx;
						 font-family: DIN Alternate, DIN Alternate-Bold;
						 font-weight: 700;
						 text-align: center;
						 color: #fd8f3c;
					 }
					 .money_num_des{
						 font-size: 24rpx;
						 font-family: Verdana, Verdana-Regular;
						 font-weight: 400;
						 text-align: center;
						 color: #b1b1b1;
					 }
					 .money_list{
						 display: flex;
						 justify-content: center;
						 margin-top: 52rpx;
						 align-items: center;
						 .money_name{
						 	font-size: 26rpx;
						 	font-family: Verdana, Verdana-Regular;
						 	font-weight: 400;
						 	text-align: left;
						 	color: #262626;
						 }
						 .money_more{
						 	width: 26rpx;
						 	height: 26rpx;
							margin-left: 8rpx;
						 }
					 }
					 .money_bg{
						 position: absolute;
						 right: 0rpx;
						 top: 0;
						 width: 220rpx;
						 height: 220rpx;
					 }
				 }
			}
		    
			.content_list{
				margin-top: 60rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
			    padding-bottom: 50rpx;
				.content_title{
					display: flex;
					font-size: 32rpx;
					font-family: Verdana, Verdana-Bold;
					font-weight: 700;
					text-align: left;
					color: #262626;
					align-items: center;
					.content_title_poi{
						width: 8rpx;
						height: 12rpx;
						background: #f07423;
						border-radius: 2rpx;
						margin-right: 8rpx;
					}
				}
				.content_hongbao{
					margin-top: 20rpx;
					height: 140rpx;
					background: linear-gradient(108deg,#ffb55f 9%, #f87523 96%);
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.hongbao_left{
						display: flex;
						margin-left: 26rpx;
						.icon_hongbao{
							width: 60rpx;
							height: 80rpx;
							margin-right: 20rpx;
						}
						.hongbao_left_info{
							display: flex;
							flex-direction: column;
							.hongbao_title{
								font-size: 30rpx;
								font-family: Verdana, Verdana-Bold;
								font-weight: 700;
								text-align: left;
								color: #ffffff;
							}
							.hongbao_money{
								font-size: 24rpx;
								font-family: Verdana, Verdana-Regular;
								font-weight: 400;
								text-align: left;
								color: #ffead8;
							}
						}
						
					}
					
					.hongbao_right{
						width: 140rpx;
						height: 56rpx;
						line-height: 56rpx;
						background: #ffffff;
						border-radius: 12rpx;
						font-size: 24rpx;
						font-family: Verdana, Verdana-Bold;
						font-weight: 700;
						text-align: center;
						color: #f07423;
						margin-right: 20rpx;
					}
				}
				
				.list_item{
					width: 100%;
					height: 280rpx;
					border-radius: 16rpx;
					display: flex;
					position: relative;
					margin-top: 20rpx;
					.house_img{
						width: 200rpx;
						height: 240rpx;
						z-index: 11;
						margin-top: 20rpx;
					}
					.item_content{
						display: flex;
						flex-direction: column;
						margin-left: 50rpx;
						z-index: 11;
						
						.house_name{
							font-size: 30rpx;
							font-family: Verdana, Verdana-Bold;
							font-weight: 700;
							text-align: left;
							color: #262626;
							margin-top: 20rpx;
						}
						.house_hk{
							font-size: 26rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #fd8f3c;
							margin-top: 8rpx;
						}
						.house_address{
							display: flex;
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #b1b1b1;
							margin-top: 16rpx;
							align-items: center;
							image{
								width: 20rpx;
								height: 28rpx;
								margin-right: 8rpx;
							}
						}
						.house_num{
							display: flex;
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #b1b1b1;
							margin-top: 12rpx;
							align-items: center;
							image{
								width: 24rpx;
								height: 26rpx;
								margin-right: 8rpx;
							}
						}
						.house_desc{
							margin-top: 24rpx;
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #b1b1b1;
						}
					}
					.item_share{
						z-index: 11;
						display: flex;
						flex-direction: column;
						width: 70rpx;
						height: 100rpx;
						background: #f07423;
						border-radius: 12rpx;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						justify-content: center;
						align-items: center;
						.icon_share{
							width: 32rpx;
							height: 32rpx;
							margin-bottom: 6rpx;
						}
						.icon_text{
							font-size: 24rpx;
							font-family: Verdana, Verdana-Bold;
							font-weight: 700;
							text-align: center;
							color: #ffffff;
						}
					}
					.item_bg{
						position: absolute;
						left: 0;
						top: 0;
						width: 95%;
						height: 100%;
						background-color: #FFFFFF;
						border-radius: 16rpx;
						z-index: 10;
					}
				}
			}
		}
	}
</style>