<template>
  <div class="home">
    <!-- 背景 -->
    <div
      class="bg-mask"
      :style="{ background: curPageIndex == 2 ? `rgba(85,116,83,0.8)` : `` }"
    />
    <!-- 开场动画 -->
    <Transition name="fade-out">
      <Startup
        class="startup"
      />
    </Transition>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import Startup from "@/views/StartupView.vue"


const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject("$env")
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  > .bg-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(60, 89, 71, 0.65);
    backdrop-filter: blur(
      calc(
        22 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      )
    );
  }

  > .startup {
    z-index: 20;
  }
}
</style>
