<script setup>
  import { useRouter} from 'vue-router'
  import Footer from '@/components/Footer.vue'

  const router = useRouter()

</script>


<template>
  <div class="level page">
    
    <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
      <template #title>
        <h5 class="text-white mb-1"><strong>自製名片</strong></h5>
      </template>
      <template #left>
        <h4><i class="fa-solid fa-angle-left text-white" :style="{opacity:0.5}"></i></h4>
      </template>
    </van-nav-bar>
    
    <van-cell-group inset class="mt-3">
      <div class="text-darkBlue text-center py-5">
        <div class="text-tomatoRed text-center mb-4"><i class="fa-solid fa-triangle-exclamation fa-5x"></i></div>
        <h5 class="text-darkBlue text-center mb-2"><strong>您沒有設定自製名片權限</strong></h5>
        <h6 class="text-darkBlue text-center mb-5">請點選下方立即購買按鈕<br />開通自製名片相關服務</h6>

        <van-button class="btn-darkBlue px-5" icon="balance-o" size="normal" @click="router.push('/shop')">立即購買</van-button>
      </div>
    </van-cell-group>
  </div>
</template>

<style src="@/assets/css/main.css"></style>

<style lang="less" scoped>

</style>