修改导航栏样式

src/client/TopNavigation.vue

@@ -1,26 +1,47 @@
 <template>
   <div>
     <div>
-      <nav class="navbar navbar-default">
+      <nav class="navbar navbar-default navBack">
         <div class="container-fluid">
+          <!-- Brand and toggle get grouped for better mobile display -->
           <div class="navbar-header">
+            <button
+              type="button"
+              class="navbar-toggle collapsed"
+              data-toggle="collapse"
+              data-target="#bs-example-navbar-collapse-1"
+              aria-expanded="false"
+            >
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar" />
+              <span class="icon-bar" />
+              <span class="icon-bar" />
+            </button>
             <a
               class="navbar-brand"
               
-              @click="$emit('menuVisibleChanged')"
+              @click="showMenu"
             >
-              <i class="fa fa-bars" />
+              <i v-if="visible" class="glyphicon glyphicon-chevron-right" />
+              <i v-if="visible==false" class="glyphicon glyphicon-chevron-left" />
             </a>
           </div>
 
-          <TopNavUserInfo :login-info="loginInfo" />
-          <TopNavClientSelect :login-info="loginInfo" />
-          <TopNavMessage :login-info="loginInfo" />
-          <TopNavVideoCallCenter />
-          <TopNavDownload />
-          <LoginNotice />
+          <!-- Collect the nav links, forms, and other content for toggling -->
+          <div
+            id="bs-example-navbar-collapse-1"
+            class="collapse navbar-collapse"
+          >
+            <TopNavUserInfo :login-info="loginInfo" />
+            <TopNavClientSelect :login-info="loginInfo" />
+            <TopNavMessage :login-info="loginInfo" />
+            <TopNavVideoCallCenter />
+            <TopNavDownload />
+            <LoginNotice />
+          </div>
+          <!-- /.navbar-collapse -->
         </div>
-
+        <!-- /.container-fluid -->
         <div class="clearfix" />
       </nav>
     </div>
@@ -38,7 +59,6 @@ import TopNavDownload from './top-nav-download.vue';
 import LoginNotice from './LoginNotice.vue';
 
 export default {
-
   components: {
     AuthImage,
     TopNavClientSelect,
@@ -55,12 +75,11 @@ export default {
       loginInfo: '',
       webSocket: undefined,
       clientCanAccessList: [],
+      visible:true,
     };
   },
 
-  watch: {
-
-  },
+  watch: {},
 
   mounted: function () {
     this.getLocalStorage();
@@ -72,9 +91,16 @@ export default {
       var json = localStorage.getItem('#LoginInfo');
       this.loginInfo = JSON.parse(json);
     },
+    showMenu:function(){
+      this.visible = !this.visible;
+      this.$emit('menuVisibleChanged');
+    },
   },
 };
 </script>
 
 <style scoped>
+.navBack{
+  z-index: 9999999;
+}
 </style>