Your Name пре 2 година
родитељ
комит
0010256f18
73 измењених фајлова са 760 додато и 1303 уклоњено
  1. 3
    2
      index.html
  2. 1
    0
      package.json
  3. BIN
      public/audio/audio.mp3
  4. BIN
      public/audio/安静悠扬舒缓煽情影视配乐.mp3
  5. BIN
      public/audio/放松抒情企业宣传片配乐.mp3
  6. 13
    0
      public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold-embed.css
  7. 14
    0
      public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.css
  8. BIN
      public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.eot
  9. 1
    0
      public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.svg
  10. BIN
      public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.ttf
  11. BIN
      public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.woff
  12. 13
    0
      public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium-embed.css
  13. 14
    0
      public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.css
  14. BIN
      public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.eot
  15. 1
    0
      public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.svg
  16. BIN
      public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.ttf
  17. BIN
      public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.woff
  18. 13
    0
      public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal-embed.css
  19. 14
    0
      public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.css
  20. BIN
      public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.eot
  21. 1
    0
      public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.svg
  22. BIN
      public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.ttf
  23. BIN
      public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.woff
  24. 0
    539
      public/fonts/demo.css
  25. 0
    443
      public/fonts/demo_index.html
  26. 0
    61
      public/fonts/iconfont.css
  27. 0
    1
      public/fonts/iconfont.js
  28. 0
    86
      public/fonts/iconfont.json
  29. 0
    41
      public/fonts/iconfont.svg
  30. BIN
      public/fonts/iconfont.ttf
  31. BIN
      public/fonts/iconfont.woff
  32. BIN
      public/fonts/iconfont.woff2
  33. BIN
      public/images/bk1/goback.png
  34. BIN
      public/images/loading/allrights.png
  35. BIN
      public/images/loading/loader.png
  36. BIN
      public/images/loading/main.png
  37. BIN
      public/images/pg2/flower/1-1.png
  38. BIN
      public/images/pg2/flower/1-2.png
  39. BIN
      public/images/pg2/flower/1-3.png
  40. BIN
      public/images/pg2/flower/1-4.png
  41. BIN
      public/images/pg2/flower/右-小.png
  42. BIN
      public/images/pg2/flower/左-小.png
  43. BIN
      public/images/pg2/mountain.png
  44. BIN
      public/images/pg2/persons.png
  45. 0
    0
      public/images/pg2/ruins-bak.png
  46. BIN
      public/images/pg2/ruins.png
  47. 68
    0
      public/turn.min.js
  48. 12
    0
      src/App.vue
  49. 0
    1
      src/components/Bell.vue
  50. 7
    2
      src/components/Erasure.vue
  51. 9
    1
      src/components/ImageText.vue
  52. 20
    0
      src/components/Popup.vue
  53. 1
    0
      src/main.js
  54. 17
    5
      src/pages/Language.vue
  55. 113
    0
      src/pages/Loading.vue
  56. 30
    0
      src/pages/bk1/GoBack.vue
  57. 19
    4
      src/pages/bk1/index.vue
  58. 1
    1
      src/pages/bk1/pg1.vue
  59. 36
    40
      src/pages/index.vue
  60. 3
    1
      src/pages/pg1/Part1.vue
  61. 5
    3
      src/pages/pg1/Part2.vue
  62. 1
    1
      src/pages/pg1/Part3.vue
  63. 19
    7
      src/pages/pg1/index.vue
  64. 80
    0
      src/pages/pg2/flower/Flower1.vue
  65. 38
    0
      src/pages/pg2/flower/Flower2.vue
  66. 38
    0
      src/pages/pg2/flower/Flower3.vue
  67. 69
    20
      src/pages/pg2/index.vue
  68. 32
    31
      src/pages/pg3/index.vue
  69. 3
    1
      src/router.js
  70. 16
    6
      src/store/index.js
  71. 5
    2
      src/style.less
  72. 25
    4
      src/utils/resources.js
  73. 5
    0
      yarn.lock

+ 3
- 2
index.html Прегледај датотеку

@@ -3,14 +3,15 @@
3 3
   <head>
4 4
     <meta charset="UTF-8" />
5 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">
6
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
8 7
     <script src="./wx/jweixin-1.6.0.js"></script>
9 8
     <script src="./jquery.1.9.1.js"></script>
10 9
     <script src="./turn.min.js"></script>
11 10
     <script src="./config.js"></script>
12 11
     <script src="./slidePage/slidePage.min.js"></script>
13 12
     <link rel="stylesheet" href="./slidePage/slidePage.min.css">
13
+
14
+    <link rel="stylesheet" href="./fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.css">
14 15
     <title>南京-紫金草行动</title>
15 16
     <!-- <script src="./vconsole.min.js"></script>
16 17
     <script>

+ 1
- 0
package.json Прегледај датотеку

@@ -9,6 +9,7 @@
9 9
     "preview": "vite preview"
10 10
   },
11 11
   "dependencies": {
12
+    "@splidejs/splide": "^4.1.4",
12 13
     "@zjxpcyc/vue-tiny-store": "^1.0.1",
13 14
     "animate.css": "^4.1.1",
14 15
     "html2canvas": "^1.4.1",

BIN
public/audio/audio.mp3 Прегледај датотеку


BIN
public/audio/安静悠扬舒缓煽情影视配乐.mp3 Прегледај датотеку


BIN
public/audio/放松抒情企业宣传片配乐.mp3 Прегледај датотеку


+ 13
- 0
public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold-embed.css
Разлика између датотеке није приказан због своје велике величине
Прегледај датотеку


+ 14
- 0
public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.css Прегледај датотеку

@@ -0,0 +1,14 @@
1
+@font-face {
2
+    font-family: "SourceHanSansCN-Bold";
3
+    src: url("SourceHanSansCN-Bold.eot"); /* IE9 */
4
+    src: url("SourceHanSansCN-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
5
+    
6
+    url("SourceHanSansCN-Bold.woff") format("woff"), /* chrome、firefox */
7
+    url("SourceHanSansCN-Bold.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
8
+    
9
+    url("SourceHanSansCN-Bold.svg#SourceHanSansCN-Bold") format("svg"); /* iOS 4.1- */
10
+    font-style: normal;
11
+    font-weight: normal;
12
+}
13
+
14
+

BIN
public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.eot Прегледај датотеку


+ 1
- 0
public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.svg
Разлика између датотеке није приказан због своје велике величине
Прегледај датотеку


BIN
public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.ttf Прегледај датотеку


BIN
public/fonts/SourceHanSansCN-Bold/SourceHanSansCN-Bold.woff Прегледај датотеку


+ 13
- 0
public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium-embed.css
Разлика између датотеке није приказан због своје велике величине
Прегледај датотеку


+ 14
- 0
public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.css Прегледај датотеку

@@ -0,0 +1,14 @@
1
+@font-face {
2
+    font-family: "SourceHanSansCN-Medium";
3
+    src: url("SourceHanSansCN-Medium.eot"); /* IE9 */
4
+    src: url("SourceHanSansCN-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
5
+    
6
+    url("SourceHanSansCN-Medium.woff") format("woff"), /* chrome、firefox */
7
+    url("SourceHanSansCN-Medium.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
8
+    
9
+    url("SourceHanSansCN-Medium.svg#SourceHanSansCN-Medium") format("svg"); /* iOS 4.1- */
10
+    font-style: normal;
11
+    font-weight: normal;
12
+}
13
+
14
+

BIN
public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.eot Прегледај датотеку


+ 1
- 0
public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.svg
Разлика између датотеке није приказан због своје велике величине
Прегледај датотеку


BIN
public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.ttf Прегледај датотеку


BIN
public/fonts/SourceHanSansCN-Medium/SourceHanSansCN-Medium.woff Прегледај датотеку


+ 13
- 0
public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal-embed.css
Разлика између датотеке није приказан због своје велике величине
Прегледај датотеку


+ 14
- 0
public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.css Прегледај датотеку

@@ -0,0 +1,14 @@
1
+@font-face {
2
+    font-family: "SourceHanSansCN-Normal";
3
+    src: url("SourceHanSansCN-Normal.eot"); /* IE9 */
4
+    src: url("SourceHanSansCN-Normal.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
5
+    
6
+    url("SourceHanSansCN-Normal.woff") format("woff"), /* chrome、firefox */
7
+    url("SourceHanSansCN-Normal.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
8
+    
9
+    url("SourceHanSansCN-Normal.svg#SourceHanSansCN-Normal") format("svg"); /* iOS 4.1- */
10
+    font-style: normal;
11
+    font-weight: normal;
12
+}
13
+
14
+

BIN
public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.eot Прегледај датотеку


+ 1
- 0
public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.svg
Разлика између датотеке није приказан због своје велике величине
Прегледај датотеку


BIN
public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.ttf Прегледај датотеку


BIN
public/fonts/SourceHanSansCN-Normal/SourceHanSansCN-Normal.woff Прегледај датотеку


+ 0
- 539
public/fonts/demo.css Прегледај датотеку

@@ -1,539 +0,0 @@
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
-}

+ 0
- 443
public/fonts/demo_index.html Прегледај датотеку

@@ -1,443 +0,0 @@
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>

+ 0
- 61
public/fonts/iconfont.css Прегледај датотеку

@@ -1,61 +0,0 @@
1
-@font-face {
2
-  font-family: "iconfont"; /* Project id 3600839 */
3
-  src: 
4
-       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAh4AAsAAAAAEJQAAAgoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACERAqSAI8aATYCJAMwCxoABCAFhGcHgS0bTw5RlFBSI9lPTZ6MMUUbQwiBAggQYxUAEgAoAMBlARfx8LUfv3N394l902aCdhrTSSST5KEwVJKXRKISOiGSv1b+d+l+x9iMCNPp2EONJdNc7hpuJO9fWBqLBeFrHA4hcTi20LwOj6f9SzGkm9NB7NyBnVAM5l1y5+R/D2a7I9kYmP+5llVDcwuFFCnx3/nf35mMO8c9mSxRzRKRx+sbphKyJ0sVQqGUjv/sN38HVgFt1J0DdRVf77kTgd5Ny4J3tw9PIPuaag+awkTzIC8er4VFIb6QKS0eoRXWoTMW8RWopM/BvwB88U8fV2ATcZIqE4u592rLgJfP5F889GmCAvkfWNZwFdjICRUyTm5MEb/bNb+QU3jiUU+VpfgIrMgvvr8+TX5WTy9PHz/Hnx9fz9+Z79xffDIBsZ6qE83DirSq/4sHkkGl02vVGlkRRA1o5DY/MwdOkzqUxGmVBfwSEhXwR0h0wMfAdME/EErL2ZNE7fFnhNJwnpHIwHMIpXAV5/wo7FuaYQ3YAekSQP5POD/A/rVR/qHSi0qypbsVzURmmR4Oa35IpU3NZTLrxbRAYjpiLRdQtjSK+YyfhdlLZUfwuOF5xCVhAij7onS4zFVD2BVIo/AKgXIuMbomehONRii2KF7hTTCsfclsYhe6ju/G9tjiJ/ei+04RZw5g+0+n4DS2eYf92Qnb1F3FJTpUGC4tkUaC43RdBctTkk+0xCwJ1u02qD1eIeZHFM1rwcZxhM1txkdROofd2DpGKPI4TcQEplCHKVKh5mEkubGVTm8EpGEYP3rSaLRXuesSjTBcuaDZAkEtCuS0xuwTV4oakULRFsVcKI0UMUQbkGiw/ICgDFyhshmbIOgVTejotZvYMDp2nWXG8dEYfBwiR7uPAVKuIvQsjF8WeSAIU+wwPZHGRXDp0kVHtiRxjiwNtwF0r14buq4JkHrsGhjRgwXDeDPWQsutJE9QAu934Y30jC/rgVX2ReaqUatSIwJQ1zGnumG95MFRQOLDOGPxpFLrvT0Hh5Uzqh0QjUwoppHvomLlg4f50wN7Thxam+pcTytssnc9KRlKK8LbFXkLmldsLnP5Fu0Q1kI0AVS5y+nxv5DdaYWwGxt5eDOEqbTvdubbtJnWjMeU71DSmP4E8lh2nHEYoX239GatJxmDPFxvcHWya+215xkRzHTzOV0RtcsBUdDGa3tiObFbtvCfP3v8fAIIhYx4AxbLIJ7hqOhL9zAK9K5NL5din9oUlIwKvo4M8kD8WAkG7rxAE5aJMcs0YMa8QD/eJ8OR7RnsU/FMmiT1rMLHK3hj9M4wiN/knjENMGGxTMyBcIVNth3HztfOZ0a3T8VPud+339jPpA8IkzYVeea7ueV7FlEUcP3nuxV5UmqUG7i5sQyerS2PEXuRAdY/zzaWcZHlDWZWZ1e/yTJ/p0+jbGzWOUkNhO412cx0F5d0ZvZ7BRzIQJH8/Ypa9H+P7BgGx8aGw4g5q4ATc2w4+VlO54zu3N6moqPSunOHyKOirbpj+w5lhHVUdzYSO4nWxYXsBA5vGwI8FTML3XcnbN8nNXk6efq3vvYBiKo0VL3gZ2Kp9W3qSB9LjKqm9q3H58VvA60LExfF4XL/eUeB7ME237BJHh7aVCfe43Pzl6uYWdj+wfpSQyWfnY/0WLhFcsedPa2qcqqOGghda7KY6c7O6cys9woAZC1nMd/X8on+z8yOtn1MtW30WcUEKJKfXRXImrJCBEYyl+UDSR1JLY1U7EWASnvDSsOcKZ06L+9k5ks4OFvJPmSL58nMxzJBiIEHEiBX4BZnmBWSZdh+UEVDa+2LiyUWpt4p1dCvmYYIDAWIInwTuQWz5Pm5t7wSfEveU2DIl2f9QpCbsA0yYTiBFFte3roxQPw/yxpFKOJSrqfWBZWg88nG1BcM454jwMlWxaJsT6jOn/KHup21VYJ63ozobHsaammrAwf3vF5Th4YpHsvBHt3OOjBNZ6KMvn928ITk25ULPFG4etGnZLx46IQEUh2s9oSGqccMup9LzDtrB/E4sJe/in+43W3NNkTspOxJMenk89QENw2uoqdEaF50sLqnfpNujthJcc2Mmu6a2zKtiPgJOYG4VMp56u/u+h7cQPxkUKOll6GMl9W3Zodtylae2bFZP2123KowizCW16Oww5qIz/AJ79LL/r7iJ8RfiJ2UWxd7IS4AG98SFOR6EgqAcK+HZPi4veR75BTN3n1Uxq2tZCqs9gFL7CG7A14rW1hlXB8mm4RaAPaYciSpkh/OJUkzP4kN/z273HHlm3qzsFeGYvgkrfQnjYwX8fhA0rJLZCxU3WhWZ5/RBxHmJWAvmzAqNCx4Z8pFlyNCW2LP/ZLGJsyUzRYssDnyqwxuwxo2d/x6x7ZmHyxSQqJ02PMAvzBn7JfM+AMzbF5hgc2bX2XFF6xh8+/Xux+ZhQ32gm0gp5obZHhPBJOeqYTaD/SIW9cOxabUM46+QDLpd3rV7B3ucexjEv/GGmhtEhOlS7Znq+OOI4lCecWZ7oy0VvPdrklN0mHShQ2Io7QNaiCG7mMKjOQxyXX55R3hLNccFAZanBHI50w2cKKvoxdgsYO8oCpvpKzvhmVAM8JENESW5SK2FwDQmWdIhKLTrnBsq+kYdUhT5nUlmRmKOpcXuF838t1VK25zjBQ5SlRRRxNtdNHHEGNMhqeI8raNwhrpkEtVStFrnzOBzOFJ5dD7bGUorz2DOdLnCffaF8wUjpObpkscCqMsCYuPGSnPWFtJ4eE4YOGoJzVvD1x8HwAAAAA=') 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
-

+ 0
- 1
public/fonts/iconfont.js
Разлика између датотеке није приказан због своје велике величине
Прегледај датотеку


+ 0
- 86
public/fonts/iconfont.json Прегледај датотеку

@@ -1,86 +0,0 @@
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
-}

+ 0
- 41
public/fonts/iconfont.svg Прегледај датотеку

@@ -1,41 +0,0 @@
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 Прегледај датотеку


BIN
public/fonts/iconfont.woff Прегледај датотеку


BIN
public/fonts/iconfont.woff2 Прегледај датотеку


BIN
public/images/bk1/goback.png Прегледај датотеку


BIN
public/images/loading/allrights.png Прегледај датотеку


BIN
public/images/loading/loader.png Прегледај датотеку


BIN
public/images/loading/main.png Прегледај датотеку


BIN
public/images/pg2/flower/1-1.png Прегледај датотеку


BIN
public/images/pg2/flower/1-2.png Прегледај датотеку


BIN
public/images/pg2/flower/1-3.png Прегледај датотеку


BIN
public/images/pg2/flower/1-4.png Прегледај датотеку


BIN
public/images/pg2/flower/右-小.png Прегледај датотеку


BIN
public/images/pg2/flower/左-小.png Прегледај датотеку


BIN
public/images/pg2/mountain.png Прегледај датотеку


BIN
public/images/pg2/persons.png Прегледај датотеку


public/images/pg2/ruins_colorful.png → public/images/pg2/ruins-bak.png Прегледај датотеку


BIN
public/images/pg2/ruins.png Прегледај датотеку


+ 68
- 0
public/turn.min.js Прегледај датотеку

@@ -0,0 +1,68 @@
1
+/* turn.js 4.1.0 | Copyright (c) 2012 Emmanuel Garcia | turnjs.com | turnjs.com/license.txt */
2
+
3
+(function(f){function J(a,b,c){if(!c[0]||"object"==typeof c[0])return b.init.apply(a,c);if(b[c[0]])return b[c[0]].apply(a,Array.prototype.slice.call(c,1));throw q(c[0]+" is not a method or property");}function l(a,b,c,d){return{css:{position:"absolute",top:a,left:b,overflow:d||"hidden",zIndex:c||"auto"}}}function S(a,b,c,d,e){var h=1-e,f=h*h*h,g=e*e*e;return j(Math.round(f*a.x+3*e*h*h*b.x+3*e*e*h*c.x+g*d.x),Math.round(f*a.y+3*e*h*h*b.y+3*e*e*h*c.y+g*d.y))}function j(a,b){return{x:a,y:b}}function F(a,
4
+b,c){return z&&c?" translate3d("+a+"px,"+b+"px, 0px) ":" translate("+a+"px, "+b+"px) "}function G(a){return" rotate("+a+"deg) "}function n(a,b){return Object.prototype.hasOwnProperty.call(b,a)}function T(){for(var a=["Moz","Webkit","Khtml","O","ms"],b=a.length,c="";b--;)a[b]+"Transform"in document.body.style&&(c="-"+a[b].toLowerCase()+"-");return c}function P(a,b,c,d,e){var h,f=[];if("-webkit-"==w){for(h=0;h<e;h++)f.push("color-stop("+d[h][0]+", "+d[h][1]+")");a.css({"background-image":"-webkit-gradient(linear, "+
5
+b.x+"% "+b.y+"%,"+c.x+"% "+c.y+"%, "+f.join(",")+" )"})}else{var b={x:b.x/100*a.width(),y:b.y/100*a.height()},c={x:c.x/100*a.width(),y:c.y/100*a.height()},g=c.x-b.x;h=c.y-b.y;var i=Math.atan2(h,g),x=i-Math.PI/2,x=Math.abs(a.width()*Math.sin(x))+Math.abs(a.height()*Math.cos(x)),g=Math.sqrt(h*h+g*g),c=j(c.x<b.x?a.width():0,c.y<b.y?a.height():0),k=Math.tan(i);h=-1/k;k=(h*c.x-c.y-k*b.x+b.y)/(h-k);c=h*k-h*c.x+c.y;b=Math.sqrt(Math.pow(k-b.x,2)+Math.pow(c-b.y,2));for(h=0;h<e;h++)f.push(" "+d[h][1]+" "+100*
6
+(b+g*d[h][0])/x+"%");a.css({"background-image":w+"linear-gradient("+-i+"rad,"+f.join(",")+")"})}}function t(a,b,c){a=f.Event(a);b.trigger(a,c);return a.isDefaultPrevented()?"prevented":a.isPropagationStopped()?"stopped":""}function q(a){function b(a){this.name="TurnJsError";this.message=a}b.prototype=Error();b.prototype.constructor=b;return new b(a)}function D(a){var b={top:0,left:0};do b.left+=a.offsetLeft,b.top+=a.offsetTop;while(a=a.offsetParent);return b}var z,U,w="",K=Math.PI,L=K/2,u="ontouchstart"in
7
+window,r=u?{down:"touchstart",move:"touchmove",up:"touchend",over:"touchstart",out:"touchend"}:{down:"mousedown",move:"mousemove",up:"mouseup",over:"mouseover",out:"mouseout"},p={backward:["bl","tl"],forward:["br","tr"],all:"tl bl tr br l r".split(" ")},V=["single","double"],W=["ltr","rtl"],X={acceleration:!0,display:"double",duration:600,page:1,gradients:!0,turnCorners:"bl,br",when:null},Y={cornerSize:100},g={init:function(a){z="WebKitCSSMatrix"in window||"MozPerspective"in document.body.style;var b;
8
+U=(b=/AppleWebkit\/([0-9\.]+)/i.exec(navigator.userAgent))?534.3<parseFloat(b[1]):!0;w=T();var c;b=0;var d=this.data(),e=this.children(),a=f.extend({width:this.width(),height:this.height(),direction:this.attr("dir")||this.css("direction")||"ltr"},X,a);d.opts=a;d.pageObjs={};d.pages={};d.pageWrap={};d.pageZoom={};d.pagePlace={};d.pageMv=[];d.zoom=1;d.totalPages=a.pages||0;d.eventHandlers={touchStart:f.proxy(g._touchStart,this),touchMove:f.proxy(g._touchMove,this),touchEnd:f.proxy(g._touchEnd,this),
9
+start:f.proxy(g._eventStart,this)};if(a.when)for(c in a.when)n(c,a.when)&&this.bind(c,a.when[c]);this.css({position:"relative",width:a.width,height:a.height});this.turn("display",a.display);""!==a.direction&&this.turn("direction",a.direction);z&&(!u&&a.acceleration)&&this.transform(F(0,0,!0));for(c=0;c<e.length;c++)"1"!=f(e[c]).attr("ignore")&&this.turn("addPage",e[c],++b);f(this).bind(r.down,d.eventHandlers.touchStart).bind("end",g._eventEnd).bind("pressed",g._eventPressed).bind("released",g._eventReleased).bind("flip",
10
+g._flip);f(this).parent().bind("start",d.eventHandlers.start);f(document).bind(r.move,d.eventHandlers.touchMove).bind(r.up,d.eventHandlers.touchEnd);this.turn("page",a.page);d.done=!0;return this},addPage:function(a,b){var c,d=!1,e=this.data(),h=e.totalPages+1;if(e.destroying)return!1;if(c=/\bp([0-9]+)\b/.exec(f(a).attr("class")))b=parseInt(c[1],10);if(b)if(b==h)d=!0;else{if(b>h)throw q('Page "'+b+'" cannot be inserted');}else b=h,d=!0;1<=b&&b<=h&&(c="double"==e.display?b%2?" odd":" even":"",e.done&&
11
+this.turn("stop"),b in e.pageObjs&&g._movePages.call(this,b,1),d&&(e.totalPages=h),e.pageObjs[b]=f(a).css({"float":"left"}).addClass("page p"+b+c),-1!=navigator.userAgent.indexOf("MSIE 9.0")&&e.pageObjs[b].hasClass("hard")&&e.pageObjs[b].removeClass("hard"),g._addPage.call(this,b),g._removeFromDOM.call(this));return this},_addPage:function(a){var b=this.data(),c=b.pageObjs[a];if(c)if(g._necessPage.call(this,a)){if(!b.pageWrap[a]){b.pageWrap[a]=f("<div/>",{"class":"page-wrapper",page:a,css:{position:"absolute",
12
+overflow:"hidden"}});this.append(b.pageWrap[a]);b.pagePlace[a]||(b.pagePlace[a]=a,b.pageObjs[a].appendTo(b.pageWrap[a]));var d=g._pageSize.call(this,a,!0);c.css({width:d.width,height:d.height});b.pageWrap[a].css(d)}b.pagePlace[a]==a&&g._makeFlip.call(this,a)}else b.pagePlace[a]=0,b.pageObjs[a]&&b.pageObjs[a].remove()},hasPage:function(a){return n(a,this.data().pageObjs)},center:function(a){var b=this.data(),c=f(this).turn("size"),d=0;b.noCenter||("double"==b.display&&(a=this.turn("view",a||b.tpage||
13
+b.page),"ltr"==b.direction?a[0]?a[1]||(d+=c.width/4):d-=c.width/4:a[0]?a[1]||(d-=c.width/4):d+=c.width/4),f(this).css({marginLeft:d}));return this},destroy:function(){var a=this,b=this.data(),c="end first flip last pressed released start turning turned zooming missing".split(" ");if("prevented"!=t("destroying",this)){b.destroying=!0;f.each(c,function(b,c){a.unbind(c)});this.parent().unbind("start",b.eventHandlers.start);for(f(document).unbind(r.move,b.eventHandlers.touchMove).unbind(r.up,b.eventHandlers.touchEnd);0!==
14
+b.totalPages;)this.turn("removePage",b.totalPages);b.fparent&&b.fparent.remove();b.shadow&&b.shadow.remove();this.removeData();b=null;return this}},is:function(){return"object"==typeof this.data().pages},zoom:function(a){var b=this.data();if("number"==typeof a){if(0.0010>a||100<a)throw q(a+" is not a value for zoom");if("prevented"==t("zooming",this,[a,b.zoom]))return this;var c=this.turn("size"),d=this.turn("view"),e=1/b.zoom,h=Math.round(c.width*e*a),c=Math.round(c.height*e*a);b.zoom=a;f(this).turn("stop").turn("size",
15
+h,c);b.opts.autoCenter&&this.turn("center");g._updateShadow.call(this);for(a=0;a<d.length;a++)d[a]&&b.pageZoom[d[a]]!=b.zoom&&(this.trigger("zoomed",[d[a],d,b.pageZoom[d[a]],b.zoom]),b.pageZoom[d[a]]=b.zoom);return this}return b.zoom},_pageSize:function(a,b){var c=this.data(),d={};if("single"==c.display)d.width=this.width(),d.height=this.height(),b&&(d.top=0,d.left=0,d.right="auto");else{var e=this.width()/2,h=this.height();c.pageObjs[a].hasClass("own-size")?(d.width=c.pageObjs[a].width(),d.height=
16
+c.pageObjs[a].height()):(d.width=e,d.height=h);if(b){var f=a%2;d.top=(h-d.height)/2;"ltr"==c.direction?(d[f?"right":"left"]=e-d.width,d[f?"left":"right"]="auto"):(d[f?"left":"right"]=e-d.width,d[f?"right":"left"]="auto")}}return d},_makeFlip:function(a){var b=this.data();if(!b.pages[a]&&b.pagePlace[a]==a){var c="single"==b.display,d=a%2;b.pages[a]=b.pageObjs[a].css(g._pageSize.call(this,a)).flip({page:a,next:d||c?a+1:a-1,turn:this}).flip("disable",b.disabled);g._setPageLoc.call(this,a);b.pageZoom[a]=
17
+b.zoom}return b.pages[a]},_makeRange:function(){var a,b;if(!(1>this.data().totalPages)){b=this.turn("range");for(a=b[0];a<=b[1];a++)g._addPage.call(this,a)}},range:function(a){var b,c,d,e=this.data(),a=a||e.tpage||e.page||1;d=g._view.call(this,a);if(1>a||a>e.totalPages)throw q('"'+a+'" is not a valid page');d[1]=d[1]||d[0];1<=d[0]&&d[1]<=e.totalPages?(a=Math.floor(2),e.totalPages-d[1]>d[0]?(b=Math.min(d[0]-1,a),c=2*a-b):(c=Math.min(e.totalPages-d[1],a),b=2*a-c)):c=b=5;return[Math.max(1,d[0]-b),Math.min(e.totalPages,
18
+d[1]+c)]},_necessPage:function(a){if(0===a)return!0;var b=this.turn("range");return this.data().pageObjs[a].hasClass("fixed")||a>=b[0]&&a<=b[1]},_removeFromDOM:function(){var a,b=this.data();for(a in b.pageWrap)n(a,b.pageWrap)&&!g._necessPage.call(this,a)&&g._removePageFromDOM.call(this,a)},_removePageFromDOM:function(a){var b=this.data();if(b.pages[a]){var c=b.pages[a].data();i._moveFoldingPage.call(b.pages[a],!1);c.f&&c.f.fwrapper&&c.f.fwrapper.remove();b.pages[a].removeData();b.pages[a].remove();
19
+delete b.pages[a]}b.pageObjs[a]&&b.pageObjs[a].remove();b.pageWrap[a]&&(b.pageWrap[a].remove(),delete b.pageWrap[a]);g._removeMv.call(this,a);delete b.pagePlace[a];delete b.pageZoom[a]},removePage:function(a){var b=this.data();if("*"==a)for(;0!==b.totalPages;)this.turn("removePage",b.totalPages);else{if(1>a||a>b.totalPages)throw q("The page "+a+" doesn't exist");b.pageObjs[a]&&(this.turn("stop"),g._removePageFromDOM.call(this,a),delete b.pageObjs[a]);g._movePages.call(this,a,-1);b.totalPages-=1;b.page>
20
+b.totalPages?(b.page=null,g._fitPage.call(this,b.totalPages)):(g._makeRange.call(this),this.turn("update"))}return this},_movePages:function(a,b){var c,d=this,e=this.data(),h="single"==e.display,f=function(a){var c=a+b,f=c%2,i=f?" odd ":" even ";e.pageObjs[a]&&(e.pageObjs[c]=e.pageObjs[a].removeClass("p"+a+" odd even").addClass("p"+c+i));e.pagePlace[a]&&e.pageWrap[a]&&(e.pagePlace[c]=c,e.pageWrap[c]=e.pageObjs[c].hasClass("fixed")?e.pageWrap[a].attr("page",c):e.pageWrap[a].css(g._pageSize.call(d,
21
+c,!0)).attr("page",c),e.pages[a]&&(e.pages[c]=e.pages[a].flip("options",{page:c,next:h||f?c+1:c-1})),b&&(delete e.pages[a],delete e.pagePlace[a],delete e.pageZoom[a],delete e.pageObjs[a],delete e.pageWrap[a]))};if(0<b)for(c=e.totalPages;c>=a;c--)f(c);else for(c=a;c<=e.totalPages;c++)f(c)},display:function(a){var b=this.data(),c=b.display;if(void 0===a)return c;if(-1==f.inArray(a,V))throw q('"'+a+'" is not a value for display');switch(a){case "single":b.pageObjs[0]||(this.turn("stop").css({overflow:"hidden"}),
22
+b.pageObjs[0]=f("<div />",{"class":"page p-temporal"}).css({width:this.width(),height:this.height()}).appendTo(this));this.addClass("shadow");break;case "double":b.pageObjs[0]&&(this.turn("stop").css({overflow:""}),b.pageObjs[0].remove(),delete b.pageObjs[0]),this.removeClass("shadow")}b.display=a;c&&(a=this.turn("size"),g._movePages.call(this,1,0),this.turn("size",a.width,a.height).turn("update"));return this},direction:function(a){var b=this.data();if(void 0===a)return b.direction;a=a.toLowerCase();
23
+if(-1==f.inArray(a,W))throw q('"'+a+'" is not a value for direction');"rtl"==a&&f(this).attr("dir","ltr").css({direction:"ltr"});b.direction=a;b.done&&this.turn("size",f(this).width(),f(this).height());return this},animating:function(){return 0<this.data().pageMv.length},corner:function(){var a,b,c=this.data();for(b in c.pages)if(n(b,c.pages)&&(a=c.pages[b].flip("corner")))return a;return!1},data:function(){return this.data()},disable:function(a){var b,c=this.data(),d=this.turn("view");c.disabled=
24
+void 0===a||!0===a;for(b in c.pages)n(b,c.pages)&&c.pages[b].flip("disable",c.disabled?!0:-1==f.inArray(parseInt(b,10),d));return this},disabled:function(a){return void 0===a?!0===this.data().disabled:this.turn("disable",a)},size:function(a,b){if(void 0===a||void 0===b)return{width:this.width(),height:this.height()};this.turn("stop");var c,d,e=this.data();d="double"==e.display?a/2:a;this.css({width:a,height:b});e.pageObjs[0]&&e.pageObjs[0].css({width:d,height:b});for(c in e.pageWrap)n(c,e.pageWrap)&&
25
+(d=g._pageSize.call(this,c,!0),e.pageObjs[c].css({width:d.width,height:d.height}),e.pageWrap[c].css(d),e.pages[c]&&e.pages[c].css({width:d.width,height:d.height}));this.turn("resize");return this},resize:function(){var a,b=this.data();b.pages[0]&&(b.pageWrap[0].css({left:-this.width()}),b.pages[0].flip("resize",!0));for(a=1;a<=b.totalPages;a++)b.pages[a]&&b.pages[a].flip("resize",!0);g._updateShadow.call(this);b.opts.autoCenter&&this.turn("center")},_removeMv:function(a){var b,c=this.data();for(b=
26
+0;b<c.pageMv.length;b++)if(c.pageMv[b]==a)return c.pageMv.splice(b,1),!0;return!1},_addMv:function(a){var b=this.data();g._removeMv.call(this,a);b.pageMv.push(a)},_view:function(a){var b=this.data(),a=a||b.page;return"double"==b.display?a%2?[a-1,a]:[a,a+1]:[a]},view:function(a){var b=this.data(),a=g._view.call(this,a);return"double"==b.display?[0<a[0]?a[0]:0,a[1]<=b.totalPages?a[1]:0]:[0<a[0]&&a[0]<=b.totalPages?a[0]:0]},stop:function(a,b){if(this.turn("animating")){var c,d,e,h=this.data();h.tpage&&
27
+(h.page=h.tpage,delete h.tpage);for(c=0;c<h.pageMv.length;c++)h.pageMv[c]&&h.pageMv[c]!==a&&(e=h.pages[h.pageMv[c]],d=e.data().f.opts,e.flip("hideFoldedPage",b),b||i._moveFoldingPage.call(e,!1),d.force&&(d.next=0===d.page%2?d.page-1:d.page+1,delete d.force))}this.turn("update");return this},pages:function(a){var b=this.data();if(a){if(a<b.totalPages)for(var c=b.totalPages;c>a;c--)this.turn("removePage",c);b.totalPages=a;g._fitPage.call(this,b.page);return this}return b.totalPages},_missing:function(a){var b=
28
+this.data();if(!(1>b.totalPages)){for(var c=this.turn("range",a),d=[],a=c[0];a<=c[1];a++)b.pageObjs[a]||d.push(a);0<d.length&&this.trigger("missing",[d])}},_fitPage:function(a){var b=this.data(),c=this.turn("view",a);g._missing.call(this,a);if(b.pageObjs[a]){b.page=a;this.turn("stop");for(var d=0;d<c.length;d++)c[d]&&b.pageZoom[c[d]]!=b.zoom&&(this.trigger("zoomed",[c[d],c,b.pageZoom[c[d]],b.zoom]),b.pageZoom[c[d]]=b.zoom);g._removeFromDOM.call(this);g._makeRange.call(this);g._updateShadow.call(this);
29
+this.trigger("turned",[a,c]);this.turn("update");b.opts.autoCenter&&this.turn("center")}},_turnPage:function(a){var b,c,d=this.data(),e=d.pagePlace[a],h=this.turn("view"),i=this.turn("view",a);if(d.page!=a){var j=d.page;if("prevented"==t("turning",this,[a,i])){j==d.page&&-1!=f.inArray(e,d.pageMv)&&d.pages[e].flip("hideFoldedPage",!0);return}-1!=f.inArray(1,i)&&this.trigger("first");-1!=f.inArray(d.totalPages,i)&&this.trigger("last")}"single"==d.display?(b=h[0],c=i[0]):h[1]&&a>h[1]?(b=h[1],c=i[0]):
30
+h[0]&&a<h[0]&&(b=h[0],c=i[1]);e=d.opts.turnCorners.split(",");h=d.pages[b].data().f;i=h.opts;j=h.point;g._missing.call(this,a);d.pageObjs[a]&&(this.turn("stop"),d.page=a,g._makeRange.call(this),d.tpage=c,i.next!=c&&(i.next=c,i.force=!0),this.turn("update"),h.point=j,"hard"==h.effect?"ltr"==d.direction?d.pages[b].flip("turnPage",a>b?"r":"l"):d.pages[b].flip("turnPage",a>b?"l":"r"):"ltr"==d.direction?d.pages[b].flip("turnPage",e[a>b?1:0]):d.pages[b].flip("turnPage",e[a>b?0:1]))},page:function(a){var b=
31
+this.data();if(void 0===a)return b.page;if(!b.disabled&&!b.destroying){a=parseInt(a,10);if(0<a&&a<=b.totalPages)return a!=b.page&&(!b.done||-1!=f.inArray(a,this.turn("view"))?g._fitPage.call(this,a):g._turnPage.call(this,a)),this;throw q("The page "+a+" does not exist");}},next:function(){return this.turn("page",Math.min(this.data().totalPages,g._view.call(this,this.data().page).pop()+1))},previous:function(){return this.turn("page",Math.max(1,g._view.call(this,this.data().page).shift()-1))},peel:function(a,
32
+b){var c=this.data(),d=this.turn("view"),b=void 0===b?!0:!0===b;!1===a?this.turn("stop",null,b):"single"==c.display?c.pages[c.page].flip("peel",a,b):(d="ltr"==c.direction?-1!=a.indexOf("l")?d[0]:d[1]:-1!=a.indexOf("l")?d[1]:d[0],c.pages[d]&&c.pages[d].flip("peel",a,b));return this},_addMotionPage:function(){var a=f(this).data().f.opts,b=a.turn;b.data();g._addMv.call(b,a.page)},_eventStart:function(a,b,c){var d=b.turn.data(),e=d.pageZoom[b.page];a.isDefaultPrevented()||(e&&e!=d.zoom&&(b.turn.trigger("zoomed",
33
+[b.page,b.turn.turn("view",b.page),e,d.zoom]),d.pageZoom[b.page]=d.zoom),"single"==d.display&&c&&("l"==c.charAt(1)&&"ltr"==d.direction||"r"==c.charAt(1)&&"rtl"==d.direction?(b.next=b.next<b.page?b.next:b.page-1,b.force=!0):b.next=b.next>b.page?b.next:b.page+1),g._addMotionPage.call(a.target));g._updateShadow.call(b.turn)},_eventEnd:function(a,b,c){f(a.target).data();var a=b.turn,d=a.data();if(c){if(c=d.tpage||d.page,c==b.next||c==b.page)delete d.tpage,g._fitPage.call(a,c||b.next,!0)}else g._removeMv.call(a,
34
+b.page),g._updateShadow.call(a),a.turn("update")},_eventPressed:function(a){var a=f(a.target).data().f,b=a.opts.turn;b.data().mouseAction=!0;b.turn("update");return a.time=(new Date).getTime()},_eventReleased:function(a,b){var c;c=f(a.target);var d=c.data().f,e=d.opts.turn,h=e.data();c="single"==h.display?"br"==b.corner||"tr"==b.corner?b.x<c.width()/2:b.x>c.width()/2:0>b.x||b.x>c.width();if(200>(new Date).getTime()-d.time||c)a.preventDefault(),g._turnPage.call(e,d.opts.next);h.mouseAction=!1},_flip:function(a){a.stopPropagation();
35
+a=f(a.target).data().f.opts;a.turn.trigger("turn",[a.next]);a.turn.data().opts.autoCenter&&a.turn.turn("center",a.next)},_touchStart:function(){var a=this.data(),b;for(b in a.pages)if(n(b,a.pages)&&!1===i._eventStart.apply(a.pages[b],arguments))return!1},_touchMove:function(){var a=this.data(),b;for(b in a.pages)n(b,a.pages)&&i._eventMove.apply(a.pages[b],arguments)},_touchEnd:function(){var a=this.data(),b;for(b in a.pages)n(b,a.pages)&&i._eventEnd.apply(a.pages[b],arguments)},calculateZ:function(a){var b,
36
+c,d,e,h=this,f=this.data();b=this.turn("view");var i=b[0]||b[1],g=a.length-1,j={pageZ:{},partZ:{},pageV:{}},k=function(a){a=h.turn("view",a);a[0]&&(j.pageV[a[0]]=!0);a[1]&&(j.pageV[a[1]]=!0)};for(b=0;b<=g;b++)c=a[b],d=f.pages[c].data().f.opts.next,e=f.pagePlace[c],k(c),k(d),c=f.pagePlace[d]==d?d:c,j.pageZ[c]=f.totalPages-Math.abs(i-c),j.partZ[e]=2*f.totalPages-g+b;return j},update:function(){var a,b=this.data();if(this.turn("animating")&&0!==b.pageMv[0]){var c,d=this.turn("calculateZ",b.pageMv),e=
37
+this.turn("corner"),h=this.turn("view"),i=this.turn("view",b.tpage);for(a in b.pageWrap)if(n(a,b.pageWrap)&&(c=b.pageObjs[a].hasClass("fixed"),b.pageWrap[a].css({display:d.pageV[a]||c?"":"none",zIndex:(b.pageObjs[a].hasClass("hard")?d.partZ[a]:d.pageZ[a])||(c?-1:0)}),c=b.pages[a]))c.flip("z",d.partZ[a]||null),d.pageV[a]&&c.flip("resize"),b.tpage?c.flip("hover",!1).flip("disable",-1==f.inArray(parseInt(a,10),b.pageMv)&&a!=i[0]&&a!=i[1]):c.flip("hover",!1===e).flip("disable",a!=h[0]&&a!=h[1])}else for(a in b.pageWrap)n(a,
38
+b.pageWrap)&&(d=g._setPageLoc.call(this,a),b.pages[a]&&b.pages[a].flip("disable",b.disabled||1!=d).flip("hover",!0).flip("z",null));return this},_updateShadow:function(){var a,b,c=this.data(),d=this.width(),e=this.height(),h="single"==c.display?d:d/2;a=this.turn("view");c.shadow||(c.shadow=f("<div />",{"class":"shadow",css:l(0,0,0).css}).appendTo(this));for(var i=0;i<c.pageMv.length&&a[0]&&a[1];i++)a=this.turn("view",c.pages[c.pageMv[i]].data().f.opts.next),b=this.turn("view",c.pageMv[i]),a[0]=a[0]&&
39
+b[0],a[1]=a[1]&&b[1];switch(a[0]?a[1]?3:"ltr"==c.direction?2:1:"ltr"==c.direction?1:2){case 1:c.shadow.css({width:h,height:e,top:0,left:h});break;case 2:c.shadow.css({width:h,height:e,top:0,left:0});break;case 3:c.shadow.css({width:d,height:e,top:0,left:0})}},_setPageLoc:function(a){var b=this.data(),c=this.turn("view"),d=0;if(a==c[0]||a==c[1])d=1;else if("single"==b.display&&a==c[0]+1||"double"==b.display&&a==c[0]-2||a==c[1]+2)d=2;if(!this.turn("animating"))switch(d){case 1:b.pageWrap[a].css({zIndex:b.totalPages,
40
+display:""});break;case 2:b.pageWrap[a].css({zIndex:b.totalPages-1,display:""});break;case 0:b.pageWrap[a].css({zIndex:0,display:b.pageObjs[a].hasClass("fixed")?"":"none"})}return d},options:function(a){if(void 0===a)return this.data().opts;var b=this.data();f.extend(b.opts,a);a.pages&&this.turn("pages",a.pages);a.page&&this.turn("page",a.page);a.display&&this.turn("display",a.display);a.direction&&this.turn("direction",a.direction);a.width&&a.height&&this.turn("size",a.width,a.height);if(a.when)for(var c in a.when)n(c,
41
+a.when)&&this.unbind(c).bind(c,a.when[c]);return this},version:function(){return"4.1.0"}},i={init:function(a){this.data({f:{disabled:!1,hover:!1,effect:this.hasClass("hard")?"hard":"sheet"}});this.flip("options",a);i._addPageWrapper.call(this);return this},setData:function(a){var b=this.data();b.f=f.extend(b.f,a);return this},options:function(a){var b=this.data().f;return a?(i.setData.call(this,{opts:f.extend({},b.opts||Y,a)}),this):b.opts},z:function(a){var b=this.data().f;b.opts["z-index"]=a;b.fwrapper&&
42
+b.fwrapper.css({zIndex:a||parseInt(b.parent.css("z-index"),10)||0});return this},_cAllowed:function(){var a=this.data().f,b=a.opts.page,c=a.opts.turn.data(),d=b%2;return"hard"==a.effect?"ltr"==c.direction?[d?"r":"l"]:[d?"l":"r"]:"single"==c.display?1==b?"ltr"==c.direction?p.forward:p.backward:b==c.totalPages?"ltr"==c.direction?p.backward:p.forward:p.all:"ltr"==c.direction?p[d?"forward":"backward"]:p[d?"backward":"forward"]},_cornerActivated:function(a){var b=this.data().f,c=this.width(),d=this.height(),
43
+a={x:a.x,y:a.y,corner:""},e=b.opts.cornerSize;if(0>=a.x||0>=a.y||a.x>=c||a.y>=d)return!1;var h=i._cAllowed.call(this);switch(b.effect){case "hard":if(a.x>c-e)a.corner="r";else if(a.x<e)a.corner="l";else return!1;break;case "sheet":if(a.y<e)a.corner+="t";else if(a.y>=d-e)a.corner+="b";else return!1;if(a.x<=e)a.corner+="l";else if(a.x>=c-e)a.corner+="r";else return!1}return!a.corner||-1==f.inArray(a.corner,h)?!1:a},_isIArea:function(a){var b=this.data().f.parent.offset(),a=u&&a.originalEvent?a.originalEvent.touches[0]:
44
+a;return i._cornerActivated.call(this,{x:a.pageX-b.left,y:a.pageY-b.top})},_c:function(a,b){b=b||0;switch(a){case "tl":return j(b,b);case "tr":return j(this.width()-b,b);case "bl":return j(b,this.height()-b);case "br":return j(this.width()-b,this.height()-b);case "l":return j(b,0);case "r":return j(this.width()-b,0)}},_c2:function(a){switch(a){case "tl":return j(2*this.width(),0);case "tr":return j(-this.width(),0);case "bl":return j(2*this.width(),this.height());case "br":return j(-this.width(),
45
+this.height());case "l":return j(2*this.width(),0);case "r":return j(-this.width(),0)}},_foldingPage:function(){var a=this.data().f;if(a){var b=a.opts;if(b.turn)return a=b.turn.data(),"single"==a.display?1<b.next||1<b.page?a.pageObjs[0]:null:a.pageObjs[b.next]}},_backGradient:function(){var a=this.data().f,b=a.opts.turn.data();if((b=b.opts.gradients&&("single"==b.display||2!=a.opts.page&&a.opts.page!=b.totalPages-1))&&!a.bshadow)a.bshadow=f("<div/>",l(0,0,1)).css({position:"",width:this.width(),height:this.height()}).appendTo(a.parent);
46
+return b},type:function(){return this.data().f.effect},resize:function(a){var b=this.data().f,c=b.opts.turn.data(),d=this.width(),e=this.height();switch(b.effect){case "hard":a&&(b.wrapper.css({width:d,height:e}),b.fpage.css({width:d,height:e}),c.opts.gradients&&(b.ashadow.css({width:d,height:e}),b.bshadow.css({width:d,height:e})));break;case "sheet":a&&(a=Math.round(Math.sqrt(Math.pow(d,2)+Math.pow(e,2))),b.wrapper.css({width:a,height:a}),b.fwrapper.css({width:a,height:a}).children(":first-child").css({width:d,
47
+height:e}),b.fpage.css({width:d,height:e}),c.opts.gradients&&b.ashadow.css({width:d,height:e}),i._backGradient.call(this)&&b.bshadow.css({width:d,height:e})),b.parent.is(":visible")&&(c=D(b.parent[0]),b.fwrapper.css({top:c.top,left:c.left}),c=D(b.opts.turn[0]),b.fparent.css({top:-c.top,left:-c.left})),this.flip("z",b.opts["z-index"])}},_addPageWrapper:function(){var a=this.data().f,b=a.opts.turn.data(),c=this.parent();a.parent=c;if(!a.wrapper)switch(a.effect){case "hard":var d={};d[w+"transform-style"]=
48
+"preserve-3d";d[w+"backface-visibility"]="hidden";a.wrapper=f("<div/>",l(0,0,2)).css(d).appendTo(c).prepend(this);a.fpage=f("<div/>",l(0,0,1)).css(d).appendTo(c);b.opts.gradients&&(a.ashadow=f("<div/>",l(0,0,0)).hide().appendTo(c),a.bshadow=f("<div/>",l(0,0,0)));break;case "sheet":var d=this.width(),e=this.height();Math.round(Math.sqrt(Math.pow(d,2)+Math.pow(e,2)));a.fparent=a.opts.turn.data().fparent;a.fparent||(d=f("<div/>",{css:{"pointer-events":"none"}}).hide(),d.data().flips=0,d.css(l(0,0,"auto",
49
+"visible").css).appendTo(a.opts.turn),a.opts.turn.data().fparent=d,a.fparent=d);this.css({position:"absolute",top:0,left:0,bottom:"auto",right:"auto"});a.wrapper=f("<div/>",l(0,0,this.css("z-index"))).appendTo(c).prepend(this);a.fwrapper=f("<div/>",l(c.offset().top,c.offset().left)).hide().appendTo(a.fparent);a.fpage=f("<div/>",l(0,0,0,"visible")).css({cursor:"default"}).appendTo(a.fwrapper);b.opts.gradients&&(a.ashadow=f("<div/>",l(0,0,1)).appendTo(a.fpage));i.setData.call(this,a)}i.resize.call(this,
50
+!0)},_fold:function(a){var b=this.data().f,c=b.opts.turn.data(),d=i._c.call(this,a.corner),e=this.width(),h=this.height();switch(b.effect){case "hard":a.x="l"==a.corner?Math.min(Math.max(a.x,0),2*e):Math.max(Math.min(a.x,e),-e);var f,g,s,x,k,n=c.totalPages,l=b.opts["z-index"]||n,q={overflow:"visible"},p=d.x?(d.x-a.x)/e:a.x/e,r=90*p,t=90>r;switch(a.corner){case "l":x="0% 50%";k="100% 50%";t?(f=0,g=0<b.opts.next-1,s=1):(f="100%",g=b.opts.page+1<n,s=0);break;case "r":x="100% 50%",k="0% 50%",r=-r,e=-e,
51
+t?(f=0,g=b.opts.next+1<n,s=0):(f="-100%",g=1!=b.opts.page,s=1)}q[w+"perspective-origin"]=k;b.wrapper.transform("rotateY("+r+"deg)translate3d(0px, 0px, "+(this.attr("depth")||0)+"px)",k);b.fpage.transform("translateX("+e+"px) rotateY("+(180+r)+"deg)",x);b.parent.css(q);t?(p=-p+1,b.wrapper.css({zIndex:l+1}),b.fpage.css({zIndex:l})):(p-=1,b.wrapper.css({zIndex:l}),b.fpage.css({zIndex:l+1}));c.opts.gradients&&(g?b.ashadow.css({display:"",left:f,backgroundColor:"rgba(0,0,0,"+0.5*p+")"}).transform("rotateY(0deg)"):
52
+b.ashadow.hide(),b.bshadow.css({opacity:-p+1}),t?b.bshadow.parent()[0]!=b.wrapper[0]&&b.bshadow.appendTo(b.wrapper):b.bshadow.parent()[0]!=b.fpage[0]&&b.bshadow.appendTo(b.fpage),P(b.bshadow,j(100*s,0),j(100*(-s+1),0),[[0,"rgba(0,0,0,0.3)"],[1,"rgba(0,0,0,0)"]],2));break;case "sheet":var u=this,H=0,z,A,B,M,y,N,D,v=j(0,0),Q=j(0,0),m=j(0,0),J=i._foldingPage.call(this);Math.tan(0);var O=c.opts.acceleration,R=b.wrapper.height(),E="t"==a.corner.substr(0,1),C="l"==a.corner.substr(1,1),I=function(){var b=
53
+j(0,0),f=j(0,0);b.x=d.x?d.x-a.x:a.x;b.y=U?d.y?d.y-a.y:a.y:0;f.x=C?e-b.x/2:a.x+b.x/2;f.y=b.y/2;var g=L-Math.atan2(b.y,b.x),k=g-Math.atan2(f.y,f.x),k=Math.max(0,Math.sin(k)*Math.sqrt(Math.pow(f.x,2)+Math.pow(f.y,2)));H=180*(g/K);m=j(k*Math.sin(g),k*Math.cos(g));if(g>L&&(m.x+=Math.abs(m.y*b.y/b.x),m.y=0,Math.round(m.x*Math.tan(K-g))<h))return a.y=Math.sqrt(Math.pow(h,2)+2*f.x*b.x),E&&(a.y=h-a.y),I();g>L&&(b=K-g,f=R-h/Math.sin(b),v=j(Math.round(f*Math.cos(b)),Math.round(f*Math.sin(b))),C&&(v.x=-v.x),
54
+E&&(v.y=-v.y));z=Math.round(m.y/Math.tan(g)+m.x);b=e-z;f=b*Math.cos(2*g);k=b*Math.sin(2*g);Q=j(Math.round(C?b-f:z+f),Math.round(E?k:h-k));c.opts.gradients&&(y=b*Math.sin(g),b=i._c2.call(u,a.corner),b=Math.sqrt(Math.pow(b.x-a.x,2)+Math.pow(b.y-a.y,2))/e,D=Math.sin(L*(1<b?2-b:b)),N=Math.min(b,1),M=100<y?(y-100)/y:0,A=j(100*(y*Math.sin(g)/e),100*(y*Math.cos(g)/h)),i._backGradient.call(u)&&(B=j(100*(1.2*y*Math.sin(g)/e),100*(1.2*y*Math.cos(g)/h)),C||(B.x=100-B.x),E||(B.y=100-B.y)));m.x=Math.round(m.x);
55
+m.y=Math.round(m.y);return!0};f=function(a,d,f,g){var k=["0","auto"],m=(e-R)*f[0]/100,l=(h-R)*f[1]/100,d={left:k[d[0]],top:k[d[1]],right:k[d[2]],bottom:k[d[3]]},k={},n=90!=g&&-90!=g?C?-1:1:0,s=f[0]+"% "+f[1]+"%";u.css(d).transform(G(g)+F(a.x+n,a.y,O),s);b.fpage.css(d).transform(G(g)+F(a.x+Q.x-v.x-e*f[0]/100,a.y+Q.y-v.y-h*f[1]/100,O)+G((180/g-2)*g),s);b.wrapper.transform(F(-a.x+m-n,-a.y+l,O)+G(-g),s);b.fwrapper.transform(F(-a.x+v.x+m,-a.y+v.y+l,O)+G(-g),s);c.opts.gradients&&(f[0]&&(A.x=100-A.x),f[1]&&
56
+(A.y=100-A.y),k["box-shadow"]="0 0 20px rgba(0,0,0,"+0.5*D+")",J.css(k),P(b.ashadow,j(C?100:0,E?0:100),j(A.x,A.y),[[M,"rgba(0,0,0,0)"],[0.8*(1-M)+M,"rgba(0,0,0,"+0.2*N+")"],[1,"rgba(255,255,255,"+0.2*N+")"]],3,0),i._backGradient.call(u)&&P(b.bshadow,j(C?0:100,E?0:100),j(B.x,B.y),[[0.6,"rgba(0,0,0,0)"],[0.8,"rgba(0,0,0,"+0.3*N+")"],[1,"rgba(0,0,0,0)"]],3))};switch(a.corner){case "tl":a.x=Math.max(a.x,1);I();f(m,[1,0,0,1],[100,0],H);break;case "tr":a.x=Math.min(a.x,e-1);I();f(j(-m.x,m.y),[0,0,0,1],
57
+[0,0],-H);break;case "bl":a.x=Math.max(a.x,1);I();f(j(m.x,-m.y),[1,1,0,0],[100,100],-H);break;case "br":a.x=Math.min(a.x,e-1),I(),f(j(-m.x,-m.y),[0,1,1,0],[0,100],H)}}b.point=a},_moveFoldingPage:function(a){var b=this.data().f;if(b){var c=b.opts.turn,d=c.data(),e=d.pagePlace;a?(d=b.opts.next,e[d]!=b.opts.page&&(b.folding&&i._moveFoldingPage.call(this,!1),i._foldingPage.call(this).appendTo(b.fpage),e[d]=b.opts.page,b.folding=d),c.turn("update")):b.folding&&(d.pages[b.folding]?(c=d.pages[b.folding].data().f,
58
+d.pageObjs[b.folding].appendTo(c.wrapper)):d.pageWrap[b.folding]&&d.pageObjs[b.folding].appendTo(d.pageWrap[b.folding]),b.folding in e&&(e[b.folding]=b.folding),delete b.folding)}},_showFoldedPage:function(a,b){var c=i._foldingPage.call(this),d=this.data(),e=d.f,f=e.visible;if(c){if(!f||!e.point||e.point.corner!=a.corner)if(c="hover"==e.status||"peel"==e.status||e.opts.turn.data().mouseAction?a.corner:null,f=!1,"prevented"==t("start",this,[e.opts,c]))return!1;if(b){var g=this,d=e.point&&e.point.corner==
59
+a.corner?e.point:i._c.call(this,a.corner,1);this.animatef({from:[d.x,d.y],to:[a.x,a.y],duration:500,frame:function(b){a.x=Math.round(b[0]);a.y=Math.round(b[1]);i._fold.call(g,a)}})}else i._fold.call(this,a),d.effect&&!d.effect.turning&&this.animatef(!1);if(!f)switch(e.effect){case "hard":e.visible=!0;i._moveFoldingPage.call(this,!0);e.fpage.show();e.opts.shadows&&e.bshadow.show();break;case "sheet":e.visible=!0,e.fparent.show().data().flips++,i._moveFoldingPage.call(this,!0),e.fwrapper.show(),e.bshadow&&
60
+e.bshadow.show()}return!0}return!1},hide:function(){var a=this.data().f,b=a.opts.turn.data(),c=i._foldingPage.call(this);switch(a.effect){case "hard":b.opts.gradients&&(a.bshadowLoc=0,a.bshadow.remove(),a.ashadow.hide());a.wrapper.transform("");a.fpage.hide();break;case "sheet":0===--a.fparent.data().flips&&a.fparent.hide(),this.css({left:0,top:0,right:"auto",bottom:"auto"}).transform(""),a.wrapper.transform(""),a.fwrapper.hide(),a.bshadow&&a.bshadow.hide(),c.transform("")}a.visible=!1;return this},
61
+hideFoldedPage:function(a){var b=this.data().f;if(b.point){var c=this,d=b.point,e=function(){b.point=null;b.status="";c.flip("hide");c.trigger("end",[b.opts,!1])};if(a){var f=i._c.call(this,d.corner),a="t"==d.corner.substr(0,1)?Math.min(0,d.y-f.y)/2:Math.max(0,d.y-f.y)/2,g=j(d.x,d.y+a),l=j(f.x,f.y-a);this.animatef({from:0,to:1,frame:function(a){a=S(d,g,l,f,a);d.x=a.x;d.y=a.y;i._fold.call(c,d)},complete:e,duration:800,hiding:!0})}else this.animatef(!1),e()}},turnPage:function(a){var b=this,c=this.data().f,
62
+d=c.opts.turn.data(),a={corner:c.corner?c.corner.corner:a||i._cAllowed.call(this)[0]},e=c.point||i._c.call(this,a.corner,c.opts.turn?d.opts.elevation:0),f=i._c2.call(this,a.corner);this.trigger("flip").animatef({from:0,to:1,frame:function(c){c=S(e,e,f,f,c);a.x=c.x;a.y=c.y;i._showFoldedPage.call(b,a)},complete:function(){b.trigger("end",[c.opts,!0])},duration:d.opts.duration,turning:!0});c.corner=null},moving:function(){return"effect"in this.data()},isTurning:function(){return this.flip("moving")&&
63
+this.data().effect.turning},corner:function(){return this.data().f.corner},_eventStart:function(a){var b=this.data().f,c=b.opts.turn;if(!b.corner&&!b.disabled&&!this.flip("isTurning")&&b.opts.page==c.data().pagePlace[b.opts.page]){b.corner=i._isIArea.call(this,a);if(b.corner&&i._foldingPage.call(this))return this.trigger("pressed",[b.point]),i._showFoldedPage.call(this,b.corner),!1;b.corner=null}},_eventMove:function(a){var b=this.data().f;if(!b.disabled)if(a=u?a.originalEvent.touches:[a],b.corner){var c=
64
+b.parent.offset();b.corner.x=a[0].pageX-c.left;b.corner.y=a[0].pageY-c.top;i._showFoldedPage.call(this,b.corner)}else if(b.hover&&!this.data().effect&&this.is(":visible"))if(a=i._isIArea.call(this,a[0])){if("sheet"==b.effect&&2==a.corner.length||"hard"==b.effect)b.status="hover",b=i._c.call(this,a.corner,b.opts.cornerSize/2),a.x=b.x,a.y=b.y,i._showFoldedPage.call(this,a,!0)}else"hover"==b.status&&(b.status="",i.hideFoldedPage.call(this,!0))},_eventEnd:function(){var a=this.data().f,b=a.corner;!a.disabled&&
65
+b&&"prevented"!=t("released",this,[a.point||b])&&i.hideFoldedPage.call(this,!0);a.corner=null},disable:function(a){i.setData.call(this,{disabled:a});return this},hover:function(a){i.setData.call(this,{hover:a});return this},peel:function(a,b){var c=this.data().f;if(a){if(-1==f.inArray(a,p.all))throw q("Corner "+a+" is not permitted");if(-1!=f.inArray(a,i._cAllowed.call(this))){var d=i._c.call(this,a,c.opts.cornerSize/2);c.status="peel";i._showFoldedPage.call(this,{corner:a,x:d.x,y:d.y},b)}}else c.status=
66
+"",i.hideFoldedPage.call(this,b);return this}};window.requestAnim=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)};f.extend(f.fn,{flip:function(){return J(f(this[0]),i,arguments)},turn:function(){return J(f(this[0]),g,arguments)},transform:function(a,b){var c={};b&&(c[w+"transform-origin"]=b);c[w+"transform"]=a;return this.css(c)},animatef:function(a){var b=
67
+this.data();b.effect&&b.effect.stop();if(a){a.to.length||(a.to=[a.to]);a.from.length||(a.from=[a.from]);for(var c=[],d=a.to.length,e=!0,g=this,i=(new Date).getTime(),j=function(){if(b.effect&&e){for(var f=[],k=Math.min(a.duration,(new Date).getTime()-i),l=0;l<d;l++)f.push(b.effect.easing(1,k,a.from[l],c[l],a.duration));a.frame(1==d?f[0]:f);k==a.duration?(delete b.effect,g.data(b),a.complete&&a.complete()):window.requestAnim(j)}},l=0;l<d;l++)c.push(a.to[l]-a.from[l]);b.effect=f.extend({stop:function(){e=
68
+!1},easing:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c}},a);this.data(b);j()}else delete b.effect}});f.isTouch=u;f.mouseEvents=r;f.cssPrefix=T;f.cssTransitionEnd=function(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MSTransition:"transitionend",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]};f.findPos=D})(jQuery);

+ 12
- 0
src/App.vue Прегледај датотеку

@@ -1,9 +1,21 @@
1 1
 <script setup>
2
+  import { useModel } from '@zjxpcyc/vue-tiny-store';
3
+  import Loading from './pages/Loading.vue';
4
+
5
+  const { el } = useModel('audio');
2 6
 </script>
3 7
 
4 8
 <template>
5 9
   <router-view></router-view>
10
+  <Loading class="loading" />
11
+
12
+  <audio ref="el" src="/audio/audio.mp3" style="max-width: 0"  preload="auto"></audio>
6 13
 </template>
7 14
 
8 15
 <style lang="less" scoped>
16
+.loading {
17
+  position: fixed;
18
+  z-index: 1000;
19
+  top: 0;
20
+}
9 21
 </style>

+ 0
- 1
src/components/Bell.vue Прегледај датотеку

@@ -11,7 +11,6 @@
11 11
 </template>
12 12
 
13 13
 <script setup>
14
-
15 14
 </script>
16 15
 
17 16
 <style lang="less" scoped>

+ 7
- 2
src/components/Erasure.vue Прегледај датотеку

@@ -1,13 +1,13 @@
1 1
 <template>
2 2
   <div class="erasure">
3
-    <img :src="img" alt="" v-if="img">
3
+    <img :src="src" alt="" v-if="img">
4 4
     <slot v-else />
5 5
     <div class="erasure-mask" :style="style"></div>
6 6
   </div>
7 7
 </template>
8 8
 
9 9
 <script setup>
10
-  import { computed, ref } from 'vue';
10
+  import { computed, onMounted, ref } from 'vue';
11 11
 
12 12
   const props = defineProps({
13 13
     delay: String,
@@ -15,6 +15,11 @@
15 15
     timing: String,
16 16
   })
17 17
 
18
+  const src = computed(() => {
19
+    if (props.img) return `.${props.img}`
20
+    return undefined;
21
+  });
22
+
18 23
   const style = computed(() => {
19 24
     let sty = {}
20 25
     if (props.delay) {

+ 9
- 1
src/components/ImageText.vue Прегледај датотеку

@@ -3,9 +3,10 @@
3 3
     <img
4 4
       class="animate__animated animate__rotateIn"
5 5
       :class="{step: step}"
6
-      :src="img"
6
+      :src="src"
7 7
       :data-delay="delay"
8 8
       alt=""
9
+      @click="emit('clickImg', $event)"
9 10
     >
10 11
     <div class="space"></div>
11 12
     <div class="txt"><slot /></div>
@@ -22,6 +23,13 @@ import { computed } from "vue"
22 23
     direct: String,
23 24
   })
24 25
 
26
+  const emit = defineEmits(['clickImg']);
27
+
28
+  const src = computed(() => {
29
+    if (props.img) return `.${props.img}`
30
+    return undefined;
31
+  });
32
+
25 33
   const style = computed(() => {
26 34
     if (props.direct === 'right') {
27 35
       return {

+ 20
- 0
src/components/Popup.vue Прегледај датотеку

@@ -0,0 +1,20 @@
1
+<template>
2
+  <div class="popup pg-bg" @touchmove.prevent>
3
+    <slot />
4
+  </div>
5
+</template>
6
+
7
+<script setup>
8
+
9
+</script>
10
+
11
+<style lang="less" scoped>
12
+.popup {
13
+  position: fixed;
14
+  top: 0;
15
+  left: 0;
16
+  width: 100vw;
17
+  height: 100vh;
18
+  box-sizing: border-box;
19
+}
20
+</style>

+ 1
- 0
src/main.js Прегледај датотеку

@@ -7,6 +7,7 @@ import wxsdk from './utils/wx'
7 7
 import router from './router'
8 8
 import i18n from './i18n'
9 9
 
10
+
10 11
 import './style.less'
11 12
 // const { share } = wxsdk(location.href)
12 13
 

src/pages/first.vue → src/pages/Language.vue Прегледај датотеку

@@ -1,15 +1,27 @@
1 1
 <template>
2
-  <div class="page firstpg">
3
-    <video src="/video/first.mp4" loop="loop" autoplay="autoplay"></video>
2
+  <div class="page firstpg" ref="el">
3
+    <video src="/video/first.mp4" loop="loop" autoplay="autoplay" preload="preload"></video>
4 4
     <div class="i18n-change">
5
-      <div class="btn" @click="emit('change', 'zh')">中文版</div>
6
-      <div class="btn" @click="emit('change', 'en')">English</div>
5
+      <div class="btn" @click="onSelect('zh')">中文版</div>
6
+      <div class="btn" @click="onSelect('en')">English</div>
7 7
     </div>
8 8
   </div>
9 9
 </template>
10 10
 
11 11
 <script setup>
12
-  const emit = defineEmits(['change']);
12
+  import { ref } from 'vue';
13
+  import { useI18n } from 'vue-i18n';
14
+  import { useRouter } from 'vue-router';
15
+
16
+  const router = useRouter();
17
+  const el = ref();
18
+  
19
+  const { locale } = useI18n();
20
+  const onSelect = lan => {
21
+    locale.value = lan;
22
+    el.value.style.display = 'none';
23
+    router.replace('/index');
24
+  }
13 25
 
14 26
 </script>
15 27
 

+ 113
- 0
src/pages/Loading.vue Прегледај датотеку

@@ -0,0 +1,113 @@
1
+<template>
2
+  <div class="page pg-bg loading-pg" :class="{hidden: percent === '100%'}">
3
+    <div class="content">
4
+      <div class="load-main">
5
+        <img class="main-img" src="/images/loading/main.png" alt="">
6
+        <div class="process-bar"></div>
7
+        <div class="process-percent">{{percent}}</div>
8
+      </div>
9
+    </div>
10
+    <div class="footer">
11
+      <img src="/images/loading/allrights.png" alt="">
12
+    </div>
13
+  </div>
14
+</template>
15
+
16
+<script setup>
17
+  import { onMounted, ref } from 'vue';
18
+  import { preload } from '@/utils/preload'
19
+
20
+  const percent = ref('0%');
21
+
22
+  const onProcess = (val) => {
23
+    console.log('----loading->', val);
24
+    
25
+    const p = Number(val * 100).toFixed(2);
26
+    if (p >= 1) {
27
+      percent.value = '100%';
28
+    } else {
29
+      percent.value = `${p}%`;
30
+    }
31
+  }
32
+
33
+  onMounted(() => {
34
+    preload(onProcess)
35
+  });
36
+
37
+</script>
38
+
39
+<style lang="less" scoped>
40
+.loading-pg {
41
+  display: flex;
42
+  flex-direction: column;
43
+
44
+  &.hidden {
45
+    display: none;
46
+  }
47
+
48
+  .content {
49
+    flex: 1;
50
+    display: flex;
51
+    align-items: center;
52
+    justify-content: center;
53
+
54
+    .load-main {
55
+      text-align: center;
56
+      width: 70vw;
57
+      flex: none;
58
+
59
+      .main-img {
60
+        width: 80%;
61
+        margin: auto;
62
+      }
63
+
64
+      .process-bar {
65
+        position: relative;
66
+        z-index: 0;
67
+        margin-top: 36px;
68
+        width: 100%;
69
+        height: 2px;
70
+        background: #b9a58a;
71
+
72
+        &::before {
73
+          content: '';
74
+          position: absolute;
75
+          z-index: 1;
76
+          width: v-bind(percent);
77
+          height: 100%;
78
+          left: 0;
79
+          top: 0;
80
+          background: #847560;
81
+        }
82
+
83
+        &::after {
84
+          content: '';
85
+          position: absolute;
86
+          z-index: 2;
87
+          width: 24px;
88
+          height: 24px;
89
+          background-image: url(/images/loading/loader.png);
90
+          background-size: 100% 100%;
91
+          background-repeat: no-repeat;
92
+          left: calc(v-bind(percent) - 12px);
93
+          top: -11px;
94
+        }
95
+      }
96
+
97
+      .process-percent {
98
+        text-align: center;
99
+        color: #5c4034;
100
+        font-size: 1.2em;
101
+        margin-top: 1em;
102
+      }
103
+    }
104
+  }
105
+
106
+  .footer {
107
+    box-sizing: border-box;
108
+    flex: none;
109
+    height: 100px;
110
+    padding: 16px 48px;
111
+  }
112
+}
113
+</style>

+ 30
- 0
src/pages/bk1/GoBack.vue Прегледај датотеку

@@ -0,0 +1,30 @@
1
+<template>
2
+  <div class="goback-box" @click="onClick">
3
+    <img src="/images/bk1/goback.png" alt="">
4
+  </div>
5
+</template>
6
+
7
+<script setup>
8
+  import { useRouter } from 'vue-router';
9
+  const router = useRouter();
10
+
11
+  const onClick = () => {
12
+    router.go(-1);
13
+  }
14
+</script>
15
+
16
+
17
+<style lang="less" scoped>
18
+.goback-box {
19
+  width: 56px;
20
+  height: 56px;
21
+  display: flex;
22
+  align-items: center;
23
+  justify-content: center;
24
+
25
+  img {
26
+    flex: none;
27
+    width: 48px;
28
+  }
29
+}
30
+</style>

+ 19
- 4
src/pages/bk1/index.vue Прегледај датотеку

@@ -1,13 +1,17 @@
1 1
 <template>
2
-  <div id="bk1">
3
-    <Pg1 />
4
-    <Pg2 />
5
-    <Pg3 />
2
+  <div class="bk-pg">
3
+    <GoBack class="goback abs" />
4
+    <div id="bk1">
5
+      <Pg1 />
6
+      <Pg2 />
7
+      <Pg3 />
8
+    </div>
6 9
   </div>
7 10
 </template>
8 11
 
9 12
 <script setup>
10 13
 import { onMounted } from 'vue';
14
+import GoBack from './GoBack.vue';
11 15
 import Pg1 from './pg1.vue';
12 16
 import Pg2 from './pg2.vue';
13 17
 import Pg3 from './pg3.vue';
@@ -23,6 +27,17 @@ onMounted(() => {
23 27
 </script>
24 28
 
25 29
 <style lang="less">
30
+.bk-pg {
31
+  height: 100vh;
32
+  position: relative;
33
+
34
+  .goback {
35
+    top: 8px;
36
+    left: 8px;
37
+    z-index: 100;
38
+  }
39
+}
40
+
26 41
 #bk1 {
27 42
   .bk-pg {
28 43
     background-color: #000000;

+ 1
- 1
src/pages/bk1/pg1.vue Прегледај датотеку

@@ -87,7 +87,7 @@ import Dot from './Dot.vue';
87 87
         if (cur >= 24) {
88 88
           clearInterval(i);
89 89
         }
90
-      }, 1000 / 25);
90
+      }, 16);
91 91
     }, 300);
92 92
   })
93 93
 </script>

+ 36
- 40
src/pages/index.vue Прегледај датотеку

@@ -1,59 +1,55 @@
1 1
 <template>
2
-  <!-- <First @change="onLanChange" /> -->
3
-  <div class="pages slide-container">
4
-    <div class="slide-page">
5
-      <Pg1 class="container"/>
2
+  <div style="height: 100vh">
3
+    <div class="pages slide-container">
4
+      <div class="slide-page-2">
5
+        <Pg1 class="container"/>
6
+      </div>
7
+      <div class="slide-page-2">
8
+        <Pg2 class="container"/>
9
+      </div>
10
+      <div class="slide-page-2">
11
+        <Pg3 class="container"/>
12
+      </div>
6 13
     </div>
7
-    <div class="slide-page">
8
-      <Pg2 class="container"/>
9
-    </div>
10
-    <div class="slide-page">
11
-      <Pg3 class="container"/>
12
-    </div>
13
-
14
-    <!-- <Bk1 /> -->
15 14
   </div>
16 15
 </template>
17 16
 
18 17
 <script setup>
19
-import { onMounted } from 'vue';
20
-import { useI18n } from 'vue-i18n';
21
-import First from './first.vue';
18
+import { onMounted, ref, watch } from 'vue';
19
+import { useModel } from '@zjxpcyc/vue-tiny-store';
20
+import Popup from '@/components/Popup.vue';
21
+import Language from './Language.vue';
22 22
 import Pg1 from './pg1/index.vue';
23 23
 import Pg2 from './pg2/index.vue';
24 24
 import Pg3 from './pg3/index.vue';
25
-import Bk1 from './bk1/index.vue';
26
-// import parallaxing from '@/utils/parallaxing.js';
27
-
25
+import parallaxing from '@/utils/parallaxing.js';
28 26
 
29
-const { locale } = useI18n();
30
-
31
-const onLanChange = (val) => {
32
-  locale.value = val;
33
-  console.log(val)
34
-}
27
+const { play } = useModel('audio');
35 28
 
36 29
 onMounted(() => {
37
-  // parallaxing()
38
-  var slidepage = new window.slidePage({
39
-    slideContainer: '.slide-container',
40
-    slidePages: '.slide-page',
41
-    page: 1,
42
-    refresh: true,
43
-    dragMode: false,
44
-    useWheel: true,
45
-    useSwipe: true,
46
-    useAnimation : true,
47
-
48
-    // Events
49
-    before: function(origin,direction,target){},
50
-    after: function(origin,direction,target){},
51
- });
52
-})
30
+  parallaxing();
31
+  play();
32
+//   var slidepage = new window.slidePage({
33
+//     slideContainer: '.slide-container',
34
+//     slidePages: '.slide-page',
35
+//     page: 1,
36
+//     refresh: false,
37
+//     dragMode: false,
38
+//     useWheel: true,
39
+//     useSwipe: true,
40
+//     useAnimation : true,
41
+
42
+//     // Events
43
+//     before: function(origin,direction,target){},
44
+//     after: function(origin,direction,target){},
45
+//  });
46
+});
53 47
 
54 48
 </script>
55 49
 
56 50
 <style lang="less">
57 51
 .pages {
52
+  position: relative;
53
+  overflow-y: auto;
58 54
 }
59 55
 </style>

+ 3
- 1
src/pages/pg1/Part1.vue Прегледај датотеку

@@ -2,7 +2,7 @@
2 2
   <div class="part1-box">
3 3
     <div class="content">
4 4
       <div class="header">
5
-        <ImageText img="/images/pg1/earth.png" step :delay="500">
5
+        <ImageText img="/images/pg1/earth.png" step :delay="500" @clickImg="emit('clickImg', $event)">
6 6
           <p class="step animate__animated animate__fadeInRight" data-delay="100">
7 7
             2014年至今 <br>
8 8
             一朵紫色的小花 <br>
@@ -22,6 +22,8 @@
22 22
 <script setup>
23 23
   import ImageText from '@/components/ImageText.vue';
24 24
   import Erasure from '@/components/Erasure.vue';
25
+
26
+  const emit = defineEmits(['clickImg']);
25 27
 </script>
26 28
 
27 29
 <style lang="less" scoped>

+ 5
- 3
src/pages/pg1/Part2.vue Прегледај датотеку

@@ -12,9 +12,11 @@
12 12
       </div>
13 13
     </div>
14 14
     <div class="abs" style="top: 45%;width: 70%; right: 0; z-index: 0;">
15
-      <Erasure delay="2.5s" timing="cubic-bezier(0.07, 0.85, 0.18, 0.96)">
16
-        <img src="/images/pg1/line2.png" alt="">
17
-      </Erasure>
15
+      <Erasure
16
+        delay="2.5s"
17
+        timing="cubic-bezier(0.07, 0.85, 0.18, 0.96)"
18
+        img="/images/pg1/line2.png"
19
+      />
18 20
     </div>
19 21
   </div> 
20 22
 </template>

+ 1
- 1
src/pages/pg1/Part3.vue Прегледај датотеку

@@ -3,7 +3,7 @@
3 3
     <div class="content">
4 4
       <div class="header">
5 5
         <ImageText img="/images/pg1/peace.png" step :delay="3000">
6
-          <p class="step animate__animated animate__fadeInLeft" data-delay="4000">
6
+          <p class="step animate__animated animate__fadeInLeft" data-delay="3500">
7 7
             在<strong>2亿人</strong>心中 <br>
8 8
             和平愿景被播撒
9 9
           </p>

+ 19
- 7
src/pages/pg1/index.vue Прегледај датотеку

@@ -1,31 +1,43 @@
1 1
 <template>
2
-  <div class="page pg-bg">
2
+  <div class="page pg-bg pg1" parallax>
3 3
     <div class="conent">
4 4
       <div class="header">        
5 5
         <Logo class="logo" />
6 6
         <Bell class="bell" />
7 7
       </div>
8 8
       <div class="body">
9
-        <Part1 class="part1" />
9
+        <Part1 class="part1" @clickImg="onClickImg" />
10 10
         <Part2 class="part2" />
11 11
         <Part3 class="part3" />
12 12
       </div>
13 13
     </div>
14
-    <div class="footer abs step animate__animated animate__fadeInUp" data-delay="5000">
15
-      <img src="/images/pg1/stele.png" alt="">
14
+    <div class="footer abs step animate__animated animate__fadeInUp" data-delay="4000">
15
+      <img src="/images/pg1/stele.png" alt="" parallax-offset='-100'>
16 16
     </div>
17
-    <div class="footer abs step animate__animated animate__fadeInUp" data-delay="6000">
18
-      <img src="/images/pg1/wall.png" alt="">
17
+    <div class="footer abs step animate__animated animate__fadeInUp" data-delay="4500">
18
+      <img src="/images/pg1/wall.png" alt="" parallax-offset='-100'>
19 19
     </div>
20 20
   </div>
21 21
 </template>
22 22
 
23 23
 <script setup>
24
+  import { onMounted } from 'vue';
25
+  import { useRouter } from 'vue-router';
24 26
   import Bell from '@/components/Bell.vue';
25 27
   import Logo from './Logo.vue';
26 28
   import Part1 from './Part1.vue';
27 29
   import Part2 from './Part2.vue';
28 30
   import Part3 from './Part3.vue';
31
+
32
+  const router = useRouter();
33
+
34
+  const onClickImg = () => {
35
+    router.push('/bk1');
36
+  }
37
+
38
+  onMounted(() => {
39
+  })
40
+
29 41
 </script>
30 42
 
31 43
 <style lang="less" scoped>
@@ -61,6 +73,6 @@
61 73
     bottom: 0;
62 74
     left: 0;
63 75
     width: 100vw;
64
-    z-index: 0;
76
+    z-index: 10;
65 77
   }
66 78
 </style>

+ 80
- 0
src/pages/pg2/flower/Flower1.vue Прегледај датотеку

@@ -0,0 +1,80 @@
1
+<template>
2
+  <div class="flower-box1">
3
+    <div>
4
+      <div class="f1-box">
5
+        <img class="f1-p1" src="/images/pg2/flower/1-1.png" alt="">
6
+        <img class="f1-p2 abs" src="/images/pg2/flower/1-2.png" alt="">
7
+        <img class="f1-p3 abs" src="/images/pg2/flower/1-3.png" alt="">
8
+        <img class="f1-p4 abs" src="/images/pg2/flower/1-4.png" alt="">
9
+      </div>
10
+    </div>
11
+  </div>
12
+</template>
13
+
14
+<script setup>
15
+
16
+</script>
17
+
18
+<style lang="less" scoped>
19
+.flower-box1 {
20
+  & > div {
21
+    position: relative;
22
+    // overflow: hidden;
23
+  }
24
+
25
+  .f1-box {
26
+    margin-bottom: -100px;
27
+    transform: rotateY(180deg);
28
+  }
29
+
30
+  .f1-p1 {
31
+    width: 26vw;
32
+  }
33
+
34
+  .f1-p2 {
35
+    width: 13vw;
36
+    height: 50%;
37
+    top: -20%;
38
+    right: 4.16vw;
39
+    transform-origin: left bottom;
40
+    animation: f1-p2 4s ease-in-out infinite alternate;
41
+  }
42
+
43
+  @keyframes f1-p2 {
44
+    from {
45
+      transform: rotate(0);
46
+    }
47
+
48
+    to {
49
+      transform: rotate(-6deg);
50
+    }
51
+  }
52
+
53
+  .f1-p3 {
54
+    width: 18vw;
55
+    height: 20%;
56
+    top: 5%;
57
+    left: -8.32vw;
58
+    
59
+    transform-origin: right bottom;
60
+    animation: f1-p3 4s ease-in-out infinite alternate;
61
+  }
62
+  
63
+  @keyframes f1-p3 {
64
+    from {
65
+      transform: rotate(0);
66
+    }
67
+
68
+    to {
69
+      transform: rotate(6deg);
70
+    }
71
+  }
72
+
73
+  .f1-p4 {
74
+    width: 18vw;
75
+    height: 30%;
76
+    top: 30%;
77
+    right: -4.16vw;
78
+  }
79
+}
80
+</style>

+ 38
- 0
src/pages/pg2/flower/Flower2.vue Прегледај датотеку

@@ -0,0 +1,38 @@
1
+<template>
2
+  <div class="flower-box2">
3
+    <div class="">
4
+      <img src="/images/pg2/flower/右-小.png" alt="">
5
+    </div>
6
+  </div>
7
+</template>
8
+
9
+<script setup>
10
+
11
+</script>
12
+
13
+<style lang="less" scoped>
14
+.flower-box2 {
15
+
16
+  & > div {
17
+    position: relative;
18
+    overflow: hidden;
19
+    transform: rotate(0);
20
+    transform-origin: bottom right;
21
+    animation: f2-shake 3s ease-in-out infinite alternate;
22
+
23
+    img {
24
+      margin-bottom: -60px;
25
+    }
26
+  }
27
+
28
+  @keyframes f2-shake {
29
+    from {
30
+      transform: rotate(0);
31
+    }
32
+
33
+    to {      
34
+      transform: rotate(-5deg);
35
+    }
36
+  }
37
+}
38
+</style>

+ 38
- 0
src/pages/pg2/flower/Flower3.vue Прегледај датотеку

@@ -0,0 +1,38 @@
1
+<template>
2
+  <div class="flower-box3">
3
+    <div class="">
4
+      <img src="/images/pg2/flower/左-小.png" alt="">
5
+    </div>
6
+  </div>
7
+</template>
8
+
9
+<script setup>
10
+
11
+</script>
12
+
13
+<style lang="less" scoped>
14
+.flower-box3 {
15
+
16
+  & > div {
17
+    position: relative;
18
+    overflow: hidden;
19
+    transform: rotate(0);
20
+    transform-origin: bottom left;
21
+    animation: f2-shake 3s ease-in-out infinite alternate;
22
+
23
+    img {
24
+      margin-bottom: -120px;
25
+    }
26
+  }
27
+
28
+  @keyframes f2-shake {
29
+    from {
30
+      transform: rotate(0);
31
+    }
32
+
33
+    to {      
34
+      transform: rotate(-5deg);
35
+    }
36
+  }
37
+}
38
+</style>

+ 69
- 20
src/pages/pg2/index.vue Прегледај датотеку

@@ -2,24 +2,33 @@
2 2
   <div class="page pg-bg pg2" parallax>
3 3
     <Bell class="bell abs" />
4 4
     <Cloud class="cloud abs" />
5
-    <div class="content txt"  parallax-offset="40" parallax-out='0' parallax-in='100'>
6
-      <p class="animate__animated animate__lightSpeedInRight">
5
+    <div class="content txt">
6
+      <p class="step animate__animated animate__lightSpeedInRight" data-delay="100">
7 7
         1939年 <br >
8 8
         <strong>一抹紫色</strong>在战争的废墟中……
9 9
       </p>
10
-      <img class="story animate__animated animate__fadeInDown" src="/images/pg2/story.png" alt="">
10
+      <img class="story step animate__animated animate__fadeInDown" data-delay="600" src="/images/pg2/story.png" alt="">
11
+    </div>
12
+
13
+    <div class="hill abs">
14
+      <img src="/images/pg2/mountain.png" alt="" parallax-offset="-100">
11 15
     </div>
12 16
     
13
-    <div class="wall abs" parallax-offset="60" parallax-out='0' parallax-in='100'>
17
+    <div class="groups abs">
14 18
       <div>
15
-        <img class="stele" src="/images/pg2/stele.png" alt="">
16
-        <img class="ruins" src="/images/pg2/ruins_colorful.png" alt="">
17
-        <Smoke class="smoke abs" />
19
+        <img class="stele" src="/images/pg2/stele.png" alt="" parallax-offset="-150">
20
+        <div parallax-offset="-300" >
21
+          <img class="ruins" src="/images/pg2/ruins.png" alt="">
22
+          <Smoke class="smoke abs" />
23
+        </div>
24
+        <img class="persons" src="/images/pg2/persons.png" alt="" parallax-offset="-500">
18 25
       </div>
19 26
     </div>
20 27
 
21
-    <div class="flower abs" parallax-offset="30" parallax-out='0' parallax-in='100'>
22
-      <img src="/images/pg2/前景土堆.png" alt="">
28
+    <div class="flower abs" parallax-offset="-500">
29
+      <Flower1 class="flower1 abs" />
30
+      <Flower2 class="flower2 abs" />
31
+      <Flower3 class="flower3 abs" />
23 32
     </div>
24 33
   </div>
25 34
 </template>
@@ -28,11 +37,15 @@
28 37
 import Bell from '@/components/Bell.vue';
29 38
 import Cloud from './Cloud.vue';
30 39
 import Smoke from './smoke.vue';
40
+import Flower1 from './flower/Flower1.vue';
41
+import Flower2 from './flower/Flower2.vue';
42
+import Flower3 from './flower/Flower3.vue';
31 43
 
32 44
 </script>
33 45
 
34 46
 <style lang="less" scoped>
35 47
 .pg2 {
48
+  overflow: hidden;
36 49
 
37 50
   .bell {
38 51
     top: 30px;
@@ -45,6 +58,11 @@ import Smoke from './smoke.vue';
45 58
     width: 100vw;
46 59
   }
47 60
 
61
+  .hill {
62
+    top: 30vh;
63
+    z-index: 2;
64
+  }
65
+
48 66
   .content {
49 67
     z-index: 10;
50 68
     width: 80vw;
@@ -60,38 +78,69 @@ import Smoke from './smoke.vue';
60 78
     }
61 79
   }
62 80
 
63
-  .smoke {
64
-    bottom: 25%;
65
-    left: 60%;
66
-    z-index: 0;
67
-    width: 100%;
68
-    background: transparent;
69
-  }
70 81
 
71
-  .wall {
72
-    bottom: 0;
82
+  .groups {
83
+    top: 50vh;
73 84
     left: 0;
74 85
     width: 100%;
75 86
     z-index: 3;
76
-    overflow: hidden;
77 87
 
78 88
     & > div {
79 89
       position: relative;
80 90
     }
81 91
 
92
+    .persons {
93
+      z-index: 3;
94
+      position: absolute;
95
+      bottom: -50%;
96
+    }
97
+
98
+    .ruins {
99
+      z-index: 2;
100
+      position: relative;
101
+    }
102
+      
103
+    .smoke {
104
+      bottom: 0;
105
+      left: 55%;
106
+      z-index: 0;
107
+      width: 100%;
108
+      background: transparent;
109
+    }
110
+
82 111
     .stele {
83 112
       position: absolute;
84 113
       width: 40%;
85 114
       right: 0;
86
-      top: -100%;
115
+      top: -60%;
87 116
     }
117
+
88 118
   }
89 119
 
90 120
   .flower {
91 121
     bottom: 0;
92 122
     left: 0;
93 123
     width: 100%;
124
+    height: 50vh;
94 125
     z-index: 4;
126
+    overflow: hidden;
127
+  }
128
+
129
+  .flower1 {
130
+    left: 0;
131
+    bottom: 0;
132
+  }
133
+
134
+  .flower2 {
135
+    width: 20vw;
136
+    right: 0;
137
+    bottom: 0;
138
+  }
139
+
140
+  .flower3 {
141
+    width: 20vw;
142
+    left: 20vw;
143
+    bottom: 0;
95 144
   }
96 145
 
97 146
   .hill, .wall, .flower {

+ 32
- 31
src/pages/pg3/index.vue Прегледај датотеку

@@ -1,11 +1,11 @@
1 1
 <template>
2
-  <div class="page pg-bg pg3" parallax ref="pgRef">
2
+  <div class="page pg-bg pg3">
3 3
     <Bell class="bell abs" />
4
-    <div class="header">
4
+    <div class="header step animate__animated animate__fadeInDown" data-delay="100">
5 5
       <img src="/images/pg3/header.png" alt="">
6 6
     </div>
7 7
     <div class="content">
8
-      <p class="txt">
8
+      <p class="txt step animate__animated animate__fadeInDown" data-delay="1000">
9 9
         如同“紫金草行动”,我们的身边有很多人,用自己的方式向世界讲述1937,他们不同年龄、不同肤色、不同国家、不同职业,但他们讲述的是全人类共同的心愿。
10 10
       </p>
11 11
     </div>
@@ -15,16 +15,16 @@
15 15
     </div>
16 16
 
17 17
     <ul class="card-list">
18
-      <li class="animate__animated animate__fadeInUp">
18
+      <li class="step animate__animated animate__fadeInUp" data-delay="1500">
19 19
         <img src="/images/pg3/采访1.png" alt="">
20 20
       </li>
21
-      <li class="animate__animated animate__fadeInUp">
21
+      <li class="step animate__animated animate__fadeInUp" data-delay="2000">
22 22
         <img src="/images/pg3/采访2.png" alt="">
23 23
       </li>
24
-      <li class="animate__animated animate__fadeInUp">
24
+      <li class="step animate__animated animate__fadeInUp" data-delay="2500">
25 25
         <img src="/images/pg3/采访1.png" alt="">
26 26
       </li>
27
-      <li class="animate__animated animate__fadeInUp">
27
+      <li class="step animate__animated animate__fadeInUp" data-delay="3000">
28 28
         <img src="/images/pg3/采访2.png" alt="">
29 29
       </li>
30 30
     </ul>
@@ -32,41 +32,42 @@
32 32
 </template>
33 33
 
34 34
 <script setup>
35
-import { onBeforeUnmount, onMounted, ref } from 'vue';
36
-import Bell from '@/components/Bell.vue';
35
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
36
+  import Bell from '@/components/Bell.vue';
37
+  import Erasure from '@/components/Erasure.vue';
37 38
 
38
-const pgRef = ref();
39
-const show = ref(false);
40
-let intersectionObserver = null;
39
+  const pgRef = ref();
40
+  const show = ref(false);
41
+  let intersectionObserver = null;
41 42
 
42
-const onAnimationEnd = () => {
43
-  show2.value = true;
44
-}
43
+  const onAnimationEnd = () => {
44
+    show2.value = true;
45
+  }
45 46
 
46
-onMounted(() => {
47
-  intersectionObserver = new IntersectionObserver((entries) => {
48
-    // console.log(entries[0]);
49
-    const { intersectionRatio } = entries[0];
50
-    if (intersectionRatio <= 0) {
51
-      show.value = false;
52
-    } else if (intersectionRatio >= 0.5)  {
53
-      show.value = true;
54
-    }
55
-  }, {threshold: [0.0, 0.5]});
47
+  // onMounted(() => {
48
+  //   intersectionObserver = new IntersectionObserver((entries) => {
49
+  //     // console.log(entries[0]);
50
+  //     const { intersectionRatio } = entries[0];
51
+  //     if (intersectionRatio <= 0) {
52
+  //       show.value = false;
53
+  //     } else if (intersectionRatio >= 0.5)  {
54
+  //       show.value = true;
55
+  //     }
56
+  //   }, {threshold: [0.0, 0.5]});
56 57
 
57
-  intersectionObserver.observe(pgRef.value);
58
-})
58
+  //   intersectionObserver.observe(pgRef.value);
59
+  // })
59 60
 
60
-onBeforeUnmount(() => {
61
-  intersectionObserver.disconnect();
62
-})
61
+  // onBeforeUnmount(() => {
62
+  //   intersectionObserver.disconnect();
63
+  // })
63 64
 
64 65
 </script>
65 66
 
66 67
 
67 68
 <style lang="less" scoped>
68 69
 .pg3 {
69
-  overflow-y: auto;
70
+  height: auto;
70 71
 
71 72
   .bell {
72 73
     right: 30px;

+ 3
- 1
src/router.js Прегледај датотеку

@@ -2,7 +2,9 @@
2 2
 import { createRouter, createWebHashHistory } from 'vue-router'
3 3
 
4 4
 const routes = [
5
-  { path: '/', component: () => import('@/pages/index.vue') },
5
+  { path: '/', component: () => import('@/pages/Language.vue') },
6
+  { path: '/index', component: () => import('@/pages/index.vue') },
7
+  { path: '/bk1', component: () => import('@/pages/bk1/index.vue') },
6 8
 ]
7 9
 
8 10
 const router = createRouter({

+ 16
- 6
src/store/index.js Прегледај датотеку

@@ -1,14 +1,24 @@
1 1
 import { ref } from 'vue';
2 2
 import createStore from '@zjxpcyc/vue-tiny-store';
3 3
 
4
-const useFoo = () => {
5
-  const foo = ref('');
4
+const useAudio = () => {
5
+  const el = ref();
6 6
 
7
-  return [
8
-    foo
9
-  ]
7
+  const play = () => {
8
+    el.value.play();
9
+  }
10
+
11
+  const pause = () => {
12
+    el.value.pause();
13
+  }
14
+
15
+  return {
16
+    el,
17
+    play,
18
+    pause,
19
+  }
10 20
 };
11 21
 
12
-const store = createStore({ foo: useFoo });
22
+const store = createStore({ 'audio': useAudio });
13 23
 
14 24
 export default store;

+ 5
- 2
src/style.less Прегледај датотеку

@@ -1,4 +1,5 @@
1 1
 :root {
2
+  font-family: "SourceHanSansCN-Medium";
2 3
   font-size: 16px;
3 4
   line-height: 24px;
4 5
   font-weight: 400;
@@ -26,7 +27,8 @@ img {
26 27
   width: 100vw;
27 28
   height: 100vh;
28 29
   // background-color: #0f2c37;
29
-  overflow: hidden;
30
+  overflow-y: auto;
31
+  // overflow: hidden;
30 32
 }
31 33
 
32 34
 .pg-bg {
@@ -36,7 +38,7 @@ img {
36 38
   
37 39
   background-image: url('/images/BG.jpg');
38 40
   background-size: 100% 100%;
39
-  background-repeat: no-repeat;
41
+  background-repeat: repeat-y;
40 42
 }
41 43
 
42 44
 .abs {
@@ -55,6 +57,7 @@ img {
55 57
     text-align: inline-block;
56 58
     padding: 0 4px;
57 59
     font-size: 1.1em;
60
+    font-weight: 700;
58 61
     color: #b87c58;
59 62
     text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, rgba(0, 0, 0, .5) 0 2px 2px;
60 63
     // text-stroke: 1px #fff;

+ 25
- 4
src/utils/resources.js Прегледај датотеку

@@ -3,10 +3,31 @@ export const videos = [
3 3
   './video/first.mp4',
4 4
 ]
5 5
 
6
+export const audios = [
7
+  // './audio/audio.mp3'
8
+]
9
+
6 10
 // 预加载资源
7 11
 export const resources = [
8
-  {
9
-    name: '背景',
10
-    image: './images/BG.png',
11
-  },
12
+  { image: './images/pg1/bell.png', },
13
+  { image: './images/pg1/earth.png', },
14
+  { image: './images/pg1/honour.png', },
15
+  { image: './images/pg1/line1.png', },
16
+  { image: './images/pg1/line2.png', },
17
+  { image: './images/pg1/logo.png', },
18
+  { image: './images/pg1/peace.png', },
19
+  { image: './images/pg1/stele.png', },
20
+  { image: './images/pg1/wall.png', },
21
+  { image: './images/pg2/cloud-left.png', },
22
+  { image: './images/pg2/cloud-right.png', },
23
+  { image: './images/pg2/mountain.png', },
24
+  { image: './images/pg2/ruins.png', },
25
+  { image: './images/pg2/stele.png', },
26
+  { image: './images/pg2/story.png', },
27
+  { image: './images/pg2/flower/1-1.png', },
28
+  { image: './images/pg2/flower/1-2.png', },
29
+  { image: './images/pg2/flower/1-3.png', },
30
+  { image: './images/pg2/flower/1-4.png', },
31
+  { image: './images/pg2/flower/右-小.png', },
32
+  { image: './images/pg2/flower/左-小.png', },
12 33
 ];

+ 5
- 0
yarn.lock Прегледај датотеку

@@ -55,6 +55,11 @@
55 55
     "@intlify/core-base" "9.2.2"
56 56
     "@intlify/shared" "9.2.2"
57 57
 
58
+"@splidejs/splide@^4.1.4":
59
+  version "4.1.4"
60
+  resolved "https://registry.yarnpkg.com/@splidejs/splide/-/splide-4.1.4.tgz#02d029360569e7d75d28357a9727fc48322015a3"
61
+  integrity sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==
62
+
58 63
 "@vitejs/plugin-vue@^3.0.3":
59 64
   version "3.2.0"
60 65
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54"