njDaTuSha/src/pages/Loading.vue

<template>
  <div class="page pg-bg loading-pg">
    <div class="content">
      <div class="load-main">
        <img class="main-img" src="/images/loading/main.png" alt="">
        <div v-if="percent !== '100%'">
          <div class="process-bar"></div>
          <div class="process-percent">{{percent}}</div>
        </div>
        <div v-else class="select-lan">
          <div><Btn class="btn" @click="onSelect('zh')">中文版</Btn></div>
          <div><Btn class="btn" @click="onSelect('en')">English</Btn></div>
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="/images/loading/allrights.png" alt="">
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import Btn from '@/components/Btn.vue';
  import { useI18n } from 'vue-i18n';
  import { preload } from '@/utils/preload'

  const emit = defineEmits(['ready']);

  const percent = ref('0%');
  const { locale } = useI18n();
  
  const onSelect = lan => {
    locale.value = lan;
    emit('ready');
  }

  const onProcess = (val) => {
    console.log('----loading->', val);
    
    const p = Number(val * 100).toFixed(2);
    if (p >= 1) {
      percent.value = '100%';
    } else {
      percent.value = `${p}%`;
    }
  }

  onMounted(() => {
    preload(onProcess)
  });

</script>

<style lang="less" scoped>
.loading-pg {
  display: flex;
  flex-direction: column;

  &.hidden {
    display: none;
  }

  .content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .load-main {
      text-align: center;
      width: 70vw;
      flex: none;

      .main-img {
        width: 80%;
        margin: auto;
      }

      .process-bar {
        position: relative;
        z-index: 0;
        margin-top: 36px;
        width: 100%;
        height: 2px;
        background: #b9a58a;

        &::before {
          content: '';
          position: absolute;
          z-index: 1;
          width: v-bind(percent);
          height: 100%;
          left: 0;
          top: 0;
          background: #847560;
        }

        &::after {
          content: '';
          position: absolute;
          z-index: 2;
          width: 24px;
          height: 24px;
          background-image: url(/images/loading/loader.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          left: calc(v-bind(percent) - 12px);
          top: -11px;
        }
      }

      .process-percent {
        text-align: center;
        color: #5c4034;
        font-size: 1.2em;
        margin-top: 1em;
      }
    }

    .select-lan {
      margin-top: 100px;

      div {
        & + div {
          margin-top: 10vw;
        }
      }
    }
  }

  .footer {
    box-sizing: border-box;
    flex: none;
    height: 100px;
    padding: 16px 48px;
  }
}
</style>