ai_mooc_h5/src/pages/caiji/rx/read.vue

<script setup lang='ts'>
import frame from '~/assets/caiji/framerx.webp'

const router = useRouter()

function onClickLeft() {
  router.back()
}

const leftTime = ref(15)
const timer = ref()

onMounted(() => {
  timer.value = setInterval(() => {
    leftTime.value--
    if (leftTime.value === 0) {
      clearInterval(timer.value)
    }
  }, 1000)
})


</script>

<template>
  <van-nav-bar title="人像采集" left-arrow @click-left="onClickLeft"></van-nav-bar>
  <div class="flex-auto w-full flex flex-col items-center justify-between py-72px px-6 box-border">
    <div class="w-full flex flex-col items-center mb-12">
      <img class="w-108px mt-6px" :src="frame" alt="">
      <div class="text-xl mt-16px">定制你的专属人像</div>
      <div class="text-base mt-22px">保持环境安静</div>
      <div class="text-base">按照指令做出动作</div>
    </div>

    <van-button v-if="leftTime" type="danger" size="large" block disabled>{{leftTime}}s 我已知悉</van-button>
    <van-button v-else type="success" size="large" block icon="success" @click="router.replace({name:'caiji-rx-name'})" >我已知悉</van-button>

  </div>
</template>