wenhua818/src/App.vue

<script setup>
import { computed, onMounted, ref } from 'vue';
import Loader from '@/components/Loader.vue';
import ScrollDown from '@/components/ScrollDown.vue';
import Image from '@/components/Image.vue';
import { preload } from '@/utils/preload';
import scroll from '@/utils/scroll'

const fixedLogo = './fixed-logo.png';

const loading = ref(true);
const percent = ref(0);
const resources = ref([]);
const fixedLogoHidden = ref(false);
const unScroll = ref()

const updateCallback = (num) => {
  percent.value = Math.round(num * 100);
}

const onClick = () => {
  // logo2URL 来自于 public/config.js
  window.location.href = logo2URL;
}

onMounted(() => {
  const { onStart, onEnd } = scroll(window.document);

  onStart(() => {
    fixedLogoHidden.value = true;
  })

  onEnd(() => {
      fixedLogoHidden.value = false;
  })

  preload(updateCallback).then((res) => {
    loading.value = false;
    resources.value = res.filter(x => !x.hidden);
  })
});
</script>

<template>
  <Loader :loading="loading" :percent="percent" />
  <ScrollDown />
  <Image v-for="(res, index) in resources" :key="res.image" :resource="res" :index="index"></Image>
  <img :src="fixedLogo" alt="" class="fixed-log" :class="{ 'hidden': fixedLogoHidden }" @click="onClick">
</template>

<style lang="less" scoped>
.fixed-log {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 50;
  width: 48px;
  height: 48px;
  border: none;
  box-shadow: 0 0 2px 2px rgba(0,0,0, .1);
  border-radius: 50%;
  transition: all 0.6s;
  opacity: 1;
  will-change: right opacity;

  &.hidden {
    right: -10px;
    opacity: 0;
  }
}
</style>