H5
/
wenhua818
Sledovat 3
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 1 Wiki Activity
Procházet zdrojové kódy

feats

张延森 před 2 roky
rodič
2656b397d5
revize
31ae3ad410
12 změnil soubory, kde provedl 924 přidání a 2 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 1
    0
      index.html
  2. 539
    0
      public/fonts/demo.css
  3. 236
    0
      public/fonts/demo_index.html
  4. 25
    0
      public/fonts/iconfont.css
  5. 1
    0
      public/fonts/iconfont.js
  6. 23
    0
      public/fonts/iconfont.json
  7. 23
    0
      public/fonts/iconfont.svg
  8. binární
      public/fonts/iconfont.ttf
  9. binární
      public/fonts/iconfont.woff
  10. binární
      public/fonts/iconfont.woff2
  11. 65
    0
      src/components/AudioPlaying.vue
  12. 11
    2
      src/components/Image.vue

+ 1
- 0
index.html Zobrazit soubor 

@@ -4,6 +4,7 @@
4 4 
     <meta charset="UTF-8" />
5 5 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6 6 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <link rel="stylesheet" href="./fonts/iconfont.css">
7 8 
     <title>Vite + Vue</title>
8 9 
   </head>
9 10 
   <body>

+ 539
- 0
public/fonts/demo.css Zobrazit soubor 

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

+ 236
- 0
public/fonts/demo_index.html Zobrazit soubor 

@@ -0,0 +1,236 @@
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">&#xe6a9;</span>
59 
+                <div class="name">music</div>
60 
+                <div class="code-name">&amp;#xe6a9;</div>
61 
+              </li>
62 
+
63 
+            <li class="dib">
64 
+              <span class="icon iconfont">&#xe616;</span>
65 
+                <div class="name">Music-Note 4</div>
66 
+                <div class="code-name">&amp;#xe616;</div>
67 
+              </li>
68 
+
69 
+          </ul>
70 
+          <div class="article markdown">
71 
+          <h2 id="unicode-">Unicode 引用</h2>
72 
+          <hr>
73 
+
74 
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
75 
+          <ul>
76 
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
77 
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
78 
+          </ul>
79 
+          <blockquote>
80 
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
81 
+          </blockquote>
82 
+          <p>Unicode 使用步骤如下：</p>
83 
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
84 
+<pre><code class="language-css"
85 
+>@font-face {
86 
+  font-family: 'iconfont';
87 
+  src:
88 
+       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQQAAsAAAAACIQAAAPCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqEWINyATYCJAMMCwgABCAFhGcHORtRB8iemjwtJoiAsmBBgSThgcXD19535+7ue+nNlV7GR2WiIqMCfTwWVarSoBmEAtcUCov/B3Z6SWF4kzT5v/CWsQA31ob5dV8omFbxhNeXvcl+WKiU8ClTEgWs7fNck1fPJ/BBZNXpwwM7H9CBrcuigAbcOPAW8S2yuwKxyGUEWq3ShL00PJwjpXsfdiJl+ExykBTGfYgqRDKCVmlgh2ZFDe1bIF4jIL1MKIBXwenjH8gGMUiqDOYkV3dLOfI7Yzzrw8tuZIP8EzySgOsnVMhYXJk+bputN+JRdBGe1ippgmTWipBGDfz/E3A1cW394ZEEUYOZ3w5miSSdFM/hJrI+zD9r3h02rtGCbwD+Srp+5mtRVHsUFPi8nLTUFGnd/N6dvYD90lq6OYky17ayNB2Tle3M7LI1YMjwyob8Ku8iyHneuTY/3LGCrM4NNS76pX6xddHLO+oX9a1ncprgOpU9cZyXrMfkfCqrgmyWJpVjh2P7Rml6+8pKp9JqTM5o/bLqvGzTLudE+ljqILvSv/TkRKphV6mHrOzHsXgtKt/pVMrfOTvYNEdWNtOzMNI879BXStDnyeC/eK8ixyoZt2LJW0G32qzKw2rWct/DW3hhKSXHS2recjfHgeku2tPm2qEqL2l1JVGW7KfLrwjFw8yh5/uf/a6fcR2tIuQ4pCS9YmllHzOEV+Tj+zxmTpecrnHZ2HqI46qjJ0ZpUGIq7wMCD01ORyYdcsuw+6GmI1DFF0KMknAFpIQpOOpaehKEdoGE0ueA4K85vaVUkAQ1q5TSFaLWlf78qFTIIq0T717molq5gHGUXn560S5njYtevxvRi/0bG2QRkmtilHaR+JpkgbcIGnN3Fg3iMuTT3/4Y/+X6tbyo1F+b2/AB/ggqNWF3QwFYbkSzBJj7k2XuQMKi+ciliutwGxLZI8m3p9Zq6firxdAL19/eBxJzaBZ4GEmTMWTNxmmFNY9Km3XUmh2h1QKDwW36RIuLQgJMy0MI3fqQdPqMrNs6rbBOURl0jlq3X7S6Dorx2kyHnx6hwCiDbwqE+LmOYis4oHpE9WEJVBa6IgU6DoCMpHQ+sUYHaYgOcYlqLz5egcBY1wZDbjG0LBeiY10DJW4Fx7M3k5IKrDpIyy/KjswRJGBIBnx9gBASl0PxiDl7eUdI9WAREJB2NZOAcgh1IEOSNIC2ljqgkiupHOdJ1ROPKbRRIOKyAUPNjCwr6gLR1bUMSMJagnuEPTNShCgQKm3NL7cfbhm0MvvlwGLwMPhQP4xibMr6FhkAAAA=') format('woff2'),
89 
+       url('iconfont.woff?t=1660978973974') format('woff'),
90 
+       url('iconfont.ttf?t=1660978973974') format('truetype'),
91 
+       url('iconfont.svg?t=1660978973974#iconfont') format('svg');
92 
+}
93 
+</code></pre>
94 
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
95 
+<pre><code class="language-css"
96 
+>.iconfont {
97 
+  font-family: "iconfont" !important;
98 
+  font-size: 16px;
99 
+  font-style: normal;
100 
+  -webkit-font-smoothing: antialiased;
101 
+  -moz-osx-font-smoothing: grayscale;
102 
+}
103 
+</code></pre>
104 
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
105 
+<pre>
106 
+<code class="language-html"
107 
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
108 
+</code></pre>
109 
+          <blockquote>
110 
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
111 
+          </blockquote>
112 
+          </div>
113 
+      </div>
114 
+      <div class="content font-class">
115 
+        <ul class="icon_lists dib-box">
116 
+
117 
+          <li class="dib">
118 
+            <span class="icon iconfont icon-note-2"></span>
119 
+            <div class="name">
120 
+              music
121 
+            </div>
122 
+            <div class="code-name">.icon-note-2
123 
+            </div>
124 
+          </li>
125 
+
126 
+          <li class="dib">
127 
+            <span class="icon iconfont icon-note-1"></span>
128 
+            <div class="name">
129 
+              Music-Note 4
130 
+            </div>
131 
+            <div class="code-name">.icon-note-1
132 
+            </div>
133 
+          </li>
134 
+
135 
+        </ul>
136 
+        <div class="article markdown">
137 
+        <h2 id="font-class-">font-class 引用</h2>
138 
+        <hr>
139 
+
140 
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
141 
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
142 
+        <ul>
143 
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
144 
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
145 
+        </ul>
146 
+        <p>使用步骤如下：</p>
147 
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
148 
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
149 
+</code></pre>
150 
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
151 
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
152 
+</code></pre>
153 
+        <blockquote>
154 
+          <p>"
155 
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
156 
+        </blockquote>
157 
+      </div>
158 
+      </div>
159 
+      <div class="content symbol">
160 
+          <ul class="icon_lists dib-box">
161 
+
162 
+            <li class="dib">
163 
+                <svg class="icon svg-icon" aria-hidden="true">
164 
+                  <use xlink:href="#icon-note-2"></use>
165 
+                </svg>
166 
+                <div class="name">music</div>
167 
+                <div class="code-name">#icon-note-2</div>
168 
+            </li>
169 
+
170 
+            <li class="dib">
171 
+                <svg class="icon svg-icon" aria-hidden="true">
172 
+                  <use xlink:href="#icon-note-1"></use>
173 
+                </svg>
174 
+                <div class="name">Music-Note 4</div>
175 
+                <div class="code-name">#icon-note-1</div>
176 
+            </li>
177 
+
178 
+          </ul>
179 
+          <div class="article markdown">
180 
+          <h2 id="symbol-">Symbol 引用</h2>
181 
+          <hr>
182 
+
183 
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
184 
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
185 
+          <ul>
186 
+            <li>支持多色图标了，不再受单色限制。</li>
187 
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
188 
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
189 
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
190 
+          </ul>
191 
+          <p>使用步骤如下：</p>
192 
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
193 
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
194 
+</code></pre>
195 
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
196 
+<pre><code class="language-html">&lt;style&gt;
197 
+.icon {
198 
+  width: 1em;
199 
+  height: 1em;
200 
+  vertical-align: -0.15em;
201 
+  fill: currentColor;
202 
+  overflow: hidden;
203 
+}
204 
+&lt;/style&gt;
205 
+</code></pre>
206 
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
207 
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
208 
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
209 
+&lt;/svg&gt;
210 
+</code></pre>
211 
+          </div>
212 
+      </div>
213 
+
214 
+    </div>
215 
+  </div>
216 
+  <script>
217 
+  $(document).ready(function () {
218 
+      $('.tab-container .content:first').show()
219 
+
220 
+      $('#tabs li').click(function (e) {
221 
+        var tabContent = $('.tab-container .content')
222 
+        var index = $(this).index()
223 
+
224 
+        if ($(this).hasClass('active')) {
225 
+          return
226 
+        } else {
227 
+          $('#tabs li').removeClass('active')
228 
+          $(this).addClass('active')
229 
+
230 
+          tabContent.hide().eq(index).fadeIn()
231 
+        }
232 
+      })
233 
+    })
234 
+  </script>
235 
+</body>
236 
+</html>

+ 25
- 0
public/fonts/iconfont.css Zobrazit soubor 

@@ -0,0 +1,25 @@
1 
+@font-face {
2 
+  font-family: "iconfont"; /* Project id 3600839 */
3 
+  src:
4 
+       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQQAAsAAAAACIQAAAPCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqEWINyATYCJAMMCwgABCAFhGcHORtRB8iemjwtJoiAsmBBgSThgcXD19535+7ue+nNlV7GR2WiIqMCfTwWVarSoBmEAtcUCov/B3Z6SWF4kzT5v/CWsQA31ob5dV8omFbxhNeXvcl+WKiU8ClTEgWs7fNck1fPJ/BBZNXpwwM7H9CBrcuigAbcOPAW8S2yuwKxyGUEWq3ShL00PJwjpXsfdiJl+ExykBTGfYgqRDKCVmlgh2ZFDe1bIF4jIL1MKIBXwenjH8gGMUiqDOYkV3dLOfI7Yzzrw8tuZIP8EzySgOsnVMhYXJk+bputN+JRdBGe1ippgmTWipBGDfz/E3A1cW394ZEEUYOZ3w5miSSdFM/hJrI+zD9r3h02rtGCbwD+Srp+5mtRVHsUFPi8nLTUFGnd/N6dvYD90lq6OYky17ayNB2Tle3M7LI1YMjwyob8Ku8iyHneuTY/3LGCrM4NNS76pX6xddHLO+oX9a1ncprgOpU9cZyXrMfkfCqrgmyWJpVjh2P7Rml6+8pKp9JqTM5o/bLqvGzTLudE+ljqILvSv/TkRKphV6mHrOzHsXgtKt/pVMrfOTvYNEdWNtOzMNI879BXStDnyeC/eK8ixyoZt2LJW0G32qzKw2rWct/DW3hhKSXHS2recjfHgeku2tPm2qEqL2l1JVGW7KfLrwjFw8yh5/uf/a6fcR2tIuQ4pCS9YmllHzOEV+Tj+zxmTpecrnHZ2HqI46qjJ0ZpUGIq7wMCD01ORyYdcsuw+6GmI1DFF0KMknAFpIQpOOpaehKEdoGE0ueA4K85vaVUkAQ1q5TSFaLWlf78qFTIIq0T717molq5gHGUXn560S5njYtevxvRi/0bG2QRkmtilHaR+JpkgbcIGnN3Fg3iMuTT3/4Y/+X6tbyo1F+b2/AB/ggqNWF3QwFYbkSzBJj7k2XuQMKi+ciliutwGxLZI8m3p9Zq6firxdAL19/eBxJzaBZ4GEmTMWTNxmmFNY9Km3XUmh2h1QKDwW36RIuLQgJMy0MI3fqQdPqMrNs6rbBOURl0jlq3X7S6Dorx2kyHnx6hwCiDbwqE+LmOYis4oHpE9WEJVBa6IgU6DoCMpHQ+sUYHaYgOcYlqLz5egcBY1wZDbjG0LBeiY10DJW4Fx7M3k5IKrDpIyy/KjswRJGBIBnx9gBASl0PxiDl7eUdI9WAREJB2NZOAcgh1IEOSNIC2ljqgkiupHOdJ1ROPKbRRIOKyAUPNjCwr6gLR1bUMSMJagnuEPTNShCgQKm3NL7cfbhm0MvvlwGLwMPhQP4xibMr6FhkAAAA=') format('woff2'),
5 
+       url('iconfont.woff?t=1660978973974') format('woff'),
6 
+       url('iconfont.ttf?t=1660978973974') format('truetype'),
7 
+       url('iconfont.svg?t=1660978973974#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-note-2:before {
19 
+  content: "\e6a9";
20 
+}
21 
+
22 
+.icon-note-1:before {
23 
+  content: "\e616";
24 
+}
25 
+

+ 1
- 0
public/fonts/iconfont.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 23
- 0
public/fonts/iconfont.json Zobrazit soubor 

@@ -0,0 +1,23 @@
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": "1251430",
10 
+      "name": "music",
11 
+      "font_class": "note-2",
12 
+      "unicode": "e6a9",
13 
+      "unicode_decimal": 59049
14 
+    },
15 
+    {
16 
+      "icon_id": "6801390",
17 
+      "name": "Music-Note 4",
18 
+      "font_class": "note-1",
19 
+      "unicode": "e616",
20 
+      "unicode_decimal": 58902
21 
+    }
22 
+  ]
23 
+}

+ 23
- 0
public/fonts/iconfont.svg Zobrazit soubor 

@@ -0,0 +1,23 @@
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="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" />
18 
+
19 
+      <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" />
20 
+
21 
+    </font>
22 
+  </defs>
23 
+</svg>

binární
public/fonts/iconfont.ttf Zobrazit soubor


binární
public/fonts/iconfont.woff Zobrazit soubor


binární
public/fonts/iconfont.woff2 Zobrazit soubor


+ 65
- 0
src/components/AudioPlaying.vue Zobrazit soubor 

@@ -0,0 +1,65 @@
1 
+<template>
2 
+  <div class="audio-playing">
3 
+    <i class="iconfont icon-note-1"></i>
4 
+    <i class="iconfont icon-note-2"></i>
5 
+    <i class="iconfont icon-note-1"></i>
6 
+    <i class="iconfont icon-note-2"></i>
7 
+  </div>
8 
+</template>
9 
+
10 
+<style lang="less" scoped>
11 
+.audio-playing {
12 
+  .iconfont {
13 
+    display: inline-block;
14 
+    color: #31473F;
15 
+
16 
+    &:nth-of-type(1) {
17 
+      animation: audio-icon-show 3s linear 0s infinite;
18 
+    }
19 
+    &:nth-of-type(2) {
20 
+      animation: audio-icon-show 3s linear 1s infinite;
21 
+    }
22 
+    &:nth-of-type(3) {
23 
+      animation: audio-icon-show 3s linear 0.5s infinite;
24 
+    }
25 
+    &:nth-of-type(4) {
26 
+      animation: audio-icon-show 3s linear 0.5s infinite;
27 
+    }
28 
+  }
29 
+
30 
+  @keyframes audio-icon-show {
31 
+    0%{
32 
+      opacity: 0;
33 
+      transform: translate3D(0, 0, 0);
34 
+    }
35 
+    15% {
36 
+      opacity: .3;
37 
+      transform: translate3D(-10px, 0, 0) scale(1);
38 
+    }
39 
+    30% {
40 
+      opacity: .5;
41 
+      transform: translate3D(-22px, -6px, 0) scale(1.1);
42 
+    }
43 
+    45% {
44 
+      opacity: .7;
45 
+      transform: translate3D(-32px, -15px, 0) scale(1.3);
46 
+    }
47 
+    60% {
48 
+      opacity: 1;
49 
+      transform: translate3D(-40px, -25px, 0) scale(1.4);
50 
+    }
51 
+    75% {
52 
+      opacity: .7;
53 
+      transform: translate3D(-47px, -32px, 0) scale(1.5);
54 
+    }
55 
+    90% {
56 
+      opacity: .3;
57 
+      transform: translate3D(-56px, -40px, 0) scale(1.8);
58 
+    }
59 
+    100% {
60 
+      opacity: 0;
61 
+      transform: translate3D(-65px, -50px, 0) scale(1.8);
62 
+    }
63 
+  }
64 
+}
65 
+</style>

+ 11
- 2
src/components/Image.vue Zobrazit soubor 

@@ -2,14 +2,16 @@
2 2 
   <div class="img-wrapper">
3 3 
     <img :src="resource.img.src" @load="onLoad" alt="">
4 4 
     <div v-if="resource.playBtn" class="paybtn" :style="btnStyle" @click="onPlayBtn">
5 
+      <AudioPlayingVue :style="iconStyle" />
5 6 
       <audio :src="resource.audio" preload="auto" ref="audioRef" @ended="onEnded"></audio>
6 7 
     </div>
7 8 
   </div>
8 9 
 </template>
9 10
10 11 
 <script setup>
11 
-import { ref, watch } from 'vue';
12 
+import { computed, ref, watch } from 'vue';
12 13 
 import { useModel } from '@zjxpcyc/vue-tiny-store';
14 
+import AudioPlayingVue from './AudioPlaying.vue';
13 15
14 16 
 const [current, updateCurrent] = useModel('audio');
15 17 
 
@@ -18,9 +20,12 @@ const props = defineProps({
18 20 
   default: () => ({})
19 21 
 });
20 22
21 
-const btnStyle = ref();
23 
+const btnStyle = ref({});
22 24 
 const audioRef = ref();
23 25 
 const playState = ref(0);
26 
+const iconStyle = computed(() => ({
27 
+  opacity: playState.value
28 
+}));
24 29
25 30 
 const playAudio = () => {
26 31 
     audioRef.value.play();
 
@@ -84,6 +89,10 @@ const onLoad = (e) => {
84 89 
       max-width: 1px;
85 90 
       max-height: 1px;
86 91 
     }
92 
+
93 
+    .iconfont {
94 
+      color: #fff;
95 
+    }
87 96 
   }
88 97
89 98 
   img {