├── .browserslistrc
├── vue.config.js
├── babel.config.js
├── public
    ├── favicon.ico
    ├── index.html
    └── video-js.min.css
├── src
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── App.vue
    ├── store
    │   └── index.js
    ├── plugins
    │   └── vuetify.js
    ├── main.js
    ├── user
    │   └── index.js
    ├── http
    │   ├── videoLoader.js
    │   └── index.js
    ├── util
    │   └── index.js
    ├── views
    │   ├── student
    │   │   ├── ExamScore.vue
    │   │   ├── StudyContent.vue
    │   │   ├── MyClass.vue
    │   │   ├── StudentIndex.vue
    │   │   └── MyStudy.vue
    │   ├── admin
    │   │   ├── Log.vue
    │   │   ├── AnnouncementManagement.vue
    │   │   ├── TeacherManagement.vue
    │   │   ├── StudentManagement.vue
    │   │   ├── StudentAttendanceManagement.vue
    │   │   ├── TeacherAttendanceManagement.vue
    │   │   └── AdminIndex.vue
    │   ├── Login.vue
    │   ├── teacher
    │   │   ├── Subject.vue
    │   │   ├── Clazz.vue
    │   │   ├── Examination.vue
    │   │   ├── PersonalInformation.vue
    │   │   ├── ExaminationScore.vue
    │   │   ├── LearningContent.vue
    │   │   ├── Suggestion.vue
    │   │   └── TeacherIndex.vue
    │   └── Reg.vue
    ├── api
    │   └── index.js
    ├── components
    │   ├── CrudTable.vue
    │   └── VueMarquee.vue
    └── router
    │   └── index.js
├── .gitignore
├── .editorconfig
├── package.json
├── README.md
└── LICENSE


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


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "transpileDependencies": [
3 |     "vuetify"
4 |   ]
5 | }


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/self-learning-platform-client/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/self-learning-platform-client/master/src/assets/logo.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view/>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     name: 'App',
 8 |     data: () => ({}),
 9 |   };
10 | </script>
11 | 


--------------------------------------------------------------------------------
/src/store/index.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 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuetify from 'vuetify/lib';
 3 | import zhHans from 'vuetify/es5/locale/zh-Hans'
 4 | 
 5 | Vue.use(Vuetify);
 6 | 
 7 | export default new Vuetify({
 8 |   lang: {
 9 |     locales: {zhHans},
10 |     current: 'zhHans'
11 |   },
12 | });
13 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*.vue]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.js]
12 | charset = utf-8
13 | indent_style = space
14 | indent_size = 2
15 | end_of_line = lf
16 | insert_final_newline = true
17 | trim_trailing_whitespace = true
18 | 


--------------------------------------------------------------------------------
/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 vuetify from './plugins/vuetify';
 6 | import User from './user'
 7 | import './http'
 8 | 
 9 | Vue.config.productionTip = false
10 | Vue.use(User);
11 | 
12 | new Vue({
13 |   router,
14 |   store,
15 |   vuetify,
16 |   render: h => h(App)
17 | }).$mount('#app')
18 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 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>自主学习平台系统</title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>请开启JavaScript功能后再试！</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/user/index.js:
--------------------------------------------------------------------------------
 1 | import {Base64} from 'js-base64';
 2 | 
 3 | const User = {};
 4 | 
 5 | export function resolveToken(token) {
 6 |   return JSON.parse(JSON.parse(
 7 |     Base64.decode(token.split('.')[1])
 8 |   ).loginUser);
 9 | }
10 | 
11 | function init() {
12 |   const token = window.localStorage.getItem('authorization_token');
13 |   if (token === null) {
14 |     return {};
15 |   }
16 |   try {
17 |     return JSON.parse(JSON.parse(
18 |       Base64.decode(
19 |         token.split('.')[1]
20 |       )
21 |     ).loginUser);
22 |   } catch (e) {
23 |     window.localStorage.removeItem('authorization_token');
24 |     return {};
25 |   }
26 | }
27 | 
28 | User.loginUser = function () {
29 |   return init();
30 | }
31 | 
32 | User.install = function (Vue, options) {
33 |   Vue.prototype.$user = User;
34 | };
35 | export default User;
36 | 


--------------------------------------------------------------------------------
/src/http/videoLoader.js:
--------------------------------------------------------------------------------
 1 | export default function videoLoader() {
 2 |     return new Promise((resolve, reject) => {
 3 |         if (window.videojs) {
 4 |             resolve(window.videojs)
 5 |         } else {
 6 |             var link = document.createElement("link");
 7 |             link.type = "text/css";
 8 |             link.href = "/video-js.min.css";
 9 |             link.rel = "stylesheet";
10 |             document.head.appendChild(link);
11 | 
12 |             var script = document.createElement('script');
13 |             script.type = 'text/javascript';
14 |             script.async = true;
15 |             script.src = `/video.min.js`;
16 |             script.onerror = reject;
17 |             script.onload = function () {
18 |                 resolve(window.videojs)
19 |             };
20 |             document.head.appendChild(script)
21 |         }
22 |     })
23 | }
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "self-learning-platform-client",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "@itning/axios-helper": "^1.1.0",
11 |     "core-js": "^3.6.5",
12 |     "dayjs": "^1.8.28",
13 |     "js-base64": "^2.5.2",
14 |     "vue": "^2.6.11",
15 |     "vue-router": "^3.3.4",
16 |     "vuetify": "^2.3.9",
17 |     "vuex": "^3.4.0"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.4.4",
21 |     "@vue/cli-plugin-router": "~4.4.4",
22 |     "@vue/cli-plugin-vuex": "~4.4.4",
23 |     "@vue/cli-service": "~4.4.4",
24 |     "sass": "^1.26.8",
25 |     "sass-loader": "^8.0.2",
26 |     "vue-cli-plugin-vuetify": "~2.0.5",
27 |     "vue-template-compiler": "^2.6.11",
28 |     "vuetify-loader": "^1.5.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/util/index.js:
--------------------------------------------------------------------------------
 1 | import dayjs from "dayjs";
 2 | 
 3 | export function formatResponseDateTime(data) {
 4 |   return data.map(item => formatItemResponseDateTime(item));
 5 | }
 6 | 
 7 | export function formatDateTime(p, format = 'YYYY-MM-DD HH:mm:ss') {
 8 |   return dayjs(p).format(format);
 9 | }
10 | 
11 | export function formatItemResponseDateTime(item) {
12 |   item.gmtCreate = formatDateTime(item.gmtCreate);
13 |   item.gmtModified = formatDateTime(item.gmtModified);
14 |   return item;
15 | }
16 | 
17 | export function group(array, subGroupLength) {
18 |   let index = 0;
19 |   let newArray = [];
20 |   while (index < array.length) {
21 |     newArray.push(array.slice(index, index += subGroupLength));
22 |   }
23 |   return newArray;
24 | }
25 | 
26 | export function formatFileSize(size) {
27 |   let number = Number(size);
28 |   if (number < 1048576) {
29 |     return (number / 1024).toFixed(2) + ' KB';
30 |   } else if (number < 1073741824) {
31 |     return (number / 1024 / 1024).toFixed(2) + ' MB';
32 |   } else {
33 |     return (number / 1024 / 1024 / 1024).toFixed(2) + ' GB';
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/views/student/ExamScore.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <crud-table title="我的成绩" :headers="headers" :data="data" :data-loading="isLoading"
 4 |                 :disable-edit="true" :disable-add="true" :disable-del="true"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import CrudTable from "../../components/CrudTable";
10 |   import {Get} from "@itning/axios-helper";
11 |   import {API} from "../../api";
12 |   import {formatResponseDateTime} from "../../util";
13 | 
14 |   export default {
15 |     name: "ExamScore",
16 |     components: {CrudTable},
17 |     data() {
18 |       return {
19 |         isLoading: false,
20 |         headers: [
21 |           {text: '考试', align: 'start', value: 'name',},
22 |           {text: '学科', value: 'subject',},
23 |           {text: '成绩', value: 'score',},
24 |           {text: '填写时间', value: 'gmtModified',}
25 |         ],
26 |         data: []
27 |       }
28 |     },
29 |     methods: {
30 |       initialize() {
31 |         Get(API.examinationScore.studentOwn)
32 |           .withSuccessCode(200)
33 |           .do(response => {
34 |             this.data = formatResponseDateTime(response.data.data);
35 |           })
36 |       }
37 |     },
38 |     created() {
39 |       this.initialize();
40 |     }
41 |   }
42 | </script>
43 | 
44 | <style scoped>
45 | 
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/http/index.js:
--------------------------------------------------------------------------------
 1 | import {AxiosHelperConfig} from "@itning/axios-helper";
 2 | 
 3 | AxiosHelperConfig.errorMsgImpl = {
 4 |   showErrorToast(title, data) {
 5 |     let msg;
 6 |     if (typeof data === "string") {
 7 |       msg = data;
 8 |     } else {
 9 |       msg = data.msg;
10 |     }
11 |     alert(`${title}:${msg}`);
12 |     AxiosHelperConfig.onceMsgFinish();
13 |   }
14 | };
15 | AxiosHelperConfig.axiosInstanceBuilder
16 |   .timeOut(1000 * 12)
17 |   .requestInterceptor({
18 |     onFulfilled: request => {
19 |       let token = window.localStorage.getItem('authorization_token');
20 |       if (token !== undefined) {
21 |         request.headers = {
22 |           "Authorization": token,
23 |           "Accept": "application/json"
24 |         };
25 |       } else {
26 |         request.headers = {"Accept": "application/json"};
27 |       }
28 |       return request;
29 |     },
30 |     onRejected: error => Promise.reject(error)
31 |   })
32 |   .responseInterceptor({
33 |     onFulfilled: response => Promise.resolve(response),
34 |     onRejected: error => {
35 |       if (error.response === undefined) {
36 |         return Promise.reject(error);
37 |       }
38 |       if (error.response.status) {
39 |         switch (error.response.status) {
40 |           case 401:
41 |             window.localStorage.setItem('last_path', window.location.pathname);
42 |             setTimeout(() => {
43 |               window.location.href = "/login";
44 |             }, 2000);
45 |             break;
46 |           case 403:
47 |             console.warn('权限不足');
48 |             break;
49 |           case 404:
50 |             console.warn('请求URL不存在');
51 |             break;
52 |           case 500:
53 |             console.warn('服务器错误');
54 |             break;
55 |           case 503:
56 |             console.warn('服务器错误');
57 |             break;
58 |           default:
59 |             console.warn(error);
60 |         }
61 |         return Promise.reject(error);
62 |       }
63 |     }
64 |   })
65 |   .build();
66 | 
67 | 


--------------------------------------------------------------------------------
/src/views/admin/Log.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-card v-for="item in data" :key="item.id" class="mx-auto mb-2" tile>
 4 |       <v-list-item>
 5 |         <v-list-item-content>
 6 |           <v-list-item-title v-html="item.content"></v-list-item-title>
 7 |           <v-list-item-subtitle>记录时间：{{item.gmtModified}}</v-list-item-subtitle>
 8 |         </v-list-item-content>
 9 |       </v-list-item>
10 |     </v-card>
11 |     <div class="text-center" v-if="totalPage!==0" v-show="!isLoading">
12 |       <v-pagination
13 |         @input="handleChange"
14 |         v-model="nowPage"
15 |         :length="totalPage"
16 |         :total-visible="10"
17 |       ></v-pagination>
18 |     </div>
19 |     <v-alert type="info" v-if="totalPage===0">
20 |       没有日志信息
21 |     </v-alert>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 |   import {Get} from "@itning/axios-helper";
27 |   import {API} from "../../api";
28 |   import {formatResponseDateTime, group} from "../../util";
29 | 
30 |   export default {
31 |     name: "Log",
32 |     data() {
33 |       return {
34 |         nowPage: 1,
35 |         totalPage: 1,
36 |         pageSize: 10,
37 |         isLoading: false,
38 |         data: [],
39 |         pageData: []
40 |       }
41 |     },
42 |     methods: {
43 |       initialize() {
44 |         this.isLoading = true;
45 |         Get(API.log)
46 |           .withSuccessCode(200)
47 |           .do(response => {
48 |             this.totalPage = Math.ceil(response.data.data.length / this.pageSize);
49 |             const tempData = formatResponseDateTime(response.data.data).map(item => {
50 |               item.content = item.content.replace(/\r\n/g, "<br>")
51 |               item.content = item.content.replace(/\n/g, "<br>");
52 |               return item;
53 |             });
54 |             this.pageData = group(tempData, this.pageSize);
55 |             this.data = this.pageData[0];
56 |           })
57 |           .doAfter(() => {
58 |             this.isLoading = false;
59 |           })
60 |       },
61 |       handleChange(num) {
62 |         this.data = this.pageData[num - 1];
63 |       }
64 |     },
65 |     created() {
66 |       this.initialize();
67 |     }
68 |   }
69 | </script>
70 | 
71 | <style scoped>
72 | 
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/views/admin/AnnouncementManagement.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <crud-table title="公告管理" :headers="headers" :data="data" :data-loading="isLoading"
 4 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
 5 |       <template v-slot="{editedItem,isModify}">
 6 |         <v-text-field v-model="editedItem.content" label="内容"></v-text-field>
 7 |       </template>
 8 |     </crud-table>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   import CrudTable from "../../components/CrudTable";
14 |   import {API} from "../../api";
15 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
16 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
17 | 
18 |   export default {
19 |     name: "AnnouncementManagement",
20 |     components: {CrudTable},
21 |     data: () => ({
22 |       isLoading: false,
23 |       headers: [
24 |         {text: '内容', align: 'start', value: 'content',},
25 |         {text: '创建时间', value: 'gmtCreate'},
26 |         {text: '修改时间', value: 'gmtModified'},
27 |         {text: '操作', value: 'actions', sortable: false},
28 |       ],
29 |       data: []
30 |     }),
31 |     methods: {
32 |       initialize() {
33 |         this.isLoading = true;
34 |         Get(API.announcement.all)
35 |           .withSuccessCode(200)
36 |           .do(response => {
37 |             this.data = formatResponseDateTime(response.data.data)
38 |           })
39 |           .doAfter(() => {
40 |             this.isLoading = false;
41 |           });
42 |       },
43 |       handleSave(data) {
44 |         if (!data.content || data.content.trim() === '') {
45 |           alert("值不能为空");
46 |           return;
47 |         }
48 |         Post(API.announcement.add)
49 |           .withURLSearchParams(data)
50 |           .withSuccessCode(201)
51 |           .do(response => {
52 |             this.data.push(formatItemResponseDateTime(response.data.data))
53 |             alert('新增成功');
54 |           })
55 |       },
56 |       handleUpdate(data, index) {
57 |         if (!data.content || data.content.trim() === '') {
58 |           alert("值不能为空");
59 |           return;
60 |         }
61 |         const json = {id: data.id, content: data.content}
62 |         Patch(API.announcement.update)
63 |           .withJson(json)
64 |           .withSuccessCode(204)
65 |           .do(() => {
66 |             this.initialize();
67 |             alert('修改成功');
68 |           })
69 |       },
70 |       handleDelete(data) {
71 |         Delete(API.announcement.del + data.id)
72 |           .withSuccessCode(204)
73 |           .do(() => {
74 |             const index = this.data.indexOf(data)
75 |             this.data.splice(index, 1)
76 |             alert('删除成功');
77 |           })
78 |       }
79 |     },
80 |     created() {
81 |       this.initialize();
82 |     }
83 |   }
84 | </script>
85 | 
86 | <style scoped>
87 | 
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app id="inspire">
 3 |     <v-main>
 4 |       <v-container class="fill-height" fluid>
 5 |         <v-row align="center" justify="center">
 6 |           <v-col cols="12" sm="8" md="4">
 7 |             <v-card class="elevation-12">
 8 |               <v-toolbar color="primary" dark flat>
 9 |                 <v-toolbar-title>登陆系统</v-toolbar-title>
10 |               </v-toolbar>
11 |               <v-card-text>
12 |                 <v-form>
13 |                   <v-text-field v-model="loginInfo.username" label="用户名" name="login" prepend-icon="mdi-account"
14 |                                 type="text"/>
15 |                   <v-text-field v-model="loginInfo.password" label="密码" name="password" prepend-icon="mdi-lock"
16 |                                 type="password"/>
17 |                 </v-form>
18 |               </v-card-text>
19 |               <v-card-actions>
20 |                 <v-spacer/>
21 |                 <v-btn color="primary" @click="$router.push('/reg')">注册</v-btn>
22 |                 <v-btn color="primary" @click="login">登录</v-btn>
23 |               </v-card-actions>
24 |             </v-card>
25 |           </v-col>
26 |         </v-row>
27 |       </v-container>
28 |     </v-main>
29 |   </v-app>
30 | </template>
31 | 
32 | <script>
33 |   import {Post} from "@itning/axios-helper";
34 |   import {API} from "../api";
35 |   import {resolveToken} from "../user";
36 | 
37 |   export default {
38 |     name: "Login",
39 |     data() {
40 |       return {
41 |         loginInfo: {
42 |           username: '',
43 |           password: ''
44 |         }
45 |       }
46 |     },
47 |     methods: {
48 |       login() {
49 |         if (!this.loginInfo.username || !this.loginInfo.password
50 |           || this.loginInfo.username.trim() === '' || this.loginInfo.password.trim() === '') {
51 |           return;
52 |         }
53 |         Post(API.security.login)
54 |           .withURLSearchParams(this.loginInfo)
55 |           .withSuccessCode(200)
56 |           .withErrorStartMsg("登录失败")
57 |           .do(response => {
58 |             window.localStorage.setItem('authorization_token', response.data.data);
59 |             const loginUser = resolveToken(response.data.data);
60 |             switch (loginUser.roleId) {
61 |               case 'a': {
62 |                 this.$router.push('/admin');
63 |                 break;
64 |               }
65 |               case 'b': {
66 |                 this.$router.push('/teacher');
67 |                 break;
68 |               }
69 |               case 'c': {
70 |                 this.$router.push('/student');
71 |                 break;
72 |               }
73 |               default: {
74 |                 console.warn(loginUser)
75 |                 alert("未知角色");
76 |               }
77 |             }
78 |           })
79 |       }
80 |     }
81 |   }
82 | </script>
83 | 
84 | <style scoped>
85 | 
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/views/teacher/Subject.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <crud-table title="科目管理" :headers="headers" :data="data" :data-loading="isLoading"
 4 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
 5 |       <template v-slot="{editedItem,isModify}">
 6 |         <v-row>
 7 |           <v-col cols="12">
 8 |             <v-text-field v-model="editedItem.name" label="科目名"></v-text-field>
 9 |           </v-col>
10 |         </v-row>
11 |       </template>
12 |     </crud-table>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import CrudTable from "../../components/CrudTable";
18 |   import {API} from "../../api";
19 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
20 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
21 | 
22 |   export default {
23 |     name: "Subject",
24 |     components: {CrudTable},
25 |     data: () => ({
26 |       isLoading: false,
27 |       headers: [
28 |         {text: '科目', align: 'start', value: 'name',},
29 |         {text: '创建时间', value: 'gmtCreate'},
30 |         {text: '修改时间', value: 'gmtModified'},
31 |         {text: '操作', value: 'actions', sortable: false},
32 |       ],
33 |       data: []
34 |     }),
35 |     methods: {
36 |       initialize() {
37 |         this.isLoading = true;
38 |         Get(API.subject.all)
39 |           .withSuccessCode(200)
40 |           .do(response => {
41 |             this.data = formatResponseDateTime(response.data.data)
42 |           })
43 |           .doAfter(() => {
44 |             this.isLoading = false;
45 |           });
46 |       },
47 |       handleSave(data) {
48 |         if (!data.name || data.name.trim() === '') {
49 |           alert("值不能为空");
50 |           return;
51 |         }
52 |         Post(API.subject.add)
53 |           .withURLSearchParams(data)
54 |           .withSuccessCode(201)
55 |           .do(response => {
56 |             this.data.push(formatItemResponseDateTime(response.data.data))
57 |             alert('新增成功');
58 |           })
59 |       },
60 |       handleUpdate(data, index) {
61 |         if (!data.name || data.name.trim() === '') {
62 |           alert("值不能为空");
63 |           return;
64 |         }
65 |         const json = {id: data.id, name: data.name}
66 |         Patch(API.subject.update)
67 |           .withJson(json)
68 |           .withSuccessCode(204)
69 |           .do(() => {
70 |             this.initialize();
71 |             alert('修改成功');
72 |           })
73 |       },
74 |       handleDelete(data) {
75 |         Delete(API.subject.del + data.id)
76 |           .withSuccessCode(204)
77 |           .do(() => {
78 |             const index = this.data.indexOf(data)
79 |             this.data.splice(index, 1)
80 |             alert('删除成功');
81 |           })
82 |       }
83 |     },
84 |     created() {
85 |       this.initialize();
86 |     }
87 |   }
88 | </script>
89 | 
90 | <style scoped>
91 | 
92 | </style>
93 | 


--------------------------------------------------------------------------------
/src/views/teacher/Clazz.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <crud-table title="班级管理" :headers="headers" :data="data" :data-loading="isLoading"
 4 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
 5 |       <template v-slot="{editedItem,isModify}">
 6 |         <v-row>
 7 |           <v-col cols="12">
 8 |             <v-text-field v-model="editedItem.name" label="班名"></v-text-field>
 9 |           </v-col>
10 |         </v-row>
11 |       </template>
12 |     </crud-table>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import CrudTable from "../../components/CrudTable";
18 |   import {API} from "../../api";
19 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
20 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
21 | 
22 |   export default {
23 |     name: "Clazz",
24 |     components: {CrudTable},
25 |     data: () => ({
26 |       isLoading: false,
27 |       headers: [
28 |         {text: '班级', align: 'start', value: 'name',},
29 |         {text: '创建时间', value: 'gmtCreate'},
30 |         {text: '修改时间', value: 'gmtModified'},
31 |         {text: '操作', value: 'actions', sortable: false},
32 |       ],
33 |       data: []
34 |     }),
35 |     methods: {
36 |       initialize() {
37 |         this.isLoading = true;
38 |         Get(API.studentClass.all)
39 |           .withSuccessCode(200)
40 |           .do(response => {
41 |             this.data = formatResponseDateTime(response.data.data)
42 |           })
43 |           .doAfter(() => {
44 |             this.isLoading = false;
45 |           });
46 |       },
47 |       handleSave(data) {
48 |         if (!data.name || data.name.trim() === '') {
49 |           alert("值不能为空");
50 |           return;
51 |         }
52 |         Post(API.studentClass.add)
53 |           .withURLSearchParams(data)
54 |           .withSuccessCode(201)
55 |           .do(response => {
56 |             this.data.push(formatItemResponseDateTime(response.data.data))
57 |             alert('新增成功');
58 |           })
59 |       },
60 |       handleUpdate(data, index) {
61 |         if (!data.name || data.name.trim() === '') {
62 |           alert("值不能为空");
63 |           return;
64 |         }
65 |         const json = {id: data.id, name: data.name}
66 |         Patch(API.studentClass.update)
67 |           .withJson(json)
68 |           .withSuccessCode(204)
69 |           .do(() => {
70 |             this.initialize();
71 |             alert('修改成功');
72 |           })
73 |       },
74 |       handleDelete(data) {
75 |         Delete(API.studentClass.del + data.id)
76 |           .withSuccessCode(204)
77 |           .do(() => {
78 |             const index = this.data.indexOf(data)
79 |             this.data.splice(index, 1)
80 |             alert('删除成功');
81 |           })
82 |       }
83 |     },
84 |     created() {
85 |       this.initialize();
86 |     }
87 |   }
88 | </script>
89 | 
90 | <style scoped>
91 | 
92 | </style>
93 | 


--------------------------------------------------------------------------------
/src/views/Reg.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app id="inspire">
 3 |     <v-main>
 4 |       <v-container class="fill-height" fluid>
 5 |         <v-row align="center" justify="center">
 6 |           <v-col cols="12" sm="8" md="4">
 7 |             <v-card class="elevation-12">
 8 |               <v-toolbar color="primary" dark flat>
 9 |                 <v-toolbar-title>注册系统</v-toolbar-title>
10 |               </v-toolbar>
11 |               <v-card-text>
12 |                 <v-form>
13 |                   <v-text-field v-model="reg.name" label="姓名" name="name" prepend-icon="mdi-account-circle"
14 |                                 type="text"/>
15 |                   <v-text-field v-model="reg.username" label="用户名" name="username" prepend-icon="mdi-account"
16 |                                 type="text"/>
17 |                   <v-text-field v-model="reg.password" label="密码" name="password" prepend-icon="mdi-lock"
18 |                                 type="password"/>
19 |                   <v-autocomplete prepend-icon="mdi-book-variant" label="班级" v-model="reg.studentClassId"
20 |                                   :items="classes"></v-autocomplete>
21 |                 </v-form>
22 |               </v-card-text>
23 |               <v-card-actions>
24 |                 <v-spacer/>
25 |                 <v-btn color="primary" @click="doReg">注册</v-btn>
26 |               </v-card-actions>
27 |             </v-card>
28 |           </v-col>
29 |         </v-row>
30 |       </v-container>
31 |     </v-main>
32 |   </v-app>
33 | </template>
34 | 
35 | <script>
36 |   import {Get, Post} from "@itning/axios-helper";
37 |   import {API} from "../api";
38 | 
39 |   export default {
40 |     name: "Reg",
41 |     data() {
42 |       return {
43 |         reg: {},
44 |         classes: []
45 |       }
46 |     },
47 |     methods: {
48 |       doReg() {
49 |         if (!this.reg.name || !this.reg.username || !this.reg.password || !this.reg.studentClassId ||
50 |           this.reg.name.trim() === '' || this.reg.username.trim() === '' || this.reg.password.trim() === '' || this.reg.studentClassId.trim() === '') {
51 |           alert('值为空');
52 |           return;
53 |         }
54 |         Post(API.security.reg)
55 |           .withSuccessCode(201)
56 |           .withURLSearchParams(this.reg)
57 |           .do(response => {
58 |             alert('注册成功');
59 |             this.$router.push('/login');
60 |           })
61 |       },
62 |       initClasses() {
63 |         Get(API.studentClass.allWithTeacherName)
64 |           .withSuccessCode(200)
65 |           .do(response => {
66 |             this.classes = response.data.data.map(item => {
67 |               item.text = `${item.name} ${item.teacherName}`;
68 |               item.value = item.id;
69 |               return item;
70 |             })
71 |           })
72 |       }
73 |     },
74 |     created() {
75 |       this.initClasses();
76 |     }
77 |   }
78 | </script>
79 | 
80 | <style scoped>
81 | 
82 | </style>
83 | 


--------------------------------------------------------------------------------
/src/views/teacher/Examination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <crud-table title="考试管理" :headers="headers" :data="data" :data-loading="isLoading"
 4 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
 5 |       <template v-slot="{editedItem,isModify}">
 6 |         <v-row>
 7 |           <v-col cols="12">
 8 |             <v-text-field v-model="editedItem.name" label="考试信息"></v-text-field>
 9 |           </v-col>
10 |         </v-row>
11 |       </template>
12 |     </crud-table>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import CrudTable from "../../components/CrudTable";
18 |   import {API} from "../../api";
19 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
20 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
21 | 
22 |   export default {
23 |     name: "Examination",
24 |     components: {CrudTable},
25 |     data: () => ({
26 |       isLoading: false,
27 |       headers: [
28 |         {text: '考试', align: 'start', value: 'name',},
29 |         {text: '创建时间', value: 'gmtCreate'},
30 |         {text: '修改时间', value: 'gmtModified'},
31 |         {text: '操作', value: 'actions', sortable: false},
32 |       ],
33 |       data: []
34 |     }),
35 |     methods: {
36 |       initialize() {
37 |         this.isLoading = true;
38 |         Get(API.examination.all)
39 |           .withSuccessCode(200)
40 |           .do(response => {
41 |             this.data = formatResponseDateTime(response.data.data)
42 |           })
43 |           .doAfter(() => {
44 |             this.isLoading = false;
45 |           });
46 |       },
47 |       handleSave(data) {
48 |         if (!data.name || data.name.trim() === '') {
49 |           alert("值不能为空");
50 |           return;
51 |         }
52 |         Post(API.examination.add)
53 |           .withURLSearchParams(data)
54 |           .withSuccessCode(201)
55 |           .do(response => {
56 |             this.data.push(formatItemResponseDateTime(response.data.data))
57 |             alert('新增成功');
58 |           })
59 |       },
60 |       handleUpdate(data, index) {
61 |         if (!data.name || data.name.trim() === '') {
62 |           alert("值不能为空");
63 |           return;
64 |         }
65 |         const json = {id: data.id, name: data.name}
66 |         Patch(API.examination.update)
67 |           .withJson(json)
68 |           .withSuccessCode(204)
69 |           .do(() => {
70 |             this.initialize();
71 |             alert('修改成功');
72 |           })
73 |       },
74 |       handleDelete(data) {
75 |         Delete(API.examination.del + data.id)
76 |           .withSuccessCode(204)
77 |           .do(() => {
78 |             const index = this.data.indexOf(data)
79 |             this.data.splice(index, 1)
80 |             alert('删除成功');
81 |           })
82 |       }
83 |     },
84 |     created() {
85 |       this.initialize();
86 |     }
87 |   }
88 | </script>
89 | 
90 | <style scoped>
91 | 
92 | </style>
93 | 


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
 1 | export const SERVER_HOST = "http://localhost:8888";
 2 | export const API = {
 3 |   teacher: {
 4 |     all: `${SERVER_HOST}/teachers`,
 5 |     add: `${SERVER_HOST}/teacher`
 6 |   },
 7 |   student: {
 8 |     all: `${SERVER_HOST}/students`
 9 |   },
10 |   user: {
11 |     del: `${SERVER_HOST}/user/`,
12 |     update: `${SERVER_HOST}/user`
13 |   },
14 |   security: {
15 |     login: `${SERVER_HOST}/security/login`,
16 |     reg: `${SERVER_HOST}/security/reg`
17 |   },
18 |   announcement: {
19 |     all: `${SERVER_HOST}/announcements`,
20 |     add: `${SERVER_HOST}/announcement`,
21 |     del: `${SERVER_HOST}/announcement/`,
22 |     update: `${SERVER_HOST}/announcement`
23 |   },
24 |   attendance: {
25 |     all: `${SERVER_HOST}/attendances`,
26 |     del: `${SERVER_HOST}/attendance/`,
27 |     addByAdmin: `${SERVER_HOST}/attendance_admin`,
28 |     add: `${SERVER_HOST}/attendance`,
29 |     update: `${SERVER_HOST}/attendance_change`
30 |   },
31 |   studentClass: {
32 |     allWithTeacherName: `${SERVER_HOST}/classes`,
33 |     all: `${SERVER_HOST}/student_classes`,
34 |     add: `${SERVER_HOST}/student_class`,
35 |     del: `${SERVER_HOST}/student_class/`,
36 |     update: `${SERVER_HOST}/student_class`,
37 |     allStudentInClass: `${SERVER_HOST}/student_in_class`,
38 |     studentOwnClass: `${SERVER_HOST}/my_classes`,
39 |     joinClass: `${SERVER_HOST}/join_class`
40 |   },
41 |   subject: {
42 |     all: `${SERVER_HOST}/subjects`,
43 |     add: `${SERVER_HOST}/subject`,
44 |     del: `${SERVER_HOST}/subject/`,
45 |     update: `${SERVER_HOST}/subject`
46 |   },
47 |   examination: {
48 |     all: `${SERVER_HOST}/examinations`,
49 |     add: `${SERVER_HOST}/examination`,
50 |     del: `${SERVER_HOST}/examination/`,
51 |     update: `${SERVER_HOST}/examination`
52 |   },
53 |   examinationScore: {
54 |     all: `${SERVER_HOST}/examination_scores`,
55 |     add: `${SERVER_HOST}/examination_score`,
56 |     del: `${SERVER_HOST}/examination_score/`,
57 |     update: `${SERVER_HOST}/examination_score`,
58 |     studentOwn: `${SERVER_HOST}/examination_score_student`
59 |   },
60 |   learningContent: {
61 |     all: `${SERVER_HOST}/learning_contents`,
62 |     add: `${SERVER_HOST}/learning_content`,
63 |     del: `${SERVER_HOST}/learning_content/`,
64 |     update: `${SERVER_HOST}/learning_content`,
65 |     allCanStudy: `${SERVER_HOST}/learning_content_of_student`,
66 |     download: `${SERVER_HOST}/download_learning_content/`
67 |   },
68 |   studentLearning: {
69 |     allByTeacher: `${SERVER_HOST}/student_learning_teacher`,
70 |     all: `${SERVER_HOST}/student_learning`,
71 |     del: `${SERVER_HOST}/student_learning/`,
72 |     add: `${SERVER_HOST}/student_learning`
73 |   },
74 |   studentWork: {
75 |     review: `${SERVER_HOST}/student_work_review`,
76 |     download: `${SERVER_HOST}/download_student_work/`,
77 |     own: `${SERVER_HOST}/student_work`,
78 |     upload: `${SERVER_HOST}/student_work`
79 |   },
80 |   teacherInfo: {
81 |     all: `${SERVER_HOST}/teacher_infos`,
82 |     add: `${SERVER_HOST}/teacher_info`,
83 |     del: `${SERVER_HOST}/teacher_info/`,
84 |     update: `${SERVER_HOST}/teacher_info`
85 |   },
86 |   log: `${SERVER_HOST}/system_log`
87 | }
88 | 


--------------------------------------------------------------------------------
/src/views/teacher/PersonalInformation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <crud-table title="个人信息" :headers="headers" :data="data" :data-loading="isLoading"
 4 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
 5 |       <template v-slot="{editedItem,isModify}">
 6 |         <v-row>
 7 |           <v-col cols="6">
 8 |             <v-text-field v-model="editedItem.attributeKey" label="属性"></v-text-field>
 9 |           </v-col>
10 |           <v-col cols="6">
11 |             <v-text-field v-model="editedItem.attributeValue" label="值"></v-text-field>
12 |           </v-col>
13 |         </v-row>
14 |       </template>
15 |     </crud-table>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 |   import CrudTable from "../../components/CrudTable";
21 |   import {API} from "../../api";
22 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
23 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
24 | 
25 |   export default {
26 |     name: "PersonalInformation",
27 |     components: {CrudTable},
28 |     data: () => ({
29 |       isLoading: false,
30 |       headers: [
31 |         {text: '属性', align: 'start', value: 'attributeKey',},
32 |         {text: '值', value: 'attributeValue'},
33 |         {text: '创建时间', value: 'gmtCreate'},
34 |         {text: '修改时间', value: 'gmtModified'},
35 |         {text: '操作', value: 'actions', sortable: false},
36 |       ],
37 |       data: []
38 |     }),
39 |     methods: {
40 |       initialize() {
41 |         this.isLoading = true;
42 |         Get(API.teacherInfo.all)
43 |           .withSuccessCode(200)
44 |           .do(response => {
45 |             this.data = formatResponseDateTime(response.data.data)
46 |           })
47 |           .doAfter(() => {
48 |             this.isLoading = false;
49 |           });
50 |       },
51 |       handleSave(data) {
52 |         if (!data.attributeKey || data.attributeKey.trim() === '' ||
53 |           !data.attributeValue || data.attributeValue.trim() === '') {
54 |           alert("值不能为空");
55 |           return;
56 |         }
57 |         Post(API.teacherInfo.add)
58 |           .withURLSearchParams(data)
59 |           .withSuccessCode(201)
60 |           .do(response => {
61 |             this.data.push(formatItemResponseDateTime(response.data.data))
62 |             alert('新增成功');
63 |           })
64 |       },
65 |       handleUpdate(data, index) {
66 |         if (!data.attributeKey || data.attributeKey.trim() === '' ||
67 |           !data.attributeValue || data.attributeValue.trim() === '') {
68 |           alert("值不能为空");
69 |           return;
70 |         }
71 |         const json = {id: data.id, attributeKey: data.attributeKey, attributeValue: data.attributeValue}
72 |         Patch(API.teacherInfo.update)
73 |           .withJson(json)
74 |           .withSuccessCode(204)
75 |           .do(() => {
76 |             this.initialize();
77 |             alert('修改成功');
78 |           })
79 |       },
80 |       handleDelete(data) {
81 |         Delete(API.teacherInfo.del + data.id)
82 |           .withSuccessCode(204)
83 |           .do(() => {
84 |             const index = this.data.indexOf(data)
85 |             this.data.splice(index, 1)
86 |             alert('删除成功');
87 |           })
88 |       }
89 |     },
90 |     created() {
91 |       this.initialize();
92 |     }
93 |   }
94 | </script>
95 | 
96 | <style scoped>
97 | 
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/views/student/StudyContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <crud-table title="学习内容管理" :headers="headers" :data="data" :data-loading="isLoading"
  4 |                 :disable-edit="true" @delete="handleDelete" @save="handleSave">
  5 |       <template v-slot="{editedItem,isModify}">
  6 |         <v-row>
  7 |           <v-col cols="12">
  8 |             <v-select class="px-4" :items="canStudyLearningContent.data" label="选择学习内容"
  9 |                       :loading="canStudyLearningContent.loading"
 10 |                       v-model="canStudyLearningContent.nowSelectId"></v-select>
 11 |           </v-col>
 12 |         </v-row>
 13 |       </template>
 14 |     </crud-table>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 |   import CrudTable from "../../components/CrudTable";
 20 |   import {Delete, Get, Post} from "@itning/axios-helper";
 21 |   import {API} from "../../api";
 22 |   import {formatDateTime, formatResponseDateTime} from "../../util";
 23 | 
 24 |   export default {
 25 |     name: "StudyContent",
 26 |     components: {CrudTable},
 27 |     data() {
 28 |       return {
 29 |         isLoading: false,
 30 |         headers: [
 31 |           {text: '名称', align: 'start', value: 'name',},
 32 |           {text: '选择时间', value: 'chooseDate',},
 33 |           {text: '操作', value: 'actions', sortable: false},
 34 |         ],
 35 |         data: [],
 36 |         canStudyLearningContent: {
 37 |           data: [],
 38 |           loading: false,
 39 |           nowSelectId: null
 40 |         }
 41 |       }
 42 |     },
 43 |     methods: {
 44 |       handleSave() {
 45 |         if (!this.canStudyLearningContent.nowSelectId) {
 46 |           alert('请选择学习内容');
 47 |           return;
 48 |         }
 49 |         Post(API.studentLearning.add)
 50 |           .withSuccessCode(201)
 51 |           .withURLSearchParams({learningContentId: this.canStudyLearningContent.nowSelectId})
 52 |           .do(() => {
 53 |             this.initialize();
 54 |             this.initAllCanStudy();
 55 |             alert('选择成功');
 56 |           })
 57 |       },
 58 |       handleDelete(data) {
 59 |         Delete(API.studentLearning.del + data.studentLearningId)
 60 |           .withSuccessCode(204)
 61 |           .do(() => {
 62 |             const index = this.data.indexOf(data)
 63 |             this.data.splice(index, 1);
 64 |             this.initAllCanStudy();
 65 |             alert('删除成功');
 66 |           })
 67 |       },
 68 |       initAllCanStudy() {
 69 |         Get(API.learningContent.allCanStudy)
 70 |           .withSuccessCode(200)
 71 |           .do(response => {
 72 |             this.canStudyLearningContent.data = response.data.data.map(item => {
 73 |               item.text = item.name;
 74 |               item.value = item.id;
 75 |               return item;
 76 |             });
 77 |           })
 78 |       },
 79 |       initialize() {
 80 |         Get(API.studentLearning.all)
 81 |           .withSuccessCode(200)
 82 |           .do(response => {
 83 |             this.data = formatResponseDateTime(response.data.data).map(item => {
 84 |               item.chooseDate = formatDateTime(item.chooseDate);
 85 |               return item;
 86 |             });
 87 |           })
 88 |       }
 89 |     },
 90 |     created() {
 91 |       this.initialize();
 92 |       this.initAllCanStudy();
 93 |     }
 94 |   }
 95 | </script>
 96 | 
 97 | <style scoped>
 98 | 
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/components/CrudTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-data-table :headers="headers" :items="data" :search="search"
  3 |                 :disable-sort="disableSort" :loading="dataLoading">
  4 |     <template v-slot:top>
  5 |       <v-toolbar flat color="white">
  6 |         <v-toolbar-title>{{title}}</v-toolbar-title>
  7 |         <v-divider class="mx-4" inset vertical></v-divider>
  8 |         <v-spacer></v-spacer>
  9 |         <v-text-field append-icon="mdi-magnify" v-model="search"
 10 |                       label="搜索" single-line hide-details></v-text-field>
 11 |         <v-divider v-if="!disableAdd" class="mx-4" inset vertical></v-divider>
 12 |         <v-dialog v-model="dialog" max-width="500px">
 13 |           <template v-slot:activator="{ on }">
 14 |             <v-btn v-show="!disableAdd" color="primary" dark class="mb-2" v-on="on">新增</v-btn>
 15 |           </template>
 16 |           <v-card>
 17 |             <v-card-title>
 18 |               <span class="headline">{{ formTitle }}</span>
 19 |             </v-card-title>
 20 |             <v-card-text>
 21 |               <v-container>
 22 |                 <slot :editedItem="editedItem" :isModify="editedIndex!==-1"></slot>
 23 |               </v-container>
 24 |             </v-card-text>
 25 |             <v-card-actions>
 26 |               <v-spacer></v-spacer>
 27 |               <v-btn color="blue darken-1" text @click="close">取消</v-btn>
 28 |               <v-btn color="blue darken-1" text @click="save">保存</v-btn>
 29 |             </v-card-actions>
 30 |           </v-card>
 31 |         </v-dialog>
 32 |       </v-toolbar>
 33 |     </template>
 34 |     <template v-slot:item.actions="{ item }" v-if="!disableDel||!disableEdit">
 35 |       <v-icon v-if="!disableEdit" small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
 36 |       <v-icon v-if="!disableDel" small @click="deleteItem(item)">mdi-delete</v-icon>
 37 |     </template>
 38 |   </v-data-table>
 39 | </template>
 40 | 
 41 | <script>
 42 |   export default {
 43 |     props: {
 44 |       // 标题
 45 |       title: String,
 46 |       // 表头
 47 |       headers: Array,
 48 |       // 数据
 49 |       data: Array,
 50 |       // 禁用排序
 51 |       disableSort: Boolean,
 52 |       // 数据加载中
 53 |       dataLoading: Boolean,
 54 |       // 禁用新增
 55 |       disableAdd: Boolean,
 56 |       // 禁用修改
 57 |       disableEdit: Boolean,
 58 |       // 禁用删除
 59 |       disableDel: Boolean
 60 |     },
 61 |     name: "CrudTable",
 62 |     data: () => ({
 63 |       dialog: false,
 64 |       editedIndex: -1,
 65 |       editedItem: {},
 66 |       defaultItem: {},
 67 |       search: ''
 68 |     }),
 69 |     computed: {
 70 |       formTitle() {
 71 |         return this.editedIndex === -1 ? '新增' : '修改'
 72 |       },
 73 |     },
 74 |     watch: {
 75 |       dialog(val) {
 76 |         val || this.close()
 77 |       },
 78 |     },
 79 |     methods: {
 80 |       editItem(item) {
 81 |         this.editedIndex = this.data.indexOf(item)
 82 |         this.editedItem = Object.assign({}, item)
 83 |         this.dialog = true
 84 |       },
 85 |       deleteItem(item) {
 86 |         if (confirm('确定删除该项？')) {
 87 |           this.$emit('delete', item);
 88 |         }
 89 |       },
 90 |       close() {
 91 |         this.dialog = false
 92 |         this.$nextTick(() => {
 93 |           this.editedItem = Object.assign({}, this.defaultItem)
 94 |           this.editedIndex = -1
 95 |         })
 96 |       },
 97 |       save() {
 98 |         if (this.editedIndex > -1) {
 99 |           this.$emit('update', this.editedItem, this.editedIndex);
100 |         } else {
101 |           this.$emit('save', this.editedItem);
102 |         }
103 |         this.close()
104 |       },
105 |     }
106 |   }
107 | </script>
108 | 
109 | <style scoped>
110 | 
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/views/admin/TeacherManagement.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <crud-table title="教师管理" :headers="headers" :data="data" :data-loading="isLoading"
  4 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
  5 |       <template v-slot="{editedItem,isModify}">
  6 |         <v-row>
  7 |           <v-col cols="6">
  8 |             <v-text-field v-model="editedItem.name" label="姓名"></v-text-field>
  9 |           </v-col>
 10 |           <v-col cols="6" v-if="!isModify">
 11 |             <v-text-field v-model="editedItem.username" label="用户名"></v-text-field>
 12 |           </v-col>
 13 |           <v-col cols="6" v-if="isModify">
 14 |             <v-switch v-model="editedItem.freeze" :label="`冻结：${editedItem.freeze?'√':'×'}`"></v-switch>
 15 |           </v-col>
 16 |         </v-row>
 17 |       </template>
 18 |     </crud-table>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 |   import CrudTable from "../../components/CrudTable";
 24 |   import {API} from "../../api";
 25 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
 26 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
 27 | 
 28 |   export default {
 29 |     name: "TeacherManagement",
 30 |     components: {CrudTable},
 31 |     data: () => ({
 32 |       isLoading: false,
 33 |       headers: [
 34 |         {text: '姓名', align: 'start', value: 'name',},
 35 |         {text: '账户状态', value: 'freeze_format'},
 36 |         {text: '创建时间', value: 'gmtCreate'},
 37 |         {text: '修改时间', value: 'gmtModified'},
 38 |         {text: '操作', value: 'actions', sortable: false},
 39 |       ],
 40 |       data: []
 41 |     }),
 42 |     methods: {
 43 |       initialize() {
 44 |         this.isLoading = true;
 45 |         Get(API.teacher.all)
 46 |           .withSuccessCode(200)
 47 |           .do(response => {
 48 |             this.data = formatResponseDateTime(response.data.data).map(item => {
 49 |               item.freeze_format = item.freeze ? '冻结' : '可用';
 50 |               return item;
 51 |             });
 52 |           })
 53 |           .doAfter(() => {
 54 |             this.isLoading = false;
 55 |           });
 56 |       },
 57 |       handleSave(data) {
 58 |         if (!data.name || !data.username
 59 |           || data.name.trim() === '' || data.username.trim() === '') {
 60 |           alert("值不能为空");
 61 |           return;
 62 |         }
 63 |         Post(API.teacher.add)
 64 |           .withURLSearchParams(data)
 65 |           .withSuccessCode(201)
 66 |           .do(response => {
 67 |             const i = formatItemResponseDateTime(response.data.data);
 68 |             i.freeze_format = i.freeze ? '冻结' : '可用';
 69 |             this.data.push(i)
 70 |             alert('新增成功');
 71 |           })
 72 |       },
 73 |       handleUpdate(data, index) {
 74 |         if (!data.name || !data.username
 75 |           || data.name.trim() === '' || data.username.trim() === '') {
 76 |           alert("值不能为空");
 77 |           return;
 78 |         }
 79 |         const json = {id: data.id, name: data.name, username: data.username, freeze: data.freeze}
 80 |         Patch(API.user.update)
 81 |           .withJson(json)
 82 |           .withSuccessCode(204)
 83 |           .do(() => {
 84 |             this.initialize();
 85 |             alert('修改成功');
 86 |           })
 87 |       },
 88 |       handleDelete(data) {
 89 |         Delete(API.user.del + data.id)
 90 |           .withSuccessCode(204)
 91 |           .do(() => {
 92 |             const index = this.data.indexOf(data)
 93 |             this.data.splice(index, 1)
 94 |             alert('删除成功');
 95 |           })
 96 |       }
 97 |     },
 98 |     created() {
 99 |       this.initialize();
100 |     }
101 |   }
102 | </script>
103 | 
104 | <style scoped>
105 | 
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/views/student/MyClass.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-card class="mx-auto" max-width="344">
  4 |       <v-card-title>我的班级</v-card-title>
  5 |       <v-card-text>
  6 |         <div v-if="classData.name">
  7 |           <div class="text--primary">班名：{{classData.name}}</div>
  8 |           <div class="text--primary">教师：{{classData.teacherName}}</div>
  9 |           <div class="text--primary">加入时间：{{classData.gmtCreate}}</div>
 10 |         </div>
 11 |         <div v-else>
 12 |           请单击下面按钮选择加入班级
 13 |         </div>
 14 |       </v-card-text>
 15 |       <v-card-actions>
 16 |         <v-btn color="primary" @click="showChangeClassDialog">
 17 |           {{classData.name?'重新选择班级':'加入班级'}}
 18 |         </v-btn>
 19 |       </v-card-actions>
 20 |     </v-card>
 21 |     <v-dialog v-model="isChangeClassDialogVisible" persistent max-width="600px">
 22 |       <v-card>
 23 |         <v-card-title>
 24 |           <span class="headline">选择班级</span>
 25 |         </v-card-title>
 26 |         <v-card-text>
 27 |           <v-container>
 28 |             <v-row>
 29 |               <v-col cols="12">
 30 |                 <v-select class="px-4" :items="allClass" label="选择班级" v-model="nowSelectClassId"></v-select>
 31 |               </v-col>
 32 |             </v-row>
 33 |           </v-container>
 34 |         </v-card-text>
 35 |         <v-card-actions>
 36 |           <v-spacer></v-spacer>
 37 |           <v-btn color="blue darken-1" text @click="isChangeClassDialogVisible = false">关闭</v-btn>
 38 |           <v-btn color="blue darken-1" text @click="changeClass">保存</v-btn>
 39 |         </v-card-actions>
 40 |       </v-card>
 41 |     </v-dialog>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 |   import {API} from "../../api";
 47 |   import {Get, Post} from "@itning/axios-helper";
 48 |   import {formatItemResponseDateTime} from "../../util";
 49 | 
 50 |   export default {
 51 |     name: "MyClass",
 52 |     data() {
 53 |       return {
 54 |         isChangeClassDialogVisible: false,
 55 |         classData: {},
 56 |         allClass: [],
 57 |         nowSelectClassId: null
 58 |       }
 59 |     },
 60 |     methods: {
 61 |       showChangeClassDialog() {
 62 |         if (this.classData) {
 63 |           this.allClass = this.allClass.filter(item => item.id !== this.classData.id);
 64 |         }
 65 |         this.isChangeClassDialogVisible = true;
 66 |       },
 67 |       changeClass() {
 68 |         if (!this.nowSelectClassId) {
 69 |           alert('请选择班级');
 70 |           return;
 71 |         }
 72 |         Post(API.studentClass.joinClass)
 73 |           .withSuccessCode(201)
 74 |           .withURLSearchParams({classId: this.nowSelectClassId})
 75 |           .do(() => {
 76 |             this.initAllClass();
 77 |             this.initOwnClass();
 78 |             this.isChangeClassDialogVisible = false;
 79 |             alert('换班成功');
 80 |           })
 81 |       },
 82 |       initOwnClass() {
 83 |         Get(API.studentClass.studentOwnClass)
 84 |           .withSuccessCode(200)
 85 |           .do(response => {
 86 |             if (response.data.data) {
 87 |               this.classData = formatItemResponseDateTime(response.data.data);
 88 |             }
 89 |           })
 90 |       },
 91 |       initAllClass() {
 92 |         Get(API.studentClass.allWithTeacherName)
 93 |           .withSuccessCode(200)
 94 |           .do(response => {
 95 |             this.allClass = response.data.data.map(item => {
 96 |               item.text = item.name;
 97 |               item.value = item.id;
 98 |               return item;
 99 |             });
100 |           })
101 |       }
102 |     },
103 |     created() {
104 |       this.initAllClass();
105 |       this.initOwnClass();
106 |     }
107 |   }
108 | </script>
109 | 
110 | <style scoped>
111 | 
112 | </style>
113 | 


--------------------------------------------------------------------------------
/src/views/admin/StudentManagement.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <crud-table title="学生管理" :headers="headers" :data="data" :data-loading="isLoading" :disable-add="true"
  4 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
  5 |       <template v-slot="{editedItem,isModify}">
  6 |         <v-row>
  7 |           <v-col cols="6">
  8 |             <v-text-field v-model="editedItem.name" label="姓名"></v-text-field>
  9 |           </v-col>
 10 |           <v-col cols="6" v-if="!isModify">
 11 |             <v-text-field v-model="editedItem.username" label="用户名"></v-text-field>
 12 |           </v-col>
 13 |           <v-col cols="6" v-if="isModify">
 14 |             <v-switch v-model="editedItem.freeze" :label="`冻结：${editedItem.freeze?'√':'×'}`"></v-switch>
 15 |           </v-col>
 16 |         </v-row>
 17 |       </template>
 18 |     </crud-table>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 |   import CrudTable from "../../components/CrudTable";
 24 |   import {API} from "../../api";
 25 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
 26 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
 27 | 
 28 |   export default {
 29 |     name: "StudentManagement",
 30 |     components: {CrudTable},
 31 |     data: () => ({
 32 |       isLoading: false,
 33 |       headers: [
 34 |         {text: '姓名', align: 'start', value: 'name',},
 35 |         {text: '账户状态', value: 'freeze_format'},
 36 |         {text: '创建时间', value: 'gmtCreate'},
 37 |         {text: '修改时间', value: 'gmtModified'},
 38 |         {text: '操作', value: 'actions', sortable: false},
 39 |       ],
 40 |       data: []
 41 |     }),
 42 |     methods: {
 43 |       initialize() {
 44 |         this.isLoading = true;
 45 |         Get(API.student.all)
 46 |           .withSuccessCode(200)
 47 |           .do(response => {
 48 |             this.data = formatResponseDateTime(response.data.data).map(item => {
 49 |               item.freeze_format = item.freeze ? '冻结' : '可用';
 50 |               return item;
 51 |             });
 52 |           })
 53 |           .doAfter(() => {
 54 |             this.isLoading = false;
 55 |           });
 56 |       },
 57 |       handleSave(data) {
 58 |         if (!data.name || !data.username
 59 |           || data.name.trim() === '' || data.username.trim() === '') {
 60 |           alert("值不能为空");
 61 |           return;
 62 |         }
 63 |         Post(API.teacher.add)
 64 |           .withURLSearchParams(data)
 65 |           .withSuccessCode(201)
 66 |           .do(response => {
 67 |             const i = formatItemResponseDateTime(response.data.data);
 68 |             i.freeze_format = i.freeze ? '冻结' : '可用';
 69 |             this.data.push(i)
 70 |             alert('新增成功');
 71 |           })
 72 |       },
 73 |       handleUpdate(data, index) {
 74 |         if (!data.name || !data.username
 75 |           || data.name.trim() === '' || data.username.trim() === '') {
 76 |           alert("值不能为空");
 77 |           return;
 78 |         }
 79 |         const json = {id: data.id, name: data.name, username: data.username, freeze: data.freeze}
 80 |         Patch(API.user.update)
 81 |           .withJson(json)
 82 |           .withSuccessCode(204)
 83 |           .do(() => {
 84 |             this.initialize();
 85 |             alert('修改成功');
 86 |           })
 87 |       },
 88 |       handleDelete(data) {
 89 |         Delete(API.user.del + data.id)
 90 |           .withSuccessCode(204)
 91 |           .do(() => {
 92 |             const index = this.data.indexOf(data)
 93 |             this.data.splice(index, 1)
 94 |             alert('删除成功');
 95 |           })
 96 |       }
 97 |     },
 98 |     created() {
 99 |       this.initialize();
100 |     }
101 |   }
102 | </script>
103 | 
104 | <style scoped>
105 | 
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/components/VueMarquee.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex-row">
  3 |     <div v-if="marqueeList.length > 0">
  4 |       <div class="flex-row">
  5 |         <div class="marque-wrap" :style="stylesWrap">
  6 |           <div class="list" :style="styles">
  7 |             <div v-for="(item, index) in marqueeList" :key="index" :style="stylesItem" class="item">
  8 |               {{item}}
  9 |             </div>
 10 |             <!-- 最后一个元素和第一个相同 -->
 11 |             <div v-if="marqueeList.length > 0" :style="stylesItem" class="item">
 12 |               {{marqueeList[0]}}
 13 |             </div>
 14 |           </div>
 15 |         </div>
 16 |       </div>
 17 |     </div>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 |   const regNumber = /^\d+$/
 23 |   export default {
 24 |     name: 'VueMarquee',
 25 |     data() {
 26 |       return {
 27 |         indexMq: 0,
 28 |         timer: null,
 29 |         // 运动
 30 |         styles: {
 31 |           top: 0,
 32 |           transitionDuration: 0
 33 |         },
 34 |         // wrap样式
 35 |         stylesWrap: {
 36 |           width: this.width + 'px',
 37 |           height: this.height + 'px',
 38 |         },
 39 |         // item样式
 40 |         stylesItem: {
 41 |           height: this.height + 'px',
 42 |           lineHeight: this.height + 'px',
 43 |           fontSize: this.fontSize + 'px'
 44 |         }
 45 |       }
 46 |     },
 47 |     props: {
 48 |       // 	宽度（px）
 49 |       width: {
 50 |         validator(val) {
 51 |           return regNumber.test(val)
 52 |         },
 53 |         default: 200
 54 |       },
 55 |       // 	高度（px）
 56 |       height: {
 57 |         validator(val) {
 58 |           return regNumber.test(val)
 59 |         },
 60 |         default: 38
 61 |       },
 62 |       // fontSize (px)
 63 |       fontSize: {
 64 |         validator(val) {
 65 |           return regNumber.test(val)
 66 |         },
 67 |         default: 12
 68 |       },
 69 |       // 	自动播放时间（毫秒）
 70 |       autoplay: {
 71 |         validator(val) {
 72 |           return regNumber.test(val)
 73 |         },
 74 |         default: 3000
 75 |       },
 76 |       // 	切换速度（毫秒）
 77 |       speed: {
 78 |         validator(val) {
 79 |           return regNumber.test(val)
 80 |         },
 81 |         default: 500
 82 |       },
 83 |       marqueeList: Array
 84 |     },
 85 |     computed: {
 86 |       lenMq() {
 87 |         return this.marqueeList ? this.marqueeList.length : 0
 88 |       }
 89 |     },
 90 |     methods: {
 91 |       setTop(speed, top) {
 92 |         this.styles.transitionDuration = speed + 'ms'
 93 |         this.styles.top = top + 'px'
 94 |       }
 95 |     },
 96 |     mounted() {
 97 |       // 当前新1个
 98 |       // 1.跑马灯无缝循环播放原理：轮播到最后一个的时候，轮播新1而不是老1。
 99 |       // 2.轮播到新1后，结束动画后，让老一瞬间就到新一的位置（此应用内联css实现，不得用class实现，因为动态添加class，class再获取样式需要一定时间）
100 |       // 3.以下代码实现，只能往当前的indexMq后面添加数据。若往前传数据，对应的indexMq得加瞬间加到对应位置（处理比较复杂）
101 |       this.timer = setInterval(() => {
102 |         this.setTop(this.speed, -(++this.indexMq * this.height))
103 |         if (this.indexMq >= this.lenMq) {
104 |           // 若当前是新1(最後一個)，
105 |           setTimeout(() => {
106 |             // 瞬间回到老1（第一个）
107 |             this.indexMq = 0
108 |             this.setTop(0, 0)
109 |           }, this.speed)
110 |         }
111 |       }, this.autoplay)
112 |     },
113 |     destroyed() {
114 |       clearInterval(this.timer)
115 |       this.timer = null
116 |       this.indexMq = 0
117 |     }
118 |   }
119 | </script>
120 | 
121 | <style scoped>
122 |   .flex-row {
123 |     display: flex;
124 |     justify-content: space-between;
125 |     align-items: center;
126 |   }
127 | 
128 |   .marque-wrap {
129 |     overflow: hidden;
130 |     position: relative;
131 |   }
132 | 
133 |   .list {
134 |     position: absolute;
135 |     left: 0;
136 |     top: 0;
137 |   }
138 | 
139 |   .item {
140 |     margin-left: 12px;
141 | 
142 |     overflow: hidden;
143 |   }
144 | </style>
145 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 自学平台系统
  2 | 
  3 | [![GitHub stars](https://img.shields.io/github/stars/itning/self-learning-platform-client.svg?style=social&label=Stars)](https://github.com/itning/self-learning-platform-client/stargazers)
  4 | [![GitHub forks](https://img.shields.io/github/forks/itning/self-learning-platform-client.svg?style=social&label=Fork)](https://github.com/itning/self-learning-platform-client/network/members)
  5 | [![GitHub watchers](https://img.shields.io/github/watchers/itning/self-learning-platform-client.svg?style=social&label=Watch)](https://github.com/itning/self-learning-platform-client/watchers)
  6 | [![GitHub followers](https://img.shields.io/github/followers/itning.svg?style=social&label=Follow)](https://github.com/itning?tab=followers)
  7 | 
  8 | [![GitHub issues](https://img.shields.io/github/issues/itning/self-learning-platform-client.svg)](https://github.com/itning/self-learning-platform-client/issues)
  9 | [![GitHub license](https://img.shields.io/github/license/itning/self-learning-platform-client.svg)](https://github.com/itning/self-learning-platform-client/blob/master/LICENSE)
 10 | [![GitHub last commit](https://img.shields.io/github/last-commit/itning/self-learning-platform-client.svg)](https://github.com/itning/self-learning-platform-client/commits)
 11 | [![GitHub release](https://img.shields.io/github/release/itning/self-learning-platform-client.svg)](https://github.com/itning/self-learning-platform-client/releases)
 12 | [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/itning/self-learning-platform-client.svg)](https://github.com/itning/self-learning-platform-client)
 13 | [![HitCount](http://hits.dwyl.com/itning/self-learning-platform-client.svg)](http://hits.dwyl.com/itning/self-learning-platform-client)
 14 | [![language](https://img.shields.io/badge/language-Vue-green.svg)](https://github.com/itning/self-learning-platform-client)
 15 | 
 16 | **前后端分离项目**，后端地址：[https://github.com/itning/self-learning-platform-server](https://github.com/itning/self-learning-platform-server)
 17 | 
 18 | ## 功能大纲
 19 | 
 20 | 1. 用户管理模块分为三个小模块:
 21 | 
 22 | - [x] （1）用户注册:用户注册个人信息，填写信息资料并提交后，可以登陆该系统
 23 | 
 24 | - [x] （2）用户信息修改:对系统中已经注册完毕的用户信息，进行修改操作
 25 | 
 26 | - [x] （3）用户信息删除:对系统中已经注册完毕的用户信息，进行删除操作
 27 |   
 28 | 
 29 | 2. 系统设置模块分为二个小模块:
 30 | 
 31 | - [x] （1）权限设置:设定权限，不同权限具有不同操作功能
 32 | 
 33 | - [x]  （2）系统操作日志:人员登陆后，对系统进行了何种的功能操作生成日志。
 34 | 3. 教师管理模块分为三个小模块:
 35 | 
 36 | - [x] （1）科目分类:对科目分类操作，添加科目，删除科目，修改科目，查询科目。
 37 | 
 38 | - [x] （2）教师信息:对教师信息操作，添加教师信息，修改教师信息，删除教师信息，查询教师信息。
 39 | 
 40 | - [x]   （3）班级管辖模块:老师在平台上对班级的管辖，添加班级，修改班级，删除班级，查询班级。
 41 | 4. 学考模块分为四个小模块:
 42 | 
 43 | - [x] （1）学习内容种类:学生选择需要学习的内容种类，添加学习内容，修改学习内容，删除学习内容，查询学习内容。
 44 | 
 45 | - [x] （2）学生名单:考试的学生名单添加，修改学生名单，删除学生名单，查询学生名单。
 46 | 
 47 | - [x] （3）考试成绩:老师对学生的成绩登记，添加学生成绩，修改学生成绩，删除学生成绩，查询学生成绩。
 48 | 
 49 | - [x]   （4）教师建议:教师对学生提出建议，添加建议，修改建议，删除建议，查询建议。
 50 | 5. 出勤模块分为三个小模块:
 51 | 
 52 | - [x] （1）教师出勤记录:添加教师出勤，修改教师出勤，删除教师出勤，查询教师出勤。
 53 | 
 54 | - [x] （2）学生出勤记录:添加学生出勤，修改学生出勤，删除学生出勤，查询学生出勤。
 55 | 
 56 | - [x]   （3）考试成绩:老师对学生的成绩登记，添加学生成绩，修改学生成绩，删除学生成绩，查询学生成绩
 57 | 6. 公告模块分为四个小模块:
 58 | 
 59 | - [x] （1）添加公告信息:在系统中添加公告信息，学生和老师可以查看。
 60 | 
 61 | - [x] （2）删除公告信息:对系统中存在的公告信息删除。
 62 | 
 63 | - [x] （3）修改公告信息:对系统中存在的公告信息修改。
 64 | 
 65 | - [x]  （4）查询公告信息:对系统中存在的公告信息查询。
 66 | 7. 安全管理分为三个小模块:
 67 | 
 68 | - [x] （1）账号冻结:对不明身份的账号进行冻结。
 69 | 
 70 | - [x] （2）账号解冻:对系统中冻结的账号解冻。
 71 | 
 72 | - [x] （3）密码保护:为密码加入md5加密状态。
 73 | ---
 74 | - [x] 1.管理员或教师上传科目视频及ppt。
 75 | - [x] 2.将管理员添加的科目与教师和学生关联。
 76 | - [x] 3.学生登陆后可以观看视频，上传文件。
 77 | - [x] 4.学生用户登录以后不要与管理员登陆功能相同
 78 | - [x] 5.学生界面能打卡，管理端能查看打卡
 79 | - [x] 6.老师能查看到学生上传的文档进行评分，再给建议
 80 | ---
 81 | - [x] 1.老师上传考试分数后，学生可查看自己的考试成绩。
 82 | - [x] 2.管理员为教师注册账号后，教师可添加、修改自己的信息（如性别、年龄、学历、电话、邮箱）
 83 | - [x] 3.学习内容管理增加上传文件（任意）学生可以下载
 84 | 
 85 | ## 运行环境
 86 | - JDK 11
 87 | - MySQL 8
 88 | - Vue.JS
 89 | 
 90 | ## 截图
 91 | 
 92 | ![a](https://raw.githubusercontent.com/itning/self-learning-platform-server/master/pic/a.png)
 93 | 
 94 | ![b](https://raw.githubusercontent.com/itning/self-learning-platform-server/master/pic/b.png)
 95 | 
 96 | ![c](https://raw.githubusercontent.com/itning/self-learning-platform-server/master/pic/c.png)
 97 | 
 98 | ![d](https://raw.githubusercontent.com/itning/self-learning-platform-server/master/pic/d.png)
 99 | 
100 | ![e](https://raw.githubusercontent.com/itning/self-learning-platform-server/master/pic/e.png)
101 | 
102 | ## Project setup
103 | ```
104 | yarn install
105 | ```
106 | 
107 | ### Compiles and hot-reloads for development
108 | ```
109 | yarn serve
110 | ```
111 | 
112 | ### Compiles and minifies for production
113 | ```
114 | yarn build
115 | ```
116 | 
117 | ### Customize configuration
118 | See [Configuration Reference](https://cli.vuejs.org/config/).
119 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import VueRouter from 'vue-router'
  3 | import AdminIndex from "../views/admin/AdminIndex";
  4 | import TeacherIndex from "../views/teacher/TeacherIndex";
  5 | import StudentIndex from "../views/student/StudentIndex";
  6 | 
  7 | Vue.use(VueRouter)
  8 | 
  9 | const routes = [
 10 |   {
 11 |     path: '/admin',
 12 |     component: AdminIndex,
 13 |     children: [
 14 |       {
 15 |         path: 'teacherManagement',
 16 |         components: {
 17 |           subContent: () => import(/* webpackChunkName: "TeacherManagement" */ '../views/admin/TeacherManagement.vue')
 18 |         }
 19 |       },
 20 |       {
 21 |         path: 'studentManagement',
 22 |         components: {
 23 |           subContent: () => import(/* webpackChunkName: "TeacherManagement" */ '../views/admin/StudentManagement.vue')
 24 |         }
 25 |       },
 26 |       {
 27 |         path: 'log',
 28 |         components: {
 29 |           subContent: () => import(/* webpackChunkName: "Log" */ '../views/admin/Log.vue')
 30 |         }
 31 |       },
 32 |       {
 33 |         path: 'announcementManagement',
 34 |         components: {
 35 |           subContent: () => import(/* webpackChunkName: "AnnouncementManagement" */ '../views/admin/AnnouncementManagement.vue')
 36 |         }
 37 |       },
 38 |       {
 39 |         path: 'teacherAttendanceManagement',
 40 |         components: {
 41 |           subContent: () => import(/* webpackChunkName: "TeacherAttendanceManagement" */ '../views/admin/TeacherAttendanceManagement.vue')
 42 |         }
 43 |       },
 44 |       {
 45 |         path: 'studentAttendanceManagement',
 46 |         components: {
 47 |           subContent: () => import(/* webpackChunkName: "StudentAttendanceManagement" */ '../views/admin/StudentAttendanceManagement.vue')
 48 |         }
 49 |       },
 50 |       {
 51 |         path: '',
 52 |         redirect: 'teacherManagement'
 53 |       }
 54 |     ]
 55 |   },
 56 |   {
 57 |     path: '/teacher',
 58 |     component: TeacherIndex,
 59 |     children: [
 60 |       {
 61 |         path: 'clazz',
 62 |         components: {
 63 |           subContent: () => import(/* webpackChunkName: "Clazz" */ '../views/teacher/Clazz.vue')
 64 |         }
 65 |       },
 66 |       {
 67 |         path: 'subject',
 68 |         components: {
 69 |           subContent: () => import(/* webpackChunkName: "Subject" */ '../views/teacher/Subject.vue')
 70 |         }
 71 |       },
 72 |       {
 73 |         path: 'examination',
 74 |         components: {
 75 |           subContent: () => import(/* webpackChunkName: "Examination" */ '../views/teacher/Examination.vue')
 76 |         }
 77 |       },
 78 |       {
 79 |         path: 'examinationScore',
 80 |         components: {
 81 |           subContent: () => import(/* webpackChunkName: "ExaminationScore" */ '../views/teacher/ExaminationScore.vue')
 82 |         }
 83 |       },
 84 |       {
 85 |         path: 'learningContent',
 86 |         components: {
 87 |           subContent: () => import(/* webpackChunkName: "LearningContent" */ '../views/teacher/LearningContent.vue')
 88 |         }
 89 |       },
 90 |       {
 91 |         path: 'suggestion',
 92 |         components: {
 93 |           subContent: () => import(/* webpackChunkName: "Suggestion" */ '../views/teacher/Suggestion.vue')
 94 |         }
 95 |       },
 96 |       {
 97 |         path: 'personalInformation',
 98 |         components: {
 99 |           subContent: () => import(/* webpackChunkName: "PersonalInformation" */ '../views/teacher/PersonalInformation.vue')
100 |         }
101 |       },
102 |       {
103 |         path: '',
104 |         redirect: 'clazz'
105 |       }
106 |     ]
107 |   },
108 |   {
109 |     path: '/student',
110 |     component: StudentIndex,
111 |     children: [
112 |       {
113 |         path: 'myClass',
114 |         components: {
115 |           subContent: () => import(/* webpackChunkName: "MyClass" */ '../views/student/MyClass.vue')
116 |         }
117 |       },
118 |       {
119 |         path: 'myStudy',
120 |         components: {
121 |           subContent: () => import(/* webpackChunkName: "MyStudy" */ '../views/student/MyStudy.vue')
122 |         }
123 |       },
124 |       {
125 |         path: 'studyContent',
126 |         components: {
127 |           subContent: () => import(/* webpackChunkName: "StudyContent" */ '../views/student/StudyContent.vue')
128 |         }
129 |       },
130 |       {
131 |         path: 'myExamScore',
132 |         components: {
133 |           subContent: () => import(/* webpackChunkName: "ExamScore" */ '../views/student/ExamScore.vue')
134 |         }
135 |       },
136 |       {
137 |         path: '',
138 |         redirect: 'myStudy'
139 |       }
140 |     ]
141 |   },
142 |   {
143 |     path: '/login',
144 |     component: () => import(/* webpackChunkName: "Login" */ '../views/Login.vue')
145 |   },
146 |   {
147 |     path: '/reg',
148 |     component: () => import(/* webpackChunkName: "Reg" */ '../views/Reg.vue')
149 |   },
150 |   {
151 |     path: '*',
152 |     redirect: '/login'
153 |   }
154 | ]
155 | 
156 | const router = new VueRouter({
157 |   mode: 'history',
158 |   base: process.env.BASE_URL,
159 |   routes
160 | })
161 | 
162 | export default router
163 | 


--------------------------------------------------------------------------------
/src/views/teacher/ExaminationScore.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-select class="px-4" :items="examData" label="考试信息"
  4 |               :loading="isExamLoading" :value="examData[0]" @change="handleExamChange"></v-select>
  5 |     <crud-table title="考试成绩管理" :headers="headers" :data="data" :data-loading="isLoading"
  6 |                 :disable-add="examData.length===0"
  7 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
  8 |       <template v-slot="{editedItem,isModify}">
  9 |         <v-row>
 10 |           <v-col cols="4">
 11 |             <v-autocomplete :disabled="isModify" label="学生" v-model="editedItem.studentId"
 12 |                             :items="allStudentInClass"></v-autocomplete>
 13 |           </v-col>
 14 |           <v-col cols="4">
 15 |             <v-text-field v-model="editedItem.subject" label="学科"></v-text-field>
 16 |           </v-col>
 17 |           <v-col cols="4">
 18 |             <v-text-field v-model="editedItem.score" type="number" label="分数"></v-text-field>
 19 |           </v-col>
 20 |         </v-row>
 21 |       </template>
 22 |     </crud-table>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 |   import CrudTable from "../../components/CrudTable";
 28 |   import {API} from "../../api";
 29 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
 30 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
 31 | 
 32 |   export default {
 33 |     name: "ExaminationScore",
 34 |     components: {CrudTable},
 35 |     data: () => ({
 36 |       isExamLoading: false,
 37 |       isLoading: false,
 38 |       headers: [
 39 |         {text: '学生', align: 'start', value: 'user.name',},
 40 |         {text: '学科', value: 'subject',},
 41 |         {text: '分数', value: 'score',},
 42 |         {text: '创建时间', value: 'gmtCreate'},
 43 |         {text: '修改时间', value: 'gmtModified'},
 44 |         {text: '操作', value: 'actions', sortable: false},
 45 |       ],
 46 |       data: [],
 47 |       examData: [],
 48 |       allStudentInClass: [],
 49 |       nowExamId: null
 50 |     }),
 51 |     methods: {
 52 |       initAllMyStudent() {
 53 |         Get(API.studentClass.allStudentInClass)
 54 |           .withSuccessCode(200)
 55 |           .do(response => {
 56 |             this.allStudentInClass = response.data.data.map(item => {
 57 |               item.text = item.name;
 58 |               item.value = item.id;
 59 |               return item;
 60 |             });
 61 |           })
 62 |       },
 63 |       handleExamChange(id) {
 64 |         this.nowExamId = id;
 65 |         this.initialize(id);
 66 |       },
 67 |       initExam() {
 68 |         this.isExamLoading = true;
 69 |         Get(API.examination.all)
 70 |           .withSuccessCode(200)
 71 |           .do(response => {
 72 |             this.examData = response.data.data.map(item => {
 73 |               item.text = item.name;
 74 |               item.value = item.id;
 75 |               return item;
 76 |             });
 77 |             if (this.examData.length !== 0) {
 78 |               this.nowExamId = this.examData[0].id;
 79 |               this.initialize(this.examData[0].id);
 80 |             }
 81 |           })
 82 |           .doAfter(() => {
 83 |             this.isExamLoading = false;
 84 |           });
 85 |       },
 86 |       initialize(id) {
 87 |         this.isLoading = true;
 88 |         Get(`${API.examinationScore.all}?examinationId=${id}`)
 89 |           .withSuccessCode(200)
 90 |           .do(response => {
 91 |             this.data = formatResponseDateTime(response.data.data);
 92 |           })
 93 |           .doAfter(() => {
 94 |             this.isLoading = false;
 95 |           });
 96 |       },
 97 |       handleSave(data) {
 98 |         if (!data.studentId || !data.subject || !data.score
 99 |           || data.studentId.trim() === '' || data.subject.trim() === '' || data.score.trim() === '') {
100 |           alert("值不能为空");
101 |           return;
102 |         }
103 |         Post(API.examinationScore.add)
104 |           .withURLSearchParams({...data, examId: this.nowExamId})
105 |           .withSuccessCode(201)
106 |           .do(response => {
107 |             this.data.push(formatItemResponseDateTime(response.data.data))
108 |             alert('新增成功');
109 |           })
110 |       },
111 |       handleUpdate(data, index) {
112 |         if (!data.subject || !data.score || data.subject.trim() === '') {
113 |           alert("值不能为空");
114 |           return;
115 |         }
116 |         const json = {id: data.id, subject: data.subject, score: data.score}
117 |         Patch(API.examinationScore.update)
118 |           .withJson(json)
119 |           .withSuccessCode(204)
120 |           .do(() => {
121 |             this.initialize(this.nowExamId);
122 |             alert('修改成功');
123 |           })
124 |       },
125 |       handleDelete(data) {
126 |         Delete(API.examinationScore.del + data.id)
127 |           .withSuccessCode(204)
128 |           .do(() => {
129 |             const index = this.data.indexOf(data)
130 |             this.data.splice(index, 1)
131 |             alert('删除成功');
132 |           })
133 |       }
134 |     },
135 |     created() {
136 |       this.initExam();
137 |       this.initAllMyStudent();
138 |     }
139 |   }
140 | </script>
141 | 
142 | <style scoped>
143 | 
144 | </style>
145 | 


--------------------------------------------------------------------------------
/src/views/admin/StudentAttendanceManagement.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <crud-table title="学生出勤管理" :headers="headers" :data="data" :data-loading="isLoading"
  4 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
  5 |       <template v-slot="{editedItem,isModify}">
  6 |         <v-row>
  7 |           <v-col cols="4">
  8 |             <v-autocomplete :disabled="isModify" :items="userData" v-model="editedItem.userId"
  9 |                             label="出勤人"></v-autocomplete>
 10 |           </v-col>
 11 |           <v-col cols="4">
 12 |             <v-menu v-model="menu" :close-on-content-click="false" :nudge-right="40"
 13 |                     transition="scale-transition" offset-y min-width="290px">
 14 |               <template v-slot:activator="{ on }">
 15 |                 <v-text-field v-model="editedItem.date" label="出勤日期"
 16 |                               prepend-icon="mdi-calendar-multiple" readonly v-on="on"></v-text-field>
 17 |               </template>
 18 |               <v-date-picker v-model="editedItem.date" @input="menu = false"></v-date-picker>
 19 |             </v-menu>
 20 |           </v-col>
 21 |           <v-col cols="4">
 22 |             <v-menu ref="menu" v-model="menu2" :close-on-content-click="false"
 23 |                     :nudge-right="40" :return-value.sync="editedItem.time"
 24 |                     transition="scale-transition" offset-y max-width="290px" min-width="290px">
 25 |               <template v-slot:activator="{ on }">
 26 |                 <v-text-field v-model="editedItem.time" label="出勤时间" prepend-icon="mdi-clock-outline"
 27 |                               readonly v-on="on"></v-text-field>
 28 |               </template>
 29 |               <v-time-picker v-if="menu2" v-model="editedItem.time" use-seconds format="24hr" :scrollable="true"
 30 |                              full-width @click:second="$refs.menu.save(editedItem.time)"></v-time-picker>
 31 |             </v-menu>
 32 |           </v-col>
 33 |         </v-row>
 34 |       </template>
 35 |     </crud-table>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 |   import CrudTable from "../../components/CrudTable";
 41 |   import {API} from "../../api";
 42 |   import {Delete, Get, Post} from "@itning/axios-helper";
 43 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
 44 |   import dayjs from "dayjs";
 45 | 
 46 |   export default {
 47 |     name: "StudentAttendanceManagement",
 48 |     components: {CrudTable},
 49 |     data: () => ({
 50 |       isLoading: false,
 51 |       headers: [
 52 |         {text: '姓名', align: 'start', value: 'user.name',},
 53 |         {text: '出勤时间', value: 'gmtModified'},
 54 |         {text: '操作', value: 'actions', sortable: false},
 55 |       ],
 56 |       menu: false,
 57 |       menu2: false,
 58 |       data: [],
 59 |       userData: []
 60 |     }),
 61 |     methods: {
 62 |       initUser() {
 63 |         Get(API.student.all)
 64 |           .withSuccessCode(200)
 65 |           .do(response => {
 66 |             this.userData = response.data.data.map(item => {
 67 |               item.text = item.name;
 68 |               item.value = item.id;
 69 |               return item;
 70 |             });
 71 |           })
 72 |       },
 73 |       initialize() {
 74 |         this.isLoading = true;
 75 |         Get(`${API.attendance.all}?roleId=c`)
 76 |           .withSuccessCode(200)
 77 |           .do(response => {
 78 |             this.data = formatResponseDateTime(response.data.data).map(item => {
 79 |               item.date = dayjs(item.gmtModified).format("YYYY-MM-DD");
 80 |               item.time = dayjs(item.gmtModified).format("HH:mm:ss");
 81 |               return item;
 82 |             })
 83 |           })
 84 |           .doAfter(() => {
 85 |             this.isLoading = false;
 86 |           });
 87 |       },
 88 |       handleSave(data) {
 89 |         if (!data.date || !data.time || !data.userId
 90 |           || data.date.trim() === '' || data.time.trim() === '' || data.userId.trim() === '') {
 91 |           alert("值不能为空");
 92 |           return;
 93 |         }
 94 |         Post(API.attendance.addByAdmin)
 95 |           .withURLSearchParams({userId: data.userId, date: `${data.date} ${data.time}`})
 96 |           .withSuccessCode(201)
 97 |           .do(response => {
 98 |             const i = formatItemResponseDateTime(response.data.data);
 99 |             i.date = dayjs(i.gmtModified).format("YYYY-MM-DD");
100 |             i.time = dayjs(i.gmtModified).format("HH:mm:ss");
101 |             this.data.push(i)
102 |             alert('新增成功');
103 |           })
104 |       },
105 |       handleUpdate(data, index) {
106 |         if (!data.date || !data.time
107 |           || data.date.trim() === '' || data.time.trim() === '') {
108 |           alert("值不能为空");
109 |           return;
110 |         }
111 |         const json = {id: data.id, date: `${data.date} ${data.time}`}
112 |         Post(API.attendance.update)
113 |           .withURLSearchParams(json)
114 |           .withSuccessCode(204)
115 |           .do(() => {
116 |             this.initialize();
117 |             alert('修改成功');
118 |           })
119 |       },
120 |       handleDelete(data) {
121 |         Delete(API.attendance.del + data.id)
122 |           .withSuccessCode(204)
123 |           .do(() => {
124 |             const index = this.data.indexOf(data)
125 |             this.data.splice(index, 1)
126 |             alert('删除成功');
127 |           })
128 |       }
129 |     },
130 |     created() {
131 |       this.initUser();
132 |       this.initialize();
133 |     }
134 |   }
135 | </script>
136 | 
137 | <style scoped>
138 | 
139 | </style>
140 | 


--------------------------------------------------------------------------------
/src/views/admin/TeacherAttendanceManagement.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <crud-table title="教师出勤管理" :headers="headers" :data="data" :data-loading="isLoading"
  4 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
  5 |       <template v-slot="{editedItem,isModify}">
  6 |         <v-row>
  7 |           <v-col cols="4">
  8 |             <v-autocomplete :disabled="isModify" :items="userData" v-model="editedItem.userId"
  9 |                             label="出勤人"></v-autocomplete>
 10 |           </v-col>
 11 |           <v-col cols="4">
 12 |             <v-menu v-model="menu" :close-on-content-click="false" :nudge-right="40"
 13 |                     transition="scale-transition" offset-y min-width="290px">
 14 |               <template v-slot:activator="{ on }">
 15 |                 <v-text-field v-model="editedItem.date" label="出勤日期"
 16 |                               prepend-icon="mdi-calendar-multiple" readonly v-on="on"></v-text-field>
 17 |               </template>
 18 |               <v-date-picker v-model="editedItem.date" @input="menu = false"></v-date-picker>
 19 |             </v-menu>
 20 |           </v-col>
 21 |           <v-col cols="4">
 22 |             <v-menu ref="menu" v-model="menu2" :close-on-content-click="false"
 23 |                     :nudge-right="40" :return-value.sync="editedItem.time"
 24 |                     transition="scale-transition" offset-y max-width="290px" min-width="290px">
 25 |               <template v-slot:activator="{ on }">
 26 |                 <v-text-field v-model="editedItem.time" label="出勤时间" prepend-icon="mdi-clock-outline"
 27 |                               readonly v-on="on"></v-text-field>
 28 |               </template>
 29 |               <v-time-picker v-if="menu2" v-model="editedItem.time" use-seconds format="24hr" :scrollable="true"
 30 |                              full-width @click:second="$refs.menu.save(editedItem.time)"></v-time-picker>
 31 |             </v-menu>
 32 |           </v-col>
 33 |         </v-row>
 34 |       </template>
 35 |     </crud-table>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 |   import CrudTable from "../../components/CrudTable";
 41 |   import {API} from "../../api";
 42 |   import {Delete, Get, Post} from "@itning/axios-helper";
 43 |   import {formatItemResponseDateTime, formatResponseDateTime} from "../../util";
 44 |   import dayjs from "dayjs";
 45 | 
 46 |   export default {
 47 |     name: "TeacherAttendanceManagement",
 48 |     components: {CrudTable},
 49 |     data: () => ({
 50 |       isLoading: false,
 51 |       headers: [
 52 |         {text: '姓名', align: 'start', value: 'user.name',},
 53 |         {text: '出勤时间', value: 'gmtModified'},
 54 |         {text: '操作', value: 'actions', sortable: false},
 55 |       ],
 56 |       menu: false,
 57 |       menu2: false,
 58 |       data: [],
 59 |       userData: []
 60 |     }),
 61 |     methods: {
 62 |       initUser() {
 63 |         Get(API.teacher.all)
 64 |           .withSuccessCode(200)
 65 |           .do(response => {
 66 |             this.userData = response.data.data.map(item => {
 67 |               item.text = item.name;
 68 |               item.value = item.id;
 69 |               return item;
 70 |             });
 71 |           })
 72 |       },
 73 |       initialize() {
 74 |         this.isLoading = true;
 75 |         Get(`${API.attendance.all}?roleId=b`)
 76 |           .withSuccessCode(200)
 77 |           .do(response => {
 78 |             this.data = formatResponseDateTime(response.data.data).map(item => {
 79 |               item.date = dayjs(item.gmtModified).format("YYYY-MM-DD");
 80 |               item.time = dayjs(item.gmtModified).format("HH:mm:ss");
 81 |               return item;
 82 |             })
 83 |           })
 84 |           .doAfter(() => {
 85 |             this.isLoading = false;
 86 |           });
 87 |       },
 88 |       handleSave(data) {
 89 |         if (!data.date || !data.time || !data.userId
 90 |           || data.date.trim() === '' || data.time.trim() === '' || data.userId.trim() === '') {
 91 |           alert("值不能为空");
 92 |           return;
 93 |         }
 94 |         Post(API.attendance.addByAdmin)
 95 |           .withURLSearchParams({userId: data.userId, date: `${data.date} ${data.time}`})
 96 |           .withSuccessCode(201)
 97 |           .do(response => {
 98 |             const i = formatItemResponseDateTime(response.data.data);
 99 |             i.date = dayjs(i.gmtModified).format("YYYY-MM-DD");
100 |             i.time = dayjs(i.gmtModified).format("HH:mm:ss");
101 |             this.data.push(i)
102 |             alert('新增成功');
103 |           })
104 |       },
105 |       handleUpdate(data, index) {
106 |         if (!data.date || !data.time
107 |           || data.date.trim() === '' || data.time.trim() === '') {
108 |           alert("值不能为空");
109 |           return;
110 |         }
111 |         const json = {id: data.id, date: `${data.date} ${data.time}`}
112 |         Post(API.attendance.update)
113 |           .withURLSearchParams(json)
114 |           .withSuccessCode(204)
115 |           .do(() => {
116 |             this.initialize();
117 |             alert('修改成功');
118 |           })
119 |       },
120 |       handleDelete(data) {
121 |         Delete(API.attendance.del + data.id)
122 |           .withSuccessCode(204)
123 |           .do(() => {
124 |             const index = this.data.indexOf(data)
125 |             this.data.splice(index, 1)
126 |             alert('删除成功');
127 |           })
128 |       }
129 |     },
130 |     created() {
131 |       this.initUser();
132 |       this.initialize();
133 |     }
134 |   }
135 | </script>
136 | 
137 | <style scoped>
138 | 
139 | </style>
140 | 


--------------------------------------------------------------------------------
/src/views/admin/AdminIndex.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app id="inspire">
  3 |     <v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
  4 |       <v-list dense>
  5 |         <v-list-item link @click="pushRouter('/admin/teacherManagement')">
  6 |           <v-list-item-action>
  7 |             <v-icon>mdi-cards</v-icon>
  8 |           </v-list-item-action>
  9 |           <v-list-item-content>
 10 |             <v-list-item-title>教师管理</v-list-item-title>
 11 |           </v-list-item-content>
 12 |         </v-list-item>
 13 |         <v-list-item link @click="pushRouter('/admin/studentManagement')">
 14 |           <v-list-item-action>
 15 |             <v-icon>mdi-file-cad-box</v-icon>
 16 |           </v-list-item-action>
 17 |           <v-list-item-content>
 18 |             <v-list-item-title>学生管理</v-list-item-title>
 19 |           </v-list-item-content>
 20 |         </v-list-item>
 21 |         <v-list-item link @click="pushRouter('/admin/teacherAttendanceManagement')">
 22 |           <v-list-item-action>
 23 |             <v-icon>mdi-calendar-multiple-check</v-icon>
 24 |           </v-list-item-action>
 25 |           <v-list-item-content>
 26 |             <v-list-item-title>教师出勤管理</v-list-item-title>
 27 |           </v-list-item-content>
 28 |         </v-list-item>
 29 |         <v-list-item link @click="pushRouter('/admin/studentAttendanceManagement')">
 30 |           <v-list-item-action>
 31 |             <v-icon>mdi-calendar-multiple</v-icon>
 32 |           </v-list-item-action>
 33 |           <v-list-item-content>
 34 |             <v-list-item-title>学生出勤管理</v-list-item-title>
 35 |           </v-list-item-content>
 36 |         </v-list-item>
 37 |         <v-list-item link @click="pushRouter('/admin/announcementManagement')">
 38 |           <v-list-item-action>
 39 |             <v-icon>mdi-bullhorn</v-icon>
 40 |           </v-list-item-action>
 41 |           <v-list-item-content>
 42 |             <v-list-item-title>公告管理</v-list-item-title>
 43 |           </v-list-item-content>
 44 |         </v-list-item>
 45 |         <v-list-item link @click="pushRouter('/admin/log')">
 46 |           <v-list-item-action>
 47 |             <v-icon>mdi-current-ac</v-icon>
 48 |           </v-list-item-action>
 49 |           <v-list-item-content>
 50 |             <v-list-item-title>系统日志</v-list-item-title>
 51 |           </v-list-item-content>
 52 |         </v-list-item>
 53 |       </v-list>
 54 |     </v-navigation-drawer>
 55 |     <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="blue darken-3" dark>
 56 |       <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
 57 |       <v-toolbar-title style="width: 300px" class="ml-0 pl-4">
 58 |         <span class="hidden-sm-and-down">自主学习平台系统</span>
 59 |       </v-toolbar-title>
 60 |       <v-spacer/>
 61 |       <v-menu bottom left>
 62 |         <template v-slot:activator="{ on }">
 63 |           <v-btn dark icon v-on="on">
 64 |             <v-icon>mdi-dots-vertical</v-icon>
 65 |           </v-btn>
 66 |         </template>
 67 |         <v-list>
 68 |           <v-list-item @click="">
 69 |             <v-list-item-title>{{user.name}}</v-list-item-title>
 70 |           </v-list-item>
 71 |           <v-list-item @click="isChangePasswordDialogVisible=true">
 72 |             <v-list-item-title>修改密码</v-list-item-title>
 73 |           </v-list-item>
 74 |           <v-list-item @click="pushRouter('/login')">
 75 |             <v-list-item-title>注销登录</v-list-item-title>
 76 |           </v-list-item>
 77 |         </v-list>
 78 |       </v-menu>
 79 |     </v-app-bar>
 80 |     <v-main>
 81 |       <v-container fluid>
 82 |         <router-view name="subContent"/>
 83 |       </v-container>
 84 |     </v-main>
 85 |     <v-dialog v-model="isChangePasswordDialogVisible" persistent max-width="600px">
 86 |       <v-card>
 87 |         <v-card-title>
 88 |           <span class="headline">修改密码</span>
 89 |         </v-card-title>
 90 |         <v-card-text>
 91 |           <v-container>
 92 |             <v-row>
 93 |               <v-col cols="12">
 94 |                 <v-text-field type="password" label="新密码" required v-model="newPassword"></v-text-field>
 95 |               </v-col>
 96 |             </v-row>
 97 |           </v-container>
 98 |         </v-card-text>
 99 |         <v-card-actions>
100 |           <v-spacer></v-spacer>
101 |           <v-btn color="blue darken-1" text @click="isChangePasswordDialogVisible = false">关闭</v-btn>
102 |           <v-btn color="blue darken-1" text @click="changePassword">保存</v-btn>
103 |         </v-card-actions>
104 |       </v-card>
105 |     </v-dialog>
106 |   </v-app>
107 | </template>
108 | 
109 | <script>
110 |   import {Patch} from "@itning/axios-helper";
111 |   import {API} from "../../api";
112 | 
113 |   export default {
114 |     name: "AdminIndex",
115 |     data: () => ({
116 |       isChangePasswordDialogVisible: false,
117 |       newPassword: '',
118 |       drawer: null,
119 |       user: {}
120 |     }),
121 |     methods: {
122 |       pushRouter(path) {
123 |         if (this.$route.path === path) {
124 |           return;
125 |         }
126 |         this.$router.push(path);
127 |       },
128 |       changePassword() {
129 |         if (this.newPassword.trim() === '') {
130 |           alert('密码不能为空');
131 |           return;
132 |         }
133 |         Patch(API.user.update)
134 |           .withSuccessCode(204)
135 |           .withJson({password: this.newPassword})
136 |           .do(() => {
137 |             this.isChangePasswordDialogVisible = false;
138 |             alert('修改成功');
139 |             this.$router.push('/login');
140 |           })
141 |       }
142 |     },
143 |     created() {
144 |       this.user = this.$user.loginUser();
145 |     }
146 |   }
147 | </script>
148 | 
149 | <style scoped>
150 | 
151 | </style>
152 | 


--------------------------------------------------------------------------------
/src/views/student/StudentIndex.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app id="inspire">
  3 |     <v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
  4 |       <v-list dense>
  5 |         <v-list-item link @click="pushRouter('/student/myStudy')">
  6 |           <v-list-item-action>
  7 |             <v-icon>mdi-playlist-check</v-icon>
  8 |           </v-list-item-action>
  9 |           <v-list-item-content>
 10 |             <v-list-item-title>我的学习</v-list-item-title>
 11 |           </v-list-item-content>
 12 |         </v-list-item>
 13 |         <v-list-item link @click="pushRouter('/student/studyContent')">
 14 |           <v-list-item-action>
 15 |             <v-icon>mdi-file-cad-box</v-icon>
 16 |           </v-list-item-action>
 17 |           <v-list-item-content>
 18 |             <v-list-item-title>学习内容管理</v-list-item-title>
 19 |           </v-list-item-content>
 20 |         </v-list-item>
 21 |         <v-list-item link @click="pushRouter('/student/myExamScore')">
 22 |           <v-list-item-action>
 23 |             <v-icon>mdi-counter</v-icon>
 24 |           </v-list-item-action>
 25 |           <v-list-item-content>
 26 |             <v-list-item-title>我的成绩</v-list-item-title>
 27 |           </v-list-item-content>
 28 |         </v-list-item>
 29 |         <v-list-item link @click="pushRouter('/student/myClass')">
 30 |           <v-list-item-action>
 31 |             <v-icon>mdi-book-variant</v-icon>
 32 |           </v-list-item-action>
 33 |           <v-list-item-content>
 34 |             <v-list-item-title>我的班级</v-list-item-title>
 35 |           </v-list-item-content>
 36 |         </v-list-item>
 37 |       </v-list>
 38 |     </v-navigation-drawer>
 39 |     <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="blue darken-3" dark>
 40 |       <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
 41 |       <v-toolbar-title style="width: 300px" class="ml-0 pl-4">
 42 |         <span class="hidden-sm-and-down">自主学习平台系统</span>
 43 |       </v-toolbar-title>
 44 |       <v-spacer/>
 45 |       <VueMarquee :marqueeList="announcements" speed="300" autoPlay="5000" fontSize="20"/>
 46 |       <v-menu bottom left>
 47 |         <template v-slot:activator="{ on }">
 48 |           <v-btn dark icon v-on="on">
 49 |             <v-icon>mdi-dots-vertical</v-icon>
 50 |           </v-btn>
 51 |         </template>
 52 |         <v-list>
 53 |           <v-list-item @click="">
 54 |             <v-list-item-title>{{user.name}}</v-list-item-title>
 55 |           </v-list-item>
 56 |           <v-list-item @click="attendance">
 57 |             <v-list-item-title>出勤打卡</v-list-item-title>
 58 |           </v-list-item>
 59 |           <v-list-item @click="isChangePasswordDialogVisible=true">
 60 |             <v-list-item-title>修改密码</v-list-item-title>
 61 |           </v-list-item>
 62 |           <v-list-item @click="pushRouter('/login')">
 63 |             <v-list-item-title>注销登录</v-list-item-title>
 64 |           </v-list-item>
 65 |         </v-list>
 66 |       </v-menu>
 67 |     </v-app-bar>
 68 |     <v-main>
 69 |       <v-container fluid>
 70 |         <router-view name="subContent"/>
 71 |       </v-container>
 72 |     </v-main>
 73 |     <v-dialog v-model="isChangePasswordDialogVisible" persistent max-width="600px">
 74 |       <v-card>
 75 |         <v-card-title>
 76 |           <span class="headline">修改密码</span>
 77 |         </v-card-title>
 78 |         <v-card-text>
 79 |           <v-container>
 80 |             <v-row>
 81 |               <v-col cols="12">
 82 |                 <v-text-field type="password" label="新密码" required v-model="newPassword"></v-text-field>
 83 |               </v-col>
 84 |             </v-row>
 85 |           </v-container>
 86 |         </v-card-text>
 87 |         <v-card-actions>
 88 |           <v-spacer></v-spacer>
 89 |           <v-btn color="blue darken-1" text @click="isChangePasswordDialogVisible = false">关闭</v-btn>
 90 |           <v-btn color="blue darken-1" text @click="changePassword">保存</v-btn>
 91 |         </v-card-actions>
 92 |       </v-card>
 93 |     </v-dialog>
 94 |   </v-app>
 95 | </template>
 96 | 
 97 | <script>
 98 |   import {API} from "../../api";
 99 |   import {Get, Patch, Post} from "@itning/axios-helper";
100 |   import VueMarquee from "../../components/VueMarquee";
101 | 
102 |   export default {
103 |     name: "StudentIndex",
104 |     components: {
105 |       VueMarquee
106 |     },
107 |     data: () => ({
108 |       isChangePasswordDialogVisible: false,
109 |       newPassword: '',
110 |       drawer: null,
111 |       user: {},
112 |       announcements: []
113 |     }),
114 |     methods: {
115 |       pushRouter(path) {
116 |         if (this.$route.path === path) {
117 |           return;
118 |         }
119 |         this.$router.push(path);
120 |       },
121 |       getAnnouncements() {
122 |         Get(API.announcement.all)
123 |           .withSuccessCode(200)
124 |           .do(response => {
125 |             this.announcements = response.data.data.map(item => item.content);
126 |           })
127 |       },
128 |       attendance() {
129 |         Post(API.attendance.add).withSuccessCode(201).withErrorStartMsg('警告').do(response => alert("打卡成功"));
130 |       },
131 |       changePassword() {
132 |         if (this.newPassword.trim() === '') {
133 |           alert('密码不能为空');
134 |           return;
135 |         }
136 |         Patch(API.user.update)
137 |           .withSuccessCode(204)
138 |           .withJson({password: this.newPassword})
139 |           .do(() => {
140 |             this.isChangePasswordDialogVisible = false;
141 |             alert('修改成功');
142 |             this.$router.push('/login');
143 |           })
144 |       }
145 |     },
146 |     created() {
147 |       this.user = this.$user.loginUser();
148 |       this.getAnnouncements();
149 |     }
150 |   }
151 | </script>
152 | 
153 | <style scoped>
154 | 
155 | </style>
156 | 


--------------------------------------------------------------------------------
/src/views/teacher/LearningContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-select class="px-4" :items="subjectData" label="科目"
  4 |               :loading="isSubjectLoading" :value="subjectData[0]" @change="handleSubjectChange"></v-select>
  5 |     <crud-table title="学习内容管理" :headers="headers" :data="data" :data-loading="isLoading"
  6 |                 :disable-add="subjectData.length===0"
  7 |                 @save="handleSave" @update="handleUpdate" @delete="handleDelete">
  8 |       <template v-slot="{editedItem,isModify}">
  9 |         <v-row>
 10 |           <v-col cols="4">
 11 |             <v-text-field v-model="editedItem.name" label="名称"></v-text-field>
 12 |           </v-col>
 13 |           <v-col cols="4">
 14 |             <v-file-input :disabled="isModify" show-size accept="video/*" v-model="editedItem.file"
 15 |                           label="视频文件"></v-file-input>
 16 |           </v-col>
 17 |           <v-col cols="4">
 18 |             <v-file-input :disabled="isModify" show-size v-model="editedItem.aid"
 19 |                           label="资料文件"></v-file-input>
 20 |           </v-col>
 21 |         </v-row>
 22 |       </template>
 23 |     </crud-table>
 24 |     <v-dialog v-model="isUploadDialogVisible" persistent max-width="290">
 25 |       <v-card>
 26 |         <v-card-title class="headline">正在上传</v-card-title>
 27 |         <v-card-text>
 28 |           <v-row justify="center">
 29 |             <v-progress-circular
 30 |               :rotate="360"
 31 |               :size="100"
 32 |               :width="15"
 33 |               :value="uploadProgress"
 34 |               color="teal"
 35 |             >
 36 |               {{ uploadProgress }}
 37 |             </v-progress-circular>
 38 |           </v-row>
 39 |         </v-card-text>
 40 |         <v-card-actions>
 41 |           <v-spacer></v-spacer>
 42 |           <v-btn color="green darken-1" text @click="isUploadDialogVisible = false">后台上传</v-btn>
 43 |         </v-card-actions>
 44 |       </v-card>
 45 | 
 46 |     </v-dialog>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 |   import CrudTable from "../../components/CrudTable";
 52 |   import {API} from "../../api";
 53 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
 54 |   import {formatFileSize, formatItemResponseDateTime, formatResponseDateTime} from "../../util";
 55 | 
 56 |   export default {
 57 |     name: "LearningContent",
 58 |     components: {CrudTable},
 59 |     data: () => ({
 60 |       isUploadDialogVisible: false,
 61 |       isSubjectLoading: false,
 62 |       isLoading: false,
 63 |       uploadProgress: 0,
 64 |       headers: [
 65 |         {text: '名称', align: 'start', value: 'name',},
 66 |         {text: '视频大小', value: 'size',},
 67 |         {text: '视频扩展名', value: 'extensionName',},
 68 |         {text: '资料大小', value: 'aidSize',},
 69 |         {text: '资料扩展名', value: 'aidExtensionName',},
 70 |         {text: '创建时间', value: 'gmtCreate'},
 71 |         {text: '修改时间', value: 'gmtModified'},
 72 |         {text: '操作', value: 'actions', sortable: false},
 73 |       ],
 74 |       data: [],
 75 |       subjectData: [],
 76 |       nowSubjectId: null
 77 |     }),
 78 |     methods: {
 79 |       handleSubjectChange(id) {
 80 |         this.nowSubjectId = id;
 81 |         this.initialize(id);
 82 |       },
 83 |       initSubjects() {
 84 |         this.isSubjectLoading = true;
 85 |         Get(API.subject.all)
 86 |           .withSuccessCode(200)
 87 |           .do(response => {
 88 |             this.subjectData = response.data.data.map(item => {
 89 |               item.text = item.name;
 90 |               item.value = item.id;
 91 |               return item;
 92 |             });
 93 |             if (this.subjectData.length !== 0) {
 94 |               this.nowSubjectId = this.subjectData[0].id;
 95 |               this.initialize(this.subjectData[0].id);
 96 |             }
 97 |           })
 98 |           .doAfter(() => {
 99 |             this.isSubjectLoading = false;
100 |           });
101 |       },
102 |       initialize(id) {
103 |         this.isLoading = true;
104 |         Get(`${API.learningContent.all}?subjectId=${id}`)
105 |           .withSuccessCode(200)
106 |           .do(response => {
107 |             this.data = formatResponseDateTime(response.data.data).map(item => {
108 |               item.size = formatFileSize(item.size);
109 |               item.aidSize = formatFileSize(item.aidSize);
110 |               return item;
111 |             });
112 |           })
113 |           .doAfter(() => {
114 |             this.isLoading = false;
115 |           });
116 |       },
117 |       handleSave(data) {
118 |         if (!data.name || !data.file || !data.aid || data.name.trim() === '') {
119 |           alert("值不能为空");
120 |           return;
121 |         }
122 |         this.uploadProgress = 0;
123 |         this.isUploadDialogVisible = true;
124 |         Post(API.learningContent.add)
125 |           .withFormData({...data, subjectId: this.nowSubjectId}, progress => {
126 |             this.uploadProgress = progress;
127 |           })
128 |           .withSuccessCode(201)
129 |           .do(response => {
130 |             const i = formatItemResponseDateTime(response.data.data);
131 |             i.size = formatFileSize(i.size);
132 |             this.data.push(i);
133 |             alert('新增成功');
134 |           })
135 |           .doAfter(() => {
136 |             this.isUploadDialogVisible = false;
137 |           })
138 |       },
139 |       handleUpdate(data, index) {
140 |         if (!data.name || data.name.trim() === '') {
141 |           alert("值不能为空");
142 |           return;
143 |         }
144 |         const json = {id: data.id, name: data.name}
145 |         Patch(API.learningContent.update)
146 |           .withJson(json)
147 |           .withSuccessCode(204)
148 |           .do(() => {
149 |             this.initialize(this.nowSubjectId);
150 |             alert('修改成功');
151 |           })
152 |       },
153 |       handleDelete(data) {
154 |         Delete(API.learningContent.del + data.id)
155 |           .withSuccessCode(204)
156 |           .do(() => {
157 |             const index = this.data.indexOf(data)
158 |             this.data.splice(index, 1)
159 |             alert('删除成功');
160 |           })
161 |       }
162 |     },
163 |     created() {
164 |       this.initSubjects();
165 |     }
166 |   }
167 | </script>
168 | 
169 | <style scoped>
170 | 
171 | </style>
172 | 


--------------------------------------------------------------------------------
/src/views/teacher/Suggestion.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-row>
  4 |       <v-col cols="6">
  5 |         <v-select class="pl-4" :items="subject.data" label="科目"
  6 |                   :loading="subject.isLoading" :value="subject.data[0]" @change="handleSubjectChange"></v-select>
  7 |       </v-col>
  8 |       <v-col cols="6">
  9 |         <v-select class="pr-4" :items="learningContent.data" label="学习内容"
 10 |                   :loading="learningContent.isLoading" :value="learningContent.data[0]"
 11 |                   @change="handleLearningContentChange"></v-select>
 12 |       </v-col>
 13 |     </v-row>
 14 |     <v-data-table
 15 |       :search="search"
 16 |       :headers="headers"
 17 |       :items="data"
 18 |       :single-expand="singleExpand"
 19 |       :expanded.sync="expanded"
 20 |       item-key="id"
 21 |       show-expand>
 22 |       <template v-slot:top>
 23 |         <v-toolbar flat>
 24 |           <v-toolbar-title>教师建议</v-toolbar-title>
 25 |           <v-divider class="mx-4" inset vertical></v-divider>
 26 |           <v-spacer></v-spacer>
 27 |           <v-text-field append-icon="mdi-magnify" v-model="search"
 28 |                         label="搜索" single-line hide-details></v-text-field>
 29 |           <v-divider class="mx-4" inset vertical></v-divider>
 30 |           <v-switch v-model="singleExpand" label="单独展开" class="mt-2"></v-switch>
 31 |         </v-toolbar>
 32 |       </template>
 33 |       <template v-slot:expanded-item="{ headers, item }">
 34 |         <td :colspan="headers.length">
 35 |           <div class="my-5" v-if="item.studentWork">
 36 |             <span>评分：</span>
 37 |             <v-rating v-model="item.studentWork.score" :clearable="true"></v-rating>
 38 |             <v-textarea label="建议" :auto-grow="true" counter :rows="1" v-model="item.studentWork.suggest"></v-textarea>
 39 |             <v-btn color="primary" @click="save(item)">保存</v-btn>
 40 |             <v-btn color="primary" class="ml-1" :disabled="!item.studentWork.fileUri"
 41 |                    @click="downloadWork(item.studentWork)">下载作业（{{item.studentWork.size}}）
 42 |             </v-btn>
 43 |           </div>
 44 |           <div v-else>该学生没有上传作业</div>
 45 |         </td>
 46 |       </template>
 47 |     </v-data-table>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 |   import {Download, Get, Post} from "@itning/axios-helper";
 53 |   import {API} from "../../api";
 54 |   import {formatFileSize, formatResponseDateTime} from "../../util";
 55 | 
 56 |   export default {
 57 |     name: "Suggestion",
 58 |     data() {
 59 |       return {
 60 |         subject: {
 61 |           isLoading: false,
 62 |           data: [],
 63 |           nowId: null
 64 |         },
 65 |         learningContent: {
 66 |           isLoading: false,
 67 |           data: [],
 68 |           nowId: null
 69 |         },
 70 |         search: '',
 71 |         expanded: [],
 72 |         singleExpand: false,
 73 |         headers: [
 74 |           {text: '学生', align: 'start', value: 'studentName',},
 75 |           {text: '选择时间', value: 'gmtCreate'},
 76 |           {text: '作业', value: 'upload'},
 77 |           {text: '', value: 'data-table-expand'},
 78 |         ],
 79 |         data: [],
 80 |       }
 81 |     },
 82 |     methods: {
 83 |       handleLearningContentChange(id) {
 84 |         this.learningContent.nowId = id;
 85 |         this.initialize(id);
 86 |       },
 87 |       handleSubjectChange(id) {
 88 |         this.subject.nowId = id;
 89 |         this.initLearningContent(id);
 90 |       },
 91 |       initSubjects() {
 92 |         this.subject.isLoading = true;
 93 |         Get(API.subject.all)
 94 |           .withSuccessCode(200)
 95 |           .do(response => {
 96 |             this.subject.data = response.data.data.map(item => {
 97 |               item.text = item.name;
 98 |               item.value = item.id;
 99 |               return item;
100 |             });
101 |             if (this.subject.data.length !== 0) {
102 |               this.subject.nowId = this.subject.data[0].id;
103 |               this.initLearningContent(this.subject.data[0].id);
104 |             }
105 |           })
106 |           .doAfter(() => {
107 |             this.subject.isLoading = false;
108 |           });
109 |       },
110 |       initLearningContent(subjectId) {
111 |         this.learningContent.isLoading = true;
112 |         Get(`${API.learningContent.all}?subjectId=${subjectId}`)
113 |           .withSuccessCode(200)
114 |           .do(response => {
115 |             this.learningContent.data = response.data.data.map(item => {
116 |               item.text = item.name;
117 |               item.value = item.id;
118 |               return item;
119 |             });
120 |             if (this.learningContent.data.length !== 0) {
121 |               this.learningContent.nowId = this.learningContent.data[0].id;
122 |               this.initialize(this.learningContent.data[0].id);
123 |             }
124 |           })
125 |           .doAfter(() => {
126 |             this.learningContent.isLoading = false;
127 |           });
128 |       },
129 |       initialize(id) {
130 |         Get(`${API.studentLearning.allByTeacher}?learningContentId=${id}`)
131 |           .withSuccessCode(200)
132 |           .do(response => {
133 |             this.data = formatResponseDateTime(response.data.data).map(item => {
134 |               if (item.studentWork && item.studentWork.fileUri) {
135 |                 item.upload = '已上传';
136 |                 item.studentWork.size = formatFileSize(item.studentWork.size);
137 |               } else {
138 |                 item.upload = '未上传';
139 |               }
140 |               return item;
141 |             });
142 |           })
143 |       },
144 |       save(data) {
145 |         if (!data.studentWork.suggest || data.studentWork.suggest.trim() === '') {
146 |           alert("请输入建议");
147 |           return;
148 |         }
149 |         if (!data.studentWork.score) {
150 |           data.studentWork.score = 0;
151 |         }
152 |         Post(API.studentWork.review)
153 |           .withSuccessCode(201)
154 |           .withURLSearchParams({
155 |             studentWorkId: data.id,
156 |             suggest: data.studentWork.suggest,
157 |             score: data.studentWork.score
158 |           })
159 |           .do(response => {
160 |             this.initialize(this.learningContent.nowId);
161 |             alert("批阅成功");
162 |           })
163 |       },
164 |       downloadWork(data) {
165 |         Download(API.studentWork.download + data.id, () => "学生作业." + data.extensionName)
166 |       }
167 |     },
168 |     created() {
169 |       this.initSubjects();
170 |     }
171 |   }
172 | </script>
173 | 
174 | <style scoped>
175 | 
176 | </style>
177 | 


--------------------------------------------------------------------------------
/src/views/teacher/TeacherIndex.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app id="inspire">
  3 |     <v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
  4 |       <v-list dense>
  5 |         <v-list-item link @click="pushRouter('/teacher/clazz')">
  6 |           <v-list-item-action>
  7 |             <v-icon>mdi-book-variant</v-icon>
  8 |           </v-list-item-action>
  9 |           <v-list-item-content>
 10 |             <v-list-item-title>班级管理</v-list-item-title>
 11 |           </v-list-item-content>
 12 |         </v-list-item>
 13 |         <v-list-item link @click="pushRouter('/teacher/subject')">
 14 |           <v-list-item-action>
 15 |             <v-icon>mdi-playlist-check</v-icon>
 16 |           </v-list-item-action>
 17 |           <v-list-item-content>
 18 |             <v-list-item-title>科目管理</v-list-item-title>
 19 |           </v-list-item-content>
 20 |         </v-list-item>
 21 |         <v-list-item link @click="pushRouter('/teacher/examination')">
 22 |           <v-list-item-action>
 23 |             <v-icon>mdi-counter</v-icon>
 24 |           </v-list-item-action>
 25 |           <v-list-item-content>
 26 |             <v-list-item-title>考试管理</v-list-item-title>
 27 |           </v-list-item-content>
 28 |         </v-list-item>
 29 |         <v-list-item link @click="pushRouter('/teacher/examinationScore')">
 30 |           <v-list-item-action>
 31 |             <v-icon>mdi-calendar-month-outline</v-icon>
 32 |           </v-list-item-action>
 33 |           <v-list-item-content>
 34 |             <v-list-item-title>成绩管理</v-list-item-title>
 35 |           </v-list-item-content>
 36 |         </v-list-item>
 37 |         <v-list-item link @click="pushRouter('/teacher/learningContent')">
 38 |           <v-list-item-action>
 39 |             <v-icon>mdi-play-protected-content</v-icon>
 40 |           </v-list-item-action>
 41 |           <v-list-item-content>
 42 |             <v-list-item-title>学习内容管理</v-list-item-title>
 43 |           </v-list-item-content>
 44 |         </v-list-item>
 45 |         <v-list-item link @click="pushRouter('/teacher/suggestion')">
 46 |           <v-list-item-action>
 47 |             <v-icon>mdi-account-voice</v-icon>
 48 |           </v-list-item-action>
 49 |           <v-list-item-content>
 50 |             <v-list-item-title>教师建议</v-list-item-title>
 51 |           </v-list-item-content>
 52 |         </v-list-item>
 53 |         <v-list-item link @click="pushRouter('/teacher/personalInformation')">
 54 |           <v-list-item-action>
 55 |             <v-icon>mdi-cards</v-icon>
 56 |           </v-list-item-action>
 57 |           <v-list-item-content>
 58 |             <v-list-item-title>个人信息</v-list-item-title>
 59 |           </v-list-item-content>
 60 |         </v-list-item>
 61 |       </v-list>
 62 |     </v-navigation-drawer>
 63 |     <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="blue darken-3" dark>
 64 |       <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
 65 |       <v-toolbar-title style="width: 300px" class="ml-0 pl-4">
 66 |         <span class="hidden-sm-and-down">自主学习平台系统</span>
 67 |       </v-toolbar-title>
 68 |       <v-spacer/>
 69 |       <VueMarquee :marqueeList="announcements" speed="300" autoPlay="5000" fontSize="20"/>
 70 |       <v-menu bottom left>
 71 |         <template v-slot:activator="{ on }">
 72 |           <v-btn dark icon v-on="on">
 73 |             <v-icon>mdi-dots-vertical</v-icon>
 74 |           </v-btn>
 75 |         </template>
 76 |         <v-list>
 77 |           <v-list-item @click="">
 78 |             <v-list-item-title>{{user.name}}</v-list-item-title>
 79 |           </v-list-item>
 80 |           <v-list-item @click="attendance">
 81 |             <v-list-item-title>出勤打卡</v-list-item-title>
 82 |           </v-list-item>
 83 |           <v-list-item @click="isChangePasswordDialogVisible=true">
 84 |             <v-list-item-title>修改密码</v-list-item-title>
 85 |           </v-list-item>
 86 |           <v-list-item @click="pushRouter('/login')">
 87 |             <v-list-item-title>注销登录</v-list-item-title>
 88 |           </v-list-item>
 89 |         </v-list>
 90 |       </v-menu>
 91 |     </v-app-bar>
 92 |     <v-main>
 93 |       <v-container fluid>
 94 |         <router-view name="subContent"/>
 95 |       </v-container>
 96 |     </v-main>
 97 |     <v-dialog v-model="isChangePasswordDialogVisible" persistent max-width="600px">
 98 |       <v-card>
 99 |         <v-card-title>
100 |           <span class="headline">修改密码</span>
101 |         </v-card-title>
102 |         <v-card-text>
103 |           <v-container>
104 |             <v-row>
105 |               <v-col cols="12">
106 |                 <v-text-field type="password" label="新密码" required v-model="newPassword"></v-text-field>
107 |               </v-col>
108 |             </v-row>
109 |           </v-container>
110 |         </v-card-text>
111 |         <v-card-actions>
112 |           <v-spacer></v-spacer>
113 |           <v-btn color="blue darken-1" text @click="isChangePasswordDialogVisible = false">关闭</v-btn>
114 |           <v-btn color="blue darken-1" text @click="changePassword">保存</v-btn>
115 |         </v-card-actions>
116 |       </v-card>
117 |     </v-dialog>
118 |   </v-app>
119 | </template>
120 | 
121 | <script>
122 |   import {API} from "../../api";
123 |   import {Get, Patch, Post} from "@itning/axios-helper";
124 |   import VueMarquee from "../../components/VueMarquee";
125 | 
126 |   export default {
127 |     name: "TeacherIndex",
128 |     components: {
129 |       VueMarquee
130 |     },
131 |     data: () => ({
132 |       isChangePasswordDialogVisible: false,
133 |       newPassword: '',
134 |       drawer: null,
135 |       user: {},
136 |       announcements: []
137 |     }),
138 |     methods: {
139 |       pushRouter(path) {
140 |         if (this.$route.path === path) {
141 |           return;
142 |         }
143 |         this.$router.push(path);
144 |       },
145 |       getAnnouncements() {
146 |         Get(API.announcement.all)
147 |           .withSuccessCode(200)
148 |           .do(response => {
149 |             this.announcements = response.data.data.map(item => item.content);
150 |           })
151 |       },
152 |       attendance() {
153 |         Post(API.attendance.add).withSuccessCode(201).withErrorStartMsg('警告').do(response => alert("打卡成功"));
154 |       },
155 |       changePassword() {
156 |         if (this.newPassword.trim() === '') {
157 |           alert('密码不能为空');
158 |           return;
159 |         }
160 |         Patch(API.user.update)
161 |           .withSuccessCode(204)
162 |           .withJson({password: this.newPassword})
163 |           .do(() => {
164 |             this.isChangePasswordDialogVisible = false;
165 |             alert('修改成功');
166 |             this.$router.push('/login');
167 |           })
168 |       }
169 |     },
170 |     created() {
171 |       this.user = this.$user.loginUser();
172 |       this.getAnnouncements();
173 |     }
174 |   }
175 | </script>
176 | 
177 | <style scoped>
178 | 
179 | </style>
180 | 


--------------------------------------------------------------------------------
/src/views/student/MyStudy.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-select class="px-4" :items="learningContent.data" label="学习内容"
  4 |               :loading="learningContent.isLoading" :value="learningContent.data[0]"
  5 |               @change="handleLearningContentChange"></v-select>
  6 |     <video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid mb-4" controls
  7 |            preload="auto"></video>
  8 |     <v-row v-if="learningContent.data.length!==0">
  9 |       <v-col cols="4">
 10 |         <v-card class="elevation-16 mx-auto">
 11 |           <v-card-title class="headline" primary-title>文件下载</v-card-title>
 12 |           <v-card-actions class="justify-start">
 13 |             <v-btn color="primary" @click="downloadLearningContent('video')">视频（{{nowLearningContent.size}}）</v-btn>
 14 |             <v-btn color="primary" @click="downloadLearningContent('aid')">资料（{{nowLearningContent.aidSize}}）</v-btn>
 15 |           </v-card-actions>
 16 |         </v-card>
 17 |       </v-col>
 18 |       <v-col cols="4">
 19 |         <v-card class="elevation-16 mx-auto">
 20 |           <v-card-title class="headline" primary-title>作业上传</v-card-title>
 21 |           <v-card-text>
 22 |             <v-file-input show-size label="上传作业" v-model="uploadFile"></v-file-input>
 23 |             <span>上次上传：{{studentWork.gmtModified?studentWork.gmtModified:'未上传过'}}</span>
 24 |           </v-card-text>
 25 |           <v-card-actions class="justify-end">
 26 |             <v-btn color="primary" @click="uploadWork">{{studentWork.fileUri?'重新上传':'上传'}}</v-btn>
 27 |             <v-btn color="primary" v-if="studentWork.fileUri" @click="downloadWork">下载上次上传的作业（{{studentWork.size}}）
 28 |             </v-btn>
 29 |           </v-card-actions>
 30 |         </v-card>
 31 |       </v-col>
 32 |       <v-col cols="4">
 33 |         <v-card class="elevation-16 mx-auto">
 34 |           <v-card-title class="headline" primary-title>教师建议</v-card-title>
 35 |           <v-card-text>
 36 |             {{studentWork.suggest}}
 37 |             <div class="text-center mt-9">
 38 |               <v-rating readonly
 39 |                         v-model="studentWork.score" color="yellow darken-3"
 40 |                         background-color="grey darken-1" empty-icon="$ratingFull" half-increments hover></v-rating>
 41 |             </div>
 42 |           </v-card-text>
 43 |         </v-card>
 44 |       </v-col>
 45 |     </v-row>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 |   import {API} from "../../api";
 51 |   import {Download, Get, Post} from "@itning/axios-helper";
 52 |   import videoLoader from "../../http/videoLoader";
 53 |   import {formatFileSize, formatItemResponseDateTime} from "../../util";
 54 | 
 55 |   export default {
 56 |     name: "MyStudy",
 57 |     data() {
 58 |       return {
 59 |         learningContent: {
 60 |           isLoading: false,
 61 |           data: [],
 62 |           nowId: null
 63 |         },
 64 |         videoInstance: null,
 65 |         videoSrc: null,
 66 |         studentWork: {score: 0, suggest: '教师未给出建议和评分'},
 67 |         uploadFile: null
 68 |       }
 69 |     },
 70 |     computed: {
 71 |       nowLearningContent: function () {
 72 |         const learningContent = this.learningContent.data.find(item => item.id === this.learningContent.nowId);
 73 |         if (learningContent) {
 74 |           learningContent.size = formatFileSize(learningContent.size);
 75 |           learningContent.aidSize = formatFileSize(learningContent.aidSize);
 76 |           return learningContent;
 77 |         } else {
 78 |           return {};
 79 |         }
 80 |       }
 81 |     },
 82 |     methods: {
 83 |       downloadWork() {
 84 |         Download(API.studentWork.download + this.studentWork.id, () => "学生作业." + this.studentWork.extensionName)
 85 |       },
 86 |       uploadWork() {
 87 |         const learningContent = this.learningContent.data.find(item => item.id === this.learningContent.nowId);
 88 |         if (!this.uploadFile) {
 89 |           alert('请选择文件');
 90 |           return;
 91 |         }
 92 |         Post(API.studentWork.upload)
 93 |           .withSuccessCode(201)
 94 |           .withFormData({studentLearningId: learningContent.studentLearningId, file: this.uploadFile})
 95 |           .do(() => {
 96 |             this.uploadFile = null;
 97 |             this.initStudentWork(this.learningContent.nowId);
 98 |             alert('上传成功');
 99 |           })
100 |       },
101 |       handleLearningContentChange(id) {
102 |         this.learningContent.nowId = id;
103 |         this.initStudentWork(id);
104 |         this.initialize(id);
105 |       },
106 |       initLearningContent() {
107 |         Get(API.studentLearning.all)
108 |           .withSuccessCode(200)
109 |           .do(response => {
110 |             this.learningContent.data = response.data.data.map(item => {
111 |               item.text = item.name;
112 |               item.value = item.id;
113 |               return item;
114 |             });
115 |             if (this.learningContent.data.length !== 0) {
116 |               this.learningContent.nowId = this.learningContent.data[0].id;
117 |               this.initStudentWork(this.learningContent.data[0].id);
118 |               this.initialize(this.learningContent.data[0].id);
119 |             }
120 |           })
121 |       },
122 |       initialize(id) {
123 |         console.log(`id: ${id}`);
124 |         const videoSrc = this.videoSrc = `http://localhost:8888/video/${id}.m3u8`;
125 |         if (this.videoInstance) {
126 |           this.videoInstance.src(this.videoSrc);
127 |           return;
128 |         }
129 |         const that = this;
130 |         console.log(`加载：${videoSrc}`)
131 |         videojs(this.$refs.videoPlayer, {
132 |           preload: 'auto',
133 |           playbackRates: [0.5, 1, 1.5, 2, 2.5, 3],
134 |         }).ready(function () {
135 |           console.log('videojs ready')
136 |           that.videoInstance = this;
137 |           that.videoInstance.src(that.videoSrc);
138 |         });
139 |       },
140 |       initStudentWork(id) {
141 |         Get(`${API.studentWork.own}?learningContentId=${id}`)
142 |           .withSuccessCode(200)
143 |           .do(response => {
144 |             let data = response.data.data;
145 |             if (data) {
146 |               data = formatItemResponseDateTime(data);
147 |               data.size = formatFileSize(data.size);
148 |               if (!data.suggest) {
149 |                 data = {...data, score: 0, suggest: '教师未给出建议和评分'};
150 |               }
151 |             } else {
152 |               data = {score: 0, suggest: '教师未给出建议和评分'};
153 |             }
154 |             this.studentWork = data;
155 |           })
156 |       },
157 |       downloadLearningContent(type) {
158 |         const api = `${API.learningContent.download}${type}/${this.learningContent.nowId}`;
159 |         Download(api, () => `教师资料.${type === 'video' ? this.nowLearningContent.extensionName : this.nowLearningContent.aidExtensionName}`)
160 |       }
161 |     },
162 |     created() {
163 |       videoLoader().then(videojs => {
164 |         console.log('videojs加载状态：' + (videojs !== undefined));
165 |         this.initLearningContent();
166 |       }, e => {
167 |         console.log('videojs加载失败', e)
168 |       });
169 |     },
170 |     beforeDestroy() {
171 |       if (this.videoInstance) {
172 |         this.videoInstance.dispose();
173 |         console.log('videoInstance dispose');
174 |       }
175 |     }
176 |   }
177 | </script>
178 | 
179 | <style scoped>
180 | 
181 | </style>
182 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright 2019 itning
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/public/video-js.min.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.vjs-modal-dialog .vjs-modal-dialog-content{position:absolute;top:0;left:0;width:100%;height:100%}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-button>.vjs-icon-placeholder:before{text-align:center}@font-face{font-family:VideoJS;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABDkAAsAAAAAG6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3hY21hcAAAAYQAAADaAAADPv749/pnbHlmAAACYAAAC3AAABHQZg6OcWhlYWQAAA3QAAAAKwAAADYZw251aGhlYQAADfwAAAAdAAAAJA+RCLFobXR4AAAOHAAAABMAAACM744AAGxvY2EAAA4wAAAASAAAAEhF6kqubWF4cAAADngAAAAfAAAAIAE0AIFuYW1lAAAOmAAAASUAAAIK1cf1oHBvc3QAAA/AAAABJAAAAdPExYuNeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGS7wTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGJHcRdyA4RZgQRADK3CxEAAHic7dFZbsMgAEXRS0ycyZnnOeG7y+qC8pU1dHusIOXxuoxaOlwZYWQB0Aea4quIEN4E9LzKbKjzDeM6H/mua6Lmc/p8yhg0lvdYx15ZG8uOLQOGjMp3EzqmzJizYMmKNRu27Nhz4MiJMxeu3Ljz4Ekqm7T8P52G8PP3lnTOVk++Z6iN6QZzNN1F7ptuN7eGOjDUoaGODHVsuvU8MdTO9Hd5aqgzQ50b6sJQl4a6MtS1oW4MdWuoO0PdG+rBUI+GejLUs6FeDPVqqDdDvRvqw1CfhpqM9At0iFLaAAB4nJ1YDXBTVRZ+5/22TUlJ8we0pHlJm7RJf5O8F2j6EymlSPkpxaL8U2xpa3DKj0CBhc2IW4eWKSokIoLsuMqssM64f+jA4HSdWXXXscBq67IOs3FXZ1ZYWVyRFdo899yXtIBQZ90k7717zz3v3HPPOfd854YCCj9cL9dL0RQFOqCbGJnrHb5EayiKIWN8iA/hWBblo6hUWm8TtCDwE80WMJus/irwyxOdxeB0MDb14VNJHnXYoLLSl6FfCUYO9nYPTA8Epg9090LprfbBbZ2hY0UlJUXHQp3/vtWkS6EBv8+rPMq5u9692f/dNxJNiqwC1xPE9TCUgCsSdQWgE3XQD25lkG4CN2xmTcOXWBOyser6RN6KnGbKSbmQ3+d0OI1m2W8QzLLkI2sykrWAgJJEtA8vGGW/2Q+CmT3n8zS9wZwu2DCvtuZKZN3xkrLh36yCZuUomQSqGpY8t/25VfHVhw8z4ebGBtfLb0ya9PCaDc+8dGTvk2dsh6z7WzvowlXKUSWo9MJ15a3KrEP2loOr2Ojhw6iW6hf2BDdEccQvZGpaAy7YovSwq8kr7HGllxpd71rkS6G0Sf11sl9OvMK1+jwPPODxjUwkOim9CU3ix1wNjXDfmJSEn618Bs6lpWwUpU+8PCqLMY650zjq8VhCIP17NEKTx3eaLL+s5Pi6yJWaWjTHLR1jYzPSV9VF/6Ojdb/1kO3Mk3uhHC0x6gc1BjlKQ+nQFxTYdaJkZ7ySVxLBbhR1dsboNXp1tCYKW2LRaEzpYcIx2BKNxaL0ZaUnSqfFoiNhHKR/GkX6PWUSAaJelQaqZL1EpoHNsajSEyPSoJ9IjhIxTdjHLmwZvhRDOiFTY/YeQnvrVZmiTQtGncECXtFTBZLOVwwMRgoXHAkXzMzPn1nAJJ8jYSbMDaqN2waGLzNhih/bZynUBMpIWSg7VYi7DRx2m8ALkIdRCJwI6ArJx2EI8kaDWeTQKeAFk9fjl/1AvwktjQ1P7NjyMGQyfd4vjipX6M/i52D7Cq80kqlcxEcGXRr/FEcgs0u5uGgB4VWuMFfpdn2Re6Hi3PqzmxWKsz6+ae2Pn9hXXw/fqM859UiGC0oKYYILJBqJrsn1Z1E5qOs9rQCiUQRREjm8yJcbHF5cUJufX1vAHlefw0XgUoboS3ETfQlTxBC4SOtuE8VPRJTBSCQSjZCpk7Gqzu+masaZ2y7Zjehho4F3g82BNDkAHpORG4+OCS+f6JTPmtRn/PH1kch6d04sp7AQb25aQ/pqUyXeQ8vrebG8OYQdXOQ+585u0sdW9rqalzRURiJ+9F4MweRFrKUjl1GUYhH1A27WOHw5cTFSFPMo9EeUIGnQTZHIaJ7AHLaOKsOODaNF9jkBjYG2QEsQ2xjMUAx2bBEbeTBWMHwskBjngq56S/yfgkBnWBa4K9sqKtq2t1UI8S9He5XuBRbawAdatrQEAi30Aks2+LM8WeCbalVZkWNylvJ+dqJnzVb+OHlSoKW8nPCP7Rd+CcZ2DdWAGqJ2CBFOphgywFFCFBNtfAbGtNPBCwxvygHeYMZMY9ZboBqwq/pVrsbgN5tkv152ODlbMfiqwGMBgxa4Exz3QhovRIUp6acqZmQzRq0ypDXS2TPLT02YIkQETnOE445oOGxOmXAqUJNNG7XgupMjPq2ua9asrj5yY/yuKteO1Kx0YNJTufrirLe1mZnat7OL6rnUdCWenpW6I8mAnbsY8KWs1PuSovCW9A/Z25PQ24a7cNOqgmTkLmBMgh4THgc4b9k2IVv1/g/F5nGljwPLfOgHAzJzh45V/4+WenTzmMtR5Z7us2Tys909UHqrPY7KbckoxRvRHhmVc3cJGE97uml0R1S0jdULVl7EvZtDFVBF35N9cEdjpgmAiOlFZ+Dtoh93+D3zzHr8RRNZQhnCNMNbcegOvpEwZoL+06cJQ07h+th3fZ/7PVbVC6ngTAV/KoLFuO6+2KFcU651gEb5ugPSIb1D+Xp8V4+k3sEIGnw5mYe4If4k1lFYr6SCzmM2EQ8iWtmwjnBI9kTwe1TlfAmXh7H02by9fW2gsjKwtv0aaURKil4OdV7rDL1MXIFNrhdxohcZXYTnq47WisrKitaObbf5+yvkLi5J6lCNZZ+B6GC38VNBZBDidSS/+mSvh6s+srgC8pyKMvDtt+de3c9fU76ZPfuM8ud4Kv0fyP/LqfepMT/3oZxSqpZaTa1DaQYLY8TFsHYbWYsPoRhRWfL5eSSQbhUGgGC3YLbVMk6PitTFNGpAsNrC6D1VNBKgBHMejaiuRWEWGgsSDBTJjqWIl8kJLlsaLJ2tXDr6xGfT85bM2Q06a46x2HTgvdnV8z5YDy/27J4zt6x2VtkzjoYpkq36kaBr4eQSg7tyiVweWubXZugtadl58ydapfbORfKsDTuZ0OBgx4cfdjCf5tbWNITnL120fdOi1RV1C3uKGzNdwYLcMvZ3BxoPyTOCD1XvXTp7U10gWCVmTV9b3r2z0SkGWovb2hp9I89O8a2smlyaO8muMU+dRmtzp60IzAoFpjLr1n388boLyf0dRvxhsHZ0qbWqDkwqvvpkj4l0fY6EIXRi5sQSrAvsVYwXRy4qJ2EVtD1AN7a0HWth9ymvL1xc3WTUKK/TAHA/bXDVtVWfOMfuGxGZv4Ln/jVr9jc3j1yMv0tndmyt9Vq88Y9gH1wtLX3KWjot5++jWHgAoZZkQ14wGQ20Fli71UmKJAy4xKMSTGbVdybW7FDDAut9XpD5AzWrYO7zQ8qffqF8+Ynd/clrHcdyxGy3a/3+mfNnzC/cBsveTjnTvXf1o6vzOlZw7WtqtdmPK/Errz/6NNtD72zmNOZfbmYdTGHfoofqI79Oc+R2n1lrnL6pOm0Up7kwxhTW12Amm7WYkXR2qYrF2AmgmbAsxZjwy1xpg/m1Je2vrp8v/nz2xpmlBg4E9hrMU341wVpTOh/OfmGvAnra8q6uctr60ZQHV3Q+WMQJykMj8ZsWn2QBOmmHMB+m5pDIpTFonYigiaKAhGEiAHF7EliVnQkjoLVIMPtJpBKHYd3A8GYH9jJzrWwmHx5Qjp7vDAX0suGRym1vtm/9W1/HyR8vczfMs6Sk8DSv855/5dlX9oQq52hT8syyp2rx5Id17IAyAM3wIjQPMOHzytEB64q6D5zT91yNbnx3V/nqnd017S9Y0605k3izoXLpsxde2n38yoOV9s1LcjwzNjbdX6asnBVaBj/6/DwKwPkpcqbDG7BnsXoSqWnUAmottYF6jMSdVyYZh3zVXCjwTiwwHH6sGuRiEHQGzuRX6whZkp123oy1BWE2mEfJ/tvIRtM4ZM5bDXiMsPMaAKOTyc5uL57rqyyc5y5JE5pm1i2S2iUX0CcaQ6lC6Zog7JqSqZmYlosl2K6pwNA84zRnQW6SaALYZQGW5lhCtU/W34N6o+bKfZ8cf3/Cl/+iTX3wBzpOY4mRkeNf3rptycGSshQWgGbYt5jFc2e0+DglIrwl6DVWQ7BuwaJ3Xk1J4VL5urnLl/Wf+gHU/hZoZdKNym6lG+I34FaNeZKcSpJIo2IeCVvpdsDGfKvzJnAwmeD37Ow65ZWwSowpgwX5T69s/rB55dP5BcpgDKFV8p7q2sn/1uc93bVzT/w6UrCqDTWvfCq/oCD/qZXNoUj8BL5Kp6GU017frfNXkAtiiyf/SOCEeLqnd8R/Ql9GlCRfctS6k5chvIBuQ1zCCjoCHL2DHNHIXxMJ3kQeO8lbsUXONeSfA5EjcG6/E+KdhN4bP04vBhdi883+BFBzQbxFbvZzQeY9LNBZc0FNfn5NwfDn6rCTnTw6R8o+gfpf5hCom33cRuiTlss3KHmZjD+BPN+5gXuA2ziS/Q73mLxUkpbKN/eqwz5uK0X9F3h2d1V4nGNgZGBgAOJd776+iue3+crAzc4AAje5Bfcg0xz9YHEOBiYQBQA8FQlFAHicY2BkYGBnAAGOPgaG//85+hkYGVCBMgBGGwNYAAAAeJxjYGBgYB8EmKOPgQEAQ04BfgAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG4IhAi2COh4nGNgZGBgUGYoZWBnAAEmIOYCQgaG/2A+AwAYCQG2AHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkMl2wjAMRfOAhABlKm2h80C3+ajgCKKDY6cegP59TYBzukAL+z1Zsq8ctaJTTKPrsUQLbXQQI0EXKXroY4AbDDHCGBNMcYsZ7nCPB8yxwCOe8IwXvOIN7/jAJ76wxHfUqWX+OzgumWAjJMV17i0Ndlr6irLKO+qftdT7i6y4uFSUvCknay+lFYZIZaQcmfH/xIFdYn98bqhra1aKTM/6lWMnyaYirx1rFUQZFBkb2zJUtoXeJCeg0WnLtHeSFc3OtrnozNwqi0TkSpBMDB1nSde5oJXW23hTS2/T0LilglXX7dmFVxLnq5U0vYATHFk3zX3BOisoQHNDFDeZnqKDy9hRNawN7Vh727hFzcJ5c8TILrKZfH7tIPxAFP0BpLeJPA==) format("woff");font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder,.vjs-icon-play{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder:before,.vjs-icon-play:before{content:"\f101"}.vjs-icon-play-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-play-circle:before{content:"\f102"}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,.vjs-icon-pause{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,.vjs-icon-pause:before{content:"\f103"}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder,.vjs-icon-volume-mute{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before,.vjs-icon-volume-mute:before{content:"\f104"}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder,.vjs-icon-volume-low{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before,.vjs-icon-volume-low:before{content:"\f105"}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder,.vjs-icon-volume-mid{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,.vjs-icon-volume-mid:before{content:"\f106"}.video-js .vjs-mute-control .vjs-icon-placeholder,.vjs-icon-volume-high{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-mute-control .vjs-icon-placeholder:before,.vjs-icon-volume-high:before{content:"\f107"}.video-js .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-enter{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-enter:before{content:"\f108"}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-exit{font-family:VideoJS;font-weight:400;font-style:normal}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-exit:before{content:"\f109"}.vjs-icon-square{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-square:before{content:"\f10a"}.vjs-icon-spinner{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-spinner:before{content:"\f10b"}.video-js .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-subtitles-button .vjs-icon-placeholder,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-subtitles{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-subtitles-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-subtitles:before{content:"\f10c"}.video-js .vjs-captions-button .vjs-icon-placeholder,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-captions{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-captions-button .vjs-icon-placeholder:before,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-captions:before{content:"\f10d"}.video-js .vjs-chapters-button .vjs-icon-placeholder,.vjs-icon-chapters{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-chapters-button .vjs-icon-placeholder:before,.vjs-icon-chapters:before{content:"\f10e"}.vjs-icon-share{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-share:before{content:"\f10f"}.vjs-icon-cog{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cog:before{content:"\f110"}.video-js .vjs-play-progress,.video-js .vjs-volume-level,.vjs-icon-circle,.vjs-seek-to-live-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-progress:before,.video-js .vjs-volume-level:before,.vjs-icon-circle:before,.vjs-seek-to-live-control .vjs-icon-placeholder:before{content:"\f111"}.vjs-icon-circle-outline{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-outline:before{content:"\f112"}.vjs-icon-circle-inner-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-inner-circle:before{content:"\f113"}.vjs-icon-hd{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-hd:before{content:"\f114"}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder,.vjs-icon-cancel{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before,.vjs-icon-cancel:before{content:"\f115"}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,.vjs-icon-replay{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before,.vjs-icon-replay:before{content:"\f116"}.vjs-icon-facebook{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-facebook:before{content:"\f117"}.vjs-icon-gplus{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-gplus:before{content:"\f118"}.vjs-icon-linkedin{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-linkedin:before{content:"\f119"}.vjs-icon-twitter{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-twitter:before{content:"\f11a"}.vjs-icon-tumblr{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-tumblr:before{content:"\f11b"}.vjs-icon-pinterest{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-pinterest:before{content:"\f11c"}.video-js .vjs-descriptions-button .vjs-icon-placeholder,.vjs-icon-audio-description{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-descriptions-button .vjs-icon-placeholder:before,.vjs-icon-audio-description:before{content:"\f11d"}.video-js .vjs-audio-button .vjs-icon-placeholder,.vjs-icon-audio{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-audio-button .vjs-icon-placeholder:before,.vjs-icon-audio:before{content:"\f11e"}.vjs-icon-next-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-next-item:before{content:"\f11f"}.vjs-icon-previous-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-previous-item:before{content:"\f120"}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-enter{font-family:VideoJS;font-weight:400;font-style:normal}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-enter:before{content:"\f121"}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-exit{font-family:VideoJS;font-weight:400;font-style:normal}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-exit:before{content:"\f122"}.video-js{display:block;vertical-align:top;box-sizing:border-box;color:#fff;background-color:#000;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;word-break:initial}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js[tabindex="-1"]{outline:0}.video-js *,.video-js :after,.video-js :before{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-fluid{width:100%;max-width:100%;height:0}.video-js.vjs-16-9{padding-top:56.25%}.video-js.vjs-4-3{padding-top:75%}.video-js.vjs-fill{width:100%;height:100%}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}body.vjs-full-window{padding:0;margin:0;height:100%}.vjs-full-window .video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0}.video-js.vjs-fullscreen{width:100%!important;height:100%!important;padding-top:0!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1;visibility:visible}.vjs-no-js{padding:20px;color:#fff;background-color:#000;font-size:18px;font-family:Arial,Helvetica,sans-serif;text-align:center;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.video-js .vjs-big-play-button{font-size:3em;line-height:1.5em;height:1.63332em;width:3em;display:block;position:absolute;top:10px;left:10px;padding:0;cursor:pointer;opacity:1;border:.06666em solid #fff;background-color:#2b333f;background-color:rgba(43,51,63,.7);border-radius:.3em;transition:all .4s}.vjs-big-play-centered .vjs-big-play-button{top:50%;left:50%;margin-top:-.81666em;margin-left:-1.5em}.video-js .vjs-big-play-button:focus,.video-js:hover .vjs-big-play-button{border-color:#fff;background-color:#73859f;background-color:rgba(115,133,159,.5);transition:all 0s}.vjs-controls-disabled .vjs-big-play-button,.vjs-error .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button{display:none}.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button{display:block}.video-js button{background:0 0;border:none;color:inherit;display:inline-block;font-size:inherit;line-height:inherit;text-transform:none;text-decoration:none;transition:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vjs-control .vjs-button{width:100%;height:100%}.video-js .vjs-control.vjs-close-button{cursor:pointer;height:3em;position:absolute;right:0;top:.5em;z-index:2}.video-js .vjs-modal-dialog{background:rgba(0,0,0,.8);background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(255,255,255,0));overflow:auto}.video-js .vjs-modal-dialog>*{box-sizing:border-box}.vjs-modal-dialog .vjs-modal-dialog-content{font-size:1.2em;line-height:1.5;padding:20px 24px;z-index:1}.vjs-menu-button{cursor:pointer}.vjs-menu-button.vjs-disabled{cursor:default}.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu{display:none}.vjs-menu .vjs-menu-content{display:block;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;overflow:auto}.vjs-menu .vjs-menu-content>*{box-sizing:border-box}.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu{display:none}.vjs-menu li{list-style:none;margin:0;padding:.2em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.js-focus-visible .vjs-menu li.vjs-menu-item:hover,.vjs-menu li.vjs-menu-item:focus,.vjs-menu li.vjs-menu-item:hover{background-color:#73859f;background-color:rgba(115,133,159,.5)}.js-focus-visible .vjs-menu li.vjs-selected:hover,.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover{background-color:#fff;color:#2b333f}.vjs-menu li.vjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em 0;font-weight:700;cursor:default}.vjs-menu-button-popup .vjs-menu{display:none;position:absolute;bottom:0;width:10em;left:-3em;height:0;margin-bottom:1.5em;border-top-color:rgba(43,51,63,.7)}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#2b333f;background-color:rgba(43,51,63,.7);position:absolute;width:100%;bottom:1.5em;max-height:15em}.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:5em}.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:10em}.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:14em}.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:25em}.vjs-menu-button-popup .vjs-menu.vjs-lock-showing,.vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu{display:block}.video-js .vjs-menu-button-inline{transition:all .4s;overflow:hidden}.video-js .vjs-menu-button-inline:before{width:2.222222222em}.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline{width:12em}.vjs-menu-button-inline .vjs-menu{opacity:0;height:100%;width:auto;position:absolute;left:4em;top:0;padding:0;margin:0;transition:all .4s}.vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-menu-button-inline:focus .vjs-menu,.vjs-menu-button-inline:hover .vjs-menu{display:block;opacity:1}.vjs-no-flex .vjs-menu-button-inline .vjs-menu{display:block;opacity:1;position:relative;width:auto}.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu{width:auto}.vjs-menu-button-inline .vjs-menu-content{width:auto;height:100%;margin:0;overflow:hidden}.video-js .vjs-control-bar{display:none;width:100%;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.vjs-has-started .vjs-control-bar{display:flex;visibility:visible;opacity:1;transition:visibility .1s,opacity .1s}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{visibility:visible;opacity:0;transition:visibility 1s,opacity 1s}.vjs-controls-disabled .vjs-control-bar,.vjs-error .vjs-control-bar,.vjs-using-native-controls .vjs-control-bar{display:none!important}.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;visibility:visible}.vjs-has-started.vjs-no-flex .vjs-control-bar{display:table}.video-js .vjs-control{position:relative;text-align:center;margin:0;padding:0;height:100%;width:4em;flex:none}.vjs-button>.vjs-icon-placeholder:before{font-size:1.8em;line-height:1.67}.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before{text-shadow:0 0 1em #fff}.video-js .vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.vjs-no-flex .vjs-control{display:table-cell;vertical-align:middle}.video-js .vjs-custom-control-spacer{display:none}.video-js .vjs-progress-control{cursor:pointer;flex:auto;display:flex;align-items:center;min-width:4em;touch-action:none}.video-js .vjs-progress-control.disabled{cursor:default}.vjs-live .vjs-progress-control{display:none}.vjs-liveui .vjs-progress-control{display:flex;align-items:center}.vjs-no-flex .vjs-progress-control{width:auto}.video-js .vjs-progress-holder{flex:auto;transition:all .2s;height:.3em}.video-js .vjs-progress-control .vjs-progress-holder{margin:0 10px}.video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:1.6666666667em}.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled{font-size:1em}.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.video-js .vjs-progress-holder .vjs-play-progress{position:absolute;display:block;height:100%;margin:0;padding:0;width:0}.video-js .vjs-play-progress{background-color:#fff}.video-js .vjs-play-progress:before{font-size:.9em;position:absolute;right:-.5em;top:-.3333333333em;z-index:1}.video-js .vjs-load-progress{background:rgba(115,133,159,.5)}.video-js .vjs-load-progress div{background:rgba(115,133,159,.75)}.video-js .vjs-time-tooltip{background-color:#fff;background-color:rgba(255,255,255,.8);border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-progress-holder:focus .vjs-time-tooltip{display:none}.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-time-tooltip{display:block;font-size:.6em;visibility:visible}.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip{font-size:1em}.video-js .vjs-progress-control .vjs-mouse-display{display:none;position:absolute;width:1px;height:100%;background-color:#000;z-index:1}.vjs-no-flex .vjs-progress-control .vjs-mouse-display{z-index:0}.video-js .vjs-progress-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display{display:none}.vjs-mouse-display .vjs-time-tooltip{color:#fff;background-color:#000;background-color:rgba(0,0,0,.8)}.video-js .vjs-slider{position:relative;cursor:pointer;padding:0;margin:0 .45em 0 .45em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#73859f;background-color:rgba(115,133,159,.5)}.video-js .vjs-slider.disabled{cursor:default}.video-js .vjs-slider:focus{text-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.video-js .vjs-mute-control{cursor:pointer;flex:none}.video-js .vjs-volume-control{cursor:pointer;margin-right:1em;display:flex}.video-js .vjs-volume-control.vjs-volume-horizontal{width:5em}.video-js .vjs-volume-panel .vjs-volume-control{visibility:visible;opacity:0;width:1px;height:1px;margin-left:-1px}.video-js .vjs-volume-panel{transition:width 1s}.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active,.video-js .vjs-volume-panel .vjs-volume-control:active,.video-js .vjs-volume-panel .vjs-volume-control:hover,.video-js .vjs-volume-panel:active .vjs-volume-control,.video-js .vjs-volume-panel:focus .vjs-volume-control,.video-js .vjs-volume-panel:hover .vjs-volume-control{visibility:visible;opacity:1;position:relative;transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s}.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal{width:5em;height:3em}.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical{left:-3.5em}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover{width:9em;transition:width .1s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only{width:4em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{height:8em;width:3em;left:-3000em;transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s}.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{width:5em;height:3em;visibility:visible;opacity:1;position:relative;transition:none}.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{position:absolute;bottom:3em;left:.5em}.video-js .vjs-volume-panel{display:flex}.video-js .vjs-volume-bar{margin:1.35em .45em}.vjs-volume-bar.vjs-slider-horizontal{width:5em;height:.3em}.vjs-volume-bar.vjs-slider-vertical{width:.3em;height:5em;margin:1.35em auto}.video-js .vjs-volume-level{position:absolute;bottom:0;left:0;background-color:#fff}.video-js .vjs-volume-level:before{position:absolute;font-size:.9em}.vjs-slider-vertical .vjs-volume-level{width:.3em}.vjs-slider-vertical .vjs-volume-level:before{top:-.5em;left:-.3em}.vjs-slider-horizontal .vjs-volume-level{height:.3em}.vjs-slider-horizontal .vjs-volume-level:before{top:-.3em;right:-.5em}.video-js .vjs-volume-panel.vjs-volume-panel-vertical{width:4em}.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level{height:100%}.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level{width:100%}.video-js .vjs-volume-vertical{width:3em;height:8em;bottom:8em;background-color:#2b333f;background-color:rgba(43,51,63,.7)}.video-js .vjs-volume-horizontal .vjs-menu{left:-2em}.vjs-poster{display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000;cursor:pointer;margin:0;padding:0;position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.vjs-has-started .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster{display:block}.vjs-using-native-controls .vjs-poster{display:none}.video-js .vjs-live-control{display:flex;align-items:flex-start;flex:auto;font-size:1em;line-height:3em}.vjs-no-flex .vjs-live-control{display:table-cell;width:auto;text-align:left}.video-js.vjs-liveui .vjs-live-control,.video-js:not(.vjs-live) .vjs-live-control{display:none}.video-js .vjs-seek-to-live-control{cursor:pointer;flex:none;display:inline-flex;height:100%;padding-left:.5em;padding-right:.5em;font-size:1em;line-height:3em;width:auto;min-width:4em}.vjs-no-flex .vjs-seek-to-live-control{display:table-cell;width:auto;text-align:left}.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,.video-js:not(.vjs-live) .vjs-seek-to-live-control{display:none}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{cursor:auto}.vjs-seek-to-live-control .vjs-icon-placeholder{margin-right:.5em;color:#888}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder{color:red}.video-js .vjs-time-control{flex:none;font-size:1em;line-height:3em;min-width:2em;width:auto;padding-left:1em;padding-right:1em}.vjs-live .vjs-time-control{display:none}.video-js .vjs-current-time,.vjs-no-flex .vjs-current-time{display:none}.video-js .vjs-duration,.vjs-no-flex .vjs-duration{display:none}.vjs-time-divider{display:none;line-height:3em}.vjs-live .vjs-time-divider{display:none}.video-js .vjs-play-control{cursor:pointer}.video-js .vjs-play-control .vjs-icon-placeholder{flex:none}.vjs-text-track-display{position:absolute;bottom:3em;left:0;right:0;top:0;pointer-events:none}.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:1em}.video-js .vjs-text-track{font-size:1.4em;text-align:center;margin-bottom:.1em}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}video::-webkit-media-text-track-display{transform:translateY(-3em)}.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display{transform:translateY(-1.5em)}.video-js .vjs-picture-in-picture-control{cursor:pointer;flex:none}.video-js .vjs-fullscreen-control{cursor:pointer;flex:none}.vjs-playback-rate .vjs-playback-rate-value,.vjs-playback-rate>.vjs-menu-button{position:absolute;top:0;left:0;width:100%;height:100%}.vjs-playback-rate .vjs-playback-rate-value{pointer-events:none;font-size:1.5em;line-height:2;text-align:center}.vjs-playback-rate .vjs-menu{width:4em;left:0}.vjs-error .vjs-error-display .vjs-modal-dialog-content{font-size:1.4em;text-align:center}.vjs-error .vjs-error-display:before{color:#fff;content:"X";font-family:Arial,Helvetica,sans-serif;font-size:4em;left:0;line-height:1;margin-top:-.5em;position:absolute;text-shadow:.05em .05em .1em #000;text-align:center;top:50%;vertical-align:middle;width:100%}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;opacity:.85;text-align:left;border:6px solid rgba(43,51,63,.7);box-sizing:border-box;background-clip:padding-box;width:50px;height:50px;border-radius:25px;visibility:hidden}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:block;-webkit-animation:vjs-spinner-show 0s linear .3s forwards;animation:vjs-spinner-show 0s linear .3s forwards}.vjs-loading-spinner:after,.vjs-loading-spinner:before{content:"";position:absolute;margin:-6px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:1;border:inherit;border-color:transparent;border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before{-webkit-animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite;animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before{border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after{border-top-color:#fff;-webkit-animation-delay:.44s;animation-delay:.44s}@keyframes vjs-spinner-show{to{visibility:visible}}@-webkit-keyframes vjs-spinner-show{to{visibility:visible}}@keyframes vjs-spinner-spin{100%{transform:rotate(360deg)}}@-webkit-keyframes vjs-spinner-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}100%{border-top-color:#73859f}}@-webkit-keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}100%{border-top-color:#73859f}}.vjs-chapters-button .vjs-menu ul{width:24em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:"";font-size:1.5em;line-height:inherit}.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:" ";font-size:1.5em;line-height:inherit}.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-audio-button,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-captions-button,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-chapters-button,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-current-time,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-descriptions-button,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-duration,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-playback-rate,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-remaining-time,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-subtitles-button,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-time-divider,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-control,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-audio-button,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-captions-button,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-chapters-button,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-current-time,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-descriptions-button,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-duration,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-playback-rate,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-remaining-time,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-subtitles-button,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-time-divider,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-control,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-audio-button,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-captions-button,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-chapters-button,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-current-time,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-descriptions-button,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-duration,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-playback-rate,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-remaining-time,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-subtitles-button,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-time-divider,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-control{display:none}.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover{width:auto;width:initial}.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-subs-caps-button,.video-js:not(.vjs-fullscreen).vjs-layout-x-small:not(.vjs-live) .vjs-subs-caps-button,.video-js:not(.vjs-fullscreen).vjs-layout-x-small:not(.vjs-liveui) .vjs-subs-caps-button{display:none}.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-custom-control-spacer,.video-js:not(.vjs-fullscreen).vjs-layout-x-small.vjs-liveui .vjs-custom-control-spacer{flex:auto;display:block}.video-js:not(.vjs-fullscreen).vjs-layout-tiny.vjs-no-flex .vjs-custom-control-spacer,.video-js:not(.vjs-fullscreen).vjs-layout-x-small.vjs-liveui.vjs-no-flex .vjs-custom-control-spacer{width:auto}.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-progress-control,.video-js:not(.vjs-fullscreen).vjs-layout-x-small.vjs-liveui .vjs-progress-control{display:none}.vjs-modal-dialog.vjs-text-track-settings{background-color:#2b333f;background-color:rgba(43,51,63,.75);color:#fff;height:70%}.vjs-text-track-settings .vjs-modal-dialog-content{display:table}.vjs-text-track-settings .vjs-track-settings-colors,.vjs-text-track-settings .vjs-track-settings-controls,.vjs-text-track-settings .vjs-track-settings-font{display:table-cell}.vjs-text-track-settings .vjs-track-settings-controls{text-align:right;vertical-align:bottom}@supports (display:grid){.vjs-text-track-settings .vjs-modal-dialog-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;padding:20px 24px 0 24px}.vjs-track-settings-controls .vjs-default-button{margin-bottom:20px}.vjs-text-track-settings .vjs-track-settings-controls{grid-column:1/-1}.vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content{grid-template-columns:1fr}}.vjs-track-setting>select{margin-right:1em;margin-bottom:.5em}.vjs-text-track-settings fieldset{margin:5px;padding:3px;border:none}.vjs-text-track-settings fieldset span{display:inline-block}.vjs-text-track-settings fieldset span>select{max-width:7.3em}.vjs-text-track-settings legend{color:#fff;margin:0 0 5px 0}.vjs-text-track-settings .vjs-label{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);display:block;margin:0 0 5px 0;padding:0;border:0;height:1px;width:1px;overflow:hidden}.vjs-track-settings-controls button:active,.vjs-track-settings-controls button:focus{outline-style:solid;outline-width:medium;background-image:linear-gradient(0deg,#fff 88%,#73859f 100%)}.vjs-track-settings-controls button:hover{color:rgba(43,51,63,.75)}.vjs-track-settings-controls button{background-color:#fff;background-image:linear-gradient(-180deg,#fff 88%,#73859f 100%);color:#2b333f;cursor:pointer;border-radius:2px}.vjs-track-settings-controls .vjs-default-button{margin-right:1em}@media print{.video-js>:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.vjs-resize-manager{position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:-1000}.js-focus-visible .video-js :focus:not(.focus-visible){outline:0;background:0 0}.video-js .vjs-menu :focus:not(:focus-visible),.video-js :focus:not(:focus-visible){outline:0;background:0 0}


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