<template>
  <div v-if="!isMobile" class="cover">
    <img class="cover__img" src="./images/bg2.png" draggable="false" />
    <img class="cover__title" src="./images/title.png" draggable="false" />
    <img class="cover__guide" src="./images/guide.png" draggable="false" />

    <img
      class="cover__btn"
      src="./images/btn.png"
      draggable="false"
      @click="$router.push({ name: 'home' })"
    />
  </div>

  <div v-else class="mb-cover">
    <img class="mb-cover__img" src="./images/mobile/bg2.png" draggable="false" />
    <img class="mb-cover__title" src="./images/title.png" draggable="false" />
    <img class="mb-cover__guide" src="./images/guide.png" draggable="false" />

    <img
      class="mb-cover__btn"
      src="./images/btn.png"
      draggable="false"
      @click="$router.push({ name: 'home' })"
    />
  </div>
</template>

<script setup>
  import { judgeIsMobile } from '@/utils';

  const isMobile = judgeIsMobile();
</script>

<style lang="scss" scoped>
  @use './index.scss';
</style>
