UI

pages/revenueRankingPage/revenueRankingPage.vue

@@ -4,15 +4,15 @@
 			收益排行 TOP10
 		</view>
 		<view class="rank_tab">
-			<view class="tab_item">
+			<view class="tab_item" @click="tab(1)" :class="{active1:currentTab==1}" :style="{background:currentTab==1?color1:''}">
 				总量
 			</view>
 			<view class="tab_line"></view>
-			<view class="tab_item">
+			<view class="tab_item" @click="tab(2)"  :class="{active2:currentTab==2}" :style="{background:currentTab==2?color1:''}">
 				本月
 			</view>
 			<view class="tab_line"></view>
-			<view class="tab_item">
+			<view class="tab_item" @click="tab(3)"  :class="{active3:currentTab==3}" :style="{background:currentTab==3?color1:''}">
 				本日
 			</view>
 		</view>
@@ -31,45 +31,82 @@
 					累计收益(元)
 				</view>
 			</view>
-			<view class="rank_item">
+			
+			<view class="rank_item" v-for="(item,index) in rankingList" :key='index'>
 				<view class="rank_item_name" style="width: 20%;">
-					1
+					<image class="icon" v-if="index==0" src="https://dm.static.elab-plus.com/yezhu/icon_first.png" mode=""></image>
+					<image class="icon" v-if="index==1"  src="https://dm.static.elab-plus.com/yezhu/icon_twice.png" mode=""></image>
+					<image class="icon" v-if="index==2"  src="https://dm.static.elab-plus.com/yezhu/icon_thrid.png" mode=""></image>
+				    <text  v-if="index!=0&&index!=1&&index!=2" >{{index+1}}</text>
 				</view>
-				<view class="rank_item_name" style="width: 30%;">
+				<view class="rank_item_name" style="width: 30%;" :style="{color:(index==0||index==1||index==2)?color1:'auto'}">
 					淘房**神
 				</view>
 				<view class="rank_item_name" style="width: 20%;">
 					LV10
 				</view>
-				<view class="rank_item_name" style="width: 30%;">
+				<view class="rank_item_name" style="width: 30%;" :style="{color:(index==0||index==1||index==2)?color1:'auto'}">
 					8273.00
 				</view>
 			</view>
 			
-			<view class="rank_item">
-				<view class="rank_item_name" style="width: 20%;">
-					1
-				</view>
-				<view class="rank_item_name" style="width: 30%;">
-					淘房**神
-				</view>
-				<view class="rank_item_name" style="width: 20%;">
-					LV10
-				</view>
-				<view class="rank_item_name" style="width: 30%;">
-					8273.00
-				</view>
+			<view class="back_home" :style="{background:color2}" @click="backHome">
+				<image class="back_home_icon" src="https://dm.static.elab-plus.com/yezhu/icon_home.png" mode=""></image>
+				<text>返回\n任务大厅</text>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	let app = getApp();
 	export default {
 		data() {
 			return {
-				
+				rankingList:[
+					{
+						
+					},
+					{
+						
+					},
+					{
+						
+					},{
+						
+					},
+					{
+						
+					},{
+						
+					},{
+						
+					},{
+						
+					},{
+						
+					},{
+						
+					}
+				],
+			    color1:"",
+				color2:"",
+				currentTab:1,
 			};
+		},
+		mounted() {
+			this.color1 = app.globalData.color1;
+			this.color2 = app.globalData.color2;
+		},
+		methods:{
+			tab(index){
+				this.currentTab = index;
+			},
+			backHome(){
+				uni.navigateBack({
+					delta:1,
+				})
+			}
 		}
 	}
 </script>
@@ -81,6 +118,7 @@
 	background: #ffffff;
 	border-radius: 16rpx;
 	padding-top: 20rpx;
+	margin-top: 20rpx;
 	.title{
 		text-align: center;
 		font-size: 32rpx;
@@ -104,13 +142,30 @@
 			text-align: center;
 			flex: auto;
 			line-height: 60rpx;
+			font-size: 24rpx;
+			font-family: Verdana, Verdana-Regular;
+			font-weight: 400;
+			color: #b1b1b1;
 		}
 		.tab_line{
 			width: 2rpx;
 			height: 60rpx;
 			background: #ededed;
 		}
+		.active1{
+			border-radius: 8rpx 0 0 8rpx;
+			color: #FFFFFF;
+		}
+		.active2{
+			border-radius: 0;
+			color: #FFFFFF;
+		}
+		.active3{
+			border-radius: 0 8rpx 8rpx 0 ;
+			color: #FFFFFF;
+		}
 	}
+	
 	.rank_list{
 		width: 100%;
 		.rank_title{
@@ -138,11 +193,39 @@
 				font-size: 28rpx;
 				flex: auto;
 				font-family: Verdana, Verdana-Bold;
-				font-weight: 700;
+				font-weight: 400;
 				text-align: center;
-				color: #b1b1b1;
+				color: #666666;
+				.icon{
+					width: 36rpx;
+					height: 40rpx;
+				}
 			}
 		}
 	}
+	
+	.back_home{
+		position: fixed;
+		bottom: 180rpx;
+		right: 0;
+		width: 100rpx;
+		height: 120rpx;
+		border-radius: 20rpx 0rpx 0rpx 20rpx;
+		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(119,55,12,0.20); 
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		.back_home_icon{
+			width: 30rpx;
+			height: 28rpx;
+			margin-bottom: 9rpx;
+		}
+		font-size: 20rpx;
+		font-family: PingFang SC, PingFang SC-Semibold;
+		font-weight: 600;
+		text-align: center;
+		color: #ffffff;
+	}
 }
 </style>