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

<template>
  <Touchable direction="row" center :padding="[25, 0, 20, 0]" @click="emit('click')">
    <slot name="icon">
      <Image :src="icon" :width="75" :height="46" mode="widthFix" />
    </slot>
    <Width :width="15" />
    <Text :text="title" fontConfig="h4" :color="active ? '#55989a' : '#5f3f2c'" fontFamily="SongtiSCBlack" />
  </Touchable>
</template>

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

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: 'https://xy.wenlvti.net/app_static/images/home/HomeTitleIcon.png',
  },
  lightCount: {
    type: Number,
    default: 2,
  },
  active: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['click']);
</script>