From 697f5883582b5fc3630b94d104646edd1b0978ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=A3=89=E6=9D=8E?= <2873598950@qq.com>
Date: Sat, 30 Nov 2024 08:02:07 +0000
Subject: [PATCH] =?UTF-8?q?update=20pages/commission/promoter.vue.=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F=E6=9C=89?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E5=AE=8C=E5=96=84=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 云棉李 <2873598950@qq.com>
---
 pages/commission/promoter.vue | 122 +++++++++++++++++++---------------
 1 file changed, 70 insertions(+), 52 deletions(-)

diff --git a/pages/commission/promoter.vue b/pages/commission/promoter.vue
index bdf1e1e7..21a3cf87 100644
--- a/pages/commission/promoter.vue
+++ b/pages/commission/promoter.vue
@@ -1,7 +1,9 @@
 <template>
 	<s-layout title="推广人排行榜">
-		<view class="PromoterRank" style='backgroundColor:red'>
-			<view class="redBg bg-color">
+    <view class="bg"></view>
+
+		<view class="PromoterRank">
+			<view class="top">
 				<view class="header">
 					<view class="nav acea-row row-center-wrapper" style='display:flex'>
 						<view class="item" :class="state.currentTab === index ? 'font-color' : ''"
@@ -9,8 +11,9 @@
 							{{ item }}
 						</view>
 					</view>
+
 					<!-- top3 排名 -->
-					<view class="rank acea-row row-bottom row-around">
+					<view class="rank">
 						<view class="item" v-show="state.two.id">
 							<view class="pictrue">
 								<image :src="state.two.avatar"></image>
@@ -33,21 +36,22 @@
 							<view class="num">{{ state.three.brokerageUserCount }}人</view>
 						</view>
 					</view>
-				</view>
+
+        </view>
 			</view>
+
 			<!-- 其它排名 -->
 			<view class="list" v-if="state.rankList.length">
-				<view class="item acea-row row-between-wrapper" v-for="(item,index) in state.rankList" :key="index">
-					<view class="num">{{ index + 4 }}</view>
-					<view class="picTxt acea-row row-between-wrapper">
-						<view class="pictrue">
-							<image :src="item.avatar"></image>
-						</view>
-						<view class="text line1">{{item.nickname}}</view>
+				<view class="item" v-for="(item,index) in state.rankList" :key="index">
+					<view class="picTxt">
+            <view class="num">{{ index + 4 }}</view>
+            <image class="pic_img" :src="item.avatar"></image>
+						<view class="text">{{item.nickname}}</view>
 					</view>
-					<view class="people font-color">{{ item.brokerageUserCount }}人</view>
+					<view class="people">{{ item.brokerageUserCount }}人</view>
 				</view>
 			</view>
+
 		</view>
 	</s-layout>
 </template>
@@ -99,7 +103,7 @@
     state.rankList = data.list;
     state.one = state.rankList.shift() || {};
     state.two = state.rankList.shift() || {};
-    state.trhee = state.rankList.shift() || {};
+    state.three = state.rankList.shift() || {};
   }
 
 	function calculateTimes() {
@@ -151,9 +155,25 @@
 </script>
 
 <style lang='scss' scoped>
-	.PromoterRank .redBg {
-		padding: 45rpx 0 30rpx 0;
-	}
+  .bg {
+    width: 750rpx;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    background: #f5f5f5;
+  }
+
+	.PromoterRank {
+    .top {
+      padding: 45rpx 0 30rpx 0;
+      background: red;
+    }
+  }
+
 
 	.PromoterRank .header {
 		background: url("data:image/jpeg;base64,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") no-repeat;
@@ -191,9 +211,12 @@
 		color: red
 	}
 
-	.PromoterRank .header .rank {
+	.rank {
 		padding: 0 20rpx;
 		margin-top: 30rpx;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-around;
 	}
 
 	.PromoterRank .header .rank .item .pictrue {
@@ -250,48 +273,43 @@
 		text-align: center;
 	}
 
-	.PromoterRank .list {
-		width: 710rpx;
+	.list {
 		background-color: #fff;
 		border-radius: 20rpx;
-		margin: -60rpx auto 0 auto;
+		margin: -60rpx 0 0 0;
 		padding: 0 30rpx;
-	}
 
-	.PromoterRank .list .item {
-		border-bottom: 1px solid #f3f3f3;
-		height: 101rpx;
-		font-size: 28rpx;
-	}
+        .item {
+            border-bottom: 1px solid #f3f3f3;
+            height: 101rpx;
+            font-size: 28rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
 
-	.PromoterRank .list .item .num {
-		color: #666;
-		width: 70rpx;
-	}
+            .picTxt {
+                display: flex;
+                align-items: center;
 
-	.PromoterRank .list .item .picTxt {
-		width: 350rpx;
-	}
+                .num {
+                    color: #666;
+                    width: 70rpx;
+                }
 
-	.PromoterRank .list .item .picTxt .pictrue {
-		width: 68rpx;
-		height: 68rpx;
-	}
+                .pic_img {
+                    width: 68rpx;
+                    height: 68rpx;
+                    display: block;
+                    border-radius: 50%;
+                    margin-right: 20rpx;
+                }
 
-	.PromoterRank .list .item .picTxt .pictrue image {
-		width: 100%;
-		height: 100%;
-		display: block;
-		border-radius: 50%;
-	}
+                .text {
+                    width: 262rpx;
+                    color: #333;
+                }
 
-	.PromoterRank .list .item .picTxt .text {
-		width: 262rpx;
-		color: #333;
-	}
-
-	.PromoterRank .list .item .people {
-		width: 175rpx;
-		text-align: right;
-	}
+            }
+	    }
+    }
 </style>