From 56cac05818955aeae7e86d7b4abaed98f27fdb48 Mon Sep 17 00:00:00 2001
From: xing <fthvgb1@163.com>
Date: Wed, 17 Jun 2020 10:38:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/fonts/demo_fontclass.html | 23 +++++++++++------------
 src/components/Home.vue              | 18 ++++++++++++++----
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/assets/fonts/demo_fontclass.html b/src/assets/fonts/demo_fontclass.html
index a4cab35..bbbbf0b 100755
--- a/src/assets/fonts/demo_fontclass.html
+++ b/src/assets/fonts/demo_fontclass.html
@@ -11,67 +11,67 @@
     <div class="main markdown">
         <h1>IconFont 图标</h1>
         <ul class="icon_lists clear">
-            
+
                 <li>
                 <i class="icon iconfont icon-showpassword"></i>
                     <div class="name">show-password </div>
                     <div class="fontclass">.icon-showpassword</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-user"></i>
                     <div class="name">user</div>
                     <div class="fontclass">.icon-user</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-users"></i>
                     <div class="name">users</div>
                     <div class="fontclass">.icon-users</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-3702mima"></i>
                     <div class="name">password-b</div>
                     <div class="fontclass">.icon-3702mima</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-shangpin"></i>
                     <div class="name">06商品</div>
                     <div class="fontclass">.icon-shangpin</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-danju"></i>
                     <div class="name">25单据</div>
                     <div class="fontclass">.icon-danju</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-tijikongjian"></i>
                     <div class="name">28体积、空间</div>
                     <div class="fontclass">.icon-tijikongjian</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-morentouxiang"></i>
                     <div class="name">225默认头像</div>
                     <div class="fontclass">.icon-morentouxiang</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-baobiao"></i>
                     <div class="name">406报表</div>
                     <div class="fontclass">.icon-baobiao</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-lock_fill"></i>
                     <div class="name">lock_fill</div>
                     <div class="fontclass">.icon-lock_fill</div>
                 </li>
-            
+
         </ul>
 
         <h2 id="font-class-">font-class引用</h2>
@@ -88,7 +88,6 @@
         <p>使用步骤如下：</p>
         <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
 
-
         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
         <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 312805a..cac44b2 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -12,19 +12,19 @@
         <el-menu
           background-color="#313743"
           text-color="#fff"
-          active-text-color="#ffd04b">
+          active-text-color="#3497FF">
           <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
             <!-- 一级菜单模板 -->
             <template slot="title">
               <!--图标-->
-              <i class="el-icon-location"></i>
+              <i :class="iconsObjs[item.id]"></i>
               <!--文本-->
               <span>{{item.authName}}</span>
             </template>
             <!--二级菜单-->
             <el-menu-item :index="subitem.id+''" v-for="subitem in item.children " :key="subitem.id + ''">
               <!--图标-->
-              <i class="el-icon-location"></i>
+              <i class="el-icon-menu"></i>
               <!--文本-->
               <span>{{subitem.authName}}</span>
             </el-menu-item>
@@ -42,7 +42,14 @@ export default {
   name: 'Home',
   data () {
     return {
-      menuList: []
+      menuList: [],
+      iconsObjs: {
+        125: 'iconfont icon-user',
+        103: 'iconfont icon-tijikongjian',
+        101: 'iconfont icon-shangpin',
+        102: 'iconfont icon-danju',
+        145: 'iconfont icon-baobiao'
+      }
     }
   },
   methods: {
@@ -94,4 +101,7 @@ export default {
   .el-main{
     background-color: #E9EDF1;
   }
+  .iconfont {
+    margin-right: 10px;
+  }
 </style>