feat: 添加骑行榜页面，整合头部背景图，优化布局和样式

packages/app/src/core/libs/net-images.ts

@@ -11,4 +11,5 @@ export enum NetImages {
   TopSpotlight = 'https://image.zhuchaohui.com/zhucaohui/3a561f2dcbfd84474e44ff8f031c6ac749a874cb27c8a2f94f26a42a4633302b.png',
   Stars = 'https://image.zhuchaohui.com/zhucaohui/dc15a86a2034ddc17e2825b56319902af1635c20e065919750ebbe51ee95f635.png',
   HonorsHeader = 'https://image.zhuchaohui.com/zhucaohui/3945d2a7643317aca126c4b766139c4560c6ce2c051b7e03ee0ac664abe966c3.png',
+  CyclingRankingsHeaderBg = 'https://image.zhuchaohui.com/zhucaohui/2351014a57a0df427516c4993876ade7e3695ce33b1f227c52c8381aa631ba02.png',
 }

packages/app/src/pages/home/offline-activity/cycling-rankings/index.vue

@@ -1,11 +1,59 @@
 <route lang="json">
 { "style": { "navigationStyle": "custom" } }
 </route>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import NavbarEvo from '@/components/navbar-evo.vue'
+import { NetImages } from '../../../../core/libs/net-images'
+
+// const { data, run } = useRequest(() => ({}), { initialData: [] })
+</script>
 <template>
-  <div
-    class="flex-grow bg-[url(https://image.zhuchaohui.com/zhucaohui/c49e7cd1dda308af18882d95b1a4c52e605d824db9eb2071164f9e5143a17346.png)] bg-[length:100%]"
-  >
-    <wd-navbar title="骑行榜"></wd-navbar>
+  <div class="flex-grow flex flex-col bg-[length:100%]">
+    <NavbarEvo transparent dark title="骑行榜"></NavbarEvo>
+    <div class="aspect-[1.19/1]">
+      <wd-img
+        width="100%"
+        custom-class="vertical-bottom"
+        mode="widthFix"
+        :src="NetImages.CyclingRankingsHeaderBg"
+      ></wd-img>
+    </div>
+    <div class="flex-grow relative bg-[linear-gradient(180deg,#EFEFEF_0.4%,#FFF_21.41%)]">
+      <div class="absolute h-4 top--4 left-0 right-0 bg-[#EFEFEF] rounded-t-2xl"></div>
+      <div class="flex justify-between">
+        <template v-for="(it, i) in [1, 2, 3]" :key="i">
+          <div
+            class="flex-1 py-2 relative"
+            :class="`${i === 1 ? 'w-[143px] h-[141px] bg-white rounded-xl relative bottom-8 pt-4' : ''}`"
+          >
+            <div
+              class="text-center font-bold font-['D-DIN'] leading-relaxed"
+              :class="`${i === 1 ? 'text-[#ef4343] text-2xl ' : 'text-black text-[22px]'}`"
+            >
+              198.2
+            </div>
+            <div
+              class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-relaxed"
+            >
+              骑行里程km
+            </div>
+            <div class="absolute top--30 left-0 right-0 flex flex-col items-center gap-2">
+              <wd-img
+                class="rounded-full border-2 border-solid border-[#c5cdd4]"
+                width="71"
+                height="71"
+                src="https://via.placeholder.com/71x71"
+              ></wd-img>
+              <div
+                class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-relaxed"
+              >
+                苏小萌
+              </div>
+            </div>
+          </div>
+        </template>
+        <template></template>
+      </div>
+    </div>
   </div>
 </template>