ranking.vue

<template>
	<view>
		<view class="top">
			<image class="back" src="/static/login/returnBack.png" @click="goBack()"></image>
			<view class="title">累计排名</view>
			<span class="empty"></span>
		</view>
		<view class="userList" v-for="(item,index) in userList" :key="index">
			<view class="rank">{{item.rank}}</view>
			<image class="icon" :src="item.icon"></image>
			<view class="username">{{item.username}}</view>
			<view class="distance">{{item.distance}}km</view>
		</view>
		<view class="my">
			<view class="rank">{{rank}}</view>
			<image class="icon" :src="icon"></image>
			<!-- <view class="info"> -->
				<view class="username">{{username}}</view>
				<view class="distance">{{distance}}km</view>
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rank: 1,
				icon: '/static/sport/icon.jpg',
				username: "不会取名字",
				distance: 99.99,
				userList: [{
					rank: 1,
					icon: '/static/sport/icon.jpg',
					username: "不会取名字",
					distance: 99.99
				},{
					rank: 2,
					icon: '/static/sport/icon.jpg',
					username: "不会取名字",
					distance: 12.12
				}]
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/sport/main',
					animationType: 'pop-in',
					animationDuration: 300
				});
			}
		}
	}
</script>

<style>
	.returnBack {
		height: 55rpx;
		width: 55rpx;
		margin-top: 60rpx;
		margin-left: 20rpx;
		margin-right: auto;
	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		text-align: center;
	}

	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}

	.empty {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		margin-right: 10px;
	}

	.title {
		font-size: 20px;
		margin-top: 10px;
		font-weight: bold;
		color: #f1992d;
		display: inline-block;
	}
	
	.userList{
		margin-top: 10px;
	}
	
	.my{
		position: absolute;
		bottom: 0px;
		background-color: #EDEEF0;
		width: 100%;
		height: 55px;
		padding: 5px 0;
	}
	.rank{
		position: relative;
		bottom: 15px;
		left: 20px;
		display: inline;
		font-size: 20px;
		font-weight: bold;
	}
	.icon{
		position: relative;
		top:2px;
		left: 38px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	/* .info{
		position: relative;
		float: left;
	}
	.username{
		float: ;
	} */
	.username{
		display: inline; 
		position: relative;
		font-size: 17px;
		font-weight: bold;
		bottom: 25px;
		left: 48px;
		color: #7F7F7F;
	}
	.distance{
		display: inline;
		position: relative;
		font-size: 14px;
		font-weight: bold;
		bottom: 5px;
		left: -36px;
	}
</style>