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

<template>
  <BoxMid 
    :padding="[40,20]"
    center 
    gap="gap.lg" 
    border="primary" 
    backgroundColor="background.tertiary"
    radius="radius.md" 
  > 
    <Image 
      src="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.png" 
      mode="widthFix" 
      :width="200" 
      :height="200" 
    />
    <Text fontConfig="lightGoldTitle">您还不是当前村社的志愿者</Text>
    <Text fontConfig="contentSpeicalText">欢迎注册，加入志愿者队伍，点亮村落</Text>
    <PrimaryButton type="primary" text="去点亮村落" @click="emit('goJoin')" />
  </BoxMid>
</template>

<script setup lang="ts">
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import PrimaryButton from '@/common/components/PrimaryButton.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';

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