m534ctfno
/
vue-shop-admin-work
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mhx

Browse Source
马海馨 8 months ago
parent 0b9c0780c6
commit add87e6288
2 changed files with 235 additions and 59 deletions
Show Stats Download Patch File Download Diff File

201
src/assets/fonts/demo_symbol.html
Unescape View File

@ -37,95 +37,174 @@
</head>
<body>
<!-- 这是HTML文档的body部分，用于包含网页的主要内容 -->
<div class="main markdown">
<!-- 这是一个div元素，用于包含主要内容，并应用了'main'和'markdown'两个CSS类 -->
<h1>IconFont 图标</h1>
<!-- 这是一个h1元素，用于显示页面或部分的标题，这里显示的是"IconFont 图标" -->
<ul class="icon_lists clear">
<!-- 这是一个无序列表（ul），用于显示图标列表，并应用了'icon_lists'和'clear'两个CSS类 -->
<li>
<!-- 列表项（li）的开始，用于包含单个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 这是一个svg元素，用于嵌入矢量图标，并应用了'icon'CSS类，aria-hidden属性设置为true表示这个元素对于屏幕阅读器是隐藏的 -->
<use xlink:href="#icon-showpassword"></use>
<!-- use元素用于引用SVG定义中的某个元素，这里引用的是id为"icon-showpassword"的图标 -->
</svg>
<div class="name">show-password </div>
<!-- 这是一个div元素，用于显示图标的名称，并应用了'name'CSS类 -->
<div class="fontclass">#icon-showpassword</div>
<!-- 这是一个div元素，用于显示图标的fontclass名称，通常用于CSS或JavaScript中引用图标 -->
</li>
<li>
<!-- 另一个列表项的开始，用于包含第二个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-user"></use>
<!-- 引用id为"icon-user"的图标 -->
</svg>
<div class="name">user</div>
<!-- 显示图标的名称 -->
<div class="fontclass">#icon-user</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<!-- 第三个列表项的开始，用于包含第三个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-users"></use>
<!-- 引用id为"icon-users"的图标 -->
</svg>
<div class="name">users</div>
<!-- 显示图标的名称 -->
<div class="fontclass">#icon-users</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<!-- 第四个列表项的开始，用于包含第四个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-3702mima"></use>
<!-- 引用id为"icon-3702mima"的图标 -->
</svg>
<div class="name">password-b</div>
<!-- 显示图标的名称 -->
<div class="fontclass">#icon-3702mima</div>
<!-- 显示图标的fontclass名称 -->
</li>
<!-- 列表项（li）的结束 -->
</ul>
<!-- 无序列表（ul）的结束 -->
</div>
<!-- div元素的结束 -->
</body>
<!-- HTML文档的body部分的结束 -->
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangpin"></use>
</svg>
<div class="name">06商品</div>
<div class="fontclass">#icon-shangpin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-danju"></use>
</svg>
<div class="name">25单据</div>
<div class="fontclass">#icon-danju</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tijikongjian"></use>
</svg>
<div class="name">28体积、空间</div>
<div class="fontclass">#icon-tijikongjian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-morentouxiang"></use>
</svg>
<div class="name">225默认头像</div>
<div class="fontclass">#icon-morentouxiang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baobiao"></use>
</svg>
<div class="name">406报表</div>
<div class="fontclass">#icon-baobiao</div>
</li>
<li>
<!-- 这是一个列表项（li）元素，用于包含单个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 这是一个svg元素，用于嵌入矢量图标 -->
<!-- class="icon" 表示这个svg元素应用了'icon'CSS类 -->
<!-- aria-hidden="true" 表示这个svg元素对于屏幕阅读器是隐藏的，主要用于提高无障碍性 -->
<use xlink:href="#icon-shangpin"></use>
<!-- use元素用于引用SVG定义中的某个元素 -->
<!-- xlink:href="#icon-shangpin" 表示引用id为"icon-shangpin"的图标 -->
</svg>
<div class="name">06商品</div>
<!-- 这是一个div元素，用于显示图标的名称 -->
<!-- class="name" 表示这个div元素应用了'name'CSS类 -->
<div class="fontclass">#icon-shangpin</div>
<!-- 这是一个div元素，用于显示图标的fontclass名称 -->
<!-- class="fontclass" 表示这个div元素应用了'fontclass'CSS类 -->
<!-- #icon-shangpin 是图标的fontclass名称，通常用于CSS或JavaScript中引用图标 -->
</li>
<li>
<!-- 这是另一个列表项（li）元素，用于包含第二个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-danju"></use>
<!-- 引用id为"icon-danju"的图标 -->
</svg>
<div class="name">25单据</div>
<!-- 显示图标的名称 -->
<div class="fontclass">#icon-danju</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<!-- 这是第三个列表项（li）元素，用于包含第三个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-tijikongjian"></use>
<!-- 引用id为"icon-tijikongjian"的图标 -->
</svg>
<div class="name">28体积、空间</div>
<!-- 显示图标的名称，这里包含了中文描述和英文（可能是缩写或翻译） -->
<div class="fontclass">#icon-tijikongjian</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<!-- 这是第四个列表项（li）元素，用于包含第四个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-morentouxiang"></use>
<!-- 引用id为"icon-morentouxiang"的图标 -->
</svg>
<div class="name">225默认头像</div>
<!-- 显示图标的名称，这里的数字可能是图标的编号或顺序 -->
<div class="fontclass">#icon-morentouxiang</div>
<!-- 显示图标的fontclass名称 -->
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lock_fill"></use>
</svg>
<div class="name">lock_fill</div>
<div class="fontclass">#icon-lock_fill</div>
</li>
</ul>
<!-- 这是一个列表项（li）元素，用于包含单个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 这是一个svg元素，用于嵌入矢量图标 -->
<!-- class="icon" 表示这个svg元素应用了'icon'CSS类，用于设置图标的样式 -->
<!-- aria-hidden="true" 表示这个svg元素对于屏幕阅读器是隐藏的，主要用于提高网页的无障碍性 -->
<use xlink:href="#icon-baobiao"></use>
<!-- use元素用于引用SVG定义中的某个元素 -->
<!-- xlink:href="#icon-baobiao" 表示引用id为"icon-baobiao"的图标 -->
</svg>
<div class="name">406报表</div>
<!-- 这是一个div元素，用于显示图标的名称或描述 -->
<!-- class="name" 表示这个div元素应用了'name'CSS类，用于设置文本样式 -->
<div class="fontclass">#icon-baobiao</div>
<!-- 这是一个div元素，用于显示图标的fontclass名称 -->
<!-- class="fontclass" 表示这个div元素应用了'fontclass'CSS类，用于设置文本样式 -->
<!-- #icon-baobiao 是图标的fontclass名称，通常用于CSS或JavaScript中引用图标 -->
</li>
<li>
<!-- 这是另一个列表项（li）元素，用于包含另一个图标的显示信息 -->
<svg class="icon" aria-hidden="true">
<!-- 同上，用于嵌入矢量图标 -->
<use xlink:href="#icon-lock_fill"></use>
<!-- 引用id为"icon-lock_fill"的图标 -->
</svg>
<div class="name">lock_fill</div>
<!-- 显示图标的名称或描述，这里的名称与图标的id相同，便于识别 -->
<div class="fontclass">#icon-lock_fill</div>
<!-- 显示图标的fontclass名称，与图标的id相同 -->
</li>
</ul>
<!-- 这是ul元素的结束标签，表示列表的结束 -->
<h2 id="symbol-">symbol引用</h2>
<hr>
<h2 id="symbol-">symbol引用</h2>
<!-- 这是一个h2元素，用于显示一个二级标题 -->
<!-- id="symbol-" 是这个h2元素的唯一标识符，可能用于CSS或JavaScript中定位或操作该元素 -->
<!-- 标题内容为"symbol引用"，表示接下来的内容将介绍如何使用symbol引用图标 -->
<hr>
<!-- 这是一个hr元素，用于在视觉上分隔内容 -->
<!-- 它通常用于分隔不同的主题或章节，使页面内容更加清晰易读 -->
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
@ -148,10 +227,24 @@
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
&lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
</span></code></pre>
</div>
<body>
<!-- 这是一个包含JavaScript代码块的pre标签，用于在网页上显示格式化的代码 -->
<pre>
<!-- 使用hljs（可能是highlight.js）库对JavaScript代码进行高亮显示 -->
<code class="lang-js hljs javascript">
<!-- SVG标签的开始，用于在网页中嵌入矢量图形 -->
&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml">
<!--
use标签用于引用SVG定义中的某个元素，这里引用的是id为"icon-xxx"的元素。
xlink:href属性指定了要引用的元素的URL，但在这里使用的是ID选择器语法。
-->
&lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>
<!-- SVG标签的结束 -->
&lt;<span class="hljs-regexp">/svg&gt;</span>
</code>
<!-- code标签的结束 -->
</pre>
<!-- body标签的结束 -->
</body>
</html>

93
src/assets/fonts/iconfont.svg
Unescape View File

@ -279,13 +279,96 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
<!-- 表示路径的结束，但这里并没有回到起始点，因为是一个开放的-->
<glyph glyph-name="morentouxiang" unicode="&#59593;" d="M512 832C264.8 832 64 631.2 64 384s200.8-448 448-448 448 200.8 448 448S759.2 832 512 832zM384.8 520c4 64 56 115.2 120 119.2 74.4 4 135.2-55.2 135.2-128 0-70.4-57.6-128-128-128-73.6 0-132 62.4-127.2 136.8zM768 149.6c0-12-9.6-21.6-21.6-21.6H278.4c-12 0-21.6 9.6-21.6 21.6v64c0 84.8 170.4 128 255.2 128 84.8 0 255.2-42.4 255.2-128l0.8-64z" horiz-adv-x="1024" />
<glyph glyph-name="morentouxiang" unicode="&#59593;"
d="M512 832
<!-- 设置圆心的x坐标，并定义该点为头像的顶部 -->
C264.8 832
<!-- 从圆心向左绘制一条贝塞尔曲线到左侧的点，该点位于顶部 -->
64 631.2
<!-- 从左侧的点向下绘制一条直线到左侧的底部点 -->
64 384
<!-- 从左侧的底部点向右绘制一条水平直线到右侧的底部点 -->
s200.8-448
<!-- 从右侧的底部点向上绘制一条对称的曲线到右侧的中间点 -->
448-448
<!-- 从右侧的中间点向左绘制一条直线到圆心的下侧点 -->
448 200.8
<!-- 从圆心的下侧点向上绘制一条直线到圆心的上侧点 -->
448 448
<!-- 从圆心的上侧点向右绘制一条直线到右侧的顶部点 -->
S759.2 832
<!-- 从右侧的顶部点向左绘制一条对称的曲线回到圆心 -->
512 832z
<!-- 关闭路径，形成一个完整的圆形头像 -->
M384.8 520
<!-- 设置新路径的起点，准备绘制眼睛或脸部特征 -->
c4 64
<!-- 从起点向右上方绘制一条贝塞尔曲线，模拟眼睛或脸部特征的上边缘 -->
56 115.2
<!-- 从上边缘的点继续向右上方绘制一条更长的贝塞尔曲线 -->
120 119.2
<!-- 到达眼睛或脸部特征的最右侧点 -->
74.4 4
<!-- 从最右侧点向左下方绘制一条较短的贝塞尔曲线，形成眼睛或脸部特征的下边缘的一部分 -->
135.2-55.2
<!-- 从下边缘的点继续向左下方绘制一条贝塞尔曲线，模拟眼睛或脸部的凹陷部分 -->
135.2-128
<!-- 到达眼睛或脸部特征的底部点 -->
0-70.4
<!-- 从底部点向上绘制一条垂直直线，模拟眼睛或脸部特征的垂直高度 */
-57.6-128
<!-- 从垂直高度的顶部点向左下方绘制一条直线，模拟另一只眼睛或脸部特征的左侧边缘 */
-128-128
<!-- 到达另一只眼睛或脸部特征的底部点 */
-73.6 0
<!-- 从另一只眼睛或脸部特征的底部点向右上方绘制一条直线，模拟脸部下半部分的宽度 */
-132 62.4
<!-- 从脸部下半部分的右侧点向左上方绘制一条贝塞尔曲线，模拟下巴的轮廓 */
-127.2 136.8z
<!-- 到达下巴的顶部点，并关闭路径，形成完整的眼睛或脸部特征 */
M768 149.6
<!-- 设置新路径的起点，准备绘制嘴巴或下巴下方的装饰物 -->
c0-12
<!-- 从起点向下绘制一条垂直直线，模拟嘴巴或下巴下方的装饰物的上边缘 */
-9.6-21.6
<!-- 从上边缘的点向左下方绘制一条直线，模拟装饰物的左侧边缘 */
-21.6-21.6
<!-- 到达装饰物的底部点 */
H278.4
<!-- 从底部点向左水平绘制一条直线，模拟装饰物的水平宽度 */
c-12 0
<!-- 从水平宽度的左侧点向右绘制一条垂直直线，模拟装饰物的右侧边缘 */
-21.6 9.6
<!-- 从右侧边缘的点向上绘制一条直线，模拟装饰物的下边缘 */
-21.6 21.6
<!-- 到达装饰物的顶部点 */
v64
<!-- 从顶部点向上垂直绘制一条直线，模拟装饰物的高度 */
c0 84.8
<!-- 从装饰物的高度的顶部点向右绘制一条水平直线，模拟下巴下方的空白区域 */
170.4 128
<!-- 从空白区域的右侧点向右上方绘制一条直线，模拟下巴下方的装饰物的右侧边缘 */
255.2 128
<!-- 到达装饰物的最右侧点 */
84.8 0
<!-- 从装饰物的最右侧点向左绘制一条水平直线，模拟装饰物的水平宽度 */
255.2-42.4
<!-- 从水平宽度的左侧点向左下方绘制一条直线，模拟下巴下方的空白区域的左侧边缘 */
255.2-128
<!-- 到达空白区域的底部点 */
l0.8-64z
<!-- 从空白区域的底部点向左下方绘制一条直线，并关闭路径，完成装饰物的绘制 */
horiz-adv-x="1024" />
<!-- 设置水平方向上的高级宽度为1024 -->
<glyph glyph-name="baobiao" unicode="&#59650;" d="M960 224V736c0 17.6-14.4 32-32 32H544V832h-64v-64H96c-17.6 0-32-14.4-32-32v-512c0-17.6 14.4-32 32-32h384v-50.4l-152.8-89.6 32-56 144 84h19.2l144-84 32 56L544 141.6V192h384c17.6 0 32 14.4 32 32zM790.4 640l41.6-48.8-316.8-270.4L352 458.4 233.6 359.2 192.8 408l160 133.6 163.2-137.6L790.4 640z" horiz-adv-x="1024" />
<glyph glyph-name="baobiao" unicode="&#59650;" d="M960 224V736c0 17.6-14.4 32-32 32H544V832h-64v-64H96c-17.6 0-32-14.4-32-32v-512c0-17.6 14.4-32 32-32h384v-50.4l-152.8-89.6 32-56 144 84h19.2l144-84 32 56L544 141.6V192h384c17.6 0 32 14.4 32 32z <!-- 绘制宝表图标的外框 -->
M790.4 640l41.6-48.8-316.8-270.4L352 458.4 233.6 359.2 192.8 408l160 133.6 163.2-137.6L790.4 640z" <!-- 绘制宝表图标内部的装饰线条 -->
horiz-adv-x="1024" /> <!-- 水平方向上的高级宽度设置为1024 -->
<glyph glyph-name="lock_fill" unicode="&#59145;" d="M394.304 579.392A124.672 124.672 0 0 0 518.72 704a124.704 124.704 0 0 0 124.48-124.608V480h-248.896V579.392zM544 192a32 32 0 0 0-64 0v128a32 32 0 0 0 64 0v-128z m256.256 288H707.2V579.392A188.736 188.736 0 0 1 518.72 768c-103.904 0-188.416-84.608-188.416-188.608V480h-106.56A64 64 0 0 1 160 415.904v-319.84A64 64 0 0 1 223.744 32h576.512A64 64 0 0 1 864 96.064v319.84A64 64 0 0 1 800.256 480z" horiz-adv-x="1024" />
<glyph glyph-name="lock_fill" unicode="&#59145;" d="M394.304 579.392A124.672 124.672 0 0 0 518.72 704a124.704 124.704 0 0 0 124.48-124.608V480h-248.896V579.392z <!-- 绘制锁的上半部分包括锁体和锁舌 -->
M544 192a32 32 0 0 0-64 0v128a32 32 0 0 0 64 0v-128z <!-- 绘制锁的中间部分，即锁芯 -->
m256.256 288H707.2V579.392A188.736 188.736 0 0 1 518.72 768c-103.904 0-188.416-84.608-188.416-188.608V480h-106.56A64 64 0 0 1 160 415.904v-319.84A64 64 0 0 1 223.744 32h576.512A64 64 0 0 1 864 96.064v319.84A64 64 0 0 1 800.256 480z" <!-- 绘制锁的下半部分，包括锁链 -->
horiz-adv-x="1024" /> <!-- 水平方向上的高级宽度设置为1024 -->

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Write Preview
Loading…
Cancel
Save