[Update] 有货左侧菜单

src/components/Hamburger/index.vue

@@ -1,6 +1,8 @@
 <template>
-  <div style="" @click="toggleClick">
-    <el-button type="primary" size="mini"> <i class="fa fa-bars" style="color: white; margin-right: 0" /> </el-button>
+  <div style="">
+    <el-button type="primary" class="hamburger" size="mini"  @click="toggleClick">
+      <i class="fa fa-bars" style="color: white; margin-right: 0"></i>
+    </el-button>
   </div>
 </template>
 
@@ -23,13 +25,11 @@ export default {
 
 <style scoped>
 .hamburger {
-  display: inline-block;
-  vertical-align: middle;
-  width: 20px;
-  height: 20px;
+ padding: 7px 10px;
 }
 
 .hamburger.is-active {
   transform: rotate(180deg);
 }
+
 </style>

src/icons/svg/bars-solid.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>

src/icons/svg/check-square-o.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1584946958165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="680" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M841.142857 531.428571l0 181.714286q0 68-48.285714 116.285714t-116.285714 48.285714l-475.428571 0q-68 0-116.285714-48.285714t-48.285714-116.285714l0-475.428571q0-68 48.285714-116.285714t116.285714-48.285714l475.428571 0q36 0 66.857143 14.285714 8.571429 4 10.285714 13.142857 1.714286 9.714286-5.142857 16.571429l-28 28q-5.714286 5.714286-13.142857 5.714286-1.714286 0-5.142857-1.142857-13.142857-3.428571-25.714286-3.428571l-475.428571 0q-37.714286 0-64.571429 26.857143t-26.857143 64.571429l0 475.428571q0 37.714286 26.857143 64.571429t64.571429 26.857143l475.428571 0q37.714286 0 64.571429-26.857143t26.857143-64.571429l0-145.142857q0-7.428571 5.142857-12.571429l36.571429-36.571429q5.714286-5.714286 13.142857-5.714286 3.428571 0 6.857143 1.714286 11.428571 4.571429 11.428571 16.571429zm132-279.428571l-465.142857 465.142857q-13.714286 13.714286-32.571429 13.714286t-32.571429-13.714286l-245.714286-245.714286q-13.714286-13.714286-13.714286-32.571429t13.714286-32.571429l62.857143-62.857143q13.714286-13.714286 32.571429-13.714286t32.571429 13.714286l150.285714 150.285714 369.714286-369.714286q13.714286-13.714286 32.571429-13.714286t32.571429 13.714286l62.857143 62.857143q13.714286 13.714286 13.714286 32.571429t-13.714286 32.571429z" p-id="681"></path></svg>

src/styles/index.scss

@@ -10,7 +10,7 @@
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: auto;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }

src/styles/menu.scss

@@ -3,7 +3,7 @@
   font-weight: 600;
 }
 
-.el-menu  i.fa {
+.el-menu i.fa {
   width: 14px;
   margin-right: 10px;
 }
@@ -24,7 +24,23 @@
   line-height: 46px;
 }
 
-li.is-opened{
+.el-menu-item:hover, .el-menu-item:focus {
+  color: white;
+}
+
+.el-menu--collapse.el-menu .fa {
+  padding: 14px 20px 14px 20px;
+}
+
+.navbar li.is-active {
+  border: none;
+}
+
+.nest-menu li.is-active {
+  border: none;
+}
+
+li.is-opened, li.is-active {
   border-left: 4px solid #19aa8d;
 }