1、引入了学科网的样式

2、修改了 按钮细节
3、延长了 axios 请求时间

src/assets/font2/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/font2/demo_index.html

@@ -0,0 +1,2465 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4939100" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe660;</span>
+                <div class="name">标记未掌握</div>
+                <div class="code-name">&amp;#xe660;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe661;</span>
+                <div class="name">加入复习本</div>
+                <div class="code-name">&amp;#xe661;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe662;</span>
+                <div class="name">标记已掌握</div>
+                <div class="code-name">&amp;#xe662;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe663;</span>
+                <div class="name">移出复习本</div>
+                <div class="code-name">&amp;#xe663;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe664;</span>
+                <div class="name">答案</div>
+                <div class="code-name">&amp;#xe664;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe665;</span>
+                <div class="name">高频错题</div>
+                <div class="code-name">&amp;#xe665;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65f;</span>
+                <div class="name">icon-qxfx</div>
+                <div class="code-name">&amp;#xe65f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65b;</span>
+                <div class="name">wdsc</div>
+                <div class="code-name">&amp;#xe65b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65c;</span>
+                <div class="name">jsgx</div>
+                <div class="code-name">&amp;#xe65c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65d;</span>
+                <div class="name">zzlt</div>
+                <div class="code-name">&amp;#xe65d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65e;</span>
+                <div class="name">wdzj</div>
+                <div class="code-name">&amp;#xe65e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe658;</span>
+                <div class="name">finger</div>
+                <div class="code-name">&amp;#xe658;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe659;</span>
+                <div class="name">Check</div>
+                <div class="code-name">&amp;#xe659;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65a;</span>
+                <div class="name">Delete</div>
+                <div class="code-name">&amp;#xe65a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe653;</span>
+                <div class="name">题卡</div>
+                <div class="code-name">&amp;#xe653;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe654;</span>
+                <div class="name">Copy</div>
+                <div class="code-name">&amp;#xe654;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe655;</span>
+                <div class="name">下载</div>
+                <div class="code-name">&amp;#xe655;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe656;</span>
+                <div class="name">Share</div>
+                <div class="code-name">&amp;#xe656;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe657;</span>
+                <div class="name">Chart</div>
+                <div class="code-name">&amp;#xe657;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe651;</span>
+                <div class="name">试题篮</div>
+                <div class="code-name">&amp;#xe651;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe652;</span>
+                <div class="name">筛选</div>
+                <div class="code-name">&amp;#xe652;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64e;</span>
+                <div class="name">加</div>
+                <div class="code-name">&amp;#xe64e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64f;</span>
+                <div class="name">减</div>
+                <div class="code-name">&amp;#xe64f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64c;</span>
+                <div class="name">解析</div>
+                <div class="code-name">&amp;#xe64c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64d;</span>
+                <div class="name">筛选</div>
+                <div class="code-name">&amp;#xe64d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe650;</span>
+                <div class="name">收藏</div>
+                <div class="code-name">&amp;#xe650;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe647;</span>
+                <div class="name">icon-fxxk</div>
+                <div class="code-name">&amp;#xe647;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe648;</span>
+                <div class="name">icon-xzsj</div>
+                <div class="code-name">&amp;#xe648;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe649;</span>
+                <div class="name">icon-sjys</div>
+                <div class="code-name">&amp;#xe649;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64a;</span>
+                <div class="name">icon-bcsj</div>
+                <div class="code-name">&amp;#xe64a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64b;</span>
+                <div class="name">icon-sjyl</div>
+                <div class="code-name">&amp;#xe64b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe645;</span>
+                <div class="name">icon-sjfx</div>
+                <div class="code-name">&amp;#xe645;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe646;</span>
+                <div class="name">icon-scsj</div>
+                <div class="code-name">&amp;#xe646;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe644;</span>
+                <div class="name">icon_help</div>
+                <div class="code-name">&amp;#xe644;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe641;</span>
+                <div class="name">yichang</div>
+                <div class="code-name">&amp;#xe641;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe642;</span>
+                <div class="name">huiping</div>
+                <div class="code-name">&amp;#xe642;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe643;</span>
+                <div class="name">fucha</div>
+                <div class="code-name">&amp;#xe643;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63f;</span>
+                <div class="name">错</div>
+                <div class="code-name">&amp;#xe63f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe640;</span>
+                <div class="name">对</div>
+                <div class="code-name">&amp;#xe640;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63d;</span>
+                <div class="name">删除</div>
+                <div class="code-name">&amp;#xe63d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63e;</span>
+                <div class="name">编辑点亮</div>
+                <div class="code-name">&amp;#xe63e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">shangjiantou</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">Folder_Upload</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63b;</span>
+                <div class="name">dianxingcuowu</div>
+                <div class="code-name">&amp;#xe63b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63c;</span>
+                <div class="name">youxiudaan</div>
+                <div class="code-name">&amp;#xe63c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63a;</span>
+                <div class="name">逆时针1</div>
+                <div class="code-name">&amp;#xe63a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe635;</span>
+                <div class="name">shunshizhen90</div>
+                <div class="code-name">&amp;#xe635;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe636;</span>
+                <div class="name">fangda</div>
+                <div class="code-name">&amp;#xe636;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">suoxiao</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe638;</span>
+                <div class="name">nishizhen90</div>
+                <div class="code-name">&amp;#xe638;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe639;</span>
+                <div class="name">顺时针1</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe633;</span>
+                <div class="name">xiangyou</div>
+                <div class="code-name">&amp;#xe633;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe634;</span>
+                <div class="name">xiangzuo</div>
+                <div class="code-name">&amp;#xe634;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe630;</span>
+                <div class="name">yijieshu</div>
+                <div class="code-name">&amp;#xe630;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe631;</span>
+                <div class="name">yuejuanzhong</div>
+                <div class="code-name">&amp;#xe631;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe632;</span>
+                <div class="name">chengjizhong</div>
+                <div class="code-name">&amp;#xe632;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62e;</span>
+                <div class="name">mobanzhong</div>
+                <div class="code-name">&amp;#xe62e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">saomiaozhong</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62c;</span>
+                <div class="name">daoru</div>
+                <div class="code-name">&amp;#xe62c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62d;</span>
+                <div class="name">daochu</div>
+                <div class="code-name">&amp;#xe62d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62b;</span>
+                <div class="name">paixu</div>
+                <div class="code-name">&amp;#xe62b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">nishizhen</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62a;</span>
+                <div class="name">shunshizhen</div>
+                <div class="code-name">&amp;#xe62a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">close</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe628;</span>
+                <div class="name">open</div>
+                <div class="code-name">&amp;#xe628;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe624;</span>
+                <div class="name">shihepingmu</div>
+                <div class="code-name">&amp;#xe624;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe625;</span>
+                <div class="name">shuaxin</div>
+                <div class="code-name">&amp;#xe625;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe626;</span>
+                <div class="name">shubiaofuwu</div>
+                <div class="code-name">&amp;#xe626;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">Trending-down</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">Trending-up</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe621;</span>
+                <div class="name">qingchu</div>
+                <div class="code-name">&amp;#xe621;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe622;</span>
+                <div class="name">mima</div>
+                <div class="code-name">&amp;#xe622;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe623;</span>
+                <div class="name">yanzhengma</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">xianshimima</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">buxianshimima</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61f;</span>
+                <div class="name">zhanghao</div>
+                <div class="code-name">&amp;#xe61f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe620;</span>
+                <div class="name">shoujihao</div>
+                <div class="code-name">&amp;#xe620;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">liankaoguanli</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61a;</span>
+                <div class="name">xuexiaoguanli</div>
+                <div class="code-name">&amp;#xe61a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61b;</span>
+                <div class="name">yunweiyonghu</div>
+                <div class="code-name">&amp;#xe61b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">return</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">renkejiaoshi</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">xuenianxueqi</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">xiala</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe611;</span>
+                <div class="name">gerenxinxi</div>
+                <div class="code-name">&amp;#xe611;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">quanxianguanli</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">nianjikemu</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">yonghuguanli</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">banjimingdan</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60f;</span>
+                <div class="name">yuejuanjiankong</div>
+                <div class="code-name">&amp;#xe60f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">yuejuanrenwu</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">zaixianzhika</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">wodekaoshi</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">fenxiguanli</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">caozuowendang</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">fenxibaogao</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">kaoshizongshu</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">deepseek</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">chengjifenxi</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1765351662428') format('woff2'),
+       url('iconfont.woff?t=1765351662428') format('woff'),
+       url('iconfont.ttf?t=1765351662428') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon_biaojiweizhangwo"></span>
+            <div class="name">
+              标记未掌握
+            </div>
+            <div class="code-name">.icon_biaojiweizhangwo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_jiarufuxiben"></span>
+            <div class="name">
+              加入复习本
+            </div>
+            <div class="code-name">.icon_jiarufuxiben
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_biaojiyizhangwo"></span>
+            <div class="name">
+              标记已掌握
+            </div>
+            <div class="code-name">.icon_biaojiyizhangwo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_yichufuxiben"></span>
+            <div class="name">
+              移出复习本
+            </div>
+            <div class="code-name">.icon_yichufuxiben
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_daan"></span>
+            <div class="name">
+              答案
+            </div>
+            <div class="code-name">.icon_daan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_gaopincuoti"></span>
+            <div class="name">
+              高频错题
+            </div>
+            <div class="code-name">.icon_gaopincuoti
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_icon-qxfx"></span>
+            <div class="name">
+              icon-qxfx
+            </div>
+            <div class="code-name">.icon_icon-qxfx
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_wdsc"></span>
+            <div class="name">
+              wdsc
+            </div>
+            <div class="code-name">.icon_wdsc
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_jsgx"></span>
+            <div class="name">
+              jsgx
+            </div>
+            <div class="code-name">.icon_jsgx
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_zzlt"></span>
+            <div class="name">
+              zzlt
+            </div>
+            <div class="code-name">.icon_zzlt
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_wdzj"></span>
+            <div class="name">
+              wdzj
+            </div>
+            <div class="code-name">.icon_wdzj
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_finger"></span>
+            <div class="name">
+              finger
+            </div>
+            <div class="code-name">.icon_finger
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_Check"></span>
+            <div class="name">
+              Check
+            </div>
+            <div class="code-name">.icon_Check
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_Delete"></span>
+            <div class="name">
+              Delete
+            </div>
+            <div class="code-name">.icon_Delete
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_tika"></span>
+            <div class="name">
+              题卡
+            </div>
+            <div class="code-name">.icon_tika
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_Copy"></span>
+            <div class="name">
+              Copy
+            </div>
+            <div class="code-name">.icon_Copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_xiazai"></span>
+            <div class="name">
+              下载
+            </div>
+            <div class="code-name">.icon_xiazai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_Share"></span>
+            <div class="name">
+              Share
+            </div>
+            <div class="code-name">.icon_Share
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_Chart"></span>
+            <div class="name">
+              Chart
+            </div>
+            <div class="code-name">.icon_Chart
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shitilan"></span>
+            <div class="name">
+              试题篮
+            </div>
+            <div class="code-name">.icon_shitilan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shaixuan1"></span>
+            <div class="name">
+              筛选
+            </div>
+            <div class="code-name">.icon_shaixuan1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_jia"></span>
+            <div class="name">
+              加
+            </div>
+            <div class="code-name">.icon_jia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_jian"></span>
+            <div class="name">
+              减
+            </div>
+            <div class="code-name">.icon_jian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_jiexi"></span>
+            <div class="name">
+              解析
+            </div>
+            <div class="code-name">.icon_jiexi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shaixuan"></span>
+            <div class="name">
+              筛选
+            </div>
+            <div class="code-name">.icon_shaixuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shoucang"></span>
+            <div class="name">
+              收藏
+            </div>
+            <div class="code-name">.icon_shoucang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_icon-fxxk"></span>
+            <div class="name">
+              icon-fxxk
+            </div>
+            <div class="code-name">.icon_icon-fxxk
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_icon-xzsj"></span>
+            <div class="name">
+              icon-xzsj
+            </div>
+            <div class="code-name">.icon_icon-xzsj
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_icon-sjys"></span>
+            <div class="name">
+              icon-sjys
+            </div>
+            <div class="code-name">.icon_icon-sjys
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_icon-bcsj"></span>
+            <div class="name">
+              icon-bcsj
+            </div>
+            <div class="code-name">.icon_icon-bcsj
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_icon-sjyl"></span>
+            <div class="name">
+              icon-sjyl
+            </div>
+            <div class="code-name">.icon_icon-sjyl
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_icon-sjfx"></span>
+            <div class="name">
+              icon-sjfx
+            </div>
+            <div class="code-name">.icon_icon-sjfx
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_icon-scsj"></span>
+            <div class="name">
+              icon-scsj
+            </div>
+            <div class="code-name">.icon_icon-scsj
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_help"></span>
+            <div class="name">
+              icon_help
+            </div>
+            <div class="code-name">.icon_help
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_yichang"></span>
+            <div class="name">
+              yichang
+            </div>
+            <div class="code-name">.icon_yichang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_huiping"></span>
+            <div class="name">
+              huiping
+            </div>
+            <div class="code-name">.icon_huiping
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_fucha"></span>
+            <div class="name">
+              fucha
+            </div>
+            <div class="code-name">.icon_fucha
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_cuo"></span>
+            <div class="name">
+              错
+            </div>
+            <div class="code-name">.icon_cuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_dui"></span>
+            <div class="name">
+              对
+            </div>
+            <div class="code-name">.icon_dui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shanchu"></span>
+            <div class="name">
+              删除
+            </div>
+            <div class="code-name">.icon_shanchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_bianjidianliang"></span>
+            <div class="name">
+              编辑点亮
+            </div>
+            <div class="code-name">.icon_bianjidianliang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shangjiantou"></span>
+            <div class="name">
+              shangjiantou
+            </div>
+            <div class="code-name">.icon_shangjiantou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_folder_upload"></span>
+            <div class="name">
+              Folder_Upload
+            </div>
+            <div class="code-name">.icon_folder_upload
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_dianxingcuowu"></span>
+            <div class="name">
+              dianxingcuowu
+            </div>
+            <div class="code-name">.icon_dianxingcuowu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_youxiudaan"></span>
+            <div class="name">
+              youxiudaan
+            </div>
+            <div class="code-name">.icon_youxiudaan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_nishizhen1"></span>
+            <div class="name">
+              逆时针1
+            </div>
+            <div class="code-name">.icon_nishizhen1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shunshizhen90"></span>
+            <div class="name">
+              shunshizhen90
+            </div>
+            <div class="code-name">.icon_shunshizhen90
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_fangda"></span>
+            <div class="name">
+              fangda
+            </div>
+            <div class="code-name">.icon_fangda
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_suoxiao"></span>
+            <div class="name">
+              suoxiao
+            </div>
+            <div class="code-name">.icon_suoxiao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_nishizhen90"></span>
+            <div class="name">
+              nishizhen90
+            </div>
+            <div class="code-name">.icon_nishizhen90
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shunshizhen1"></span>
+            <div class="name">
+              顺时针1
+            </div>
+            <div class="code-name">.icon_shunshizhen1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_xiangyou"></span>
+            <div class="name">
+              xiangyou
+            </div>
+            <div class="code-name">.icon_xiangyou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_xiangzuo"></span>
+            <div class="name">
+              xiangzuo
+            </div>
+            <div class="code-name">.icon_xiangzuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_yijieshu"></span>
+            <div class="name">
+              yijieshu
+            </div>
+            <div class="code-name">.icon_yijieshu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_yuejuanzhong"></span>
+            <div class="name">
+              yuejuanzhong
+            </div>
+            <div class="code-name">.icon_yuejuanzhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_chengjizhong"></span>
+            <div class="name">
+              chengjizhong
+            </div>
+            <div class="code-name">.icon_chengjizhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_mobanzhong"></span>
+            <div class="name">
+              mobanzhong
+            </div>
+            <div class="code-name">.icon_mobanzhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_saomiaozhong"></span>
+            <div class="name">
+              saomiaozhong
+            </div>
+            <div class="code-name">.icon_saomiaozhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_import"></span>
+            <div class="name">
+              daoru
+            </div>
+            <div class="code-name">.icon_import
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_export"></span>
+            <div class="name">
+              daochu
+            </div>
+            <div class="code-name">.icon_export
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_paixu"></span>
+            <div class="name">
+              paixu
+            </div>
+            <div class="code-name">.icon_paixu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_nishizhen"></span>
+            <div class="name">
+              nishizhen
+            </div>
+            <div class="code-name">.icon_nishizhen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shunshizhen"></span>
+            <div class="name">
+              shunshizhen
+            </div>
+            <div class="code-name">.icon_shunshizhen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_close"></span>
+            <div class="name">
+              close
+            </div>
+            <div class="code-name">.icon_close
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_open"></span>
+            <div class="name">
+              open
+            </div>
+            <div class="code-name">.icon_open
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shihepingmu"></span>
+            <div class="name">
+              shihepingmu
+            </div>
+            <div class="code-name">.icon_shihepingmu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shuaxin"></span>
+            <div class="name">
+              shuaxin
+            </div>
+            <div class="code-name">.icon_shuaxin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shubiaofuwu"></span>
+            <div class="name">
+              shubiaofuwu
+            </div>
+            <div class="code-name">.icon_shubiaofuwu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_Trending-down"></span>
+            <div class="name">
+              Trending-down
+            </div>
+            <div class="code-name">.icon_Trending-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_Trending-up"></span>
+            <div class="name">
+              Trending-up
+            </div>
+            <div class="code-name">.icon_Trending-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_qingchu"></span>
+            <div class="name">
+              qingchu
+            </div>
+            <div class="code-name">.icon_qingchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_mima"></span>
+            <div class="name">
+              mima
+            </div>
+            <div class="code-name">.icon_mima
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_yanzhengma"></span>
+            <div class="name">
+              yanzhengma
+            </div>
+            <div class="code-name">.icon_yanzhengma
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_xianshimima"></span>
+            <div class="name">
+              xianshimima
+            </div>
+            <div class="code-name">.icon_xianshimima
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_buxianshimima"></span>
+            <div class="name">
+              buxianshimima
+            </div>
+            <div class="code-name">.icon_buxianshimima
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_zhanghao"></span>
+            <div class="name">
+              zhanghao
+            </div>
+            <div class="code-name">.icon_zhanghao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_shoujihao"></span>
+            <div class="name">
+              shoujihao
+            </div>
+            <div class="code-name">.icon_shoujihao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_liankaoguanli"></span>
+            <div class="name">
+              liankaoguanli
+            </div>
+            <div class="code-name">.icon_liankaoguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_xuexiaoguanli"></span>
+            <div class="name">
+              xuexiaoguanli
+            </div>
+            <div class="code-name">.icon_xuexiaoguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_yunweiyonghu"></span>
+            <div class="name">
+              yunweiyonghu
+            </div>
+            <div class="code-name">.icon_yunweiyonghu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_return"></span>
+            <div class="name">
+              return
+            </div>
+            <div class="code-name">.icon_return
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_renkejiaoshi"></span>
+            <div class="name">
+              renkejiaoshi
+            </div>
+            <div class="code-name">.icon_renkejiaoshi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_xuenianxueqi"></span>
+            <div class="name">
+              xuenianxueqi
+            </div>
+            <div class="code-name">.icon_xuenianxueqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_xiala"></span>
+            <div class="name">
+              xiala
+            </div>
+            <div class="code-name">.icon_xiala
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_gerenxinxi"></span>
+            <div class="name">
+              gerenxinxi
+            </div>
+            <div class="code-name">.icon_gerenxinxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_quanxianguanli"></span>
+            <div class="name">
+              quanxianguanli
+            </div>
+            <div class="code-name">.icon_quanxianguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_nianjikemu"></span>
+            <div class="name">
+              nianjikemu
+            </div>
+            <div class="code-name">.icon_nianjikemu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_yonghuguanli"></span>
+            <div class="name">
+              yonghuguanli
+            </div>
+            <div class="code-name">.icon_yonghuguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_banjimingdan"></span>
+            <div class="name">
+              banjimingdan
+            </div>
+            <div class="code-name">.icon_banjimingdan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_yuejuanjiankong"></span>
+            <div class="name">
+              yuejuanjiankong
+            </div>
+            <div class="code-name">.icon_yuejuanjiankong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_yuejuanrenwu"></span>
+            <div class="name">
+              yuejuanrenwu
+            </div>
+            <div class="code-name">.icon_yuejuanrenwu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_zaixianzhika"></span>
+            <div class="name">
+              zaixianzhika
+            </div>
+            <div class="code-name">.icon_zaixianzhika
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_wodekaoshi"></span>
+            <div class="name">
+              wodekaoshi
+            </div>
+            <div class="code-name">.icon_wodekaoshi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_fenxiguanli"></span>
+            <div class="name">
+              fenxiguanli
+            </div>
+            <div class="code-name">.icon_fenxiguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_caozuowendang"></span>
+            <div class="name">
+              caozuowendang
+            </div>
+            <div class="code-name">.icon_caozuowendang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_fenxibaogao"></span>
+            <div class="name">
+              fenxibaogao
+            </div>
+            <div class="code-name">.icon_fenxibaogao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_kaoshizongshu"></span>
+            <div class="name">
+              kaoshizongshu
+            </div>
+            <div class="code-name">.icon_kaoshizongshu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_deepseek"></span>
+            <div class="name">
+              deepseek
+            </div>
+            <div class="code-name">.icon_deepseek
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon_chengjifenxi"></span>
+            <div class="name">
+              chengjifenxi
+            </div>
+            <div class="code-name">.icon_chengjifenxi
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon_xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <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_biaojiweizhangwo"></use>
+                </svg>
+                <div class="name">标记未掌握</div>
+                <div class="code-name">#icon_biaojiweizhangwo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_jiarufuxiben"></use>
+                </svg>
+                <div class="name">加入复习本</div>
+                <div class="code-name">#icon_jiarufuxiben</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_biaojiyizhangwo"></use>
+                </svg>
+                <div class="name">标记已掌握</div>
+                <div class="code-name">#icon_biaojiyizhangwo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_yichufuxiben"></use>
+                </svg>
+                <div class="name">移出复习本</div>
+                <div class="code-name">#icon_yichufuxiben</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_daan"></use>
+                </svg>
+                <div class="name">答案</div>
+                <div class="code-name">#icon_daan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_gaopincuoti"></use>
+                </svg>
+                <div class="name">高频错题</div>
+                <div class="code-name">#icon_gaopincuoti</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_icon-qxfx"></use>
+                </svg>
+                <div class="name">icon-qxfx</div>
+                <div class="code-name">#icon_icon-qxfx</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_wdsc"></use>
+                </svg>
+                <div class="name">wdsc</div>
+                <div class="code-name">#icon_wdsc</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_jsgx"></use>
+                </svg>
+                <div class="name">jsgx</div>
+                <div class="code-name">#icon_jsgx</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_zzlt"></use>
+                </svg>
+                <div class="name">zzlt</div>
+                <div class="code-name">#icon_zzlt</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_wdzj"></use>
+                </svg>
+                <div class="name">wdzj</div>
+                <div class="code-name">#icon_wdzj</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_finger"></use>
+                </svg>
+                <div class="name">finger</div>
+                <div class="code-name">#icon_finger</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_Check"></use>
+                </svg>
+                <div class="name">Check</div>
+                <div class="code-name">#icon_Check</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_Delete"></use>
+                </svg>
+                <div class="name">Delete</div>
+                <div class="code-name">#icon_Delete</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_tika"></use>
+                </svg>
+                <div class="name">题卡</div>
+                <div class="code-name">#icon_tika</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_Copy"></use>
+                </svg>
+                <div class="name">Copy</div>
+                <div class="code-name">#icon_Copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_xiazai"></use>
+                </svg>
+                <div class="name">下载</div>
+                <div class="code-name">#icon_xiazai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_Share"></use>
+                </svg>
+                <div class="name">Share</div>
+                <div class="code-name">#icon_Share</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_Chart"></use>
+                </svg>
+                <div class="name">Chart</div>
+                <div class="code-name">#icon_Chart</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shitilan"></use>
+                </svg>
+                <div class="name">试题篮</div>
+                <div class="code-name">#icon_shitilan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shaixuan1"></use>
+                </svg>
+                <div class="name">筛选</div>
+                <div class="code-name">#icon_shaixuan1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_jia"></use>
+                </svg>
+                <div class="name">加</div>
+                <div class="code-name">#icon_jia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_jian"></use>
+                </svg>
+                <div class="name">减</div>
+                <div class="code-name">#icon_jian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_jiexi"></use>
+                </svg>
+                <div class="name">解析</div>
+                <div class="code-name">#icon_jiexi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shaixuan"></use>
+                </svg>
+                <div class="name">筛选</div>
+                <div class="code-name">#icon_shaixuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shoucang"></use>
+                </svg>
+                <div class="name">收藏</div>
+                <div class="code-name">#icon_shoucang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_icon-fxxk"></use>
+                </svg>
+                <div class="name">icon-fxxk</div>
+                <div class="code-name">#icon_icon-fxxk</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_icon-xzsj"></use>
+                </svg>
+                <div class="name">icon-xzsj</div>
+                <div class="code-name">#icon_icon-xzsj</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_icon-sjys"></use>
+                </svg>
+                <div class="name">icon-sjys</div>
+                <div class="code-name">#icon_icon-sjys</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_icon-bcsj"></use>
+                </svg>
+                <div class="name">icon-bcsj</div>
+                <div class="code-name">#icon_icon-bcsj</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_icon-sjyl"></use>
+                </svg>
+                <div class="name">icon-sjyl</div>
+                <div class="code-name">#icon_icon-sjyl</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_icon-sjfx"></use>
+                </svg>
+                <div class="name">icon-sjfx</div>
+                <div class="code-name">#icon_icon-sjfx</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_icon-scsj"></use>
+                </svg>
+                <div class="name">icon-scsj</div>
+                <div class="code-name">#icon_icon-scsj</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_help"></use>
+                </svg>
+                <div class="name">icon_help</div>
+                <div class="code-name">#icon_help</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_yichang"></use>
+                </svg>
+                <div class="name">yichang</div>
+                <div class="code-name">#icon_yichang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_huiping"></use>
+                </svg>
+                <div class="name">huiping</div>
+                <div class="code-name">#icon_huiping</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_fucha"></use>
+                </svg>
+                <div class="name">fucha</div>
+                <div class="code-name">#icon_fucha</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_cuo"></use>
+                </svg>
+                <div class="name">错</div>
+                <div class="code-name">#icon_cuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_dui"></use>
+                </svg>
+                <div class="name">对</div>
+                <div class="code-name">#icon_dui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shanchu"></use>
+                </svg>
+                <div class="name">删除</div>
+                <div class="code-name">#icon_shanchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_bianjidianliang"></use>
+                </svg>
+                <div class="name">编辑点亮</div>
+                <div class="code-name">#icon_bianjidianliang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shangjiantou"></use>
+                </svg>
+                <div class="name">shangjiantou</div>
+                <div class="code-name">#icon_shangjiantou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_folder_upload"></use>
+                </svg>
+                <div class="name">Folder_Upload</div>
+                <div class="code-name">#icon_folder_upload</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_dianxingcuowu"></use>
+                </svg>
+                <div class="name">dianxingcuowu</div>
+                <div class="code-name">#icon_dianxingcuowu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_youxiudaan"></use>
+                </svg>
+                <div class="name">youxiudaan</div>
+                <div class="code-name">#icon_youxiudaan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_nishizhen1"></use>
+                </svg>
+                <div class="name">逆时针1</div>
+                <div class="code-name">#icon_nishizhen1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shunshizhen90"></use>
+                </svg>
+                <div class="name">shunshizhen90</div>
+                <div class="code-name">#icon_shunshizhen90</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_fangda"></use>
+                </svg>
+                <div class="name">fangda</div>
+                <div class="code-name">#icon_fangda</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_suoxiao"></use>
+                </svg>
+                <div class="name">suoxiao</div>
+                <div class="code-name">#icon_suoxiao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_nishizhen90"></use>
+                </svg>
+                <div class="name">nishizhen90</div>
+                <div class="code-name">#icon_nishizhen90</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shunshizhen1"></use>
+                </svg>
+                <div class="name">顺时针1</div>
+                <div class="code-name">#icon_shunshizhen1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_xiangyou"></use>
+                </svg>
+                <div class="name">xiangyou</div>
+                <div class="code-name">#icon_xiangyou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_xiangzuo"></use>
+                </svg>
+                <div class="name">xiangzuo</div>
+                <div class="code-name">#icon_xiangzuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_yijieshu"></use>
+                </svg>
+                <div class="name">yijieshu</div>
+                <div class="code-name">#icon_yijieshu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_yuejuanzhong"></use>
+                </svg>
+                <div class="name">yuejuanzhong</div>
+                <div class="code-name">#icon_yuejuanzhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_chengjizhong"></use>
+                </svg>
+                <div class="name">chengjizhong</div>
+                <div class="code-name">#icon_chengjizhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_mobanzhong"></use>
+                </svg>
+                <div class="name">mobanzhong</div>
+                <div class="code-name">#icon_mobanzhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_saomiaozhong"></use>
+                </svg>
+                <div class="name">saomiaozhong</div>
+                <div class="code-name">#icon_saomiaozhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_import"></use>
+                </svg>
+                <div class="name">daoru</div>
+                <div class="code-name">#icon_import</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_export"></use>
+                </svg>
+                <div class="name">daochu</div>
+                <div class="code-name">#icon_export</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_paixu"></use>
+                </svg>
+                <div class="name">paixu</div>
+                <div class="code-name">#icon_paixu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_nishizhen"></use>
+                </svg>
+                <div class="name">nishizhen</div>
+                <div class="code-name">#icon_nishizhen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shunshizhen"></use>
+                </svg>
+                <div class="name">shunshizhen</div>
+                <div class="code-name">#icon_shunshizhen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_close"></use>
+                </svg>
+                <div class="name">close</div>
+                <div class="code-name">#icon_close</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_open"></use>
+                </svg>
+                <div class="name">open</div>
+                <div class="code-name">#icon_open</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shihepingmu"></use>
+                </svg>
+                <div class="name">shihepingmu</div>
+                <div class="code-name">#icon_shihepingmu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shuaxin"></use>
+                </svg>
+                <div class="name">shuaxin</div>
+                <div class="code-name">#icon_shuaxin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shubiaofuwu"></use>
+                </svg>
+                <div class="name">shubiaofuwu</div>
+                <div class="code-name">#icon_shubiaofuwu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_Trending-down"></use>
+                </svg>
+                <div class="name">Trending-down</div>
+                <div class="code-name">#icon_Trending-down</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_Trending-up"></use>
+                </svg>
+                <div class="name">Trending-up</div>
+                <div class="code-name">#icon_Trending-up</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_qingchu"></use>
+                </svg>
+                <div class="name">qingchu</div>
+                <div class="code-name">#icon_qingchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_mima"></use>
+                </svg>
+                <div class="name">mima</div>
+                <div class="code-name">#icon_mima</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_yanzhengma"></use>
+                </svg>
+                <div class="name">yanzhengma</div>
+                <div class="code-name">#icon_yanzhengma</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_xianshimima"></use>
+                </svg>
+                <div class="name">xianshimima</div>
+                <div class="code-name">#icon_xianshimima</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_buxianshimima"></use>
+                </svg>
+                <div class="name">buxianshimima</div>
+                <div class="code-name">#icon_buxianshimima</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_zhanghao"></use>
+                </svg>
+                <div class="name">zhanghao</div>
+                <div class="code-name">#icon_zhanghao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_shoujihao"></use>
+                </svg>
+                <div class="name">shoujihao</div>
+                <div class="code-name">#icon_shoujihao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_liankaoguanli"></use>
+                </svg>
+                <div class="name">liankaoguanli</div>
+                <div class="code-name">#icon_liankaoguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_xuexiaoguanli"></use>
+                </svg>
+                <div class="name">xuexiaoguanli</div>
+                <div class="code-name">#icon_xuexiaoguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_yunweiyonghu"></use>
+                </svg>
+                <div class="name">yunweiyonghu</div>
+                <div class="code-name">#icon_yunweiyonghu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_return"></use>
+                </svg>
+                <div class="name">return</div>
+                <div class="code-name">#icon_return</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_renkejiaoshi"></use>
+                </svg>
+                <div class="name">renkejiaoshi</div>
+                <div class="code-name">#icon_renkejiaoshi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_xuenianxueqi"></use>
+                </svg>
+                <div class="name">xuenianxueqi</div>
+                <div class="code-name">#icon_xuenianxueqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_xiala"></use>
+                </svg>
+                <div class="name">xiala</div>
+                <div class="code-name">#icon_xiala</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_gerenxinxi"></use>
+                </svg>
+                <div class="name">gerenxinxi</div>
+                <div class="code-name">#icon_gerenxinxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_quanxianguanli"></use>
+                </svg>
+                <div class="name">quanxianguanli</div>
+                <div class="code-name">#icon_quanxianguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_nianjikemu"></use>
+                </svg>
+                <div class="name">nianjikemu</div>
+                <div class="code-name">#icon_nianjikemu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_yonghuguanli"></use>
+                </svg>
+                <div class="name">yonghuguanli</div>
+                <div class="code-name">#icon_yonghuguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_banjimingdan"></use>
+                </svg>
+                <div class="name">banjimingdan</div>
+                <div class="code-name">#icon_banjimingdan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_yuejuanjiankong"></use>
+                </svg>
+                <div class="name">yuejuanjiankong</div>
+                <div class="code-name">#icon_yuejuanjiankong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_yuejuanrenwu"></use>
+                </svg>
+                <div class="name">yuejuanrenwu</div>
+                <div class="code-name">#icon_yuejuanrenwu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_zaixianzhika"></use>
+                </svg>
+                <div class="name">zaixianzhika</div>
+                <div class="code-name">#icon_zaixianzhika</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_wodekaoshi"></use>
+                </svg>
+                <div class="name">wodekaoshi</div>
+                <div class="code-name">#icon_wodekaoshi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_fenxiguanli"></use>
+                </svg>
+                <div class="name">fenxiguanli</div>
+                <div class="code-name">#icon_fenxiguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_caozuowendang"></use>
+                </svg>
+                <div class="name">caozuowendang</div>
+                <div class="code-name">#icon_caozuowendang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_fenxibaogao"></use>
+                </svg>
+                <div class="name">fenxibaogao</div>
+                <div class="code-name">#icon_fenxibaogao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_kaoshizongshu"></use>
+                </svg>
+                <div class="name">kaoshizongshu</div>
+                <div class="code-name">#icon_kaoshizongshu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_deepseek"></use>
+                </svg>
+                <div class="name">deepseek</div>
+                <div class="code-name">#icon_deepseek</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon_chengjifenxi"></use>
+                </svg>
+                <div class="name">chengjifenxi</div>
+                <div class="code-name">#icon_chengjifenxi</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/font2/iconfont.css

@@ -0,0 +1,411 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4939100 */
+  src: url('iconfont.woff2?t=1765351662428') format('woff2'),
+       url('iconfont.woff?t=1765351662428') format('woff'),
+       url('iconfont.ttf?t=1765351662428') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon_biaojiweizhangwo:before {
+  content: "\e660";
+}
+
+.icon_jiarufuxiben:before {
+  content: "\e661";
+}
+
+.icon_biaojiyizhangwo:before {
+  content: "\e662";
+}
+
+.icon_yichufuxiben:before {
+  content: "\e663";
+}
+
+.icon_daan:before {
+  content: "\e664";
+}
+
+.icon_gaopincuoti:before {
+  content: "\e665";
+}
+
+.icon_icon-qxfx:before {
+  content: "\e65f";
+}
+
+.icon_wdsc:before {
+  content: "\e65b";
+}
+
+.icon_jsgx:before {
+  content: "\e65c";
+}
+
+.icon_zzlt:before {
+  content: "\e65d";
+}
+
+.icon_wdzj:before {
+  content: "\e65e";
+}
+
+.icon_finger:before {
+  content: "\e658";
+}
+
+.icon_Check:before {
+  content: "\e659";
+}
+
+.icon_Delete:before {
+  content: "\e65a";
+}
+
+.icon_tika:before {
+  content: "\e653";
+}
+
+.icon_Copy:before {
+  content: "\e654";
+}
+
+.icon_xiazai:before {
+  content: "\e655";
+}
+
+.icon_Share:before {
+  content: "\e656";
+}
+
+.icon_Chart:before {
+  content: "\e657";
+}
+
+.icon_shitilan:before {
+  content: "\e651";
+}
+
+.icon_shaixuan1:before {
+  content: "\e652";
+}
+
+.icon_jia:before {
+  content: "\e64e";
+}
+
+.icon_jian:before {
+  content: "\e64f";
+}
+
+.icon_jiexi:before {
+  content: "\e64c";
+}
+
+.icon_shaixuan:before {
+  content: "\e64d";
+}
+
+.icon_shoucang:before {
+  content: "\e650";
+}
+
+.icon_icon-fxxk:before {
+  content: "\e647";
+}
+
+.icon_icon-xzsj:before {
+  content: "\e648";
+}
+
+.icon_icon-sjys:before {
+  content: "\e649";
+}
+
+.icon_icon-bcsj:before {
+  content: "\e64a";
+}
+
+.icon_icon-sjyl:before {
+  content: "\e64b";
+}
+
+.icon_icon-sjfx:before {
+  content: "\e645";
+}
+
+.icon_icon-scsj:before {
+  content: "\e646";
+}
+
+.icon_help:before {
+  content: "\e644";
+}
+
+.icon_yichang:before {
+  content: "\e641";
+}
+
+.icon_huiping:before {
+  content: "\e642";
+}
+
+.icon_fucha:before {
+  content: "\e643";
+}
+
+.icon_cuo:before {
+  content: "\e63f";
+}
+
+.icon_dui:before {
+  content: "\e640";
+}
+
+.icon_shanchu:before {
+  content: "\e63d";
+}
+
+.icon_bianjidianliang:before {
+  content: "\e63e";
+}
+
+.icon_shangjiantou:before {
+  content: "\e604";
+}
+
+.icon_folder_upload:before {
+  content: "\e603";
+}
+
+.icon_dianxingcuowu:before {
+  content: "\e63b";
+}
+
+.icon_youxiudaan:before {
+  content: "\e63c";
+}
+
+.icon_nishizhen1:before {
+  content: "\e63a";
+}
+
+.icon_shunshizhen90:before {
+  content: "\e635";
+}
+
+.icon_fangda:before {
+  content: "\e636";
+}
+
+.icon_suoxiao:before {
+  content: "\e637";
+}
+
+.icon_nishizhen90:before {
+  content: "\e638";
+}
+
+.icon_shunshizhen1:before {
+  content: "\e639";
+}
+
+.icon_xiangyou:before {
+  content: "\e633";
+}
+
+.icon_xiangzuo:before {
+  content: "\e634";
+}
+
+.icon_yijieshu:before {
+  content: "\e630";
+}
+
+.icon_yuejuanzhong:before {
+  content: "\e631";
+}
+
+.icon_chengjizhong:before {
+  content: "\e632";
+}
+
+.icon_mobanzhong:before {
+  content: "\e62e";
+}
+
+.icon_saomiaozhong:before {
+  content: "\e62f";
+}
+
+.icon_import:before {
+  content: "\e62c";
+}
+
+.icon_export:before {
+  content: "\e62d";
+}
+
+.icon_paixu:before {
+  content: "\e62b";
+}
+
+.icon_nishizhen:before {
+  content: "\e629";
+}
+
+.icon_shunshizhen:before {
+  content: "\e62a";
+}
+
+.icon_close:before {
+  content: "\e627";
+}
+
+.icon_open:before {
+  content: "\e628";
+}
+
+.icon_shihepingmu:before {
+  content: "\e624";
+}
+
+.icon_shuaxin:before {
+  content: "\e625";
+}
+
+.icon_shubiaofuwu:before {
+  content: "\e626";
+}
+
+.icon_Trending-down:before {
+  content: "\e601";
+}
+
+.icon_Trending-up:before {
+  content: "\e602";
+}
+
+.icon_qingchu:before {
+  content: "\e621";
+}
+
+.icon_mima:before {
+  content: "\e622";
+}
+
+.icon_yanzhengma:before {
+  content: "\e623";
+}
+
+.icon_xianshimima:before {
+  content: "\e61d";
+}
+
+.icon_buxianshimima:before {
+  content: "\e61e";
+}
+
+.icon_zhanghao:before {
+  content: "\e61f";
+}
+
+.icon_shoujihao:before {
+  content: "\e620";
+}
+
+.icon_liankaoguanli:before {
+  content: "\e61c";
+}
+
+.icon_xuexiaoguanli:before {
+  content: "\e61a";
+}
+
+.icon_yunweiyonghu:before {
+  content: "\e61b";
+}
+
+.icon_return:before {
+  content: "\e619";
+}
+
+.icon_renkejiaoshi:before {
+  content: "\e617";
+}
+
+.icon_xuenianxueqi:before {
+  content: "\e618";
+}
+
+.icon_xiala:before {
+  content: "\e616";
+}
+
+.icon_gerenxinxi:before {
+  content: "\e611";
+}
+
+.icon_quanxianguanli:before {
+  content: "\e612";
+}
+
+.icon_nianjikemu:before {
+  content: "\e613";
+}
+
+.icon_yonghuguanli:before {
+  content: "\e614";
+}
+
+.icon_banjimingdan:before {
+  content: "\e615";
+}
+
+.icon_yuejuanjiankong:before {
+  content: "\e60f";
+}
+
+.icon_yuejuanrenwu:before {
+  content: "\e610";
+}
+
+.icon_zaixianzhika:before {
+  content: "\e60b";
+}
+
+.icon_wodekaoshi:before {
+  content: "\e60c";
+}
+
+.icon_fenxiguanli:before {
+  content: "\e60d";
+}
+
+.icon_caozuowendang:before {
+  content: "\e60e";
+}
+
+.icon_fenxibaogao:before {
+  content: "\e609";
+}
+
+.icon_kaoshizongshu:before {
+  content: "\e60a";
+}
+
+.icon_deepseek:before {
+  content: "\e608";
+}
+
+.icon_chengjifenxi:before {
+  content: "\e606";
+}
+

src/assets/font2/iconfont.json

@@ -0,0 +1,702 @@
+{
+  "id": "4939100",
+  "name": "慧教研矢量图库",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon_",
+  "description": "慧教研矢量图库",
+  "glyphs": [
+    {
+      "icon_id": "46315469",
+      "name": "标记未掌握",
+      "font_class": "biaojiweizhangwo",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "46315467",
+      "name": "加入复习本",
+      "font_class": "jiarufuxiben",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "46315466",
+      "name": "标记已掌握",
+      "font_class": "biaojiyizhangwo",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "46315468",
+      "name": "移出复习本",
+      "font_class": "yichufuxiben",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "46315464",
+      "name": "答案",
+      "font_class": "daan",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "46315465",
+      "name": "高频错题",
+      "font_class": "gaopincuoti",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "46297349",
+      "name": "icon-qxfx",
+      "font_class": "icon-qxfx",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "46297317",
+      "name": "wdsc",
+      "font_class": "wdsc",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "46297316",
+      "name": "jsgx",
+      "font_class": "jsgx",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "46297315",
+      "name": "zzlt",
+      "font_class": "zzlt",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "46297313",
+      "name": "wdzj",
+      "font_class": "wdzj",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    },
+    {
+      "icon_id": "46297332",
+      "name": "finger",
+      "font_class": "finger",
+      "unicode": "e658",
+      "unicode_decimal": 58968
+    },
+    {
+      "icon_id": "46297331",
+      "name": "Check",
+      "font_class": "Check",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "46297330",
+      "name": "Delete",
+      "font_class": "Delete",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
+    },
+    {
+      "icon_id": "46297262",
+      "name": "题卡",
+      "font_class": "tika",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "46297261",
+      "name": "Copy",
+      "font_class": "Copy",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "46297260",
+      "name": "下载",
+      "font_class": "xiazai",
+      "unicode": "e655",
+      "unicode_decimal": 58965
+    },
+    {
+      "icon_id": "46297259",
+      "name": "Share",
+      "font_class": "Share",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "46297258",
+      "name": "Chart",
+      "font_class": "Chart",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "46297246",
+      "name": "试题篮",
+      "font_class": "shitilan",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "46297245",
+      "name": "筛选",
+      "font_class": "shaixuan1",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "46297239",
+      "name": "加",
+      "font_class": "jia",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "46297238",
+      "name": "减",
+      "font_class": "jian",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "46297213",
+      "name": "解析",
+      "font_class": "jiexi",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "46297209",
+      "name": "筛选",
+      "font_class": "shaixuan",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
+    {
+      "icon_id": "46297210",
+      "name": "收藏",
+      "font_class": "shoucang",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
+    {
+      "icon_id": "46297151",
+      "name": "icon-fxxk",
+      "font_class": "icon-fxxk",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "46297150",
+      "name": "icon-xzsj",
+      "font_class": "icon-xzsj",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "46297148",
+      "name": "icon-sjys",
+      "font_class": "icon-sjys",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "46297147",
+      "name": "icon-bcsj",
+      "font_class": "icon-bcsj",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "46297146",
+      "name": "icon-sjyl",
+      "font_class": "icon-sjyl",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "46297152",
+      "name": "icon-sjfx",
+      "font_class": "icon-sjfx",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "46297149",
+      "name": "icon-scsj",
+      "font_class": "icon-scsj",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "46225553",
+      "name": "icon_help",
+      "font_class": "help",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "46114367",
+      "name": "yichang",
+      "font_class": "yichang",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "46114365",
+      "name": "huiping",
+      "font_class": "huiping",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "46114366",
+      "name": "fucha",
+      "font_class": "fucha",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "45895333",
+      "name": "错",
+      "font_class": "cuo",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "45895332",
+      "name": "对",
+      "font_class": "dui",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "45868924",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "45868923",
+      "name": "编辑点亮",
+      "font_class": "bianjidianliang",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "45678443",
+      "name": "shangjiantou",
+      "font_class": "shangjiantou",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "45678436",
+      "name": "Folder_Upload",
+      "font_class": "folder_upload",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "45156449",
+      "name": "dianxingcuowu",
+      "font_class": "dianxingcuowu",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
+    },
+    {
+      "icon_id": "45156448",
+      "name": "youxiudaan",
+      "font_class": "youxiudaan",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "45144366",
+      "name": "逆时针1",
+      "font_class": "nishizhen1",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
+    {
+      "icon_id": "45144370",
+      "name": "shunshizhen90",
+      "font_class": "shunshizhen90",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "45144368",
+      "name": "fangda",
+      "font_class": "fangda",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "45144365",
+      "name": "suoxiao",
+      "font_class": "suoxiao",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "45144369",
+      "name": "nishizhen90",
+      "font_class": "nishizhen90",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "45144367",
+      "name": "顺时针1",
+      "font_class": "shunshizhen1",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "45096429",
+      "name": "xiangyou",
+      "font_class": "xiangyou",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "45096428",
+      "name": "xiangzuo",
+      "font_class": "xiangzuo",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "45059763",
+      "name": "yijieshu",
+      "font_class": "yijieshu",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "45059762",
+      "name": "yuejuanzhong",
+      "font_class": "yuejuanzhong",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    },
+    {
+      "icon_id": "45059761",
+      "name": "chengjizhong",
+      "font_class": "chengjizhong",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "45059765",
+      "name": "mobanzhong",
+      "font_class": "mobanzhong",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "45059764",
+      "name": "saomiaozhong",
+      "font_class": "saomiaozhong",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "45037438",
+      "name": "daoru",
+      "font_class": "import",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "45037437",
+      "name": "daochu",
+      "font_class": "export",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "44946508",
+      "name": "paixu",
+      "font_class": "paixu",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "44890334",
+      "name": "nishizhen",
+      "font_class": "nishizhen",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "44890333",
+      "name": "shunshizhen",
+      "font_class": "shunshizhen",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "44890291",
+      "name": "close",
+      "font_class": "close",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "44890290",
+      "name": "open",
+      "font_class": "open",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "44616743",
+      "name": "shihepingmu",
+      "font_class": "shihepingmu",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "44616742",
+      "name": "shuaxin",
+      "font_class": "shuaxin",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "44616741",
+      "name": "shubiaofuwu",
+      "font_class": "shubiaofuwu",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "44562945",
+      "name": "Trending-down",
+      "font_class": "Trending-down",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "44562944",
+      "name": "Trending-up",
+      "font_class": "Trending-up",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "44562029",
+      "name": "qingchu",
+      "font_class": "qingchu",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "44562027",
+      "name": "mima",
+      "font_class": "mima",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "44562026",
+      "name": "yanzhengma",
+      "font_class": "yanzhengma",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "44562030",
+      "name": "xianshimima",
+      "font_class": "xianshimima",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "44562028",
+      "name": "buxianshimima",
+      "font_class": "buxianshimima",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "44562025",
+      "name": "zhanghao",
+      "font_class": "zhanghao",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "44562024",
+      "name": "shoujihao",
+      "font_class": "shoujihao",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "44524997",
+      "name": "liankaoguanli",
+      "font_class": "liankaoguanli",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "44524999",
+      "name": "xuexiaoguanli",
+      "font_class": "xuexiaoguanli",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "44524998",
+      "name": "yunweiyonghu",
+      "font_class": "yunweiyonghu",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "44514235",
+      "name": "return",
+      "font_class": "return",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "44505591",
+      "name": "renkejiaoshi",
+      "font_class": "renkejiaoshi",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "44505590",
+      "name": "xuenianxueqi",
+      "font_class": "xuenianxueqi",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "44505610",
+      "name": "xiala",
+      "font_class": "xiala",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "44505594",
+      "name": "gerenxinxi",
+      "font_class": "gerenxinxi",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "44505593",
+      "name": "quanxianguanli",
+      "font_class": "quanxianguanli",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "44505592",
+      "name": "nianjikemu",
+      "font_class": "nianjikemu",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "44505588",
+      "name": "yonghuguanli",
+      "font_class": "yonghuguanli",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "44505589",
+      "name": "banjimingdan",
+      "font_class": "banjimingdan",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "44505395",
+      "name": "yuejuanjiankong",
+      "font_class": "yuejuanjiankong",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "44505394",
+      "name": "yuejuanrenwu",
+      "font_class": "yuejuanrenwu",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "44505399",
+      "name": "zaixianzhika",
+      "font_class": "zaixianzhika",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "44505396",
+      "name": "wodekaoshi",
+      "font_class": "wodekaoshi",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "44505398",
+      "name": "fenxiguanli",
+      "font_class": "fenxiguanli",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "44505397",
+      "name": "caozuowendang",
+      "font_class": "caozuowendang",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "44501811",
+      "name": "fenxibaogao",
+      "font_class": "fenxibaogao",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "44501810",
+      "name": "kaoshizongshu",
+      "font_class": "kaoshizongshu",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "44501812",
+      "name": "deepseek",
+      "font_class": "deepseek",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "44501262",
+      "name": "chengjifenxi",
+      "font_class": "chengjifenxi",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    }
+  ]
+}

src/http/common/http.js

@@ -9,11 +9,11 @@ import router from '@/router'
 
 import { Loading,Message } from 'element-ui';
 const service1 = axios.create({
-  timeout: 120000
+  timeout: 120000 * 2
 });
 
 const service2 = axios.create({
-  timeout: 120000
+  timeout: 120000 * 2
 });
 
 var loading = null; // loading

src/main.js

@@ -15,6 +15,8 @@ import "@/styles/element-variables.scss";
 import "@/styles/common.scss";
 
 import "font-awesome/css/font-awesome.min.css";
+import './styles/XueKeWangQuestionStyles.css'
+import './assets/font2/iconfont.css'
 
 // 解决el-radio报错
 Vue.directive('removeAriaHidden', {

src/styles/XueKeWangQuestionStyles.css

@@ -0,0 +1,258 @@
+/* 
+    日期：2025年12月10日
+    作者：王国西
+    该文件用于定义学科网题目的样式
+    样式表来自于 https://open.xkw.com/document/sg12-60d507c6c8c2a78f/
+*/
+.qml-ques table,.qml-ques p,.qml-ques {
+    font-size:14px;
+}
+
+.qml-ques table tr:nth-child(2n),.qml-ques table tr {
+    background-color: unset;
+}
+
+
+.qml-ques table td {
+    padding:0;
+    max-width:unset;
+}
+
+.qml-ques [wave]{
+    text-decoration-style: wavy;
+    text-decoration-line: underline;
+    text-underline-position: auto;
+    white-space: pre-wrap;
+}
+
+.qml-ques [em] {
+    -webkit-text-emphasis-position: under;
+    text-emphasis-position: under right;
+    -webkit-text-emphasis-style: circle;
+    text-emphasis-style: circle;
+    white-space: pre-wrap;
+}
+
+
+.qml-ques [u] {
+    text-decoration: underline;
+}
+
+.qml-ques table tr {
+    background-color:unset;
+}
+.qml-paper {
+    background: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    margin: 26px auto 0;
+    max-width: 800px;
+    min-height: 300px;
+    padding: 24px;
+    position: relative;
+    width: 80%;
+    line-height: 1.8;
+
+}
+
+.qml-paper p {
+    margin-top: 0;
+    margin-bottom: 0;
+    min-height: 24px;
+}
+
+.qml-paper p, .qml-paper div {
+    word-break: break-all;
+    margin-bottom: 0;
+}
+
+.qml-paper .bracket {
+    text-decoration: none;
+}
+
+.bk-mp {
+    margin-left: 10px;
+}
+
+.qml-answer {
+    word-break: break-all;
+}
+
+.style-bold {
+    font-weight: bold;
+}
+
+.style-italic {
+    font-style: italic
+}
+
+.style-strike {
+    text-decoration: line-through;
+}
+
+.style-underline {
+    text-decoration: underline;
+    white-space: pre-wrap;
+}
+
+.qml-col1, .qml-col2, .qml-col3, .qml-col4 {
+    width: 100%
+}
+
+.qml-col2 td {
+    width: 50%;
+}
+
+.qml-col3 td {
+    width: 33.3%;
+}
+
+.qml-col1 td {
+    width: 100%
+}
+
+.qml-col4 td {
+    width: 25%
+}
+
+.qml-stem img {
+    vertical-align: middle
+}
+
+.qml-stem {
+    position: relative;
+    margin-top: 10px;
+    word-break: break-all;
+}
+
+.qml-stem:first-child {
+    margin-top: 0;
+}
+
+.qml-sq {
+    position: relative;
+    padding-left: 25px;
+}
+
+.qml-inline {
+    display: inline;
+}
+
+.qml-ques {
+    display: block;
+    word-break: break-all;
+    position: relative;
+    line-height: 1.8;
+    font-family: "Times New Roman", "宋体";
+    margin-bottom:20px;
+}
+
+.qml-bk {
+    word-break: break-word;
+    background-color: #ecf9ff;
+    display:inline-block;
+    line-height: 0.8;
+    border-bottom:1px solid #000;
+    text-align: center;
+    text-decoration-color:unset !important;
+}
+
+.qml-answer {
+    margin-bottom: 5px;
+    margin-left:10px;
+}
+
+.qml-explanation .qml-seg p,
+.qml-exps-sq{
+    margin-left:10px;
+}
+
+.qml-block-ans {
+    display: block;
+}
+
+.qml-inline-ans {
+    margin-right: 15px;
+    display: inline-block;
+}
+
+
+.qml-an-sq {}
+.double-line {
+    color: #333;
+    border-bottom: 3px double #000;
+}
+
+.qml-an {
+    margin-right: 10px;
+}
+
+.qml-paper table[border] table[border] {
+    border-collapse: collapse;
+    border-color: #efefef;
+}
+
+.qml-paper table[border] td p {
+    padding: 0;
+    line-height: 1;
+}
+
+.qml-paper span.title-number + table.qml-og {
+    position: relative;
+    top: -3px;
+}
+
+.qml-paper .qml-ques .qml-sq .qml-stem {
+    padding-left: 0;
+}
+
+.qml-exact:before {
+    display:inline;
+    background-color:#5a9600;
+    color:#FFF;
+    font-size:12px;
+    border-radius: 2px;
+    padding:0 4px;
+    line-height: 1;
+    content:"机阅";
+    margin-right:3px;
+}
+
+.qml-ques img,.qml-answer img,.qml-stem img,.qml-explanation img{
+    vertical-align: middle;
+}
+
+[wave] {
+    text-decoration-style: wavy;
+    text-decoration-line: underline;
+    text-underline-position: under;
+    white-space: pre-wrap;
+}
+
+table[align="left"]{
+    margin-left:0;
+    margin-right:auto;
+}
+
+table[align="center"]{
+    margin-left:auto;
+    margin-right:auto;
+}
+
+table[align="right"]{
+    margin-left:auto;
+    margin-right:0;
+}
+
+table td.slash-1{
+    background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMC41Ii8+PC9zdmc+) no-repeat 100% center;
+}
+.qml-inline.qml-og {
+    display: inline-flex;
+    width: calc(100% - 40px);
+}
+.qml-inline.qml-og span.qml-op {
+    flex-basis: 0;
+    flex-grow: 1;
+}
+
+.qml-sq .qml-stem span.ques-no {display: inline-block;max-width: 40px;white-space: nowrap}

src/views/analysisReport/wrongQuestion/Download.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog title="个性化提升手册" :visible="visible" width="530px" @abort="handleClose">
+    <el-dialog title="个性化提升手册" :visible="visible" width="530px" @close="handleClose">
         <div class="box">
             <div class="item" :class="{ active: active === 1 }" @click="changeAnswer(1)">答案解析在每题后</div>
             <div class="item" :class="{ active: active === 2 }" @click="changeAnswer(2)">答案解析在尾部</div>

src/views/analysisReport/wrongQuestion/index.vue

@@ -12,7 +12,7 @@
         <div class="content">
             <div class="right_btn">
                 <el-button size="medium" @click="downloadDialogVisible = true">下载错题本</el-button>
-                <el-button type="primary" size="medium">下载个性化提升手册</el-button>
+                <el-button type="primary" size="medium" @click="downloadDialogVisible = true">下载个性化提升手册</el-button>
             </div>
 
             <Download :visible.sync="downloadDialogVisible" :examId="examId" :subjectCode="subjectCode" />
@@ -32,6 +32,7 @@
 
                             <div class="question_content" v-if="question.sourceType === 1"
                                 v-html="question.questionData.questionStem"></div>
+
                             <div class="question_content" v-if="question.sourceType === 2">
                                 <img :src="question.questionImg" alt="" width="100%">
                             </div>
@@ -66,21 +67,28 @@
 
                         <div class="card_buttom">
                             <div class="btn_box">
-                                <span class="black" size="small" @click="question.answerShow = !question.answerShow">
+                                <span class="black" :class="{ blue: question.answerShow }" size="small" @click="ShowAnserAndParse(1, question);">
+                                    <i class="iconfont icon_daan"></i>
                                     我的答案
+                                    <i class="answerShow_content" v-if="question.answerShow && !question.parseShow"></i>
                                 </span>
-                                <span class="black" size="small" @click="question.parseShow = !question.parseShow">
+
+                                <span class="black" :class="{ blue: question.parseShow }" size="small" @click="ShowAnserAndParse(2, question);">
+                                    <i class="iconfont icon_jiexi"></i>
                                     查看解析
+                                    <i class="parseShow_content" v-if="question.parseShow && !question.answerShow"></i>
                                 </span>
 
                                 <template v-if="question.errorStatus === 0">
                                     <template v-if="errorType === -1 || errorType === 0">
                                         <span class="black" size="small"
                                             @click="_markStudentErrorQuestion(question, 1)">
+                                            <i class="iconfont icon_biaojiyizhangwo"></i>
                                             标记为已掌握
                                         </span>
                                         <span class="black" size="small"
                                             @click="_markStudentErrorQuestion(question, 2)">
+                                            <i class="iconfont icon_jiarufuxiben"></i>
                                             加入复习本
                                         </span>
                                     </template>
@@ -88,26 +96,28 @@
 
                                 <template v-if="errorType === 1 || question.errorStatus === 1">
                                     <span class="black" size="small" @click="_markStudentErrorQuestion(question, 0)">
+                                        <i class="iconfont icon_biaojiweizhangwo"></i>
                                         标记为未掌握
                                     </span>
                                 </template>
 
                                 <template v-if="errorType === 2 || question.errorStatus === 2">
                                     <span class="black" size="small" @click="_markStudentErrorQuestion(question, 0)">
+                                        <i class="iconfont icon_yichufuxiben"></i>
                                         移除复习本
                                     </span>
                                 </template>
                             </div>
 
-                            <div class="content" v-if="question.parseShow">
-                                <div class="content_inner" v-if="question.sourceType === 1"
+                            <div class="content" v-if="question.parseShow && !question.answerShow">
+                                <div class="content_inner" style="line-height: 1.5;" v-show="question.sourceType === 1"
                                     v-html="question.questionData.analysis"></div>
                                 <div class="content_inner" v-if="question.sourceType === 2">
                                     <img :src="question.parseImg" alt="" width="100%" />
                                 </div>
                             </div>
 
-                            <div class="content" v-if="question.answerShow">
+                            <div class="content" v-if="question.answerShow && !question.parseShow">
                                 <div class="content_inner" v-if="question.sourceType === 1"
                                     v-html="question.questionData.answer"></div>
                                 <div class="content_inner" v-if="question.sourceType === 2">
@@ -117,6 +127,7 @@
                         </div>
                     </div>
 
+                    <!-- 变式题推送，无数据 -->
                     <div class="question_card" v-if="question.variationQuestion">
                         <!-- TODO: 这个地方后端暂无数据 -->
                         <div class="card_top">
@@ -248,6 +259,18 @@ export default {
     },
 
     methods: {
+        ShowAnserAndParse(type, question) {
+            if (type === 1) {
+                question.answerShow = !question.answerShow; 
+                question.parseShow = false
+            }
+
+            if (type === 2) {
+                question.parseShow = !question.parseShow; 
+                question.answerShow = false
+            }
+        },
+
         async _queryStudentErrorQuestion() {
             const instance = Loading.service({ fullscreen: true });
             const { subjectCode, gradeCode, examType, examId, errorType, pageParam: { pageNum, pageSize } } = this
@@ -335,6 +358,7 @@ export default {
     margin-bottom: 10px;
     border: 1px solid #DCDFE6;
     border-radius: 10px;
+    overflow: hidden;
 
     .card_top {
         padding: 20px;
@@ -444,13 +468,12 @@ export default {
     }
 
     .card_buttom {
-        background-color: #DCDFE6;
+        background-color: #F0F2F5;
         padding: 15px 20px;
 
         .btn_box {
             display: flex;
             justify-content: flex-end;
-            margin-bottom: 20px;
 
             span {
                 margin-left: 20px;
@@ -461,6 +484,7 @@ export default {
         .content {
             padding: 20px;
             background-color: #ffffff;
+            margin-top: 20px;
 
             .content_inner {
                 border: 2px dotted #DCDFE6;
@@ -468,6 +492,40 @@ export default {
                 padding: 10px;
             }
         }
+
+        .parseShow_content {
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                right: 20px; /* 根据需要调整三角水平位置 */
+                top: 24px; /* 三角放置在外部，超出上方 */
+                width: 0;
+                height: 0;
+                border-left: 10px solid transparent;
+                border-right: 10px solid transparent;
+                border-bottom: 12px solid  #ffffff;
+                z-index: 2;
+            }
+        }
+
+        .answerShow_content {
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                right: 20px; /* 根据需要调整三角水平位置 */
+                top: 24px; /* 三角放置在外部，超出上方 */
+                width: 0;
+                height: 0;
+                border-left: 10px solid transparent;
+                border-right: 10px solid transparent;
+                border-bottom: 12px solid  #ffffff;
+                z-index: 2;
+            }
+        }
     }