公共导航交互顶部侧边栏

src/assets/css/public/common.less

@@ -143,4 +143,8 @@ body {
   .el-message__content {
     color: #fff !important;
   }
+}
+/**页面盒子**/
+.pagex{
+  padding:20px;
 }
\ No newline at end of file

src/assets/css/public/common.min.css

-html {
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-}
-html * {
-  outline: 0;
-  -webkit-text-size-adjust: none !important;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
-}
-html,
-body {
-  font-family: PingFangSC-Regular, PingFang SC, 'Microsoft Yahei', sans-serif;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-code,
-form,
-fieldset,
-legend,
-input,
-textarea,
-p,
-blockquote,
-th,
-td,
-hr,
-button,
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-menu,
-nav,
-section {
-  margin: 0;
-  padding: 0;
-}
-button,
-input,
-select,
-textarea {
-  font-size: 100%;
-  border: none;
-  -webkit-appearance: none;
-}
-input[type=button],
-input[type=file],
-input[type=submit] {
-  cursor: pointer;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-ol,
-ul,
-dl {
-  list-style: none;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 100%;
-  font-weight: 500;
-}
-em,
-b,
-i {
-  font-style: normal;
-}
-a {
-  text-decoration: none;
-}
-img {
-  border: none;
-}
-.clr {
-  *zoom: 1;
-  clear: both;
-}
-.clr:after {
-  content: ".";
-  clear: both;
-  height: 0;
-  visibility: hidden;
-  display: block;
-}
-.fl {
-  float: left;
-  _display: inline;
-}
-.fr {
-  float: right;
-  _display: inline;
-}
-.va-t {
-  vertical-align: top;
-}
-.va-m {
-  vertical-align: middle;
-}
-.va-b {
-  vertical-align: bottom;
-}
-.lineBlock {
-  display: inline-block;
-  *display: inline;
-  zoom: 1;
-  letter-spacing: normal;
-  word-spacing: normal;
-}
-.lbBox {
-  font-size: 0 !important;
-  *word-spacing: -1px !important;
-}
-.emptys {
-  margin-left: -1px;
-  width: 1px;
-  height: 100%;
-  font-size: 0;
-  vertical-align: middle;
-}
-.boxsiz {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-html,
-body {
-  width: 100%;
-  height: 100%;
-  -webkit-overflow-scrolling: touch;
-}
-body {
-  overflow-x: hidden;
-  background: #F1F4FA;
-}
-/**element-ui 样式重写**/
-.el-message--info {
-  min-width: auto !important;
-  border: 0px !important;
-  background: rgba(0, 0, 0, 0.4) !important;
-}
-.el-message--info .el-icon-info {
-  display: none;
-}
-.el-message--info .el-message__content {
-  color: #fff !important;
-}
-/*# sourceMappingURL=common.min.css.map */
\ No newline at end of file
+html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0) !important}html,body{font-family:PingFangSC-Regular,PingFang SC,'Microsoft Yahei',sans-serif;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,menu,nav,section{margin:0;padding:0}button,input,select,textarea{font-size:100%;border:none;-webkit-appearance:none}input[type=button],input[type=file],input[type=submit]{cursor:pointer}table{border-collapse:collapse;border-spacing:0}ol,ul,dl{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}em,b,i{font-style:normal}a{text-decoration:none}img{border:none}.clr{*zoom:1;clear:both}.clr:after{content:".";clear:both;height:0;visibility:hidden;display:block}.fl{float:left;_display:inline}.fr{float:right;_display:inline}.va-t{vertical-align:top}.va-m{vertical-align:middle}.va-b{vertical-align:bottom}.lineBlock{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal}.lbBox{font-size:0 !important;*word-spacing:-1px !important}.emptys{margin-left:-1px;width:1px;height:100%;font-size:0;vertical-align:middle}.boxsiz{-webkit-box-sizing:border-box;box-sizing:border-box}html,body{width:100%;height:100%;-webkit-overflow-scrolling:touch}body{overflow-x:hidden;background:#F1F4FA}.el-message--info{min-width:auto !important;border:0px !important;background:rgba(0,0,0,0.4) !important}.el-message--info .el-icon-info{display:none}.el-message--info .el-message__content{color:#fff !important}.pagex{padding:20px}
\ No newline at end of file

src/components/menu.vue

@@ -3,7 +3,16 @@
     <div class="nav-top">
       <div class="con-box clr">
         <div class="logo fl">云芯系统</div>
-        <div class="tab-box fl"></div>
+        <div class="tab-box fl">
+          <a class="item fl first" href="/#/" :class="{'act':$route.path=='/'}">
+            <font class="fl">概况</font>
+            
+          </a>
+           <a class="item fl" :class="{'act':item.path==$route.path}" :href="'/#'+item.path" v-for="item in tabs">
+            <font class="fl">{{item.title}}</font>
+            <span class="icon iconfont fl" @click.prevent="closetab(item.path)"></span>
+          </a>
+        </div>
         <div class="user-box fr">
           <div class="line"></div>
           <a class="msgh fl" href="#">
@@ -87,9 +96,6 @@
           </el-submenu>
 
         </el-menu>
-
-
-
       </div>
 
     </div>
@@ -140,10 +146,19 @@
       return {
         collapse: false,
         isIndexTab: true,
-        tabSure: ""
+        tabSure: "",
+        tabs:""
 
       }
     },
+    watch:{
+      $route(to,from){
+         let tab_arr=sessionStorage.getItem('tabs')
+        if(tab_arr){
+          this.tabs=JSON.parse(tab_arr);
+        }
+      }
+    },
     mounted() {
         this.tabss(this.$route.path)
     },
@@ -164,6 +179,34 @@
         if (lk == "/message") {
           this.tabSure = 5
         }
+        let tab_arr=sessionStorage.getItem('tabs')
+        if(tab_arr){
+          this.tabs=JSON.parse(tab_arr);
+        }
+      },
+      closetab(path){
+        let tab_arr=JSON.parse(sessionStorage.getItem('tabs'))
+        for(var i=0;i<tab_arr.length;i++){
+         
+          if(tab_arr[i].path==path){
+            tab_arr.splice(i,1);
+            sessionStorage.setItem('tabs', JSON.stringify(tab_arr));
+            this.tabs=tab_arr;
+            if(path==this.$route.path){
+                if(i==0){
+                  this.$router.push({
+                    path: "/",
+                  })
+                }else{
+                  this.$router.push({
+                    path: tab_arr[i-1].path,
+                  })
+                }
+            }
+            break;  
+          }
+        }
+        
       },
       zk() {
         this.collapse = !this.collapse;
@@ -221,7 +264,43 @@
         background: #1969F9;
         box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
       }
-
+      .tab-box{
+        padding:8px 0px;
+          .item{
+            color:#646B78;
+            font-size: 14px;
+            margin-left: 20px;
+            height:40px;
+            line-height: 40px;
+            cursor: pointer;
+            &.act{
+              position: relative;
+                font{
+                  color:#333;
+                }
+                &::after{
+                  content:"";
+                  position: absolute;
+                  bottom:-8px;
+                  width: 32px;
+                  height: 5px;
+                  background: #1969F9;
+                  left:50%;
+                  margin-left:-22px;
+                }
+                &.first{
+                  &::after{
+                 
+                  margin-left:-15px;
+                }
+                }
+            }
+            .icon{
+              font-size: 14px;
+              margin-left: 5px;
+            }
+          }
+      }
       .user-box {
         height: 40px;
         padding: 8px 0;

src/main.js

@@ -20,6 +20,43 @@ Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));
 //加载自定义指令
 Vue.use(directive);
 
+//处理顶部导航TAB
+router.afterEach((to, from, next) => {
+    if(to.path=="/"){return}
+    let tabOldArr=sessionStorage.getItem('tabs');
+    let tabOldJson;
+    let tabNewJson=[];
+    if(tabOldArr){
+      tabOldJson=JSON.parse(tabOldArr);
+      for(var i=0;i<tabOldJson.length;i++){
+        tabNewJson.push(JSON.stringify(tabOldJson[i]))
+      }
+      if(tabNewJson.indexOf(JSON.stringify({
+        path:to.path,
+        title:to.meta.title
+      }))==-1){
+        tabOldJson.push({
+          path:to.path,
+          title:to.meta.title
+        })
+      }
+    }else{
+      tabOldJson=[
+        {
+          path:to.path,
+          title:to.meta.title
+        }
+      ]
+      
+      
+    }
+    if(tabOldJson){
+      sessionStorage.setItem('tabs', JSON.stringify(tabOldJson));
+    }
+});
+
+
+
 axios.interceptors.response.use(res => {
   return res;
 }, error => {

src/views/Index/index.vue

 <template>
-    <div class="index">
+    <div class="index pagex">
         我是首页
         <el-button @click="ceshi">element测试按钮</el-button>
         <Menu/>
     </div>
-
 </template>
 <script>
   import Vue from 'vue';

src/views/Store/list.vue

 <template>
-    <div class="list">
+    <div class="list pagex">
         我是库存列表
         <Menu/>
     </div>