|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+<template>
|
|
|
2
|
+ <div class="in-map-wrapper">
|
|
|
3
|
+ <img src="/images/pg1/map.png" alt="" @load="onLoad">
|
|
|
4
|
+
|
|
|
5
|
+ <template v-for="(item, inx) in flowers" :key="item.name">
|
|
|
6
|
+ <div
|
|
|
7
|
+ class="flower"
|
|
|
8
|
+ :style="{left: item.left, top: item.top }"
|
|
|
9
|
+ >
|
|
|
10
|
+ <div>
|
|
|
11
|
+ <img
|
|
|
12
|
+ class="flower animate__animated animate__fadeIn animate__infinite"
|
|
|
13
|
+ :style="{animationDelay: `${(inx+1) * 200}ms`}"
|
|
|
14
|
+ src="/images/logo.png" alt="">
|
|
|
15
|
+ <div class="country" :style="getTxtStyle(item)">{{item.name}}</div>
|
|
|
16
|
+ </div>
|
|
|
17
|
+ </div>
|
|
|
18
|
+ </template>
|
|
|
19
|
+ </div>
|
|
|
20
|
+</template>
|
|
|
21
|
+
|
|
|
22
|
+<script setup>
|
|
|
23
|
+ import { onMounted, ref } from 'vue';
|
|
|
24
|
+
|
|
|
25
|
+ const flowers = ref([]);
|
|
|
26
|
+
|
|
|
27
|
+ const getTxtStyle = (item) => {
|
|
|
28
|
+ const space = 16;
|
|
|
29
|
+ switch (item.direct) {
|
|
|
30
|
+ case 'top-left':
|
|
|
31
|
+ return { top: `-${space}px`, left: `-45px` };
|
|
|
32
|
+ case 'top-right':
|
|
|
33
|
+ return { top: `-${space}px`, right: `-45px` };
|
|
|
34
|
+ case 'right':
|
|
|
35
|
+ return { top: `-${space / 3}px`, right: `-85px`, textAlign: 'left' };
|
|
|
36
|
+ case 'left':
|
|
|
37
|
+ return { top: `0px`, left: `-85px`, textAlign: 'right' };
|
|
|
38
|
+ case 'top':
|
|
|
39
|
+ return { top: `-${space}px`, left: `-35px` };
|
|
|
40
|
+ default:
|
|
|
41
|
+ return { bottom: `-${space}px`, left: `-35px` };
|
|
|
42
|
+ }
|
|
|
43
|
+ };
|
|
|
44
|
+
|
|
|
45
|
+ const onLoad = (e) => {
|
|
|
46
|
+
|
|
|
47
|
+ const { width, height, naturalWidth, naturalHeight } = e.target;
|
|
|
48
|
+ const ratio = width / naturalWidth;
|
|
|
49
|
+
|
|
|
50
|
+ const countries = [
|
|
|
51
|
+ { name: '中国', pos: [316,184], direct: 'top-left' },
|
|
|
52
|
+ { name: '芬兰', pos: [190,79], direct: 'top' },
|
|
|
53
|
+ { name: '英国', pos: [112,91], direct: 'top' },
|
|
|
54
|
+ { name: '德国', pos: [135,110], direct: 'right' },
|
|
|
55
|
+ { name: '瑞士', pos: [113,123], direct: 'left' },
|
|
|
56
|
+ { name: '土耳其', pos: [156,153], direct: 'bottom' },
|
|
|
57
|
+ { name: '韩国', pos: [348,181], direct: 'bottom' },
|
|
|
58
|
+ { name: '日本', pos: [377,178], direct: 'top-right' },
|
|
|
59
|
+ { name: '马来西亚', pos: [280,264], direct: 'right' },
|
|
|
60
|
+ { name: '新加坡', pos: [295,280], direct: 'bottom' },
|
|
|
61
|
+ { name: '澳大利亚', pos: [364,351], direct: 'bottom' },
|
|
|
62
|
+ { name: '新西兰', pos: [448,401], direct: 'bottom' },
|
|
|
63
|
+ { name: '加拿大', pos: [609,124], direct: 'top' },
|
|
|
64
|
+ { name: '美国', pos: [663,146], direct: 'bottom' },
|
|
|
65
|
+ ];
|
|
|
66
|
+
|
|
|
67
|
+ const list = countries.map(country => {
|
|
|
68
|
+ return {
|
|
|
69
|
+ ...country,
|
|
|
70
|
+ left: `${country.pos[0] * ratio}px`,
|
|
|
71
|
+ top: `${country.pos[1] * ratio}px`,
|
|
|
72
|
+ }
|
|
|
73
|
+ });
|
|
|
74
|
+
|
|
|
75
|
+console.log('------onLoad-----', list);
|
|
|
76
|
+
|
|
|
77
|
+ flowers.value = list;
|
|
|
78
|
+ }
|
|
|
79
|
+
|
|
|
80
|
+
|
|
|
81
|
+</script>
|
|
|
82
|
+
|
|
|
83
|
+<style lang="less" scoped>
|
|
|
84
|
+.in-map-wrapper {
|
|
|
85
|
+ position: relative;
|
|
|
86
|
+
|
|
|
87
|
+ .flower {
|
|
|
88
|
+ position: absolute;
|
|
|
89
|
+ width: 8px;
|
|
|
90
|
+ height: 8px;
|
|
|
91
|
+ z-index: 2;
|
|
|
92
|
+
|
|
|
93
|
+ & > div {
|
|
|
94
|
+ position: relative;
|
|
|
95
|
+ }
|
|
|
96
|
+
|
|
|
97
|
+ .country {
|
|
|
98
|
+ position: absolute;
|
|
|
99
|
+ width: 80px;
|
|
|
100
|
+ height: 16px;
|
|
|
101
|
+ line-height: 16px;
|
|
|
102
|
+ text-align: center;
|
|
|
103
|
+ color: #C18FC8;
|
|
|
104
|
+ }
|
|
|
105
|
+ }
|
|
|
106
|
+}
|
|
|
107
|
+</style>
|
Yansen
2 年之前
