xiangyuan-app/src/pages/home/village/dialogs/IntroClamTip.vue

<template>
  <CommonDialog v-model:show="show" title="开启你的乡村之旅">
    <template #titlePre>
      <FlexRow center>
        <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="320" mode="widthFix" />
      </FlexRow>
    </template>
    <FlexCol gap="gap.lg" padding="padding.md">
      <Text 
        textAlign="center"
        text="认领你的村社，参与建设家乡 或者先随便看看，了解更多乡村故事" 
        fontConfig="contentSpeicalText" 
      />
      <FlexRow justify="space-around" gap="gap.md">
        <FrameButton text="随便看看" @click="show = false; emit('cancel')" width="220rpx" />
        <FrameButton primary text="认领村社" @click="show = false; emit('apply')" width="220rpx" />
      </FlexRow>
    </FlexCol>
  </CommonDialog>
</template>

<script setup lang="ts">
import CommonDialog from '@/common/components/CommonDialog.vue';
import FrameButton from '@/common/components/FrameButton.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { ref } from 'vue';

const show = ref(false);
const emit = defineEmits(['apply','cancel']);

defineExpose({
  show: () => {
    show.value = true;
  },
});
</script>