xiangyuan-app/src/pages/home/components/VillageUserRankList.vue

<template>
  <Empty v-if="list.length === 0" description="暂无排名数据" />
  <FlexRow align="flex-end">
    <FlexCol 
      v-for="(item) in list" 
      position="relative" 
      :key="item.title" 
      :width="item.rank == 1 ? '35%' : '32.5%'" 
      :height="item.rank == 1 ? 380 : 320"
      :innerStyle="{
        backgroundSize: '100% auto',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundImage: `url('https://xy.wenlvti.net/app_static/images/home/Rank${item.rank}.png')`
      }"
      overflow="hidden"
    >
      <FlexCol 
        position="absolute"
        :left="15"
        :right="15"
        :bottom="item.rank == 1 ? 66 : 40"
        center
      >
        <Avatar :url="item.image" :size="item.rank == 1 ? 100 : 90" mode="aspectFill" radius="radius.md" />
        <Height :height="item.rank == 1 ? 15 : 10" />
        <Text fontConfig="h4" :text="item.title" color="white" />
        <Text fontConfig="h2" :text="item.score" :color="scoreColors[item.rank - 1]" />
      </FlexCol>
    </FlexCol>
  </FlexRow>
</template>

<script setup lang="ts">
import Text from '@/components/basic/Text.vue';
import Avatar from '@/components/display/Avatar.vue';
import Empty from '@/components/feedback/Empty.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';

const scoreColors = [
  '#cb8833',
  '#7788b9',
  '#cd7853',
]

withDefaults(defineProps<{
  list?: {
    image: string;
    title: string;
    rank: number;
    score: number;
  }[];
}>(), {
  list: () => [
    {
      image: 'https://mncdn.wenlvti.net/app_static/minnan/images/test/ImageTest2.png',
      title: '用户2',
      rank: 2,
      score: 90,
    },
    {
      image: 'https://mncdn.wenlvti.net/app_static/minnan/images/test/ImageTest1.png',
      title: '用户1',
      rank: 1,
      score: 100,
    },
    {
      image: 'https://mncdn.wenlvti.net/app_static/minnan/images/test/ImageTest3.png',
      title: '用户3',
      rank: 3,
      score: 80,
    },
  ],
});

</script>