minnan/src/pages/parts/HomeButton.vue

<template>
  <view 
    class="position-relative d-flex flex-row justify-center align-center radius-base bg-light-light-primary p-1 pt-25 pb-25 gap-xs"
    :style="{
      width: size === 100 ? '100%' : `calc(${size}% - 15rpx)`
    }"
    @click="onClick"
  >
    <Image :src="icon" width="40rpx" height="40rpx" />
    <text class="size-l color-primary">{{ title }}</text>
    <Image 
      v-if="bg" :src="bg" 
      :width="160" 
      :height="90" 
      :innerStyle="{
        position: 'absolute',
        bottom: 0,
        right: 0,
      }"
    />
  </view>
</template>

<script setup lang="ts">
import Image from '@/components/basic/Image.vue';

const props = defineProps({
  title: {
    type: String,
    default: '探索文化地图'
  },
  bg: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: 'https://mncdn.wenlvti.net/app_static/minnan/images/home/IconMap.png'
  },
  size: {
    type: Number,
    default: 100
  }
})

const emit = defineEmits(['click'])

const onClick = () => {
  emit('click')
}

defineOptions({
  options: {
    virtualHost: true
  }
})
</script>