feiniao-youwei-uniapp/pages/tabBar/tree/subPages/rank.vue

<template>
	<view class="sub-base-container">
		<view class="gradient-reflection" data-text="好友排行榜">好友排行榜</view>
		<view class="rank-card">
			<view class="tabs">
				<view :class="['tab-item',{active:active === index}]" v-for="(item,index) in tabsList" :key="index" @click="handleTab(index)">{{item}}</view>
			</view>
			<view class="rank-list">
				<view :class="['rank-item',{bg:(index + 1) <=3}]" v-for="(item,index) in 7" :key="index">
					<view class="rank-info">
						<text class="num">{{item}}</text>
						<up-image class="avatar" :fade="false"
							src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" width="92rpx"
							height="92rpx" shape="circle"></up-image>
						<view class="info">
							<view class="name">
								<text>茜茜荔</text>
								<view :class="['level',{levelBlue:(index + 1) <=3}]">V4.星勋</view>
							</view>
							<text class="nickname">昵称:听妈妈的话</text>
						</view>
					</view>
					<view class="button">去看看</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	
	const active = ref(0)
	const tabsList = ["总榜","桃子","葡萄","香蕉","荔枝"]
	const handleTab = (index) =>{
		active.value = index
	}
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";
	.sub-base-container {
		@include ossBg("subTreePage/rank-bg.png");
		.gradient-reflection {
			width: 100%;
			position: relative;
			font-size: 86rpx;
			color: #fff;
			font-family: "PangMenZhengDao";
			text-align: center;
		}

		.gradient-reflection::after {
			content: attr(data-text);
			position: absolute;
			top: 75%;
			left: calc(50% - 430rpx / 2);
			transform: scaleY(-1);
			background: rgba(255, 255, 255, 0.5);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			opacity: 0.5;
		}
		
		.rank-card{
			margin-top: 90rpx;
			background: rgba(255, 255, 255, 0.74);
			border-radius: 20rpx 20rpx 0 0;
			padding: 20rpx;
			.tabs{
				display: flex;
				.tab-item{
					flex: 1;
					text-align: center;
					color: rgba(0, 0, 0, 0.5);
					font-size: 28rpx;
					padding: 10rpx 0;
					&.active{
						border-radius: 50rpx;
						color: #000;
						background: #fff;
					}
				}
			}
			.rank-list{
				.rank-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 14rpx 20rpx;
					border-radius: 10rpx;
					margin-top: 20rpx;
					&.bg{
						background-image: linear-gradient(90deg,rgba(255,255,255,0.6),transparent);
					}
					.rank-info{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						.num{
							margin-right: 28rpx;
						}
						.info{
							margin-left: 10rpx;
							.name{
								font-size: 28rpx;
								font-weight: 500;
								display: flex;
								align-items: center;
								margin-bottom: 4rpx;
							}
							.level{
								background: rgba(81, 81, 81, 0.1);
								color: #444444;
								border-radius: 4rpx;
								font-size: 24rpx;
								padding: 4rpx 10rpx;
								margin-left: 20rpx;
								&.levelBlue{
									background: #fff;
									color: #2199F8;
								}
							}
							.nickname{
								color: rgba(0, 0, 0, 0.5);
							}
						}
					}
					.button{
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						border-radius: 50rpx;
						border: 2rpx solid rgba(0, 0, 0, 0.3);
						background: #fff;
					}
				}
			}
		}
	}
</style>