<template>
  <div :class="isMobile ? 'm-cover' : 'cover'">
    <template v-if="!isMobile">
      <img class="cover__logo" draggable="false" src="./images/logo-min.png" />
      <img class="cover__title" draggable="false" src="./images/title-min.png" />
      <img
        class="cover__btn"
        draggable="false"
        src="./images/btn-min.png"
        @click="$router.push({ name: 'home' })"
      />
    </template>

    <template v-else>
      <img class="m-cover__logo" draggable="false" src="./images/logo-min.png" />
      <img class="m-cover__title" draggable="false" src="./images/title-min.png" />
      <img class="m-cover__copyright" draggable="false" src="./images/copyright-min.png" />
      <img
        class="m-cover__btn"
        draggable="false"
        src="./images/btn-min.png"
        @click="$router.push({ name: 'home' })"
      />
    </template>
  </div>
</template>

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

  const isMobile = judgeIsMobile();
</script>

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