xiangyuan-app/src/common/components/parts/IndexCommonImageItem.vue

<template>
  <ImageBlock2
    :src="image"
    :title="title"
    :desc="desc"
    :width="340"
    :imageWidth="340"
    :imageRadius="15"
    :titleProps="{ fontSize: 24, color: 'gray', lines: 2 }"
    :descProps="{ fontSize: 24, color: 'gray', lines: 2 }"
    backgroundColor="transparent"
    @click="$emit('click')"
  >
    <template #footer> 
      <FlexRow justify="space-between" align="center" :padding="[10,0]" :margin="[10,0,0,0]">
        <FlexRow align="center" :gap="10">
          <Avatar :url="image" :size="40" />
          <Text :text="userName" :fontSize="24" color="gray" />
        </FlexRow>
        <FlexRow align="center" :gap="10">
          <Icon icon="favorite" :color="isLike ? 'primary' : 'gray'" :size="30" />
          <Text :text="likes" :fontSize="30" :color="isLike ? 'primary' : 'gray'" />
        </FlexRow>
      </FlexRow>
    </template>
  </ImageBlock2>
</template>

<script setup lang="ts">
import Text from '@/components/basic/Text.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Avatar from '@/components/display/Avatar.vue';
import Icon from '@/components/basic/Icon.vue';
import ImageBlock2 from '@/components/display/block/ImageBlock2.vue';

const props = defineProps<{
  image?: string;
  title?: string;
  desc?: string;
  userName?: string;
  likes?: number;
  isLike?: boolean;
}>()

const emit = defineEmits([ 'click' ]);

</script>