efats

public/fonts/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe68c;</span>
+                <div class="name">cc-pointer-right</div>
+                <div class="code-name">&amp;#xe68c;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe6a9;</span>
                 <div class="name">music</div>
@@ -85,10 +91,10 @@
 >@font-face {
   font-family: 'iconfont';
   src: 
-       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'),
-       url('iconfont.woff?t=1660978973974') format('woff'),
-       url('iconfont.ttf?t=1660978973974') format('truetype'),
-       url('iconfont.svg?t=1660978973974#iconfont') format('svg');
+       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATwAAsAAAAACegAAASjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqHEIVxATYCJAMQCwoABCAFhGcHTBt9CBHVo9mQ/UzI5HpnDI1iOEcRa3lNNNG+a+Lhcwx9P0kBQDErIMeqkkm42qnN2U1pOj8j+sN36ouKS+sreTU1J5uTzSVwm5POn4A355p6oyPMUM4+efSFtLz0sjwFwA/3S76yBssHIlfdlPjBzqL1wHqRqQOOJpiPcQq1O1UvQIs+jUCtOTaIuy5eQcD3HF+UA5LIjNogzo3n9NR44FLUSg0lVMsq0VULxA+gkL4RceC7//zxn0FwgaQig7GV4xTnJFh+Jvqsh0T7TwPIv7k1Ap2eUIGMqYVp477efAmkUDjli2vLkslWgGrTmBh04Pyznv//Q+6mxNVcrOs/XiIqwRDXU9ySKB8Yx2bHkvNUKaikh8YkPJVVqlFHrALEHRj4fptMiooJV3NeXrKirJAAby7tFsJgk60QCHSxOs390H3LORbrnlkQL/N2aSFSA7Rl5RraPP9RkLDDojL76L0IwqikV1FjDO/V8jBaLUO7mnonlWE66J7VtFq1eDkKNOse80OdynHt3UD8hTCMxnHx6maJhiFfgunUTak6ApXEFEvkH6LQi9o3ZwfblvY2Zgbq5xMTv7F5PjaOkJjLqBULHZPbN2CHzOrUEuhVzAqgSTSYs4JZQfV6aFB5eSijkkCXrF20mDWoc86o90isUFmetANH1a27adpFZbJYWtW4UXsoQ7l9ur9hhsrEuuaGGmeDu4opXR6H/FleooGVYOkDioccHOOs3iBeaeIm3ift8ZRnAp6oqh3qLpRtE4mleqditeuSsvIz3y117c3J1PMdaZVLROewOVQMedz+BHEVno3pwuLIkzbqHDYr7PoHaX+MGKB9WB+ap8s+dcyd+6ruATGCHTvTXv6upOedOHXK6yX1pi0wX5TUKVzyUbwgvNFooSDp2fS+S/H0Cx9dQ0XEq+ndjAyhk2w36WXXaKGIlI/SkKB9erm+x/th6q7r+T99zynluLexx0MDpnpLPr7WU4bGVzyjFgqeocGIg5ukm5/xU7kalAtvwbn44+5Qom1kQ8TseXwyw7xk7FUqlNK58Bq55AONB54KVKPce61z3Hzxdyj/Gg83MVS58b1yXQdMwEHvZ6XpaQk9++jq9V9Ump0SHUaNJucD6ZtyqFPnnmMB282Ze6/mdTXeOs/1umYO8gDwdT2vZGWf9jB3kjSiyxny5h84zan0o/ZYfquvXHUPv+6f+jMqc34tF8Ak8AdxYPb/JokCEYvqoZQyvs39h60fQHk/RdSqxQ8Wp9XTIaRtcDahWlsMSZU+yKoNoApuAirUWYBK1dag1iTnteu0yQOSKNzAiBMEQrMeSBr9hKzZFqrg9qFCp+dQqdlfqHVC4N1cHXMkzJFRCVrQf4iGNmfJxB/2hv5dFBcFXsh7pD6Yhykbu+KG3McS+8cvIg4cU4WLtDcshaAxJTQyBJG2jqMru5HBUO2OjErQAv0H0dDmXGRJv74b+ndRDKJeRt45iw0PZoMJQF3FG1R1IaP3j1+IOD7LMVVwUY1YzDCBVj4poZFB6BBsq5EhOVQ8TC+tt7cNahlLl0iRo0SF5ivTN4qHtwr3HH2Qw0aC/eKZ5q4DAA==') format('woff2'),
+       url('iconfont.woff?t=1661220235419') format('woff'),
+       url('iconfont.ttf?t=1661220235419') format('truetype'),
+       url('iconfont.svg?t=1661220235419#iconfont') format('svg');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -114,6 +120,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-cc-pointer-right"></span>
+            <div class="name">
+              cc-pointer-right
+            </div>
+            <div class="code-name">.icon-cc-pointer-right
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-note-2"></span>
             <div class="name">
@@ -159,6 +174,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cc-pointer-right"></use>
+                </svg>
+                <div class="name">cc-pointer-right</div>
+                <div class="code-name">#icon-cc-pointer-right</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-note-2"></use>

public/fonts/iconfont.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3600839 */
   src: 
-       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'),
-       url('iconfont.woff?t=1660978973974') format('woff'),
-       url('iconfont.ttf?t=1660978973974') format('truetype'),
-       url('iconfont.svg?t=1660978973974#iconfont') format('svg');
+       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATwAAsAAAAACegAAASjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqHEIVxATYCJAMQCwoABCAFhGcHTBt9CBHVo9mQ/UzI5HpnDI1iOEcRa3lNNNG+a+Lhcwx9P0kBQDErIMeqkkm42qnN2U1pOj8j+sN36ouKS+sreTU1J5uTzSVwm5POn4A355p6oyPMUM4+efSFtLz0sjwFwA/3S76yBssHIlfdlPjBzqL1wHqRqQOOJpiPcQq1O1UvQIs+jUCtOTaIuy5eQcD3HF+UA5LIjNogzo3n9NR44FLUSg0lVMsq0VULxA+gkL4RceC7//zxn0FwgaQig7GV4xTnJFh+Jvqsh0T7TwPIv7k1Ap2eUIGMqYVp477efAmkUDjli2vLkslWgGrTmBh04Pyznv//Q+6mxNVcrOs/XiIqwRDXU9ySKB8Yx2bHkvNUKaikh8YkPJVVqlFHrALEHRj4fptMiooJV3NeXrKirJAAby7tFsJgk60QCHSxOs390H3LORbrnlkQL/N2aSFSA7Rl5RraPP9RkLDDojL76L0IwqikV1FjDO/V8jBaLUO7mnonlWE66J7VtFq1eDkKNOse80OdynHt3UD8hTCMxnHx6maJhiFfgunUTak6ApXEFEvkH6LQi9o3ZwfblvY2Zgbq5xMTv7F5PjaOkJjLqBULHZPbN2CHzOrUEuhVzAqgSTSYs4JZQfV6aFB5eSijkkCXrF20mDWoc86o90isUFmetANH1a27adpFZbJYWtW4UXsoQ7l9ur9hhsrEuuaGGmeDu4opXR6H/FleooGVYOkDioccHOOs3iBeaeIm3ift8ZRnAp6oqh3qLpRtE4mleqditeuSsvIz3y117c3J1PMdaZVLROewOVQMedz+BHEVno3pwuLIkzbqHDYr7PoHaX+MGKB9WB+ap8s+dcyd+6ruATGCHTvTXv6upOedOHXK6yX1pi0wX5TUKVzyUbwgvNFooSDp2fS+S/H0Cx9dQ0XEq+ndjAyhk2w36WXXaKGIlI/SkKB9erm+x/th6q7r+T99zynluLexx0MDpnpLPr7WU4bGVzyjFgqeocGIg5ukm5/xU7kalAtvwbn44+5Qom1kQ8TseXwyw7xk7FUqlNK58Bq55AONB54KVKPce61z3Hzxdyj/Gg83MVS58b1yXQdMwEHvZ6XpaQk9++jq9V9Ump0SHUaNJucD6ZtyqFPnnmMB282Ze6/mdTXeOs/1umYO8gDwdT2vZGWf9jB3kjSiyxny5h84zan0o/ZYfquvXHUPv+6f+jMqc34tF8Ak8AdxYPb/JokCEYvqoZQyvs39h60fQHk/RdSqxQ8Wp9XTIaRtcDahWlsMSZU+yKoNoApuAirUWYBK1dag1iTnteu0yQOSKNzAiBMEQrMeSBr9hKzZFqrg9qFCp+dQqdlfqHVC4N1cHXMkzJFRCVrQf4iGNmfJxB/2hv5dFBcFXsh7pD6Yhykbu+KG3McS+8cvIg4cU4WLtDcshaAxJTQyBJG2jqMru5HBUO2OjErQAv0H0dDmXGRJv74b+ndRDKJeRt45iw0PZoMJQF3FG1R1IaP3j1+IOD7LMVVwUY1YzDCBVj4poZFB6BBsq5EhOVQ8TC+tt7cNahlLl0iRo0SF5ivTN4qHtwr3HH2Qw0aC/eKZ5q4DAA==') format('woff2'),
+       url('iconfont.woff?t=1661220235419') format('woff'),
+       url('iconfont.ttf?t=1661220235419') format('truetype'),
+       url('iconfont.svg?t=1661220235419#iconfont') format('svg');
 }
 
 .iconfont {
@@ -15,6 +15,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-cc-pointer-right:before {
+  content: "\e68c";
+}
+
 .icon-note-2:before {
   content: "\e6a9";
 }

public/fonts/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "372236",
+      "name": "cc-pointer-right",
+      "font_class": "cc-pointer-right",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
     {
       "icon_id": "1251430",
       "name": "music",

public/fonts/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="cc-pointer-right" unicode="&#59020;" d="M630.715 43.43c0-51.942-42.282-94.225-94.225-94.225-140.924 0-258.842 23.372-340.946 67.587-41.521 22.406-73.727 49.874-95.789 81.712-22.842 32.941-34.39 69.84-34.39 109.821l0 235.563c0 5.153 1.472 33.079 29.86 73.429 36.185 51.438 99.377 99.93 187.713 144.144 187.6 93.811 249.18 123.9 252.033 125.281 45.64 22.774 103.565 6.488 129.19-36.255 12.515-20.889 15.921-45.364 9.526-68.876-6.58-24.108-22.499-44.214-44.906-56.452l-109.913-63.446 347.364 0c51.988 0 94.224-42.281 94.224-94.224 0-51.944-42.236-94.225-94.224-94.225l-154.037 0c8.097-13.849 12.698-29.997 12.698-47.114 0-41.039-26.408-76.004-63.078-88.887 10.076-15.045 15.965-33.034 15.965-52.45 0-41.04-26.407-76.006-63.078-88.887 10.076-15.047 15.966-33.034 15.966-52.45l0.046-0.048zM217.767 58.291c75.293-40.534 185.483-61.974 318.631-61.974 25.948 0 47.113 21.165 47.113 47.113s-21.165 47.112-47.113 47.112l-23.557 0c-12.997 0-23.557 10.538-23.557 23.557 0 13.023 10.558 23.558 23.557 23.558l70.67 0c25.947 0 47.113 21.165 47.113 47.113s-21.166 47.113-47.113 47.113l-23.557 0c-12.997 0-23.558 10.535-23.558 23.555s10.559 23.558 23.558 23.558l70.67 0c25.948 0 47.112 21.164 47.112 47.112 0 25.949-21.164 47.112-47.112 47.112l-70.67 0c-12.997 0-23.558 10.583-23.558 23.558 0 12.976 10.559 23.557 23.558 23.557l306.231 0c25.949 0 47.113 21.164 47.113 47.114 0 25.947-21.164 47.112-47.113 47.112l-368.042 0c-31.47 0-49.85 9.294-54.497 27.651-4.669 18.356 6.855 35.242 34.322 50.286l127.444 73.523c0.138 0.092 0.321 0.184 0.506 0.276 11.089 6.074 19.001 15.92 22.176 27.697 2.991 10.996 1.472 22.452-4.417 32.253-13.066 21.763-44.122 30.135-67.816 18.312-0.046-0.046-0.093-0.046-0.184-0.093-0.575-0.276-60.731-29.629-251.735-125.096-97.423-48.677-144.443-94.502-166.779-124.314-22.383-29.905-24.591-49.781-24.729-51.575l0-235.104c0-77.11 57.281-124.222 105.381-150.079l-0.046 0z"  horiz-adv-x="1024" />
+      
       <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" />
       
       <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" />

src/App.vue

@@ -44,7 +44,7 @@ onMounted(() => {
 <template>
   <Loader :loading="loading" :percent="percent" />
   <ScrollDown />
-  <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
+  <Image v-for="(res, index) in resources" :key="res.image" :resource="res" :index="index"></Image>
   <img :src="fixedLogo" alt="" class="fixed-log" :class="{ 'hidden': fixedLogoHidden }" @click="onClick">
 </template>
 

src/components/Image.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="img-wrapper">
     <img :src="resource.img.src" @load="onLoad" alt="">
+    <div v-if="showGesture" class="gesture" :style="gestureStyle"><i class="iconfont icon-cc-pointer-right"></i></div>
     <div v-if="resource.playBtn" class="paybtn" :style="btnStyle" @click="onPlayBtn">
       <AudioPlayingVue :style="iconStyle" />
       <audio :src="resource.audio" preload="auto" ref="audioRef" @ended="onEnded"></audio>
@@ -21,11 +22,14 @@ const props = defineProps({
     default: () => ({})
   },
   showFog: Boolean,
+  index: Number,
 });
 
 const btnStyle = ref({});
+const gestureStyle = ref({});
 const audioRef = ref();
 const playState = ref(0);
+const showGesture = ref(props.resource.showGesture);
 const iconStyle = computed(() => ({
   opacity: playState.value
 }));
@@ -34,6 +38,11 @@ const playAudio = () => {
     audioRef.value.play();
     playState.value = 1;
     updateCurrent(props.resource.audio);
+
+    // 播放一次, 立即消失
+    if (showGesture.value) {
+      showGesture.value = false;
+    }
 }
 
 const stopAudio = () => {
@@ -64,15 +73,22 @@ const onEnded = () => {
 
 // 图片加载完成, 设置播放器
 const onLoad = (e) => {
-  if (!props.resource.playBtn) return;
-
-  const { pos } = props.resource.playBtn;
-  const { width, height, naturalHeight, naturalWidth } = e.target;
-  const d = 32; // 宽度一半
-  const x = width * pos[0] / naturalWidth - d;
-  const y = height * pos[1] / naturalHeight - d;
-
-  btnStyle.value = { left: `${x}px`, top: `${y}px` }
+  if (props.resource.playBtn) {
+    const { pos } = props.resource.playBtn;
+    const { width, height, naturalHeight, naturalWidth } = e.target;
+    const d = 32; // 宽度一半
+    const centerX = width * pos[0] / naturalWidth;
+    const centerY = height * pos[1] / naturalHeight;
+    const x = centerX - d;
+    const y = centerY - d;
+    btnStyle.value = { left: `${x}px`, top: `${y}px` }
+
+    // 如果显示引导手势, 那么计算坐标
+    if (showGesture.value) {
+      const d2 = 12 // 字体大小一半
+      gestureStyle.value = { left: `${x - d2 * 2}px`, top: `${centerY - d2}px` }
+    }
+  }
 }
 
 </script>
@@ -82,6 +98,27 @@ const onLoad = (e) => {
   margin-top: -0.5px; // 解决 iphone13 白边问题
   position: relative;
 
+  .gesture {
+    position: absolute;
+    z-index: 9;
+    animation: gestureAnimation 1.6s ease-in-out infinite;
+    
+    .iconfont {
+      font-size: 24px;
+    }
+  }
+
+  @keyframes gestureAnimation {
+    from {
+      opacity: 0;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(12px);
+    }
+  }
+
   .paybtn {
     position: absolute;
     width: 64px;

src/utils/resources.js

@@ -153,6 +153,7 @@ export const resources = [
     playBtn: {
       pos: [616, 932],
     },
+    showGesture: true,
     audio: audios[0],
   },
   {