diff --git a/package-lock.json b/package-lock.json
index ef9a229..167fbbd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,12 @@
       "name": "tp_web",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.4.0",
         "core-js": "^3.8.3",
-        "vue": "^2.6.14"
+        "element-ui": "^2.15.13",
+        "vue": "^2.6.14",
+        "vue-dplayer": "^0.0.10",
+        "vue-router": "^3.0.1"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -2161,9 +2165,9 @@
       }
     },
     "node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
+      "version": "7.0.11",
+      "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
     "node_modules/@types/mime": {
@@ -2179,9 +2183,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.2.4",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.2.4.tgz",
-      "integrity": "sha512-ni5f8Xlf4PwnT/Z3f0HURc3ZSw8UyrqMqmM3L5ysa7VjHu8c3FOmIo1nKCcLrV/OAmtf3N4kFna/aJqxsfEtnA==",
+      "version": "20.2.3",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.2.3.tgz",
+      "integrity": "sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw==",
       "dev": true
     },
     "node_modules/@types/normalize-package-data": {
@@ -3295,6 +3299,19 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "dependencies": {
+        "babel-runtime": "6.x"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3327,6 +3344,21 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "node_modules/babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -3408,12 +3440,38 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/balloon-css": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/balloon-css/-/balloon-css-1.2.0.tgz",
+      "integrity": "sha512-urXwkHgwp6GsXVF+it01485Z2Cj4pnW02ICnM0TemOlkKmCNnDLmyy+ZZiRXBpwldUXO+aRNr7Hdia4CBvXJ5A=="
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
@@ -3912,6 +3970,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -4458,7 +4527,6 @@
       "version": "1.5.2",
       "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
       "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4615,6 +4683,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -4756,6 +4832,26 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "node_modules/dplayer": {
+      "version": "1.27.1",
+      "resolved": "https://registry.npmjs.org/dplayer/-/dplayer-1.27.1.tgz",
+      "integrity": "sha512-2laBMXs5V1B9zPwJ7eAIw/OBo+Xjvy03i4GHTk3Cg+IWbrq8rKMFO0fFr6ClAYotYOCcFGOvaJDkOZcgKllsCA==",
+      "dependencies": {
+        "axios": "1.2.3",
+        "balloon-css": "^1.0.3",
+        "promise-polyfill": "8.3.0"
+      }
+    },
+    "node_modules/dplayer/node_modules/axios": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.3.tgz",
+      "integrity": "sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
@@ -4778,11 +4874,27 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.408",
-      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.408.tgz",
-      "integrity": "sha512-vjeaj0u/UYnzA/CIdGXzzcxRLCqRwREYc9YfaWInjIEr7/XPttZ6ShpyqapchEy0S2r6LpLjDBTnNj7ZxnxJKg==",
+      "version": "1.4.407",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.407.tgz",
+      "integrity": "sha512-5smEvFSFYMv90tICOzRVP7Opp98DAC4KW7RRipg3BuNpGbbV3N+x24Zh3sbLb1T5haGtOSy/hrBfXsWnIM9aCg==",
       "dev": true
     },
+    "node_modules/element-ui": {
+      "version": "2.15.13",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.13.tgz",
+      "integrity": "sha512-LJoatEYX6WV74FqXBss8Xfho9fh9rjDSzrDrTyREdGb1h1R3uRvmLh5jqp2JU137aj4/BgqA3K06RQpQBX33Bg==",
+      "dependencies": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^2.5.17"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -5784,7 +5896,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -5794,6 +5905,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -7155,7 +7279,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7164,7 +7287,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -7471,6 +7593,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "node_modules/npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -8543,6 +8670,11 @@
         "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/promise-polyfill": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.3.0.tgz",
+      "integrity": "sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -8565,6 +8697,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -8840,6 +8977,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.2.tgz",
@@ -9713,6 +9855,14 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
@@ -9951,6 +10101,15 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-dplayer": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/vue-dplayer/-/vue-dplayer-0.0.10.tgz",
+      "integrity": "sha512-l6d6OnhEUO87lhAees9mEBUFsG5Thqv/VeEVZlSQ993/S0oxvWTDLjjkzH59hO2PALimBK2kB6yNYsHyJBgotw==",
+      "dependencies": {
+        "dplayer": "^1.22.2",
+        "vue-github-badge": "1.0.1"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -10050,6 +10209,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue-github-badge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-github-badge/-/vue-github-badge-1.0.1.tgz",
+      "integrity": "sha512-8X+FUWapnnDfs6cRUg3mCfHUf2r5arUfCSRdvbIn860oj9us3Rz3VOtioUgmfzh6EhaaYTs0Oh78EzJ+Z6uqAA=="
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -10142,6 +10306,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-router": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
+      "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w=="
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -10212,9 +10381,9 @@
       "dev": true
     },
     "node_modules/webpack": {
-      "version": "5.84.1",
-      "resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.84.1.tgz",
-      "integrity": "sha512-ZP4qaZ7vVn/K8WN/p990SGATmrL1qg4heP/MrVneczYtpDGJWlrgZv55vxaV2ul885Kz+25MP2kSXkPe3LZfmg==",
+      "version": "5.84.0",
+      "resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.84.0.tgz",
+      "integrity": "sha512-XezNK3kwJq6IyeoZmZ1uEqQs+42nTqIi4jYM/YjLwaJedUC1N3bwnCC0+UcnHJPfqWX0kGrQnMIvZZyWYaIZrA==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
diff --git a/package.json b/package.json
index 28fe9a1..f330220 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "element-ui": "^2.15.13",
+    "vue": "^2.6.14",
+    "vue-dplayer": "^0.0.10",
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
diff --git a/public/index.html b/public/index.html
index 3e5a139..3c47325 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,3 +15,4 @@
     <!-- built files will be auto injected -->
   </body>
 </html>
+<script src="<%= BASE_URL %>server-config.js"></script>
diff --git a/public/server-config.js b/public/server-config.js
new file mode 100644
index 0000000..9aeef19
--- /dev/null
+++ b/public/server-config.js
@@ -0,0 +1,4 @@
+window.serverConfig = {
+  // 后台服务器
+  VUE_APP_HOST_URL: 'http://192.168.0.47:8000/api/',
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 55df315..ba26d0d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,15 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
   }
 }
 </script>
@@ -21,8 +19,6 @@ export default {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>
diff --git a/src/assets/account-logo.png b/src/assets/account-logo.png
new file mode 100644
index 0000000..22cffd5
Binary files /dev/null and b/src/assets/account-logo.png differ
diff --git a/src/assets/login.svg b/src/assets/login.svg
new file mode 100644
index 0000000..2490aa7
--- /dev/null
+++ b/src/assets/login.svg
@@ -0,0 +1,127 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1361px"
+     height="609px" viewBox="0 0 1361 609" version="1.1">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 21</title>
+    <desc>Created with Sketch.</desc>
+    <defs/>
+    <g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
+            <g id="Group-21" transform="translate(77.000000, 73.000000)">
+                <g id="Group-18" opacity="0.8"
+                   transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
+                    <ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367"
+                             rx="21.7830479" ry="21.766008"/>
+                    <ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601"
+                             rx="5.2173913" ry="5.21330997"/>
+                    <path
+                            d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z"
+                            id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"/>
+                    <path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6"
+                          stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7"
+                          stroke-width="0.702678964" opacity="0.7" stroke-linecap="round"
+                          stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"/>
+                    <path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9"
+                          stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round"
+                          stroke-dasharray="1.405357899873153,2.108036953469981"/>
+                    <g id="Group-17"
+                       transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)"
+                       fill="#CFDAE6">
+                        <ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653"
+                                 ry="9.12768076"/>
+                        <path
+                                d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z"
+                                id="Oval-4"
+                                transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "/>
+                    </g>
+                </g>
+                <g id="Group-14"
+                   transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439"
+                             rx="29.1176471" ry="29.1402439"/>
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439"
+                             rx="21.5686275" ry="21.5853659"/>
+                    <ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341"
+                             rx="23.7254902" ry="23.7439024"/>
+                    <ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439"
+                             rx="10.7843137" ry="10.7926829"/>
+                    <path
+                            d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z"
+                            id="Oval-2" fill="#BACAD9"/>
+                    <g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)"
+                       fill="#E6A1A6">
+                        <ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824"
+                                 ry="6.47560976"/>
+                        <path
+                                d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z"
+                                id="Oval-2-Copy-2"
+                                transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "/>
+                    </g>
+                    <ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706"
+                             ry="1.61890244"/>
+                    <ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098"
+                             rx="1.61764706" ry="1.61890244"/>
+                    <ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488"
+                             rx="2.15686275" ry="2.15853659"/>
+                    <path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6"
+                          opacity="0.8"/>
+                </g>
+                <g id="Group-10" opacity="0.799999952"
+                   transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
+                    <ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32"
+                             rx="11.1864407" ry="11.2941176"/>
+                    <g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
+                        <ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627"
+                                 ry="8.55614973"/>
+                        <path
+                                d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z"
+                                id="Oval-7"/>
+                    </g>
+                    <path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6"
+                          stroke-width="0.941176471"/>
+                    <ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186"
+                             cy="3.29411765" rx="3.26271186" ry="3.29411765"/>
+                    <ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017"
+                             ry="2.82352941"/>
+                    <path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6"
+                          stroke-width="0.941176471"/>
+                </g>
+                <g id="Group-19" opacity="0.33"
+                   transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
+                    <g id="Group-17"
+                       transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)"
+                       fill="#BACAD9">
+                        <circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"/>
+                        <path
+                                d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z"
+                                id="Oval-4"
+                                transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "/>
+                    </g>
+                    <circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"/>
+                    <path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9"
+                          stroke-width="1.16666667"/>
+                    <path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9"
+                          stroke-width="1.16666667"/>
+                    <polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667"
+                              points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"/>
+                    <path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7"
+                          stroke-width="1.16666667" opacity="0.6"/>
+                    <path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9"
+                          stroke-width="1.16666667"/>
+                    <path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6"
+                          stroke-width="1.16666667"/>
+                    <circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"/>
+                    <circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"/>
+                    <circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25"
+                            r="8.75"/>
+                    <circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333"
+                            cy="30.3333333" r="5.83333333"/>
+                    <circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"/>
+                </g>
+            </g>
+        </g>
+    </g>
+    <div xmlns="" id="divScriptsUsed" style="display: none"/>
+    <script xmlns="" id="globalVarsDetection"
+            src="chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/wrs_env.js"/>
+</svg>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..8e577aa
--- /dev/null
+++ b/src/components/Home.vue
@@ -0,0 +1,249 @@
+<template>
+
+  <div class="hello">
+    <Nav></Nav>
+
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="日期：">
+        <el-input v-model="formInline.date" placeholder="日期"></el-input>
+      </el-form-item>
+
+      <el-form-item label="警号：">
+        <el-input v-model="formInline.policeId" placeholder="警号"></el-input>
+      </el-form-item>
+      <el-form-item label="事件：">
+        <el-input v-model="formInline.event" placeholder="事件"></el-input>
+
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+        :data="tableData"
+        stripe
+        style="width: 100%">
+      <el-table-column
+          prop="record_time"
+          label="记录仪日期时间">
+      </el-table-column>
+      <el-table-column
+          prop="police_id"
+          label="警号">
+      </el-table-column>
+      <el-table-column
+          prop="event_type"
+          label="事件">
+        <template v-slot="scope">
+          <span>
+            {{ scope.row.event_type || '未定义事件' }}
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+          prop="is_violation"
+          label="是否违规">
+        <template v-slot="scope">
+          <span v-if="scope.row.is_violation">是</span>
+          <span v-else>否</span>
+        </template>
+      </el-table-column>
+
+
+      <el-table-column
+          prop="small_image"
+          label="缩率图">
+
+        <template v-slot="scope">
+          <el-image :preview-src-list="[scope.row.small_image]"
+                    style="width: 80px; height: 80px"
+                    :src="scope.row.small_image"
+          ></el-image>
+
+        </template>
+
+      </el-table-column>
+
+      <el-table-column
+          prop="car_number"
+          label="车牌号">
+      </el-table-column>
+
+      <el-table-column show-overflow-tooltip label="视频">
+
+        <template v-slot="scope">
+
+          <el-button type="primary" @click="goto_video(scope.row)" icon="el-icon-video-play"
+                     :disabled="scope.row.video_dir === '' || scope.row.video_dir === null"
+          >
+
+            <span v-if="scope.row.video_dir">播放视频</span>
+            <span v-else>暂无视频</span>
+          </el-button>
+        </template>
+
+      </el-table-column>
+
+
+    </el-table>
+    <el-pagination
+        class="tablePage"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next"
+        :total="totalNumber">
+    </el-pagination>
+
+  </div>
+</template>
+
+<script>
+import Nav from "@/components/Nav.vue";
+
+export default {
+  name: 'HelloWorld',
+  components: {
+    Nav
+  },
+  props: {
+    msg: String
+  },
+
+  data() {
+    return {
+      currentPage: 1,
+      totalNumber: 0,
+      pageSize: 10,
+      isDisplay: true,
+
+      formInline: {
+        date: '',
+        policeId: '',
+        event: ''
+      },
+
+      eventMap: {
+        1: "抽烟",
+        2: "汽车追尾",
+        3: "打架",
+        4: "闯红绿灯",
+      },
+
+      tableData: [
+        {
+          record_time: '2016-05-02 20:20:20',
+          police_id: '王小虎',
+          event_type: '上海市普陀区金沙江路 1518 弄',
+          is_violation: true,
+          small_image: "",
+          video_dir: "http://static.smartisanos.cn/common/video/t1-ui.mp4",
+          car_number: "",
+          is_display: true,
+          relative_time: 0
+        }
+      ]
+    }
+  },
+
+  methods: {
+    goto_video(rowData) {
+      let highlights = [  // 进度条时间点高亮
+        {
+          text: rowData.event_type,
+          time: rowData.relative_time,
+        }
+      ];
+
+      this.$router.push({
+        name: 'play_video',
+        params: {video_url: rowData.video_dir, highlights: highlights}
+      });
+    },
+
+    onSearch() {
+      this.$axios({
+        url: window.serverConfig.VUE_APP_HOST_URL,
+        method: 'get',
+        params: {
+          datetime: this.formInline.date || undefined,
+          police_id: this.formInline.policeId || undefined,
+          event_type: this.formInline.event || undefined,
+          page: this.currentPage || undefined,
+          page_size: this.pageSize || undefined
+        }
+      }).then(response => {
+        // console.log('请求成功');
+        // console.log(response.data);
+        this.totalNumber = response.data.count;
+        if (!this.isDisplay) {
+          this.tableData = response.data.results.filter((data) => {
+            return data.is_display === true;
+          });
+        } else {
+          this.tableData = response.data.results
+        }
+
+
+      }).catch(error => {
+        // console.log('请求失败');
+        console.log(error);
+      })
+    },
+
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.onSearch();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.onSearch();
+    }
+  },
+  mounted() {
+    this.onSearch();
+  }
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+}
+
+a {
+  color: #42b983;
+}
+
+.hello {
+  margin: 10px auto;
+  text-align: right;
+  overflow: hidden;
+}
+
+.demo-form-inline {
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px 10px;
+}
+
+.tablePage {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 auto;
+}
+</style>
diff --git a/src/components/Login.vue b/src/components/Login.vue
new file mode 100644
index 0000000..2a8b558
--- /dev/null
+++ b/src/components/Login.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="view-account">
+
+    <div class="view-account-header"></div>
+    <div class="view-account-container">
+
+      <div class="view-account-top-logo">
+        <img src="../assets/account-logo.png" alt="">
+        <div>TP视频管理系统后台</div>
+      </div>
+
+
+      <div class="view-account-form">
+        <el-form
+            ref="formRef"
+            label-placement="left"
+            size="large"
+            :model="formInline"
+            :rules="rules"
+        >
+          <el-form-item path="username">
+            <el-input v-model="formInline.username" placeholder="请输入用户名">
+              <template #prefix>
+                <span class="el-icon-user"></span>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item path="password">
+            <el-input
+                v-model="formInline.password"
+                type="password"
+                showPasswordOn="click"
+                placeholder="请输入密码"
+            >
+              <template #prefix>
+                <span class="el-icon-lock"></span>
+              </template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="handleSubmit" class="loginButton">登录</el-button>
+          </el-form-item>
+
+        </el-form>
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<script>
+import {reactive} from 'vue';
+
+
+export default {
+  name: 'LoginPage',
+  data() {
+    return {
+      formInline: reactive({
+        username: 'admin',
+        password: '123456',
+        isCaptcha: true,
+      }),
+      rules: {
+        username: {required: true, message: '请输入用户名', trigger: 'blur'},
+        password: {required: true, message: '请输入密码', trigger: 'blur'},
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$router.push({
+        name: 'home',
+      });
+    }
+  }
+}
+
+
+</script>
+
+<style scoped>
+.view-account {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+}
+
+.view-account-header {
+  width: 100%;
+}
+
+
+.view-account-container {
+  flex: 1;
+  padding: 32px 12px;
+  width: 420px;
+  margin: 0 auto;
+}
+
+.view-account-top-logo {
+  padding: 32px 0;
+  text-align: center;
+}
+
+.loginButton {
+  min-width: 420px;
+  min-height: 40px;
+  padding: 0;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+
+@media (min-width: 768px) {
+  .view-account {
+    background-image: url('../assets/login.svg');
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 100%;
+  }
+
+}
+</style>
diff --git a/src/components/MyPlayer.vue b/src/components/MyPlayer.vue
new file mode 100644
index 0000000..91f6675
--- /dev/null
+++ b/src/components/MyPlayer.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class='box'>
+    <Nav></Nav>
+    <div id="dplayer" ></div>
+  </div>
+</template>
+
+<script>
+
+import Dplayer from 'dplayer';
+import Nav from "@/components/Nav.vue";
+
+export default {
+  name: 'MyPlayer',
+  components: {
+    Nav
+  },
+  data() {
+    return {
+      dp: {},
+      VideoOptions: {
+      }
+    };
+  },
+  methods: {},
+  mounted() {
+    let video_url = this.$route.params.video_url;
+    let highlight = this.$route.params.highlights;
+    let seek_time = 0
+    if (typeof highlight != 'undefined') {
+      seek_time = highlight[0].time
+    }
+
+
+    this.dp = new Dplayer({
+      container: document.getElementById('dplayer'),
+      video: {
+        url: video_url,
+      },
+      theme: '#b7daff',  // 风格颜色，例如播放条，音量条的颜色
+      loop: false,  // 是否自动循环
+      lang: 'zh-cn',  // 语言，'en', 'zh-cn', 'zh-tw'
+      screenshot: true,  // 是否允许截图（按钮），点击可以自动将截图下载到本地
+      hotkey: true,  // 是否支持热键，调节音量，播放，暂停等
+      preload: 'auto',  // 自动预加载
+      volume: 1,  // 初始化音量
+      autoplay: true,
+      highlight: highlight
+    })
+    this.dp.seek(seek_time)
+  }
+}
+
+</script>
+
+
+<style scoped>
+#dplayer {
+  width: 60%;
+  height: 60%;
+  margin: 10px auto;
+
+}
+
+.box {
+  width: 100%;
+  height: 80%;
+  margin: 10px auto;
+  text-align: right;
+  overflow: hidden;
+}
+
+.nav a {
+  margin: 100px auto;
+  font: normal 20px/100px '微软雅黑';
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
new file mode 100644
index 0000000..c66103a
--- /dev/null
+++ b/src/components/Nav.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="nav">
+
+    <h1>TP视频管理系统</h1>
+
+    <el-button type="primary" class="ChoiceButton">
+      <router-link :to="routeInfo.name">{{ routeInfo.info }}</router-link>
+    </el-button>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GlobNav",
+  data() {
+    return {
+      routeInfo: {
+        name: '/home',
+        info: '回到首页'
+      }
+    }
+  },
+
+  mounted() {
+
+    let routeName = this.$route.name;
+    if (routeName === 'home') {
+      this.routeInfo.name = '/login'
+      this.routeInfo.info = '退出登录'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.nav {
+  margin: 0 auto;
+  height: 150px;
+  //background-color: rgba(0, 0, 0, 0.4);
+}
+
+.nav a {
+  //margin: 30px 50px 0 50px;
+  font: normal 20px/20px '微软雅黑';
+  text-align: center;
+  text-decoration: none;
+  color: white;
+}
+
+.nav a:hover {
+  color: red;
+}
+
+.ChoiceButton {
+  margin-right: 50px;
+}
+
+h1 {
+  text-align: center;
+  margin: 0;
+  color: blue;
+  padding: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 63eb05f..6df5b51 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,18 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from "@/router";
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 
 Vue.config.productionTip = false
+Vue.use(ElementUI)
+
+// 配置axios，完成ajax请求
+import axios from 'axios'
+Vue.prototype.$axios = axios;
 
 new Vue({
+  router: router,
   render: h => h(App),
 }).$mount('#app')
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..73826e7
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,32 @@
+// 路由管理
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+
+export default new Router({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes: [
+        {
+            path: '/',
+            redirect: '/home'
+        },
+        {
+            path: '/home',
+            name: 'home',
+            component: () => import('./components/Home.vue')
+        },
+        {
+            path: '/login',
+            name: 'login',
+            component: () => import('./components/Login.vue')
+        },
+        {
+            path: '/play',
+            name: 'play_video',
+            component: () => import('./components/MyPlayer.vue')
+        }
+    ]
+})
\ No newline at end of file