Ver código fonte

菜单图标

lihongxiao 2 anos atrás
pai
commit
f851a3e66e

+ 1 - 1
index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <script src="//at.alicdn.com/t/c/font_4439599_mh8k9smvtjr.js"></script>
+    <script src="//at.alicdn.com/t/c/font_4439599_0s6fw5vx85h.js"></script>
     <title>管理平台</title>
   </head>
   <body style="margin: 0;">

+ 5 - 2
src/assets/css/common.css

@@ -110,14 +110,14 @@
     border-bottom:  1px solid #F1F3F6;
 }
 .el-pager li.active,.el-select-dropdown__item.selected,.el-button--text,.el-tabs__item.is-active,.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
-.el-checkbox__input.is-checked+.el-checkbox__label{
+.el-checkbox__input.is-checked+.el-checkbox__label,.el-button--primary.is-plain:focus{
 	color: var(--themeColor);
 }
 .el-range-editor.is-active,.el-pagination button,.el-pager li,.el-pagination__sizes .el-input .el-input__inner:hover,.el-checkbox__inner:hover
 ,.el-range-editor.is-active, .el-range-editor.is-active:hover{
 	border-color: var(--themeColorHover); 
 } 
-.el-select .el-input.is-focus .el-input__inner ,.el-input__inner:focus,.el-select .el-input__inner:focus {
+.el-select .el-input.is-focus .el-input__inner ,.el-input__inner:focus,.el-select .el-input__inner:focus,.el-button--primary.is-plain:focus {
 	border-color: var(--themeColor);
  }
 .el-radio__input.is-checked + .el-radio__label {
@@ -132,3 +132,6 @@
 	border: none;
     background-color: transparent;
 }
+.el-button--primary.is-plain:focus{
+    background-color: #C8CDD9;
+}

+ 7 - 1
src/components/MenuTree/index.vue

@@ -2,12 +2,18 @@
   <el-submenu  v-if="menu.children && menu.children.length >= 1" :index="menu.id.toString()">
     <template class="firstMenu" slot="title">
       <i :class="menu.icon" ></i>
+      <!-- <svg class="icon" aria-hidden="true">
+        <use :xlink:href="menu.icon"></use>
+    </svg> -->
       <span slot="title" class="firstMenu" >{{menu.name}}</span>
     </template>
     <MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
   </el-submenu>
   <el-menu-item v-else :index="menu.id.toString()" @click="handleRoute(menu)">
     <i :class="menu.icon"></i>
+    <!-- <svg aria-hidden="true"  style="    width: 20px;height: 20px;" >
+      <use xlink:href="#icon-chexianludan-yixuanzhong"></use>
+  </svg> -->
     <span slot="title">{{menu.name}}</span>
   </el-menu-item>
 </template>
@@ -54,5 +60,5 @@ export default {
 // :deep.el-menu-item.is-active{
 //   background-color: #428BCA !important;
 // }
-
+// .el-menu-item.is-active i
 </style>

+ 7 - 1
src/views/Sys/Menu.vue

@@ -25,7 +25,13 @@
       </table-tree-column>
       <el-table-column header-align="center" align="center" label="图标">
         <template slot-scope="scope">
-          <i :class="scope.row.icon || ''"></i>
+          <!-- <i :class="scope.row.icon || ''"></i> -->
+          <!-- <svg class="icon" aria-hidden="true">
+        <use xlink:href="#icon-chexianjiesuan-yixuanzhong"></use>
+    </svg> -->
+    <svg aria-hidden="true"  style="    width: 20px;height: 20px;" >
+      <use xlink:href="#icon-chexianludan-yixuanzhong"></use>
+  </svg>
         </template>
       </el-table-column>
       <el-table-column prop="type" header-align="center" align="center" label="类型">