更新

src/tenant/ranking-list/index.module.less

@@ -15,6 +15,84 @@
       background-size: 100% 214px;
     }
   }
+}
+
+.rankLevel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 13px;
+
+  .levelItem {
+    width: 112px;
+    text-align: center;
+
+    .levelUserImg {
+      position: relative;
+      width: 86px;
+      height: 77px;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 1;
+      }
+
+      .img {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+    }
+
+    h2 {
+      font-size: 16px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 22px;
+    }
+
+    .levelTime {
+      font-size: 12px;
+      color: #000000;
+      line-height: 17px;
+    }
+  }
+
+  .level1 {
+    .levelUserImg {
+      width: 92px !important;
+      height: 88px !important;
+      background: url('./images/level-1-header.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .img {
+      width: 58px !important;
+      height: 58px !important;
+    }
+  }
 
-  // --van-nav-bar-height: 0px;
+  .level2 {
+    .levelUserImg {
+      background: url('./images/level-2-header.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .level3 {
+    .levelUserImg {
+      background: url('./images/level-3-header.png') no-repeat center;
+      background-size: contain;
+    }
+  }
 }

src/tenant/ranking-list/index.tsx

@@ -3,6 +3,7 @@ import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import ColHeader from '@/components/col-header'
 import bgImg from '../images/bg-image.png'
+import { Tabs, Tab, Image } from 'vant'
 
 export default defineComponent({
   name: 'ranking-list',
@@ -18,17 +19,56 @@ export default defineComponent({
               title=" "
               color="#131415"
             />
-
-            {/* <van-tabs v-model:active="active">
-              <van-tab title="标签 1">内容 1</van-tab>
-              <van-tab title="标签 2" disabled>
-                内容 2
-              </van-tab>
-              <van-tab title="标签 3">内容 3</van-tab>
-            </van-tabs> */}
+            <Tabs lineWidth={22} lineHeight={4}>
+              <Tab title="时长榜" name="timeBill"></Tab>
+              <Tab title="天数榜" name="dayBill"></Tab>
+            </Tabs>
           </TheSticky>
           <img class={styles.bgImg} src={bgImg} />
         </div>
+
+        <div class={styles.rankContainer}>
+          <div class={styles.rankLevel}>
+            <div class={[styles.levelItem, styles.level2]}>
+              <div class={styles.levelUserImg}>
+                <Image
+                  class={styles.img}
+                  src={
+                    'https://ks3-cn-beijing.ksyuncs.com/daya/16644378620311664437783089.jpg'
+                  }
+                />
+              </div>
+              <h2 class={'van-ellipsis'}>夏可可夏可可夏可可夏可可</h2>
+              <p class={[styles.levelTime, 'van-ellipsis']}>
+                夏可可夏可可竖笛-240分钟
+              </p>
+            </div>
+            <div class={[styles.levelItem, styles.level1]}>
+              <div class={styles.levelUserImg}>
+                <Image
+                  class={styles.img}
+                  src={
+                    'https://ks3-cn-beijing.ksyuncs.com/daya/16644378620311664437783089.jpg'
+                  }
+                />
+              </div>
+              <h2 class={'van-ellipsis'}>夏可可</h2>
+              <p class={[styles.levelTime, 'van-ellipsis']}>竖笛-240分钟</p>
+            </div>
+            <div class={[styles.levelItem, styles.level3]}>
+              <div class={styles.levelUserImg}>
+                <Image
+                  class={styles.img}
+                  src={
+                    'https://ks3-cn-beijing.ksyuncs.com/daya/16644378620311664437783089.jpg'
+                  }
+                />
+              </div>
+              <h2 class={'van-ellipsis'}>夏可可</h2>
+              <p class={[styles.levelTime, 'van-ellipsis']}>竖笛-240分钟</p>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }