bug

src/assets/css/public/common.less

 html {
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%
+    -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
+    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;
-  font-size: 14px;
-  color: #646B78
+    font-family: PingFangSC-Regular, PingFang SC, 'Microsoft Yahei', sans-serif;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 14px;
+    color: #646B78
 }
 
 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
+    margin: 0;
+    padding: 0
 }
 
 button, input, select, textarea {
-  font-size: 100%;
-  border: none;
-  -webkit-appearance: none
+    font-size: 100%;
+    border: none;
+    -webkit-appearance: none
 }
 
 input[type=button], input[type=file], input[type=submit] {
-  cursor: pointer
+    cursor: pointer
 }
 
 table {
-  border-collapse: collapse;
-  border-spacing: 0
+    border-collapse: collapse;
+    border-spacing: 0
 }
 
 ol, ul, dl {
-  list-style: none
+    list-style: none
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-size: 100%;
-  font-weight: 500
+    font-size: 100%;
+    font-weight: 500
 }
 
 em, b, i {
-  font-style: normal
+    font-style: normal
 }
 
 a {
-  text-decoration: none
+    text-decoration: none
 }
 
 img {
-  border: none
+    border: none
 }
 
 .clr {
-  *zoom: 1;
-  clear: both
+    *zoom: 1;
+    clear: both
 }
 
 .clr:after {
-  content: ".";
-  clear: both;
-  height: 0;
-  visibility: hidden;
-  display: block
+    content: ".";
+    clear: both;
+    height: 0;
+    visibility: hidden;
+    display: block
 }
 
 .fl {
-  float: left;
-  _display: inline
+    float: left;
+    _display: inline
 }
 
 .fr {
-  float: right;
-  _display: inline
+    float: right;
+    _display: inline
 }
 
 .va-t {
-  vertical-align: top
+    vertical-align: top
 }
 
 .va-m {
-  vertical-align: middle
+    vertical-align: middle
 }
 
 .va-b {
-  vertical-align: bottom
+    vertical-align: bottom
 }
 
 .lineBlock {
-  display: inline-block;
-  *display: inline;
-  zoom: 1;
-  letter-spacing: normal;
-  word-spacing: normal
+    display: inline-block;
+    *display: inline;
+    zoom: 1;
+    letter-spacing: normal;
+    word-spacing: normal
 }
 
 .lbBox {
-  font-size: 0 !important;
-  *word-spacing: -1px !important
+    font-size: 0 !important;
+    *word-spacing: -1px !important
 }
 
 .emptys {
-  margin-left: -1px;
-  width: 1px;
-  height: 100%;
-  font-size: 0;
-  vertical-align: middle
+    margin-left: -1px;
+    width: 1px;
+    height: 100%;
+    font-size: 0;
+    vertical-align: middle
 }
 
 .boxsiz {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box
 }
 
 .column {
-  display: flex;
-  flex-direction: column
+    display: flex;
+    flex-direction: column
 }
 
 .row {
-  display: flex;
-  flex-direction: row
+    display: flex;
+    flex-direction: row
 }
 
 .bothSide {
-  justify-content: space-between
+    justify-content: space-between
 }
 
 .avarage {
-  justify-content: space-around
+    justify-content: space-around
 }
 
 .rowCenter {
-  justify-content: center
+    justify-content: center
 }
 
 .verCenter {
-  align-items: center
+    align-items: center
 }
 
 .boxFlex {
-  -webkit-box-flex: 1;
-  -moz-box-flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1
 }
 
 html, body {
-  width: 100%;
-  height: 100%;
-  -webkit-overflow-scrolling: touch
+    width: 100%;
+    height: 100%;
+    -webkit-overflow-scrolling: touch
 }
 
 body {
-  overflow-x: hidden;
-  background: #F1F4FA
+    overflow-x: hidden;
+    background: #F1F4FA
 }
 
 .f-blue {
-  color: #1969F9
+    color: #1969F9
 }
 
 .f-green {
-  color: #3FBE1B
+    color: #3FBE1B
 }
 
 .f-yellow1 {
-  color: #CC8200
+    color: #CC8200
 }
 
 .f-red1 {
-  color: #FC1F00
+    color: #FC1F00
 }
 
 .el-pagination {
-  text-align: right;
-  margin-top: 20px
+    text-align: right;
+    margin-top: 20px
 }
 
 .pagex {
-  padding: 20px;
+    padding: 20px;
+    min-height: 500px;
 }
 
 .zdypop {
-  .el-form-item__label {
-    color: #333
-  }
+    .el-form-item__label {
+        color: #333
+    }
 
-  .el-input.is-disabled {
-    background-color: #F1F4FA;
-    border-color: #F1F4FA
-  }
+    .el-input.is-disabled {
+        background-color: #F1F4FA;
+        border-color: #F1F4FA
+    }
 
-  .el-input.is-disabled .el-input__inner {
-    background-color: #F1F4FA;
-    border-color: #F1F4FA
-  }
+    .el-input.is-disabled .el-input__inner {
+        background-color: #F1F4FA;
+        border-color: #F1F4FA
+    }
 }
 
 //弹窗公共样式
 .el-dialog__body {
-  padding: 20px !important
+    padding: 20px !important
 }
 
 .el-dialog__title {
-  font-size: 14px;
-  color: #333;
-  font-weight: bold;
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    width: 5px;
-    height: 22px;
-    background: #1969F9;
-    left: -20px;
-    top: 2px
-  }
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 5px;
+        height: 22px;
+        background: #1969F9;
+        left: -20px;
+        top: 2px
+    }
 }
 
 .el-icon-close {
-  font-size: 24px;
+    font-size: 24px;
 
-  &:hover, &:focus {
-    color: #1969F9 !important
-  }
+    &:hover, &:focus {
+        color: #1969F9 !important
+    }
 }
 
 .el-message-box__container {
 }
 
 .el-message-box__message {
-  display: inline-block
+    display: inline-block
 }
 
 .el-message-box__message p {
-  color: #333;
-  font-size: 16px
+    color: #333;
+    font-size: 16px
 }
 
 .el-message-box__status.el-icon-error {
-  color: #FC1F00 !important;
-  font-size: 25px !important
+    color: #FC1F00 !important;
+    font-size: 25px !important
 }
 
 .el-message-box__close:before {
-  content: "\E609"
+    content: "\E609"
 }
 
 .el-message-box__btns, .dialog-footer {
-  .el-button {
-    width: 76px;
-    height: 34px;
-    text-align: center;
-    line-height: 34px;
-    background: #E8ECF4;
-    border: 1px solid #E8ECF4;
-    border-radius: 2px;
-    color: #8391AD;
-    font-size: 14px;
-    padding: 0px;
-
-    &:hover, &:focus {
-      color: #8391AD;
-      background: #E8ECF4;
-      border: 1px solid #E8ECF4
+    .el-button {
+        width: 76px;
+        height: 34px;
+        text-align: center;
+        line-height: 34px;
+        background: #E8ECF4;
+        border: 1px solid #E8ECF4;
+        border-radius: 2px;
+        color: #8391AD;
+        font-size: 14px;
+        padding: 0px;
+
+        &:hover, &:focus {
+            color: #8391AD;
+            background: #E8ECF4;
+            border: 1px solid #E8ECF4
+        }
+
+        &.el-button--primary {
+            border: 1px solid #1969F9;
+            color: #fff;
+            background: #1969F9;
+
+            &:hover, &:focus {
+                color: #fff;
+                background: #1969F9;
+                border: 1px solid #1969F9
+            }
+        }
     }
+}
 
-    &.el-button--primary {
-      border: 1px solid #1969F9;
-      color: #fff;
-      background: #1969F9;
+.p-text {
+    margin-bottom: 6px;
 
-      &:hover, &:focus {
-        color: #fff;
-        background: #1969F9;
-        border: 1px solid #1969F9
-      }
+    em {
+        width: 56px;
+        text-align: left
     }
-  }
-}
 
-.p-text {
-  margin-bottom: 6px;
-
-  em {
-    width: 56px;
-    text-align: left
-  }
-
-  span {
-    width: 214px;
-    height: 30px;
-    background: #F1F4FA;
-    border-radius: 2px;
-    font-size: 14px;
-    color: #333333;
-    padding-left: 7px;
-    margin-left: 8px;
-    text-align: left
-  }
+    span {
+        width: 214px;
+        height: 30px;
+        background: #F1F4FA;
+        border-radius: 2px;
+        font-size: 14px;
+        color: #333333;
+        padding-left: 7px;
+        margin-left: 8px;
+        text-align: left
+    }
 }
 
 .popper-class-box {
-  .popper__arrow {
-    left: 20px !important
-  }
+    .popper__arrow {
+        left: 20px !important
+    }
 }
 
 .tip-title {
-  padding: 8px 16px;
-  background-color: #ecf8ff;
-  border-radius: 4px;
-  border-left: 5px solid #50bfff;
-  margin: 20px 0;
-
-  p {
-    font-size: 14px;
-    color: #5e6d82;
-    line-height: 1.5em
-  }
+    padding: 8px 16px;
+    background-color: #ecf8ff;
+    border-radius: 4px;
+    border-left: 5px solid #50bfff;
+    margin: 20px 0;
+
+    p {
+        font-size: 14px;
+        color: #5e6d82;
+        line-height: 1.5em
+    }
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background: transparent
+    width: 10px;
+    height: 10px;
+    background: transparent
 }
 
 ::-webkit-scrollbar-track {
-  background: transparent
+    background: transparent
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: #c1c1c1
+    border-radius: 5px;
+    background-color: #c1c1c1
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #a8a8a8
+    background-color: #a8a8a8
 }
\ No newline at end of file

src/components/menu.vue

@@ -6,10 +6,10 @@
         <div class="tab-box fl" ref="scrollbox">
           <!--tab 栏目-->
           <div class="item-boxs row verCenter" ref="scrollboxinner">
-            <a class="item first row rowCenter verCenter" href="/#/" :class="{'act':$route.path=='/','scrollsg':rpcg}">
+            <a class="item first row rowCenter verCenter" href="/#/" :class="{'act':$route.path=='/'}">
               <font class="fl">概况</font>
             </a>
-            <a class="item row rowCenter verCenter" :class="{'scrollsg':rpcg,'act':(JSON.stringify(item)==JSON.stringify({path: $route.path,title: $route.meta.title,query:$route.query}))}" @click="tabUrl(item)" v-for="item in tabs">
+            <a class="item row rowCenter verCenter" :class="{'act':(JSON.stringify(item)==JSON.stringify({path: $route.path,title: $route.meta.title,query:$route.query}))}" @click="tabUrl(item)" v-for="item in tabs">
               <font class="fl">{{ item.title }}</font>
               <span class="icon iconfont fl" @click.stop="closetab(item.path)"></span>
             </a>
@@ -186,9 +186,9 @@ export default {
   name: 'menus',
   props: {},
   created() {
+    var self = this
     this.getData();
     this.tabUi()
-    var self = this
     window.onresize = function () {
       self.tabUi()
     };
@@ -210,7 +210,6 @@ export default {
       tabSure: "",
       tabs: "",
       width: "",
-      rpcg: false,
       dialogVisible: false,
       ruleForm: {
         old_password: '',
@@ -267,13 +266,14 @@ export default {
       }
     },
     tabUi() {
-      this.$nextTick(() => {
-        if (this.$refs.scrollboxinner.clientWidth > this.$refs.scrollbox.clientWidth) {
-          this.rpcg = true
-        } else {
-          this.rpcg = false
-        }
-      })
+      let tab_arr = sessionStorage.getItem('tabs')
+      if (tab_arr.length >= 9) {
+        this.$nextTick(() => {
+          if (this.$refs.scrollboxinner.clientWidth > this.$refs.scrollbox.clientWidth) {
+            document.querySelector('.tab-box').scrollLeft = 12000000;
+          }
+        })
+      }
     },
     tabUrl(item) {
       this.$router.push({
@@ -518,26 +518,10 @@ export default {
               display: none;
             }
           }
-        }
-
-        &.scrollsg {
-          &.act {
-            &::after {
-              content: "";
-              position: absolute;
-              bottom: -2px;
-              width: 32px;
-              height: 5px;
-              background: #1969F9;
-              left: 50%;
-              margin-left: -22px;
-            }
-          }
 
-          &.first {
-            &::after {
-
-              margin-left: -15px;
+          &:hover {
+            .iconfont {
+              color: #1969f9;
             }
           }
         }