├── .browserslistrc
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   ├── avatar.jpg
    │   └── styles
    │   │   └── main.css
    ├── views
    │   ├── About.vue
    │   ├── ShowVideo.vue
    │   ├── Home.vue
    │   └── PostVideo.vue
    ├── plugins
    │   └── element.js
    ├── api
    │   ├── upload
    │   │   └── index.js
    │   └── video
    │   │   └── index.js
    ├── store.js
    ├── App.vue
    ├── main.js
    ├── components
    │   ├── NavBar.vue
    │   └── HelloWorld.vue
    └── router.js
├── postcss.config.js
├── docker
    ├── Dockerfile
    ├── nginx.conf
    └── docker-compose.yml
├── .editorconfig
├── vue.config.js
├── .gitignore
├── README.md
├── .eslintrc.js
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app',
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gourouting/giligili-vue/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gourouting/giligili-vue/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/src/assets/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gourouting/giligili-vue/HEAD/src/assets/avatar.jpg


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>欢迎来到Giligili</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/docker/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM nginx:alpine
2 | 
3 | COPY ./nginx.conf /etc/nginx/conf.d/default.conf
4 | COPY ./dist /usr/share/nginx/html
5 | 


--------------------------------------------------------------------------------
/src/assets/styles/main.css:
--------------------------------------------------------------------------------
1 | .main-contianer {
2 |     max-width: 1400px;
3 |     margin: 0 auto;
4 |     padding-bottom: 80px;
5 | }
6 | 


--------------------------------------------------------------------------------
/docker/nginx.conf:
--------------------------------------------------------------------------------
1 | server {
2 |     listen 80;
3 | 
4 |     location / {
5 |       root /usr/share/nginx/html;
6 |       index index.html;
7 |     }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/plugins/element.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Element from 'element-ui';
3 | import 'element-ui/lib/theme-chalk/index.css';
4 | 
5 | Vue.use(Element);
6 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/docker/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '2'
2 | 
3 | services:
4 |   violet:
5 |     image: registry.cn-hongkong.aliyuncs.com/chengka/violet:latest
6 |     restart: always
7 |     ports:
8 |       - 3010:80
9 | 


--------------------------------------------------------------------------------
/src/api/upload/index.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | 
3 | // 读视频详情
4 | const postUploadToken = fileName => axios.post('/api/v1/upload/token', { filename: fileName }).then(res => res.data);
5 | 
6 | export default postUploadToken;
7 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   devServer: {
 3 |     proxy: {
 4 |       '^/api': {
 5 |         target: 'http://localhost:3000',
 6 |         ws: true,
 7 |         changeOrigin: true,
 8 |       },
 9 |     },
10 |   },
11 | };
12 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 | 
 9 |   },
10 |   mutations: {
11 | 
12 |   },
13 |   actions: {
14 | 
15 |   },
16 | });
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" class="main-contianer">
 3 |     <NavBar></NavBar>
 4 |     <router-view></router-view>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import NavBar from './components/NavBar.vue';
10 | 
11 | export default {
12 |   name: 'app',
13 |   components: {
14 |     NavBar,
15 |   },
16 | };
17 | </script>
18 | 
19 | <style>
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | import store from './store';
 5 | import './plugins/element';
 6 | import '@/assets/styles/main.css';
 7 | 
 8 | Vue.config.productionTip = false;
 9 | 
10 | Vue.use(require('vue-moment'));
11 | 
12 | new Vue({
13 |   router,
14 |   store,
15 |   render: h => h(App),
16 | }).$mount('#app');
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # giligili
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/airbnb',
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint',
16 |   },
17 | };
18 | 


--------------------------------------------------------------------------------
/src/api/video/index.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | // 创建视频
 4 | const postVideo = form => axios.post('/api/v1/videos', form).then(res => res.data);
 5 | 
 6 | // 读视频详情
 7 | const getVideo = id => axios.get(`/api/v1/video/${id}`).then(res => res.data);
 8 | 
 9 | // 读取视频列表
10 | const getVideos = (start, limit) => axios.get('/api/v1/videos', { params: { start, limit } }).then(res => res.data);
11 | 
12 | export {
13 |   getVideos,
14 |   getVideo,
15 |   postVideo,
16 | };
17 | 


--------------------------------------------------------------------------------
/src/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-menu class="top-bar" mode="horizontal" router>
 3 |     <el-menu-item index="/">首页</el-menu-item>
 4 |     <el-menu-item index="/postvideo">投稿视频</el-menu-item>
 5 |     <el-menu-item index="/about">关于我们</el-menu-item>
 6 |   </el-menu>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'NavBar',
12 | };
13 | </script>
14 | 
15 | <!-- Add "scoped" attribute to limit CSS to this component only -->
16 | <style scoped lang="scss">
17 | .top-bar {
18 |   margin-bottom: 20px;
19 | }
20 | </style>
21 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>giligili</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>你的游览器不支持本网站，换个chrome再来吧！</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import Home from './views/Home.vue';
 4 | 
 5 | Vue.use(Router);
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'home',
12 |       component: Home,
13 |     },
14 |     {
15 |       path: '/postvideo',
16 |       name: 'postVideo',
17 |       component: () => import(/* webpackChunkName: "video" */ './views/PostVideo.vue'),
18 |     },
19 |     {
20 |       path: '/video/:videoID',
21 |       name: 'showVideo',
22 |       component: () => import(/* webpackChunkName: "video" */ './views/ShowVideo.vue'),
23 |     },
24 |     {
25 |       path: '/about',
26 |       name: 'about',
27 |       component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
28 |     },
29 |   ],
30 | });
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "giligili",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.0",
12 |     "core-js": "^2.6.5",
13 |     "element-ui": "^2.4.5",
14 |     "moment": "^2.24.0",
15 |     "video.js": "^7.6.0",
16 |     "vue": "^2.6.10",
17 |     "vue-moment": "^4.0.0",
18 |     "vue-router": "^3.0.3",
19 |     "vue-video-player": "^5.0.2",
20 |     "vuex": "^3.0.1"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "^3.0.4",
24 |     "@vue/cli-plugin-eslint": "^3.0.4",
25 |     "@vue/cli-service": "^3.0.4",
26 |     "@vue/eslint-config-airbnb": "^4.0.0",
27 |     "babel-eslint": "^10.0.1",
28 |     "eslint": "^5.16.0",
29 |     "eslint-plugin-vue": "^5.0.0",
30 |     "node-sass": "^4.9.0",
31 |     "sass-loader": "^7.1.0",
32 |     "vue-cli-plugin-element": "^1.0.1",
33 |     "vue-template-compiler": "^2.6.10"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/views/ShowVideo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="post-video">
 3 |     <div class="video-header">
 4 |       <h2>{{video.title}}</h2>
 5 |       <div class="video-data">
 6 |         {{video.created_at | moment("YYYY-MM-DD h:mm:ss") }}创建 ·
 7 |         {{video.view}}观赏
 8 |       </div>
 9 |     </div>
10 |     <video-player
11 |       class="video-player-box"
12 |       :options="playerOptions">
13 |     </video-player>
14 |     <div class="video-info">
15 |       <pre>{{video.info}}</pre>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import 'video.js/dist/video-js.css';
22 | import { videoPlayer } from 'vue-video-player';
23 | import * as API from '@/api/video/';
24 | 
25 | export default {
26 |   name: 'ShowVideo',
27 |   data() {
28 |     return {
29 |       video: {},
30 |       playerOptions: {
31 |         fluid: true,
32 |         autoplay: false,
33 |         sources: [{
34 |           type: 'video/mp4',
35 |           src: '',
36 |         }],
37 |       },
38 |     };
39 |   },
40 |   methods: {
41 |     load() {
42 |       API.getVideo(this.$route.params.videoID).then((res) => {
43 |         this.video = res.data;
44 |         this.playerOptions.sources[0].src = this.video.url;
45 |       });
46 |     },
47 |   },
48 |   components: {
49 |     videoPlayer,
50 |   },
51 |   beforeMount() {
52 |     this.load();
53 |   },
54 | };
55 | </script>
56 | 
57 | <style>
58 | .video-header {
59 |   margin-bottom: 16px;
60 | }
61 | .video-header h2{
62 |   margin-bottom: 0px;
63 |   font-size: 18px;
64 |   font-weight: 500;
65 |   color: #212121;
66 |   line-height: 26px;
67 |   height: 26px;
68 |   overflow: hidden;
69 |   text-overflow: ellipsis;
70 |   white-space: nowrap;
71 | }
72 | .video-data {
73 |   margin-top: 6px;
74 |   font-size: 12px;
75 |   color: #999;
76 | }
77 | .video-info {
78 |   color: #111;
79 | }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <div class="top">
 4 |       <el-row :gutter="20">
 5 |         <el-col :xs="24" :sm="8" :md="8" v-for="video in videos" :key="video.id">
 6 |           <el-card class="video-card" @click.native="goVideo(video)">
 7 |             <img class="video-avatar" :src="video.avatar">
 8 |             <div>
 9 |               <div class="video-title">{{video.title}}</div>
10 |               <div class="video-bottom clearfix">
11 |                 <span class="video-info">{{video.info.substring(0, 40)}}</span>
12 |               </div>
13 |             </div>
14 |           </el-card>
15 |         </el-col>
16 |       </el-row>
17 |       <div class="block">
18 |         <el-pagination
19 |           @size-change="handleSizeChange"
20 |           @current-change="handleCurrentChange"
21 |           :page-size="6"
22 |           layout="prev, pager, next"
23 |           :total="total">
24 |         </el-pagination>
25 |       </div>
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | import * as API from '@/api/video/';
32 | 
33 | export default {
34 |   name: 'home',
35 |   data() {
36 |     return {
37 |       videos: [],
38 |       start: 0,
39 |       limit: 6,
40 |       total: 0,
41 |     };
42 |   },
43 |   methods: {
44 |     handleCurrentChange(val) {
45 |       this.start = this.limit * (val - 1); // val 页面
46 |       this.load();
47 |     },
48 |     load() {
49 |       API.getVideos(this.start, this.limit).then((res) => {
50 |         this.videos = res.data.items;
51 |         this.total = res.data.total;
52 |       });
53 |     },
54 |     goVideo(video) {
55 |       this.$router.push({ name: 'showVideo', params: { videoID: video.id } });
56 |     },
57 |   },
58 |   components: {
59 |   },
60 |   beforeMount() {
61 |     this.load();
62 |   },
63 | };
64 | </script>
65 | 
66 | <style>
67 | .video-avatar {
68 |   width: 100%;
69 | }
70 | .video-title {
71 |   margin: 4px 0px 4px 0px;
72 |   text-overflow: ellipsis;
73 |   white-space: nowrap;
74 |   overflow: hidden;
75 | }
76 | .video-bottom {
77 |   margin-top: 4px;
78 | }
79 | .video-info {
80 |   color: #909399;
81 | }
82 | .video-card {
83 |   margin-bottom: 14px;
84 |   cursor: pointer;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String,
38 |   },
39 | };
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped lang="scss">
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/views/PostVideo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="post-video">
  3 |     <h2>欢迎投稿：</h2>
  4 |     <el-form ref="form" :model="form" label-width="80px">
  5 |       <el-form-item label="标题">
  6 |         <el-input v-model="form.title"></el-input>
  7 |       </el-form-item>
  8 | 
  9 |       <el-form-item label="视频地址">
 10 |         <el-input type="url" v-model="form.url"></el-input>
 11 |       </el-form-item>
 12 | 
 13 |       <el-form-item label="描述">
 14 |         <el-input type="textarea" v-model="form.info"></el-input>
 15 |       </el-form-item>
 16 | 
 17 |       <el-form-item label="视频封面">
 18 |         <el-upload
 19 |           class="avatar-uploader"
 20 |           label="描述"
 21 |           action=""
 22 |           ref="upload"
 23 |           :before-upload="fnBeforeUpload"
 24 |           :http-request="fnUploadRequest"
 25 |           :show-file-list="false">
 26 |           <img v-if="imageUrl" :src="imageUrl" class="avatar">
 27 |           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 28 |           <div class="el-upload__tip" slot="tip">只能上传png文件，且不超过500kb</div>
 29 |         </el-upload>
 30 |       </el-form-item>
 31 | 
 32 |       <el-form-item>
 33 |         <el-button type="primary" @click="onSubmit">立即创建</el-button>
 34 |       </el-form-item>
 35 | 
 36 |     </el-form>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import * as API from '@/api/video/';
 42 | import uplpadAPI from '@/api/upload/';
 43 | 
 44 | export default {
 45 |   name: 'PostVideo',
 46 |   data() {
 47 |     return {
 48 |       imageUrl: '',
 49 |       dialogImageUrl: '',
 50 |       dialogVisible: false,
 51 |       form: {
 52 |         title: '',
 53 |         info: '',
 54 |         url: '',
 55 |         avatar: '',
 56 |       },
 57 |     };
 58 |   },
 59 |   methods: {
 60 |     fnBeforeUpload(file) {
 61 |       const isImage = (file.type === 'image/png' || file.type === 'image/jpeg');
 62 |       const isLt2M = file.size / 1024 / 1024 < 2;
 63 |       if (!isImage) {
 64 |         this.$message.error('上传头像图片只能是图片!');
 65 |       }
 66 |       if (!isLt2M) {
 67 |         this.$message.error('上传头像图片大小不能超过 2MB!');
 68 |       }
 69 |       return isImage && isLt2M;
 70 |     },
 71 |     fnUploadRequest(option) {
 72 |       uplpadAPI(option.file.name).then((res) => {
 73 |         const oReq = new XMLHttpRequest();
 74 |         oReq.open('PUT', res.data.put, true);
 75 |         oReq.send(option.file);
 76 |         oReq.onload = () => {
 77 |           this.imageUrl = res.data.get;
 78 |           this.form.avatar = res.data.key;
 79 |         };
 80 |       }).catch((error) => {
 81 |         this.$notify.error({
 82 |           title: '网路错误，或者服务器宕机',
 83 |           message: error,
 84 |         });
 85 |       });
 86 |     },
 87 |     onSubmit() {
 88 |       API.postVideo(this.form).then((res) => {
 89 |         if (res.status > 0) {
 90 |           this.$notify.error({
 91 |             title: '投稿失败',
 92 |             message: res.msg,
 93 |           });
 94 |         } else {
 95 |           this.$notify({
 96 |             title: '投稿成功',
 97 |             message: `您投稿的ID为${res.data.id}`,
 98 |             type: 'success',
 99 |           });
100 |         }
101 |       }).catch((error) => {
102 |         this.$notify.error({
103 |           title: '网路错误，或者服务器宕机',
104 |           message: error,
105 |         });
106 |       });
107 |     },
108 |   },
109 |   components: {
110 |   },
111 | };
112 | </script>
113 | 
114 | <style>
115 |   .avatar-uploader .el-upload {
116 |     border: 1px dashed #d9d9d9;
117 |     border-radius: 6px;
118 |     cursor: pointer;
119 |     position: relative;
120 |     overflow: hidden;
121 |   }
122 |   .avatar-uploader .el-upload:hover {
123 |     border-color: #409EFF;
124 |   }
125 |   .avatar-uploader-icon {
126 |     font-size: 28px;
127 |     color: #8c939d;
128 |     width: 178px;
129 |     height: 178px;
130 |     line-height: 178px;
131 |     text-align: center;
132 |   }
133 |   .avatar {
134 |     max-width: 178px;
135 |     max-height: 178px;
136 |     display: block;
137 |   }
138 | </style>
139 | 


--------------------------------------------------------------------------------