H5
/
njDaTuSha
İzle 4
Yıldızla 0
Çatalla 0
Kod Sorunlar 0 Değişiklik İstekleri 0 Sürümler 1 Wiki Aktivite
Kaynağa Gözat

feats

Yansen 2 yıl önce
işleme
1ba102e305
63 değiştirilmiş dosya ile 3098 ekleme ve 0 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 1
    0
      .env.development
  2. 1
    0
      .env.production
  3. 24
    0
      .gitignore
  4. 7
    0
      README.md
  5. 21
    0
      index.html
  6. 24
    0
      package.json
  7. 12
    0
      public/config.js
  8. 539
    0
      public/fonts/demo.css
  9. 443
    0
      public/fonts/demo_index.html
  10. 61
    0
      public/fonts/iconfont.css
  11. 1
    0
      public/fonts/iconfont.js
  12. 86
    0
      public/fonts/iconfont.json
  13. 41
    0
      public/fonts/iconfont.svg
  14. BIN
      public/fonts/iconfont.ttf
  15. BIN
      public/fonts/iconfont.woff
  16. BIN
      public/fonts/iconfont.woff2
  17. BIN
      public/images/pg1/14个国家.png
  18. BIN
      public/images/pg1/2亿人.png
  19. BIN
      public/images/pg1/30万文字.png
  20. BIN
      public/images/pg1/BG.png
  21. BIN
      public/images/pg1/关闭按钮.png
  22. BIN
      public/images/pg1/紫金草行动logo.png
  23. BIN
      public/images/pg1/花丛.png
  24. BIN
      public/images/pg1/近20万枚.png
  25. BIN
      public/images/pg1/音乐按钮.png
  26. BIN
      public/images/pg2/2de9913336480164862438fd1dd3f4a6.jpg
  27. BIN
      public/images/pg2/BG.jpg
  28. BIN
      public/images/pg2/index.png
  29. BIN
      public/images/pg2/smoke.png
  30. BIN
      public/images/pg2/了解故事.png
  31. BIN
      public/images/pg2/云1.png
  32. BIN
      public/images/pg2/云2.png
  33. BIN
      public/images/pg2/前景土堆.png
  34. BIN
      public/images/pg2/废墟中的绯红.png
  35. BIN
      public/images/pg2/远山.png
  36. 1
    0
      public/qrcode.min.js
  37. BIN
      public/share.jpg
  38. 10
    0
      public/vconsole.min.js
  39. 1
    0
      public/vite.svg
  40. 1
    0
      public/wx/jweixin-1.6.0.js
  41. 9
    0
      src/App.vue
  42. 1
    0
      src/assets/vue.svg
  43. 43
    0
      src/components/CoverBtn.vue
  44. 51
    0
      src/components/Image.vue
  45. 35
    0
      src/components/QrCode.vue
  46. 18
    0
      src/components/TGradient.vue
  47. 18
    0
      src/main.js
  48. 50
    0
      src/pages/index.vue
  49. 68
    0
      src/pages/pg1/index.vue
  50. 109
    0
      src/pages/pg2/index.vue
  51. 100
    0
      src/pages/pg2/smoke.vue
  52. 13
    0
      src/router.js
  53. 32
    0
      src/store/index.js
  54. 27
    0
      src/style.css
  55. 29
    0
      src/utils/amap.js
  56. 8
    0
      src/utils/page.js
  57. 112
    0
      src/utils/parallaxing.js
  58. 39
    0
      src/utils/preload.js
  59. 363
    0
      src/utils/resources.js
  60. 46
    0
      src/utils/scroll.js
  61. 70
    0
      src/utils/wx.js
  62. 22
    0
      vite.config.js
  63. 561
    0
      yarn.lock

+ 1
- 0
.env.development Dosyayı Görüntüle 

@@ -0,0 +1 @@
1 
+# VITE_APP_API_BASE=https://api.h5.njyunzhi.com/mp/jssdk

+ 1
- 0
.env.production Dosyayı Görüntüle 

@@ -0,0 +1 @@
1 
+# VITE_APP_API_BASE=/api/wx/jsapi

+ 24
- 0
.gitignore Dosyayı Görüntüle 

@@ -0,0 +1,24 @@
1 
+# Logs
2 
+logs
3 
+*.log
4 
+npm-debug.log*
5 
+yarn-debug.log*
6 
+yarn-error.log*
7 
+pnpm-debug.log*
8 
+lerna-debug.log*
9 
+
10 
+node_modules
11 
+dist
12 
+dist-ssr
13 
+*.local
14 
+
15 
+# Editor directories and files
16 
+.vscode/*
17 
+!.vscode/extensions.json
18 
+.idea
19 
+.DS_Store
20 
+*.suo
21 
+*.ntvs*
22 
+*.njsproj
23 
+*.sln
24 
+*.sw?

+ 7
- 0
README.md Dosyayı Görüntüle 

@@ -0,0 +1,7 @@
1 
+# Vue 3 + Vite
2 
+
3 
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4 
+
5 
+## Recommended IDE Setup
6 
+
7 
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

+ 21
- 0
index.html Dosyayı Görüntüle 

@@ -0,0 +1,21 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <link rel="stylesheet" href="./fonts/iconfont.css">
8 
+    <script src="./wx/jweixin-1.6.0.js"></script>
9 
+    <script src="./qrcode.min.js"></script>
10 
+    <script src="./config.js"></script>
11 
+    <title>和“宁好”一起，跟着诗歌游南京</title>
12 
+    <!-- <script src="./vconsole.min.js"></script>
13 
+    <script>
14 
+      const vConsole = new VConsole();
15 
+    </script> -->
16 
+  </head>
17 
+  <body>
18 
+    <div id="app"></div>
19 
+    <script type="module" src="/src/main.js"></script>
20 
+  </body>
21 
+</html>

+ 24
- 0
package.json Dosyayı Görüntüle 

@@ -0,0 +1,24 @@
1 
+{
2 
+  "name": "wenhua818",
3 
+  "private": true,
4 
+  "version": "0.0.0",
5 
+  "type": "module",
6 
+  "scripts": {
7 
+    "dev": "vite",
8 
+    "build": "vite build",
9 
+    "preview": "vite preview"
10 
+  },
11 
+  "dependencies": {
12 
+    "@zjxpcyc/vue-tiny-store": "^1.0.1",
13 
+    "html2canvas": "^1.4.1",
14 
+    "v-viewer": "^3.0.10",
15 
+    "viewerjs": "1.9.0",
16 
+    "vue": "^3.2.37",
17 
+    "vue-router": "4"
18 
+  },
19 
+  "devDependencies": {
20 
+    "@vitejs/plugin-vue": "^3.0.3",
21 
+    "less": "^4.1.3",
22 
+    "vite": "^3.0.7"
23 
+  }
24 
+}

+ 12
- 0
public/config.js Dosyayı Görüntüle 

@@ -0,0 +1,12 @@
1 
+// 微信分享
2 
+const shareOptTpl = {
3 
+  title: '和“宁好”一起，跟着诗歌游南京',
4 
+  desc: '',
5 
+  imgUrl: location.origin + location.pathname.replace('index.html', '') + 'share.jpg',
6 
+}
7 
+
8 
+// 跳转链接
9 
+const link1URL = 'http://h5.njyunzhi.com/wenhua818-2/index.html';
10 
+
11 
+// 分享接口地址
12 
+const API_BASE = 'http://test-h5.njyunzhi.com/api/wx/jsapi';

+ 539
- 0
public/fonts/demo.css Dosyayı Görüntüle 

@@ -0,0 +1,539 @@
1 
+/* Logo 字体 */
2 
+@font-face {
3 
+  font-family: "iconfont logo";
4 
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
5 
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
6 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
7 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
8 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
9 
+}
10 
+
11 
+.logo {
12 
+  font-family: "iconfont logo";
13 
+  font-size: 160px;
14 
+  font-style: normal;
15 
+  -webkit-font-smoothing: antialiased;
16 
+  -moz-osx-font-smoothing: grayscale;
17 
+}
18 
+
19 
+/* tabs */
20 
+.nav-tabs {
21 
+  position: relative;
22 
+}
23 
+
24 
+.nav-tabs .nav-more {
25 
+  position: absolute;
26 
+  right: 0;
27 
+  bottom: 0;
28 
+  height: 42px;
29 
+  line-height: 42px;
30 
+  color: #666;
31 
+}
32 
+
33 
+#tabs {
34 
+  border-bottom: 1px solid #eee;
35 
+}
36 
+
37 
+#tabs li {
38 
+  cursor: pointer;
39 
+  width: 100px;
40 
+  height: 40px;
41 
+  line-height: 40px;
42 
+  text-align: center;
43 
+  font-size: 16px;
44 
+  border-bottom: 2px solid transparent;
45 
+  position: relative;
46 
+  z-index: 1;
47 
+  margin-bottom: -1px;
48 
+  color: #666;
49 
+}
50 
+
51 
+
52 
+#tabs .active {
53 
+  border-bottom-color: #f00;
54 
+  color: #222;
55 
+}
56 
+
57 
+.tab-container .content {
58 
+  display: none;
59 
+}
60 
+
61 
+/* 页面布局 */
62 
+.main {
63 
+  padding: 30px 100px;
64 
+  width: 960px;
65 
+  margin: 0 auto;
66 
+}
67 
+
68 
+.main .logo {
69 
+  color: #333;
70 
+  text-align: left;
71 
+  margin-bottom: 30px;
72 
+  line-height: 1;
73 
+  height: 110px;
74 
+  margin-top: -50px;
75 
+  overflow: hidden;
76 
+  *zoom: 1;
77 
+}
78 
+
79 
+.main .logo a {
80 
+  font-size: 160px;
81 
+  color: #333;
82 
+}
83 
+
84 
+.helps {
85 
+  margin-top: 40px;
86 
+}
87 
+
88 
+.helps pre {
89 
+  padding: 20px;
90 
+  margin: 10px 0;
91 
+  border: solid 1px #e7e1cd;
92 
+  background-color: #fffdef;
93 
+  overflow: auto;
94 
+}
95 
+
96 
+.icon_lists {
97 
+  width: 100% !important;
98 
+  overflow: hidden;
99 
+  *zoom: 1;
100 
+}
101 
+
102 
+.icon_lists li {
103 
+  width: 100px;
104 
+  margin-bottom: 10px;
105 
+  margin-right: 20px;
106 
+  text-align: center;
107 
+  list-style: none !important;
108 
+  cursor: default;
109 
+}
110 
+
111 
+.icon_lists li .code-name {
112 
+  line-height: 1.2;
113 
+}
114 
+
115 
+.icon_lists .icon {
116 
+  display: block;
117 
+  height: 100px;
118 
+  line-height: 100px;
119 
+  font-size: 42px;
120 
+  margin: 10px auto;
121 
+  color: #333;
122 
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
123 
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
124 
+  transition: font-size 0.25s linear, width 0.25s linear;
125 
+}
126 
+
127 
+.icon_lists .icon:hover {
128 
+  font-size: 100px;
129 
+}
130 
+
131 
+.icon_lists .svg-icon {
132 
+  /* 通过设置 font-size 来改变图标大小 */
133 
+  width: 1em;
134 
+  /* 图标和文字相邻时，垂直对齐 */
135 
+  vertical-align: -0.15em;
136 
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
137 
+  fill: currentColor;
138 
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
139 
+      normalize.css 中也包含这行 */
140 
+  overflow: hidden;
141 
+}
142 
+
143 
+.icon_lists li .name,
144 
+.icon_lists li .code-name {
145 
+  color: #666;
146 
+}
147 
+
148 
+/* markdown 样式 */
149 
+.markdown {
150 
+  color: #666;
151 
+  font-size: 14px;
152 
+  line-height: 1.8;
153 
+}
154 
+
155 
+.highlight {
156 
+  line-height: 1.5;
157 
+}
158 
+
159 
+.markdown img {
160 
+  vertical-align: middle;
161 
+  max-width: 100%;
162 
+}
163 
+
164 
+.markdown h1 {
165 
+  color: #404040;
166 
+  font-weight: 500;
167 
+  line-height: 40px;
168 
+  margin-bottom: 24px;
169 
+}
170 
+
171 
+.markdown h2,
172 
+.markdown h3,
173 
+.markdown h4,
174 
+.markdown h5,
175 
+.markdown h6 {
176 
+  color: #404040;
177 
+  margin: 1.6em 0 0.6em 0;
178 
+  font-weight: 500;
179 
+  clear: both;
180 
+}
181 
+
182 
+.markdown h1 {
183 
+  font-size: 28px;
184 
+}
185 
+
186 
+.markdown h2 {
187 
+  font-size: 22px;
188 
+}
189 
+
190 
+.markdown h3 {
191 
+  font-size: 16px;
192 
+}
193 
+
194 
+.markdown h4 {
195 
+  font-size: 14px;
196 
+}
197 
+
198 
+.markdown h5 {
199 
+  font-size: 12px;
200 
+}
201 
+
202 
+.markdown h6 {
203 
+  font-size: 12px;
204 
+}
205 
+
206 
+.markdown hr {
207 
+  height: 1px;
208 
+  border: 0;
209 
+  background: #e9e9e9;
210 
+  margin: 16px 0;
211 
+  clear: both;
212 
+}
213 
+
214 
+.markdown p {
215 
+  margin: 1em 0;
216 
+}
217 
+
218 
+.markdown>p,
219 
+.markdown>blockquote,
220 
+.markdown>.highlight,
221 
+.markdown>ol,
222 
+.markdown>ul {
223 
+  width: 80%;
224 
+}
225 
+
226 
+.markdown ul>li {
227 
+  list-style: circle;
228 
+}
229 
+
230 
+.markdown>ul li,
231 
+.markdown blockquote ul>li {
232 
+  margin-left: 20px;
233 
+  padding-left: 4px;
234 
+}
235 
+
236 
+.markdown>ul li p,
237 
+.markdown>ol li p {
238 
+  margin: 0.6em 0;
239 
+}
240 
+
241 
+.markdown ol>li {
242 
+  list-style: decimal;
243 
+}
244 
+
245 
+.markdown>ol li,
246 
+.markdown blockquote ol>li {
247 
+  margin-left: 20px;
248 
+  padding-left: 4px;
249 
+}
250 
+
251 
+.markdown code {
252 
+  margin: 0 3px;
253 
+  padding: 0 5px;
254 
+  background: #eee;
255 
+  border-radius: 3px;
256 
+}
257 
+
258 
+.markdown strong,
259 
+.markdown b {
260 
+  font-weight: 600;
261 
+}
262 
+
263 
+.markdown>table {
264 
+  border-collapse: collapse;
265 
+  border-spacing: 0px;
266 
+  empty-cells: show;
267 
+  border: 1px solid #e9e9e9;
268 
+  width: 95%;
269 
+  margin-bottom: 24px;
270 
+}
271 
+
272 
+.markdown>table th {
273 
+  white-space: nowrap;
274 
+  color: #333;
275 
+  font-weight: 600;
276 
+}
277 
+
278 
+.markdown>table th,
279 
+.markdown>table td {
280 
+  border: 1px solid #e9e9e9;
281 
+  padding: 8px 16px;
282 
+  text-align: left;
283 
+}
284 
+
285 
+.markdown>table th {
286 
+  background: #F7F7F7;
287 
+}
288 
+
289 
+.markdown blockquote {
290 
+  font-size: 90%;
291 
+  color: #999;
292 
+  border-left: 4px solid #e9e9e9;
293 
+  padding-left: 0.8em;
294 
+  margin: 1em 0;
295 
+}
296 
+
297 
+.markdown blockquote p {
298 
+  margin: 0;
299 
+}
300 
+
301 
+.markdown .anchor {
302 
+  opacity: 0;
303 
+  transition: opacity 0.3s ease;
304 
+  margin-left: 8px;
305 
+}
306 
+
307 
+.markdown .waiting {
308 
+  color: #ccc;
309 
+}
310 
+
311 
+.markdown h1:hover .anchor,
312 
+.markdown h2:hover .anchor,
313 
+.markdown h3:hover .anchor,
314 
+.markdown h4:hover .anchor,
315 
+.markdown h5:hover .anchor,
316 
+.markdown h6:hover .anchor {
317 
+  opacity: 1;
318 
+  display: inline-block;
319 
+}
320 
+
321 
+.markdown>br,
322 
+.markdown>p>br {
323 
+  clear: both;
324 
+}
325 
+
326 
+
327 
+.hljs {
328 
+  display: block;
329 
+  background: white;
330 
+  padding: 0.5em;
331 
+  color: #333333;
332 
+  overflow-x: auto;
333 
+}
334 
+
335 
+.hljs-comment,
336 
+.hljs-meta {
337 
+  color: #969896;
338 
+}
339 
+
340 
+.hljs-string,
341 
+.hljs-variable,
342 
+.hljs-template-variable,
343 
+.hljs-strong,
344 
+.hljs-emphasis,
345 
+.hljs-quote {
346 
+  color: #df5000;
347 
+}
348 
+
349 
+.hljs-keyword,
350 
+.hljs-selector-tag,
351 
+.hljs-type {
352 
+  color: #a71d5d;
353 
+}
354 
+
355 
+.hljs-literal,
356 
+.hljs-symbol,
357 
+.hljs-bullet,
358 
+.hljs-attribute {
359 
+  color: #0086b3;
360 
+}
361 
+
362 
+.hljs-section,
363 
+.hljs-name {
364 
+  color: #63a35c;
365 
+}
366 
+
367 
+.hljs-tag {
368 
+  color: #333333;
369 
+}
370 
+
371 
+.hljs-title,
372 
+.hljs-attr,
373 
+.hljs-selector-id,
374 
+.hljs-selector-class,
375 
+.hljs-selector-attr,
376 
+.hljs-selector-pseudo {
377 
+  color: #795da3;
378 
+}
379 
+
380 
+.hljs-addition {
381 
+  color: #55a532;
382 
+  background-color: #eaffea;
383 
+}
384 
+
385 
+.hljs-deletion {
386 
+  color: #bd2c00;
387 
+  background-color: #ffecec;
388 
+}
389 
+
390 
+.hljs-link {
391 
+  text-decoration: underline;
392 
+}
393 
+
394 
+/* 代码高亮 */
395 
+/* PrismJS 1.15.0
396 
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
397 
+/**
398 
+ * prism.js default theme for JavaScript, CSS and HTML
399 
+ * Based on dabblet (http://dabblet.com)
400 
+ * @author Lea Verou
401 
+ */
402 
+code[class*="language-"],
403 
+pre[class*="language-"] {
404 
+  color: black;
405 
+  background: none;
406 
+  text-shadow: 0 1px white;
407 
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
408 
+  text-align: left;
409 
+  white-space: pre;
410 
+  word-spacing: normal;
411 
+  word-break: normal;
412 
+  word-wrap: normal;
413 
+  line-height: 1.5;
414 
+
415 
+  -moz-tab-size: 4;
416 
+  -o-tab-size: 4;
417 
+  tab-size: 4;
418 
+
419 
+  -webkit-hyphens: none;
420 
+  -moz-hyphens: none;
421 
+  -ms-hyphens: none;
422 
+  hyphens: none;
423 
+}
424 
+
425 
+pre[class*="language-"]::-moz-selection,
426 
+pre[class*="language-"] ::-moz-selection,
427 
+code[class*="language-"]::-moz-selection,
428 
+code[class*="language-"] ::-moz-selection {
429 
+  text-shadow: none;
430 
+  background: #b3d4fc;
431 
+}
432 
+
433 
+pre[class*="language-"]::selection,
434 
+pre[class*="language-"] ::selection,
435 
+code[class*="language-"]::selection,
436 
+code[class*="language-"] ::selection {
437 
+  text-shadow: none;
438 
+  background: #b3d4fc;
439 
+}
440 
+
441 
+@media print {
442 
+
443 
+  code[class*="language-"],
444 
+  pre[class*="language-"] {
445 
+    text-shadow: none;
446 
+  }
447 
+}
448 
+
449 
+/* Code blocks */
450 
+pre[class*="language-"] {
451 
+  padding: 1em;
452 
+  margin: .5em 0;
453 
+  overflow: auto;
454 
+}
455 
+
456 
+:not(pre)>code[class*="language-"],
457 
+pre[class*="language-"] {
458 
+  background: #f5f2f0;
459 
+}
460 
+
461 
+/* Inline code */
462 
+:not(pre)>code[class*="language-"] {
463 
+  padding: .1em;
464 
+  border-radius: .3em;
465 
+  white-space: normal;
466 
+}
467 
+
468 
+.token.comment,
469 
+.token.prolog,
470 
+.token.doctype,
471 
+.token.cdata {
472 
+  color: slategray;
473 
+}
474 
+
475 
+.token.punctuation {
476 
+  color: #999;
477 
+}
478 
+
479 
+.namespace {
480 
+  opacity: .7;
481 
+}
482 
+
483 
+.token.property,
484 
+.token.tag,
485 
+.token.boolean,
486 
+.token.number,
487 
+.token.constant,
488 
+.token.symbol,
489 
+.token.deleted {
490 
+  color: #905;
491 
+}
492 
+
493 
+.token.selector,
494 
+.token.attr-name,
495 
+.token.string,
496 
+.token.char,
497 
+.token.builtin,
498 
+.token.inserted {
499 
+  color: #690;
500 
+}
501 
+
502 
+.token.operator,
503 
+.token.entity,
504 
+.token.url,
505 
+.language-css .token.string,
506 
+.style .token.string {
507 
+  color: #9a6e3a;
508 
+  background: hsla(0, 0%, 100%, .5);
509 
+}
510 
+
511 
+.token.atrule,
512 
+.token.attr-value,
513 
+.token.keyword {
514 
+  color: #07a;
515 
+}
516 
+
517 
+.token.function,
518 
+.token.class-name {
519 
+  color: #DD4A68;
520 
+}
521 
+
522 
+.token.regex,
523 
+.token.important,
524 
+.token.variable {
525 
+  color: #e90;
526 
+}
527 
+
528 
+.token.important,
529 
+.token.bold {
530 
+  font-weight: bold;
531 
+}
532 
+
533 
+.token.italic {
534 
+  font-style: italic;
535 
+}
536 
+
537 
+.token.entity {
538 
+  cursor: help;
539 
+}

+ 443
- 0
public/fonts/demo_index.html Dosyayı Görüntüle 

@@ -0,0 +1,443 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+<head>
4 
+  <meta charset="utf-8"/>
5 
+  <title>iconfont Demo</title>
6 
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
7 
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
8 
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
9 
+  <link rel="stylesheet" href="demo.css">
10 
+  <link rel="stylesheet" href="iconfont.css">
11 
+  <script src="iconfont.js"></script>
12 
+  <!-- jQuery -->
13 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
14 
+  <!-- 代码高亮 -->
15 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
16 
+  <style>
17 
+    .main .logo {
18 
+      margin-top: 0;
19 
+      height: auto;
20 
+    }
21 
+
22 
+    .main .logo a {
23 
+      display: flex;
24 
+      align-items: center;
25 
+    }
26 
+
27 
+    .main .logo .sub-title {
28 
+      margin-left: 0.5em;
29 
+      font-size: 22px;
30 
+      color: #fff;
31 
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
32 
+      -webkit-background-clip: text;
33 
+      -webkit-text-fill-color: transparent;
34 
+    }
35 
+  </style>
36 
+</head>
37 
+<body>
38 
+  <div class="main">
39 
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
40 
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
41 
+
42 
+    </a></h1>
43 
+    <div class="nav-tabs">
44 
+      <ul id="tabs" class="dib-box">
45 
+        <li class="dib active"><span>Unicode</span></li>
46 
+        <li class="dib"><span>Font class</span></li>
47 
+        <li class="dib"><span>Symbol</span></li>
48 
+      </ul>
49 
+
50 
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3600839" target="_blank" class="nav-more">查看项目</a>
51 
+
52 
+    </div>
53 
+    <div class="tab-container">
54 
+      <div class="content unicode" style="display: block;">
55 
+          <ul class="icon_lists dib-box">
56 
+
57 
+            <li class="dib">
58 
+              <span class="icon iconfont">&#xeb08;</span>
59 
+                <div class="name">箭头_向右</div>
60 
+                <div class="code-name">&amp;#xeb08;</div>
61 
+              </li>
62 
+
63 
+            <li class="dib">
64 
+              <span class="icon iconfont">&#xe60a;</span>
65 
+                <div class="name">map</div>
66 
+                <div class="code-name">&amp;#xe60a;</div>
67 
+              </li>
68 
+
69 
+            <li class="dib">
70 
+              <span class="icon iconfont">&#xe80d;</span>
71 
+                <div class="name">pause circle</div>
72 
+                <div class="code-name">&amp;#xe80d;</div>
73 
+              </li>
74 
+
75 
+            <li class="dib">
76 
+              <span class="icon iconfont">&#xe80f;</span>
77 
+                <div class="name">play circle</div>
78 
+                <div class="code-name">&amp;#xe80f;</div>
79 
+              </li>
80 
+
81 
+            <li class="dib">
82 
+              <span class="icon iconfont">&#xe659;</span>
83 
+                <div class="name">round_close</div>
84 
+                <div class="code-name">&amp;#xe659;</div>
85 
+              </li>
86 
+
87 
+            <li class="dib">
88 
+              <span class="icon iconfont">&#xe795;</span>
89 
+                <div class="name">music_fill</div>
90 
+                <div class="code-name">&amp;#xe795;</div>
91 
+              </li>
92 
+
93 
+            <li class="dib">
94 
+              <span class="icon iconfont">&#xe796;</span>
95 
+                <div class="name">music_forbid_fill</div>
96 
+                <div class="code-name">&amp;#xe796;</div>
97 
+              </li>
98 
+
99 
+            <li class="dib">
100 
+              <span class="icon iconfont">&#xe6e5;</span>
101 
+                <div class="name">info</div>
102 
+                <div class="code-name">&amp;#xe6e5;</div>
103 
+              </li>
104 
+
105 
+            <li class="dib">
106 
+              <span class="icon iconfont">&#xe68c;</span>
107 
+                <div class="name">cc-pointer-right</div>
108 
+                <div class="code-name">&amp;#xe68c;</div>
109 
+              </li>
110 
+
111 
+            <li class="dib">
112 
+              <span class="icon iconfont">&#xe6a9;</span>
113 
+                <div class="name">music</div>
114 
+                <div class="code-name">&amp;#xe6a9;</div>
115 
+              </li>
116 
+
117 
+            <li class="dib">
118 
+              <span class="icon iconfont">&#xe616;</span>
119 
+                <div class="name">Music-Note 4</div>
120 
+                <div class="code-name">&amp;#xe616;</div>
121 
+              </li>
122 
+
123 
+          </ul>
124 
+          <div class="article markdown">
125 
+          <h2 id="unicode-">Unicode 引用</h2>
126 
+          <hr>
127 
+
128 
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
129 
+          <ul>
130 
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
131 
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
132 
+          </ul>
133 
+          <blockquote>
134 
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
135 
+          </blockquote>
136 
+          <p>Unicode 使用步骤如下：</p>
137 
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
138 
+<pre><code class="language-css"
139 
+>@font-face {
140 
+  font-family: 'iconfont';
141 
+  src:
142 
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
143 
+       url('iconfont.woff?t=1662519723535') format('woff'),
144 
+       url('iconfont.ttf?t=1662519723535') format('truetype'),
145 
+       url('iconfont.svg?t=1662519723535#iconfont') format('svg');
146 
+}
147 
+</code></pre>
148 
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
149 
+<pre><code class="language-css"
150 
+>.iconfont {
151 
+  font-family: "iconfont" !important;
152 
+  font-size: 16px;
153 
+  font-style: normal;
154 
+  -webkit-font-smoothing: antialiased;
155 
+  -moz-osx-font-smoothing: grayscale;
156 
+}
157 
+</code></pre>
158 
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
159 
+<pre>
160 
+<code class="language-html"
161 
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
162 
+</code></pre>
163 
+          <blockquote>
164 
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
165 
+          </blockquote>
166 
+          </div>
167 
+      </div>
168 
+      <div class="content font-class">
169 
+        <ul class="icon_lists dib-box">
170 
+
171 
+          <li class="dib">
172 
+            <span class="icon iconfont icon-arrow-right"></span>
173 
+            <div class="name">
174 
+              箭头_向右
175 
+            </div>
176 
+            <div class="code-name">.icon-arrow-right
177 
+            </div>
178 
+          </li>
179 
+
180 
+          <li class="dib">
181 
+            <span class="icon iconfont icon-map"></span>
182 
+            <div class="name">
183 
+              map
184 
+            </div>
185 
+            <div class="code-name">.icon-map
186 
+            </div>
187 
+          </li>
188 
+
189 
+          <li class="dib">
190 
+            <span class="icon iconfont icon-pausecircle"></span>
191 
+            <div class="name">
192 
+              pause circle
193 
+            </div>
194 
+            <div class="code-name">.icon-pausecircle
195 
+            </div>
196 
+          </li>
197 
+
198 
+          <li class="dib">
199 
+            <span class="icon iconfont icon-playcircle"></span>
200 
+            <div class="name">
201 
+              play circle
202 
+            </div>
203 
+            <div class="code-name">.icon-playcircle
204 
+            </div>
205 
+          </li>
206 
+
207 
+          <li class="dib">
208 
+            <span class="icon iconfont icon-roundclose"></span>
209 
+            <div class="name">
210 
+              round_close
211 
+            </div>
212 
+            <div class="code-name">.icon-roundclose
213 
+            </div>
214 
+          </li>
215 
+
216 
+          <li class="dib">
217 
+            <span class="icon iconfont icon-musicfill"></span>
218 
+            <div class="name">
219 
+              music_fill
220 
+            </div>
221 
+            <div class="code-name">.icon-musicfill
222 
+            </div>
223 
+          </li>
224 
+
225 
+          <li class="dib">
226 
+            <span class="icon iconfont icon-musicforbidfill"></span>
227 
+            <div class="name">
228 
+              music_forbid_fill
229 
+            </div>
230 
+            <div class="code-name">.icon-musicforbidfill
231 
+            </div>
232 
+          </li>
233 
+
234 
+          <li class="dib">
235 
+            <span class="icon iconfont icon-info"></span>
236 
+            <div class="name">
237 
+              info
238 
+            </div>
239 
+            <div class="code-name">.icon-info
240 
+            </div>
241 
+          </li>
242 
+
243 
+          <li class="dib">
244 
+            <span class="icon iconfont icon-cc-pointer-right"></span>
245 
+            <div class="name">
246 
+              cc-pointer-right
247 
+            </div>
248 
+            <div class="code-name">.icon-cc-pointer-right
249 
+            </div>
250 
+          </li>
251 
+
252 
+          <li class="dib">
253 
+            <span class="icon iconfont icon-note-2"></span>
254 
+            <div class="name">
255 
+              music
256 
+            </div>
257 
+            <div class="code-name">.icon-note-2
258 
+            </div>
259 
+          </li>
260 
+
261 
+          <li class="dib">
262 
+            <span class="icon iconfont icon-note-1"></span>
263 
+            <div class="name">
264 
+              Music-Note 4
265 
+            </div>
266 
+            <div class="code-name">.icon-note-1
267 
+            </div>
268 
+          </li>
269 
+
270 
+        </ul>
271 
+        <div class="article markdown">
272 
+        <h2 id="font-class-">font-class 引用</h2>
273 
+        <hr>
274 
+
275 
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
276 
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
277 
+        <ul>
278 
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
279 
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
280 
+        </ul>
281 
+        <p>使用步骤如下：</p>
282 
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
283 
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
284 
+</code></pre>
285 
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
286 
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
287 
+</code></pre>
288 
+        <blockquote>
289 
+          <p>"
290 
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
291 
+        </blockquote>
292 
+      </div>
293 
+      </div>
294 
+      <div class="content symbol">
295 
+          <ul class="icon_lists dib-box">
296 
+
297 
+            <li class="dib">
298 
+                <svg class="icon svg-icon" aria-hidden="true">
299 
+                  <use xlink:href="#icon-arrow-right"></use>
300 
+                </svg>
301 
+                <div class="name">箭头_向右</div>
302 
+                <div class="code-name">#icon-arrow-right</div>
303 
+            </li>
304 
+
305 
+            <li class="dib">
306 
+                <svg class="icon svg-icon" aria-hidden="true">
307 
+                  <use xlink:href="#icon-map"></use>
308 
+                </svg>
309 
+                <div class="name">map</div>
310 
+                <div class="code-name">#icon-map</div>
311 
+            </li>
312 
+
313 
+            <li class="dib">
314 
+                <svg class="icon svg-icon" aria-hidden="true">
315 
+                  <use xlink:href="#icon-pausecircle"></use>
316 
+                </svg>
317 
+                <div class="name">pause circle</div>
318 
+                <div class="code-name">#icon-pausecircle</div>
319 
+            </li>
320 
+
321 
+            <li class="dib">
322 
+                <svg class="icon svg-icon" aria-hidden="true">
323 
+                  <use xlink:href="#icon-playcircle"></use>
324 
+                </svg>
325 
+                <div class="name">play circle</div>
326 
+                <div class="code-name">#icon-playcircle</div>
327 
+            </li>
328 
+
329 
+            <li class="dib">
330 
+                <svg class="icon svg-icon" aria-hidden="true">
331 
+                  <use xlink:href="#icon-roundclose"></use>
332 
+                </svg>
333 
+                <div class="name">round_close</div>
334 
+                <div class="code-name">#icon-roundclose</div>
335 
+            </li>
336 
+
337 
+            <li class="dib">
338 
+                <svg class="icon svg-icon" aria-hidden="true">
339 
+                  <use xlink:href="#icon-musicfill"></use>
340 
+                </svg>
341 
+                <div class="name">music_fill</div>
342 
+                <div class="code-name">#icon-musicfill</div>
343 
+            </li>
344 
+
345 
+            <li class="dib">
346 
+                <svg class="icon svg-icon" aria-hidden="true">
347 
+                  <use xlink:href="#icon-musicforbidfill"></use>
348 
+                </svg>
349 
+                <div class="name">music_forbid_fill</div>
350 
+                <div class="code-name">#icon-musicforbidfill</div>
351 
+            </li>
352 
+
353 
+            <li class="dib">
354 
+                <svg class="icon svg-icon" aria-hidden="true">
355 
+                  <use xlink:href="#icon-info"></use>
356 
+                </svg>
357 
+                <div class="name">info</div>
358 
+                <div class="code-name">#icon-info</div>
359 
+            </li>
360 
+
361 
+            <li class="dib">
362 
+                <svg class="icon svg-icon" aria-hidden="true">
363 
+                  <use xlink:href="#icon-cc-pointer-right"></use>
364 
+                </svg>
365 
+                <div class="name">cc-pointer-right</div>
366 
+                <div class="code-name">#icon-cc-pointer-right</div>
367 
+            </li>
368 
+
369 
+            <li class="dib">
370 
+                <svg class="icon svg-icon" aria-hidden="true">
371 
+                  <use xlink:href="#icon-note-2"></use>
372 
+                </svg>
373 
+                <div class="name">music</div>
374 
+                <div class="code-name">#icon-note-2</div>
375 
+            </li>
376 
+
377 
+            <li class="dib">
378 
+                <svg class="icon svg-icon" aria-hidden="true">
379 
+                  <use xlink:href="#icon-note-1"></use>
380 
+                </svg>
381 
+                <div class="name">Music-Note 4</div>
382 
+                <div class="code-name">#icon-note-1</div>
383 
+            </li>
384 
+
385 
+          </ul>
386 
+          <div class="article markdown">
387 
+          <h2 id="symbol-">Symbol 引用</h2>
388 
+          <hr>
389 
+
390 
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
391 
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
392 
+          <ul>
393 
+            <li>支持多色图标了，不再受单色限制。</li>
394 
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
395 
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
396 
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
397 
+          </ul>
398 
+          <p>使用步骤如下：</p>
399 
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
400 
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
401 
+</code></pre>
402 
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
403 
+<pre><code class="language-html">&lt;style&gt;
404 
+.icon {
405 
+  width: 1em;
406 
+  height: 1em;
407 
+  vertical-align: -0.15em;
408 
+  fill: currentColor;
409 
+  overflow: hidden;
410 
+}
411 
+&lt;/style&gt;
412 
+</code></pre>
413 
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
414 
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
415 
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
416 
+&lt;/svg&gt;
417 
+</code></pre>
418 
+          </div>
419 
+      </div>
420 
+
421 
+    </div>
422 
+  </div>
423 
+  <script>
424 
+  $(document).ready(function () {
425 
+      $('.tab-container .content:first').show()
426 
+
427 
+      $('#tabs li').click(function (e) {
428 
+        var tabContent = $('.tab-container .content')
429 
+        var index = $(this).index()
430 
+
431 
+        if ($(this).hasClass('active')) {
432 
+          return
433 
+        } else {
434 
+          $('#tabs li').removeClass('active')
435 
+          $(this).addClass('active')
436 
+
437 
+          tabContent.hide().eq(index).fadeIn()
438 
+        }
439 
+      })
440 
+    })
441 
+  </script>
442 
+</body>
443 
+</html>

+ 61
- 0
public/fonts/iconfont.css Dosyayı Görüntüle 

@@ -0,0 +1,61 @@
1 
+@font-face {
2 
+  font-family: "iconfont"; /* Project id 3600839 */
3 
+  src:
4 
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
5 
+       url('iconfont.woff?t=1662519723535') format('woff'),
6 
+       url('iconfont.ttf?t=1662519723535') format('truetype'),
7 
+       url('iconfont.svg?t=1662519723535#iconfont') format('svg');
8 
+}
9 
+
10 
+.iconfont {
11 
+  font-family: "iconfont" !important;
12 
+  font-size: 16px;
13 
+  font-style: normal;
14 
+  -webkit-font-smoothing: antialiased;
15 
+  -moz-osx-font-smoothing: grayscale;
16 
+}
17 
+
18 
+.icon-arrow-right:before {
19 
+  content: "\eb08";
20 
+}
21 
+
22 
+.icon-map:before {
23 
+  content: "\e60a";
24 
+}
25 
+
26 
+.icon-pausecircle:before {
27 
+  content: "\e80d";
28 
+}
29 
+
30 
+.icon-playcircle:before {
31 
+  content: "\e80f";
32 
+}
33 
+
34 
+.icon-roundclose:before {
35 
+  content: "\e659";
36 
+}
37 
+
38 
+.icon-musicfill:before {
39 
+  content: "\e795";
40 
+}
41 
+
42 
+.icon-musicforbidfill:before {
43 
+  content: "\e796";
44 
+}
45 
+
46 
+.icon-info:before {
47 
+  content: "\e6e5";
48 
+}
49 
+
50 
+.icon-cc-pointer-right:before {
51 
+  content: "\e68c";
52 
+}
53 
+
54 
+.icon-note-2:before {
55 
+  content: "\e6a9";
56 
+}
57 
+
58 
+.icon-note-1:before {
59 
+  content: "\e616";
60 
+}
61 
+

+ 1
- 0
public/fonts/iconfont.js
Dosya farkı çok büyük olduğundan ihmal edildi
Dosyayı Görüntüle


+ 86
- 0
public/fonts/iconfont.json Dosyayı Görüntüle 

@@ -0,0 +1,86 @@
1 
+{
2 
+  "id": "3600839",
3 
+  "name": "h5-music",
4 
+  "font_family": "iconfont",
5 
+  "css_prefix_text": "icon-",
6 
+  "description": "",
7 
+  "glyphs": [
8 
+    {
9 
+      "icon_id": "5387583",
10 
+      "name": "箭头_向右",
11 
+      "font_class": "arrow-right",
12 
+      "unicode": "eb08",
13 
+      "unicode_decimal": 60168
14 
+    },
15 
+    {
16 
+      "icon_id": "1368587",
17 
+      "name": "map",
18 
+      "font_class": "map",
19 
+      "unicode": "e60a",
20 
+      "unicode_decimal": 58890
21 
+    },
22 
+    {
23 
+      "icon_id": "6151260",
24 
+      "name": "pause circle",
25 
+      "font_class": "pausecircle",
26 
+      "unicode": "e80d",
27 
+      "unicode_decimal": 59405
28 
+    },
29 
+    {
30 
+      "icon_id": "6151262",
31 
+      "name": "play circle",
32 
+      "font_class": "playcircle",
33 
+      "unicode": "e80f",
34 
+      "unicode_decimal": 59407
35 
+    },
36 
+    {
37 
+      "icon_id": "29944",
38 
+      "name": "round_close",
39 
+      "font_class": "roundclose",
40 
+      "unicode": "e659",
41 
+      "unicode_decimal": 58969
42 
+    },
43 
+    {
44 
+      "icon_id": "510944",
45 
+      "name": "music_fill",
46 
+      "font_class": "musicfill",
47 
+      "unicode": "e795",
48 
+      "unicode_decimal": 59285
49 
+    },
50 
+    {
51 
+      "icon_id": "510945",
52 
+      "name": "music_forbid_fill",
53 
+      "font_class": "musicforbidfill",
54 
+      "unicode": "e796",
55 
+      "unicode_decimal": 59286
56 
+    },
57 
+    {
58 
+      "icon_id": "43905",
59 
+      "name": "info",
60 
+      "font_class": "info",
61 
+      "unicode": "e6e5",
62 
+      "unicode_decimal": 59109
63 
+    },
64 
+    {
65 
+      "icon_id": "372236",
66 
+      "name": "cc-pointer-right",
67 
+      "font_class": "cc-pointer-right",
68 
+      "unicode": "e68c",
69 
+      "unicode_decimal": 59020
70 
+    },
71 
+    {
72 
+      "icon_id": "1251430",
73 
+      "name": "music",
74 
+      "font_class": "note-2",
75 
+      "unicode": "e6a9",
76 
+      "unicode_decimal": 59049
77 
+    },
78 
+    {
79 
+      "icon_id": "6801390",
80 
+      "name": "Music-Note 4",
81 
+      "font_class": "note-1",
82 
+      "unicode": "e616",
83 
+      "unicode_decimal": 58902
84 
+    }
85 
+  ]
86 
+}

+ 41
- 0
public/fonts/iconfont.svg Dosyayı Görüntüle 

@@ -0,0 +1,41 @@
1 
+<?xml version="1.0" standalone="no"?>
2 
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 
+<svg xmlns="http://www.w3.org/2000/svg">
4 
+  <metadata>Created by iconfont</metadata>
5 
+  <defs>
6 
+  <font id="iconfont" horiz-adv-x="1024">
7 
+    <font-face
8 
+      font-family="iconfont"
9 
+      font-weight="400"
10 
+      font-stretch="normal"
11 
+      units-per-em="1024"
12 
+      ascent="896"
13 
+      descent="-128"
14 
+    />
15 
+      <missing-glyph />
16 
+
17 
+      <glyph glyph-name="arrow-right" unicode="&#60168;" d="M729.6 448H128v-85.333333h601.6L597.333333 230.39999999999998l59.733334-59.733333 234.666666 234.666666L661.333333 640l-59.733333-59.733333 128-132.266667z"  horiz-adv-x="1024" />
18 
+
19 
+      <glyph glyph-name="map" unicode="&#58890;" d="M511.717567 768.018164c34.606169 0 68.116377-6.704702 99.598393-19.928889 30.468942-12.797467 57.817824-31.142278 81.289398-54.525847 48.328705-48.146557 74.943876-112.571868 74.943876-181.406606 0-37.119409-7.90504-79.557964-23.496134-126.136816-14.530948-43.412742-35.730783-90.39273-63.010079-139.63627-58.604746-105.791441-129.349997-194.2184-169.326477-240.706177C471.734948 52.18068500000004 400.986627 140.62504 342.395184 246.383736c-27.282367 49.244564-48.484248 96.225575-63.017242 139.63627-15.59314 46.578852-23.499204 89.017406-23.499204 126.135792 0 68.834738 26.616194 133.26005 74.9449 181.406607 23.471574 23.38357 50.821479 41.72838 81.291444 54.525847 31.483038 13.225209 64.99427 19.929912 99.602485 19.929912m0 63.956637c-176.35966 0-319.794443-141.665487-319.794443-319.817979 0-186.559976 159.91206-420.09073 276.493242-554.182728 0.435928-0.523933 19.150152-21.444405 42.284035-21.444405h2.029216c23.134907 0 41.84299 20.924565 42.289152 21.444405 116.605741 134.093021 276.489148 367.627868 276.489149 554.182728-0.001023 178.152493-143.43683 319.817979-319.790351 319.817979zM511.706311 576.1369950000001c35.270295 0 63.964824-28.694529 63.964824-63.964824s-28.694529-63.964824-63.964824-63.964824-63.964824 28.694529-63.964824 63.964824 28.694529 63.964824 63.964824 63.964824m0 63.956638c-70.64906 0-127.921461-57.272401-127.921461-127.921462s57.272401-127.921461 127.921461-127.921461 127.921461 57.272401 127.921461 127.921461-57.272401 127.921461-127.921461 127.921462z"  horiz-adv-x="1024" />
20 
+
21 
+      <glyph glyph-name="pausecircle" unicode="&#59405;" d="M512-96A480 480 0 1 0 512 864a480 480 0 0 0 0-960z m2.82 87.18a390 390 0 1 1 0 780 390 390 0 0 1 0-780zM332 564h120v-360H332V564z m240 0h120v-360H572V564z"  horiz-adv-x="1024" />
22 
+
23 
+      <glyph glyph-name="playcircle" unicode="&#59407;" d="M512-96A480 480 0 1 0 512 864a480 480 0 0 0 0-960z m2.82 87.18a390 390 0 1 1 0 780 390 390 0 0 1 0-780zM391.28 594.36l360-210.84-360-209.16v420z"  horiz-adv-x="1024" />
24 
+
25 
+      <glyph glyph-name="roundclose" unicode="&#58969;" d="M512-64C264.96-64 64 136.96000000000004 64 384S264.96 832 512 832s448-200.96 448-448S759.04-64 512-64zM512 767.712C300.416 767.712 128.288 595.5840000000001 128.288 384c0-211.552 172.128-383.712 383.712-383.712 211.552 0 383.712 172.16 383.712 383.712C895.712 595.5840000000001 723.552 767.712 512 767.712zM557.056 382.624l138.368 136.864c12.576 12.416 12.672 32.672 0.256 45.248-12.416 12.576-32.704 12.672-45.248 0.256l-138.56-137.024-136.448 136.864c-12.512 12.512-32.736 12.576-45.248 0.064-12.512-12.48-12.544-32.736-0.064-45.248l136.256-136.672-137.376-135.904c-12.576-12.448-12.672-32.672-0.256-45.248 6.272-6.336 14.496-9.504 22.752-9.504 8.128 0 16.256 3.104 22.496 9.248l137.568 136.064 138.688-139.136c6.24-6.272 14.432-9.408 22.656-9.408 8.192 0 16.352 3.136 22.592 9.344 12.512 12.48 12.544 32.704 0.064 45.248L557.056 382.624z"  horiz-adv-x="1024" />
26 
+
27 
+      <glyph glyph-name="musicfill" unicode="&#59285;" d="M895.456 125.44000000000005C895.552 126.30399999999997 896 127.10400000000004 896 128L896 736c0 1.056-0.512 1.984-0.608 3.008-0.032 1.664 0.448 3.232 0.16 4.928-2.88 17.408-19.328 29.184-36.8 26.304l-480-80c-17.408-2.912-29.216-19.392-26.304-36.832 0.256-1.472 1.024-2.656 1.44-4.032C352.96 646.336 352 643.328 352 640l0-429.6c-20.128 9.376-43.648 14.784-69.408 14.784-21.312 0-42.816-3.456-63.968-10.336-39.616-12.8-73.536-36.224-95.584-65.984-24.064-32.512-31.68-70.24-20.864-103.648 15.648-48.288 66.656-79.456 129.92-79.456 21.248 0 42.72 3.456 63.904 10.304 58.656 19.04 100.288 59.2 115.04 103.808C413.888 84.67200000000003 416 89.98400000000004 416 96l0 5.312c1.056 8.48 1.056 16.96 0 25.472L416 631.552l416 69.344 0-490.88c-20.32 9.632-44.096 15.2-70.176 15.2-21.28 0-42.816-3.456-63.968-10.336-39.584-12.8-73.568-36.224-95.584-65.984-24.096-32.512-31.68-70.24-20.864-103.648 15.648-48.288 66.656-79.456 129.92-79.456 21.248 0 42.752 3.456 63.904 10.304C853.472 1.4400000000000546 902.176 64.32000000000005 895.456 125.44000000000005z"  horiz-adv-x="1024" />
28 
+
29 
+      <glyph glyph-name="musicforbidfill" unicode="&#59286;" d="M616.576 165.024c-5.056-5.216-10.08-10.432-14.304-16.16-24.096-32.512-31.68-70.24-20.864-103.648 15.648-48.288 66.656-79.456 129.92-79.456 21.248 0 42.752 3.456 63.904 10.304 9.632 3.136 18.784 6.816 27.424 11.008L616.576 165.024zM416 622.592l0 8.96 416 69.312 0-476.192 64-61.216L896 736c0 1.056-0.512 1.984-0.608 3.008-0.032 1.664 0.448 3.232 0.16 4.896-2.88 17.44-19.424 29.408-36.8 26.304l-480-80C370.24 688.8 363.2 684.064 358.4 677.664L416 622.592zM352 418.08l0-207.68c-20.128 9.376-43.648 14.784-69.408 14.784-21.28 0-42.816-3.456-63.968-10.336-39.584-12.8-73.568-36.224-95.584-65.984-24.096-32.512-31.68-70.24-20.864-103.648 15.648-48.288 66.656-79.456 129.92-79.456 21.248 0 42.752 3.456 63.904 10.304 58.656 19.04 100.32 59.2 115.04 103.808C413.92 84.67200000000003 416 89.98400000000004 416 96l0 5.216c1.056 8.512 1.056 17.024 0 25.6l0 230.048L352 418.08zM928-32c-7.968 0-15.904 2.944-22.112 8.864l-736 704C157.12 693.088 156.672 713.344 168.864 726.112c12.192 12.736 32.48 13.216 45.248 0.992l736-704c12.736-12.224 13.216-32.48 0.992-45.248C944.832-28.672000000000025 936.448-32 928-32z"  horiz-adv-x="1024" />
30 
+
31 
+      <glyph glyph-name="info" unicode="&#59109;" d="M512-62.01599999999996C266.08-62.01599999999996 65.984 138.048 65.984 384 65.984 629.9200000000001 266.08 830.016 512 830.016c245.952 0 446.016-200.064 446.016-446.016C958.016 138.048 757.952-62.01599999999996 512-62.01599999999996zM512 766.016C301.344 766.016 129.984 594.656 129.984 384c0-210.624 171.36-382.016 382.016-382.016 210.624 0 382.016 171.36 382.016 382.016C894.016 594.656 722.624 766.016 512 766.016zM512 592m-48 0a1.5 1.5 0 1 1 96 0 1.5 1.5 0 1 1-96 0ZM512 128c-17.664 0-32 14.304-32 32l0 288c0 17.664 14.336 32 32 32s32-14.336 32-32l0-288C544 142.30399999999997 529.664 128 512 128z"  horiz-adv-x="1024" />
32 
+
33 
+      <glyph glyph-name="cc-pointer-right" unicode="&#59020;" d="M630.715287 55.429682999999955c0-51.941999-42.281989-94.225011-94.225011-94.225011-140.92359 0-258.842233 23.372314-340.946182 67.587328-41.520649 22.406313-73.727165 49.873897-95.788623 81.712023-22.842241 32.94125-34.390251 69.839625-34.390251 109.821221L65.365218 455.888284c0 5.15337 1.471514 33.079396 29.860075 73.429383 36.18513 51.437509 99.377358 99.929943 187.713242 144.143934C470.538191 767.2721730000001 532.118712 797.3614689999999 534.971689 798.742932c45.64048 22.773679 103.564727 6.487761 129.190361-36.254715 12.515035-20.888749 15.920598-45.364187 9.525957-68.87567-6.579859-24.108071-22.499433-44.213991-44.905746-56.45171l-109.913319-63.446008 347.364359 0c51.988048 0 94.223988-42.280966 94.223988-94.223988 0-51.944046-42.23594-94.225011-94.223988-94.225011L712.196043 385.26583c8.097422-13.849426 12.698207-29.997198 12.698207-47.114041 0-41.038672-26.408463-76.004021-63.077617-88.887446 10.076496-15.044648 15.9646-33.034371 15.9646-52.449559 0-41.039695-26.40744-76.006068-63.077617-88.887446 10.076496-15.046694 15.965623-33.034371 15.965623-52.449559L630.715287 55.429682999999955zM217.767234 70.291159c75.292823-40.534182 185.483458-61.974493 318.630944-61.974493 25.947975 0 47.113017 21.165042 47.113017 47.113017s-21.165042 47.111994-47.113017 47.111994l-23.556509 0c-12.997012 0-23.556509 10.538007-23.556509 23.556509 0 13.022595 10.558473 23.557532 23.556509 23.557532l70.669526 0c25.946952 0 47.113017 21.165042 47.113017 47.113017s-21.166065 47.113017-47.113017 47.113017l-23.556509 0c-12.997012 0-23.557532 10.534937-23.557532 23.555485s10.559497 23.557532 23.557532 23.557532l70.669526 0c25.947975 0 47.111994 21.164019 47.111994 47.111994 0 25.948999-21.164019 47.111994-47.111994 47.111994l-70.669526 0c-12.997012 0-23.557532 10.583033-23.557532 23.557532 0 12.975523 10.559497 23.556509 23.557532 23.556509l306.23052 0c25.948999 0 47.113017 21.164019 47.113017 47.114041 0 25.946952-21.164019 47.111994-47.113017 47.111994l-368.042307 0c-31.469736 0-49.850361 9.293667-54.497195 27.650757-4.669346 18.356067 6.855128 35.241642 34.32169 50.28629l127.443577 73.522504c0.138146 0.092098 0.321318 0.184195 0.505513 0.276293 11.088546 6.074346 19.000749 15.919575 22.176069 27.696806 2.991124 10.996448 1.471514 22.452361-4.41659 32.252565-13.065574 21.762653-44.121893 30.135344-67.815525 18.312064-0.046049-0.046049-0.093121-0.046049-0.184195-0.093121-0.575098-0.276293-60.731176-29.628808-251.735371-125.096113-97.422843-48.676629-144.44274-94.502327-166.779468-124.314307-22.382776-29.9051-24.591071-49.780777-24.729218-51.574632l0-235.103576c0-77.110215 57.280588-124.222209 105.381096-150.07911L217.767234 70.295252z"  horiz-adv-x="1024" />
34 
+
35 
+      <glyph glyph-name="note-2" unicode="&#59049;" d="M915.06611428 793.50229367a52.62849509 52.62849509 0 0 1-43.057281 11.54873831l-448.29141998-79.10094451A52.68122947 52.68122947 0 0 1 380.15915985 674.03350068v-452.72107206C353.39667383 240.71852701 318.67135898 252.16179656999998 280.12283243 252.16179656999998c-22.41193469 0-44.82386856-3.7177446-66.68209644-10.9686643-50.0445313-16.6902995-90.17507676-50.14999924-110.10851477-91.86256358-15.3983172-32.24681817-17.37584061-67.31490399-5.64253363-98.7707123C117.75495989-3.1760523399999556 174.76037433-37.875 242.91902172-37.875c22.41193469 0 44.82386856 3.66501022 66.65572925 10.9686643 50.01816412 16.63756513 90.14870957 50.09726486 110.08214759 91.75709564A130.859329 130.859329 0 0 1 432.39215042 120.32688903999997h0.47460608V542.19859314c3.03220267 0 6.11713972 0.26367023 9.17570957 0.76464268l439.14207677 77.49255842V300.41337314c-26.78885321 19.40609839-61.48780087 30.84936877-100.0626946 30.84936795-22.41193469 0-44.85023574-3.7177446-66.68209643-10.96866431-50.0445313-16.6902995-90.17507676-50.14999924-110.05578123-91.86256357-15.3983172-32.24681817-17.40220779-67.31490399-5.66890082-98.7707123C618.80671008 75.92489218000003 675.75939013 41.225944519999985 743.9444039 41.225944519999985a209.88117278 209.88117278 0 0 1 66.68209643 10.96866431c49.99179694 16.63756513 90.1223432 50.09726486 110.05578041 91.75709564A130.88569619 130.88569619 0 0 1 933.44389978 199.42783355999995h0.47460608V753.13444519c0 15.5565195-6.90814957 30.3747627-18.85239158 40.36784848zM292.85808429 23.08546124999998c-63.17528769-21.06721802-128.48630109-0.47460608-145.78304096 45.87854782-17.34947424 46.40588745 19.80160291 101.09100751 82.95052424 122.15822552 63.17528769 21.06721802 128.48630109 0.52733962 145.78304095-45.87854782 17.37584061-46.37952026-19.77523655-101.09100751-82.95052423-122.15822553z m500.04980448 79.10094451c-63.22802207-21.06721802-128.53903464-0.47460608-145.83577451 45.87854782-17.34947424 46.40588745 19.8279701 101.09100751 82.95052341 122.15822552 63.22802207 21.06721802 128.53903464 0.52733962 145.83577449-45.87854781 17.37584061-46.37952026-19.74886936-101.09100751-82.95052339-122.15822553zM880.1034964 674.03350068L431.81207724 594.93255615V674.03350068L880.1034964 753.13444519v-79.10094451z"  horiz-adv-x="1024" />
36 
+
37 
+      <glyph glyph-name="note-1" unicode="&#58902;" d="M670.634667 234.53866700000003a21.418667 21.418667 0 0 0-19.370667 30.208l34.005333 76.544c26.069333 67.754667 87.125333 226.474667-90.453333 344.832-72.661333 48.469333-73.514667 121.344-73.514667 124.416a21.333333 21.333333 0 0 0 42.666667 0c0.042667-2.005333 1.408-53.546667 54.485333-88.917334 205.994667-137.344 131.157333-331.733333 106.581334-395.648l-4.992-13.226666-30.037334-65.749334a21.248 21.248 0 0 0-19.370666-12.458666zM713.344 341.205333a21.333333 21.333333 0 0 0-21.333333 21.333334c0 58.453333-15.018667 98.176-97.152 152.917333-72.661333 48.469333-73.514667 121.344-73.514667 124.416a21.333333 21.333333 0 0 0 42.666667 0c0.042667-2.005333 1.408-53.546667 54.485333-88.917333 97.152-64.810667 116.181333-118.144 116.181333-188.416a21.333333 21.333333 0 0 0-21.333333-21.333334zM390.144-63.91466700000001c-63.061333 0-111.104 28.885333-122.410667 73.557334-5.504 21.888-1.536 44.928 11.562667 66.688 20.394667 33.962667 61.269333 61.269333 109.312 73.045333a212.778667 212.778667 0 0 0 50.602667 6.229333c63.061333 0 111.104-28.885333 122.410666-73.557333 5.504-21.888 1.536-44.928-11.562666-66.688-20.394667-33.962667-61.269333-61.269333-109.312-73.045333a215.253333 215.253333 0 0 0-50.602667-6.229334z m49.024 176.896c-13.269333 0-26.88-1.706667-40.405333-4.992-36.693333-9.045333-68.48-29.525333-82.901334-53.589333-4.949333-8.234667-10.154667-20.864-6.741333-34.261333 6.186667-24.362667 39.466667-41.386667 81.024-41.386667 13.312 0 26.88 1.706667 40.405333 4.992 36.693333 9.045333 68.48 29.525333 82.901334 53.589333 4.949333 8.234667 10.154667 20.864 6.741333 34.261334-6.144 24.362667-39.424 41.386667-81.024 41.386666zM542.677333 42.53866700000003a21.333333 21.333333 0 0 0-21.333333 21.333333v746.666667a21.333333 21.333333 0 0 0 42.666667 0v-746.666667a21.333333 21.333333 0 0 0-21.333334-21.333333z"  horiz-adv-x="1024" />
38 
+
39 
+    </font>
40 
+  </defs>
41 
+</svg>

BIN
public/fonts/iconfont.ttf Dosyayı Görüntüle


BIN
public/fonts/iconfont.woff Dosyayı Görüntüle


BIN
public/fonts/iconfont.woff2 Dosyayı Görüntüle


BIN
public/images/pg1/14个国家.png Dosyayı Görüntüle


BIN
public/images/pg1/2亿人.png Dosyayı Görüntüle


BIN
public/images/pg1/30万文字.png Dosyayı Görüntüle


BIN
public/images/pg1/BG.png Dosyayı Görüntüle


BIN
public/images/pg1/关闭按钮.png Dosyayı Görüntüle


BIN
public/images/pg1/紫金草行动logo.png Dosyayı Görüntüle


BIN
public/images/pg1/花丛.png Dosyayı Görüntüle


BIN
public/images/pg1/近20万枚.png Dosyayı Görüntüle


BIN
public/images/pg1/音乐按钮.png Dosyayı Görüntüle


BIN
public/images/pg2/2de9913336480164862438fd1dd3f4a6.jpg Dosyayı Görüntüle


BIN
public/images/pg2/BG.jpg Dosyayı Görüntüle


BIN
public/images/pg2/index.png Dosyayı Görüntüle


BIN
public/images/pg2/smoke.png Dosyayı Görüntüle


BIN
public/images/pg2/了解故事.png Dosyayı Görüntüle


BIN
public/images/pg2/云1.png Dosyayı Görüntüle


BIN
public/images/pg2/云2.png Dosyayı Görüntüle


BIN
public/images/pg2/前景土堆.png Dosyayı Görüntüle


BIN
public/images/pg2/废墟中的绯红.png Dosyayı Görüntüle


BIN
public/images/pg2/远山.png Dosyayı Görüntüle


+ 1
- 0
public/qrcode.min.js
Dosya farkı çok büyük olduğundan ihmal edildi
Dosyayı Görüntüle


BIN
public/share.jpg Dosyayı Görüntüle


+ 10
- 0
public/vconsole.min.js
Dosya farkı çok büyük olduğundan ihmal edildi
Dosyayı Görüntüle


+ 1
- 0
public/vite.svg Dosyayı Görüntüle 

@@ -0,0 +1 @@
1 
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

+ 1
- 0
public/wx/jweixin-1.6.0.js
Dosya farkı çok büyük olduğundan ihmal edildi
Dosyayı Görüntüle


+ 9
- 0
src/App.vue Dosyayı Görüntüle 

@@ -0,0 +1,9 @@
1 
+<script setup>
2 
+</script>
3 
+
4 
+<template>
5 
+  <router-view></router-view>
6 
+</template>
7 
+
8 
+<style lang="less" scoped>
9 
+</style>

+ 1
- 0
src/assets/vue.svg Dosyayı Görüntüle 

@@ -0,0 +1 @@
1 
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

+ 43
- 0
src/components/CoverBtn.vue Dosyayı Görüntüle 

@@ -0,0 +1,43 @@
1 
+<template>
2 
+  <div
3 
+    class="cover-btn"
4 
+    @click="onClick"
5 
+    :style="styleRef"
6 
+  >
7 
+    <slot></slot>
8 
+  </div>
9 
+</template>
10 
+
11 
+<script setup>
12 
+import { computed, ref } from 'vue';
13 
+
14 
+  const props = defineProps({
15 
+    center: {
16 
+      type: Array,
17 
+      default: [],
18 
+    },
19 
+    width: Number,
20 
+    height: Number,
21 
+  });
22 
+
23 
+  const emit = defineEmits(['click']);
24 
+
25 
+  const styleRef = computed(() => {
26 
+    return {
27 
+      left: `${props.center[0] - props.width / 2}px`,
28 
+      top: `${props.center[1] - props.height / 2}px`,
29 
+      width: `${props.width}px`,
30 
+      height: `${props.height}px`,
31 
+    }
32 
+  })
33 
+
34 
+  const onClick = e => emit('click', e);
35 
+</script>
36 
+
37 
+<style lang="less" scoped>
38 
+.cover-btn {
39 
+  position: absolute;
40 
+  // background: rgba(255, 0, 0, 0.5);
41 
+  z-index: 10;
42 
+}
43 
+</style>

+ 51
- 0
src/components/Image.vue Dosyayı Görüntüle 

@@ -0,0 +1,51 @@
1 
+<template>
2 
+  <img class="page-image" :src="src" alt="" @load="onLoad">
3 
+  <template v-if="actions">
4 
+    <CoverBtn
5 
+      v-for="(action, inx) in actions"
6 
+      :key="inx"
7 
+      :center="centers[inx]"
8 
+      :width="action.width"
9 
+      :height="action.height"
10 
+      @click="action.onClick"
11 
+    />
12 
+  </template>
13 
+</template>
14 
+
15 
+<script setup>
16 
+  import { ref } from 'vue';
17 
+  import CoverBtn from '@/components/CoverBtn.vue'
18 
+
19 
+  const props = defineProps({
20 
+    src: String,
21 
+    actions: Array,
22 
+  });
23 
+  const emit = defineEmits(['load']);
24 
+
25 
+  const centers = ref([]);
26 
+
27 
+  const onLoad = (e) => {
28 
+    emit('load', e);
29 
+    const { width, height, naturalHeight, naturalWidth } = e.target;
30 
+    const xRate = width / naturalWidth;
31 
+    const yRate = height / naturalHeight;
32 
+
33 
+    if (props.actions && props.actions.length) {
34 
+      centers.value = props.actions.map(action => {
35 
+        const [xPos, yPos] = action.pos
36 
+        return [xRate * xPos, yRate * yPos]
37 
+      });
38 
+    }
39 
+  }
40 
+
41 
+</script>
42 
+
43 
+<style lang="less" scoped>
44 
+.page-image {
45 
+  position: absolute;
46 
+  top: 0;
47 
+  left: 0;
48 
+  display: block;
49 
+  width: 100%;
50 
+}
51 
+</style>

+ 35
- 0
src/components/QrCode.vue Dosyayı Görüntüle 

@@ -0,0 +1,35 @@
1 
+<template>
2 
+  <div class="qrcode-box">
3 
+    <div id="qrcode" class="qrcode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script setup>
8 
+  import { onMounted, ref } from 'vue';
9 
+  import { useModel } from "@zjxpcyc/vue-tiny-store";
10 
+
11 
+  const [,update] = useModel("qrcode");
12 
+
13 
+  onMounted(() => {
14 
+    const qrcode = new QRCode("qrcode");
15 
+    qrcode.makeCode(location.origin + location.pathname);
16 
+
17 
+    const qrCanvas = document.querySelector('#qrcode canvas');
18 
+    update(qrCanvas.toDataURL(undefined, 0.9))
19 
+  })
20 
+</script>
21 
+
22 
+<style lang="less" scoped>
23 
+.qrcode-box {
24 
+  position: absolute;
25 
+  max-width: 1px;
26 
+  max-height: 1px;
27 
+  overflow: hidden;
28 
+  // z-index: 1000;
29 
+
30 
+  .qrcode {
31 
+    width:160px;
32 
+    height:160px;
33 
+  }
34 
+}
35 
+</style>

+ 18
- 0
src/components/TGradient.vue Dosyayı Görüntüle 

@@ -0,0 +1,18 @@
1 
+<template>
2 
+  <div class="t-gradient-box"></div>
3 
+</template>
4 
+
5 
+<script setup>
6 
+
7 
+  const props = defineProps({
8 
+    color: String,
9 
+  });
10 
+</script>
11 
+
12 
+<style lang="less" scoped>
13 
+  .t-gradient-box {
14 
+    position: absolute;
15 
+    z-index: 26;
16 
+    background: linear-gradient(0, transparent, v-bind(color), transparent);
17 
+  }
18 
+</style>

+ 18
- 0
src/main.js Dosyayı Görüntüle 

@@ -0,0 +1,18 @@
1 
+import { createApp } from 'vue'
2 
+import VueViewer from 'v-viewer'
3 
+import 'viewerjs/dist/viewer.css'
4 
+import './style.css'
5 
+import App from './App.vue'
6 
+import store from './store'
7 
+import wxsdk from './utils/wx'
8 
+import router from './router'
9 
+
10 
+// const { share } = wxsdk(location.href)
11 
+
12 
+const app = createApp(App);
13 
+app.use(VueViewer);
14 
+app.use(store);
15 
+app.use(router);
16 
+app.mount('#app');
17 
+
18 
+// share();

+ 50
- 0
src/pages/index.vue Dosyayı Görüntüle 

@@ -0,0 +1,50 @@
1 
+<template>
2 
+  <div class="container">
3 
+    <div class="aud abs"></div>
4 
+    <Pg1 />
5 
+    <Pg2 />
6 
+  </div>
7 
+</template>
8 
+
9 
+<script setup>
10 
+import { onMounted } from 'vue';
11 
+import parallaxing from '@/utils/parallaxing.js';
12 
+
13 
+import Pg1 from './pg1/index.vue';
14 
+import Pg2 from './pg2/index.vue';
15 
+
16 
+onMounted(() => {
17 
+  parallaxing()
18 
+})
19 
+
20 
+</script>
21 
+
22 
+<style lang="less">
23 
+.container {
24 
+  width: 100vw;
25 
+  height: 100vh;
26 
+  position: relative;
27 
+  overflow-y: auto;
28 
+
29 
+  .aud {
30 
+    top: 20px;
31 
+    right: 20px;
32 
+    width: 36px;
33 
+    height: 36px;
34 
+    background-image: url('./images/pg1/音乐按钮.png');
35 
+    background-size:100% 100%;
36 
+    z-index: 100;
37 
+  }
38 
+
39 
+  .abs {
40 
+    position: absolute;
41 
+  }
42 
+
43 
+  .pg {
44 
+    position: relative;
45 
+    width: 100%;
46 
+    height: 100%;
47 
+    overflow: hidden;
48 
+  }
49 
+}
50 
+</style>

+ 68
- 0
src/pages/pg1/index.vue Dosyayı Görüntüle 

@@ -0,0 +1,68 @@
1 
+<template>
2 
+  <div class="pg pg1" parallax>
3 
+    <div class="logo" parallax-offset="200" parallax-out='0' parallax-in='100'>
4 
+      <img src="/images/pg1/紫金草行动logo.png" alt="">
5 
+    </div>
6 
+    <div class="content">
7 
+      <p>2014年至今</p>
8 
+      <p>一朵紫色小花</p>
9 
+      <p>在全球<strong>14个国家</strong>被点亮</p>
10 
+      <p><strong>近20万枚</strong>紫金草徽章</p>
11 
+      <p>佩戴在了人们的心口</p>
12 
+      <p>在<strong>2亿人</strong>心中</p>
13 
+      <p>和平的愿景被播撒</p>
14 
+    </div>
15 
+    <div class="bei abs" parallax-offset="100" parallax-out='0' parallax-in='100'>
16 
+      <img src="/images/pg1/30万文字.png" alt="">
17 
+    </div>
18 
+    <div class="footer abs" parallax-offset="20" parallax-out='0' parallax-in='100'>
19 
+      <img src="/images/pg1/花丛.png" alt="">
20 
+    </div>
21 
+  </div>
22 
+</template>
23 
+
24 
+
25 
+<style lang="less" scoped>
26 
+.pg1 {
27 
+  background-image: url('./images/pg1/BG.png');
28 
+  background-size:100% 100%;
29 
+
30 
+  .logo {
31 
+    width: 60%;
32 
+    margin: auto;
33 
+    padding-top: 100px;
34 
+
35 
+    img {
36 
+      width: 100%;
37 
+    }
38 
+  }
39 
+
40 
+  .content {
41 
+    padding-top: 1em;
42 
+    text-align: center;
43 
+    color: #66579C;
44 
+    font-weight: bold;
45 
+
46 
+    strong {
47 
+
48 
+    }
49 
+  }
50 
+
51 
+  .bei, .footer {
52 
+    width: 100vw;
53 
+    z-index: 0;
54 
+    left: 0;
55 
+    bottom: 0;
56 
+
57 
+    img {
58 
+      width: 100%;
59 
+      display: block;
60 
+    }
61 
+  }
62 
+
63 
+  .footer {
64 
+    z-index: 10;
65 
+  }
66 
+}
67 
+
68 
+</style>

+ 109
- 0
src/pages/pg2/index.vue Dosyayı Görüntüle 

@@ -0,0 +1,109 @@
1 
+<template>
2 
+  <div class="pg pg2" parallax>
3 
+    <div class="cloud1 abs"></div>
4 
+    <div class="cloud2 abs"></div>
5 
+    <div class="content"  parallax-offset="40" parallax-out='0' parallax-in='100'>
6 
+      <p>1939年,</p>
7 
+      <p><strong>一抹紫色</strong>在战争的废墟中……</p>
8 
+      <p>
9 
+        <img class="story" src="/images/pg2/了解故事.png" alt="">
10 
+      </p>
11 
+    </div>
12 
+    <div class="hill abs" parallax-offset="80" parallax-out='0' parallax-in='100'>
13 
+      <img src="/images/pg2/远山.png" alt="">
14 
+    </div>
15 
+    <Smoke class="smoke abs" />
16 
+    <div class="wall abs" parallax-offset="60" parallax-out='0' parallax-in='100'>
17 
+      <img src="/images/pg2/废墟中的绯红.png" alt="">
18 
+    </div>
19 
+
20 
+    <div class="flower abs" parallax-offset="30" parallax-out='0' parallax-in='100'>
21 
+      <img src="/images/pg2/前景土堆.png" alt="">
22 
+    </div>
23 
+  </div>
24 
+</template>
25 
+
26 
+<script setup>
27 
+import Smoke from './smoke.vue';
28 
+</script>
29 
+
30 
+<style lang="less" scoped>
31 
+.pg2 {
32 
+  background-image: url('./images/pg2/BG.jpg');
33 
+  background-size:100% 100%;
34 
+
35 
+  .cloud1 {
36 
+    width: 40vw;
37 
+    height: 120px;
38 
+    top: 10px;
39 
+    right: -10px;
40 
+    z-index: 0;
41 
+
42 
+    background-image: url('./images/pg2/云1.png');
43 
+    background-size:100% 100%;
44 
+  }
45 
+
46 
+  .cloud2 {
47 
+    width: 40vw;
48 
+    height: 120px;
49 
+    top: 10px;
50 
+    left: -10vw;
51 
+    z-index: 0;
52 
+
53 
+    background-image: url('./images/pg2/云2.png');
54 
+    background-size:100% 100%;
55 
+  }
56 
+
57 
+  .content {
58 
+    z-index: 10;
59 
+    width: 80vw;
60 
+    margin-left: 20vw;
61 
+    padding-top: 80px;
62 
+    text-align: left;
63 
+    color: #66579C;
64 
+    font-weight: bold;
65 
+
66 
+    .story {
67 
+      width: 40%;
68 
+      display: block;
69 
+    }
70 
+  }
71 
+
72 
+  .hill {
73 
+    top: 30vh;
74 
+    left: 0;
75 
+    z-index: 1;
76 
+    width: 100%;
77 
+  }
78 
+
79 
+  .smoke {
80 
+    bottom: 0;
81 
+    left: 0;
82 
+    z-index: 2;
83 
+    width: 100%;
84 
+    height: 400px;
85 
+    background: transparent;
86 
+  }
87 
+
88 
+  .wall {
89 
+    bottom: 0;
90 
+    left: 0;
91 
+    width: 100%;
92 
+    z-index: 3;
93 
+  }
94 
+
95 
+  .flower {
96 
+    bottom: 0;
97 
+    left: 0;
98 
+    width: 100%;
99 
+    z-index: 4;
100 
+  }
101 
+
102 
+  .hill, .wall, .flower {
103 
+    img {
104 
+      width: 100%;
105 
+      display: block;
106 
+    }
107 
+  }
108 
+}
109 
+</style>

+ 100
- 0
src/pages/pg2/smoke.vue Dosyayı Görüntüle 

@@ -0,0 +1,100 @@
1 
+<template>
2 
+  <div>
3 
+    <div class="smoke-container">
4 
+      <span v-for="(it, inx) in total" :key="inx" :style="`--si:${random(1, total)};`"></span>
5 
+    </div>
6 
+  </div>
7 
+</template>
8 
+
9 
+<script setup>
10 
+const total = 60;
11 
+const random = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min;
12 
+
13 
+</script>
14 
+
15 
+
16 
+<style lang="less">
17 
+.smoke-container {
18 
+  position: relative;
19 
+  // display: flex;
20 
+  width: 30px;
21 
+  margin: auto;
22 
+
23 
+  span {
24 
+    position: absolute;
25 
+    display: block;
26 
+    width: 30px;
27 
+    height: 100px;
28 
+    // background: #000;
29 
+    background-image: url('./images/pg2/smoke.png');
30 
+    background-size: 100% 100%;
31 
+    background-repeat: no-repeat;
32 
+    opacity: 0;
33 
+    filter: blur(2px);
34 
+
35 
+    &:nth-child(odd) {
36 
+      animation: smoke 5s linear infinite;
37 
+      animation-delay: calc(var(--si) * -0.5s);
38 
+    }
39 
+
40 
+    &:nth-child(even) {
41 
+      animation: smoke-2 5s linear infinite;
42 
+      animation-delay: calc(var(--si) * -0.5s);
43 
+    }
44 
+
45 
+    &:nth-child(4n+1) {
46 
+      left: -8px;
47 
+    }
48 
+
49 
+    &:nth-child(4n+2) {
50 
+      left: -4px;
51 
+    }
52 
+
53 
+    &:nth-child(4n+3) {
54 
+      left: 4px;
55 
+    }
56 
+
57 
+    &:nth-child(4n) {
58 
+      left: 8px;
59 
+    }
60 
+  }
61 
+
62 
+  @keyframes smoke {
63 
+    0% {
64 
+      transform: none;
65 
+      opacity: 0;
66 
+    }
67 
+    20% {
68 
+      opacity: 0.4;
69 
+    }
70 
+    // 50% {
71 
+    //   transform: translateY(-100px) translateX(0) rotate(45deg);
72 
+    // }
73 
+    95% {
74 
+      opacity: 0;
75 
+    }
76 
+    100% {
77 
+      transform: translateY(-200px) translateX(100px) rotate(20deg);
78 
+    }
79 
+  }
80 
+
81 
+  @keyframes smoke-2 {
82 
+    0% {
83 
+      transform: none;
84 
+      opacity: 0;
85 
+    }
86 
+    20% {
87 
+      opacity: 0.4;
88 
+    }
89 
+    // 50% {
90 
+    //   transform: translateY(-100px) translateX(0) rotate(-45deg);
91 
+    // }
92 
+    95% {
93 
+      opacity: 0;
94 
+    }
95 
+    100% {
96 
+      transform: translateY(-200px) translateX(100px) rotate(-20deg);
97 
+    }
98 
+  }
99 
+}
100 
+</style>

+ 13
- 0
src/router.js Dosyayı Görüntüle 

@@ -0,0 +1,13 @@
1 
+
2 
+import { createRouter, createWebHashHistory } from 'vue-router'
3 
+
4 
+const routes = [
5 
+  { path: '/', component: () => import('@/pages/index.vue') },
6 
+]
7 
+
8 
+const router = createRouter({
9 
+  history: createWebHashHistory(),
10 
+  routes, // short for `routes: routes`
11 
+})
12 
+
13 
+export default router;

+ 32
- 0
src/store/index.js Dosyayı Görüntüle 

@@ -0,0 +1,32 @@
1 
+import { ref } from 'vue';
2 
+import createStore from '@zjxpcyc/vue-tiny-store';
3 
+
4 
+const usePoem = () => {
5 
+  const content = ref()
6 
+
7 
+  const update = (val) => {
8 
+    content.value = val;
9 
+  }
10 
+
11 
+  return [
12 
+    content,
13 
+    update,
14 
+  ]
15 
+};
16 
+
17 
+const useQRCode = () => {
18 
+  const content = ref()
19 
+
20 
+  const update = (val) => {
21 
+    content.value = val;
22 
+  }
23 
+
24 
+  return [
25 
+    content,
26 
+    update,
27 
+  ]
28 
+};
29 
+
30 
+const store = createStore({ poem: usePoem, qrcode: useQRCode });
31 
+
32 
+export default store;

+ 27
- 0
src/style.css Dosyayı Görüntüle 

@@ -0,0 +1,27 @@
1 
+:root {
2 
+  font-size: 16px;
3 
+  line-height: 24px;
4 
+  font-weight: 400;
5 
+
6 
+  font-synthesis: none;
7 
+  text-rendering: optimizeLegibility;
8 
+  -webkit-font-smoothing: antialiased;
9 
+  -moz-osx-font-smoothing: grayscale;
10 
+  -webkit-text-size-adjust: 100%;
11 
+}
12 
+
13 
+html, body, #app {
14 
+  margin: 0;
15 
+  height: 100%;
16 
+}
17 
+
18 
+img {
19 
+  border: none;
20 
+}
21 
+
22 
+.page {
23 
+  position: relative;
24 
+  width: 100vw;
25 
+  height: 100vh;
26 
+  background-color: #0f2c37;
27 
+}

+ 29
- 0
src/utils/amap.js Dosyayı Görüntüle 

@@ -0,0 +1,29 @@
1 
+import AMapLoader from '@amap/amap-jsapi-loader';
2 
+
3 
+export function amapInit() {
4 
+  return new Promise((resolve, reject) => {
5 
+
6 
+    window._AMapSecurityConfig = {
7 
+      securityJsCode: AMAP_SEC_CODE,  // 来源 public/config.js
8 
+    };
9 
+    AMapLoader.load({
10 
+      "key": AMAP_KEY,  // 来源 public/config.js
11 
+      "version": "2.0",
12 
+      "plugins": [],
13 
+    }).then((AMap)=>{
14 
+      window.AMap = AMap;
15 
+      resolve(AMap);
16 
+    }).catch((e)=>{
17 
+      console.error(e);  //加载错误提示
18 
+      reject(e);
19 
+    });
20 
+  })
21 
+}
22 
+
23 
+export function newMarker(options = {}) {
24 
+  return new AMap.Marker({
25 
+    content: '<div class="cust-map-marker"></div>',  // 自定义点标记覆盖物内容
26 
+    offset: new AMap.Pixel(-30, -10), // 相对于基点的偏移位置
27 
+    ...options
28 
+  });
29 
+}

+ 8
- 0
src/utils/page.js Dosyayı Görüntüle 

@@ -0,0 +1,8 @@
1 
+
2 
+// 这个值先取, 不能动态
3 
+// 因为移动端出现输入法的时候会变
4 
+const height = document.documentElement.clientHeight || document.body.clientHeight;
5 
+
6 
+export function getPageStyle(fitHeight) {
7 
+  return fitHeight > height ? { height: `${fitHeight}px`, overflow: 'hidden' } : { height: `${height}px`, overflow: 'hidden' }
8 
+}

+ 112
- 0
src/utils/parallaxing.js Dosyayı Görüntüle 

@@ -0,0 +1,112 @@
1 
+// https://github.com/yokiijay/parallaxing
2 
+
3 
+export default function () {
4 
+  const allParallaxParents = document.querySelectorAll('*[parallax]')
5 
+  let allParallax = []
6 
+
7 
+  /*------------------ Initial ------------------*/
8 
+  allParallaxParents.forEach(el => {
9 
+    const rect = el.getBoundingClientRect() // 获取parent的边界
10 
+    const { top, height } = rect // 只需要拿到parent距离屏幕顶部距离 和 自身高度
11 
+    const MidY = top + height / 2 // parent的中线距离屏幕顶部距离
12 
+    const children = el.querySelectorAll('*[parallax-offset]')
13 
+    allParallax.push({
14 
+      parent: el,
15 
+      children
16 
+    })
17 
+
18 
+    children.forEach(child => {
19 
+      const OFFSET = -Number(child.getAttribute('parallax-offset')) // 视差值
20 
+      const OUT = (Number(child.getAttribute('parallax-out'))||0) / 100 * window.innerHeight // 出点
21 
+      const IN = (Number(child.getAttribute('parallax-in'))||100) / 100 * window.innerHeight // 入点
22 
+      let Y = getTransform(child, 'translateY'),
23 
+          X = getTransform(child, 'translateX'),
24 
+          Rotation = getTransform(child, 'rotate'),
25 
+          Scale = getTransform(child, 'scale')
26 
+
27 
+      child.Y = Y
28 
+      child.X = X
29 
+      child.Rotation = Rotation
30 
+      child.Scale = Scale
31 
+      // 改变child的transform
32 
+      child.style.transform = `translate(${X}px,${Y + modulate(MidY, [OUT, IN], [-OFFSET / 2, OFFSET / 2])}px) rotate(${Rotation}deg) scale(${Scale||1})`
33 
+    })
34 
+  })
35 
+
36 
+  /*------------------ Listen ------------------*/
37 
+  window.addEventListener('scroll', childrenParallaxing, true)
38 
+
39 
+  /*------------------ Functions ------------------*/
40 
+  function childrenParallaxing() {
41 
+    allParallax.forEach(object => {
42 
+      const { parent, children } = object
43 
+      const rect = parent.getBoundingClientRect() // 获取parent的边界
44 
+      const { top, height } = rect // 只需要拿到parent距离屏幕顶部距离 和 自身高度
45 
+      const MidY = top + height / 2 // parent的中线距离屏幕顶部距离
46 
+
47 
+      children.forEach(child => {
48 
+        const { Y, X, Rotation, Scale } = child
49 
+        const OFFSET = -Number(child.getAttribute('parallax-offset')) // 视差值
50 
+        const OUT = (Number(child.getAttribute('parallax-out'))||0) / 100 * window.innerHeight // 出点
51 
+        const IN = (Number(child.getAttribute('parallax-in'))||100) / 100 * window.innerHeight // 入点
52 
+        // 改变child的transform
53 
+        child.style.transform = `translate(${X}px,${Y + modulate(MidY, [OUT, IN], [-OFFSET / 2, OFFSET / 2])}px) rotate(${Rotation}deg) scale(${Scale || 1})`
54 
+      })
55 
+    })
56 
+  }
57 
+
58 
+  /*------------------ Utils ------------------*/
59 
+
60 
+  // 联动函数 例如modulate(50,[0,100],[500,1000]) => 750
61 
+  function modulate(i, [a, b], [c, d]) {
62 
+    return (i - a) / (b - a) * (d - c) + c
63 
+  }
64 
+
65 
+  // 获取transform函数
66 
+  function getTransform(target, property) {
67 
+    const style = window.getComputedStyle(target, null)
68 
+    const str = style.getPropertyValue("-webkit-transform") ||
69 
+      style.getPropertyValue("-moz-transform") ||
70 
+      style.getPropertyValue("-ms-transform") ||
71 
+      style.getPropertyValue("-o-transform") ||
72 
+      style.getPropertyValue("transform") ||
73 
+      "fail...";
74 
+
75 
+    if (str === 'none') return 0
76 
+
77 
+
78 
+    let values = str.split('(')[1]
79 
+    values = values.split('(')[0]
80 
+    values = values.split(',')
81 
+
82 
+    let [a, b, c, d, e, f] = [...values]
83 
+
84 
+    // scale
85 
+    const scale = Math.sqrt(a * a + b * b)
86 
+
87 
+    // rotate
88 
+    const sin = b / scale
89 
+    const rotate = Math.round(Math.asin(sin) * (180 / Math.PI))
90 
+
91 
+    // translateX
92 
+    const translateX = parseFloat(e)
93 
+
94 
+    // translateY
95 
+    const translateY = parseFloat(f)
96 
+
97 
+    const object = {
98 
+      scale,
99 
+      rotate,
100 
+      translateX,
101 
+      translateY
102 
+    }
103 
+
104 
+    // if (!object[property]) return console.error('没有找到:' + property)
105 
+    return {
106 
+      scale,
107 
+      rotate,
108 
+      translateX,
109 
+      translateY
110 
+    }[property]
111 
+  }
112 
+}

+ 39
- 0
src/utils/preload.js Dosyayı Görüntüle 

@@ -0,0 +1,39 @@
1 
+import { resources } from "./resources";
2 
+
3 
+export function preload(onProgress) {
4 
+
5 
+  // 拿出所有图片
6 
+  const images = resources.reduce((list, item) => {
7 
+    if (item.image) {
8 
+      list.push(item.image)
9 
+    }
10 
+    if (item.thumb1) {
11 
+      list.push(item.thumb1)
12 
+    }
13 
+    if (item.thumb2) {
14 
+      list.push(item.thumb2)
15 
+    }
16 
+
17 
+    return list;
18 
+  }, [])
19 
+
20 
+  return new Promise((resolve, reject) => {
21 
+    const total = images.length;
22 
+    let cursor = 0;
23 
+
24 
+    const callback = (e, isError) => {
25 
+      cursor += 1;
26 
+      onProgress(cursor / total);
27 
+      if (cursor >= total) {
28 
+        resolve(resources)
29 
+      }
30 
+    }
31 
+
32 
+    for (let src of images) {
33 
+      const img = document.createElement('img');
34 
+      img.onload = e => callback(e, false);
35 
+      img.onerror = e => callback(e, true);
36 
+      img.src = src;
37 
+    }
38 
+  })
39 
+}

+ 363
- 0
src/utils/resources.js Dosyayı Görüntüle 

@@ -0,0 +1,363 @@
1 
+
2 
+export const borders = [
3 
+  './map/top.png',
4 
+  './map/bottom.png',
5 
+  './map/left.png',
6 
+  './map/right.png',
7 
+]
8 
+
9 
+// 预加载资源
10 
+export const resources = [
11 
+  {
12 
+    name: '封面1',
13 
+    image: './images/封面1.jpg',
14 
+  },
15 
+  {
16 
+    name: '封面2',
17 
+    image: './images/封面2.jpg',
18 
+  },
19 
+  {
20 
+    type: 'map',
21 
+    image: './map/map.png',
22 
+    amap: {
23 
+      key: AMAP_KEY,
24 
+    },
25 
+  },
26 
+  {
27 
+    image: borders[0],
28 
+    hidden: true,
29 
+  },
30 
+  {
31 
+    image: borders[1],
32 
+    hidden: true,
33 
+  },
34 
+  {
35 
+    image: borders[2],
36 
+    hidden: true,
37 
+  },
38 
+  {
39 
+    image: borders[3],
40 
+    hidden: true,
41 
+  },
42 
+  {
43 
+    name: '文德桥',
44 
+    showGesture: true,
45 
+    image: './images/1.jpg',
46 
+    thumb1: './infos/1文德桥.jpg',
47 
+    thumb2: './map/文德桥.jpg',
48 
+    titlePos: [165, 638],
49 
+    playBtnPos: [373, 858],
50 
+    virtaulPos: [118.80256, 31.961141],  // 地图位置, 数据是假的，只是为了映射地图图片上的点
51 
+    mapPos: [118.789301, 32.019248],
52 
+    audio: './audios/1文德桥.mp3',
53 
+    desc: `文德桥位于江苏省南京市秦淮区夫子庙泮池西侧，地处夫子庙秦淮风光带，始建于明朝万历年间，后历代均有修葺，相传为李白醉酒捞月之地，后世为以示纪念，在桥旁辟建得月台。“文德桥”的“文德”二字取自儒家思想“文章道德天下第一”。由于这座桥正处在地球的子午线上，所以每逢农历十一月十五日子时，皓月当空，水中月亮正好被这座桥分为东西两边各一半，这一奇观被称为“文德分月”，又称为“文德桥半边月”。`,
54 
+  },
55 
+  {
56 
+    name: '玄武湖后湖印月',
57 
+    image: './images/2.jpg',
58 
+    thumb1: './infos/2后湖映月.jpg',
59 
+    thumb2: './map/后湖映月.jpg',
60 
+    titlePos: [622, 371],
61 
+    playBtnPos: [375, 882],
62 
+    virtaulPos: [118.800714, 31.968786],
63 
+    mapPos: [118.78712, 32.07729],
64 
+    audio: './audios/2玄武湖后湖印月.mp3',
65 
+    desc: `“地拥金陵势，城回江水流。当时百万户，夹道起朱楼。亡国生春草，王宫没古丘。空余后湖月，波上对瀛州。” “后湖”是玄武湖的另一个名字，湖边赏月的李白沉浸在对历史的凭吊之中，写下了《金陵三首》，这首诗是《金陵三首》的第二篇，著名的“后湖映月”景观正是取自这首诗。一轮明月映照着波光粼粼的玄武湖，这美不胜收的场景，至今依然令南京人趋之若鹜。`,
66 
+  },
67 
+  {
68 
+    name: '南京长江大桥',
69 
+    image: './images/3.jpg',
70 
+    thumb1: './infos/3长江大桥.jpg',
71 
+    thumb2: './map/长江大桥.jpg',
72 
+    titlePos: [291, 591],
73 
+    playBtnPos: [376, 752],
74 
+    virtaulPos: [118.793289, 31.971917],
75 
+    mapPos: [118.750487, 32.110156],
76 
+    audio: './audios/3南京长江大桥.mp3',
77 
+    desc: `南京长江大桥位于南京市鼓楼区下关和浦口区桥北之间，是长江上第一座由中国自行设计和建造的双层式铁路、公路两用桥梁，具有极大的经济意义、政治意义和战略意义，有“争气桥”之称。大桥由正桥、南北桥头堡和南北引桥组成，正桥分上下两层，上层为公路桥，正桥长1577米，4车道的宽度，车行道宽15米，可容4辆大型汽车并行，两侧人行道各宽2.25米。下层为铁路桥，全长6772米，宽14米，铺设双轨，两列火车可同时对开。正桥长1576米，其余为引桥，公路引桥长3012米，宽19.5米。`,
78 
+  },
79 
+  {
80 
+    name: '阅江楼',
81 
+    image: './images/4.jpg',
82 
+    thumb1: './infos/4阅江楼.jpg',
83 
+    thumb2: './map/阅江楼.jpg',
84 
+    titlePos: [480, 609],
85 
+    playBtnPos: [325, 988],
86 
+    virtaulPos: [118.797495, 31.971298],
87 
+    mapPos: [118.748536, 32.0944],
88 
+    audio: './audios/4阅江楼.mp3',
89 
+    desc: `阅江楼景区位于南京城西北狮子山巅，濒临长江。明洪武七年（1374年），明太祖朱元璋欲修未成，现建筑为2001年9月竣工景观；因明初文学家宋濂所撰《阅江楼记》而闻名，是江南四大名楼和中国十大历史文化名楼之一，有“江南第一楼”之称。阅江楼隐喻阅江揽胜之意，主楼通高52米，外观4层暗有3层，共7层，碧瓦朱楹、彤扉彩盈，具有鲜明的古典皇家气派，为典型的明代皇家建筑风格，总建筑面积约5000平方米。`,
90 
+  },
91 
+  {
92 
+    name: '秦淮河',
93 
+    image: './images/5.jpg',
94 
+    thumb1: './infos/5秦淮河.jpg',
95 
+    thumb2: './map/秦淮河.jpg',
96 
+    titlePos: [93, 636],
97 
+    playBtnPos: [276, 865],
98 
+    virtaulPos: [118.801529, 31.962706],
99 
+    mapPos: [118.782483, 32.017197],
100 
+    audio: './audios/5秦淮河.mp3',
101 
+    desc: `秦淮河是南京古老文明的摇篮。十里秦淮沿河两岸自东吴以来便一直是繁华的商业区的居民地，六朝时成为名门望族聚居之地，商贾云集，文人荟萃，儒学鼎盛。隋唐以后，渐趋衰落，却引来无数文人骚客来此凭吊，到了宋代逐渐复苏为江南文教中心。明清两代，是十里秦淮的鼎盛时期。清未民初，内秦淮河日渐式微，繁华不再。直至1949年后，南京对秦淮河进行了大规模的疏浚治理，重点开发了秦淮风光带。2010年4月，夫子庙秦淮风光带被评为国家5A级旅游景区，2021年10月，夫子庙秦淮风光带入选首批国家级夜间文化和旅游消费集聚区。`,
102 
+  },
103 
+  {
104 
+    name: '乌衣巷',
105 
+    image: './images/6.jpg',
106 
+    thumb1: './infos/6乌衣巷.jpg',
107 
+    thumb2: './map/乌衣巷.jpg',
108 
+    titlePos: [106, 557],
109 
+    playBtnPos: [427, 839],
110 
+    virtaulPos: [118.805348, 31.96034],
111 
+    mapPos: [118.78964, 32.018653],
112 
+    audio: './audios/6乌衣巷.mp3',
113 
+    desc: `乌衣巷位于南京市秦淮区秦淮河上文德桥旁的南岸，地处夫子庙秦淮风光带核心地带，是中国历史最悠久最著名的古巷，当时中国世家大族居住之地，三国时是吴国戍守石头城部队营房所在地。乌衣巷是晋代王谢两家豪门大族的宅第，两族子弟都喜欢穿乌衣以显身份尊贵，因此得名。乌衣巷门庭若市，冠盖云集，走出了王羲之、王献之，及山水诗派鼻祖谢灵运等文化巨匠。1997年，秦淮区人民政府恢复了乌衣巷，并重建了具有民族风格的王谢古居纪念馆。历经千年的沧桑，如今的乌衣巷已不复昔日的繁华，没有豪门士族的觥筹交错，取而代之的是游人探访王谢华堂踪迹。`,
114 
+  },
115 
+  {
116 
+    name: '燕子矶',
117 
+    image: './images/7.jpg',
118 
+    thumb1: './infos/7燕子矶.jpg',
119 
+    thumb2: './map/燕子矶.jpg',
120 
+    titlePos: [528, 287],
121 
+    playBtnPos: [426, 765],
122 
+    virtaulPos: [118.800499, 31.971954],
123 
+    mapPos: [118.817183, 32.146767],
124 
+    audio: './audios/7燕子矶.mp3',
125 
+    desc: `燕子矶位于江苏省南京市栖霞区江边的直渎山上，三面悬绝，突兀江上，如燕子般欲展翅飞掠江面，故得名燕子矶。直渎山并不高，只有四十多米，却地势险要，燕子矶雄踞山上，总扼大江，在古代是渡江的绝佳渡口和扼守古都南京的军事重地。燕子矶因其独特的地理位置和重要性，被称为万里长江第一矶，位列长江三矶之首。`,
126 
+  },
127 
+  {
128 
+    name: '栖霞山',
129 
+    image: './images/8.jpg',
130 
+    thumb1: './infos/8栖霞山.jpg',
131 
+    thumb2: './map/栖霞山.jpg',
132 
+    titlePos: [183, 492],
133 
+    playBtnPos: [376, 769],
134 
+    virtaulPos: [118.80346, 31.972609],
135 
+    mapPos: [118.967661, 32.155476],
136 
+    audio: './audios/8栖霞山.mp3',
137 
+    desc: `栖霞山，位于南京市栖霞区，古称摄山，南朝时山中建有“栖霞精舍”，因此得名。栖霞山被誉为“金陵第一明秀山”，是国家AAAA级旅游景区、中国四大赏枫胜地之一。历史上曾有五王十四帝登临栖霞山，其中乾隆六下江南，五次驻跸栖霞山。栖霞山素有“六朝胜迹”之称，在明代被列为“金陵四十八景”之一，有“一座栖霞山，半部金陵史”的美誉。栖霞山历史古迹遗址80多处，荟萃了宗教文化、帝王文化、绿色文化、民俗文化、地质文化、石刻文化、茶文化。千年古刹、佛学“三论宗”祖庭、佛教“四大丛林”之一的古栖霞寺就座落在栖霞山西麓。`,
138 
+  },
139 
+  {
140 
+    name: '朝天宫',
141 
+    image: './images/9.jpg',
142 
+    thumb1: './infos/9朝天宫.jpg',
143 
+    thumb2: './map/朝天宫.jpg',
144 
+    titlePos: [603, 612],
145 
+    playBtnPos: [375, 1050],
146 
+    virtaulPos: [118.799555, 31.963617],
147 
+    mapPos: [118.77531, 32.03433],
148 
+    audio: './audios/9朝天宫.mp3',
149 
+    desc: `朝天宫位于南京市秦淮区水西门内，是江南地区现存建筑等级最高、规模最大、保存最为完整的明清官式古建筑群落 ，素有“金陵第一胜迹”之美誉。朝天宫东为府学，中为文庙，西为卞壸祠。朝天宫之名，由明太祖朱元璋下诏御赐，取“朝拜上天”、“朝见天子”之意，是明代皇室贵族焚香祈福的道场和节庆前文武百官演习朝拜天子礼仪的场所。朝天宫与神乐观同为明朝最高等级的皇家道观。朝天宫是典型的明清殿宇式建筑，其建筑格局、样式、营造技术等是研究中国古代建筑，特别是研究明清建筑重要而难得的实物资料，具有极高的历史、艺术和科学价值。`,
150 
+  },
151 
+  {
152 
+    name: '玄武湖梁洲',
153 
+    image: './images/10.jpg',
154 
+    thumb1: './infos/10梁洲.jpg',
155 
+    thumb2: './map/梁洲.jpg',
156 
+    titlePos: [583, 373],
157 
+    playBtnPos: [108, 780],
158 
+    virtaulPos: [118.798224, 31.969951],
159 
+    mapPos: [118.794014, 32.077864],
160 
+    audio: './audios/10玄武湖梁洲.mp3',
161 
+    desc: `梁洲是玄武湖五洲之一，面积8.81公顷，曾名老洲、旧洲、祖洲、莲花洲和美洲，是玄武湖开辟最早的一个洲，为昭明太子编《文选》的读书处，有“梁园”之称，故称梁洲。此洲擅全湖之胜，开明代后湖黄册库之滥觞。洲上人文荟萃，分布着湖神庙遗址、明代黄册库历史文化展馆、览胜楼、闻鸡亭、友谊厅、金陵盆景园等景点。每年一度的玄武湖菊展在此举行，有“梁洲秋菊”之美称。`,
162 
+  },
163 
+  {
164 
+    name: '玄武湖台城',
165 
+    image: './images/11.jpg',
166 
+    thumb1: './infos/11台城.jpg',
167 
+    thumb2: './map/台城.jpg',
168 
+    titlePos: [154, 162],
169 
+    playBtnPos: [418, 715],
170 
+    virtaulPos: [118.794791, 31.969405],
171 
+    mapPos: [118.796622, 32.062437],
172 
+    audio: './audios/11玄武湖台城.mp3',
173 
+    desc: `台城位于南京市玄武区北极阁北麓、玄武湖以南，是从解放门向西延伸出的一段明城墙，这段城墙下设有南京明城垣史博物馆。这段城墙以条石为城基，城基之上用明初烧制的城砖包砌，长253.15米、高20.16米，西端宽9.8米，东端宽10.3米。明太祖朱元璋筑应天府城时，原计划将这段城墙向西修至鼓楼岗并与石头城相接，明朝洪武十九年“新筑后湖城”，这一段城墙便遭废弃。明代后多将这段城墙附会为东晋至南陈时期的台城，并讹传。`,
174 
+  },
175 
+  {
176 
+    name: '紫金山',
177 
+    image: './images/12.jpg',
178 
+    thumb1: './infos/12紫金山.jpg',
179 
+    thumb2: './map/紫金山.jpg',
180 
+    titlePos: [88, 586],
181 
+    playBtnPos: [328, 874],
182 
+    virtaulPos: [118.80419, 31.96966],
183 
+    mapPos: [118.847882, 32.071012],
184 
+    audio: './audios/12紫金山.mp3',
185 
+    desc: `钟山风景名胜区位于江苏省南京市玄武区紫金山，简称钟山风景区，是中国著名的风景游览胜地、首批国家级风景名胜区、首批国家5A级旅游景区、国家森林公园、国家文明风景名胜区、中国旅游胜地四十佳，自古被誉为江南四大名山，有钟山龙蟠的美誉。钟山因山顶常有紫云萦绕，又得名紫金山。紫金山中世界文化遗产1处，全国重点文物保护单位15处，江苏省文物保护单位和市级文物保护单位共31处，“中山伟陵”是金陵新四十景之一。`,
186 
+  },
187 
+  {
188 
+    name: '石头城',
189 
+    image: './images/13.jpg',
190 
+    thumb1: './infos/13石头城.jpg',
191 
+    thumb2: './map/石头城.jpg',
192 
+    titlePos: [696, 292],
193 
+    playBtnPos: [378, 920],
194 
+    virtaulPos: [118.795993, 31.966611],
195 
+    mapPos: [118.756291, 32.04818],
196 
+    audio: './audios/13石头城.mp3',
197 
+    desc: `清凉山古名石头山、石首山、石头城，有“六朝胜迹”之称，园内众多的名胜古迹和历史文化遗址，形成了深厚的历史文化底蕴。诸葛亮曾称金陵形势为“虎踞龙蟠”，虎踞就指今清凉山。战国时楚威王于此置金陵邑，山存有城，名石城山。三国时，东吴改筑石头城，亦名石头山。南唐时曾建避暑行宫于山上。北宋时更名清凉山，后沿用。清代时候的清凉山环境优雅，香烟缭绕，漫山古木参天，浓荫蔽日，清凉寺、扫叶楼等掩映在绿树之中。清“金陵四十八景”中，清凉山占有两个：“石城霁雪”、“清凉问佛”。`,
198 
+  },
199 
+  {
200 
+    name: '莫愁湖公园',
201 
+    image: './images/14.jpg',
202 
+    thumb1: './infos/14莫愁湖公园.jpg',
203 
+    thumb2: './map/莫愁湖.jpg',
204 
+    titlePos: [591, 628],
205 
+    playBtnPos: [588, 827],
206 
+    virtaulPos: [118.794147, 31.962925],
207 
+    mapPos: [118.762613, 32.035341],
208 
+    audio: './audios/14莫愁湖公园.mp3',
209 
+    desc: `莫愁湖公园，位于南京市建邺区外秦淮河西侧，是一座具有1500年悠久历史的古典名园，也是南京市著名的历史文化名片，自古有“金陵第一名胜”、“金陵四十八景之首”等美誉。公园区现有规划用地面积约51.04公顷，其中陆地18.71公顷，湖面32.33公顷，绿化覆盖率达70%以上。海棠、荷花、龙舟及红木文化为景区四大传统特色，每年均会依托四大文化特色举办多彩的园事花事活动，取得了一定知名度和影响力，深受广大市民游客好评。`,
210 
+  },
211 
+  {
212 
+    name: '赏心亭',
213 
+    image: './images/15.jpg',
214 
+    thumb1: './infos/15赏心亭.jpg',
215 
+    thumb2: './map/赏心亭.jpg',
216 
+    titlePos: [81, 492],
217 
+    playBtnPos: [157, 828],
218 
+    virtaulPos: [118.793933, 31.963544],
219 
+    mapPos: [118.768765, 32.028598],
220 
+    audio: './audios/15赏心亭.mp3',
221 
+    desc: `赏心亭位于南京市秦淮区水西门广场西侧外，是一处历史名胜，宋代的金陵胜迹，历代文人均有登临怀古。赏心亭始建于宋代，曾是南京水西门内一处名胜，曾数毁数建。陆游和辛弃疾等古代文学大家都曾登临览胜，赋诗填词。在历史考证和现场调查的基础上，经过专家论证，并参照《营造法式》等宋代建筑书籍和现存宋代建筑的建造手法，在水西门西广场复建赏心亭，建筑风格延续秦淮风光带的明清建筑风格，采用宋代官式风格，八角歇山顶，灰筒瓦屋面。`,
222 
+  },
223 
+  {
224 
+    name: '长干里',
225 
+    image: './images/16.jpg',
226 
+    thumb1: './infos/16长干里.jpg',
227 
+    thumb2: './map/长干里.jpg',
228 
+    titlePos: [258, 551],
229 
+    playBtnPos: [258, 906],
230 
+    virtaulPos: [118.797152, 31.959684],
231 
+    mapPos: [118.78147, 32.01086],
232 
+    audio: './audios/16长干里.mp3',
233 
+    desc: `长干里位于南京市秦淮区内秦淮河以南至雨花台以北，是中国古代著名的地名，是江南佛教圣地，素有“佛陀里”之美誉。长干里地势高亢，雨花台陈于前，秦淮河卫其后，大江护其西，又是秦淮河的入江通道，战略地位十分重要。南京城市的雏形——越城就位于此。范蠡之所以选择在此筑越城，就是看到这块地方物产丰富，交通便利，商业繁荣，人中密集，同时，这里有山水卫护，攻守皆宜。秦、汉、六朝时期，长干里是南京最繁华的地方，是著名的商业区和货物集散地。`,
234 
+  },
235 
+  {
236 
+    name: '大报恩寺遗址景区',
237 
+    image: './images/17.jpg',
238 
+    thumb1: './infos/17大报恩寺.jpg',
239 
+    thumb2: './map/大报恩寺.jpg',
240 
+    titlePos: [640, 502],
241 
+    playBtnPos: [369, 940],
242 
+    virtaulPos: [118.802001, 31.959284],
243 
+    mapPos: [118.782965, 32.009248],
244 
+    audio: './audios/17报恩寺.mp3',
245 
+    desc: `大报恩寺遗址公园位于南京市秦淮区中华门外（长干里附近），北邻外秦淮河，南接雨花台，东至1865园区，西至雨花路，是“规格最高、规模最大、保存最完整”的中国古代寺庙遗址。遗址公园中保护性展示了大报恩寺遗址中的千年地宫和珍贵画廊，以及从地宫中出土的石函、铁函、七宝阿育王塔、金棺银椁等世界级国宝，是夫子庙秦淮风光带重要组成部分。`,
246 
+  },
247 
+  {
248 
+    name: '凤凰台',
249 
+    image: './images/18.jpg',
250 
+    thumb1: './infos/18凤凰台.jpg',
251 
+    thumb2: './map/凤凰台.jpg',
252 
+    titlePos: [345, 668],
253 
+    playBtnPos: [538, 977],
254 
+    virtaulPos: [118.79801, 31.960886],
255 
+    mapPos: [118.769413, 32.014398],
256 
+    audio: './audios/18凤凰台.mp3',
257 
+    desc: `凤凰台位于南京市秦淮区长干里西北侧凤凰山上。杜牧《清明》诗中的杏花村就在附近，“竹林七贤”之一阮籍的衣冠冢也坐落于此。建成的古凤凰台景区占地2.2万平方米，主体建筑凤凰楼高25米，建筑面积1500平方米，远望则巍峨壮观，近观则雕梁彩绘。登高远眺，东接河西新区，西枕长江浪波，南抱三山葱茏，北临万家灯火，大江风貌尽收眼底，是一处叹为观止的胜地。`,
258 
+  },
259 
+  {
260 
+    name: '桃叶渡',
261 
+    image: './images/19.jpg',
262 
+    thumb1: './infos/19桃叶渡.jpg',
263 
+    thumb2: './map/桃叶渡.jpg',
264 
+    titlePos: [676, 467],
265 
+    playBtnPos: [418, 889],
266 
+    virtaulPos: [118.804576, 31.963216],
267 
+    mapPos: [118.794033, 32.022665],
268 
+    audio: './audios/19桃叶渡.mp3',
269 
+    desc: `桃叶渡是南京古名胜之一，位列于金陵四十八景内。在原渡口处立有“桃叶渡碑”，并建有“桃叶渡亭”，从六朝到明清，桃叶渡处均为繁华地段，河舫竞立，灯船萧鼓。传说东晋书法家王献之有个爱妾叫“桃叶”，她往来于秦淮两岸时，王献之放心不下，常常都亲自在渡口迎送，并为之作《桃叶歌》：“桃叶复桃叶，渡江不用楫；但渡无所苦，我自迎接汝。”从此渡口名声大噪久而久之南浦渡也就被称呼为桃叶渡了。`,
270 
+  },
271 
+  {
272 
+    name: '雨花台',
273 
+    image: './images/20.jpg',
274 
+    thumb1: './infos/20雨花台.jpg',
275 
+    thumb2: './map/雨花台.jpg',
276 
+    titlePos: [124, 718],
277 
+    playBtnPos: [378, 1045],
278 
+    virtaulPos: [118.793933, 31.960194],
279 
+    mapPos: [118.781951, 31.997942],
280 
+    audio: './audios/20雨花台.mp3',
281 
+    desc: `雨花台最早记载于公元前1147年，泰伯在这一带传礼授农，南梁天监六年，城南门外高座寺的云光法师常在此设坛说法，感动上苍竟落花如雨，唐朝时改名为雨花台，并沿用至今。雨花台是新民主主义革命时期中国共产党人和爱国志士最集中的殉难地，新中国成立后，党和政府决定在此兴建雨花台烈士陵园，这里是中国新民主主义革命的纪念圣地。雨花台现为首批全国廉政教育基地、全国百家红色旅游经典景区和江苏省首批党性教育现场教学基地。`,
282 
+  },
283 
+  {
284 
+    name: '牛首山',
285 
+    image: './images/21.jpg',
286 
+    thumb1: './infos/21牛首山.jpg',
287 
+    thumb2: './map/牛首山.jpg',
288 
+    titlePos: [148, 655],
289 
+    playBtnPos: [378, 822],
290 
+    virtaulPos: [118.796165, 31.95739],
291 
+    mapPos: [118.74728, 31.896331],
292 
+    audio: './audios/21牛首山.mp3',
293 
+    desc: `牛首山，是中国佛教名山，文化底蕴深厚，是佛教牛头禅宗的开教处和发祥地。山周围有感应泉、虎跑泉、白龟池、兜率岩、文殊洞、辟支洞、含虚阁、地涌泉、饮马池等自然景观，及宏觉寺、弘觉寺塔、郑和墓和抗金故垒等人文景观。牛首山属于宁镇丘陵西段南支，山高248米，因东西双峰对峙形似牛角而得名，风景宜人，有“春牛首”之称。清乾隆年间“牛首烟岚”列入金陵四十八景中。`,
294 
+  },
295 
+  {
296 
+    name: '石臼湖',
297 
+    image: './images/22.jpg',
298 
+    thumb1: './infos/22石臼湖.jpg',
299 
+    thumb2: './map/石臼湖.jpg',
300 
+    titlePos: [174, 427],
301 
+    playBtnPos: [306, 985],
302 
+    virtaulPos: [118.800971, 31.957136],
303 
+    mapPos: [118.91752, 31.46876],
304 
+    audio: './audios/22石臼湖.mp3',
305 
+    desc: `石臼湖，位于江苏省南京市溧水区、高淳区和安徽省马鞍山市当涂县、博望区三区一县交界，是古丹阳湖的一部分，最大面积200多平方公里，湖泊具有灌溉、蓄洪、航运和养殖等多种功能。湖区物产资源丰富，其中以银鱼、螃蟹、野鸭等“三珍”最为出名。石臼湖被人们赞誉为“日出一斗金，夜出一斗银”。但由于无节制捕捞，最晚在21世纪初，银鱼等珍贵品种已经消失。“石臼渔歌”是新金陵四十景之一。`,
306 
+  },
307 
+  {
308 
+    name: '东山',
309 
+    image: './images/23.jpg',
310 
+    thumb1: './infos/23东山.jpg',
311 
+    thumb2: './map/东山.jpg',
312 
+    titlePos: [690, 313],
313 
+    playBtnPos: [639, 816],
314 
+    virtaulPos: [118.803589, 31.958155],
315 
+    mapPos: [118.839137, 31.955481],
316 
+    audio: './audios/23东山.mp3',
317 
+    desc: `东山亦名土山，高62.1米，东晋丞相谢安受命抗御前秦符坚百万南侵之师，谢安一面派名将率8万精兵迎战，一面与家人、朋友至东山别墅“围棋睹墅”安定民心。淝水一战击溃符坚大军，创以少胜多之范例。东山留有“东山别墅”遗址。东山历史上多林木，且“山多蔷薇，春来作花，灿如云锦，故游迹胜矣”。`,
318 
+  },
319 
+  {
320 
+    name: '瞻园',
321 
+    image: './images/24.jpg',
322 
+    thumb1: './infos/24瞻园.jpg',
323 
+    thumb2: './map/瞻园.jpg',
324 
+    titlePos: [148, 549],
325 
+    playBtnPos: [205, 768],
326 
+    virtaulPos: [118.796422, 31.961796],
327 
+    mapPos: [118.785171, 32.021043],
328 
+    audio: './audios/24瞻园.mp3',
329 
+    desc: `瞻园位于江苏省南京市秦淮区夫子庙秦淮风光带核心区，是南京现存历史最久的明代古典园林、“江南四大名园”之一。其历史可追溯至明太祖朱元璋称帝前的吴王府，后赐予中山王徐达的府邸花园，素以假山著称，以欧阳修诗“瞻望玉堂，如在天上”而命名，明代被称为“南都第一园”。现为全国重点文物保护单位、国家AAAAA级旅游景区。`,
330 
+  },
331 
+  {
332 
+    name: '随园',
333 
+    image: './images/25.jpg',
334 
+    thumb1: './infos/25随园.jpg',
335 
+    thumb2: './map/随园.jpg',
336 
+    titlePos: [94, 749],
337 
+    playBtnPos: [367, 1107],
338 
+    virtaulPos: [118.796207, 31.963908],
339 
+    mapPos: [118.767671, 32.053006],
340 
+    audio: './audios/25随园.mp3',
341 
+    desc: `随园位于南京五台山余脉小仓山一带，原为曹雪芹祖上林园，是著名的私家江南园林，清代江南的三大名园之一，现地面主体建筑均已不存，仅存遗址。清乾隆十三年，袁枚购得此园，名之为“随园”，死后即葬于随园。随园在太平天国时期被夷为平地，片橼无存。后太平军开荒种粮，拆毁随园，将园中珍宝运走，天下名园成为了农庄。1923年7月，金陵女子大学校址永久移至随园，随园原为江苏省文物保护单位。`,
342 
+  },
343 
+  {
344 
+    name: '南京世界文学客厅',
345 
+    image: './images/26.jpg',
346 
+    thumb1: './infos/26世界文学客厅.jpg',
347 
+    thumb2: './map/文学客厅.jpg',
348 
+    titlePos: [585, 591],
349 
+    playBtnPos: [376, 939],
350 
+    virtaulPos: [118.797752, 31.965983],
351 
+    mapPos: [118.794237, 32.058407],
352 
+    audio: './audios/26南京世界文学客厅.mp3',
353 
+    desc: `南京世界文学客厅位于南京紫金山入城余脉、古鸡笼山下东南角，由一座3000平方米的院落改造而成。1500多年前，这里是中国历史上第一座文学馆所在地，而今是南京文学空间网络建设的中心和枢纽，承担了南京文学空间城市空间建设引领性的作用，打造“文学之都”的城市客厅、交流展示中心、文学创新活动的试验场，展示南京的文学文脉和作为天下文枢的独特地位，链接全市文学空间与地标，建立数据共享系统，促进文学互动展示体验与文学创作创新。`,
354 
+  },
355 
+  {
356 
+    image: './images/27末尾.jpg',
357 
+    links: [
358 
+      // linkURL 来源 public/config.js
359 
+      { url: link1URL, pos: [374, 99] },
360 
+      { url: link2URL, pos: [374, 206] },
361 
+    ]
362 
+  },
363 
+];

+ 46
- 0
src/utils/scroll.js Dosyayı Görüntüle 

@@ -0,0 +1,46 @@
1 
+
2 
+export default function scroll(dom) {
3 
+  let scrolling = false;
4 
+  let t1 = undefined;
5 
+  const timeDiff = 500;
6 
+
7 
+  const scrollStart = { value: undefined };
8 
+  const scrollEnd = { value: undefined };
9 
+
10 
+  const onScroll = (e) => {
11 
+    if (!scrolling) {
12 
+      if (typeof scrollStart.value === 'function') {
13 
+        scrollStart.value(e);
14 
+      }
15 
+    }
16 
+
17 
+    scrolling = true;
18 
+
19 
+    if (t1) {
20 
+      // 如果存在计时器 t1, 说明在滚动
21 
+      // 立即销毁 t1
22 
+      clearTimeout(t1);
23 
+      t1 = undefined;
24 
+    }
25 
+
26 
+    // t1 主要的作用是触发 stop 事件
27 
+    t1 = setTimeout(() => {
28 
+      // 如果 t1 被触发, 没有被销毁 说明没有在滚动
29 
+      clearTimeout(t1);
30 
+      t1 = undefined;
31 
+      scrolling = false;
32 
+
33 
+      if (typeof scrollEnd.value === 'function') {
34 
+        scrollEnd.value(e);
35 
+      }
36 
+    }, timeDiff);
37 
+  }
38 
+
39 
+  dom.addEventListener('scroll', onScroll);
40 
+
41 
+  return {
42 
+    onStart: cb => scrollStart.value = cb,
43 
+    onEnd: cb => scrollEnd.value = cb,
44 
+    destroy: () => dom.removeEventListener('scroll', onScroll)
45 
+  }
46 
+}

+ 70
- 0
src/utils/wx.js Dosyayı Görüntüle 

@@ -0,0 +1,70 @@
1 
+
2 
+function wxsdk(url) {
3 
+  const isDev = import.meta.env.DEV
4 
+
5 
+  // API_BASE 来源 public/config.js
6 
+  const apiBase = API_BASE // import.meta.env.VITE_APP_API_BASE
7 
+
8 
+  // 分享接口
9 
+  const shareAPIs = [
10 
+    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
11 
+    'updateAppMessageShareData',
12 
+    // 自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
13 
+    'updateTimelineShareData',
14 
+    // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
15 
+    'onMenuShareTimeline',
16 
+    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
17 
+    'onMenuShareAppMessage',
18 
+    // 获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
19 
+    'onMenuShareQQ',
20 
+    // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
21 
+    'onMenuShareWeibo',
22 
+    // 获取“分享到 QQ 空间”按钮点击状态及自定义分享内容接口（即将废弃）
23 
+    'onMenuShareQZone',
24 
+  ]
25 
+
26 
+  function init() {
27 
+    // 请求后台接口
28 
+    fetch(`${apiBase}?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
29 
+      if (res.code === 1000) {
30 
+        const data = res.data;
31 
+
32 
+        wx.config({
33 
+          debug: isDev, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
34 
+          appId: data.appId, // 必填，公众号的唯一标识
35 
+          timestamp: data.timestamp, // 必填，生成签名的时间戳
36 
+          nonceStr: data.nonceStr, // 必填，生成签名的随机串
37 
+          signature: data.signature,// 必填，签名
38 
+          jsApiList: [
39 
+            ...shareAPIs,
40 
+            'openLocation',
41 
+          ] // 必填，需要使用的 JS 接口列表
42 
+        });
43 
+      }
44 
+    })
45 
+  }
46 
+
47 
+  // 立即执行
48 
+  init();
49 
+
50 
+  function share(params = {}) {
51 
+    if (isDev) return;
52 
+
53 
+    wx.ready(() => {
54 
+      for (let api of shareAPIs) {
55 
+        if (typeof wx[api] === 'function') continue;
56 
+
57 
+        wx[api]({
58 
+          ...shareOptTpl,
59 
+          ...params
60 
+        })
61 
+      }
62 
+    });
63 
+  }
64 
+
65 
+  return {
66 
+    share
67 
+  }
68 
+}
69 
+
70 
+export default wxsdk;

+ 22
- 0
vite.config.js Dosyayı Görüntüle 

@@ -0,0 +1,22 @@
1 
+import { defineConfig } from 'vite'
2 
+import vue from '@vitejs/plugin-vue'
3 
+// import path from "path";
4 
+
5 
+// https://vitejs.dev/config/
6 
+export default defineConfig({
7 
+  base: '',
8 
+  server:{
9 
+    host: '0.0.0.0',
10 
+    proxy: {
11 
+      '/api': {
12 
+        target: 'http://127.0.0.1:7088',
13 
+      }
14 
+    }
15 
+  },
16 
+  plugins: [vue()],
17 
+  resolve:{
18 
+    alias:{
19 
+      '@':'/src/',      //格式一定要写对喽不然没有代码提示或者报错
20 
+    }
21 
+  }
22 
+})

+ 561
- 0
yarn.lock Dosyayı Görüntüle 

@@ -0,0 +1,561 @@
1 
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 
+# yarn lockfile v1
3 
+
4 
+
5 
+"@babel/parser@^7.16.4":
6 
+  version "7.20.3"
7 
+  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2"
8 
+  integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==
9 
+
10 
+"@esbuild/android-arm@0.15.15":
11 
+  version "0.15.15"
12 
+  resolved "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.15.15.tgz#35b3cc0f9e69cb53932d44f60b99dd440335d2f0"
13 
+  integrity sha512-JJjZjJi2eBL01QJuWjfCdZxcIgot+VoK6Fq7eKF9w4YHm9hwl7nhBR1o2Wnt/WcANk5l9SkpvrldW1PLuXxcbw==
14 
+
15 
+"@esbuild/linux-loong64@0.15.15":
16 
+  version "0.15.15"
17 
+  resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.15.15.tgz#32c65517a09320b62530867345222fde7794fbe1"
18 
+  integrity sha512-lhz6UNPMDXUhtXSulw8XlFAtSYO26WmHQnCi2Lg2p+/TMiJKNLtZCYUxV4wG6rZMzXmr8InGpNwk+DLT2Hm0PA==
19 
+
20 
+"@vitejs/plugin-vue@^3.0.3":
21 
+  version "3.2.0"
22 
+  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54"
23 
+  integrity sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==
24 
+
25 
+"@vue/compiler-core@3.2.45":
26 
+  version "3.2.45"
27 
+  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.45.tgz#d9311207d96f6ebd5f4660be129fb99f01ddb41b"
28 
+  integrity sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==
29 
+  dependencies:
30 
+    "@babel/parser" "^7.16.4"
31 
+    "@vue/shared" "3.2.45"
32 
+    estree-walker "^2.0.2"
33 
+    source-map "^0.6.1"
34 
+
35 
+"@vue/compiler-dom@3.2.45":
36 
+  version "3.2.45"
37 
+  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce"
38 
+  integrity sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==
39 
+  dependencies:
40 
+    "@vue/compiler-core" "3.2.45"
41 
+    "@vue/shared" "3.2.45"
42 
+
43 
+"@vue/compiler-sfc@3.2.45":
44 
+  version "3.2.45"
45 
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70"
46 
+  integrity sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==
47 
+  dependencies:
48 
+    "@babel/parser" "^7.16.4"
49 
+    "@vue/compiler-core" "3.2.45"
50 
+    "@vue/compiler-dom" "3.2.45"
51 
+    "@vue/compiler-ssr" "3.2.45"
52 
+    "@vue/reactivity-transform" "3.2.45"
53 
+    "@vue/shared" "3.2.45"
54 
+    estree-walker "^2.0.2"
55 
+    magic-string "^0.25.7"
56 
+    postcss "^8.1.10"
57 
+    source-map "^0.6.1"
58 
+
59 
+"@vue/compiler-ssr@3.2.45":
60 
+  version "3.2.45"
61 
+  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz#bd20604b6e64ea15344d5b6278c4141191c983b2"
62 
+  integrity sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==
63 
+  dependencies:
64 
+    "@vue/compiler-dom" "3.2.45"
65 
+    "@vue/shared" "3.2.45"
66 
+
67 
+"@vue/devtools-api@^6.4.5":
68 
+  version "6.4.5"
69 
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
70 
+  integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
71 
+
72 
+"@vue/reactivity-transform@3.2.45":
73 
+  version "3.2.45"
74 
+  resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz#07ac83b8138550c83dfb50db43cde1e0e5e8124d"
75 
+  integrity sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==
76 
+  dependencies:
77 
+    "@babel/parser" "^7.16.4"
78 
+    "@vue/compiler-core" "3.2.45"
79 
+    "@vue/shared" "3.2.45"
80 
+    estree-walker "^2.0.2"
81 
+    magic-string "^0.25.7"
82 
+
83 
+"@vue/reactivity@3.2.45":
84 
+  version "3.2.45"
85 
+  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0"
86 
+  integrity sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==
87 
+  dependencies:
88 
+    "@vue/shared" "3.2.45"
89 
+
90 
+"@vue/runtime-core@3.2.45":
91 
+  version "3.2.45"
92 
+  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.45.tgz#7ad7ef9b2519d41062a30c6fa001ec43ac549c7f"
93 
+  integrity sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==
94 
+  dependencies:
95 
+    "@vue/reactivity" "3.2.45"
96 
+    "@vue/shared" "3.2.45"
97 
+
98 
+"@vue/runtime-dom@3.2.45":
99 
+  version "3.2.45"
100 
+  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz#1a2ef6ee2ad876206fbbe2a884554bba2d0faf59"
101 
+  integrity sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==
102 
+  dependencies:
103 
+    "@vue/runtime-core" "3.2.45"
104 
+    "@vue/shared" "3.2.45"
105 
+    csstype "^2.6.8"
106 
+
107 
+"@vue/server-renderer@3.2.45":
108 
+  version "3.2.45"
109 
+  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.45.tgz#ca9306a0c12b0530a1a250e44f4a0abac6b81f3f"
110 
+  integrity sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==
111 
+  dependencies:
112 
+    "@vue/compiler-ssr" "3.2.45"
113 
+    "@vue/shared" "3.2.45"
114 
+
115 
+"@vue/shared@3.2.45":
116 
+  version "3.2.45"
117 
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
118 
+  integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
119 
+
120 
+"@zjxpcyc/vue-tiny-store@^1.0.1":
121 
+  version "1.0.1"
122 
+  resolved "https://registry.npmmirror.com/@zjxpcyc/vue-tiny-store/-/vue-tiny-store-1.0.1.tgz#9e67c0f08e9bddd802bdcb543a28c18181e27395"
123 
+  integrity sha512-2r/E2bxGygn859ntWLHPDI+pLUR+MuIEPGSN82Y6xPdbQqcsmX1/+L+Pivh/LwFeEY51YcEDhPH8wkhzmtuD8g==
124 
+
125 
+base64-arraybuffer@^1.0.2:
126 
+  version "1.0.2"
127 
+  resolved "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
128 
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
129 
+
130 
+copy-anything@^2.0.1:
131 
+  version "2.0.6"
132 
+  resolved "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
133 
+  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
134 
+  dependencies:
135 
+    is-what "^3.14.1"
136 
+
137 
+css-line-break@^2.1.0:
138 
+  version "2.1.0"
139 
+  resolved "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
140 
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
141 
+  dependencies:
142 
+    utrie "^1.0.2"
143 
+
144 
+csstype@^2.6.8:
145 
+  version "2.6.21"
146 
+  resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
147 
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
148 
+
149 
+debug@^3.2.6:
150 
+  version "3.2.7"
151 
+  resolved "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
152 
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
153 
+  dependencies:
154 
+    ms "^2.1.1"
155 
+
156 
+errno@^0.1.1:
157 
+  version "0.1.8"
158 
+  resolved "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
159 
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
160 
+  dependencies:
161 
+    prr "~1.0.1"
162 
+
163 
+esbuild-android-64@0.15.15:
164 
+  version "0.15.15"
165 
+  resolved "https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.15.15.tgz#fd959b034dd761d14e13dda6214b6948841ff4ff"
166 
+  integrity sha512-F+WjjQxO+JQOva3tJWNdVjouFMLK6R6i5gjDvgUthLYJnIZJsp1HlF523k73hELY20WPyEO8xcz7aaYBVkeg5Q==
167 
+
168 
+esbuild-android-arm64@0.15.15:
169 
+  version "0.15.15"
170 
+  resolved "https://registry.npmmirror.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.15.tgz#9733b71cf0229b4356f106a455b2cfdf7884aa59"
171 
+  integrity sha512-attlyhD6Y22jNyQ0fIIQ7mnPvDWKw7k6FKnsXlBvQE6s3z6s6cuEHcSgoirquQc7TmZgVCK5fD/2uxmRN+ZpcQ==
172 
+
173 
+esbuild-darwin-64@0.15.15:
174 
+  version "0.15.15"
175 
+  resolved "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.15.tgz#fc3482fdf5e798dbc0b8b2fe13287d257a45efc6"
176 
+  integrity sha512-ohZtF8W1SHJ4JWldsPVdk8st0r9ExbAOSrBOh5L+Mq47i696GVwv1ab/KlmbUoikSTNoXEhDzVpxUR/WIO19FQ==
177 
+
178 
+esbuild-darwin-arm64@0.15.15:
179 
+  version "0.15.15"
180 
+  resolved "https://registry.npmmirror.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.15.tgz#e922ec387c00fa84d664e14b5722fe13613f4adc"
181 
+  integrity sha512-P8jOZ5zshCNIuGn+9KehKs/cq5uIniC+BeCykvdVhx/rBXSxmtj3CUIKZz4sDCuESMbitK54drf/2QX9QHG5Ag==
182 
+
183 
+esbuild-freebsd-64@0.15.15:
184 
+  version "0.15.15"
185 
+  resolved "https://registry.npmmirror.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.15.tgz#69a42d79137d7d3ea718414c432bc10e8bb97c68"
186 
+  integrity sha512-KkTg+AmDXz1IvA9S1gt8dE24C8Thx0X5oM0KGF322DuP+P3evwTL9YyusHAWNsh4qLsR80nvBr/EIYs29VSwuA==
187 
+
188 
+esbuild-freebsd-arm64@0.15.15:
189 
+  version "0.15.15"
190 
+  resolved "https://registry.npmmirror.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.15.tgz#63b6d0dd492f7394f8d07a0e2b931151eb9d60c4"
191 
+  integrity sha512-FUcML0DRsuyqCMfAC+HoeAqvWxMeq0qXvclZZ/lt2kLU6XBnDA5uKTLUd379WYEyVD4KKFctqWd9tTuk8C/96g==
192 
+
193 
+esbuild-linux-32@0.15.15:
194 
+  version "0.15.15"
195 
+  resolved "https://registry.npmmirror.com/esbuild-linux-32/-/esbuild-linux-32-0.15.15.tgz#7f295795fd7e61ea57d1135f717424a6771a7472"
196 
+  integrity sha512-q28Qn5pZgHNqug02aTkzw5sW9OklSo96b5nm17Mq0pDXrdTBcQ+M6Q9A1B+dalFeynunwh/pvfrNucjzwDXj+Q==
197 
+
198 
+esbuild-linux-64@0.15.15:
199 
+  version "0.15.15"
200 
+  resolved "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.15.15.tgz#11a430a86403b0411ca0a355b891f1cb8c4c4ec6"
201 
+  integrity sha512-217KPmWMirkf8liO+fj2qrPwbIbhNTGNVtvqI1TnOWJgcMjUWvd677Gq3fTzXEjilkx2yWypVnTswM2KbXgoAg==
202 
+
203 
+esbuild-linux-arm64@0.15.15:
204 
+  version "0.15.15"
205 
+  resolved "https://registry.npmmirror.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.15.tgz#b65f9a2c60e8e5b62f6cfd392cd0410f22e8c390"
206 
+  integrity sha512-/ltmNFs0FivZkYsTzAsXIfLQX38lFnwJTWCJts0IbCqWZQe+jjj0vYBNbI0kmXLb3y5NljiM5USVAO1NVkdh2g==
207 
+
208 
+esbuild-linux-arm@0.15.15:
209 
+  version "0.15.15"
210 
+  resolved "https://registry.npmmirror.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.15.tgz#c8e13e45a0a6f0cb145ce13ae26ce1d2551d9bcc"
211 
+  integrity sha512-RYVW9o2yN8yM7SB1yaWr378CwrjvGCyGybX3SdzPHpikUHkME2AP55Ma20uNwkNyY2eSYFX9D55kDrfQmQBR4w==
212 
+
213 
+esbuild-linux-mips64le@0.15.15:
214 
+  version "0.15.15"
215 
+  resolved "https://registry.npmmirror.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.15.tgz#d4c24d47e43966fcac748c90621be7edd53456c0"
216 
+  integrity sha512-PksEPb321/28GFFxtvL33yVPfnMZihxkEv5zME2zapXGp7fA1X2jYeiTUK+9tJ/EGgcNWuwvtawPxJG7Mmn86A==
217 
+
218 
+esbuild-linux-ppc64le@0.15.15:
219 
+  version "0.15.15"
220 
+  resolved "https://registry.npmmirror.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.15.tgz#2eba53fe2282438ceca5471bdb57ba2e00216ed6"
221 
+  integrity sha512-ek8gJBEIhcpGI327eAZigBOHl58QqrJrYYIZBWQCnH3UnXoeWMrMZLeeZL8BI2XMBhP+sQ6ERctD5X+ajL/AIA==
222 
+
223 
+esbuild-linux-riscv64@0.15.15:
224 
+  version "0.15.15"
225 
+  resolved "https://registry.npmmirror.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.15.tgz#1afa8dfe55a6c312f1904ee608b81417205f5027"
226 
+  integrity sha512-H5ilTZb33/GnUBrZMNJtBk7/OXzDHDXjIzoLXHSutwwsLxSNaLxzAaMoDGDd/keZoS+GDBqNVxdCkpuiRW4OSw==
227 
+
228 
+esbuild-linux-s390x@0.15.15:
229 
+  version "0.15.15"
230 
+  resolved "https://registry.npmmirror.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.15.tgz#1f7b3c4429c8ca99920ba6bf356ccc5b38fabd34"
231 
+  integrity sha512-jKaLUg78mua3rrtrkpv4Or2dNTJU7bgHN4bEjT4OX4GR7nLBSA9dfJezQouTxMmIW7opwEC5/iR9mpC18utnxQ==
232 
+
233 
+esbuild-netbsd-64@0.15.15:
234 
+  version "0.15.15"
235 
+  resolved "https://registry.npmmirror.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.15.tgz#d72c7155686c938c1aff126209b689c22823347c"
236 
+  integrity sha512-aOvmF/UkjFuW6F36HbIlImJTTx45KUCHJndtKo+KdP8Dhq3mgLRKW9+6Ircpm8bX/RcS3zZMMmaBLkvGY06Gvw==
237 
+
238 
+esbuild-openbsd-64@0.15.15:
239 
+  version "0.15.15"
240 
+  resolved "https://registry.npmmirror.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.15.tgz#761bd87ecab97386948eaf667a065cb0ecaa0f76"
241 
+  integrity sha512-HFFX+WYedx1w2yJ1VyR1Dfo8zyYGQZf1cA69bLdrHzu9svj6KH6ZLK0k3A1/LFPhcEY9idSOhsB2UyU0tHPxgQ==
242 
+
243 
+esbuild-sunos-64@0.15.15:
244 
+  version "0.15.15"
245 
+  resolved "https://registry.npmmirror.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.15.tgz#07e04cbf9747f281a967d09230a158a1be5b530c"
246 
+  integrity sha512-jOPBudffG4HN8yJXcK9rib/ZTFoTA5pvIKbRrt3IKAGMq1EpBi4xoVoSRrq/0d4OgZLaQbmkHp8RO9eZIn5atA==
247 
+
248 
+esbuild-windows-32@0.15.15:
249 
+  version "0.15.15"
250 
+  resolved "https://registry.npmmirror.com/esbuild-windows-32/-/esbuild-windows-32-0.15.15.tgz#130d1982cc41fb67461e9f8a65c6ebd13a1f35bb"
251 
+  integrity sha512-MDkJ3QkjnCetKF0fKxCyYNBnOq6dmidcwstBVeMtXSgGYTy8XSwBeIE4+HuKiSsG6I/mXEb++px3IGSmTN0XiA==
252 
+
253 
+esbuild-windows-64@0.15.15:
254 
+  version "0.15.15"
255 
+  resolved "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.15.15.tgz#638bdf495c109c1882e8b0529cb8e2fea11383fb"
256 
+  integrity sha512-xaAUIB2qllE888SsMU3j9nrqyLbkqqkpQyWVkfwSil6BBPgcPk3zOFitTTncEKCLTQy3XV9RuH7PDj3aJDljWA==
257 
+
258 
+esbuild-windows-arm64@0.15.15:
259 
+  version "0.15.15"
260 
+  resolved "https://registry.npmmirror.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.15.tgz#5a277ce10de999d2a6465fc92a8c2a2d207ebd31"
261 
+  integrity sha512-ttuoCYCIJAFx4UUKKWYnFdrVpoXa3+3WWkXVI6s09U+YjhnyM5h96ewTq/WgQj9LFSIlABQvadHSOQyAVjW5xQ==
262 
+
263 
+esbuild@^0.15.9:
264 
+  version "0.15.15"
265 
+  resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.15.15.tgz#503b70bdc18d72d8fc2962ed3ab9219249e58bbe"
266 
+  integrity sha512-TEw/lwK4Zzld9x3FedV6jy8onOUHqcEX3ADFk4k+gzPUwrxn8nWV62tH0udo8jOtjFodlEfc4ypsqX3e+WWO6w==
267 
+  optionalDependencies:
268 
+    "@esbuild/android-arm" "0.15.15"
269 
+    "@esbuild/linux-loong64" "0.15.15"
270 
+    esbuild-android-64 "0.15.15"
271 
+    esbuild-android-arm64 "0.15.15"
272 
+    esbuild-darwin-64 "0.15.15"
273 
+    esbuild-darwin-arm64 "0.15.15"
274 
+    esbuild-freebsd-64 "0.15.15"
275 
+    esbuild-freebsd-arm64 "0.15.15"
276 
+    esbuild-linux-32 "0.15.15"
277 
+    esbuild-linux-64 "0.15.15"
278 
+    esbuild-linux-arm "0.15.15"
279 
+    esbuild-linux-arm64 "0.15.15"
280 
+    esbuild-linux-mips64le "0.15.15"
281 
+    esbuild-linux-ppc64le "0.15.15"
282 
+    esbuild-linux-riscv64 "0.15.15"
283 
+    esbuild-linux-s390x "0.15.15"
284 
+    esbuild-netbsd-64 "0.15.15"
285 
+    esbuild-openbsd-64 "0.15.15"
286 
+    esbuild-sunos-64 "0.15.15"
287 
+    esbuild-windows-32 "0.15.15"
288 
+    esbuild-windows-64 "0.15.15"
289 
+    esbuild-windows-arm64 "0.15.15"
290 
+
291 
+estree-walker@^2.0.2:
292 
+  version "2.0.2"
293 
+  resolved "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
294 
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
295 
+
296 
+fsevents@~2.3.2:
297 
+  version "2.3.2"
298 
+  resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
299 
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
300 
+
301 
+function-bind@^1.1.1:
302 
+  version "1.1.1"
303 
+  resolved "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
304 
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
305 
+
306 
+graceful-fs@^4.1.2:
307 
+  version "4.2.10"
308 
+  resolved "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
309 
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
310 
+
311 
+has@^1.0.3:
312 
+  version "1.0.3"
313 
+  resolved "https://registry.npmmirror.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
314 
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
315 
+  dependencies:
316 
+    function-bind "^1.1.1"
317 
+
318 
+html2canvas@^1.4.1:
319 
+  version "1.4.1"
320 
+  resolved "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
321 
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
322 
+  dependencies:
323 
+    css-line-break "^2.1.0"
324 
+    text-segmentation "^1.0.3"
325 
+
326 
+iconv-lite@^0.6.3:
327 
+  version "0.6.3"
328 
+  resolved "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
329 
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
330 
+  dependencies:
331 
+    safer-buffer ">= 2.1.2 < 3.0.0"
332 
+
333 
+image-size@~0.5.0:
334 
+  version "0.5.5"
335 
+  resolved "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
336 
+  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
337 
+
338 
+is-core-module@^2.9.0:
339 
+  version "2.11.0"
340 
+  resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
341 
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
342 
+  dependencies:
343 
+    has "^1.0.3"
344 
+
345 
+is-what@^3.14.1:
346 
+  version "3.14.1"
347 
+  resolved "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
348 
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
349 
+
350 
+less@^4.1.3:
351 
+  version "4.1.3"
352 
+  resolved "https://registry.npmmirror.com/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246"
353 
+  integrity sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==
354 
+  dependencies:
355 
+    copy-anything "^2.0.1"
356 
+    parse-node-version "^1.0.1"
357 
+    tslib "^2.3.0"
358 
+  optionalDependencies:
359 
+    errno "^0.1.1"
360 
+    graceful-fs "^4.1.2"
361 
+    image-size "~0.5.0"
362 
+    make-dir "^2.1.0"
363 
+    mime "^1.4.1"
364 
+    needle "^3.1.0"
365 
+    source-map "~0.6.0"
366 
+
367 
+lodash@^4.17.21:
368 
+  version "4.17.21"
369 
+  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
370 
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
371 
+
372 
+magic-string@^0.25.7:
373 
+  version "0.25.9"
374 
+  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
375 
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
376 
+  dependencies:
377 
+    sourcemap-codec "^1.4.8"
378 
+
379 
+make-dir@^2.1.0:
380 
+  version "2.1.0"
381 
+  resolved "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
382 
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
383 
+  dependencies:
384 
+    pify "^4.0.1"
385 
+    semver "^5.6.0"
386 
+
387 
+mime@^1.4.1:
388 
+  version "1.6.0"
389 
+  resolved "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
390 
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
391 
+
392 
+ms@^2.1.1:
393 
+  version "2.1.3"
394 
+  resolved "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
395 
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
396 
+
397 
+nanoid@^3.3.4:
398 
+  version "3.3.4"
399 
+  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
400 
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
401 
+
402 
+needle@^3.1.0:
403 
+  version "3.2.0"
404 
+  resolved "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz#07d240ebcabfd65c76c03afae7f6defe6469df44"
405 
+  integrity sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==
406 
+  dependencies:
407 
+    debug "^3.2.6"
408 
+    iconv-lite "^0.6.3"
409 
+    sax "^1.2.4"
410 
+
411 
+parse-node-version@^1.0.1:
412 
+  version "1.0.1"
413 
+  resolved "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
414 
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
415 
+
416 
+path-parse@^1.0.7:
417 
+  version "1.0.7"
418 
+  resolved "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
419 
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
420 
+
421 
+picocolors@^1.0.0:
422 
+  version "1.0.0"
423 
+  resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
424 
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
425 
+
426 
+pify@^4.0.1:
427 
+  version "4.0.1"
428 
+  resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
429 
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
430 
+
431 
+postcss@^8.1.10, postcss@^8.4.18:
432 
+  version "8.4.19"
433 
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
434 
+  integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
435 
+  dependencies:
436 
+    nanoid "^3.3.4"
437 
+    picocolors "^1.0.0"
438 
+    source-map-js "^1.0.2"
439 
+
440 
+prr@~1.0.1:
441 
+  version "1.0.1"
442 
+  resolved "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
443 
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
444 
+
445 
+resolve@^1.22.1:
446 
+  version "1.22.1"
447 
+  resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
448 
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
449 
+  dependencies:
450 
+    is-core-module "^2.9.0"
451 
+    path-parse "^1.0.7"
452 
+    supports-preserve-symlinks-flag "^1.0.0"
453 
+
454 
+rollup@^2.79.1:
455 
+  version "2.79.1"
456 
+  resolved "https://registry.npmmirror.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
457 
+  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
458 
+  optionalDependencies:
459 
+    fsevents "~2.3.2"
460 
+
461 
+"safer-buffer@>= 2.1.2 < 3.0.0":
462 
+  version "2.1.2"
463 
+  resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
464 
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
465 
+
466 
+sax@^1.2.4:
467 
+  version "1.2.4"
468 
+  resolved "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
469 
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
470 
+
471 
+semver@^5.6.0:
472 
+  version "5.7.1"
473 
+  resolved "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
474 
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
475 
+
476 
+source-map-js@^1.0.2:
477 
+  version "1.0.2"
478 
+  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
479 
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
480 
+
481 
+source-map@^0.6.1, source-map@~0.6.0:
482 
+  version "0.6.1"
483 
+  resolved "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
484 
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
485 
+
486 
+sourcemap-codec@^1.4.8:
487 
+  version "1.4.8"
488 
+  resolved "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
489 
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
490 
+
491 
+supports-preserve-symlinks-flag@^1.0.0:
492 
+  version "1.0.0"
493 
+  resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
494 
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
495 
+
496 
+text-segmentation@^1.0.3:
497 
+  version "1.0.3"
498 
+  resolved "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
499 
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
500 
+  dependencies:
501 
+    utrie "^1.0.2"
502 
+
503 
+tslib@^2.3.0:
504 
+  version "2.4.1"
505 
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
506 
+  integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
507 
+
508 
+utrie@^1.0.2:
509 
+  version "1.0.2"
510 
+  resolved "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
511 
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
512 
+  dependencies:
513 
+    base64-arraybuffer "^1.0.2"
514 
+
515 
+v-viewer@^3.0.10:
516 
+  version "3.0.11"
517 
+  resolved "https://registry.npmmirror.com/v-viewer/-/v-viewer-3.0.11.tgz#c03855eb56436bd0f5323c34a61c10fa8fd05026"
518 
+  integrity sha512-E8LOdAxhzuktt4HB3PswVCccQ1Q1sYHYnLsS6zaJISpb5EvmAFs5sYNfXnDLFxVb5DQ82v4ZlGxkYlseXwWRJw==
519 
+  dependencies:
520 
+    lodash "^4.17.21"
521 
+    viewerjs "^1.9.0"
522 
+
523 
+viewerjs@1.9.0:
524 
+  version "1.9.0"
525 
+  resolved "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.9.0.tgz#6dfaf54440c3b2f7691b85666ba6d27708ed9592"
526 
+  integrity sha512-2D1OdGatb5aCZbZvaCdbJYuoDObjD9ITe7GZp0SoG7rgw3arOIZoIO1ygmfG+I4+RvEuDo+aZ75kNgwmYS9j3w==
527 
+
528 
+viewerjs@^1.9.0:
529 
+  version "1.11.1"
530 
+  resolved "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.1.tgz#9aed519f489eb50730faf258ca8c88e39934cccb"
531 
+  integrity sha512-/VQ2zalHLZJOGIwlxOBtxagLZwNvU3Bf+nm692XlhNFxjBXRxpCVn+GeqmRFg9jK1Y2+Wf8PPGxZgTDN4pHXww==
532 
+
533 
+vite@^3.0.7:
534 
+  version "3.2.4"
535 
+  resolved "https://registry.npmmirror.com/vite/-/vite-3.2.4.tgz#d8c7892dd4268064e04fffbe7d866207dd24166e"
536 
+  integrity sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==
537 
+  dependencies:
538 
+    esbuild "^0.15.9"
539 
+    postcss "^8.4.18"
540 
+    resolve "^1.22.1"
541 
+    rollup "^2.79.1"
542 
+  optionalDependencies:
543 
+    fsevents "~2.3.2"
544 
+
545 
+vue-router@4:
546 
+  version "4.1.6"
547 
+  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"
548 
+  integrity sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==
549 
+  dependencies:
550 
+    "@vue/devtools-api" "^6.4.5"
551 
+
552 
+vue@^3.2.37:
553 
+  version "3.2.45"
554 
+  resolved "https://registry.npmmirror.com/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8"
555 
+  integrity sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==
556 
+  dependencies:
557 
+    "@vue/compiler-dom" "3.2.45"
558 
+    "@vue/compiler-sfc" "3.2.45"
559 
+    "@vue/runtime-dom" "3.2.45"
560 
+    "@vue/server-renderer" "3.2.45"
561 
+    "@vue/shared" "3.2.45"