积分排行榜页面

pages.json

@@ -196,6 +196,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/mine/points/rankingList",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏

pages/mine/points/rankingList.vue

@@ -0,0 +1,257 @@
+<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%;
+	}
+	.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;
+		 }
+		 .points{
+			 color: rgba(31, 74, 153, 1);
+			 font-size: 16px;
+            margin-left: auto;
+		 }
+	}
+   .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;
+	   }
+	   .points{
+	   			 color: rgba(31, 74, 153, 1);
+	   			 font-size: 16px;
+	           margin-left: auto;
+			   
+	   }
+	   .points1{
+		   color: rgba(226, 14, 22, 1);
+	   }
+	   .points2{
+		   color: rgba(255, 94, 0, 1);
+	   }
+	   .points3{
+		   color: rgba(255, 150, 0, 1);
+	   }
+   }
+</style>