diff --git a/package-lock.json b/package-lock.json
index 75a36f2..d838c9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1421,16 +1421,6 @@
             "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
             "dev": true
         },
-        "@types/mini-css-extract-plugin": {
-            "version": "0.9.1",
-            "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
-            "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
-            "dev": true,
-            "optional": true,
-            "requires": {
-                "@types/webpack": "*"
-            }
-        },
         "@types/minimatch": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -1825,6 +1815,16 @@
                     "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
                     "dev": true
                 },
+                "ansi-styles": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-convert": "^2.0.1"
+                    }
+                },
                 "cacache": {
                     "version": "13.0.1",
                     "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1851,6 +1851,34 @@
                         "unique-filename": "^1.1.1"
                     }
                 },
+                "chalk": {
+                    "version": "4.1.0",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+                    "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "ansi-styles": "^4.1.0",
+                        "supports-color": "^7.1.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+                    "dev": true,
+                    "optional": true
+                },
                 "debug": {
                     "version": "4.1.1",
                     "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -1881,6 +1909,25 @@
                         "path-exists": "^4.0.0"
                     }
                 },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true,
+                    "optional": true
+                },
+                "loader-utils": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+                    "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^2.1.2"
+                    }
+                },
                 "locate-path": {
                     "version": "5.0.0",
                     "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1951,6 +1998,16 @@
                         "minipass": "^3.1.1"
                     }
                 },
+                "supports-color": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
+                    }
+                },
                 "terser-webpack-plugin": {
                     "version": "2.3.8",
                     "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1967,6 +2024,18 @@
                         "terser": "^4.6.12",
                         "webpack-sources": "^1.4.3"
                     }
+                },
+                "vue-loader-v16": {
+                    "version": "npm:vue-loader@16.1.1",
+                    "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.1.tgz",
+                    "integrity": "sha512-wz/+HFg/3SBayHWAlZXARcnDTl3VOChrfW9YnxvAweiuyKX/7IGx1ad/4yJHmwhgWlOVYMAbTiI7GV8G33PfGQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "chalk": "^4.1.0",
+                        "hash-sum": "^2.0.0",
+                        "loader-utils": "^2.0.0"
+                    }
                 }
             }
         },
@@ -2303,14 +2372,6 @@
             "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
             "dev": true
         },
-        "aes-decrypter": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
-            "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
-            "requires": {
-                "pkcs7": "^0.2.3"
-            }
-        },
         "aggregate-error": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
@@ -4840,11 +4901,6 @@
                 }
             }
         },
-        "dom-walk": {
-            "version": "0.1.2",
-            "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-            "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
-        },
         "domain-browser": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5090,11 +5146,6 @@
                 "is-symbol": "^1.0.2"
             }
         },
-        "es5-shim": {
-            "version": "4.5.14",
-            "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.14.tgz",
-            "integrity": "sha512-7SwlpL+2JpymWTt8sNLuC2zdhhc+wrfe5cMPI2j0o6WsPdfAiPwmFy2f0AocPB4RQVBOZ9kNTgi5YF7TdhkvEg=="
-        },
         "escalade": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
@@ -5686,6 +5737,12 @@
                         "ms": "2.0.0"
                     }
                 },
+                "path-to-regexp": {
+                    "version": "0.1.7",
+                    "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+                    "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
+                    "dev": true
+                },
                 "qs": {
                     "version": "6.7.0",
                     "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -6284,22 +6341,6 @@
             "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
             "dev": true
         },
-        "global": {
-            "version": "4.3.2",
-            "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
-            "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
-            "requires": {
-                "min-document": "^2.19.0",
-                "process": "~0.5.1"
-            },
-            "dependencies": {
-                "process": {
-                    "version": "0.5.2",
-                    "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
-                    "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
-                }
-            }
-        },
         "globals": {
             "version": "11.12.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6860,11 +6901,6 @@
             "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
             "dev": true
         },
-        "individual": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
-            "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
-        },
         "infer-owner": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -7218,11 +7254,6 @@
             "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
             "dev": true
         },
-        "is-function": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-            "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
-        },
         "is-glob": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@@ -7834,11 +7865,6 @@
                 "yallist": "^3.0.2"
             }
         },
-        "m3u8-parser": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
-            "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
-        },
         "make-dir": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -8118,14 +8144,6 @@
             "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
             "dev": true
         },
-        "min-document": {
-            "version": "2.19.0",
-            "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-            "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-            "requires": {
-                "dom-walk": "^0.1.0"
-            }
-        },
         "mini-css-extract-plugin": {
             "version": "0.9.0",
             "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -8333,11 +8351,6 @@
             "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
             "dev": true
         },
-        "mux.js": {
-            "version": "4.3.2",
-            "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
-            "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
-        },
         "mz": {
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -9057,11 +9070,6 @@
                 "safe-buffer": "^5.1.1"
             }
         },
-        "parse-headers": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.3.tgz",
-            "integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA=="
-        },
         "parse-json": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.1.tgz",
@@ -9144,10 +9152,9 @@
             "dev": true
         },
         "path-to-regexp": {
-            "version": "0.1.7",
-            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-            "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
-            "dev": true
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.0.tgz",
+            "integrity": "sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg=="
         },
         "path-type": {
             "version": "3.0.0",
@@ -9212,11 +9219,6 @@
                 "pinkie": "^2.0.0"
             }
         },
-        "pkcs7": {
-            "version": "0.2.3",
-            "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
-            "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
-        },
         "pkg-dir": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
@@ -9885,7 +9887,8 @@
         "process": {
             "version": "0.11.10",
             "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-            "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+            "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+            "dev": true
         },
         "process-nextick-args": {
             "version": "2.0.1",
@@ -10559,14 +10562,6 @@
                 "aproba": "^1.1.1"
             }
         },
-        "rust-result": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
-            "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
-            "requires": {
-                "individual": "^2.0.0"
-            }
-        },
         "rxjs": {
             "version": "6.6.2",
             "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz",
@@ -10582,14 +10577,6 @@
             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
             "dev": true
         },
-        "safe-json-parse": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
-            "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
-            "requires": {
-                "rust-result": "^1.0.0"
-            }
-        },
         "safe-regex": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -12000,11 +11987,6 @@
             "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
             "dev": true
         },
-        "tsml": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
-            "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
-        },
         "tty-browserify": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -12275,11 +12257,6 @@
                 "requires-port": "^1.0.0"
             }
         },
-        "url-toolkit": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.1.tgz",
-            "integrity": "sha512-8+DzgrtDZYZGhHaAop5WGVghMdCfOLGbhcArsJD0qDll71FXa7EeKxi2hilPIscn2nwMz4PRjML32Sz4JTN0Xw=="
-        },
         "use": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -12378,99 +12355,6 @@
                 "extsprintf": "^1.2.0"
             }
         },
-        "video.js": {
-            "version": "6.13.0",
-            "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
-            "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
-            "requires": {
-                "babel-runtime": "^6.9.2",
-                "global": "4.3.2",
-                "safe-json-parse": "4.0.0",
-                "tsml": "1.0.1",
-                "videojs-font": "2.1.0",
-                "videojs-ie8": "1.1.2",
-                "videojs-vtt.js": "0.12.6",
-                "xhr": "2.4.0"
-            }
-        },
-        "videojs-contrib-hls": {
-            "version": "5.15.0",
-            "resolved": "https://registry.npmjs.org/videojs-contrib-hls/-/videojs-contrib-hls-5.15.0.tgz",
-            "integrity": "sha512-18zbMYZ0XRBKTPEayA9bFTWWrqhT9b4G8+zf0czJLD7Epe5PcK1I/3dflTHQeQ5rwlWir+/XnFU3sMg/B2MMcw==",
-            "requires": {
-                "aes-decrypter": "1.0.3",
-                "global": "^4.3.0",
-                "m3u8-parser": "2.1.0",
-                "mux.js": "4.3.2",
-                "url-toolkit": "^2.1.3",
-                "video.js": "^5.19.1 || ^6.2.0",
-                "videojs-contrib-media-sources": "4.7.2",
-                "webwackify": "0.1.6"
-            }
-        },
-        "videojs-contrib-media-sources": {
-            "version": "4.7.2",
-            "resolved": "https://registry.npmjs.org/videojs-contrib-media-sources/-/videojs-contrib-media-sources-4.7.2.tgz",
-            "integrity": "sha512-e6iCHWBFuV05EGo7v+pS9iepObXnJ9joms467gzi8ZjpKVb3ifha9M0Ja24Rd8JfvYpzjltsgDVtGFDvIg4hQQ==",
-            "requires": {
-                "global": "^4.3.0",
-                "mux.js": "4.3.2",
-                "video.js": "^5.17.0 || ^6.2.0",
-                "webwackify": "0.1.6"
-            }
-        },
-        "videojs-flash": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/videojs-flash/-/videojs-flash-2.2.1.tgz",
-            "integrity": "sha512-mHu6TD12EKkxMvr8tg4AcfV/DuVLff427nneoZom3N9Dd2bv0sJOWwdLPQH1v5BCuAuXAVuAOba56ovTl+G3tQ==",
-            "requires": {
-                "global": "^4.4.0",
-                "video.js": "^6 || ^7",
-                "videojs-swf": "5.4.2"
-            },
-            "dependencies": {
-                "global": {
-                    "version": "4.4.0",
-                    "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-                    "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-                    "requires": {
-                        "min-document": "^2.19.0",
-                        "process": "^0.11.10"
-                    }
-                }
-            }
-        },
-        "videojs-font": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
-            "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
-        },
-        "videojs-hotkeys": {
-            "version": "0.2.27",
-            "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.27.tgz",
-            "integrity": "sha512-pwtm1QocRmzJy1PWQsmFVHyeldYHHpLdeATK3FsFHVMmNpz6CROkAn8TFy2UILr8Ghgq134K8jEKNue8HWpudQ=="
-        },
-        "videojs-ie8": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
-            "integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
-            "requires": {
-                "es5-shim": "^4.5.1"
-            }
-        },
-        "videojs-swf": {
-            "version": "5.4.2",
-            "resolved": "https://registry.npmjs.org/videojs-swf/-/videojs-swf-5.4.2.tgz",
-            "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
-        },
-        "videojs-vtt.js": {
-            "version": "0.12.6",
-            "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
-            "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
-            "requires": {
-                "global": "^4.3.1"
-            }
-        },
         "vm-browserify": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -12550,86 +12434,6 @@
                 }
             }
         },
-        "vue-loader-v16": {
-            "version": "npm:vue-loader@16.0.0-beta.5",
-            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
-            "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
-            "dev": true,
-            "optional": true,
-            "requires": {
-                "@types/mini-css-extract-plugin": "^0.9.1",
-                "chalk": "^3.0.0",
-                "hash-sum": "^2.0.0",
-                "loader-utils": "^1.2.3",
-                "merge-source-map": "^1.1.0",
-                "source-map": "^0.6.1"
-            },
-            "dependencies": {
-                "ansi-styles": {
-                    "version": "4.2.1",
-                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-                    "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "@types/color-name": "^1.1.1",
-                        "color-convert": "^2.0.1"
-                    }
-                },
-                "chalk": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-                    "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "ansi-styles": "^4.1.0",
-                        "supports-color": "^7.1.0"
-                    }
-                },
-                "color-convert": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "color-name": "~1.1.4"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.4",
-                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-                    "dev": true,
-                    "optional": true
-                },
-                "has-flag": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-                    "dev": true,
-                    "optional": true
-                },
-                "source-map": {
-                    "version": "0.6.1",
-                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-                    "dev": true,
-                    "optional": true
-                },
-                "supports-color": {
-                    "version": "7.1.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-                    "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "has-flag": "^4.0.0"
-                    }
-                }
-            }
-        },
         "vue-ref": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/vue-ref/-/vue-ref-2.0.0.tgz",
@@ -12674,18 +12478,6 @@
             "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
             "dev": true
         },
-        "vue-video-player": {
-            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/vue-video-player/-/vue-video-player-5.0.2.tgz",
-            "integrity": "sha512-IZXeRGGSX4YIp54G0Q5cB7iqh6Ok6Dpa2jRkjdyvMWw7MShJuh54/d5QNb1CZ+CvZUzX/TH7osnpir7mBNcFvQ==",
-            "requires": {
-                "object-assign": "^4.1.1",
-                "video.js": "^6.6.0",
-                "videojs-contrib-hls": "^5.12.2",
-                "videojs-flash": "^2.1.0",
-                "videojs-hotkeys": "^0.2.20"
-            }
-        },
         "vuex": {
             "version": "3.5.1",
             "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
@@ -13328,11 +13120,6 @@
             "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
             "dev": true
         },
-        "webwackify": {
-            "version": "0.1.6",
-            "resolved": "https://registry.npmjs.org/webwackify/-/webwackify-0.1.6.tgz",
-            "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
-        },
         "which": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -13467,21 +13254,11 @@
                 "async-limiter": "~1.0.0"
             }
         },
-        "xhr": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
-            "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
-            "requires": {
-                "global": "~4.3.0",
-                "is-function": "^1.0.1",
-                "parse-headers": "^2.0.0",
-                "xtend": "^4.0.0"
-            }
-        },
         "xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+            "dev": true
         },
         "y18n": {
             "version": "4.0.0",
diff --git a/package.json b/package.json
index 89b2eac..3824c84 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
         "ant-design-vue": "^1.6.3",
         "axios": "^0.19.2",
         "core-js": "^3.6.5",
+        "path-to-regexp": "^6.2.0",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
         "vuex": "^3.4.0"
diff --git a/public/favicon.ico b/public/favicon.ico
index 41c42c0..4b9a56b 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/assets/logo1.png b/src/assets/logo1.png
new file mode 100644
index 0000000..071a343
Binary files /dev/null and b/src/assets/logo1.png differ
diff --git a/src/components/common/content-view.vue b/src/components/common/content-view.vue
index 1b77817..6f3169f 100644
--- a/src/components/common/content-view.vue
+++ b/src/components/common/content-view.vue
@@ -53,64 +53,64 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 .wrap {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    position: relative;
-    &-title {
-        padding: 0 32px 24px;
-        background: #fff;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+    /*display: flex;*/
+    /*flex-direction: column;*/
+    /*flex: 1;*/
+    /*position: relative;*/
+    /*&-title {*/
+    /*    padding: 0 32px 24px;*/
+    /*    background: #fff;*/
+    /*    display: flex;*/
+    /*    justify-content: space-between;*/
+    /*    align-items: center;*/
 
-        &-text {
-            font-weight: bold;
-            flex: 1;
-        }
-    }
+    /*    &-text {*/
+    /*        font-weight: bold;*/
+    /*        flex: 1;*/
+    /*    }*/
+    /*}*/
 
-    &-header {
-        background: #fff;
-        padding: 0 32px;
-        border-bottom: 1px solid #e1e1e1;
-    }
+    /*&-header {*/
+    /*    background: #fff;*/
+    /*    padding: 0 32px;*/
+    /*    border-bottom: 1px solid #e1e1e1;*/
+    /*}*/
 
-    &-cont {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        padding: 0 24px;
+    /*&-cont {*/
+    /*    display: flex;*/
+    /*    flex-direction: column;*/
+    /*    flex: 1;*/
+    /*    padding: 0 24px;*/
 
-        &-cover {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            padding: 24px 0;
-        }
-    }
+    /*    &-cover {*/
+    /*        flex: 1;*/
+    /*        display: flex;*/
+    /*        flex-direction: column;*/
+    /*        padding: 24px 0;*/
+    /*    }*/
+    /*}*/
 
-    &-container {
-        flex: 1;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        overflow-x: auto;
-        background-color: #fff;
-        & > div {
-            padding: 24px;
-            overflow-x: hidden;
-        }
-    }
-    &-footer {
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        padding-left: 256px;
-        // padding-left: 50%;
-        width: 100%;
-        text-align: center;
-        z-index: 2;
-    }
+    /*&-container {*/
+    /*    flex: 1;*/
+    /*    position: relative;*/
+    /*    display: flex;*/
+    /*    flex-direction: column;*/
+    /*    overflow-x: auto;*/
+    /*    background-color: #fff;*/
+    /*    & > div {*/
+    /*        padding: 24px;*/
+    /*        overflow-x: hidden;*/
+    /*    }*/
+    /*}*/
+    /*&-footer {*/
+    /*    position: fixed;*/
+    /*    left: 0;*/
+    /*    bottom: 0;*/
+    /*    padding-left: 256px;*/
+    /*    // padding-left: 50%;*/
+    /*    width: 100%;*/
+    /*    text-align: center;*/
+    /*    z-index: 2;*/
+    /*}*/
 }
 </style>
diff --git a/src/components/common/the-header.vue b/src/components/common/the-header.vue
deleted file mode 100644
index 2e51e15..0000000
--- a/src/components/common/the-header.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-    <div class="header">
-        <div class="header-top">
-            <div class="header-top-company">昆船随行式垛机监测系统</div>
-            <div class="header-top-right">
-                <div class="header-top-right-circle" @click="visible = !visible"></div>
-                <a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
-                    <a href="javascript:;">
-                        {{
-                        userInfo.name ? userInfo.name : "userName"
-                        }}
-                    </a>
-                    <div class="flex flex-column" :style="{ 'min-width': '78px' }" slot="content">
-                        <a
-                            class="block mb16"
-                            href="javascript:;"
-                            @click="visible = false;$router.push({name: 'center'})"
-                        >个人中心</a>
-                        <a href="javascript:;" @click="logout">退出登录</a>
-                    </div>
-                </a-popover>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { mapState, mapMutations } from "vuex";
-export default {
-    name: "the-header",
-    computed: {
-        ...mapState(["userInfo"])
-    },
-    data() {
-        return {
-            visible: false
-        };
-    },
-    methods: {
-        ...mapMutations(["setState"]),
-        logout() {
-            this.visible = false;
-            localStorage.clear();
-            sessionStorage.clear();
-            this.$axios({
-                url: "/app/userCenter",
-                method: "GET"
-            }).then(res => {
-                window.open(res.data.url + "?action=logout", "_self");
-            });
-        }
-    }
-};
-</script>
-
-<style lang="scss">
-.header {
-    background: #eeeeee;
-    &-top {
-        z-index: 10;
-        height: 48px;
-        box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 24px;
-        background-color: #001529;
-        &-company {
-            font-size: 18px;
-            font-family: PingFangSC, PingFangSC-Medium;
-            font-weight: 500;
-            text-align: center;
-            color: #ffffff;
-        }
-        &-right {
-            display: flex;
-            align-items: flex-start;
-            &-circle {
-                width: 24px;
-                height: 24px;
-                border-radius: 50%;
-                background-color: #fff;
-                margin-right: 8px;
-                cursor: pointer;
-            }
-        }
-    }
-}
-</style>
diff --git a/src/components/common/the-aside.vue b/src/layouts/AsideMenu.vue
similarity index 66%
rename from src/components/common/the-aside.vue
rename to src/layouts/AsideMenu.vue
index a9f53cc..6c5c75d 100644
--- a/src/components/common/the-aside.vue
+++ b/src/layouts/AsideMenu.vue
@@ -1,13 +1,15 @@
 <template>
-    <div class="aside">
-        <a-menu
-            :selectedKeys="selectedKeys"
-            :openKeys.sync="openKeys"
-            @click="clickMenu"
-            mode="inline"
-            theme="light"
-            :inline-collapsed="aside_collapsed"
-        >
+    <a-layout-sider :class="['aside', collapsed ? 'merge' :'']" v-model="collapsed" theme="dark" :trigger="null" collapsible>
+        <div class="logo">
+            <img src="@/assets/logo1.png" alt />
+            <span class="logo-title">昆船随行式垛机监测系统</span>
+        </div>
+        <a-menu :selectedKeys="selectedKeys"
+                :openKeys.sync="openKeys"
+                @click="clickMenu"
+                mode="inline"
+                theme="dark"
+                :inline-collapsed="aside_collapsed">
             <template v-for="item in routes">
                 <!-- 如果没有子路由 -->
                 <a-menu-item :key="item.name" v-if="!item.meta.unfold">
@@ -18,24 +20,30 @@
                 <aside-item :key="item.name" :menuInfo="item" v-else></aside-item>
             </template>
         </a-menu>
-    </div>
+    </a-layout-sider>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState,mapGetters } from "vuex";
 export default {
-    name: "theAside",
+    name: "AsideMenu",
     computed: {
-        ...mapState(["aside_collapsed", "userInfo"])
+        ...mapState(["aside_collapsed", "userInfo"]),
+        ...mapGetters(['getAside_collapsed'])
     },
     watch: {
         $route() {
             console.log("123");
             this.setRoute();
+        },
+        getAside_collapsed: function (newValue) {
+            console.log(newValue)
+            this.collapsed = newValue
         }
     },
     data() {
         return {
+            collapsed:this.$store.state.aside_collapsed,
             selectedKeys: [],
             openKeys: [],
             routes: []
@@ -113,17 +121,58 @@ export default {
 </script>
 <style lang="scss">
 .aside {
+    flex: 0 0 270px!important;
+    max-width: 270px!important;
+    min-width: 270px!important;
+    width: 270px!important;
     height: 100vh;
     color: #fff;
-    position: relative;
+    position: fixed;
+    top: 0;
+    left: 0;
     box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
     z-index: 1000;
-    background-color: #fff;
+    .logo{
+        width: 100%;
+        height:64px;
+        overflow: hidden;
+        line-height: 64px;
+        font-size: 18px;
+        font-weight: 600;
+        color: #ffffff;
+        background:#001529;
+        /*text-align: center;*/
+        img{
+            width: 24px;
+            height: 24px;
+            margin: 10px;
+        }
+        .logo-title{
+            transition-delay: 0.5s;
+        }
+    }
     .ant-menu-inline {
-        width: 256px;
+        width:100%;
+        height: 100%;
     }
     .ant-menu-inline-collapsed {
         width: 80px;
     }
 }
+.merge{
+    flex: 0 0 80px!important;
+    max-width: 80px!important;
+    min-width: 80px!important;
+    width: 80px!important;
+    .logo{
+        img{
+            margin:0 30px;
+        }
+       .logo-title{
+           display: none;
+           height: 30px;
+           overflow: hidden;
+       }
+    }
+}
 </style>
diff --git a/src/layouts/Breadcrumb.vue b/src/layouts/Breadcrumb.vue
new file mode 100644
index 0000000..05cb358
--- /dev/null
+++ b/src/layouts/Breadcrumb.vue
@@ -0,0 +1,52 @@
+<template>
+  <a-breadcrumb class="breadcrumb">
+    <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
+      <router-link
+        v-if="item.name != name && index != 1"
+        :to="{ path: item.path === '' ? '/' : item.path }"
+      >{{ item.meta.name }}</router-link>
+      <span v-else>{{ item.meta.name }}</span>
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+
+<script type="text/javascript">
+export default {
+    name: "Breadcrumb",
+    data () {
+        return {
+            name: '',
+            breadList: []
+        }
+    },
+    created () {
+        this.getBreadcrumb()
+    },
+    methods: {
+        getBreadcrumb () {
+            this.breadList = []
+            // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
+
+            this.name = this.$route.name
+            console.log(this.$route.matched)
+            this.$route.matched.forEach(item => {
+                // item.name !== 'index' && this.breadList.push(item)
+                this.breadList.push(item)
+            })
+        }
+    },
+    watch: {
+        $route () {
+            this.getBreadcrumb()
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .breadcrumb{
+        background: #ffffff;
+        padding: 20px;
+        margin-top: 64px;
+    }
+</style>
diff --git a/src/layouts/PageContent.vue b/src/layouts/PageContent.vue
new file mode 100644
index 0000000..8ea938c
--- /dev/null
+++ b/src/layouts/PageContent.vue
@@ -0,0 +1,99 @@
+<template>
+    <div class="wrap">
+        <!-- 面包屑下标题 -->
+        <div class="wrap-title" v-if="$route.meta.name">
+            <span class="wrap-title-text">
+                <slot name="title">{{ title }}</slot>
+            </span>
+        </div>
+        <router-view class="sss"></router-view>
+        <!-- footer -->
+        <div class="wrap-footer bg-white">
+            <slot name="footer"></slot>
+        </div>
+    </div>
+</template>
+
+<script type="text/javascript">
+export default {
+    name: "PageContent",
+    data() {
+        return {
+            title: "",
+            footerStyle: false
+        };
+    },
+    watch: {
+        $route(route) {
+            this.title = route.meta.title || route.meta.name;
+        }
+    },
+    computed: {},
+    mounted() {
+        this.title = this.$route.meta.title || this.$route.meta.name;
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+    .wrap {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        position: relative;
+        &-title {
+            background: #fff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 0 20px 24px;
+            font-size: 18px;
+            &-text {
+                font-weight: bold;
+                flex: 1;
+            }
+        }
+
+        &-header {
+            background: #fff;
+            border-bottom: 1px solid #e1e1e1;
+        }
+
+        &-cont {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            padding: 0 24px;
+
+            &-cover {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                padding: 24px 0;
+            }
+        }
+
+        &-container {
+            flex: 1;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            overflow-x: auto;
+            background-color: #fff;
+            & > div {
+                padding: 24px;
+                overflow-x: hidden;
+            }
+        }
+        &-footer {
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            padding-left: 256px;
+            // padding-left: 50%;
+            width: 100%;
+            text-align: center;
+            z-index: 2;
+        }
+    }
+</style>
diff --git a/src/layouts/PageHeader.vue b/src/layouts/PageHeader.vue
new file mode 100644
index 0000000..1e89961
--- /dev/null
+++ b/src/layouts/PageHeader.vue
@@ -0,0 +1,115 @@
+<template>
+    <div :class="['header', collapsed ? 'collapsed-header' :'']">
+        <div class="header-left">
+            <a-layout-header style="background: #fff; padding: 0">
+                <a-icon
+                    class="trigger"
+                    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
+                    @click="collapsedFlag"
+                />
+            </a-layout-header>
+        </div>
+        <div class="header-right">
+            <div class="header-top-right-circle" @click="visible = !visible"></div>
+            <a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
+                <a href="javascript:;">
+                    {{
+                    userInfo.name ? userInfo.name : "userName"
+                    }}
+                </a>
+                <div class="flex flex-column" :style="{ 'min-width': '78px' }" slot="content">
+                    <a
+                        class="block mb16"
+                        href="javascript:;"
+                        @click="visible = false;$router.push({name: 'center'})"
+                    >个人中心</a>
+                    <a href="javascript:;" @click="logout">退出登录</a>
+                </div>
+            </a-popover>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapState, mapMutations, mapGetters} from "vuex";
+export default {
+    name: "PageHeader",
+    computed: {
+        ...mapState(["aside_collapsed", "userInfo"]),
+        ...mapGetters(['getAside_collapsed'])
+    },
+    watch: {
+        getAside_collapsed: function (newValue) {
+            console.log(newValue)
+            this.collapsed = newValue
+        }
+    },
+    data() {
+        return {
+            visible: false,
+            collapsed:false
+        };
+    },
+
+    methods: {
+        ...mapMutations(["setState"]),
+        logout() {
+            this.visible = false;
+            localStorage.clear();
+            sessionStorage.clear();
+            this.$axios({
+                url: "/app/userCenter",
+                method: "GET"
+            }).then(res => {
+                window.open(res.data.url + "?action=logout", "_self");
+            });
+        },
+        collapsedFlag(){
+            // console.log(11111)
+            this.collapsed = !this.collapsed
+            this.$store.commit('aside_collapsed',this.collapsed);
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.header {
+    background: #ffffff;
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+    /*border: solid 1px skyblue;*/
+    box-shadow: 0px 2px 5px rgba(0, 21, 41, 0.15);
+    /*margin-bottom: 2px;*/
+    position: fixed;
+    top: 0;
+    width: calc(100% - 270px);
+    &-left{
+        .trigger{
+            font-size: 18px;
+            line-height: 64px;
+            padding: 0 24px;
+            cursor: pointer;
+            transition: color 0.3s;
+        }
+    }
+    &-right {
+        display: flex;
+        align-items: flex-start;
+        padding-right: 20px;
+        &-circle {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background-color: #fff;
+            margin-right: 8px;
+            cursor: pointer;
+        }
+    }
+}
+.collapsed-header{
+    width: calc(100% - 80px);
+}
+</style>
diff --git a/src/layouts/index.js b/src/layouts/index.js
new file mode 100644
index 0000000..91ade3f
--- /dev/null
+++ b/src/layouts/index.js
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+// 注册全局组件
+const requireComponent = require.context('./', true, /\.vue$/);
+requireComponent.keys().map((filename) => {
+    const componentConfig = requireComponent(filename).default;
+    return Vue.component(componentConfig.name, componentConfig);
+});
diff --git a/src/main.js b/src/main.js
index b9b6416..32fb703 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import router from './router'
 import store from './store'
 import './plugins/antd'
 import './components/index'
+import './layouts/index'
 import utils from './utils/index'
 import api from './plugins/axios/index'
 Vue.config.productionTip = false
diff --git a/src/plugins/antd.js b/src/plugins/antd.js
index ccc271d..62af6e6 100644
--- a/src/plugins/antd.js
+++ b/src/plugins/antd.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import {
+    Layout,
     Input,
     Tabs,
     Table,
@@ -19,9 +20,9 @@ import {
     Select,
     Popconfirm,
     Tooltip,
-    Drawer
+    Drawer,
 } from "ant-design-vue";
-
+Vue.use(Layout);
 Vue.use(Input);
 Vue.use(Tabs);
 Vue.use(Table);
diff --git a/src/router/index.js b/src/router/index.js
index b521710..6bdc3ee 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,7 +27,7 @@ const routes = [{
     redirect: {
         name: 'history'
     },
-    component: () => import('@/views/main'),
+    component: () => import('@/views/index'),
     children: [
         // {
         //     path: 'realTime',
@@ -42,10 +42,19 @@ const routes = [{
             path: 'history',
             name: 'history',
             meta: {
-                icon: 'cloud',
+                icon: 'desktop',
                 name: '历史监控'
             },
             component: () => import('@/views/history/index')
+        },
+        {
+            path: 'roadwayManage',
+            name: 'roadwayManage',
+            meta: {
+                icon: 'build',
+                name: '巷道管理'
+            },
+            component: () => import('@/views/roadwayManage/index')
         }, {
             path: 'center',
             name: 'center',
diff --git a/src/store/index.js b/src/store/index.js
index 1fb247b..6f53540 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,6 +8,11 @@ export default new Vuex.Store({
         aside_collapsed: false,
         userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}')
     },
+    getters:{
+        getAside_collapsed(state){
+            return  state.aside_collapsed
+        },
+    },
     mutations: {
         // 通用修改
         setState(state, object) {
@@ -15,6 +20,9 @@ export default new Vuex.Store({
                 state[key] = object[key]
             }
         },
+        aside_collapsed(state,val){
+            state.aside_collapsed = val
+        },
     },
     actions: {},
     modules: {}
diff --git a/src/views/history/index.vue b/src/views/history/index.vue
index c70f38c..17c184a 100644
--- a/src/views/history/index.vue
+++ b/src/views/history/index.vue
@@ -43,7 +43,7 @@
 
 <script>
 // require styles
-import "video.js/dist/video-js.css";
+// import "video.js/dist/video-js.css";
 // import { videoPlayer } from "vue-video-player";
 export default {
     name: "history",
diff --git a/src/views/main.vue b/src/views/index.vue
similarity index 53%
rename from src/views/main.vue
rename to src/views/index.vue
index 6d7c7fd..6abd291 100644
--- a/src/views/main.vue
+++ b/src/views/index.vue
@@ -1,38 +1,36 @@
 <template>
-    <div class="mainIndex">
-        <the-header></the-header>
-        <div class="mainIndex-container">
-            <the-aside></the-aside>
-            <div class="mainIndex-container-content">
-                <div class="mainIndex-container-content-breadcrumb">
-                    <!-- 面包屑 -->
-                    <a-breadcrumb class="main-breadcrumb-cover">
-                        <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
-                            <span>{{ item.meta.name }}</span>
-                        </a-breadcrumb-item>
-                    </a-breadcrumb>
-                    <!-- 当前时间 -->
-                    <div class="mainIndex-container-content-breadcrumb-time">当前时间：{{current}}</div>
-                </div>
-                <router-view class="sss"></router-view>
-                <div class="mainIndex-container-content-footer">Copyright © 昆船随行式垛机监测系统</div>
-            </div>
+    <a-layout class="mainIndex">
+        <AsideMenu/>
+        <div :class="['mainIndex-container', collapsed ? 'collapsedClose' :'']">
+            <PageHeader/>
+            <Breadcrumb/>
+            <PageContent/>
         </div>
-    </div>
+    </a-layout>
 </template>
 
 <script>
+import {mapGetters, mapState} from "vuex";
 export default {
     name: "mainIndex",
     data() {
         return {
+            collapsed:this.$store.state.aside_collapsed,
             breadcrumbList: [],
             current: ""
         };
     },
+    computed: {
+        ...mapState(["aside_collapsed", "userInfo"]),
+        ...mapGetters(['getAside_collapsed'])
+    },
     watch: {
         $route(data) {
             this.processBread(data);
+        },
+        getAside_collapsed: function (newValue) {
+            console.log(newValue)
+            this.collapsed = newValue
         }
     },
     methods: {
@@ -103,47 +101,15 @@ export default {
 <style lang="scss">
 .mainIndex {
     display: flex;
-    flex-direction: column;
     &-aside {
         background: #001529;
     }
     &-container {
-        flex: 1;
-        display: flex;
-        &-content {
-            background-color: #eeeeee;
-            flex: 1;
-            padding: 24px;
-            display: flex;
-            flex-direction: column;
-            &-breadcrumb {
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: 16px;
-                .main-breadcrumb-cover {
-                    span {
-                        font-size: 16px;
-                        font-family: PingFangSC, PingFangSC-Medium;
-                        font-weight: 600;
-                        color: rgba(0, 0, 0, 0.85);
-                    }
-                }
-                &-time {
-                    font-size: 14px;
-                    font-family: PingFangSC, PingFangSC-Medium;
-                    font-weight: 500;
-                    color: rgba(0, 0, 0, 0.65);
-                }
-            }
-            .sss {
-                flex: 1;
-            }
-            &-footer {
-                width: 100%;
-                text-align: center;
-                padding: 16px 0;
-            }
-        }
+        flex: auto;
+       margin-left: 270px;
+    }
+    .collapsedClose{
+        margin-left: 80px;
     }
 }
 </style>
diff --git a/src/views/roadwayManage/index.vue b/src/views/roadwayManage/index.vue
new file mode 100644
index 0000000..324d265
--- /dev/null
+++ b/src/views/roadwayManage/index.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>巷道管理页面</div>
+</template>