616 lines
14 KiB
Vue
616 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="team-page">
|
|||
|
|
<!-- 团队概览 -->
|
|||
|
|
<view class="overview-card gradient-bg">
|
|||
|
|
<view class="card-title">我的团队</view>
|
|||
|
|
<view class="stats-grid">
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<text class="stat-value">{{ teamStats.memberCount }}</text>
|
|||
|
|
<text class="stat-label">团队成员</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<text class="stat-value">¥{{ teamStats.totalSales }}</text>
|
|||
|
|
<text class="stat-label">团队业绩</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-item">
|
|||
|
|
<text class="stat-value">¥{{ teamStats.totalCommission }}</text>
|
|||
|
|
<text class="stat-label">团队佣金</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 邀请新成员 -->
|
|||
|
|
<view class="invite-section">
|
|||
|
|
<view class="invite-card">
|
|||
|
|
<view class="invite-content">
|
|||
|
|
<text class="invite-title">邀请好友加入团队</text>
|
|||
|
|
<text class="invite-desc">好友成功注册并推广，您可获得二级佣金</text>
|
|||
|
|
</view>
|
|||
|
|
<button class="invite-btn" @click="inviteMember">
|
|||
|
|
<text class="btn-icon"></text>
|
|||
|
|
<text>立即邀请</text>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 团队成员列表 -->
|
|||
|
|
<view class="member-section">
|
|||
|
|
<view class="section-header">
|
|||
|
|
<text class="section-title">团队成员</text>
|
|||
|
|
<picker mode="selector" :range="sortOptions" @change="onSortChange">
|
|||
|
|
<view class="sort-picker">
|
|||
|
|
<text>{{ selectedSort }}</text>
|
|||
|
|
<text class="arrow">▼</text>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="member-list">
|
|||
|
|
<view class="member-item" v-for="member in memberList" :key="member.id" @click="viewMemberDetail(member)">
|
|||
|
|
<image class="member-avatar" :src="member.avatar" mode="aspectFill"></image>
|
|||
|
|
<view class="member-info">
|
|||
|
|
<view class="member-name-row">
|
|||
|
|
<text class="member-name">{{ member.name }}</text>
|
|||
|
|
<text class="member-level" :class="'level-' + member.level">{{ getLevelText(member.level) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="member-time">加入时间：{{ member.joinTime }}</text>
|
|||
|
|
<view class="member-stats">
|
|||
|
|
<text class="stat-text">推广客户：{{ member.customerCount }}人</text>
|
|||
|
|
<text class="stat-text">成交订单：{{ member.orderCount }}单</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="member-performance">
|
|||
|
|
<text class="performance-label">业绩</text>
|
|||
|
|
<text class="performance-value">¥{{ member.totalSales }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<view class="empty-state" v-if="memberList.length === 0">
|
|||
|
|
<text class="empty-icon"></text>
|
|||
|
|
<text class="empty-text">暂无团队成员</text>
|
|||
|
|
<text class="empty-hint">快去邀请好友加入吧</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 团队排行榜 -->
|
|||
|
|
<view class="rank-section">
|
|||
|
|
<view class="section-header">
|
|||
|
|
<text class="section-title">本月排行榜</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="rank-list">
|
|||
|
|
<view class="rank-item" v-for="(item, index) in rankList" :key="item.id">
|
|||
|
|
<view class="rank-number" :class="'rank-' + (index + 1)">
|
|||
|
|
{{ index + 1 }}
|
|||
|
|
</view>
|
|||
|
|
<image class="rank-avatar" :src="item.avatar" mode="aspectFill"></image>
|
|||
|
|
<view class="rank-info">
|
|||
|
|
<text class="rank-name">{{ item.name }}</text>
|
|||
|
|
<text class="rank-sales">业绩：¥{{ item.sales }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="rank-badge" v-if="index < 3">
|
|||
|
|
<text>{{ ['', '', ''][index] }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
teamStats: {
|
|||
|
|
memberCount: 0,
|
|||
|
|
totalSales: 0,
|
|||
|
|
totalCommission: 0
|
|||
|
|
},
|
|||
|
|
selectedSort: '按加入时间',
|
|||
|
|
sortOptions: ['按加入时间', '按业绩排序', '按客户数排序'],
|
|||
|
|
memberList: [],
|
|||
|
|
rankList: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad() {
|
|||
|
|
this.loadTeamStats()
|
|||
|
|
this.loadMemberList()
|
|||
|
|
this.loadRankList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
async loadTeamStats() {
|
|||
|
|
try {
|
|||
|
|
// TODO: 调用API获取团队统计
|
|||
|
|
this.teamStats = {
|
|||
|
|
memberCount: 8,
|
|||
|
|
totalSales: 15680.00,
|
|||
|
|
totalCommission: 1568.00
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载团队统计失败:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async loadMemberList() {
|
|||
|
|
try {
|
|||
|
|
// 调用API获取团队成员列表
|
|||
|
|
const token = uni.getStorageSync('token')
|
|||
|
|
const res = await uni.request({
|
|||
|
|
url: 'http://localhost:8089/api/distributor/team/members',
|
|||
|
|
method: 'GET',
|
|||
|
|
header: {
|
|||
|
|
'Authorization': 'Bearer ' + token
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
page: 1,
|
|||
|
|
size: 100
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (res.data && res.data.code === 200) {
|
|||
|
|
const records = res.data.data.records || []
|
|||
|
|
|
|||
|
|
// 处理团队成员数据，保留所有详细信息
|
|||
|
|
this.memberList = records.map(member => {
|
|||
|
|
// 处理孩子信息
|
|||
|
|
let children = []
|
|||
|
|
if (member.studentInfo) {
|
|||
|
|
children = [{
|
|||
|
|
studentName: member.studentInfo.studentName,
|
|||
|
|
gender: member.studentInfo.gender,
|
|||
|
|
age: member.studentInfo.age,
|
|||
|
|
grade: member.studentInfo.grade,
|
|||
|
|
school: member.studentInfo.school,
|
|||
|
|
hobbies: member.studentInfo.hobbies,
|
|||
|
|
specialties: member.studentInfo.specialties
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
id: member.id,
|
|||
|
|
name: member.name || member.nickname,
|
|||
|
|
realName: member.realName, // ✅ 保存真实姓名
|
|||
|
|
phone: member.phone, // ✅ 保存电话
|
|||
|
|
avatar: member.avatar || '/static/images/default-avatar.png',
|
|||
|
|
level: member.level || 1,
|
|||
|
|
joinTime: member.joinTime ? member.joinTime.substring(0, 10) : '',
|
|||
|
|
customerCount: member.customerCount || 0,
|
|||
|
|
orderCount: member.orderCount || 0,
|
|||
|
|
totalSales: member.totalSales || 0,
|
|||
|
|
residenceAddress: member.residenceAddress, // ✅ 保存所在区域
|
|||
|
|
customerRequirement: member.customerRequirement, // ✅ 保存客户需求
|
|||
|
|
children: children // ✅ 保存孩子信息
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
console.log('团队成员列表加载成功:', this.memberList)
|
|||
|
|
} else {
|
|||
|
|
console.error('加载团队成员失败:', res.data)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '加载失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载团队成员失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '网络错误',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async loadRankList() {
|
|||
|
|
try {
|
|||
|
|
// TODO: 调用API获取排行榜
|
|||
|
|
this.rankList = [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: '张小明',
|
|||
|
|
avatar: '/static/images/avatar1.jpg',
|
|||
|
|
sales: 5680.00
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: '李红',
|
|||
|
|
avatar: '/static/images/avatar2.jpg',
|
|||
|
|
sales: 3200.00
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
name: '王芳',
|
|||
|
|
avatar: '/static/images/avatar3.jpg',
|
|||
|
|
sales: 2800.00
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载排行榜失败:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onSortChange(e) {
|
|||
|
|
this.selectedSort = this.sortOptions[e.detail.value]
|
|||
|
|
this.loadMemberList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getLevelText(level) {
|
|||
|
|
const levelMap = {
|
|||
|
|
1: '一级',
|
|||
|
|
2: '二级'
|
|||
|
|
}
|
|||
|
|
return levelMap[level] || '未知'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
inviteMember() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/distributor-package/pages/distributor/promotion-code'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
viewMemberDetail(member) {
|
|||
|
|
// 构建详细信息内容（竖向排列，增加空行）
|
|||
|
|
let content = ''
|
|||
|
|
|
|||
|
|
// 1. 电话
|
|||
|
|
content += `电话：${member.phone || '未提供'}\n\n`
|
|||
|
|
|
|||
|
|
// 2. 姓名
|
|||
|
|
content += `姓名：${member.realName || member.name || '未知'}\n\n`
|
|||
|
|
|
|||
|
|
// 3. 孩子基本情况
|
|||
|
|
content += `孩子基本情况：`
|
|||
|
|
if (member.children && member.children.length > 0) {
|
|||
|
|
content += `\n`
|
|||
|
|
member.children.forEach((child, index) => {
|
|||
|
|
const childName = child.studentName || '未知'
|
|||
|
|
const gender = child.gender === 1 ? '男' : child.gender === 2 ? '女' : '未知'
|
|||
|
|
const age = child.age ? `${child.age}岁` : ''
|
|||
|
|
const grade = child.grade || ''
|
|||
|
|
|
|||
|
|
content += `${childName} (${gender}) ${age} ${grade}\n`
|
|||
|
|
})
|
|||
|
|
content += `\n`
|
|||
|
|
} else {
|
|||
|
|
content += `暂无\n\n`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 4. 所在区域
|
|||
|
|
content += `所在区域：${member.residenceAddress || '未提供'}\n\n`
|
|||
|
|
|
|||
|
|
// 5. 客户需求
|
|||
|
|
content += `客户需求：${member.customerRequirement || '暂无'}`
|
|||
|
|
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '团队成员详情',
|
|||
|
|
content: content,
|
|||
|
|
showCancel: false,
|
|||
|
|
confirmText: '关闭'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.team-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #f0f9f7;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gradient-bg {
|
|||
|
|
background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.overview-card {
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 40rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
box-shadow: 0 8rpx 24rpx rgba(125, 211, 192, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-title {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #ffffff;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-value {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-section {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-card {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-content {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-title {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-desc {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invite-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
border: none;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-icon {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-section, .rank-section {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sort-picker {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
padding: 12rpx 20rpx;
|
|||
|
|
background: #f0f9f7;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrow {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
background: #f0f9f7;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-avatar {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-name-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-name {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-level {
|
|||
|
|
padding: 6rpx 12rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
|
|||
|
|
&.level-1 {
|
|||
|
|
background: #fff3e0;
|
|||
|
|
color: #ff9800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.level-2 {
|
|||
|
|
background: #e3f2fd;
|
|||
|
|
color: #2196f3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-time {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-stats {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-performance {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.performance-label {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.performance-value {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #ff6b6b;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 100rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-icon {
|
|||
|
|
font-size: 100rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-hint {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #cccccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rank-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rank-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background: #f0f9f7;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rank-number {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #e0e0e0;
|
|||
|
|
color: #666666;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
|
|||
|
|
&.rank-1 {
|
|||
|
|
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.rank-2 {
|
|||
|
|
background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.rank-3 {
|
|||
|
|
background: linear-gradient(135deg, #cd7f32 0%, #e8a87c 100%);
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rank-avatar {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rank-info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rank-name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rank-sales {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rank-badge {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|