WuxiCharityMuseum/src/components/StartUp.vue

<template>
  <div class="start-up">
    <div class="loading-bar">
      <div
        class="loading-progress"
        :style="{
          width: `${progress * 100}%`,
        }"
      />
      <img
        src="@/assets/images/icon_shop-active.png"
        alt=""
        class="cursor"
        draggable="false"
        :style="{
          left: `${progress * 100}%`,
        }"
      >
    </div>
    <div class="text">
      LOADING...
    </div>
  </div>
</template>

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

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

const emit = defineEmits(['loading-over'])

const progress = ref(0)
let intervalId = null
onMounted(() => {
  intervalId = setInterval(() => {
    progress.value += 0.03
    if (progress.value >= 0.96) {
      clearInterval(intervalId)
      progress.value = 1
      emit('loading-over')
    }
  }, 100)
})

</script>

<style lang="less" scoped>
.start-up{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: #fff;
  background-image: url(@/assets/images/start-up-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  >.loading-bar{
    position: absolute;
    bottom: 103px;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(1325 / 1920 * 100%);
    height: 14px;
    border-radius: 7px;
    background: rgba(0,0,0,0.19);
    border: 1px solid #FFFFFF;
    >.loading-progress{
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: #FF8888;
      border-radius: 7px;
    }
    >img.cursor {
      position: absolute;
      bottom: 100%;
      transform: translate(-50%, 0);
      width: 73px;
    }
  }
  >.text{
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translate(-50%, 0);
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 30px;
    color: #FF9494;
    line-height: 35px;
  }
}
</style>