<script setup lang="ts">
import { motion } from "motion-v";
</script>

<template>
  <motion.div
    class="overflow-x-hidden font-sans"
    :key="$route.fullPath"
    :initial="{ opacity: 0 }"
    :animate="{ opacity: 1, transition: { duration: 0.5, ease: 'easeOut' } }"
  >
    <router-view></router-view>
  </motion.div>
</template>

<style scoped>
/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 5px; /* 修改宽度 */
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #0a5f73;
}

/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #30459c;
}
</style>
