feats

src/App.vue

@@ -1,6 +1,6 @@
 <script setup>
   import { computed, onMounted, ref } from 'vue';
-  import Loader from '@/components/Loader.vue';
+  import Loader from '@/components/Loader2.vue';
   import ScrollDown from '@/components/ScrollDown.vue';
   import Image from '@/components/Image.vue';
   import { useModel } from "@zjxpcyc/vue-tiny-store";

src/components/CustMap.vue

@@ -126,7 +126,7 @@
 
     const last = distance[0];
     const diff = 86;  // 86 为一个误差值, 距离大于 86 意味这没有点击景点
-    console.log('------last----->', last)
+    // console.log('------last----->', last)
     if (last.s < diff) {
       scenicSpots.value = last;
       show.value = true;

src/components/Loader2.vue

@@ -0,0 +1,130 @@
+<template>
+  <div 
+    class="loader-wrapper"
+    @touchmove.prevent
+    @mousewheel.prevent
+  >
+    <div class="loader-mask">
+      <img :src="maskImg" alt="" @load="onLoad">
+      <div class="mask-fill" :style="fillStyle"></div>
+    </div>
+    <div class="back-blank" v-if="showBack" :style="bbStyle">
+      <div class="back-move" :style="bmStyle"></div>
+    </div>
+    <p class="percent">{{percent}}%</p>
+  </div>
+</template>
+
+<script setup>
+  import { computed, reactive, ref, watch } from "vue"
+
+  const props = defineProps({
+    tip: {
+      type: String,
+      default: 'loading...'
+    },
+    percent: {
+      type: Number,
+      default: 0
+    },
+    loading: Boolean
+  })
+
+  const elRef = ref();
+  const showBack = ref(false);
+  const progressStyle = computed(() => ({ width: `${props.percent}%` }));
+
+  const maskImg = './mask.png';
+  const maskFontHeight = [186, 726]; // mask.png 字的高度
+
+  const fillStyle = ref({});
+  const bbStyle = ref({});
+
+  const bmStyle = computed(() => {
+    return {
+      top: `${0 - props.percent}%`,
+    }
+  })
+
+  const onLoad = e => {
+    const { height, naturalHeight } = e.target;
+    const yRate = height / naturalHeight;
+
+    fillStyle.value = { top: `${height}px` };
+    showBack.value = true;
+    bbStyle.value = {
+      height: `${yRate * (maskFontHeight[1] - maskFontHeight[0])}px`,
+      top: `${yRate * maskFontHeight[0]}px`,
+    }
+  }
+
+</script>
+
+
+<style lang="less" scoped>
+@tip-color: #933D33;
+
+.loader-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  overflow: hidden;
+  background: transparent;
+  
+  .loader-mask {
+    background: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 20;
+    overflow: hidden;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+
+    .mask-fill {
+      background: var(--bg-color);
+      width: 100%;
+      height: 100%;
+      left: 0;
+    }
+  }
+  .percent {
+    position: absolute;
+    color: @tip-color;
+    text-align: center;
+    width: 100%;
+    bottom: 120px;
+    left: 0;
+    z-index: 30;
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .back-blank {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    .back-move {
+      background: var(--bg-color);
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+</style>

src/style.css

@@ -8,6 +8,8 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+
+  --bg-color: #D7DDD3;
 }
 
 html, body, #app {