左侧导航栏优化

 <template>
 <template>
         <el-menu default-active="$route.path"
         <el-menu default-active="$route.path"
-                 class="el-menu-vertical-demo"
+                 :class="collapsed?'logo-collapse-width':'logo-width'"
                  background-color="#26384c"
                  background-color="#26384c"
                  text-color="#fff"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                  active-text-color="#ffd04b"
@@ -11,10 +11,13 @@
                  unique-opened
                  unique-opened
                  router
                  router
                  :collapse="collapsed">
                  :collapse="collapsed">
-            <el-radio-group v-model="collapsed" style="margin-bottom: 20px;">
-                <el-radio-button :label="false">展开</el-radio-button>
-                <el-radio-button :label="true">收起</el-radio-button>
-            </el-radio-group>
+            <!--                 class="el-menu-vertical-demo"-->
+
+            <!--            <el-radio-group v-model="collapsed" style="margin-left: 200px;">-->
+<!--                <el-radio-button :label="false">展开</el-radio-button>-->
+<!--                <el-radio-button :label="true">收起</el-radio-button>-->
+<!--            </el-radio-group>-->
+
             <div align="center" style="background-color: #2b2f3a;height: 67px">
             <div align="center" style="background-color: #2b2f3a;height: 67px">
                 <img src="~@/assets/logo1.png">
                 <img src="~@/assets/logo1.png">
                 <h1 style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px">航空物流公共信息服务平台</h1>
                 <h1 style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px">航空物流公共信息服务平台</h1>
@@ -28,7 +31,8 @@
                     <el-menu-item v-for="child in item.children"
                     <el-menu-item v-for="child in item.children"
                                   :index="child.path"
                                   :index="child.path"
                                   :key="child.permissionId"
                                   :key="child.permissionId"
-                                  v-if="!child.hidden">
+                                  v-if="!child.hidden"
+                                  class="el-submenu__title">
                         {{child.name}}
                         {{child.name}}
                     </el-menu-item>
                     </el-menu-item>
                 </el-submenu>
                 </el-submenu>
@@ -45,9 +49,10 @@
     import {userMenu} from '@/api/perm_api';
     import {userMenu} from '@/api/perm_api';
     export default {
     export default {
         name: 'NavMenus',
         name: 'NavMenus',
+        props:['collapsed'],
         data() {
         data() {
             return {
             return {
-                collapsed: false,
+                rotate:false,
                 menu:[
                 menu:[
                     {
                     {
                         permissionId:1,
                         permissionId:1,
@@ -115,6 +120,13 @@
             }
             }
         },
         },
         methods: {
         methods: {
+            start(){
+                this.rotate=!this.rotate;
+                console.log(this.rotate)
+            },
+            collapse:function(){
+                this.collapsed=!this.collapsed;
+            },
             onSubmit() {
             onSubmit() {
                 console.log('submit!');
                 console.log('submit!');
             },
             },
@@ -176,5 +188,29 @@
 <style scoped lang="scss">
 <style scoped lang="scss">
 
 
 </style>
 </style>
-<style>
+<style scoped lang="scss">
+    .go{
+        transform:rotate(-180deg);
+    }
+    .el-menu-vertical-demo{
+        position: relative;
+    }
+    .tools{
+        position:absolute;
+
+    }
+    .logo-width{
+        width:22%;
+        margin: -20px;
+    }
+    .logo-collapse-width{
+        width:90px;
+        margin: -20px;
+
+    }
+    el-submenu__title:hover {
+        background-color: #4f6273;
+        border-left: 3px solid #be1fd9
+
+    }
 </style>
 </style>

@@ -4,14 +4,14 @@
             <el-col :span="14" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
             <el-col :span="14" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
                 {{collapsed?'':sysName}}
                 {{collapsed?'':sysName}}
             </el-col>
             </el-col>
-<!--            <el-col :span="6">-->
-<!--                <div class="tools" @click.prevent="collapse"  style="width: 15px;margin-top: 72px;margin-left:1px;z-index:9999;position:absolute;">-->
-<!--&lt;!&ndash;                    ;margin-top: 80px;z-index:9999;margin-left: 170px&ndash;&gt;-->
-<!--&lt;!&ndash;                    <i class="el-icon-s-operation" style="color: rgb(38,56,76)"></i>&ndash;&gt;-->
-<!--                    <img :class="[rotate?'go':'aa']" @click="start" width="20" height="44" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABCCAYAAABAfGYuAAAArklEQVRYhe3YIQ4CMRBG4b+IOhyS26DXEjySBE6A4QSINasRSAx3guBJECTdLMn6dtp0Be8loz/Tjhh3OLVBEzSbAhUwMDAwMDAwMDAw8B/A5+PuNzEtF/NycGwDut9u6sIj6r2vB6eiRWALmg1b0SzYOWndrExoFhyC1F3vejxfdeGh9+er9nIz4dmPy4oX+U4WvNgCScWLrswRj4k7FzAwMDAwMDAwMDBwYnLqAfLHOpMP7/PBAAAAAElFTkSuQmCC">-->
-<!--                </div>-->
-<!--&lt;!&ndash;                标签i的图标 fa-align-justify&ndash;&gt;-->
-<!--            </el-col>-->
+            <el-col :span="6">
+                <div class="tools" @click.prevent="collapse"  style="width: 15px;margin-top: 72px;margin-left:-15px;z-index:9999;position:absolute;">
+<!--                    ;margin-top: 80px;z-index:9999;margin-left: 170px-->
+<!--                    <i class="el-icon-s-operation" style="color: rgb(38,56,76)"></i>-->
+                    <img :class="[rotate?'go':'aa']" @click="start" width="20" height="44" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABCCAYAAABAfGYuAAAArklEQVRYhe3YIQ4CMRBG4b+IOhyS26DXEjySBE6A4QSINasRSAx3guBJECTdLMn6dtp0Be8loz/Tjhh3OLVBEzSbAhUwMDAwMDAwMDAw8B/A5+PuNzEtF/NycGwDut9u6sIj6r2vB6eiRWALmg1b0SzYOWndrExoFhyC1F3vejxfdeGh9+er9nIz4dmPy4oX+U4WvNgCScWLrswRj4k7FzAwMDAwMDAwMDBwYnLqAfLHOpMP7/PBAAAAAElFTkSuQmCC">
+                </div>
+<!--                标签i的图标 fa-align-justify-->
+            </el-col>
 <!--            <el-col :span="4" class="userinfo">-->
 <!--            <el-col :span="4" class="userinfo">-->
 <!--                <el-dropdown trigger="hover" >-->
 <!--                <el-dropdown trigger="hover" >-->
 <!--                    <span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img :src="this.sysUserAvatar"/></span>-->
 <!--                    <span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img :src="this.sysUserAvatar"/></span>-->
@@ -44,7 +44,7 @@
 <!--            </el-dialog>-->
 <!--            </el-dialog>-->
 <!--        </el-col>-->
 <!--        </el-col>-->
         <el-col :span="24" class="main">
         <el-col :span="24" class="main">
-            <NavMenu></NavMenu>
+            <NavMenu :collapsed="collapsed"></NavMenu>
 <!--                <aside :class="collapsed?'menu-collapsed':'menu-expanded'">-->
 <!--                <aside :class="collapsed?'menu-collapsed':'menu-expanded'">-->
 <!--                    &lt;!&ndash;导航菜单&ndash;&gt;-->
 <!--                    &lt;!&ndash;导航菜单&ndash;&gt;-->
 <!--                    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen"-->
 <!--                    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen"-->
@@ -362,7 +362,7 @@
                 }
                 }
             }
             }
             .logo-width{
             .logo-width{
-                width:380px;
+                width:17%;
             }
             }
             .logo-collapse-width{
             .logo-collapse-width{
                 width:60px
                 width:60px
@@ -509,9 +509,11 @@
         display: inline-block;
         display: inline-block;
         /*min-width: 758px;*/
         /*min-width: 758px;*/
         /*max-width: 1190px;*/
         /*max-width: 1190px;*/
-        padding-right: 15px;
         overflow-y: scroll;
         overflow-y: scroll;
         width: 100%;
         width: 100%;
+        z-index: 999;
+        background-color: white;
+
     }
     }
     .go{
     .go{
         transform:rotate(-180deg);
         transform:rotate(-180deg);