侧边栏ui调整

src/components/home/MainFrame.vue

@@ -58,7 +58,7 @@ export default {
   top: 64px;
   color: rgba(16, 16, 16, 1);
   line-height: 20px;
-  background-color: #266999;
+  background-color: #1461cc;
   color: rgba(16, 16, 16, 1);
   font-size: 14px;
   text-align: center;

src/layout/Sidebar.vue

@@ -1,41 +1,41 @@
 <template>
-  <div>
+  <div style="background-color: #1461cc">
     <el-menu
-      style="border: 0"
-      :key="index"
-      background-color="#266999"
+      style="border: 0;text-align: left"
+      background-color="#1461cc"
       text-color="rgba(255, 255, 255, 1)"
-      active-text-color="#ffd04b"
+      active-text-color="white"
       :collapse="isCollapse"
       :collapse-transition="false"
       router
       mode="vertical"
       :unique-opened="true"
-      v-for="(menu, index) in menus"
     >
-      <el-submenu :index="String(index)" v-if="menu.submenus != null">
-        <template slot="title">
-          <el-image :src="menu.url"></el-image>
-          <span>{{ menu.name }}</span>
-        </template>
+      <template v-for="(menu, index) in menus" >
+        <el-submenu :index="menu.path" v-if="menu.submenus != null" :key="menu.path">
+          <template slot="title">
+            <el-avatar :src="menu.url" :size="25" shape="square" style="background-color: transparent;margin-right: 12px" ></el-avatar>
+            <span>{{ menu.name }}</span>
+          </template>
+          <el-menu-item
+              v-for="submenu in menu.submenus"
+              :index="submenu.path"
+              :key="submenu.path"
+          >
+            <span style="margin-left: 40px">{{ submenu.name }}</span>
+          </el-menu-item>
+        </el-submenu>
         <el-menu-item
-          v-for="submenu in menu.submenus"
-          :index="submenu.path"
-          :key="submenu.path"
+            v-if="menu.submenus == null"
+            :key="menu.path"
+            :index="menu.path"
         >
-          <span style="margin-left: 40px">{{ submenu.name }}</span>
-        </el-menu-item>
-      </el-submenu>
-      <el-menu-item
-        v-if="menu.submenus == null"
-        :key="menu.path"
-        :index="menu.path"
-      >
-        <el-image :src="menu.url"></el-image>
-        <span slot="title">
+          <el-avatar :src="menu.url" :size="25" shape="square" style="background-color: transparent;margin-right: 6px" ></el-avatar>
+          <span slot="title">
           {{ menu.name }}
         </span>
-      </el-menu-item>
+        </el-menu-item>
+      </template>
     </el-menu>
   </div>
 </template>
@@ -151,6 +151,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/ .el-menu-item.is-active {
+  background-color: #409EFF !important;
+}
+
+
 /deep/.el-submenu__icon-arrow {
   display: none;
 }
@@ -179,15 +184,18 @@ export default {
   border: none;
   text-align: -webkit-right;
 }
+/deep/ .el-submenu .el-menu-item {
+  padding: 0 0 0 25px !important;
+  text-align: left;
+}
 
 .el-menu-item {
-  font-size: 18px;
+  font-size: 16px;
   padding: 0 40px;
   cursor: pointer;
 }
 
 /deep/.el-submenu__title {
-  font-size: 18px;
-  padding: 0 40px;
+  font-size: 16px;
 }
 </style>