xiangyuan-app/src/pages/home/village/rank/components/RankVillageItem.vue

<template>
  <BackgroundBox
    backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxDark.png"
    :backgroundCutBorder="[6,6,6,6]"
    :backgroundCutBorderSize="[10,10,10,10]"
  >
    <Touchable
      direction="row"
      justify="space-between"
      align="center"
      gap="gap.md"
      :padding="small ? [15,25] : [25,25]"
      @click="emit('click')"
    >
      <FlexRow align="center" gap="gap.lg">
        <BackgroundBox
          backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingCount.png"
          width="60rpx"
          height="60rpx"
          center
        >
          <Text :text="rank" fontConfig="h4" color="white" />
        </BackgroundBox>
        <Image 
          :src="image" 
          defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
          :width="small ? 130 : 170"
          :height="small ? 80 : 120"
          mode="aspectFill"
          radius="radius.md"
        />
        <Text :text="title" fontConfig="contentText" />
      </FlexRow>
      <FlexRow center gap="gap.md">
        <BackgroundBox
          backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagNormal.png"
          :backgroundCutBorder="[10,10,10,10]"
          :backgroundCutBorderSize="[10,10,10,10]"
          :padding="[15,10]"
          center
          direction="row"
          gap="gap.md"
          width="100"
        >
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconLight.png" width="30rpx" height="30rpx" mode="aspectFill" />
          <Text :text="points || 0" fontConfig="contentText" />
        </BackgroundBox>
      </FlexRow>
    </Touchable>
  </BackgroundBox>
</template>

<script setup lang="ts">  
import Touchable from '@/components/feedback/Touchable.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Text from '@/components/basic/Text.vue';
import Image from '@/components/basic/Image.vue';
import FlexRow from '@/components/layout/FlexRow.vue';

const props = defineProps<{
  id: number;
  image: string;
  rank: number;
  title: string;
  points: number;
  small?: boolean;
}>();

const emit = defineEmits<{
  (e: 'click'): void;
}>();
</script>