From 3cad6ea220ff4d0bd1123d41bec095f5daa55b3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E6=B5=B7=E9=A6=A8?= <2094472715@qq.com>
Date: Mon, 16 Dec 2024 20:30:43 +0800
Subject: [PATCH] mhx

---
 db/mydb.sql                        |  92 +++++++++-----
 src/assets/fonts/demo_unicode.html | 187 +++++++++++++++++++++--------
 2 files changed, 197 insertions(+), 82 deletions(-)

diff --git a/db/mydb.sql b/db/mydb.sql
index b7c10d9..b5371dc 100644
--- a/db/mydb.sql
+++ b/db/mydb.sql
@@ -265,44 +265,76 @@ INSERT INTO `sp_attribute` VALUES ('119', '材质-商品尺寸', '1238', 'only',
 INSERT INTO `sp_attribute` VALUES ('120', '颜色', '1238', 'many', 'list', '乐迪包裹造型挎包,乐迪圆形挎包,乐迪蛋壳背包,乐迪造型斗篷,小爱圆形挎包,小爱蛋壳背包', null);
 INSERT INTO `sp_attribute` VALUES ('121', '主体-品牌', '1239', 'only', 'manual', '', null);
 INSERT INTO `sp_attribute` VALUES ('122', '规格-包装尺寸', '1239', 'only', 'manual', '900*360*200毫米', null);
+-- 向sp_attribute表中插入一条新记录，设置属性ID为123，属性名称为'颜色'，所属商品ID为1239，属性类型为'many'，表示可以有多个值，
+-- 属性输入方式为'list'，即列表选择，属性值为多个卡通小鹿的颜色选项，最后一个字段为null，可能表示没有额外的备注或默认值
 INSERT INTO `sp_attribute` VALUES ('123', '颜色', '1239', 'many', 'list', '卡通小鹿粉蓝色,卡通小鹿黄绿色,卡通小鹿蓝桔色,卡通小鹿紫玫色,卡通小鹿粉玫色,卡通小鹿绿橘色', null);
+
+-- 插入一条新记录，设置属性ID为124，属性名称为'主体-品牌'，所属商品ID为123，属性类型为'only'，表示只能有一个值，
+-- 属性输入方式为'manual'，即手动输入，属性值为空，可能表示该属性在后续操作中会被填充或该商品没有特定的品牌信息
 INSERT INTO `sp_attribute` VALUES ('124', '主体-品牌', '123', 'only', 'manual', '', null);
+
+-- 插入一条新记录，设置属性ID为125，属性名称为'规格-规格'，所属商品ID为123，属性类型为'only'，输入方式为'manual'，
+-- 属性值为'250ml'，表示该商品的规格为250毫升
 INSERT INTO `sp_attribute` VALUES ('125', '规格-规格', '123', 'only', 'manual', '250ml', null);
+
+-- 插入一条新记录，设置属性ID为126，属性名称为'功效-功效'，所属商品ID为123，属性类型为'only'，输入方式为'manual'，
+-- 属性值为'清洁,淡化异味'，表示该商品具有清洁和淡化异味的效果
 INSERT INTO `sp_attribute` VALUES ('126', '功效-功效', '123', 'only', 'manual', '清洁,淡化异味', null);
+
+-- 插入一条新记录，设置属性ID为127，属性名称为'香型'，所属商品ID为123，属性类型为'many'，输入方式为'list'，
+-- 属性值为多个香型选项，表示该商品有多种香型可供选择
 INSERT INTO `sp_attribute` VALUES ('127', '香型', '123', 'many', 'list', '洋甘菊,百合,蔓越莓', null);
-INSERT INTO `sp_attribute` VALUES ('128', '主体-品牌', '1240', 'only', 'manual', '', null);
-INSERT INTO `sp_attribute` VALUES ('129', '规格-重量', '1240', 'only', 'manual', '0.8克', null);
-INSERT INTO `sp_attribute` VALUES ('130', '颜色', '1240', 'many', 'list', '30个6.5CM海洋球,50个6.5CM海洋球,100个6.5CM海洋球', null);
-INSERT INTO `sp_attribute` VALUES ('131', '主体-品牌', '1241', 'only', 'manual', '', null);
-INSERT INTO `sp_attribute` VALUES ('132', '材质-包装尺寸', '1241', 'only', 'manual', '630x310x380毫米', null);
-INSERT INTO `sp_attribute` VALUES ('133', '颜色', '1241', 'many', 'list', '不倒翁979,健儿球 929,快乐摇马987,摇铃939,欢乐园717,跳跳椅696', null);
-INSERT INTO `sp_attribute` VALUES ('134', '主体-品牌', '1242', 'only', 'manual', '', null);
-INSERT INTO `sp_attribute` VALUES ('135', '特性-包装尺寸', '1242', 'only', 'manual', '185*3*265毫米', null);
-INSERT INTO `sp_attribute` VALUES ('136', '主体-品牌', '1243', 'only', 'manual', '', null);
-INSERT INTO `sp_attribute` VALUES ('137', '规格-包装尺寸', '1243', 'only', 'manual', '300*90*175毫米', null);
-INSERT INTO `sp_attribute` VALUES ('138', '主体-品牌', '1244', 'only', 'manual', '', null);
-INSERT INTO `sp_attribute` VALUES ('139', '材质-实物尺寸', '1244', 'only', 'manual', '60*38*120+76厘米', null);
-INSERT INTO `sp_attribute` VALUES ('140', '颜色', '1244', 'many', 'list', '童话游戏屋,投手球池,热带雨林帐篷三件套,星月球池,1.2米圆点球池,海豚投篮球池球池,萤火虫投篮球池,热带雨林隧道', null);
+
+-- 后续插入语句类似，均为向sp_attribute表中添加新记录，以下是对每条记录的简要说明：
+
+-- ID 128: 为商品ID 1240设置'主体-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
+-- ID 129: 为商品ID 1240设置'规格-重量'属性，属性类型为'only'，输入方式为'manual'，属性值为'0.8克'
+-- ID 130: 为商品ID 1240设置'颜色'属性，属性类型为'many'，输入方式为'list'，属性值为多个海洋球选项
+-- ID 131: 为商品ID 1241设置'主体-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
+-- ID 132: 为商品ID 1241设置'材质-包装尺寸'属性，属性类型为'only'，输入方式为'manual'，属性值为'630x310x380毫米'
+-- ID 133: 为商品ID 1241设置'颜色'属性，属性类型为'many'，输入方式为'list'，属性值为多个玩具选项
+-- ID 134: 为商品ID 1242设置'主体-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
+-- ID 135: 为商品ID 1242设置'特性-包装尺寸'属性，属性类型为'only'，输入方式为'manual'，属性值为'185*3*265毫米'
+-- ID 136: 为商品ID 1243设置'主体-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
+-- ID 137: 为商品ID 1243设置'规格-包装尺寸'属性，属性类型为'only'，输入方式为'manual'，属性值为'300*90*175毫米'
+-- ID 138: 为商品ID 1244设置'主体-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
+-- ID 139: 为商品ID 1244设置'材质-实物尺寸'属性，属性类型为'only'，输入方式为'manual'，属性值为'60*38*120+76厘米'
+-- ID 140: 为商品ID 1244设置'颜色'属性，属性类型为'many'，输入方式为'list'，属性值为多个帐篷或球池选项-- 向sp_attribute表中插入一条新记录，设置属性ID为141，属性名称为'主体-品牌'，所属商品ID为1245，
+-- 属性类型为'only'，表示只能有一个值，属性输入方式为'manual'，即手动输入，属性值为空，
+-- 可能表示该属性在后续操作中会被填充或该商品没有特定的品牌信息，最后一个字段为null，可能表示没有额外的备注或默认值
 INSERT INTO `sp_attribute` VALUES ('141', '主体-品牌', '1245', 'only', 'manual', '', null);
+
+-- 插入一条新记录，设置属性ID为142，属性名称为'规格-实物尺寸'，所属商品ID为1245，
+-- 属性类型为'only'，输入方式为'manual'，属性值为'16厘米'，表示该商品的实物尺寸为16厘米
 INSERT INTO `sp_attribute` VALUES ('142', '规格-实物尺寸', '1245', 'only', 'manual', '16厘米', null);
+
+-- 插入一条新记录，设置属性ID为143，属性名称为'颜色'，所属商品ID为1245，
+-- 属性类型为'many'，表示可以有多个值，输入方式为'list'，即列表选择，
+-- 属性值为多个小猪佩奇的颜色和角色选项，表示该商品有多种颜色和角色可供选择
 INSERT INTO `sp_attribute` VALUES ('143', '颜色', '1245', 'many', 'list', '橙色佩奇,蓝色乔治,粉色佩奇,乔治', null);
-INSERT INTO `sp_attribute` VALUES ('144', '主体-品牌', '1247', 'only', 'manual', '', null);
-INSERT INTO `sp_attribute` VALUES ('145', '规格-实物尺寸', '1247', 'only', 'manual', '20-30cm', null);
-INSERT INTO `sp_attribute` VALUES ('146', '颜色', '1247', 'many', 'list', '粉色海马,蓝色海马', null);
-INSERT INTO `sp_attribute` VALUES ('147', '主体-类别', '1248', 'only', 'manual', '游戏叠叠乐', null);
-INSERT INTO `sp_attribute` VALUES ('148', '规格-包装尺寸', '1248', 'only', 'manual', '285*80*80毫米', null);
-INSERT INTO `sp_attribute` VALUES ('149', '51数字叠叠乐', '1248', 'many', 'list', '51数字叠叠乐+锤子,51数字叠叠乐,51数字叠叠乐+锤子,51数字叠叠乐', null);
-INSERT INTO `sp_attribute` VALUES ('150', '主体-品牌', '1249', 'only', 'manual', '', null);
-INSERT INTO `sp_attribute` VALUES ('151', '规格-包装尺寸', '1249', 'only', 'manual', '250毫米', null);
-INSERT INTO `sp_attribute` VALUES ('152', '主体参数-品牌', '124', 'only', 'manual', '', null);
-INSERT INTO `sp_attribute` VALUES ('153', '规格参数-包装', '124', 'only', 'manual', '瓶装', null);
-INSERT INTO `sp_attribute` VALUES ('154', '其他参数-产品标准号', '124', 'only', 'manual', '。', null);
-INSERT INTO `sp_attribute` VALUES ('155', '特性参数-产品剂型', '124', 'only', 'manual', '片剂', null);
-INSERT INTO `sp_attribute` VALUES ('156', '主体-品牌', '1251', 'only', 'manual', '', null);
-INSERT INTO `sp_attribute` VALUES ('157', '规格-重量', '1251', 'only', 'manual', '7克', null);
-INSERT INTO `sp_attribute` VALUES ('158', '主体-适用年龄', '1252', 'only', 'manual', '1-3岁', null);
-INSERT INTO `sp_attribute` VALUES ('159', '规格-包装尺寸', '1252', 'only', 'manual', '312*108*273毫米', null);
-INSERT INTO `sp_attribute` VALUES ('160', '主体-品牌', '1253', 'only', 'manual', '', null);
+
+-- 后续插入语句类似，均为向sp_attribute表中添加新记录，以下是对每条记录的简要说明：
+
+-- ID 144: 为商品ID 1247设置'主体-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
+-- ID 145: 为商品ID 1247设置'规格-实物尺寸'属性，属性类型为'only'，输入方式为'manual'，属性值为'20-30cm'
+-- ID 146: 为商品ID 1247设置'颜色'属性，属性类型为'many'，输入方式为'list'，属性值为多个海马的颜色选项
+-- ID 147: 为商品ID 1248设置'主体-类别'属性，属性类型为'only'，输入方式为'manual'，属性值为'游戏叠叠乐'
+-- ID 148: 为商品ID 1248设置'规格-包装尺寸'属性，属性类型为'only'，输入方式为'manual'，属性值为'285*80*80毫米'
+-- ID 149: 为商品ID 1248设置'51数字叠叠乐'属性（可能是特定商品的一个特性或组合），属性类型为'many'，输入方式为'list'，属性值为多个选项
+-- ID 150: 为商品ID 1249设置'主体-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
+-- ID 151: 为商品ID 1249设置'规格-包装尺寸'属性，属性类型为'only'，输入方式为'manual'，属性值为'250毫米'
+
+-- 接下来的记录是针对商品ID 124的多个属性设置：
+-- ID 152: 为商品ID 124设置'主体参数-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
+-- ID 153: 为商品ID 124设置'规格参数-包装'属性，属性类型为'only'，输入方式为'manual'，属性值为'瓶装'
+-- ID 154: 为商品ID 124设置'其他参数-产品标准号'属性，属性类型为'only'，输入方式为'manual'，属性值为一个点（可能是占位符或错误）
+-- ID 155: 为商品ID 124设置'特性参数-产品剂型'属性，属性类型为'only'，输入方式为'manual'，属性值为'片剂'
+
+-- ID 156: 为商品ID 1251设置'主体-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
+-- ID 157: 为商品ID 1251设置'规格-重量'属性，属性类型为'only'，输入方式为'manual'，属性值为'7克'
+-- ID 158: 为商品ID 1252设置'主体-适用年龄'属性，属性类型为'only'，输入方式为'manual'，属性值为'1-3岁'
+-- ID 159: 为商品ID 1252设置'规格-包装尺寸'属性，属性类型为'only'，输入方式为'manual'，属性值为'312*108*273毫米'
+-- ID 160: 为商品ID 1253设置'主体-品牌'属性，属性类型为'only'，输入方式为'manual'，属性值为空
 INSERT INTO `sp_attribute` VALUES ('161', '规格-包装尺寸', '1253', 'only', 'manual', '635.25毫米', null);
 INSERT INTO `sp_attribute` VALUES ('162', '电源-充电', '1253', 'only', 'manual', '否', null);
 INSERT INTO `sp_attribute` VALUES ('163', '颜色', '1253', 'many', 'list', '一辆装,二十辆装,五十辆装,十辆装', null);
diff --git a/src/assets/fonts/demo_unicode.html b/src/assets/fonts/demo_unicode.html
index f0c634c..dd565f3 100644
--- a/src/assets/fonts/demo_unicode.html
+++ b/src/assets/fonts/demo_unicode.html
@@ -1,96 +1,179 @@
 
 <!DOCTYPE html>
+<!-- 声明文档类型为HTML5，这是HTML页面的标准声明，告诉浏览器如何解析和渲染页面 -->
 <html>
+<!-- <html>标签是HTML页面的根元素，所有其他HTML元素都是其子元素 -->
 <head>
+    <!-- <head>标签包含了文档的元数据（meta-information），如字符集、标题、样式表链接等 -->
     <meta charset="utf-8"/>
+    <!-- <meta>标签用于指定文档的字符编码为UTF-8，这是一种国际通用的字符编码，支持多种语言的字符 -->
     <title>IconFont</title>
+    <!-- <title>标签定义了文档的标题，这个标题会显示在浏览器的标签栏或标题栏上 -->
     <link rel="stylesheet" href="demo.css">
+    <!-- <link>标签用于链接外部样式表（CSS文件），这里链接的是名为"demo.css"的样式表文件 -->
 
     <style type="text/css">
+    <!-- <style>标签用于在HTML文档中嵌入CSS样式 -->
 
-        @font-face {font-family: "iconfont";
-          src: url('iconfont.eot'); /* IE9*/
-          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
-          url('iconfont.woff') format('woff'), /* chrome, firefox */
-          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        @font-face {
+        /* @font-face是一个CSS规则，它允许你定义自己的字体，并指定字体文件的路径和格式 */
+        font-family: "iconfont";
+        /* font-family属性定义了字体的名称，这里定义的字体名称为"iconfont" */
+        
+        src: url('iconfont.eot'); /* IE9及以下版本使用EOT格式的字体文件 */
+        /* src属性指定了字体文件的路径和格式 */
+        
+        src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8使用带嵌入OpenType格式的EOT字体文件 */
+        url('iconfont.woff') format('woff'), /* Chrome和Firefox支持WOFF格式的字体文件 */
+        url('iconfont.ttf') format('truetype'), /* Chrome、Firefox、Opera、Safari、Android和iOS 4.2+支持TrueType格式的字体文件 */
+        url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1及以下版本支持SVG格式的字体文件 */
+        /* 注意：这里的src属性被重复使用了多次，实际上在@font-face规则中，src属性应该只出现一次，
+           但可以通过逗号分隔多个字体文件路径和格式。这里的写法可能是为了突出展示不同浏览器支持的字体格式，
+           但在实际使用中应该合并为一个src属性，例如：
+           src: url('iconfont.eot'); src: url('iconfont.eot#iefix') format('embedded-opentype'),
+                url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'),
+                url('iconfont.svg#iconfont') format('svg');
+           但正确的合并方式应该是：
+           src: url('iconfont.eot'); /* IE9 Compat Modes */
+               url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+               url('iconfont.woff') format('woff'), /* Super Modern Browsers */
+               url('iconfont.ttf') format('truetype'), /* Safari, Android, iOS */
+               url('iconfont.svg#iconfont') format('svg'); /* Legacy iOS */
+           并且注意，第一个src后的分号应该是逗号（但在实际规则中，我们只需要一个src属性，用逗号分隔不同的文件路径和格式）。
+           这里的注释是为了解释，实际代码应该按照正确的格式书写。 */
         }
 
-        .iconfont {
-          font-family:"iconfont" !important;
-          font-size:16px;
-          font-style:normal;
-          -webkit-font-smoothing: antialiased;
-          -webkit-text-stroke-width: 0.2px;
-          -moz-osx-font-smoothing: grayscale;
-        }
+      .iconfont {
+    /* 定义字体家族为"iconfont"，用于应用图标字体 */
+    font-family: "iconfont" !important;
+    /* 使用!important是为了提高该规则的优先级，确保它不会被其他样式覆盖 */
+    
+    /* 设置字体大小为16像素 */
+    font-size: 16px;
+    
+    /* 设置字体样式为正常（非斜体） */
+    font-style: normal;
+    
+    /* 在WebKit内核的浏览器中启用抗锯齿平滑处理，使字体边缘更平滑 */
+    -webkit-font-smoothing: antialiased;
+    
+    /* 设置文本描边宽度为0.2像素（在WebKit内核的浏览器中有效），但通常用于放大效果 */
+    /* 注意：在大多数情况下，文本描边可能不是必需的，且可能因浏览器支持而异 */
+    -webkit-text-stroke-width: 0.2px;
+    
+    /* 在Mac OS X的Firefox浏览器中启用灰度平滑处理，以减少字体渲染时的彩色边缘 */
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* CSS样式块结束 */
+</style>
 
-    </style>
+/* HTML文档的头部区域结束 */
 </head>
+
+/* HTML文档的主体区域开始 */
 <body>
+    <!-- 定义一个具有"main"和"markdown"类的div容器，用于包含主要内容 -->
     <div class="main markdown">
+        <!-- 定义一个一级标题，显示文本为"IconFont 图标" -->
         <h1>IconFont 图标</h1>
+        <!-- 定义一个无序列表，具有"icon_lists"和"clear"类，用于包含图标列表 -->
         <ul class="icon_lists clear">
             
-                <li>
+            <!-- 列表项开始，每个列表项包含一个图标、名称和代码 -->
+            <li>
+                <!-- 定义一个图标，使用"icon"和"iconfont"类，并显示特定的图标字符 -->
                 <i class="icon iconfont">&#xea3f;</i>
-                    <div class="name">show-password </div>
-                    <div class="code">&amp;#xea3f;</div>
-                </li>
+                <!-- 显示图标的名称 -->
+                <div class="name">show-password </div>
+                <!-- 显示图标的Unicode代码 -->
+                <div class="code">&amp;#xea3f;</div>
+            </li>
             
-                <li>
+            <!-- 类似的列表项，包含不同的图标、名称和代码 -->
+            <li>
                 <i class="icon iconfont">&#xe89a;</i>
                     <div class="name">user</div>
                     <div class="code">&amp;#xe89a;</div>
-                </li>
+            </li>
             
-                <li>
+            <li>
                 <i class="icon iconfont">&#xe8b5;</i>
                     <div class="name">users</div>
                     <div class="code">&amp;#xe8b5;</div>
-                </li>
+            </li>
             
-                <li>
+            <li>
                 <i class="icon iconfont">&#xe66c;</i>
                     <div class="name">password-b</div>
                     <div class="code">&amp;#xe66c;</div>
-                </li>
+            </li>
             
-                <li>
+            <li>
                 <i class="icon iconfont">&#xe888;</i>
                     <div class="name">06商品</div>
                     <div class="code">&amp;#xe888;</div>
-                </li>
+            </li>
             
-                <li>
+            <li>
                 <i class="icon iconfont">&#xe89b;</i>
                     <div class="name">25单据</div>
                     <div class="code">&amp;#xe89b;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe89f;</i>
-                    <div class="name">28体积、空间</div>
-                    <div class="code">&amp;#xe89f;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe8c9;</i>
-                    <div class="name">225默认头像</div>
-                    <div class="code">&amp;#xe8c9;</div>
-                </li>
+            </li>
+     
             
-                <li>
-                <i class="icon iconfont">&#xe902;</i>
-                    <div class="name">406报表</div>
-                    <div class="code">&amp;#xe902;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe709;</i>
-                    <div class="name">lock_fill</div>
-                    <div class="code">&amp;#xe709;</div>
-                </li>
+                <!-- 列表项开始，用于显示一个图标及其相关信息 -->
+<li>
+    <!-- 定义一个图标元素，使用"icon"和"iconfont"类来应用图标字体的样式 -->
+    <!-- 字符实体"&#xe89f;"代表在iconfont字体中定义的特定图标 -->
+    <i class="icon iconfont">&#xe89f;</i>
+    
+    <!-- 显示图标的名称，这里是"28体积、空间" -->
+    <!-- 这个名称可能用于描述图标所代表的含义或用途 -->
+    <div class="name">28体积、空间</div>
+    
+    <!-- 显示图标的Unicode代码，这里是"&amp;#xe89f;" -->
+    <!-- 注意：在HTML中，"&"符号需要被转义为"&amp;"，所以Unicode代码前面有"&amp;" -->
+    <div class="code">&amp;#xe89f;</div>
+</li>
+
+<!-- 另一个列表项开始，用于显示另一个图标及其相关信息 -->
+<li>
+    <!-- 定义一个图标元素，使用"icon"和"iconfont"类 -->
+    <!-- 字符实体"&#xe8c9;"代表另一个在iconfont字体中定义的图标 -->
+    <i class="icon iconfont">&#xe8c9;</i>
+    
+    <!-- 显示图标的名称，"225默认头像" -->
+    <div class="name">225默认头像</div>
+    
+    <!-- 显示图标的Unicode代码 -->
+    <div class="code">&amp;#xe8c9;</div>
+</li>
+
+<!-- 又一个列表项开始 -->
+<li>
+    <!-- 定义一个图标元素，字符实体"&#xe902;"代表另一个图标 -->
+    <i class="icon iconfont">&#xe902;</i>
+    
+    <!-- 显示图标的名称，"406报表" -->
+    <div class="name">406报表</div>
+    
+    <!-- 显示图标的Unicode代码 -->
+    <div class="code">&amp;#xe902;</div>
+</li>
+
+<!-- 最后一个列表项 -->
+<li>
+    <!-- 定义一个图标元素，字符实体"&#xe709;"代表锁填充图标 -->
+    <i class="icon iconfont">&#xe709;</i>
+    
+    <!-- 显示图标的名称，"lock_fill" -->
+    <div class="name">lock_fill</div>
+    
+    <!-- 显示图标的Unicode代码 -->
+    <div class="code">&amp;#xe709;</div>
+</li>
+
             
         </ul>
         <h2 id="unicode-">unicode引用</h2>