uni-zhihuikuangshan/pages/origanization/news/tab_3/ranking/ranking.vue

<template>
	<view>
		<!-- 顶部渐变 -->
		<view class="top_color"></view>

		<view class="content">
			<view class="label">
				<view class="title box_1">排名</view>
				<view class="title box_2">姓名</view>
				<view class="title box_3">完成数</view>
				<view class="title box_4">总用时</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="index">
						<view v-if="index == 0">
							<image src="./icon/icon_1.png" mode="aspectFill"></image>
						</view>
						<view v-else-if="index == 1">
							<image src="./icon/icon_2.png" mode="aspectFill"></image>
						</view>
						<view v-else-if="index == 2">
							<image src="./icon/icon_3.png" mode="aspectFill"></image>
						</view>
						<view v-else>{{index+1}}</view>
					</view>
					<view class="user">
						<view class="img">
							<image
								:src="item.sign"
								mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="section">{{item.mine}}</view>
						</view>
					</view>
					<view class="num">{{item.compele_count}}</view>
					<view class="time">{{item.compele_time}} 秒</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				list:[]
			};
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.title
			})
			this.id = option.id
			
			this.get_list()
		},
		methods: {
			get_list() {
				uni.showLoading({
					mask:true
				})
				this.$api.jigsawPuzzle_getRankingBySpecialId({
					special_id: this.id
				}).then((res) => {
					uni.hideLoading()
					console.log(res)
					this.list = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.top_color {
		z-index: 1;
		width: 750rpx;
		height: 500rpx;
		background-image: linear-gradient(to top, #F3F8F7 0%, #009fe8 100%);

		position: fixed;
		top: 1;
		left: 0;
	}

	.content {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		padding: 40rpx 25rpx;

		margin: 0 auto;
		width: 700rpx;
		min-height: 90vh;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.label {
			width: 650rpx;
			height: 90rpx;
			border-radius: 40rpx;
			background-image: linear-gradient(to top, #CAEBFA 0%, #009fe8 90%);

			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 700;
			}

			.box_1 {
				width: 80rpx;
				text-align: center;
			}

			.box_2 {
				width: 270rpx;
				text-indent: 2em;
			}

			.box_3 {
				width: 100rpx;
				text-align: center;
			}
			.box_4 {
				width: 100rpx;
				text-align: center;
			}
		}

		.list {
			.item {
				border-bottom: 1rpx solid #EEEEEE;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.index {
					width: 80rpx;
					text-align: center;
					font-size: 28rpx;

					image {
						width: 45rpx;
						height: 64rpx;
					}
				}

				.user {
					width: 270rpx;
					display: flex;
					align-items: center;

					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					.img {
						margin-right: 20rpx;

						image {
							width: 74rpx;
							height: 74rpx;
							display: block;
							border-radius: 50%;
						}
					}

					.info {
						display: flex;
						flex-direction: column;

						.name {
							color: #01A0E8;
							font-size: 28rpx;
							font-weight: 700;
						}

						.section {
							margin-top: 6rpx;
							color: #909090;
							font-size: 24rpx;
						}
					}
				}
				
				.num{
					width: 100rpx;
					text-align: center;
				}
				.time {
					width: 100rpx;
					text-align: center;
				}
			}
		}
	}
</style>