tij

App.vue

@@ -75,8 +75,5 @@
 </script>
 
 <style>
-	/*每个页面公共css */
-	/* #ifndef APP-NVUE */
-	@import url("./static/font/iconfont.css");
-	/* #endif */
+	
 </style>

components/leve-view/leve-view.vue

@@ -0,0 +1,95 @@
+<template>
+	<view class="level">
+		<view class="leve_left">
+			<view class="level_left_txt">
+				{{currentLevelTxt}}
+			</view>
+			<view class="level_progress">
+				<view class="leve_progress_" :style="{width:currentLevel/nextLevel*300+'rpx'}">
+					
+				</view>
+				<view class="leve_progress_bg">
+					
+				</view>
+			</view>
+			<view class="level_right_txt">
+				{{nextLevelTxt}}
+			</view>
+		</view>
+		<view class="level_right">
+			成长值 {{currentLevel}}/{{nextLevel}}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"leve-view",
+		props:{
+			currentLevel:[Number,String],
+			nextLevel:[Number,String],
+			currentLevelTxt:String,
+			nextLevelTxt:String,
+		},
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+   .level{
+	   display: flex;
+	   align-items: center;
+	   justify-content: space-between;
+	   margin-top: 14px;
+	   .leve_left{
+		   display: flex;
+		   align-items: center;
+		   .level_right_txt,
+		   .level_left_txt{
+			   height: 30rpx;
+			   background: #BEA991;
+			   border-radius: 8rpx;
+			   font-size: 18rpx;
+			   font-family: FontName, FontName-Regular;
+			   font-weight: 400;
+			   text-align: center;
+			   color: #ffffff;
+			   padding: 0rpx 4rpx;
+		   }
+		   .level_right_txt{
+			   background: #A38462;
+		   }
+		   .level_progress{
+			   width: 300rpx;
+			   height: 10rpx;
+			   position: relative;
+			   
+			   .leve_progress_{
+				   position: absolute;
+				   height: 10rpx;
+				   left: 0;
+				   top: 0;
+				   background: linear-gradient(270deg,#ffffff, #bea991 70%);
+				   z-index: 11;
+			   }
+			
+			   .leve_progress_bg{
+				   width: 100%;
+				   height: 100%;
+				   background: #A38462;
+			   }
+		   }
+	   }
+	   .level_right{
+		   font-size: 20rpx;
+		   font-family: Verdana, Verdana-Regular;
+		   font-weight: 400;
+		   text-align: left;
+		   color: #ffffff;
+	   }
+   }
+</style>

pages/homePage/homePage.vue

@@ -1,6 +1,7 @@
 <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="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>
@@ -16,26 +17,34 @@
 						</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>
@@ -48,8 +57,21 @@
 	.content {
 		width: 100%;
 		height: 100%;
-		background-color: #F5F5F7;
-		position: relative;
+		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%;
@@ -73,7 +95,6 @@
 			.title {
 				margin-top: 96rpx;
 				font-size: 44rpx;
-				font-family: Verdana, Verdana-Bold;
 				font-weight: 700;
 				text-align: center;
 				color: #ffffff;
@@ -105,7 +126,8 @@
 					display: flex;
 					justify-content: space-between;
 					flex-wrap: nowrap;
-					align-items: center;
+					align-items: center;
+					margin-top: 5rpx;
 					
 					.level_icon {
 						width: 37rpx;
@@ -161,5 +183,12 @@
 			
 		}
 		
+		.content_body{
+			border-radius: 20rpx 20rpx 0rpx 0rpx;
+			height: calc(100% - 470rpx);
+			margin-top: -24rpx;
+			z-index: 102;
+			position: relative;
+		}
 	}
 </style>