<route lang="json">
{ "style": { "navigationStyle": "custom" } }
</route>
<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 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>
