<!-- 模板部分，生成HTML -->
<template>
  <div id="app">
    <Header />
     <!-- 飘 🌸蒙版 -->
    <div class="snow" id="snow"></div>
    <RouterView></RouterView>
  </div>
</template>

<!-- 控制模板数据与行为 -->
<script setup lang="js" name="App">
import Header from './components/Header.vue';
import { RouterView } from 'vue-router';
import { Snow } from 'jparticles';
import { onMounted} from 'vue';
import { sakura } from './assets/sakura';

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

onMounted(() => {
 new Snow('#snow', 
  { 
    num: getRandomInt(1,2), 
    color: '#fff',
    maxR: 3, 
    minR: 12, 
    maxSpeed: 0.3, 
    minSpeed: 0.1, 
    swing: true, 
    swingProbability: 0.1, 
    spin: true, 
    shape: sakura(),
  });
});
</script>

<!-- 样式部分,定义CSS样式 -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  position: relative; 
  z-index: 1;

}
/* 背景图层 */
#app::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: url('./assets/background.jpg') no-repeat center center / cover;
  opacity: 0.3; /* 不透明度，可调整 */
  pointer-events: none;
}
.snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  pointer-events: none;
}
</style>
