排行榜，签到开发

constants/mall-data.js

@@ -7,3 +7,4 @@ export const GROUP_STATUS = {
   2: { name: '拼团失败', bg: '#EB1C26', class: 'fail' },
   3: { name: '拼团取消', bg: '#999999', class: 'cancel' }
 }
+ 

pages.json

@@ -114,6 +114,13 @@
 			"style": {
 				"navigationBarTitleText": "拼团记录"
 			}
+		},
+		{
+			"path": "pages/ranking-list/ranking-list",
+			"style": {
+				"navigationBarTitleText": "排行榜",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {

pages/discover/discover.vue

@@ -12,6 +12,10 @@
   ]
 
   const onGo = item => {
+    if (item === 'grade') {
+      navigateTo('/pages/ranking-list/ranking-list')
+      return
+    }
     if (item === 'mall') {
       navigateTo('/pages/mall/list')
       return

pages/ranking-list/ranking-list.vue

@@ -0,0 +1,94 @@
+<script setup></script>
+
+<template>
+  <view class="ranking-list">
+    <nav-bar>
+      <template #back>
+        <image
+          src="/static/images/public/white-arrow.png"
+          mode="heightFix"
+          class="top-left-icon"
+        ></image>
+      </template>
+    </nav-bar>
+    <view class="top-box">
+      <image
+        src="/static/images/ranking-list/title-icon.png"
+        mode="aspectFit"
+        class="left-icon"
+      ></image>
+      <image
+        src="/static/images/ranking-list/hat.png"
+        mode="aspectFit"
+        class="right-icon"
+      ></image>
+    </view>
+
+    <!-- 表格 -->
+    <view class="table-box">
+      <!-- 表头 -->
+      <view class="table-head">
+        <view class="table-item">
+          <text class="item-text">排行</text>
+        </view>
+        <view class="table-item">
+          <text class="item-text">用户</text>
+        </view>
+        <view class="table-item">
+          <text class="item-text">积分</text>
+        </view>
+      </view>
+      <!-- 列表内容 -->
+      <view v-for="item in 4" class="table-content">
+        <view class="table-item">
+          <text class="item-text">1</text>
+        </view>
+        <view class="table-item">
+          <text class="item-text">张三</text>
+        </view>
+        <view class="table-item">
+          <text class="item-text">100</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .top-left-icon {
+    height: 42rpx;
+  }
+  .top-box {
+    position: relative;
+    height: 466rpx;
+    background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 38rpx;
+      left: 0;
+      bottom: 0;
+      background: #ffffff;
+      border-radius: 32rpx 32rpx 0rpx 0rpx;
+    }
+    .left-icon {
+      width: 354rpx;
+      height: 166rpx;
+      position: absolute;
+      bottom: 42rpx;
+      left: 48rpx;
+    }
+    .right-icon {
+      width: 450rpx;
+      height: 218rpx;
+      position: absolute;
+      bottom: 10rpx;
+      right: -60rpx;
+    }
+  }
+
+  .table-box {
+    
+  }
+</style>