feats

src/components/Bell.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bell-box" @click="toggle">
     <div>
-      <div class="center circle abs">
+      <!-- <div class="center circle abs">
         <div class="inner" :class="{'circle-ani': animate}" />
       </div>
       <div class="center circle abs">
@@ -9,7 +9,9 @@
       </div>
       <div class="center bell-img">
         <img :class="{'bell-ani': animate}" src="/images/pg1/bell.png" alt="">
-      </div>
+      </div> -->
+      <img src="/images/dove.gif" v-if="animate" alt="">
+      <img src="/images/dove.png" v-else alt="">
     </div>
   </div>
 </template>
@@ -25,7 +27,7 @@ const animate = computed(() => state.value === 1);
 
 <style lang="less" scoped>
 .bell-box {
-  @size: 10vw;
+  @size: 12vw;
 
   width: @size;
   height: @size;

src/pages/Loading.vue

@@ -37,8 +37,9 @@
   const percent = ref('0%');
 
   const onClick = () => {
-    finished.value = true;
+    if (percent.value != '100%') return;
 
+    finished.value = true;
     const t = setTimeout(() => {
       emit('ready');
       clearTimeout(t)

src/pages/pg1/InMap.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="in-map-wrapper">
+    <img src="/images/pg1/map.png" alt="" @load="onLoad">
+    
+    <template v-for="(item, inx) in flowers" :key="item.name">
+      <div
+        class="flower"
+        :style="{left: item.left, top: item.top }"
+      >
+        <div>
+          <img
+            class="flower animate__animated animate__fadeIn animate__infinite"
+            :style="{animationDelay: `${(inx+1) * 200}ms`}"
+            src="/images/logo.png" alt="">
+          <div class="country" :style="getTxtStyle(item)">{{item.name}}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+
+  const flowers = ref([]);
+
+  const getTxtStyle = (item) => {
+    const space = 16;
+    switch (item.direct) {
+      case 'top-left':
+        return { top: `-${space}px`, left: `-45px` };
+      case 'top-right':
+        return { top: `-${space}px`, right: `-45px` };
+      case 'right':
+        return { top: `-${space / 3}px`, right: `-85px`, textAlign: 'left' };
+      case 'left':
+        return { top: `0px`, left: `-85px`, textAlign: 'right' };
+      case 'top':
+        return { top: `-${space}px`, left: `-35px` };
+      default:
+        return { bottom: `-${space}px`, left: `-35px` };
+    }
+  };
+
+  const onLoad = (e) => {
+
+    const { width, height, naturalWidth, naturalHeight } = e.target;
+    const ratio = width / naturalWidth;
+
+    const countries = [
+      { name: '中国', pos: [316,184], direct: 'top-left' },
+      { name: '芬兰', pos: [190,79], direct: 'top' },
+      { name: '英国', pos: [112,91], direct: 'top' },
+      { name: '德国', pos: [135,110], direct: 'right' },
+      { name: '瑞士', pos: [113,123], direct: 'left' },
+      { name: '土耳其', pos: [156,153], direct: 'bottom' },
+      { name: '韩国', pos: [348,181], direct: 'bottom' },
+      { name: '日本', pos: [377,178], direct: 'top-right' },
+      { name: '马来西亚', pos: [280,264], direct: 'right' },
+      { name: '新加坡', pos: [295,280], direct: 'bottom' },
+      { name: '澳大利亚', pos: [364,351], direct: 'bottom' },
+      { name: '新西兰', pos: [448,401], direct: 'bottom' },
+      { name: '加拿大', pos: [609,124], direct: 'top' },
+      { name: '美国', pos: [663,146], direct: 'bottom' },
+    ];
+
+    const list = countries.map(country => {
+      return {
+        ...country,
+        left: `${country.pos[0] * ratio}px`,
+        top: `${country.pos[1] * ratio}px`,
+      }
+    });
+    
+console.log('------onLoad-----', list);
+
+    flowers.value = list;
+  }
+
+
+</script>
+
+<style lang="less" scoped>
+.in-map-wrapper {
+  position: relative;
+
+  .flower {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    z-index: 2;
+
+    & > div {
+      position: relative;
+    }
+
+    .country {
+      position: absolute;
+      width: 80px;
+      height: 16px;
+      line-height: 16px;
+      text-align: center;
+      color: #C18FC8;
+    }
+  }
+}
+</style>

src/pages/pg1/Md1.vue

@@ -15,7 +15,9 @@
           近20万枚紫金草徽章佩戴在了人们的心口。
         </p>
         <!-- <div class="map-img" ref="mapRef" /> -->
-        <img class="map-img" src="/images/pg2/map.gif" alt="">
+        <!-- <img class="map-img" src="/images/pg2/map.gif" alt=""> -->
+
+        <InMap />
       </div>
     </div>
   </Modal>
@@ -24,6 +26,7 @@
 <script setup>
   import { onMounted, ref, watch } from 'vue';
   import Modal from '@/components/Modal.vue';
+  import InMap from './InMap.vue';
 
   const mapRef = ref()
   const loaded = ref(false);

src/pages/pg2-2/Bell.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bell-box" @click="toggle">
     <div>
-      <div class="center circle abs">
+      <!-- <div class="center circle abs">
         <div class="inner" :class="{'circle-ani': animate}" />
       </div>
       <div class="center circle abs">
@@ -9,7 +9,9 @@
       </div>
       <div class="center bell-img">
         <img :class="{'bell-ani': animate}" src="/images/pg1/bell.png" alt="">
-      </div>
+      </div> -->
+      <img src="/images/dove.gif" v-if="animate" alt="">
+      <img src="/images/dove.png" v-else alt="">
     </div>
     <audio ref="el" src="/audio/audio2.mp3" style="max-width: 0" loop preload="auto" ></audio>
   </div>

src/utils/resources.js

@@ -16,6 +16,8 @@ export const resources = [
   { image: './images/loading/飞机3.png' },
 
   // { image: './images/BG.jpg', },
+  { image: './images/dove.gif' },
+  { image: './images/dove.png' },
   { image: './images/close.png' },
   { image: './images/cloud-texture.png' },
   { image: './images/down.png' },