jp-railway/pages/mine/points/rankingList.vue

<template>
	<view>
		<u-navbar title="积分排行榜">	
		</u-navbar>
		<view class="background">
			积分排行榜
			
		</view>
		<view class="self">
			<view class="rank">
				105
			</view>
			<view class="photo">
				<img src="../../../assets/img/rankPhoto.png" alt="">
			</view>
			<view class="name">
				王泽
			</view>
			<view class="points">
				1015积分
			</view>
		</view>
		<view class="else">
			<view class="item">
				<view class="rank">
					<img src="../../../assets/img/Gold Medal@1x.png" alt="">
				</view>
				<view class="photo">
					<img src="../../../assets/img/jiguang.png" alt="">
				</view>
				<view class="name">
					继广
				</view>
				<view class="points points1">
					2011积分
				</view>
			</view>
			<view class="item">
				<view class="rank">
					<img src="../../../assets/img/Silver Medal Copy@1x.png" alt="">
				</view>
				<view class="photo">
					<img src="../../../assets/img/dingmanrong.png" alt="">
				</view>
				<view class="name">
					丁曼容
				</view>
				<view class="points points2">
					2011积分
				</view>
			</view>
			<view class="item">
				<view class="rank">
					<img src="../../../assets/img/Bronze Medal Copy@1x.png" alt="">
				</view>
				<view class="photo">
					<img src="../../../assets/img/lishuyi.png" alt="">
				</view>
				<view class="name">
					李书易
				</view>
				<view class="points points3">
					1917积分
				</view>
			</view>
			<view class="item">
				<view class="rank">
					4
				</view>
				<view class="photo">
					<img src="../../../assets/img/jiguang.png" alt="">
				</view>
				<view class="name">
					继广
				</view>
				<view class="points">
					2011积分
				</view>
			</view>
			<view class="item">
				<view class="rank">
					5
				</view>
				<view class="photo">
					<img src="../../../assets/img/jiguang.png" alt="">
				</view>
				<view class="name">
					继广
				</view>
				<view class="points">
					2011积分
				</view>
			</view>
			<view class="item">
				<view class="rank">
					6
				</view>
				<view class="photo">
					<img src="../../../assets/img/jiguang.png" alt="">
				</view>
				<view class="name">
					继广
				</view>
				<view class="points">
					2011积分
				</view>
			</view>
			<view class="item">
				<view class="rank">
					7
				</view>
				<view class="photo">
					<img src="../../../assets/img/jiguang.png" alt="">
				</view>
				<view class="name">
					继广
				</view>
				<view class="points">
					2011积分
				</view>
			</view>
			<view class="item">
				<view class="rank">
					8
				</view>
				<view class="photo">
					<img src="../../../assets/img/jiguang.png" alt="">
				</view>
				<view class="name">
					继广
				</view>
				<view class="points">
					2011积分
				</view>
			</view>
			
		</view>
		<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		height: 224rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 24px;
		padding: 44rpx 32rpx;
		display: flex;
		background:url("../../../assets/img/Group Copy@1x.png" ),url("../../../assets/img/Group@1x.png"),
		linear-gradient(180deg, rgba(255,150,0,1) 0%,rgba(255,61,0,1) 100%) ;
		background-repeat: no-repeat,no-repeat;
		background-position: 85% 50%,105% 40%;
		font-family: 'SemiBold';
	}
	.self{
		background-color: #fff;
		 margin: 0 32rpx 24rpx;
		 margin-top: -90rpx;
		 height: 64px;
		 z-index: 999;
		 overflow: hidden;
		 position: relative;
		 border-radius: 8px;
		 padding: 36rpx 42rpx;
		 display: flex;
		 align-items: center;
		 .rank{
			 color: rgba(31, 74, 153, 1);
			 font-size: 16px;
		 }
		 .photo{
			 width: 80rpx;
			 height: 80rpx;
			 border-radius: 8px;
			 overflow: hidden;
			 margin-left: 24rpx;
			 img{
				 width: 100%;
				 height: 100%;
			 }
		 }
		 .name{
			 color: rgba(51, 51, 51, 1);
			 font-size: 16px;
			 margin-left: 24rpx;
			 font-family: 'Medium';
		 }
		 .points{
			 color: rgba(31, 74, 153, 1);
			 font-size: 16px;
            margin-left: auto;
			font-family: 'Regular';
		 }
	}
   .else{
	   background: #fff;
	   border-radius: 8px;
	   padding: 24rpx 48rpx;
	   margin: 0 32rpx 24rpx;
	   .item{
		   display: flex;
		   align-items: center;
		   height: 128rpx;
	   }
	   .rank{
	   			 color: rgba(31, 74, 153, 1);
	   			 font-size: 16px;
				 width: 48rpx;
				 height: 48rpx;
				 img{
					 width: 100%;
					 height: 100%;
				 }
	   }
	   .photo{
	   			 width: 80rpx;
	   			 height: 80rpx;
	   			 border-radius: 8px;
	   			 overflow: hidden;
	   			 margin-left: 24rpx;
	   			 img{
	   				 width: 100%;
	   				 height: 100%;
	   			 }
	   }
	   .name{
	   			 color: rgba(51, 51, 51, 1);
	   			 font-size: 16px;
	   			 margin-left: 24rpx;
				 font-family: 'Medium';
	   }
	   .points{
	   			 color: rgba(31, 74, 153, 1);
	   			 font-size: 16px;
	           margin-left: auto;
			   font-family: 'Regular';
			   
	   }
	   .points1{
		   color: rgba(226, 14, 22, 1);
	   }
	   .points2{
		   color: rgba(255, 94, 0, 1);
	   }
	   .points3{
		   color: rgba(255, 150, 0, 1);
	   }
   }
</style>