activitys-uniapp/pages/rank/rank.vue

<template>
	<view :style="vuex_skin">
		<view class="" v-show="!loading">
			<u-navbar v-show="navbarShow" title-color="#fff" :border-bottom="false" back-icon-color="#fff" title="排行榜"
				:background="{'backgroundColor': '#f03538'}"></u-navbar>
			<back v-show="!navbarShow"></back>
			<view class="bg-img flex-direction flex justify-center   "
				style="background-image: url(https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/4872ea85f7e74a75a920135ce1384262-bg.png);height: 380rpx;">
				<view class="title" style="padding: 80rpx 0 0 60rpx;">排行榜</view>
			</view>
			<view class="flex justify-center align-center padding-bottom">
				<view class="search">
					<u-search search-icon="/static/rank/search.png" :show-action="false" bg-color="#fff"
						style="width: 100%;" placeholder-color="#CCCCCC"></u-search>
				</view>
			</view>
			<block v-for="(item, index) in 20" :key="index">
				<block v-if="index == 0 || index == 1 || index == 2">
					<view class=" flex align-center"
						style="height: 230rpx;position: relative;margin: 10rpx 20rpx 20rpx 20rpx;"
						:class="index == 0 ? 'first' : index == 1 ? 'second' : index == 2 ? 'third' : '' ">
						<u-image width="220" height="220" border-radius="10" src="/static/test/test.png"></u-image>
						<view class="flex justify-between container" style="width: 100%;">
							<view class="left" style="width: 95%;">
								<view class="name text-cut">小学生法律小知识</view>
								<view class="padding-tb-sm text-sm center"
									style="color: #888888;justify-content: flex-start">
									<u-avatar src="/static/test/avatar.png" size="56"></u-avatar>
									<text class="margin-left-10">一只可乐喵</text>
								</view>

								<view class="flex justify-between">
									<view class="hot-value center" style="justify-content: flex-start;">
										<image src="../../static/rank/hot.png" style="width: 36rpx;height: 36rpx;"
											mode=""></image>
										<text>3085</text>
									</view>
									<button class="cu-btn round  bg-base sm text-white"
										style="padding: 20rpx 38rpx;margin-bottom: 30rpx;">
										<text>去投票</text>
									</button>
								</view>
							</view>
						</view>

						<view class="" style="position: absolute;right: -16rpx;top: -16rpx;">
							<image v-if="index==0" style="width: 70rpx;height: 70rpx;" src="../../static/rank/no1.png"
								mode=""></image>
							<image v-if="index==1" style="width: 70rpx;height: 70rpx;" src="../../static/rank/no2.png"
								mode=""></image>
							<image v-if="index==2" style="width: 70rpx;height: 70rpx;" src="../../static/rank/no3.png"
								mode=""></image>
						</view>
					</view>
				</block>
				<view v-else class="flex margin-20">
					<view class="center text-bold text-lg" style="margin:0 20rpx;">
						<text>{{index + 1}}</text>
					</view>
					<view class=" flex align-center "
						style="background-color: #FFFFFF;border-radius: 20rpx;height: 200rpx;width: 95%;">
						<u-image width="190" height="190" border-radius="10" src="/static/test/test.png"></u-image>
						<view class="flex justify-between container" style="width: 100%;">
							<view class="left" style="width: 95%;">
								<view class="name text-cut"
									style="font-size: 28rpx;font-weight: 600;padding-top: 20rpx;">小学生法律小知识</view>
								<view class="padding-top-20 text-sm center"
									style="color: #888888;justify-content: flex-start">
									<u-avatar src="/static/test/avatar.png" size="56"></u-avatar>
									<text class="margin-left-10">一只可乐喵</text>
								</view>
								<view class="flex justify-between">
									<view class="hot-value center" style="justify-content: flex-start;">
										<image src="../../static/rank/hot.png" style="width: 36rpx;height: 36rpx;"
											mode=""></image>
										<text>3085</text>
									</view>
									<button class="cu-btn round bg-base sm text-white"
										style="padding: 20rpx 38rpx;margin-bottom: 30rpx;">
										<text>去投票</text>
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>

		<loading ref="loading" type="3" theme="2" />
	</view>
</template>

<script>
	import back from '@/components/back.vue'
	export default {
		components:{
			back
		},
		data() {
			return {
				loading: true,
				navbarShow: false,
				rankList: [],
				//搜索关键字
				keyword: '',
			}
		},
		watch: {
			keyword() {
				let that = this
				//节流函数
				if (this.timer) {
					clearTimeout(this.timer) //阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.pageCurrent = 1
					that.rankList = []
					that.getRankList()
				}, 700)
			},
		},
		onPageScroll(res) {
			if (res.scrollTop > 40) {
				this.navbarShow = true
			} else {
				this.navbarShow = false
			}
		},
		onLoad(options) {
			this.$refs.loading.showLoading()
			setTimeout(() => {
				this.loading = false
				this.$refs.loading.hide()
			}, 500)
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.search {
		margin-top: -60upx;
		width: 80%;
		border-radius: 50upx;
		line-height: 60upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9D9D9D;
		font-size: 20upx;
	}

	.title {
		font-size: 52upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.first {
		background-color: #FFFBE7;
		border-radius: 20upx;
	}

	.second {
		background-color: #F5F3FD;
		border-radius: 20upx;
		margin: 0 20upx;
	}

	.third {
		background-color: #FFF5F1;
		border-radius: 20upx;
		margin: 20upx;
	}

	.container {
		.left {
			padding-left: 20upx;

			.name {
				padding-top: 30rpx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333;
			}

			.hot-value {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #353535;
			}
		}

		.right {
			text-align: center;
			padding-right: 10upx;

			.rank {
				height: 70%;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 800;
				font-style: italic;
			}
		}
	}

	.music {
		.name {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}

		.author {
			font-size: 14upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #9A9A9A;
		}

		.hot-vaule {
			margin-top: 10upx;
			font-size: 14upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #3F372A;
		}
	}

	.lines-purple::after {
		border-color: #5a3ee8;
	}

	.lines-purple {
		color: #5a3ee8;
	}
</style>