菜单固定于上方

public/index.html

@@ -22,13 +22,18 @@
       height: 100%;
       margin: 0px;
       padding: 0px;
+      /*最小宽度1200*/
+      min-width: 1200px;
+      overflow-x: auto;
     }
+
     .chromeframe {
       margin: 0.2em 0;
       background: #ccc;
       color: #000;
       padding: 0.2em 0;
     }
+
     #loader-wrapper {
       position: fixed;
       top: 0;
@@ -37,6 +42,7 @@
       height: 100%;
       z-index: 999999;
     }
+
     #loader {
       display: block;
       position: relative;
@@ -61,6 +67,7 @@
       /* Chrome, Firefox 16+, IE 10+, Opera */
       z-index: 1001;
     }
+
     #loader:before {
       content: "";
       position: absolute;
@@ -83,6 +90,7 @@
       animation: spin 3s linear infinite;
       /* Chrome, Firefox 16+, IE 10+, Opera */
     }
+
     #loader:after {
       content: "";
       position: absolute;
@@ -105,6 +113,7 @@
       animation: spin 1.5s linear infinite;
       /* Chrome, Firefox 16+, IE 10+, Opera */
     }
+
     @-webkit-keyframes spin {
       0% {
         -webkit-transform: rotate(0deg);
@@ -123,6 +132,7 @@
         /* Firefox 16+, IE 10+, Opera */
       }
     }
+
     @keyframes spin {
       0% {
         -webkit-transform: rotate(0deg);
@@ -141,6 +151,7 @@
         /* Firefox 16+, IE 10+, Opera */
       }
     }
+
     #loader-wrapper .loader-section {
       position: fixed;
       top: 0;
@@ -156,12 +167,15 @@
       transform: translateX(0);
       /* Firefox 16+, IE 10+, Opera */
     }
+
     #loader-wrapper .loader-section.section-left {
       left: 0;
     }
+
     #loader-wrapper .loader-section.section-right {
       right: 0;
     }
+
     /* Loaded */
     .loaded #loader-wrapper .loader-section.section-left {
       -webkit-transform: translateX(-100%);
@@ -173,6 +187,7 @@
       -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
       transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     }
+
     .loaded #loader-wrapper .loader-section.section-right {
       -webkit-transform: translateX(100%);
       /* Chrome, Opera 15+, Safari 3.1+ */
@@ -183,11 +198,13 @@
       -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
       transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     }
+
     .loaded #loader {
       opacity: 0;
       -webkit-transition: all 0.3s ease-out;
       transition: all 0.3s ease-out;
     }
+
     .loaded #loader-wrapper {
       visibility: hidden;
       -webkit-transform: translateY(-100%);
@@ -199,13 +216,16 @@
       -webkit-transition: all 0.3s 1s ease-out;
       transition: all 0.3s 1s ease-out;
     }
+
     /* JavaScript Turned Off */
     .no-js #loader-wrapper {
       display: none;
     }
+
     .no-js h1 {
       color: #222222;
     }
+
     #loader-wrapper .load_title {
       font-family: 'Open Sans';
       color: #FFF;
@@ -218,6 +238,7 @@
       opacity: 1;
       line-height: 30px;
     }
+
     #loader-wrapper .load_title span {
       font-weight: normal;
       font-style: italic;
@@ -225,25 +246,31 @@
       color: #FFF;
       opacity: 0.5;
     }
+
     /* 滚动条优化 start */
     ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
     }
+
     ::-webkit-scrollbar-track {
       background: #f6f6f6;
       border-radius: 2px;
     }
+
     ::-webkit-scrollbar-thumb {
       background: #cdcdcd;
       border-radius: 2px;
     }
+
     ::-webkit-scrollbar-thumb:hover {
       background: #747474;
     }
+
     ::-webkit-scrollbar-corner {
       background: #f6f6f6;
     }
+
     /* 滚动条优化 end */
   </style>
 </head>

src/assets/less/common.less

@@ -118,5 +118,6 @@
   color: #069f99;
   overflow: hidden;
   word-break: keep-all;
+  white-space: nowrap;
   text-overflow: ellipsis;
 }

src/components/page/GlobalLayout.vue

@@ -191,7 +191,7 @@ body {
 }
 
 .layout {
-  min-height: 100vh !important;
+  min-height: calc(100vh - 10px) !important;
   overflow-x: hidden;
 
   &.mobile {

src/utils/device.js

@@ -16,8 +16,9 @@ const enquireScreen = function (call) {
       call && call(1)
     }
   }
-  enquireJs.register('screen and (max-width: 1087.99px)', handler)
+  // 将max-width设为0，防止转换为手机模式，将菜单隐藏至左侧
-  enquireJs.register('screen and (max-width: 767.99px)', handler2)
+  enquireJs.register('screen and (max-width: 0px)', handler)
+  enquireJs.register('screen and (max-width: 0px)', handler2)
 }
 
 export default enquireScreen