修改部分内南

package-lock.json

@@ -1247,6 +1247,36 @@
         "webpack-merge": "^4.2.2"
       },
       "dependencies": {
+        "autoprefixer": {
+          "version": "9.8.6",
+          "resolved": "https://registry.npm.taobao.org/autoprefixer/download/autoprefixer-9.8.6.tgz",
+          "integrity": "sha1-O3NZTKG/kmYyDFrPFYjXTep0IQ8=",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.12.0",
+            "caniuse-lite": "^1.0.30001109",
+            "colorette": "^1.2.1",
+            "normalize-range": "^0.1.2",
+            "num2fraction": "^1.2.2",
+            "postcss": "^7.0.32",
+            "postcss-value-parser": "^4.1.0"
+          },
+          "dependencies": {
+            "browserslist": {
+              "version": "4.16.4",
+              "resolved": "https://registry.npm.taobao.org/browserslist/download/browserslist-4.16.4.tgz?cache=0&sync_timestamp=1618224896317&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrowserslist%2Fdownload%2Fbrowserslist-4.16.4.tgz",
+              "integrity": "sha1-fr+RNIf0DK9GN7iSsmgGmVHDXVg=",
+              "dev": true,
+              "requires": {
+                "caniuse-lite": "^1.0.30001208",
+                "colorette": "^1.2.2",
+                "electron-to-chromium": "^1.3.712",
+                "escalade": "^3.1.1",
+                "node-releases": "^1.1.71"
+              }
+            }
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1569877601435&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1285,6 +1315,18 @@
             }
           }
         },
+        "caniuse-lite": {
+          "version": "1.0.30001208",
+          "resolved": "https://registry.npm.taobao.org/caniuse-lite/download/caniuse-lite-1.0.30001208.tgz?cache=0&sync_timestamp=1617866675529&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001208.tgz",
+          "integrity": "sha1-qZkBSjXOvU+YxAWTCgV6DXU1Lrk=",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.715",
+          "resolved": "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.715.tgz?cache=0&sync_timestamp=1618366187537&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.715.tgz",
+          "integrity": "sha1-j9AC55wT1xETNWVgD0DNgKv+XVU=",
+          "dev": true
+        },
         "find-cache-dir": {
           "version": "3.1.0",
           "resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.1.0.tgz?cache=0&sync_timestamp=1573277838864&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffind-cache-dir%2Fdownload%2Ffind-cache-dir-3.1.0.tgz",
@@ -1335,6 +1377,12 @@
             "semver": "^6.0.0"
           }
         },
+        "node-releases": {
+          "version": "1.1.71",
+          "resolved": "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.71.tgz",
+          "integrity": "sha1-yxM0sXmJaxyJ7P3UtyX7e738fbs=",
+          "dev": true
+        },
         "p-locate": {
           "version": "4.1.0",
           "resolved": "http://registry.npm.taobao.org/p-locate/download/p-locate-4.1.0.tgz",
@@ -1359,6 +1407,23 @@
             "find-up": "^4.0.0"
           }
         },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npm.taobao.org/postcss/download/postcss-7.0.35.tgz?cache=0&sync_timestamp=1618159242150&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-7.0.35.tgz",
+          "integrity": "sha1-0r4AuZj38hHYonaXQHny6SuXDiQ=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
+          "dev": true
+        },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz",
@@ -1371,6 +1436,15 @@
           "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
           "dev": true
         },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-6.1.0.tgz?cache=0&sync_timestamp=1611394043517&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-6.1.0.tgz",
+          "integrity": "sha1-B2Srxpxj1ayELdSGfo0CXogN+PM=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.2.2",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.2.2.tgz?cache=0&sync_timestamp=1575643254868&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.2.2.tgz",
@@ -1982,25 +2056,49 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npm.taobao.org/autoprefixer/download/autoprefixer-9.7.3.tgz?cache=0&sync_timestamp=1575126787929&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fautoprefixer%2Fdownload%2Fautoprefixer-9.7.3.tgz",
-      "integrity": "sha1-/ULtA/U96b60yg1h+09yaKm7ULQ=",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.8.0",
-        "caniuse-lite": "^1.0.30001012",
-        "chalk": "^2.4.2",
+      "version": "10.2.5",
+      "resolved": "https://registry.npm.taobao.org/autoprefixer/download/autoprefixer-10.2.5.tgz",
+      "integrity": "sha1-CWoDN9vJbAhzUm1/713kQo0FOC0=",
+      "requires": {
+        "browserslist": "^4.16.3",
+        "caniuse-lite": "^1.0.30001196",
+        "colorette": "^1.2.2",
+        "fraction.js": "^4.0.13",
         "normalize-range": "^0.1.2",
-        "num2fraction": "^1.2.2",
-        "postcss": "^7.0.23",
-        "postcss-value-parser": "^4.0.2"
+        "postcss-value-parser": "^4.1.0"
       },
       "dependencies": {
+        "browserslist": {
+          "version": "4.16.4",
+          "resolved": "https://registry.npm.taobao.org/browserslist/download/browserslist-4.16.4.tgz?cache=0&sync_timestamp=1618224896317&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrowserslist%2Fdownload%2Fbrowserslist-4.16.4.tgz",
+          "integrity": "sha1-fr+RNIf0DK9GN7iSsmgGmVHDXVg=",
+          "requires": {
+            "caniuse-lite": "^1.0.30001208",
+            "colorette": "^1.2.2",
+            "electron-to-chromium": "^1.3.712",
+            "escalade": "^3.1.1",
+            "node-releases": "^1.1.71"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001208",
+          "resolved": "https://registry.npm.taobao.org/caniuse-lite/download/caniuse-lite-1.0.30001208.tgz?cache=0&sync_timestamp=1617866675529&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001208.tgz",
+          "integrity": "sha1-qZkBSjXOvU+YxAWTCgV6DXU1Lrk="
+        },
+        "electron-to-chromium": {
+          "version": "1.3.715",
+          "resolved": "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.715.tgz?cache=0&sync_timestamp=1618366187537&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.715.tgz",
+          "integrity": "sha1-j9AC55wT1xETNWVgD0DNgKv+XVU="
+        },
+        "node-releases": {
+          "version": "1.1.71",
+          "resolved": "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.71.tgz",
+          "integrity": "sha1-yxM0sXmJaxyJ7P3UtyX7e738fbs="
+        },
         "postcss-value-parser": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-4.0.2.tgz",
-          "integrity": "sha1-SCKCwJpCcG0fyaBptz9E7Ag5Hck=",
-          "dev": true
+          "version": "4.1.0",
+          "resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss="
         }
       }
     },
@@ -2444,14 +2542,15 @@
       }
     },
     "browserslist": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npm.taobao.org/browserslist/download/browserslist-4.8.2.tgz",
-      "integrity": "sha1-tFcgrV+8hxO3JTwgdm9wHJppQok=",
-      "dev": true,
+      "version": "4.16.4",
+      "resolved": "https://registry.npm.taobao.org/browserslist/download/browserslist-4.16.4.tgz?cache=0&sync_timestamp=1618224896317&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrowserslist%2Fdownload%2Fbrowserslist-4.16.4.tgz",
+      "integrity": "sha1-fr+RNIf0DK9GN7iSsmgGmVHDXVg=",
       "requires": {
-        "caniuse-lite": "^1.0.30001015",
-        "electron-to-chromium": "^1.3.322",
-        "node-releases": "^1.1.42"
+        "caniuse-lite": "^1.0.30001208",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.712",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.71"
       }
     },
     "buffer": {
@@ -2703,10 +2802,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001015",
-      "resolved": "https://registry.npm.taobao.org/caniuse-lite/download/caniuse-lite-1.0.30001015.tgz?cache=0&sync_timestamp=1575445388179&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001015.tgz",
-      "integrity": "sha1-Fafd9mq6eGpx2ZYmvI8rkcbw9fA=",
-      "dev": true
+      "version": "1.0.30001208",
+      "resolved": "https://registry.npm.taobao.org/caniuse-lite/download/caniuse-lite-1.0.30001208.tgz?cache=0&sync_timestamp=1617866675529&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001208.tgz",
+      "integrity": "sha1-qZkBSjXOvU+YxAWTCgV6DXU1Lrk="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.2.0",
@@ -3048,6 +3146,11 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "colorette": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npm.taobao.org/colorette/download/colorette-1.2.2.tgz?cache=0&sync_timestamp=1614259647923&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolorette%2Fdownload%2Fcolorette-1.2.2.tgz",
+      "integrity": "sha1-y8x51emcrqLb8Q6zom/Ys+as+pQ="
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.8.tgz",
@@ -4099,10 +4202,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.322",
-      "resolved": "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.322.tgz",
-      "integrity": "sha1-pvfhx5AlwrBYOOjjRPbonrgyE6g=",
-      "dev": true
+      "version": "1.3.715",
+      "resolved": "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.715.tgz?cache=0&sync_timestamp=1618366187537&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.715.tgz",
+      "integrity": "sha1-j9AC55wT1xETNWVgD0DNgKv+XVU="
     },
     "element-ui": {
       "version": "2.13.0",
@@ -4244,6 +4346,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/escalade/download/escalade-3.1.1.tgz?cache=0&sync_timestamp=1602567230854&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescalade%2Fdownload%2Fescalade-3.1.1.tgz",
+      "integrity": "sha1-2M/ccACWXFoBdLSoLqpcBVJ0LkA="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "http://registry.npm.taobao.org/escape-html/download/escape-html-1.0.3.tgz",
@@ -4751,6 +4858,11 @@
       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
       "dev": true
     },
+    "fraction.js": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npm.taobao.org/fraction.js/download/fraction.js-4.0.13.tgz",
+      "integrity": "sha1-PBwxX6FrNchf/6lXJaNvpynGnf4="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "http://registry.npm.taobao.org/fragment-cache/download/fragment-cache-0.2.1.tgz",
@@ -7414,21 +7526,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.42",
-      "resolved": "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.42.tgz",
-      "integrity": "sha1-qZn2pi+HRpgfbakGJ6jS/AkLutc=",
-      "dev": true,
-      "requires": {
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz",
-          "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
-          "dev": true
-        }
-      }
+      "version": "1.1.71",
+      "resolved": "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.71.tgz",
+      "integrity": "sha1-yxM0sXmJaxyJ7P3UtyX7e738fbs="
     },
     "node-sass": {
       "version": "4.13.0",
@@ -7553,8 +7653,7 @@
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "http://registry.npm.taobao.org/normalize-range/download/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
     },
     "normalize-url": {
       "version": "3.3.0",
@@ -11074,6 +11173,11 @@
       "integrity": "sha1-NOWPtls2z1mvrxT1AyiOXleLFVQ=",
       "dev": true
     },
+    "vue-fragment": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npm.taobao.org/vue-fragment/download/vue-fragment-1.5.2.tgz",
+      "integrity": "sha1-MQAXFwxWTEqtldoUwYXJLGeE/Tw="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -4,14 +4,19 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "test": "vue-cli-service build --mode test"
   },
   "dependencies": {
+    "autoprefixer": "^10.2.5",
     "axios": "^0.19.0",
+    "browserslist": "^4.16.4",
+    "caniuse-lite": "^1.0.30001208",
     "core-js": "^3.4.3",
     "element-ui": "^2.4.5",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
+    "vue-fragment": "^1.5.2",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2"
   },

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>vue-permission-demo</title>
+    <title>平台管理项目</title>
   </head>
   <body>
     <noscript>

src/.env

@@ -0,0 +1,2 @@
+NODE_ENV = 'development'
+VUE_APP_URL = 'dev'

src/.env.production

@@ -0,0 +1,2 @@
+NODE_ENV = 'production'
+VUE_APP_FLAG = 'pro'

src/.env.test

@@ -0,0 +1,2 @@
+NODE_ENV = 'production'
+VUE_APP_FLAG = 'test'

src/App.vue

@@ -16,5 +16,6 @@ html,
 body,
 #app {
   height: 100%;
+  overflow: hidden;
 }
 </style>

src/apirequest/base.js

@@ -1,5 +1,7 @@
 const base = {
-    sq: 'http://localhost:8081/api',    // http://api.wpbom.com/api/bution.php  https://xiaojieapi.com/api
-    bd: 'http://xxxxx22222.com/api'
+    dev: 'http://localhost:8081/api',     // http://api.wpbom.com/api/bution.php  https://xiaojieapi.com/api
+    test: 'http://xxxxx22222.com/api',  // 测试环境
+    pro: 'http://xxxxx22222.com/api',   // 生产环境
+
 }
 export default base;

src/apirequest/basic/index.js

@@ -6,12 +6,12 @@ const basic = {
 
     // post提交    
     login(params) {
-        return axios.post(`${base.sq}/login`,params);
+        return axios.post(`/login`,params);
     },
     // 其他接口…………
 
     articleDetail(id, params) {
-        return axios.get(`${base.sq}/topic/${id}`, {
+        return axios.get(`${base.dev}/topic/${id}`, {
             params: params
         });
     },

src/apirequest/http.js

@@ -3,7 +3,24 @@ import store from '@/store/index';
 import { Message } from 'element-ui';
 import base from './base'; // 导入接口域名列表
 import QS from 'qs'
-// axios.defaults.baseURL = base.sq;
+
+
+if (process.env.NODE_ENV === 'production') {
+    console.log("生产环境");
+    /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
+    if (process.env.VUE_APP_FLAG === 'pro') {
+        //production 生产环境
+        axios.defaults.baseURL = base.pro;
+
+    } else {
+        //test 测试环境
+        axios.defaults.baseURL = base.test;
+
+    }
+} else {
+    //dev 开发环境
+    axios.defaults.baseURL = base.dev;
+}
 axios.defaults.timeout = 60000;
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 axios.interceptors.request.use(
@@ -73,6 +90,7 @@ export default {
         });
     },
     post(url, params) {
+        console.log(url);
         return new Promise((resolve, reject) => {
             axios.post(url, QS.stringify(params))
                 .then(res => {

src/components/dynamic-menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="menu-container">
+  <fragment>
     <template v-for="v in menuList">
       <el-submenu
         :index="v.path"
@@ -7,7 +7,7 @@
         :key="v.name"
       >
         <template slot="title">
-          <i class="iconfont" :class="v.meta.icon"></i>
+          <i :class="v.meta.icon"></i>
           <span>{{ v.meta.name }}</span>
         </template>
         <el-menu-item-group>
@@ -20,15 +20,18 @@
         @click="gotoRoute(v.name, v.path)"
         v-else
       >
-        <i class="iconfont" :class="v.meta.icon"></i>
+        <i :class="v.meta.icon"></i>
         <span slot="title">{{ v.meta.name }}</span>
       </el-menu-item>
     </template>
-  </div>
+  </fragment>
 </template>
 <script>
+import { Fragment } from "vue-fragment";
+
 export default {
   name: "my-nav",
+  components: { Fragment },
   props: {
     menuList: {
       type: Array,
@@ -44,4 +47,7 @@ export default {
     },
   },
 };
-</script>
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/mybread/MyBread.vue

@@ -1,15 +1,13 @@
 <template>
-  <div>
-    <el-breadcrumb separator="/">
-      <el-breadcrumb-item :to="{ path: '/home' }">Dashboard</el-breadcrumb-item>
-      <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">{{
-        item.meta.name
-      }}</el-breadcrumb-item>
-    </el-breadcrumb>
-    <!-- <div v-for="(item,index) in levelList">
+  <el-breadcrumb separator="/">
+    <el-breadcrumb-item :to="{ path: '/home' }">Dashboard</el-breadcrumb-item>
+    <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">{{
+      item.meta.name
+    }}</el-breadcrumb-item>
+  </el-breadcrumb>
+  <!-- <div v-for="(item,index) in levelList">
         {{item.path}}
     </div> -->
-  </div>
 </template>
 <script>
 import { mapMutations } from "vuex";

src/pages/layout/component/main-content/content.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card>
+  <el-card class="content">
     <router-view class="content"></router-view>
   </el-card>
 </template>

src/pages/layout/component/main-content/index.vue

@@ -1,23 +1,71 @@
 <template>
-    <div >
-        <TopAside/>
-        <Content/>
+  <div class="appWrap">
+    <div
+      class="base_header"
+      :class="isSidebarNavCollapse ? 'base_header1' : 'base_header'"
+    >
+      <TopAside />
     </div>
+    <div class="base_main">
+      <Content />
+    </div>
+  </div>
 </template>
 
 <script>
-import TopAside from './top-aside'
-import Content from './content'
-
+import TopAside from "./top-aside";
+import Content from "./content";
+import { mapState } from "vuex";
 export default {
-    data() {
-        return {}
-    },
-    computed: {
-    },
-    components: {
-        TopAside,
-        Content
-    }
-}
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState("permission", ["isSidebarNavCollapse"]),
+  },
+  components: {
+    TopAside,
+    Content,
+  },
+};
 </script>
+
+<style lang="scss" scoped>
+.appWrap {
+  position: relative;
+  .base_header {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 200px;
+    height: 60px;
+    z-index: 9;
+    transition: all 0.6s;
+    background: #fff;
+    box-sizing: border-box;
+    padding: 10px;
+    border-bottom: 1px solid #e6e6e6;
+  }
+  .base_header1 {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 60px;
+    height: 60px;
+    z-index: 9;
+    transition: all 0.6s;
+    box-sizing: border-box;
+    padding: 10px;
+    border-bottom: 1px solid #e6e6e6;
+  }
+
+  .base_main {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 40px);
+    margin-top: 40px;
+  }
+}
+</style>

src/pages/layout/component/main-content/top-aside.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="box">
+  <div>
     <el-row :gutter="20">
       <el-col :span="17">
+        <el-button @click="changeIsCollapse">点击</el-button>
         <my-bread></my-bread>
       </el-col>
       <el-col :span="7">
@@ -62,12 +63,15 @@ export default {
     return {};
   },
   computed: {
-    ...mapState(["isSidebarNavCollapse"]),
+    ...mapState("permission", ["isSidebarNavCollapse"]),
   },
   methods: {
     ...mapMutations(["LOGIN_OUT"]),
-    toggleNavCollapse() {
-      this.$store.commit("toggleNavCollapse");
+    changeIsCollapse() {
+      this.$store.commit(
+        "permission/TOGGLENACCOLLAPSE",
+        !this.isSidebarNavCollapse
+      );
     },
     loginOut() {
       this.LOGIN_OUT();

src/pages/layout/component/sidebar-nav.vue

@@ -6,6 +6,9 @@
     active-text-color="#4dbcff"
     :default-active="$route.path"
     router
+    mode="vertical"
+    class="el-menu-vertical-demo"
+    :show-timeout="400"
   >
     <DynamicMenu :menuList="sidebarMenu"></DynamicMenu>
   </el-menu>
@@ -18,12 +21,15 @@ import { mapState } from "vuex";
 export default {
   data() {
     return {
-      isCollapse: true,
+      showMenu: true,
     };
   },
   computed: {
-    ...mapState(["isSidebarNavCollapse"]),
-    ...mapState("permission", ["sidebarMenu", "currentMenu"]),
+    ...mapState("permission", [
+      "sidebarMenu",
+      "currentMenu",
+      "isSidebarNavCollapse",
+    ]),
   },
   methods: {},
 
@@ -32,3 +38,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+}
+</style>

src/pages/layout/index.vue

@@ -2,7 +2,7 @@
   <el-container class="home_container">
     <!-- <div :class="{ navCollapsed: isSidebarNavCollapse }">
             </div> -->
-    <el-aside width="200px">
+    <el-aside :width="isSidebarNavCollapse ? '60px' : '200px'">
       <sidebarNav></sidebarNav>
     </el-aside>
     <el-main>
@@ -23,7 +23,7 @@ export default {
     return {};
   },
   computed: {
-    ...mapState(["isSidebarNavCollapse"]),
+    ...mapState("permission", ["isSidebarNavCollapse"]),
   },
   components: {
     sidebarNav,
@@ -41,5 +41,15 @@ export default {
 
 .el-aside {
   background: #304156;
+  // 侧边栏折叠动画速度
+  transition: width 0.6s;
+  -webkit-transition: width 0.6s;
+  -moz-transition: width 0.6s;
+  -webkit-transition: width 0.6s;
+  -o-transition: width 0.6s;
+}
+
+.el-main {
+  position: relative;
 }
 </style>

src/pages/order-manage/order-list/index.vue

@@ -46,6 +46,32 @@
         </slot>
       </div>
     </my-pop>
+    
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
+    <div>ssss</div>
   </div>
 </template>
 
@@ -229,9 +255,6 @@ export default {
   justify-content: flex-end;
 }
 
-.form_box {
-}
- 
  ::v-deep .pop_box .el-form-item__content {
   display: flex;
   

src/router/dynamic-router.js

@@ -22,7 +22,7 @@ const dynamicRoutes = [
         name: 'order-manage',
         meta: {
             name: '订单管理',
-            icon: 'icon-email'
+            icon: 'el-icon-location'
         },
         children: [
             {
@@ -31,7 +31,7 @@ const dynamicRoutes = [
                 component: OrderList,
                 meta: {
                     name: '订单列表',
-                    icon: 'icon-quit'
+                    icon: 'el-icon-location'
                 }
             },
             {
@@ -40,7 +40,7 @@ const dynamicRoutes = [
                 component: ProductManage,
                 meta: {
                     name: '生产管理',
-                    icon: 'icon-service'
+                    icon: 'el-icon-location'
                 },
                 children: [
                     {
@@ -49,7 +49,7 @@ const dynamicRoutes = [
                         component: ProductionList,
                         meta: {
                             name: '生产列表',
-                            icon: 'icon-nav'
+                            icon: 'el-icon-location'
                         }
                     },
                     {
@@ -58,7 +58,7 @@ const dynamicRoutes = [
                         component: ReviewManage,
                         meta: {
                             name: '审核管理',
-                            icon: 'icon-finance-manage'
+                            icon: 'el-icon-location'
                         }
                     }
                 ]
@@ -69,7 +69,7 @@ const dynamicRoutes = [
                 component: ReturnGoods,
                 meta: {
                     name: '退货管理',
-                    icon: 'icon-product-manage'
+                    icon: 'el-icon-location'
                 }
             }
         ]
@@ -80,7 +80,7 @@ const dynamicRoutes = [
         name: 'goods',
         meta: {
             name: '产品管理',
-            icon: 'icon-order-manage'
+            icon: 'el-icon-location'
         },
         children: [
             {
@@ -89,7 +89,7 @@ const dynamicRoutes = [
                 component: GoodsList,
                 meta: {
                     name: '产品列表',
-                    icon: 'icon-home'
+                    icon: 'el-icon-location'
                 }
             },
             {
@@ -98,7 +98,7 @@ const dynamicRoutes = [
                 component: GoodsClassify,
                 meta: {
                     name: '产品分类',
-                    icon: 'icon-product-manage'
+                    icon: 'el-icon-location'
                 }
             }
         ]
@@ -109,7 +109,7 @@ const dynamicRoutes = [
         name: 'system',
         meta: {
             name: '系统管理',
-            icon: 'icon-email'
+            icon: 'el-icon-location'
         },
     }
 

src/router/index.js

@@ -12,11 +12,11 @@ Vue.use(VueRouter)
 
 // 初始化路由
 const routes = [
-  {
-    path: '/login',
-    name: 'Login',
-    component: Login
-  }
+    {
+        path: '/login',
+        name: 'Login',
+        component: Login
+    }
 ]
 
 /**
@@ -30,42 +30,43 @@ const routes = [
 // 准备动态加载的路由
 export const DynamicRoutes = [
     {
-        path:"",
-        component:Layout,
-        name:'container',
-        redirect:"/home",
-        meta:{
-            requiresAuth:true,
-            name:"首页"
+        path: "",
+        component: Layout,
+        name: 'container',
+        redirect: "/home",
+        meta: {
+            requiresAuth: true,
+            name: "首页",
+
         },
-        children:[
+        children: [
             {
-                path:"/home",
-                component:Home,
-                name:"home",
-                meta:{
+                path: "/home",
+                component: Home,
+                name: "home",
+                meta: {
                     // 匹配规则
-                    name:"首页",
-                    icon:"icon-name"
+                    name: "首页",
+                    icon: "el-icon-location"
                 }
             }
         ]
     },
     {
-        path:"/403",
-        component:Forbidden
+        path: "/403",
+        component: Forbidden
     },
     {
-        path:"*",
-        component:NotFound
+        path: "*",
+        component: NotFound
     }
 ]
 
 
 const router = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
 })
 
 export default router

src/router/permission.js

@@ -3,7 +3,7 @@ import store from "../store/index"
 
 router.beforeEach((to, from, next) => {
     if (!store.state.user.token) {
-
+        console.log("没有token");
         //未登录  页面是否需要登录
         if (to.matched.length > 0 && !to.matched.some(record => record.meta.requiresAuth)) {
             next();
@@ -14,7 +14,7 @@ router.beforeEach((to, from, next) => {
         }
     } else {
         // 用户已经登录  路由的访问权限
-
+        console.log("有token");
         if (!store.state.permission.permissionList) {
             store.dispatch("permission/FETCH_PERMISSION").then(() => {
                 next({

src/store/modules/permission.js

@@ -1,36 +1,44 @@
 import { fetchPermission } from "../../api/index"
-import router,{ DynamicRoutes } from "../../router/index"
+import router, { DynamicRoutes } from "../../router/index"
 import dynamicRouter from "../../router/dynamic-router"
-import { recursionRouter,setDefaultRoute } from "../../utils/recursion-router"
+import { recursionRouter, setDefaultRoute } from "../../utils/recursion-router"
 
 export default {
-    namespaced:true,
-    state:{
-        permissionList:null,
-        sidebarMenu:[],// 导航菜单
-        currentMenu:'' // 高亮
+    namespaced: true,
+    state: {
+        permissionList: null,
+        sidebarMenu: [],// 导航菜单
+        currentMenu: '', // 高亮
+        isSidebarNavCollapse: false,
     },
-    getters:{},
-    mutations:{
-        SET_PERMISSION(state,routes){
+    getters: {},
+    mutations: {
+        SET_PERMISSION(state, routes) {
             state.permissionList = routes;
+
         },
-        CLEAR_PERMSSION(state){
+        CLEAR_PERMSSION(state) {
             state.permissionList = null;
         },
-        SET_MENU(state,menu){
+        SET_MENU(state, menu) {
             state.sidebarMenu = menu;
         },
-        CURRENT_MENU(state,menu){
+        CURRENT_MENU(state, menu) {
             state.currentMenu = menu;
         },
-        CLEAR_MENU(state){
+        CLEAR_MENU(state) {
             state.sidebarMenu = []
-        }
+        },
+        TOGGLENACCOLLAPSE(state, data) {
+            state.isSidebarNavCollapse = data;
+            console.log(state.isSidebarNavCollapse);
+        },
+
+
     },
     // 异步访问
-    actions:{
-        async FETCH_PERMISSION({ commit,state }){
+    actions: {
+        async FETCH_PERMISSION({ commit, state }) {
             //let permissionList = await fetchPermission();
             // 筛选
             //let routes = recursionRouter(permissionList,dynamicRouter);
@@ -39,14 +47,14 @@ export default {
             children.push(...dynamicRouter)
 
             // 生成菜单
-            commit("SET_MENU",children);
+            commit("SET_MENU", children);
 
             // 设置默认路由
             setDefaultRoute([MainContainer]);
             // 初始化路由
             let initialRoutes = router.options.routes;
             router.addRoutes(DynamicRoutes);
-            commit("SET_PERMISSION",[ ...initialRoutes , ...DynamicRoutes])
+            commit("SET_PERMISSION", [...initialRoutes, ...DynamicRoutes])
         }
     }
 }

src/store/modules/user.js

@@ -3,7 +3,7 @@ import sessionTool from '@/utils/sessionTool'
 
 const state = {
   //设置属性 用来存储数据
-  token: ''
+  token: sessionTool.get('token') || ''
 }
 
 const getters = {