//  wh-full 是unocss的写法，代码宽高100%
<div  wh-full :style="{ backgroundImage: `url(${bgImg})` }" id="box"></div>

const timerRain = ref(null)

const bgRain = () => {
  timerRain.value = setInterval(function () {
    //创建rain元素
    var rain = document.createElement('div')

    //初始化 rain属性
    rain.style.position = 'fixed' //设置固定定位
    rain.style.height = '100px' //雨滴的高度
    rain.style.width = '2px' //雨滴的宽度
    rain.style.backgroundColor = 'white' //雨滴的颜色
    rain.style.filter = 'blur(1px)' //模糊 阴影
    rain.style.top = '0px' //雨滴距离屏幕的高度

    rain.style.left = Math.random() * 1920 + 'px' //随机化位置 1920:分辨率 宽度
    rain.style.opacity = parseInt(Math.random() * 10) / 10 + '' //随机化透明度

    var box = document.getElementById('box')

    //向box里添加节点 rain
    box.appendChild(rain)
    var timer = setInterval(function () {
      var height = parseInt(rain.style.top)
      var k = 1
      k++
      rain.style.top = height + 5 * Math.pow(k, 2) + 'px' //模拟重力加速 pow:幂 k的2次方

      //当雨滴到达底部后消失并清除子节点rain
      if (rain.style.top >= '900px') {
        clearInterval(timer)
        rain.parentNode.removeChild(rain)
      }
    }, 10) //每隔10ms 雨滴下一次
  }, 10) //每隔10ms生成水滴
}
bgRain()

onUnmounted(() => {
  if (timerRain.value) {
    //如果定时器还在运行 或者直接关闭，不用判断
    clearInterval(timerRain.value) //关闭
  }
})