<script setup>
import { ref, computed, watch, onMounted } from "vue"
import { useRouter } from 'vue-router'

defineProps({
  show: true
})

onMounted(() => {
})

const router = useRouter();
const navigateTodoList = () => {
  router.push({
    name: 'home'
  })
}

</script>

<template>
  <div :show="show">
    <div class="home-wrapper" style="z-index: 9;">
      <div class="scene-item item-1">
        <img src="../assets/images/back-btn.webp" @click="navigateTodoList" alt="后退">
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-wrapper {
  width: 100%;
  height: 92vh;
  background-image: url('src/assets/images/generate-loading.webp');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: -webkit-fill-available;
}

.scene-item {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.4s ease;
  overflow: hidden;
  border: 3px solid transparent;
  animation: float 4s ease-in-out infinite;
}

.scene-item:hover {
  transform: scale(1.05);
  z-index: 10;
}

.scene-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-1 {
  width: 20px;
  top: 6.7%;
  left: 5%;
  animation-delay: 0s;
}

.item-2 {
  width: 240px;
  bottom: 28px;
  animation-delay: 0s;
}

.item {
  width: 48px;
}
.item-4 {
  width: 48px;
  top: 30.6%;
  left: 44.5%;
}
.item-5 {
  width: 48px;
  top: 34%;
  left: 72%;
}
.item-6 {
  width: 48px;
  top: 49.4%;
  left: 36.6%;
}
.item-7 {
  width: 48px;
  top: 40%;
  left: 57.5%;
}
</style>