更新

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

@@ -3,6 +3,9 @@
   min-height: 100vh;
 
   :global {
+    .van-tabs__nav {
+      background-color: transparent !important;
+    }
 
     .van-calendar__day--end,
     .van-calendar__day--start,
@@ -40,16 +43,16 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 214px;
+  height: 397px;
   // object-fit: cover;
-  z-index: -1;
+  z-index: 0;
 }
 
 .sticky {
   :global {
     .van-sticky {
-      background: url('../images/bg-image.png') no-repeat top center;
-      background-size: 100% 214px;
+      background: url('./images/time-bg.png') no-repeat top center;
+      background-size: 100% 397px;
     }
   }
 
@@ -66,7 +69,12 @@
   }
 }
 
+.rankContainer {
+  position: relative;
+}
+
 .rankLevel {
+  padding-top: 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -188,5 +196,51 @@
   border: 2px solid #FFFFFF;
   backdrop-filter: blur(6px);
   min-height: 40vh;
-  margin: 0 13px;
+  margin: -62px 13px 0;
+
+  .rankTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 19px 12px 2px 0;
+
+    .titleName {
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: '';
+        display: flex;
+        width: 4px;
+        height: 14px;
+        background-color: #FFA2A0;
+        border-radius: 0px 3px 3px 0px;
+        margin-right: 8px;
+      }
+
+      img {
+        width: 80px;
+        height: 16px;
+      }
+    }
+  }
+}
+
+.rankItem {
+  background-color: transparent;
+  padding: 6px 10px;
+  border-radius: 12px;
+
+  &.acitve {
+    background-color: #FFE5EA;
+  }
+
+
+  .num {
+    font-size: 20px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #AAAAAA;
+    line-height: 24px;
+  }
 }

src/tenant/ranking-list/index.tsx

@@ -3,8 +3,11 @@ import { defineComponent, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 import ColHeader from '@/components/col-header'
-import bgImg from '../images/bg-image.png'
-import { Tabs, Tab, Image, Icon, Calendar } from 'vant'
+import bgImg from './images/time-bg.png'
+import bgImg2 from './images/day-bg.png'
+import timeTitle from './images/time-title.png'
+import dayTitle from './images/day-title.png'
+import { Tabs, Tab, Image, Icon, Calendar, Cell } from 'vant'
 import dayjs from 'dayjs'
 import isBetween from 'dayjs/plugin/isBetween'
 dayjs.extend(isBetween)
@@ -134,7 +137,9 @@ export default defineComponent({
 
           <div class={styles.rankList}>
             <div class={styles.rankTitle}>
-              <div>训练时长榜</div>
+              <div class={styles.titleName}>
+                <img src={timeTitle} />
+              </div>
               <span
                 class={styles.timeRange}
                 onClick={() => (state.showPopoverTime = true)}
@@ -144,6 +149,30 @@ export default defineComponent({
                 <i class={styles.iconArrow}></i>
               </span>
             </div>
+
+            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map(() => (
+              <Cell class={styles.rankItem}>
+                {{
+                  icon: () => (
+                    <>
+                      <span class={styles.num}>4</span>
+                      <Image class={styles.userImg} />
+                    </>
+                  ),
+                  title: () => (
+                    <div class={styles.userInfo}>
+                      <p class={styles.userName}>李同学</p>
+                      <p class={styles.subjectName}>竖笛</p>
+                    </div>
+                  ),
+                  value: () => (
+                    <div class={styles.times}>
+                      <span>229</span>分钟
+                    </div>
+                  )
+                }}
+              </Cell>
+            ))}
           </div>
         </div>
 
@@ -176,8 +205,6 @@ export default defineComponent({
               forms.endTime = times.endTime
             }
             state.showPopoverTime = false
-            // refreshing.value = true
-            // getList()
           }}
         />
       </div>