whychdw
2021-04-19 0846e2a77fb1bf078c199b1f2a5994aad1afc4fa
提交
8个文件已修改
370 ■■■■ 已修改文件
package-lock.json 183 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json 5 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/App.vue 31 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main.js 19 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/index.vue 108 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/index.js 9 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/routes.js 8 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
vue.config.js 7 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package-lock.json
@@ -7,8 +7,11 @@
    "": {
      "version": "0.1.0",
      "dependencies": {
        "axios": "^0.21.1",
        "core-js": "^3.6.5",
        "vue": "^2.6.11"
        "element-ui": "^2.15.1",
        "vue": "^2.6.11",
        "vue-router": "^3.5.1"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
@@ -2626,6 +2629,14 @@
      "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
      "dev": true
    },
    "node_modules/async-validator": {
      "version": "1.8.5",
      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1605751798748&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
      "dependencies": {
        "babel-runtime": "6.x"
      }
    },
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2677,6 +2688,14 @@
      "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
      "dev": true
    },
    "node_modules/axios": {
      "version": "0.21.1",
      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz",
      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
      "dependencies": {
        "follow-redirects": "^1.10.0"
      }
    },
    "node_modules/babel-eslint": {
      "version": "10.1.0",
      "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1611945896690&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
@@ -2697,6 +2716,11 @@
      "peerDependencies": {
        "eslint": ">= 4.12.1"
      }
    },
    "node_modules/babel-helper-vue-jsx-merge-props": {
      "version": "2.0.3",
      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
    },
    "node_modules/babel-loader": {
      "version": "8.2.2",
@@ -2764,6 +2788,26 @@
      "peerDependencies": {
        "@babel/core": "^7.0.0-0"
      }
    },
    "node_modules/babel-runtime": {
      "version": "6.26.0",
      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
      "dependencies": {
        "core-js": "^2.4.0",
        "regenerator-runtime": "^0.11.0"
      }
    },
    "node_modules/babel-runtime/node_modules/core-js": {
      "version": "2.6.12",
      "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1617822528362&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz",
      "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw=",
      "deprecated": "core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3."
    },
    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
      "version": "0.11.1",
      "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
      "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
@@ -4720,7 +4764,6 @@
      "version": "1.5.2",
      "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -5186,6 +5229,22 @@
      "resolved": "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.717.tgz?cache=0&sync_timestamp=1618409102229&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.717.tgz",
      "integrity": "sha1-eNTIVwcHVftYq2S8wXPbHVHLwl8=",
      "dev": true
    },
    "node_modules/element-ui": {
      "version": "2.15.1",
      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.15.1.tgz",
      "integrity": "sha1-raAKpuMsAndKLndWPdhGaPgTzf8=",
      "dependencies": {
        "async-validator": "~1.8.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.0",
        "deepmerge": "^1.2.0",
        "normalize-wheel": "^1.0.1",
        "resize-observer-polyfill": "^1.5.0",
        "throttle-debounce": "^1.0.1"
      },
      "peerDependencies": {
        "vue": "^2.5.17"
      }
    },
    "node_modules/elliptic": {
      "version": "6.5.4",
@@ -6273,7 +6332,6 @@
      "version": "1.13.3",
      "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.3.tgz",
      "integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc=",
      "dev": true,
      "engines": {
        "node": ">=4.0"
      }
@@ -8917,6 +8975,11 @@
        "node": ">=4"
      }
    },
    "node_modules/normalize-wheel": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
    },
    "node_modules/npm-run-path": {
      "version": "2.0.2",
      "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -10950,6 +11013,11 @@
      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
      "dev": true
    },
    "node_modules/resize-observer-polyfill": {
      "version": "1.5.1",
      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
    },
    "node_modules/resolve": {
      "version": "1.20.0",
      "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",
@@ -12397,6 +12465,14 @@
        "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
      }
    },
    "node_modules/throttle-debounce": {
      "version": "1.1.0",
      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1604315662384&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz",
      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0=",
      "engines": {
        "node": ">=4"
      }
    },
    "node_modules/through": {
      "version": "2.3.8",
      "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -13193,6 +13269,11 @@
      "resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
      "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
      "dev": true
    },
    "node_modules/vue-router": {
      "version": "3.5.1",
      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz",
      "integrity": "sha1-7fPPSQeVLR4Fg+B5I3Igxf9utsk="
    },
    "node_modules/vue-style-loader": {
      "version": "4.1.3",
@@ -16090,7 +16171,8 @@
      "version": "4.5.12",
      "resolved": "https://registry.npm.taobao.org/@vue/cli-plugin-vuex/download/@vue/cli-plugin-vuex-4.5.12.tgz?cache=0&sync_timestamp=1616590565306&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcli-plugin-vuex%2Fdownload%2F%40vue%2Fcli-plugin-vuex-4.5.12.tgz",
      "integrity": "sha1-9/vhd+5xdvBVtUbp50Ry+dkXdiY=",
      "dev": true
      "dev": true,
      "requires": {}
    },
    "@vue/cli-service": {
      "version": "4.5.12",
@@ -16244,7 +16326,8 @@
      "version": "1.1.2",
      "resolved": "https://registry.npm.taobao.org/@vue/preload-webpack-plugin/download/@vue/preload-webpack-plugin-1.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fpreload-webpack-plugin%2Fdownload%2F%40vue%2Fpreload-webpack-plugin-1.1.2.tgz",
      "integrity": "sha1-zrkktOyzucQ4ccekKaAvhCPmIas=",
      "dev": true
      "dev": true,
      "requires": {}
    },
    "@vue/web-component-wrapper": {
      "version": "1.3.0",
@@ -16459,7 +16542,8 @@
      "version": "5.3.1",
      "resolved": "https://registry.npm.taobao.org/acorn-jsx/download/acorn-jsx-5.3.1.tgz",
      "integrity": "sha1-/IZh4Rt6wVOcR9v+oucrOvNNJns=",
      "dev": true
      "dev": true,
      "requires": {}
    },
    "acorn-walk": {
      "version": "7.2.0",
@@ -16499,13 +16583,15 @@
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/ajv-errors/download/ajv-errors-1.0.1.tgz",
      "integrity": "sha1-81mGrOuRr63sQQL72FAUlQzvpk0=",
      "dev": true
      "dev": true,
      "requires": {}
    },
    "ajv-keywords": {
      "version": "3.5.2",
      "resolved": "https://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1616882384060&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
      "dev": true
      "dev": true,
      "requires": {}
    },
    "alphanum-sort": {
      "version": "1.0.2",
@@ -16727,6 +16813,14 @@
      "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
      "dev": true
    },
    "async-validator": {
      "version": "1.8.5",
      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1605751798748&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
      "requires": {
        "babel-runtime": "6.x"
      }
    },
    "asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -16766,6 +16860,14 @@
      "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
      "dev": true
    },
    "axios": {
      "version": "0.21.1",
      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz",
      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
      "requires": {
        "follow-redirects": "^1.10.0"
      }
    },
    "babel-eslint": {
      "version": "10.1.0",
      "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1611945896690&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
@@ -16779,6 +16881,11 @@
        "eslint-visitor-keys": "^1.0.0",
        "resolve": "^1.12.0"
      }
    },
    "babel-helper-vue-jsx-merge-props": {
      "version": "2.0.3",
      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
    },
    "babel-loader": {
      "version": "8.2.2",
@@ -16829,6 +16936,27 @@
      "dev": true,
      "requires": {
        "@babel/helper-define-polyfill-provider": "^0.2.0"
      }
    },
    "babel-runtime": {
      "version": "6.26.0",
      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
      "requires": {
        "core-js": "^2.4.0",
        "regenerator-runtime": "^0.11.0"
      },
      "dependencies": {
        "core-js": {
          "version": "2.6.12",
          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1617822528362&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz",
          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
        },
        "regenerator-runtime": {
          "version": "0.11.1",
          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
        }
      }
    },
    "balanced-match": {
@@ -18490,8 +18618,7 @@
    "deepmerge": {
      "version": "1.5.2",
      "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
      "dev": true
      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
    },
    "default-gateway": {
      "version": "5.0.5",
@@ -18885,6 +19012,19 @@
      "resolved": "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.717.tgz?cache=0&sync_timestamp=1618409102229&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.717.tgz",
      "integrity": "sha1-eNTIVwcHVftYq2S8wXPbHVHLwl8=",
      "dev": true
    },
    "element-ui": {
      "version": "2.15.1",
      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.15.1.tgz",
      "integrity": "sha1-raAKpuMsAndKLndWPdhGaPgTzf8=",
      "requires": {
        "async-validator": "~1.8.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.0",
        "deepmerge": "^1.2.0",
        "normalize-wheel": "^1.0.1",
        "resize-observer-polyfill": "^1.5.0",
        "throttle-debounce": "^1.0.1"
      }
    },
    "elliptic": {
      "version": "6.5.4",
@@ -19780,8 +19920,7 @@
    "follow-redirects": {
      "version": "1.13.3",
      "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.3.tgz",
      "integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc=",
      "dev": true
      "integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc="
    },
    "for-in": {
      "version": "1.0.2",
@@ -21949,6 +22088,11 @@
        "sort-keys": "^1.0.0"
      }
    },
    "normalize-wheel": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
    },
    "npm-run-path": {
      "version": "2.0.2",
      "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -23660,6 +23804,11 @@
      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
      "dev": true
    },
    "resize-observer-polyfill": {
      "version": "1.5.1",
      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
    },
    "resolve": {
      "version": "1.20.0",
      "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",
@@ -24893,6 +25042,11 @@
        "neo-async": "^2.6.0"
      }
    },
    "throttle-debounce": {
      "version": "1.1.0",
      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1604315662384&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz",
      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
    },
    "through": {
      "version": "2.3.8",
      "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -25564,6 +25718,11 @@
        }
      }
    },
    "vue-router": {
      "version": "3.5.1",
      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz",
      "integrity": "sha1-7fPPSQeVLR4Fg+B5I3Igxf9utsk="
    },
    "vue-style-loader": {
      "version": "4.1.3",
      "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
package.json
@@ -8,8 +8,11 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
    "element-ui": "^2.15.1",
    "vue": "^2.6.11",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
src/App.vue
@@ -1,28 +1,29 @@
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
    name: 'App',
}
</script>
<style>
body {
    height: 100vh;
    overflow-y: hidden;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
    height: 100%;
    background-color: #031D67;
    background-image: url("./assets/images/video-bg.jpg");
    overflow-x: hidden;
}
#app:before {
    display: table;
    content: " ";
}
</style>
src/main.js
@@ -1,8 +1,21 @@
import Vue from 'vue'
import App from './App.vue'
import Vue from 'vue';
import App from './App.vue';
import router from '@/router';
import apis from '@/apis';
Vue.config.productionTip = false
import ElementUi from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/css/common.css';
import '@/assets/css/element-ui.css';
Vue.config.productionTip = false;
Vue.use(ElementUi);
// 添加后台异步请求接口
Vue.prototype.$apis = apis;
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
src/pages/index.vue
@@ -1,13 +1,117 @@
<template>
$END$
    <div class="video-wrapper">
        <video-header></video-header>
        <div class="video-body">
            <el-row :gutter="20">
                <el-col :span="8" class="video-item" v-for="item in videos" :key="item.key">
                    <video-item :flag="item.key" :id="item.id" :name="item.name" :ip="item.ip" @close="close"></video-item>
                </el-col>
                <el-col :span="8" class="video-item">
                    <layout-box2>
                        <div class="add-video-item" @click="drawer=true">
                            <div class="add-video-text">+</div>
                        </div>
                    </layout-box2>
                </el-col>
            </el-row>
        </div>
        <el-drawer
            :withHeader="false"
            :visible.sync="drawer"
            direction="rtl">
        </el-drawer>
    </div>
</template>
<script>
import VideoHeader from "@/components/video-header";
import VideoItem from "@/components/VideoItem";
import LayoutBox2 from "@/components/LayoutBox2";
export default {
name: "index.vue"
    name: "index",
    components: {LayoutBox2, VideoItem, VideoHeader},
    data() {
        return {
            drawer: false,
            videos: [
                {
                    key: 'video1',
                    id: '42010013',
                    ip: '192.168.10.165',
                    name: '测试视频'
                },
                {
                    key: 'video2',
                    id: '42010013',
                    ip: '192.168.10.2',
                    name: '测试视频1'
                },
            ]
        }
    },
    methods: {
        close(ip) {
            this.videos = this.videos.filter(item => {
                return item.ip != ip;
            });
        },
        searchAll() {
            this.$apis.station.searchAll().then(res=>{
                console.log(res);
            }).catch(error=>{
                console.log(error);
            });
        },
        searchAllShow() {
            this.$apis.videoManage.searchAllShow().then(res=>{
                console.log(res);
            }).catch(error=>{
                console.log(error);
            });
        }
    },
    mounted() {
        this.searchAll();
        this.searchAllShow();
    }
}
</script>
<style scoped>
.video-wrapper {
    display: flex;
    height: 100vh;
    background-image: url("../assets/images/video-bg.jpg");
    background-size: 100% 100%;
    flex-direction: column;
}
.video-body {
    flex: 1;
    padding: 0 8px;
}
.video-item {
    margin-top: 12px;
    margin-bottom: 12px;
    height: calc(33.3vh - 44px);
}
.add-video-item {
    position: relative;
    height: 100%;
    background-color: #061c67;
}
.add-video-text {
    position: absolute;
    color: #0069bc;
    font-size: 100px;
    top: 50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -50px;
}
</style>
src/router/index.js
@@ -0,0 +1,9 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from '@/router/routes';
Vue.use(VueRouter);
export default new VueRouter({
    routes
});
src/router/routes.js
@@ -0,0 +1,8 @@
const routes = [
    {
        path: '/',
        meta: {},
        component: (resolve) => require(['@/pages/index.vue'], resolve)
    }
];
export default routes;
vue.config.js
@@ -2,11 +2,4 @@
    publicPath: './',
    productionSourceMap: false,
    lintOnSave: false,
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'element-ui': 'ELEMENT',
        },
    }
}