project

a4056b92 · lcn · e1f58fb9 · a4056b92 · a4056b92 · a4056b92
Commit a4056b92 authored Aug 30, 2021 by lcn
36 changed files
--- a/.browserslistrc
+++ b/.browserslistrc
+> 1%
+last 2 versions
--- a/.editorconfig
+++ b/.editorconfig
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/babel.config.js
+++ b/babel.config.js
+// 项目开发阶段用到的babel插件
+const prodPlugins = []
+if (process.env.NODE_ENV === 'production') {
+  prodPlugins.push('transform-remove-console')
+}
+
+module.exports = {
+  'presets': [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'plugins': [
+    [
+      'component',
+      {
+        'libraryName': 'element-ui',
+        'styleLibraryName': 'theme-chalk'
+      }
+    ],
+    // 发布产品时候的插件数组
+    ...prodPlugins,
+    '@babel/plugin-syntax-dynamic-import'
+  ]
+}
--- a/dist.zip
+++ b/dist.zip
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+    "name": "vue_shop_admin",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build"
+    },
+    "dependencies": {
+        "@babel/core": "^7.15.0",
+        "@babel/preset-env": "^7.15.0",
+        "axios": "^0.19.1",
+        "babel-plugin-transform-remove-console": "^6.9.4",
+        "core-js": "^3.4.4",
+        "echarts": "^4.6.0",
+        "element-ui": "^2.15.5",
+        "lodash": "^4.17.15",
+        "nprogress": "^0.2.0",
+        "vue": "^2.6.10",
+        "vue-quill-editor": "^3.0.6",
+        "vue-router": "^3.1.3",
+        "vue-table-with-tree-grid": "^0.2.4"
+    },
+    "devDependencies": {
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@vue/cli-plugin-babel": "^4.1.0",
+        "@vue/cli-service": "^4.1.0",
+        "babel-plugin-component": "^1.1.1",
+        "less": "^3.10.3",
+        "less-loader": "^5.0.0",
+        "vue-cli-plugin-element": "^1.0.1",
+        "vue-template-compiler": "^2.6.10"
+    }
+}
--- a/project @ f12f5dfe
+++ b/project @ f12f5dfe
+Subproject commit f12f5dfe46418a5cc4bf5f2a8000470c1618329b
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>
+        <%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>xilixili</title>
+
+    <% if(htmlWebpackPlugin.options.isProd){ %>
+        <!-- nprogress 的样式表文件 -->
+        <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
+        <!-- 富文本编辑器 的样式表文件 -->
+        <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
+        <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
+        <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
+        <!-- element-ui 的样式表文件 -->
+        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+
+        <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
+        <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
+        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
+        <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
+        <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
+        <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
+        <!-- 富文本编辑器的 js 文件 -->
+        <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
+
+        <!-- element-ui 的 js 文件 -->
+        <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
+
+
+        <% } %>
+
+</head>
+
+<body>
+    <noscript>
+      <strong>We're sorry but vue_shop_admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+</body>
+
+</html>
\ No newline at end of file
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <div id="app">
+    <!-- 路由占位符 -->
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app'
+}
+</script>
+
+<style>
+</style>
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
+/* 全局样式 */
+html,
+body,
+#app {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    min-width: 1366px;
+}
+
+.el-breadcrumb {
+    margin-bottom: 15px;
+    font-size: 12px;
+}
+
+.el-card {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
+}
+
+.el-table {
+    margin-top: 15px;
+    font-size: 12px;
+}
+
+.el-pagination {
+    margin-top: 15px;
+}
+
+/* 解决级联选择框的问题 */
+div .el-scrollbar__wrap {
+    height: 300px !important
+}
+
+/* 步骤条 */
+.el-steps {
+    margin: 15px 0;
+}
+
+.el-step__title {
+    font-size: 13px;
+}
+.ql-editor{
+    min-height: 300px;
+}
\ No newline at end of file
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/*reset.css*/
+:root {
+    --font-size: 14px;
+}
+html,body,div,img,p {
+    margin: 0;
+    padding: 0;
+}
+
+ul,li{
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+a{
+    text-decoration: none;
+    /* color: #ff */
+}
+a:hover,a:visited,a:link,a:active,a {
+    text-decoration: none;
+}
+.router-link-active {
+    text-decoration: none;
+}
+
+button{
+    background-color: transparent;
+    outline: none;
+    border-style:none;
+    padding:0;
+    margin: 0;
+}
+
+form {
+    margin: 0;
+}
+
+p {
+    padding: 0;
+    margin: 0;
+}
+
+input{
+    outline: none;
+}
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+    margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+    display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+    border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+    overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+    text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+    vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+    display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+    display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+    display: none;
+}
\ No newline at end of file
--- a/src/assets/fonts/background.jpg
+++ b/src/assets/fonts/background.jpg
--- a/src/assets/fonts/demo.css
+++ b/src/assets/fonts/demo.css
+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+
--- a/src/assets/fonts/demo_fontclass.html
+++ b/src/assets/fonts/demo_fontclass.html
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-showpassword"></i>
+                    <div class="name">show-password </div>
+                    <div class="fontclass">.icon-showpassword</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-user"></i>
+                    <div class="name">user</div>
+                    <div class="fontclass">.icon-user</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-users"></i>
+                    <div class="name">users</div>
+                    <div class="fontclass">.icon-users</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-3702mima"></i>
+                    <div class="name">password-b</div>
+                    <div class="fontclass">.icon-3702mima</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shangpin"></i>
+                    <div class="name">06商品</div>
+                    <div class="fontclass">.icon-shangpin</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-danju"></i>
+                    <div class="name">25单据</div>
+                    <div class="fontclass">.icon-danju</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tijikongjian"></i>
+                    <div class="name">28体积、空间</div>
+                    <div class="fontclass">.icon-tijikongjian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-morentouxiang"></i>
+                    <div class="name">225默认头像</div>
+                    <div class="fontclass">.icon-morentouxiang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-baobiao"></i>
+                    <div class="name">406报表</div>
+                    <div class="fontclass">.icon-baobiao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-lock_fill"></i>
+                    <div class="name">lock_fill</div>
+                    <div class="fontclass">.icon-lock_fill</div>
+                </li>
+            
+        </ul>
+
+        <h2 id="font-class-">font-class引用</h2>
+        <hr>
+
+        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
+        <p>与unicode使用方式相比，具有如下特点：</p>
+        <ul>
+        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
+        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
+        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
+        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
+
+
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>
--- a/src/assets/fonts/demo_symbol.html
+++ b/src/assets/fonts/demo_symbol.html
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时，垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-showpassword"></use>
+                    </svg>
+                    <div class="name">show-password </div>
+                    <div class="fontclass">#icon-showpassword</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-user"></use>
+                    </svg>
+                    <div class="name">user</div>
+                    <div class="fontclass">#icon-user</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-users"></use>
+                    </svg>
+                    <div class="name">users</div>
+                    <div class="fontclass">#icon-users</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-3702mima"></use>
+                    </svg>
+                    <div class="name">password-b</div>
+                    <div class="fontclass">#icon-3702mima</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shangpin"></use>
+                    </svg>
+                    <div class="name">06商品</div>
+                    <div class="fontclass">#icon-shangpin</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-danju"></use>
+                    </svg>
+                    <div class="name">25单据</div>
+                    <div class="fontclass">#icon-danju</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tijikongjian"></use>
+                    </svg>
+                    <div class="name">28体积、空间</div>
+                    <div class="fontclass">#icon-tijikongjian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-morentouxiang"></use>
+                    </svg>
+                    <div class="name">225默认头像</div>
+                    <div class="fontclass">#icon-morentouxiang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-baobiao"></use>
+                    </svg>
+                    <div class="name">406报表</div>
+                    <div class="fontclass">#icon-baobiao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-lock_fill"></use>
+                    </svg>
+                    <div class="name">lock_fill</div>
+                    <div class="fontclass">#icon-lock_fill</div>
+                </li>
+            
+        </ul>
+
+
+        <h2 id="symbol-">symbol引用</h2>
+        <hr>
+
+        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
+        <ul>
+          <li>支持多色图标了，不再受单色限制。</li>
+          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
+          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
+          <li>浏览器渲染svg的性能一般，还不如png。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>
--- a/src/assets/fonts/demo_unicode.html
+++ b/src/assets/fonts/demo_unicode.html
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xea3f;</i>
+                    <div class="name">show-password </div>
+                    <div class="code">&amp;#xea3f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe89a;</i>
+                    <div class="name">user</div>
+                    <div class="code">&amp;#xe89a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8b5;</i>
+                    <div class="name">users</div>
+                    <div class="code">&amp;#xe8b5;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe66c;</i>
+                    <div class="name">password-b</div>
+                    <div class="code">&amp;#xe66c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe888;</i>
+                    <div class="name">06商品</div>
+                    <div class="code">&amp;#xe888;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe89b;</i>
+                    <div class="name">25单据</div>
+                    <div class="code">&amp;#xe89b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe89f;</i>
+                    <div class="name">28体积、空间</div>
+                    <div class="code">&amp;#xe89f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8c9;</i>
+                    <div class="name">225默认头像</div>
+                    <div class="code">&amp;#xe8c9;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe902;</i>
+                    <div class="name">406报表</div>
+                    <div class="code">&amp;#xe902;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe709;</i>
+                    <div class="name">lock_fill</div>
+                    <div class="code">&amp;#xe709;</div>
+                </li>
+            
+        </ul>
+        <h2 id="unicode-">unicode引用</h2>
+        <hr>
+
+        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
+        <ul>
+        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
+        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+        </ul>
+        <blockquote>
+        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
+        </blockquote>
+        <p>unicode使用步骤如下：</p>
+        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>
--- a/src/assets/fonts/iconfont.css
+++ b/src/assets/fonts/iconfont.css
+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1523541245904'); /* IE9*/
+  src: url('iconfont.eot?t=1523541245904#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAlQAAsAAAAADaAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kwvY21hcAAAAYAAAAC5AAACRBgbdDZnbHlmAAACPAAABLEAAAYwqlSpxGhlYWQAAAbwAAAALwAAADYRCk+5aGhlYQAAByAAAAAcAAAAJAfeA41obXR4AAAHPAAAABQAAAAwL+kAAGxvY2EAAAdQAAAAGgAAABoK4gkabWF4cAAAB2wAAAAfAAAAIAEbAF1uYW1lAAAHjAAAAUUAAAJtPlT+fXBvc3QAAAjUAAAAfAAAAJxR1mrdeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sc4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVLyyZ27438AQw9zA0AAUZgTJAQAqSwy1eJzFkj0SgkAMhd8uP7piYeV4CO/AhTgAlTUHsIKC3sqGQ3ARCFwC3xJwxp9ak/l2Jm93kp0kACIAATmTEDB3GHi7UTWzHmA36yEujI84UImRd1nvpJBKammkHeyYThPvV7180z/NMNfqp6d7PULCCgE22LKqY31LOf6a5Sdm/lf61fbzeV2ihOQL/GKXKX6mvVP8GykU9hRSKn7mUinsM6RW2HFIo/h9kFbhFDBYxe/DmCqwDyFxPqkAAAB4nGVTT2zTVhh/33v+kz/Gbew4bpKmtesmHk2I1CR2yqY2phQK1UAVdCBAqJ0qbQjY1sOAHYCZA9OASQQhTRqnakya2GEcuSAI4rDTLhNjBw4DbRx2m3ba0Pq6z2m7IWb7fc/f80/+fr/vDxEJWX3G7rI+opPXyCiZIrOEgFSGIZUWwHYbVVoGwxYNM60y13Ft2RmqsnEwh6R0puY3SqYkSz2gwgDU7ZrvVqkLXmOCvgG1TAEgm8/t14r9GmtDos8duMhn6JdgDDr9PRNb+O5KK12z9NgZRdOymvZZTBLFGKVCjwrvmZm4GE9I/CuxJ2fcHdxMB0HJurk3D22y8trbnzbeLxTNOEAYgp631K9bqVwKn7O5jK5l5d5Nsb7cJmc4DWd+TfbpSqH0C8GLodY/BUIXiEKypBTpFOTSsOsPNzOCWVRBHgBzAppVcI2XHYEI/Lfnz/hzQYD8s+dgCpy8e5nSKyePXWWx9rEdhyg9tGPNQmXfT4n4owMHHsXRvmBXTp68wtjVY2gP/wtCG/EB5NNhHWaRAUKKVfAw3AS4fslVwZQyJhJISzIysatAP+iVhXF1wMgn7Vu37GTeGFDHBbl3alVlobr6QPYF2D8pHim4j1X1sVs4Ik7uB8GXk9cXF69jLAy4GgqEDWKsyW605v+jZTaiiWvCEeQ3Sz4adF5F0Z9VCVhDyWlmonDtWiFhajmlwUBSX3+iMKI84a2hmSGlL25mBZoUe8pOg04ffQUHM0fEKoPpMWFP1r6TTN6xs3uEsWlgVTFxbm7uXMxwlFSlX59ysunihw23t3GQvgJa03afnWeTxCIV1MaQrdNE9q6HRAvgRHxTyNwerddQM6A6A926YbvsPNCyVQcQzs8vXBBH4laZQtmGF64sWRUu032tbW9R4I+gBy4NjsApaf5jEVi4IJ0GGLH4R3YFACr0eOugAOzAtlOnCRG6zRZiu+nEJHkyiKV2vEYJh0qSDYdFTJAC1A1Hdry6iYsFHV29r2pwP4DhPA3zw8ADbO5W60GrRcN5VdfV+ZUOHnc/B2Gr1SJit38CFpAMxnCIS8pRpG6tcEwlI5XOREPppRqlYi2TloZKDV+3PbuJK7qZtQy7fX83LKuaptIALf8BTb+m7V3F9gx5CN1FOwhCqKauBF1oR9WsCNavrSwH0bU+X+u6RZIkKUK2QMlLiXoRGYhFET0Zfuc3ErBkwTsJ3uZLEP3/oijBWSEJPy7x3rW9vbR0jtLuvEbzEeDfTFJEbS9NZVREP2PiCb6nJcceKo3jWS1jUnJvRRRX7nUtfyhsH926JyK/dRdcUBK8Eldit9u3YyzYwKDl349OCnRmzN9F6V7+XUJREkFrG8qKeuvvLodCxKCIqXRszzHsjfQastmsm03Xw0QzE1zZbZqso6k8DHgY5QrCL6y23rZuALrfjPCHN09vXr75lBJVCwLE4V47PDY3N3a4psG3o/yPS4ujn1z+L58LuMVImmxB/agZ9RuOHtVyHBp+LWMUHW+t4oaz0eYIS2FWLtOdnrcT/vp8rVJAjtLjs7Mn6PH1Ngq6O93uTQNMe4v8aUS3y3l5EWH0xOwiwvh61wHCyT+keCqeAAAAeJxjYGRgYADi/9MMZ8Xz23xl4GZhAIFrX1v/Iuj/DSwMzE5ALgcDE0gUAGqYDH0AeJxjYGRgYG7438AQw8IAAkCSkQEV8AAARxICdXicY2FgYGB+ycDAwkAcBgAsBwEZAAAAAAB2AL4A9AFiAaoB3gImAk4CkALOAxgAAHicY2BkYGDgYQhkYGUAASYg5gJCBob/YD4DABHqAXkAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicbcdbDoIwEEbh/ghysezF4IPLMYMgTKEzpIXA8tX46vdwkmMS81OZ/ywSnJAiwxk5CpSocIFFbXDYOOq+UIy7hi7dYh+yb2Jxu18bz56KOJIMC0vWkbjNrux4Uhkck9ReQy+rbsdnhrwlbZm0nPU5PV48z8a8AeENI1c=') format('woff'),
+  url('iconfont.ttf?t=1523541245904') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1523541245904#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-showpassword:before { content: "\ea3f"; }
+
+.icon-user:before { content: "\e89a"; }
+
+.icon-users:before { content: "\e8b5"; }
+
+.icon-3702mima:before { content: "\e66c"; }
+
+.icon-shangpin:before { content: "\e888"; }
+
+.icon-danju:before { content: "\e89b"; }
+
+.icon-tijikongjian:before { content: "\e89f"; }
+
+.icon-morentouxiang:before { content: "\e8c9"; }
+
+.icon-baobiao:before { content: "\e902"; }
+
+.icon-lock_fill:before { content: "\e709"; }
+
--- a/src/assets/fonts/iconfont.eot
+++ b/src/assets/fonts/iconfont.eot
--- a/src/assets/fonts/iconfont.js
+++ b/src/assets/fonts/iconfont.js
+(function(window){var svgSprite='<svg><symbol id="icon-showpassword" viewBox="0 0 1024 1024"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z"  ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M622.816 702.72c-22.112-3.52-22.624-64.32-22.624-64.32s64.96-64.32 79.136-150.816c38.08 0 61.632-91.936 23.52-124.288C704.448 329.28 751.808 96 512 96c-239.808 0-192.448 233.28-190.88 267.328-38.08 32.352-14.56 124.288 23.52 124.288 14.144 86.496 79.136 150.816 79.136 150.816s-0.512 60.8-22.624 64.32C329.952 714.08 64 831.36 64 960l448 0 448 0C960 831.36 694.048 714.08 622.816 702.72z"  ></path></symbol><symbol id="icon-users" viewBox="0 0 1024 1024"><path d="M735.008 805.376c-18.944-2.976-19.392-54.656-19.392-54.656s55.68-54.656 67.808-128.16c32.64 0 52.8-78.144 20.16-105.632 1.376-28.928 41.984-227.168-163.584-227.168-205.568 0-164.96 198.24-163.584 227.168-32.64 27.488-12.48 105.632 20.16 105.632 12.128 73.504 67.84 128.16 67.84 128.16s-0.416 51.68-19.392 54.656C483.968 815.008 256 914.688 256 1024l384 0 384 0C1024 914.688 796.032 815.008 735.008 805.376zM344.064 822.816c44.096-27.136 97.632-52.32 141.536-67.424-15.744-22.432-33.28-52.928-44.32-89.056-15.392-12.576-27.936-30.528-36-52.608-8.064-22.112-11.136-46.848-8.608-69.696 1.792-16.384 6.464-31.68 13.664-45.088-4.352-46.592-7.424-138.048 52.448-204.736 23.2-25.856 52.544-44.448 87.712-55.68C544.192 173.76 511.296 97.76 384 97.76c-205.568 0-164.96 198.24-163.584 227.168-32.64 27.488-12.48 105.632 20.16 105.632 12.128 73.504 67.84 128.16 67.84 128.16s-0.416 51.68-19.392 54.656C227.968 623.008 0 722.688 0 832l329.6 0C334.304 828.928 339.104 825.856 344.064 822.816z"  ></path></symbol><symbol id="icon-3702mima" viewBox="0 0 1024 1024"><path d="M893.532041 881.355209l-0.284479-392.855436c-1.805112-41.266869-35.472909-74.250074-77.136821-74.419943l-50.869574 0.029676 0-35.523051 0.191358 0 0.170892-81.20344c0-2.183735-0.285502-4.273327-0.647753-6.363941-2.829442-123.525338-101.722776-223.293599-224.985124-227.214908l0-1.137916C414.498874 64.128553 313.084113 164.882258 310.218856 289.995767c-0.361227 2.090615-0.64673 4.180206-0.64673 6.363941l0.170892 81.20344 0.191358 0 0 36.477796-0.094144 0 0 0.323365-42.272779 0.019443c-2.596128 0.115634-5.158487 0.358157-7.682983 0.720408l-0.819668 0c-41.663912 0.169869-75.331709 33.152051-77.136821 74.419943l-0.284479 392.855436c0.209778 42.786479 34.921347 77.441766 77.763085 77.441766l38.911218 0 0 0.037862 466.923362 0.265036 0-0.302899 38.910195 0c4.331655 0 8.575306-0.370437 12.71458-1.050935C859.199095 958.181969 893.32431 923.774321 893.532041 881.355209zM387.811048 296.094672c0.514723-82.71998 65.588811-150.08832 147.393955-154.210197l0 0.847298c84.028788 1.687432 151.633512 70.065775 152.158469 154.386206l0.454348 0c0 0.095167-0.036839 0.170892-0.036839 0.265036l-0.26299 116.770494-299.860439 0.172939-0.265036-117.966739c0-0.094144-0.037862-0.169869-0.037862-0.265036L387.811048 296.094672z"  ></path></symbol><symbol id="icon-shangpin" viewBox="0 0 1024 1024"><path d="M832 256H640V160.8c0-17.6-14.4-32.8-32.8-32.8H416c-17.6 0-32.8 14.4-32.8 32.8V256H192l-64 576c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64l-64-576z m-384-64h128v64H448v-64z m-0.8 192H384v-63.2h63.2V384zM640 384h-63.2v-63.2H640V384z"  ></path></symbol><symbol id="icon-danju" viewBox="0 0 1024 1024"><path d="M800 192H640c0-70.4-57.6-128-128-128s-128 57.6-128 128H224c-17.6 0-32 14.4-32 32v704c0 17.6 14.4 32 32 32h576c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32z m-288-32c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z m64 608H320v-64h256v64z m128-128H320v-64h384v64z m0-128H320v-64h384v64z"  ></path></symbol><symbol id="icon-tijikongjian" viewBox="0 0 1024 1024"><path d="M496 895.2L138.4 771.2c-6.4-2.4-10.4-8-10.4-15.2V287.2l368 112v496z m32 0l357.6-124c6.4-2.4 10.4-8 10.4-15.2V287.2l-368 112v496z m-400-640l384 112 384-112-379.2-125.6c-3.2-0.8-7.2-0.8-10.4 0L128 255.2z"  ></path></symbol><symbol id="icon-morentouxiang" viewBox="0 0 1024 1024"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM384.8 376c4-64 56-115.2 120-119.2 74.4-4 135.2 55.2 135.2 128 0 70.4-57.6 128-128 128-73.6 0-132-62.4-127.2-136.8zM768 746.4c0 12-9.6 21.6-21.6 21.6H278.4c-12 0-21.6-9.6-21.6-21.6v-64c0-84.8 170.4-128 255.2-128 84.8 0 255.2 42.4 255.2 128l0.8 64z"  ></path></symbol><symbol id="icon-baobiao" viewBox="0 0 1024 1024"><path d="M960 672V160c0-17.6-14.4-32-32-32H544V64h-64v64H96c-17.6 0-32 14.4-32 32v512c0 17.6 14.4 32 32 32h384v50.4l-152.8 89.6 32 56 144-84h19.2l144 84 32-56L544 754.4V704h384c17.6 0 32-14.4 32-32zM790.4 256l41.6 48.8-316.8 270.4L352 437.6 233.6 536.8 192.8 488l160-133.6 163.2 137.6L790.4 256z"  ></path></symbol><symbol id="icon-lock_fill" viewBox="0 0 1024 1024"><path d="M394.304 316.608A124.672 124.672 0 0 1 518.72 192a124.704 124.704 0 0 1 124.48 124.608V416h-248.896V316.608zM544 704a32 32 0 0 1-64 0v-128a32 32 0 0 1 64 0v128z m256.256-288H707.2V316.608A188.736 188.736 0 0 0 518.72 128c-103.904 0-188.416 84.608-188.416 188.608V416h-106.56A64 64 0 0 0 160 480.096v319.84A64 64 0 0 0 223.744 864h576.512A64 64 0 0 0 864 799.936v-319.84A64 64 0 0 0 800.256 416z"  ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)
\ No newline at end of file
--- a/src/assets/fonts/iconfont.svg
+++ b/src/assets/fonts/iconfont.svg
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    
+
+    
+    <glyph glyph-name="showpassword" unicode="&#59967;" d="M1024 300c0-96-211.2-307.2-512-307.2-294.4 0-512 204.8-512 307.2s217.6 307.2 512 307.2c300.8 0 512-204.8 512-307.2l0 0zM512 549.6c-134.4 0-243.2-108.8-243.2-249.6s108.8-249.6 249.6-249.6c134.4 0 249.6 115.2 249.6 249.6-6.4 140.8-121.6 249.6-256 249.6l0 0zM512 460c-89.6 0-160-70.4-160-160s70.4-160 160-160c89.6 0 160 70.4 160 160s-70.4 160-160 160l0 0z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="user" unicode="&#59546;" d="M622.816 193.28c-22.112 3.52-22.624 64.32-22.624 64.32s64.96 64.32 79.136 150.816c38.08 0 61.632 91.936 23.52 124.288C704.448 566.72 751.808 800 512 800c-239.808 0-192.448-233.28-190.88-267.328-38.08-32.352-14.56-124.288 23.52-124.288 14.144-86.496 79.136-150.816 79.136-150.816s-0.512-60.8-22.624-64.32C329.952 181.92 64 64.64 64-64l448 0 448 0C960 64.64 694.048 181.92 622.816 193.28z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="users" unicode="&#59573;" d="M735.008 90.624c-18.944 2.976-19.392 54.656-19.392 54.656s55.68 54.656 67.808 128.16c32.64 0 52.8 78.144 20.16 105.632 1.376 28.928 41.984 227.168-163.584 227.168-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C483.968 80.992 256-18.688 256-128l384 0 384 0C1024-18.688 796.032 80.992 735.008 90.624zM344.064 73.184c44.096 27.136 97.632 52.32 141.536 67.424-15.744 22.432-33.28 52.928-44.32 89.056-15.392 12.576-27.936 30.528-36 52.608-8.064 22.112-11.136 46.848-8.608 69.696 1.792 16.384 6.464 31.68 13.664 45.088-4.352 46.592-7.424 138.048 52.448 204.736 23.2 25.856 52.544 44.448 87.712 55.68C544.192 722.24 511.296 798.24 384 798.24c-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C227.968 272.992 0 173.312 0 64l329.6 0C334.304 67.072 339.104 70.144 344.064 73.184z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="3702mima" unicode="&#58988;" d="M893.532041 14.644791l-0.284479 392.855436c-1.805112 41.266869-35.472909 74.250074-77.136821 74.419943l-50.869574-0.029676 0 35.523051 0.191358 0 0.170892 81.20344c0 2.183735-0.285502 4.273327-0.647753 6.363941-2.829442 123.525338-101.722776 223.293599-224.985124 227.214908l0 1.137916C414.498874 831.871447 313.084113 731.117742 310.218856 606.004233c-0.361227-2.090615-0.64673-4.180206-0.64673-6.363941l0.170892-81.20344 0.191358 0 0-36.477796-0.094144 0 0-0.323365-42.272779-0.019443c-2.596128-0.115634-5.158487-0.358157-7.682983-0.720408l-0.819668 0c-41.663912-0.169869-75.331709-33.152051-77.136821-74.419943l-0.284479-392.855436c0.209778-42.786479 34.921347-77.441766 77.763085-77.441766l38.911218 0 0-0.037862 466.923362-0.265036 0 0.302899 38.910195 0c4.331655 0 8.575306 0.370437 12.71458 1.050935C859.199095-62.181969 893.32431-27.774321 893.532041 14.644791zM387.811048 599.905328c0.514723 82.71998 65.588811 150.08832 147.393955 154.210197l0-0.847298c84.028788-1.687432 151.633512-70.065775 152.158469-154.386206l0.454348 0c0-0.095167-0.036839-0.170892-0.036839-0.265036l-0.26299-116.770494-299.860439-0.172939-0.265036 117.966739c0 0.094144-0.037862 0.169869-0.037862 0.265036L387.811048 599.905328z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shangpin" unicode="&#59528;" d="M832 640H640V735.2c0 17.6-14.4 32.8-32.8 32.8H416c-17.6 0-32.8-14.4-32.8-32.8V640H192l-64-576c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64l-64 576z m-384 64h128v-64H448v64z m-0.8-192H384v63.2h63.2V512zM640 512h-63.2v63.2H640V512z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="danju" unicode="&#59547;" d="M800 704H640c0 70.4-57.6 128-128 128s-128-57.6-128-128H224c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h576c17.6 0 32 14.4 32 32V672c0 17.6-14.4 32-32 32z m-288 32c17.6 0 32-14.4 32-32s-14.4-32-32-32-32 14.4-32 32 14.4 32 32 32z m64-608H320v64h256v-64z m128 128H320v64h384v-64z m0 128H320v64h384v-64z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tijikongjian" unicode="&#59551;" d="M496 0.8L138.4 124.8c-6.4 2.4-10.4 8-10.4 15.2V608.8l368-112v-496z m32 0l357.6 124c6.4 2.4 10.4 8 10.4 15.2V608.8l-368-112v-496z m-400 640l384-112 384 112-379.2 125.6c-3.2 0.8-7.2 0.8-10.4 0L128 640.8z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="morentouxiang" unicode="&#59593;" d="M512 832C264.8 832 64 631.2 64 384s200.8-448 448-448 448 200.8 448 448S759.2 832 512 832zM384.8 520c4 64 56 115.2 120 119.2 74.4 4 135.2-55.2 135.2-128 0-70.4-57.6-128-128-128-73.6 0-132 62.4-127.2 136.8zM768 149.6c0-12-9.6-21.6-21.6-21.6H278.4c-12 0-21.6 9.6-21.6 21.6v64c0 84.8 170.4 128 255.2 128 84.8 0 255.2-42.4 255.2-128l0.8-64z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="baobiao" unicode="&#59650;" d="M960 224V736c0 17.6-14.4 32-32 32H544V832h-64v-64H96c-17.6 0-32-14.4-32-32v-512c0-17.6 14.4-32 32-32h384v-50.4l-152.8-89.6 32-56 144 84h19.2l144-84 32 56L544 141.6V192h384c17.6 0 32 14.4 32 32zM790.4 640l41.6-48.8-316.8-270.4L352 458.4 233.6 359.2 192.8 408l160 133.6 163.2-137.6L790.4 640z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="lock_fill" unicode="&#59145;" d="M394.304 579.392A124.672 124.672 0 0 0 518.72 704a124.704 124.704 0 0 0 124.48-124.608V480h-248.896V579.392zM544 192a32 32 0 0 0-64 0v128a32 32 0 0 0 64 0v-128z m256.256 288H707.2V579.392A188.736 188.736 0 0 1 518.72 768c-103.904 0-188.416-84.608-188.416-188.608V480h-106.56A64 64 0 0 1 160 415.904v-319.84A64 64 0 0 1 223.744 32h576.512A64 64 0 0 1 864 96.064v319.84A64 64 0 0 1 800.256 480z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/src/assets/fonts/iconfont.ttf
+++ b/src/assets/fonts/iconfont.ttf
--- a/src/assets/fonts/iconfont.woff
+++ b/src/assets/fonts/iconfont.woff
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
+<template>
+  <el-container>
+    <!-- 头部 -->
+    <el-header>
+      <div style="margin-left:50px">
+        <img src="../assets/logo.png" alt />
+        <span>XiliXili</span>
+      </div>
+      <el-button type="info" @click="logout">退出</el-button>
+    </el-header>
+    <!-- 主体 -->
+    <el-container>
+      <!-- 侧边栏 -->
+      <el-aside :width="isCollapse ? '64px' : '200px'"  >
+        <!-- <div class="toggle-button" @click="togleCollapse"><-------</div> -->
+        <el-menu unique-opened :collapse="isCollapse" :collapse-transition="false" router  background-color="#E6E6E6" text-color="#fff" active-text-color="#409FFF">
+           <!-- :unique-opened="true"->只允许展开一个菜单 -->
+           <!-- :collapse-transition="false" -> 关闭动画 -->
+           <!-- router -> 导航开启路由模式 -->
+          <!-- 一级菜单  -->
+          <el-menu-item :index="item.id" v-for="item in menuLis" :key="item.id"  @click="change(item.path)">
+            <!-- 一级菜单的模板区域 -->
+            <template slot="title">
+                <i :class="item.class"> </i>
+              <span style="color:black">{{ item.authName}}</span>
+            </template>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <!-- 内容主体 -->
+      <el-main>
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      // 左侧菜单数据
+      menuList:[],
+      menuLis: [
+        {
+          authName:'用户管理',
+          path:'users',
+          id:1,
+          class:'el-icon-user-solid'
+        },
+        {
+          authName:'用户视频管理',
+          path:'uservideos',
+          id:9,
+          class:'el-icon-video-camera-solid'
+        },
+        {
+          authName:'视频上传管理',
+          path:'videos',
+          id:2,
+          class:'el-icon-s-tools'
+        },
+        {
+          authName:'轮播图',
+          path:'tunnel',
+          id:3,
+          class:'el-icon-picture'
+        },
+
+      ],
+      // 默认不折叠
+      isCollapse: false,
+      // 被激活导航地址
+      activePath: ''
+    }
+  },
+  created () {
+    this.getMenuList()
+  },
+  methods: {
+    change(path){
+      this.$router.push("/"+path)
+
+    },
+    logout () {
+      // 清空token
+      window.sessionStorage.clear()
+      this.$router.push('/login')
+    },
+    // 获取请求菜单
+    async getMenuList () {
+      const { data: res } = await this.$http.get('menus')
+      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
+      this.menuList = res.data
+      console.log(this.menuList)
+      // console.log(res)
+    },
+    // 菜单的折叠与展开
+    togleCollapse () {
+      this.isCollapse = !this.isCollapse
+    },
+    // 保存连接的激活地址
+    saveNavState (activePath) {
+      window.sessionStorage.setItem('activePath', activePath)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.el-container {
+  height: 100%;
+}
+.el-header {
+  background-color:#5E5E5E;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 0;
+  align-items: center;
+  color: #fff;
+  font-size: 20px;
+  > div {
+    display: flex;
+    align-items: center;
+    img {
+      height: 40px;
+    }
+    span {
+      margin-left: 15px;
+    }
+  }
+}
+.el-aside {
+  background-color:#E6E6E6;
+
+  .el-menu {
+    border: none;
+  }
+}
+.el-main {
+  background-color: #eaedf1;
+}
+.iconfont{
+  margin-right: 10px;
+}
+.toggle-button {
+  background-color: #4A5064;
+  font-size: 10px;
+  line-height: 24px;
+  color: #fff;
+  text-align: center;
+  letter-spacing: 0.2em;
+  // 鼠标放上去变成小手
+  cursor: pointer;
+}
+</style>
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
+<template>
+  <div class="login_container">
+    <div class="login_box">
+      <!-- 头像区 -->
+      <div class="avatar_box">
+        <img src="../assets/logo.png" alt="avatar" />
+      </div>
+      <!-- 登录表单 -->
+      <div>
+        <el-form
+          ref="loginFormRef"
+          :model="loginForm"
+          label-width="60px"
+          class="login_form"
+        >
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="loginForm.account" prefix-icon="iconfont icon-user"></el-input>
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              prefix-icon="iconfont icon-3702mima"
+            ></el-input>
+          </el-form-item>
+          <el-form-item class="btns">
+            <el-button type="primary" @click="login">登录</el-button>
+            <el-button type="info" @click="resetLoginForm">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      token:'',
+      loginForm: {
+        account: '',
+        password: ''
+      },
+      // 表单验证
+
+    }
+  },
+  methods: {
+    // 表单重置按钮
+    resetLoginForm () {
+      // console.log(this)
+      // resetFields：element-ui提供的表单方法
+      this.$refs.loginFormRef.resetFields()
+    },
+    async login () {
+   
+     const { data: res } = await this.$http.post('/sysUser/login', this.loginForm)
+        console.log(res)
+        if (res.code !== 0) return this.$message.error('登录失败');
+        this.$message.success('登录成功')
+        localStorage.setItem('token',res.data.accessToken)
+          this.$router.push({
+            path:'/users'
+          })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/* // lang="less" 支持less格式
+// scoped vue的指令，只在当前组件生效 */
+.login_container {
+  height: 100%;
+  background-image: url('../assets/fonts/background.jpg');
+}
+.login_box {
+  width: 450px;
+  height: 360px;
+  background-color: #fff;
+  border-radius: 3px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  background-color: #fff;
+
+  .avatar_box {
+    width: 130px;
+    height: 130px;
+    border: 1px solid #eee;
+    border-radius: 50%;
+    padding: 10px;
+    box-shadow: 0 0 10px #ddd;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: #eee;
+    }
+  }
+}
+.login_form {
+  position: absolute;
+  bottom: 60px;
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+.btns {
+  display: flex;
+  justify-content: center;
+}
+.info {
+  font-size: 13px;
+  margin: 10px 15px;
+}
+</style>
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
+<template>
+  <div>
+    <img style="width:1200px" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
--- a/src/components/tunnel/tunnel.vue
+++ b/src/components/tunnel/tunnel.vue
+<template>
+  <div>
+    <!-- 卡片视图 -->
+    <el-card>
+        <el-row :gutter="20">
+        <el-col :span="4">
+          <el-button type="primary" @click="dialogVisible = true">添加影片</el-button>
+        </el-col>
+      </el-row>
+      <el-dialog
+          title="上传轮播图"
+          :visible.sync="dialogVisible"
+          width="30%">
+          <el-upload
+              class="upload"
+                ref="upload"
+                action="string"
+                :file-list="fileList"
+                :auto-upload="false"
+                :on-change="handleChange"
+                multiple="multiple"
+              >
+                <el-button slot="trigger" size="small" type="primary" @click="delFile(2)">上传图片</el-button>
+          </el-upload>
+          <el-upload
+              class="upload"
+                ref="upload"
+                action="string"
+                :file-list="fileList1"
+                :auto-upload="false"
+                :on-change="handleChange1"
+                multiple="multiple"
+              >
+                <el-button slot="trigger" size="small" type="primary" @click="delFile1(3)">上传视频</el-button>
+          </el-upload>
+          <el-form 
+           ref="form" :model="form" label-width="110px" 
+           >
+          <el-form-item label="名字">
+            <el-input v-model="form.bannerName"></el-input>
+          </el-form-item>
+          <el-form-item label="state">
+            <el-input v-model="form.bannerState"></el-input>
+          </el-form-item>
+          </el-form>
+
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="submitUpload();dialogVisible = false">确 定</el-button>
+          </span> 
+      </el-dialog>
+      <!-- 用户列表区域 -->
+      <el-table :data="bannerlist" border stripe>
+        <!-- stripe: 斑马条纹
+        border：边框-->
+        <el-table-column type="index" label="#"></el-table-column>
+        <el-table-column prop="bannerId" label="bannerId"></el-table-column>
+        <el-table-column prop="bannerName" label="bannerName"></el-table-column>
+        <el-table-column prop="bannerPhoto" label="bannerPhoto"></el-table-column>
+        <el-table-column  label="bannerState">
+           <template slot-scope="scope">
+            <p v-if="scope.row.bannerState==0">未展示</p>
+            <p v-if="scope.row.bannerState==1">展示</p>
+
+          </template>
+        </el-table-column>
+        <el-table-column label="是否展示">
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              icon="el-icon-edit"
+              size="mini"
+              circle
+              @click="changebanner(scope.row.bannerId)"
+            ></el-button>
+          </template>
+        </el-table-column>
+         <el-table-column label="删除">
+          <template slot-scope="scope">
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              size="mini"
+              circle
+              @click="deleteabanner(scope.row.bannerId)"
+            ></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页区域 -->
+        <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryInfo.pagenum"
+        :page-sizes="[2, 5, 10, 15]"
+        :page-size="queryInfo.pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      num:0,
+      num1:0,
+       fileList: [],
+       fileList1: [],
+      multiple: true,
+      formData:'',
+       formData1:'',
+      dialogVisible:false,
+      form:{
+        bannerName:'',
+        bannerUrl:'',
+        bannerPhoto:'',
+        bannerState:''
+      },
+      // 获取用户列表查询参数对象
+      queryInfo: {
+        // 当前页数
+        pagenum: 1,
+        // 每页显示多少数据
+        pagesize: 10
+      },
+      bannerlist:[],
+    }
+  },
+  created () {
+    this.getbannerlist()
+  },
+  methods: {
+    async getbannerlist () {
+      const { data: res } = await this.$http.get('/video/banner/bannerList', {
+        params:{
+          page:this.queryInfo.pagenum,
+          size:this.queryInfo.pagesize
+        }
+      })
+      // if (res.code !== 0) {
+      //   return this.$message.error('获取用户列表失败！')
+      // }
+      this.bannerlist = res.data
+
+    },
+    // 监听 页码值 改变事件
+       // 监听 pagesize改变的事件
+    handleSizeChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagesize = newSize
+      this.getUserList()
+    },
+    // 监听 页码值 改变事件
+    handleCurrentChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagenum = newSize
+      this.getUserList()
+    },
+    async changebanner(id) {
+      const confirmResult = await this.$confirm(
+        '修改图片的展示?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(err => err)
+      // 点击确定 返回值为：confirm
+      // 点击取消 返回值为： cancel
+      if (confirmResult !== 'confirm') {
+        return this.$message.info('已取消')
+      }
+      const { data: res } = await this.$http.put(`/video/banner/updateBanner?bannerId=${id}`)
+      if (res.code !== 0) return this.$message.error('失败！')
+      console.log(res)
+      this.$message.success('成功！')
+      this.getbannerlist()
+    },
+    async deleteabanner (id) {
+      const confirmResult = await this.$confirm(
+        '此操作将永久删除该用户, 是否继续?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(err => err)
+      // 点击确定 返回值为：confirm
+      // 点击取消 返回值为： cancel
+      if (confirmResult !== 'confirm') {
+        return this.$message.info('已取消删除')
+      }
+      const { data: res } = await this.$http.delete(`/video/banner/deleteBanner?bannerId=${id}`)
+      if (res.code !== 0) return this.$message.error('删除失败！')
+      this.$message.success('删除用户成功！')
+      this.getbannerlist()
+    },
+        delFile(num) {
+      this.fileList = [];
+      this.num=num
+    },
+     delFile1(num) {
+      this.fileList1 = [];
+      this.num1=num
+    },
+    handleChange(file, fileList) {
+      if(this.num==2){
+        this.fileList = fileList;
+      }
+      
+    },
+    handleChange1(file, fileList) {
+       if(this.num1==3){
+        this.fileList1 = fileList;
+      }
+      
+    },
+    // uploadFile(file) {
+    //   this.formData.append("file", file.file);
+    // },
+    // handleRemove(file, fileList) {
+    //   console.log(file, fileList);
+    // },
+    // handlePreview(file) {
+    //   console.log(file);
+    // },
+    async submitUpload() {
+
+          let formData = new FormData();
+        formData.append('file',this.fileList[0].raw);
+      formData.append('type',2);
+      let re = await this.$http.post('/api/resource/file',formData,{
+  headers: {
+ authorization: `Bearer ${localStorage.getItem('token')}`,
+  }
+  });
+ this.form.bannerPhoto=re.data.data;
+ this.submitUpload1()
+   
+    }, 
+     async submitUpload1(){
+
+         let formData = new FormData();
+        formData.append('file',this.fileList1[0].raw);
+      formData.append('type',3);
+      let re = await this.$http.post('/api/resource/file',formData,{
+  headers: {
+ authorization: `Bearer ${localStorage.getItem('token')}`,
+  }
+  });
+ this.form.bannerUrl=re.data.data;
+ let res=await this.$http.post('/video/banner/addBanner',this.form)
+   console.log(res)
+   if (res.data.code!== 0) return  this.$message.error('添加失败！')
+      this.$message.success('添加成功！')
+     this.getbannerlist()
+     }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>
--- a/src/components/user/User.vue
+++ b/src/components/user/User.vue
+<template>
+  <div>
+    <!-- 卡片视图 -->
+    <el-card>
+      <!-- 用户列表区域 -->
+      <el-table :data="userlist" border stripe>
+        <!-- stripe: 斑马条纹
+        border：边框-->
+        <el-table-column type="index" label="#"></el-table-column>
+        <el-table-column prop="nickName" label="姓名"></el-table-column>
+        <el-table-column prop="userId" label="userId"></el-table-column>
+        <el-table-column  label="用户状态">
+          <template slot-scope="scope">
+            <p v-if="scope.row.userState==0">正常</p>
+            <p v-if="scope.row.userState==1">封禁中</p>
+
+          </template>
+        </el-table-column>
+        <el-table-column label="封号">
+          <template slot-scope="scope">
+            <el-button
+              type="danger"
+              icon="el-icon-error"
+              size="medium"
+              circle
+              @click="showEditDialog(scope.row.userId)"
+            ></el-button>
+          </template>
+        </el-table-column>
+         <el-table-column label="删除">
+          <template slot-scope="scope">
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              size="mediun"
+              circle
+              @click="removeUserById(scope.row.userId)"
+            ></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页区域 -->
+        <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryInfo.pagenum"
+        :page-sizes="[2, 5, 10, 15]"
+        :page-size="queryInfo.pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      // 获取用户列表查询参数对象
+      queryInfo: {
+        // 当前页数
+        pagenum: 1,
+        // 每页显示多少数据
+        pagesize: 10
+      },
+      userlist: [],
+    }
+  },
+  created () {
+    this.getUserList()
+  },
+  methods: {
+    async getUserList () {
+      const { data: res } = await this.$http.get('/sysUser/userList', {
+        params:{
+          page:this.queryInfo.pagenum,
+          size:this.queryInfo.pagesize
+        }
+      })
+
+
+      if (res.code!== 0) {
+        return this.$message.error('获取用户列表失败！')
+      }
+      this.userlist = res.data
+    },
+       // 监听 pagesize改变的事件
+    handleSizeChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagesize = newSize
+      this.getUserList()
+    },
+    // 监听 页码值 改变事件
+    handleCurrentChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagenum = newSize
+      this.getUserList()
+    },
+    async showEditDialog(id) {
+      const confirmResult = await this.$confirm(
+        '此操作将封禁该用户, 是否继续?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(err => err)
+      // 点击确定 返回值为：confirm
+      // 点击取消 返回值为： cancel
+      if (confirmResult !== 'confirm') {
+        return this.$message.info('已取消')
+      }
+      const { data: res } = await this.$http.put(`/sysUser/ban?userId=${id+''}`,{}
+        // params:{
+        //     userId:id
+        // }
+          
+)
+      console.log(res)
+      if (res.code !== 0) return this.$message.error('封禁用户失败！')
+      this.$message.success('封禁用户成功！')
+      this.getUserList()
+    },
+    async removeUserById (id) {
+      const confirmResult = await this.$confirm(
+        '此操作将永久删除该用户, 是否继续?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(err => err)
+      // 点击确定 返回值为：confirm
+      // 点击取消 返回值为： cancel
+      if (confirmResult !== 'confirm') {
+        return this.$message.info('已取消删除')
+      }
+      const { data: res } = await this.$http.delete('/sysUser/deleteUser',{
+        params:{
+          userId:id
+        }
+      })
+        console.log(res)
+      if (res.code !== 0) return this.$message.error('删除用户失败！')
+      this.$message.success('删除用户成功！')
+      this.getUserList()
+    },
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>
--- a/src/components/user/uservideos.vue
+++ b/src/components/user/uservideos.vue
+<template>
+  <div>
+    <!-- 卡片视图 -->
+    <el-card>
+      <!-- 用户列表区域 -->
+      <el-table :data="userlist" border stripe>
+        <!-- stripe: 斑马条纹
+        border：边框-->
+        <el-table-column type="index" label="#"></el-table-column>
+        <el-table-column prop="myVideoName" label="名称"></el-table-column>
+        <el-table-column prop="myVideoId" label="视频id"></el-table-column>
+        <el-table-column prop="userId" label="用户Id"></el-table-column>
+        <el-table-column prop="myVideoState" label="state">
+          <template slot-scope="scope">
+            <p v-if="scope.row.myVideoState==0">私密</p>
+            <p v-if="scope.row.myVideoState==1">待审核</p>
+             <p v-if="scope.row.myVideoState==2">公开</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="视频审核">
+          <template slot-scope="scope">
+            <el-button
+              type="success"
+              icon="el-icon-circle-check"
+              size="mini"
+              circle
+              @click="removeUserById(scope.row.myVideoId)"
+            ></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页区域 -->
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryInfo.pagenum"
+        :page-sizes="[2, 5, 10, 15]"
+        :page-size="queryInfo.pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      // 获取用户列表查询参数对象
+      queryInfo: {
+        // 当前页数
+        pagenum: 1,
+        // 每页显示多少数据
+        pagesize: 10
+      },
+      userlist: [],
+    }
+  },
+  created () {
+    this.getVideoList()
+  },
+  methods: {
+  
+    async getVideoList () {
+      const { data: res } = await this.$http.get('/sysMyVideo/myVideoList', {
+        params: {
+          page:this.queryInfo.pagenum,
+          size:this.queryInfo.pagesize
+        }
+      })
+      if (res.code!== 0) {
+        return this.$message.error('获取用户视频列表失败！')
+      }
+      this.userlist = res.data
+      console.log(this.userlist)
+    },
+    // 监听 pagesize改变的事件
+    handleSizeChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagesize = newSize
+      this.getVideoList()
+    },
+    // 监听 页码值 改变事件
+    handleCurrentChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagenum = newSize
+      this.getVideoList()
+    },
+    // 删除用户
+    async removeUserById (id) {
+      const confirmResult = await this.$confirm(
+        '是否审核通过？',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(err => err)
+      // 点击确定 返回值为：confirm
+      // 点击取消 返回值为： cancel
+      if (confirmResult !== 'confirm') {
+        return this.$message.info('已取消')
+      }
+      const { data: res } = await this.$http.put(`/sysMyVideo/updateMyVideo?myVideoId=${id}`)
+      if (res.code!==0) return this.$message.error('通过失败！')
+      this.$message.success('已通过！')
+      this.getVideoList()
+    },
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>
--- a/src/components/videos/videos.vue
+++ b/src/components/videos/videos.vue
+<template>
+  <div>
+    <el-card>
+      <!-- 搜索 添加 -->
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-button type="primary" @click="dialogVisible = true">添加影片</el-button>
+        </el-col>
+      </el-row>
+      <el-dialog
+          title="上传视频"
+          :visible.sync="dialogVisible"
+          width="30%">
+          <el-form 
+           ref="form" :model="form" label-width="110px" 
+           >
+          <el-form-item label="演员">
+            <el-input v-model="form.actors"></el-input>
+          </el-form-item>
+          <el-form-item label="上映时间">
+            <el-input v-model="form.showYear"></el-input>
+          </el-form-item>
+          <el-form-item label="影片描述">
+            <el-input v-model="form.videoDescribe"></el-input>
+          </el-form-item>
+          <el-form-item label="影片Id">
+            <el-input v-model="form.videoId"></el-input>
+          </el-form-item>
+          <el-form-item label="影片名字">
+            <el-input v-model="form.videoName"></el-input>
+          </el-form-item>
+          <el-form-item label="影片照片">
+            <el-input v-model="form.videoPhoto"></el-input>
+          </el-form-item>
+          <el-form-item label="影片State">
+            <el-input v-model="form.videoState"></el-input>
+          </el-form-item>
+          <el-form-item label="标签Id">
+            <el-input v-model="form.lableId"></el-input>
+          </el-form-item>
+          </el-form>
+
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="dialogVisible = false;addVideo()">确 定</el-button>
+          </span> 
+      </el-dialog>
+           <el-table
+            :data="videoList"
+            style="width: 100%">
+
+            <el-table-column
+              prop="videoId"
+              label="视频Id"
+              width="80">
+            </el-table-column>
+            <el-table-column
+              prop="videoName"
+              label="名称"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="videoDescribe"
+              label="影片描述"
+              width="500"
+              >
+            </el-table-column>
+            <el-table-column
+              prop="actors"
+              label="演员"
+              width="200"
+              >
+            </el-table-column>
+           <el-table-column label="删除影片">
+          <template slot-scope="scope">
+            <el-button
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                width='100'
+                circle
+                @click="videodelete(scope.row.videoId)"
+              ></el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="查看详情">
+          <template slot-scope="scope">
+              <el-button
+                type="primary"
+                width='100'
+                @click="check(scope.row.videoId)"
+              >查看详情</el-button>
+          </template>
+        </el-table-column>
+    </el-table>
+     <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryInfo.pagenum"
+        :page-sizes="[2, 5, 10, 15]"
+        :page-size="queryInfo.pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      form:{
+        actors:'',
+        showYear:1,
+        videoDescribe:'',
+        videoId:0,
+        videoName:'',
+        videoPhoto:'',
+        videoState:0,
+        lableId:1,
+      },
+      dialogVisible:false,
+      queryInfo:{
+        pagenum: 1,
+        pagesize: 10
+      },
+       videoList:[],
+    }
+  },
+  created () {
+    this.getVideoList()
+  },
+  methods: {
+    async addVideo(){
+      const { data: res } = await this.$http.post('/sysVideo/addVideo',this.form)
+      // if (res.code !== 0) {
+      //   return this.$message.error('添加失败!')
+      // }
+      console.log(res)
+       
+      this.getVideoList()
+
+    },
+       async getVideoList () {
+      const { data: res } = await this.$http.get('/sysVideo/videoList', {
+        params:{
+          page:this.queryInfo.pagenum,
+          size:this.queryInfo.pagesize
+        }
+      })
+      console.log(res)
+      if (res.code!== 0) {
+        return this.$message.error('获取用户列表失败！')
+      }
+      this.videoList = res.data
+    },
+       // 监听 pagesize改变的事件
+    handleSizeChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagesize = newSize
+      this.getVideoList()
+    },
+    // 监听 页码值 改变事件
+    handleCurrentChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagenum = newSize
+      this.getVideoList()
+    },
+    async videodelete (id) {
+      const confirmResult = await this.$confirm(
+        '此操作将永久删除该视频, 是否继续?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(err => err)
+      // 点击确定 返回值为：confirm
+      // 点击取消 返回值为： cancel
+      if (confirmResult !== 'confirm') {
+        return this.$message.info('已取消删除')
+      }
+      const { data: res } = await this.$http.delete('sysVideo/deleteVideo',{
+          params:{
+            videoId:id
+          }
+      })
+      if (res.code!== 0) return this.$message.error('删除用户失败！')
+      this.$message.success('删除用户成功！')
+      this.getVideoList()
+    },
+    check(id){
+      this.$router.push({
+        path:'/videosTails',
+        query:{
+          videoId:id
+        }
+      })
+    }
+
+  }
+    }
+</script>
+
+<style lang="less" scoped>
+</style>
--- a/src/components/videos/videosTails.vue
+++ b/src/components/videos/videosTails.vue
+<template>
+  <div>
+    <!-- 卡片视图 -->
+    <el-card>
+       <el-row :gutter="20">
+        <el-col :span="4">
+          <el-button type="file" @click="dialogVisible = true">添加分集</el-button>
+        </el-col>
+      </el-row>
+        <el-dialog
+          title="上传视频"
+          :visible.sync="dialogVisible"
+          width="30%">
+                        <el-upload
+                class="upload"
+                ref="upload"
+                action="string"
+                :file-list="fileList"
+                :auto-upload="false"
+                :http-request="uploadFile"
+                :on-change="handleChange"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                multiple="multiple"
+              >
+                <el-button slot="trigger" size="small" type="primary" @click="delFile">选取文件</el-button>
+              </el-upload>
+          <el-form 
+           ref="form" :model="form" label-width="80px" 
+           >
+          <el-form-item label="partOrder" style="margin-top:50px">
+            <el-input v-model="form.partOrder"   ></el-input>
+          </el-form-item>
+          </el-form>
+          
+
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="dialogVisible = false;submitUpload()">确 定</el-button>
+          </span> 
+      </el-dialog>
+      
+      <!-- 用户列表区域 -->
+      <el-table :data="list" border stripe>
+        <!-- stripe: 斑马条纹
+        border：边框-->
+        <el-table-column type="index" label="#"></el-table-column>
+        <el-table-column prop="partName" label="partName"></el-table-column>
+        <el-table-column prop="partId" label="partId"></el-table-column>
+        <el-table-column prop="partOrder" label="partOrder"></el-table-column>
+        <el-table-column prop="partUrl" label="partUrl"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              size="mini"
+              circle
+              @click="removeUserById(scope.row.partId)"
+            ></el-button>                         
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页区域 -->
+        <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryInfo.pagenum"
+        :page-sizes="[2, 5, 10, 15]"
+        :page-size="queryInfo.pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+       fileList: [],
+      multiple: true,
+      formData:'',
+      file:'',
+      form:{
+        partOrder:1,
+        partUrl:'',
+        videoId:this.$route.query.videoId
+      },
+      
+     dialogVisible:false,
+      // 获取用户列表查询参数对象
+      queryInfo: {
+        // 当前页数
+        pagenum: 1,
+        // 每页显示多少数据
+        pagesize: 10
+      },
+        list: [],
+    }
+  },
+  created () {
+    this.getUserList()
+  },
+  methods: {
+    async getUserList () {
+      const { data: res } = await this.$http.get(`/sysVideo/show?videoId=${this.$route.query.videoId}`)
+      if (res.code!==0) {
+        return this.$message.error('获取列表失败！')
+      }
+      this.list = res.data.list
+    },
+      // 监听 pagesize改变的事件
+    handleSizeChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagesize = newSize
+      this.getUserList()
+    },
+    // 监听 页码值 改变事件
+    handleCurrentChange (newSize) {
+      // console.log(newSize)
+      this.queryInfo.pagenum = newSize
+      this.getUserList()
+    },
+    async removeUserById (id) {
+      const confirmResult = await this.$confirm(
+        '此操作将永久删除该视频, 是否继续?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).catch(err => err)
+      // 点击确定 返回值为：confirm
+      // 点击取消 返回值为： cancel
+      if (confirmResult !== 'confirm') {
+        return this.$message.info('已取消删除')
+      }
+      const { data: res } = await this.$http.delete('/video/part/deletePart',{
+          params:{
+            partId:id
+          }
+      })
+      if (res.code!== 0) return this.$message.error('删除用户失败！')
+      this.$message.success('删除用户成功！')
+      this.getUserList()
+    },
+     delFile() {
+      this.fileList = [];
+    },
+       handleChange(file, fileList) {
+      this.fileList = fileList;
+
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+  
+      console.log(this.fileList[0].raw)
+      console.log(99999999999)
+    },
+    uploadFile(file) {
+      this.formData.append("file", file.file);
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+     async submitUpload() {
+       console.log(localStorage.getItem('token'))
+          let formData = new FormData();
+        formData.append('file',this.fileList[0].raw);
+      formData.append('type',3);
+      let re = await this.$http.post('/api/resource/file',formData,{
+  headers: {
+ authorization: `Bearer ${localStorage.getItem('token')}`,
+  }
+  });
+  this.form.partUrl=re.data.data
+  console.log(this.form)
+   let res=await this.$http.post('/video/part/addPart',this.form)
+  //  if (res.code!== 0) return this.$message.error('添加视频失败')
+  console.log(res)
+      this.$message.success('添加成功！')
+     this.getUserList()
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>
--- a/src/main.js
+++ b/src/main.js
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import "../src/assets/css/reset.css"
+// 导入全局样式
+import './assets/css/global.css'
+// 导入字体图标
+import './assets/fonts/iconfont.css'
+// 导入表格树
+import TreeTable from 'vue-table-with-tree-grid'
+// 导入富文本编辑器
+import VueQuillEditor from 'vue-quill-editor'
+// 导入富文本编辑器样式
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+import ElementUI from 'element-ui';
+
+// 导入NProgress, 包对应的JS和CSS
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+import axios from 'axios'
+// 配置请求根路径
+// 本机地址
+// axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
+// 远程后台地址
+axios.defaults.baseURL = 'http://39.106.46.186:8082'
+
+// 在request 拦截器中, 展示进度条 NProgress.start()
+// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
+// axios.interceptors.request.use(config => {
+//         NProgress.start()
+//             // console.log(config)
+//             // 为请求头对象，添加token验证的Authorization字段
+//         config.headers.Authorization = window.sessionStorage.getItem('token')
+//             // 在最后必须 return config
+//         return config
+//     })
+//     // response 拦截器中,  隐藏进度条NProgress.done()
+// axios.interceptors.response.use(config => {
+//         NProgress.done()
+//         return config
+//     })
+// 挂在到Vue实例，后面可通过this调用
+Vue.prototype.$http = axios
+
+Vue.config.productionTip = false
+    // 组件全局注册 表格树
+Vue.component('tree-table', TreeTable)
+    // 全局注册富文本编辑器
+Vue.use(VueQuillEditor)
+Vue.use(ElementUI)
+Vue.filter('dataFormat', function(originVal) {
+    const dt = new Date(originVal)
+
+    const y = dt.getFullYear()
+    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+    const d = (dt.getDate() + '').padStart(2, '0')
+
+    const hh = (dt.getHours() + '').padStart(2, '0')
+    const mm = (dt.getMinutes() + '').padStart(2, '0')
+    const ss = (dt.getSeconds() + '').padStart(2, '0')
+        // yyyy-mm-dd hh:mm:ss
+    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+})
+
+new Vue({
+    router,
+    render: h => h(App)
+}).$mount('#app')
\ No newline at end of file
--- a/src/router/index.js
+++ b/src/router/index.js
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+const Login = () =>
+    import ( /* webpackChunkName: "Login_Home_Welcome" */ '../components/Login.vue')
+const Home = () =>
+    import ( /* webpackChunkName: "Login_Home_Welcome" */ '../components/Home.vue')
+const Welcome = () =>
+    import ( /* webpackChunkName: "Login_Home_Welcome" */ '../components/Welcome.vue')
+
+const Users = () =>
+    import ( /* webpackChunkName: "Users_Rights_Roles" */ '../components/user/User.vue')
+const UsersVideos = () =>
+    import ( /* webpackChunkName: "Users_Rights_Roles" */ '../components/user/uservideos.vue')
+const Videos = () =>
+    import ( /* webpackChunkName: "Users_Rights_Roles" */ '../components/videos/videos.vue')
+
+
+const Tunnel = () =>
+    import ( /* webpackChunkName: "Order_Report" */ '../components/tunnel/tunnel.vue')
+const videosTails = () =>
+    import ( /* webpackChunkName: "Order_Report" */ '../components/videos/videosTails.vue')
+
+Vue.use(VueRouter)
+
+const routes = [
+    { path: '/', redirect: '/login' },
+    { path: '/login', component: Login },
+
+    {
+        path: '/users',
+        component: Home,
+        redirect: '/users',
+        children: [
+            { path: '/home', component: Welcome },
+            { path: '/users', component: Users },
+            { path: '/videos', component: Videos },
+            { path: '/uservideos', component: UsersVideos },
+            { path: '/tunnel', component: Tunnel },
+            { path: '/videosTails', component: videosTails }
+        ]
+    }
+
+]
+
+const router = new VueRouter({
+    routes
+})
+
+// 挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作 next('/login')强制跳转login
+// router.beforeEach((to, from, next) => {
+//     // 访问登录页，放行
+//     if (to.path === '/login') return next()
+//         // 获取token
+//     const tokenStr = window.sessionStorage.getItem('token')
+//         // 没有token, 强制跳转到登录页
+//     if (!tokenStr) return next('/login')
+//     next()
+// })
+
+export default router
\ No newline at end of file
--- a/vue.config.js
+++ b/vue.config.js
+module.exports = {
+    publicPath: './'
+
+    // chainWebpack: config => {
+
+    //     // 开发模式
+    //     config.when(process.env.NODE_ENV === 'development', config => {
+    //         config.entry('app').clear().add('./src/main.js')
+    //     })
+    // }
+}
\ No newline at end of file