peiwan-uniapp/pages/tabbar/components/home/rankBox.vue

<template>
	<view class="rank-box">
		<view class="tab-box">
			<tui-tabs width="200" unlined :tabs="tabList" badgeBgColor="var(--ui-BG-Main)" selectedColor="var(--ui-BG-Main)" sliderBgColor="var(--ui-BG-Main)" :currentTab="current" @change="change"></tui-tabs>
		</view>
		<view class="user-box">
			<view class="avatar-box two" @click="detail(1)">
				<view class="img-box">
					<img v-if="list[1]" class="img" :src="list[1].avatar"></img>
					<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
					<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/03072abb5a8c90a4f457549b8394d3c3db2a652410692d732b5c25f2478e3a85.png"></img>
				</view>
				<view class="nickname" v-if="list[1]">{{list[1].nickname}}</view>
				<view class="nickname" v-else>???</view>
			</view>
			<view class="avatar-box one" @click="detail(0)">
				<view class="img-box">
					<img v-if="list[0]" class="img" :src="list[0].avatar"></img>
					<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
					<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d191aec3b3d6e95c1dcb3bace7bffe28834f4fb062a9675aeaa1ae42a9bbc366.png"></img>
				</view>
				<view class="nickname" v-if="list[0]">{{list[0].nickname}}</view>
				<view class="nickname" v-else>???</view>
			</view>
			<view class="avatar-box three" @click="detail(2)">
				<view class="img-box">
					<img v-if="list[2]" class="img" :src="list[2].avatar"></img>
					<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
					<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/27209281e1b0e00dcc112bae4d06c14b089ec2f74db14b62eca4cbc0cf741cff.png"></img>
				</view>
				<view class="nickname" v-if="list[2]">{{list[2].nickname}}</view>
				<view class="nickname" v-else>???</view>
			</view>
		</view>
		<view class="time-box">更新时间: {{updateTime}}</view>
	</view>
</template>

<script>
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import dayjs from 'dayjs';
	export default {
		components: {
			tuiTabs
		},
		props: {
			maleWeekTopList: {
				type: Array,
				default: [],
			},
			femaleWeekTopList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				list: [],
				current: 0,
			}
		},
		computed: {
			updateTime() {
				this.list = this.femaleWeekTopList;
				
				// 获取当前日期和时间
				const now = dayjs();
				const nowDays = now.format('MM/DD');
				const sevenDaysAgo = now.subtract(7, 'day').format('MM/DD');
				return sevenDaysAgo + '-' + nowDays
			},
			tabList() {
				return [{
					name: '女神榜',
					list: this.femaleWeekTopList,
				}, {
					name: '男神榜',
					list: this.maleWeekTopList,
				}];
			},
		},
		methods: {
			change(e) {
				this.current = e.index;
				this.list = this.tabList[e.index].list;
			},
			detail(e) {
				if(this.list[e]){
					this.$u.route({
						url: 'pages/clerk/detail/index',
						params: {
							id: this.list[e].id,
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rank-box {
		background-color: #fff;
		display: flex;
		justify-content: center;
		margin: 15px;
		border-radius: 10px;
		padding: 15px;
		flex-direction: column;
		align-items: center;
		padding-top: 5px;
		
		.tab-box {
			width: 200px;
		}
		
		.user-box {
			display: flex;
			width: 100%;
		}
		
		.avatar-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			
			.nickname {
				margin-top: 10px;
				font-size: 28rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				max-width: 160rpx;
				text-align: center;
				line-height: 28rpx;
			}
			
			.img-box {
				height: 200rpx;
				position: relative;
				display: flex;
				justify-content: center;
				
				.two-icon {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					bottom: -8px;
				}
			}
			
			.img {
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				bottom: 0;
				border-radius: 100%;
			}
			
		}
		
		.one{
			color: #fed530;
			
			.img {
				width: 160rpx;
				height: 160rpx;
				border: 2px solid #fed530;
				object-fit: cover;
			}
		} 
		
		.two {
			color: #d8d8d8;
			
			.img {
				border: 2px solid #d8d8d8;
				object-fit: cover;
			}
		} 
		
		.three {
			color: #ef9e3f;
			
			.img {
				border: 2px solid #ef9e3f;
				object-fit: cover;
			}
		} 
		
		.time-box {
			padding-top: 15px;
			font-size: 24rpx;
			color: #666;
		}
	}
</style>