diff --git a/src/assets/img/arrow-down.png b/src/assets/img/arrow-down.png
new file mode 100644
index 0000000..dc9a3a9
Binary files /dev/null and b/src/assets/img/arrow-down.png differ
diff --git a/src/assets/img/none.png b/src/assets/img/none.png
new file mode 100644
index 0000000..2e23da1
Binary files /dev/null and b/src/assets/img/none.png differ
diff --git a/src/libs/core.js b/src/libs/core.js
new file mode 100644
index 0000000..acbff8b
--- /dev/null
+++ b/src/libs/core.js
@@ -0,0 +1,202 @@
+const pad2 = str => ('0' + str).substr(-2)
+
+function fMoney (s, n) {
+  n = n > 0 && n <= 20 ? n : 2
+  s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
+  let l = s.split('.')[0].split('').reverse()
+  let r = s.split('.')[1]
+  let t = ''
+  for(let i = 0; i < l.length; i ++ ) {
+    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '')
+  }
+  return t.split('').reverse().join('') + '.' + r
+}
+
+function toDateTime (date, time) {
+  if (!date) return ''
+  date = date.toString()
+  time = time ? time.toString() : ''
+  let str = `${date.substr(0, 4)}-${date.substr(4, 2)}-${date.substr(6, 2)}`
+  if (date.length == 14) {
+    str += ` ${date.substr(8, 2)}:${date.substr(10, 2)}:${date.substr(12, 2)}`
+  } else if (date.length == 6) {
+    str = `${date.substr(0, 2)}:${date.substr(2, 2)}:${date.substr(4, 2)}`
+  } else if (time) {
+    str += ` ${time.substr(0, 2)}:${time.substr(2, 2)}:${time.substr(4, 2)}`
+  }
+  return str
+}
+
+function fMoney2 (m) {
+  return parseFloat(m).toFixed(2)
+}
+
+function orderreleaseType (sts) {
+  const status = {
+    '0': '手动发布',
+    '1': '定时发布',
+  }
+  return status[sts] || '未知状态'
+}
+
+function orderflag (sts) {
+  const status = {
+    '0': true,
+    '1': false,
+
+  }
+  return status[sts] || '未知状态'
+}
+
+function orderassesmentState (sts) {
+  const status = {
+    '0': '待开始',
+    '1': '进行中',
+    '2': '已结束',
+ 
+  }
+  return status[sts] || '未知状态'
+}
+
+function orderfounder (sts) {
+  const status = {
+    '0': '系统',
+    '1': '老师'
+  }
+  return status[sts] || '未知状态'
+}
+function projectPermissions (sts) {
+  const status = {
+    '1': '考核',
+    '2': '竞赛',
+    '0': '练习'
+
+  }
+  return status[sts] || '未知状态'
+}
+
+function roleType (type) {
+  const types = {
+    '2': '管理员',
+    '3': '老师',
+    '4': '学生'
+  }
+  return types[type] || '未知类型'
+}
+
+function educationDegreeList (id) {
+  const list = [
+    {
+      name: '专科',
+      value: 1
+    },
+    {
+      name: '本科',
+      value: 2
+    },
+    {
+      name: '硕士',
+      value: 3
+    },
+    {
+      name: '博士',
+      value: 4
+    },
+    {
+      name: '其他',
+      value: 5
+    }
+  ]
+  let educationdegree = list.find((n,k) => {
+    return n.value == id
+  }).name
+  return educationdegree
+}
+
+//返回格式化时间，传参例如："yyyy-MM-dd hh:mm:ss"
+function formatDate(fmt,date) {
+  var date = date ? date : new Date()
+  var o = { 
+    "M+" : date.getMonth()+1,                 //月份 
+    "d+" : date.getDate(),                    //日 
+    "h+" : date.getHours(),                   //小时 
+    "m+" : date.getMinutes(),                 //分 
+    "s+" : date.getSeconds(),                 //秒 
+    "q+" : Math.floor((date.getMonth()+3)/3), //季度 
+    "S"  : date.getMilliseconds()             //毫秒 
+  }; 
+  if(/(y+)/.test(fmt)) {
+          fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
+  }
+  for(var k in o) {
+      if(new RegExp("("+ k +")").test(fmt)){
+          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
+      }
+  }
+  return fmt; 
+}
+
+function removeByValue(arr, val) {
+  for(var i=0; i<arr.length; i++) {
+      if(arr[i] == val) {
+      arr.splice(i, 1);
+      break;
+      }
+  }
+}
+
+function formateTime(num) {
+  return num < 10 ? `0${num}` : num
+}
+
+function getCaption(obj){
+  var index=obj.lastIndexOf("\h");
+  obj=obj.substring(index+1,obj.length);
+  return obj;
+}
+
+// new Date('2020-11-12 00:00:00') 在IE下失效，因此把-替换成/
+function dateCompatible(date) {
+  return date.replace(/\-/g, '/')
+}
+
+// 是否IE
+function isIE() {
+  if (!!window.ActiveXObject || "ActiveXObject" in window) return true
+  return false
+}
+
+// 是否edge
+function isEdge() {
+  let userAgent = navigator.userAgent
+  if (userAgent.includes("Edge")) return true
+  return false
+}
+
+// 是否火狐
+function isFirefox() {
+  let userAgent = navigator.userAgent
+  if (userAgent.indexOf("Firefox") > -1) return true
+  return false
+}
+
+export default{
+  orderfounder,
+  projectPermissions,
+  orderassesmentState,
+  fMoney,
+  fMoney2,
+  toDateTime,
+  orderreleaseType,
+  orderflag,
+  roleType,
+  educationDegreeList,
+  removeByValue,
+  formateTime,
+  getCaption,
+  formatDate,
+  isIE,
+  isFirefox,
+  isEdge,
+  dateCompatible
+}
\ No newline at end of file
diff --git a/src/pages/appraisal/list/index.vue b/src/pages/appraisal/list/index.vue
new file mode 100644
index 0000000..b3e9223
--- /dev/null
+++ b/src/pages/appraisal/list/index.vue
@@ -0,0 +1,441 @@
+<template>
+<div>
+    <div class="evaluation_con">
+        <div class="title">能力测评</div>
+        <div class="ques-wrap">
+            <p class="serial">{{ question.currentQuestionSortNo }}/{{ question.totalQuestionNum }}</p>
+            <p class="type">({{ question.questionTypeName }})</p>
+            <div class="ques">{{ question.questionStem }}</div>
+            <div class="countdown flex-center">
+                <img src="@/assets/img/hourglass.png" alt="">
+                <span>倒计时：{{ countdown }}</span>
+            </div>
+            <ul class="options" :class="{isDone}">
+                <li v-for="(item,key) in question.options" :key="key" :class="{active: selected.includes(key)}"
+                    @click="selectOption(key)"><em>{{ key }}.</em><span>{{ item }}</span></li>
+            </ul>
+        </div>
+
+        <div class="footer-con" v-if="!isDone">
+            <template v-if="lastOne">
+                <el-button @click="prevQues">上一题</el-button>
+                <el-button type="primary" @click="submitQues">提交</el-button>
+            </template>
+            <template v-else>
+                <el-button class="first" @click="prevQues">上一题</el-button>
+                <el-button class="second" type="primary" @click="nextQues">下一题</el-button>
+            </template>
+        </div>
+    </div>
+
+    <!-- 提交成绩弹框 -->
+    <el-dialog :visible.sync="resultVisible" width="30%" custom-class="result_dialog" center :close-on-click-modal="false" @close="toEvaluation">
+        <div class="result"><span>{{ result.isPassed }}</span></div>
+        <div class="ques-wrap">
+            <div class="point">
+                <span>{{ result.totalScore }}</span>分
+            </div>
+            <p class="tips">
+                {{ result.isPassed == "通过" ? "恭喜" : "" }}你答对{{ result.correctQuestionNum}}题，正确率{{ result.correctRate }}！</p>
+        </div>
+
+        <div slot="footer" class="dialog-footer">
+            <el-button class="first" @click="toEvaluation">再试一次</el-button>
+            <el-button class="second" type="primary" @click="getDetail">成绩详情</el-button>
+        </div>
+    </el-dialog>
+
+    <!-- 成绩详情弹框 -->
+    <el-dialog :visible.sync="detailVisible" width="30%" custom-class="detail_dialog" center :close-on-click-modal="false" @close="toEvaluation">
+        <div class="title">成绩详情</div>
+        <div style="min-height: 370px">
+            <el-table :data="detailData" height="340" border style="width: 100%">
+                <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
+                <el-table-column prop="date" label="正误" min-width="45" align="center">
+                    <template slot-scope="scope">
+                        <img v-if="scope.row.questionScore" width="15" src="@/assets/img/true.png" alt="">
+                        <img v-else width="15" src="@/assets/img/false.png" alt="">
+                    </template>
+                </el-table-column>
+                <el-table-column prop="questionScore" label="得分" min-width="45" align="center"></el-table-column>
+                <el-table-column prop="answer" label="正确答案" min-width="70" align="center"></el-table-column>
+                <el-table-column prop="userAnswer" label="你的答案" min-width="70" align="center"></el-table-column>
+                <el-table-column prop="answerAnalysis" label="解析" min-width="80"></el-table-column>
+            </el-table>
+        </div>
+        <p class="total">得分：{{ totalScore }}分</p>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+import util from "@/libs/util";
+import { mapActions } from "vuex";
+export default {
+    data() {
+        return {
+            timer: null,
+            question: {
+                options: {}
+            },
+            countdown: "",
+            selected: "",
+            isDone: false,
+            history: [],
+            lastOne: false,
+            resultVisible: false,
+            result: {},
+            detailVisible: false,
+            detailData: [],
+            totalScore: 0,
+        }
+    },
+    watch: {
+        question: {
+            handler(newVal, oldVal) {
+                for (let n in newVal.options) {
+                    if (newVal.options[n] == "") delete (newVal.options[n]);
+                }
+            },
+            deep: true
+        }
+    },
+    mounted() {
+        this.toEvaluation(); // 开始测评
+        this.$once("hook:beforeDestroy", function() {
+            clearInterval(this.timer);
+            this.timer = null;
+        });
+    },
+    methods: {
+        ...mapActions("appraisal", [
+            "setAnswerHistory"
+        ]),
+        async getDetail() { // 成绩详情
+            let res = await this.$get(this.api.experimentDetail, {
+                evaluationRecordId: this.question.id
+            });
+            if (res.data) {
+                this.totalScore = res.data.totalScore;
+                this.detailData = res.data.evaluationDetailVOS;
+                this.resultVisible = false;
+                this.detailVisible = true;
+            }
+        },
+        async submitQues() { // 提交
+            if (!this.selected) return util.warningMsg("请选择答案");
+            let res = await this.$post(this.api.experimentSubmit, {
+                id: this.question.id,
+                currentQuestionSortNo: this.question.currentQuestionSortNo,
+                // userAnswer: this.selected.split('').sort().join(','),
+                userAnswer: this.selected,
+                userId: this.userId,
+                types: 0
+            });
+            if (res.data) {
+                this.result = res.data;
+                this.evaluationVisible = false;
+                this.resultVisible = true;
+            }
+        },
+        async toEvaluation() { // 再试一次
+            clearInterval(this.timer);
+            this.lastOne = false;
+            this.selected = "";
+            this.resultVisible = false;
+            this.history = [];
+            this.start();
+            this.getCountdown();
+        },
+        handleQues() {
+            this.question.options = {};
+            for (let n in this.question) {
+                if (n.includes("option") && n != "options") {
+                    this.question.options[n.replace("option", "")] = this.question[n];
+                }
+            }
+            if (this.question.currentQuestionSortNo == this.question.totalQuestionNum) {
+                this.lastOne = true;
+            } else {
+                this.lastOne = false;
+            }
+        },
+        async start() {
+            let res = await this.$get(this.api.experimentStart, { userId: this.userId, types: 0 });
+            if (res.data) {
+                this.question = res.data;
+                this.isDone = false;
+                this.question.currentQuestionSortNo == 1 && this.setAnswerHistory([]);
+                this.handleQues();
+                this.evaluationVisible = true;
+            } else {
+                util.warningMsg(res.message);
+            }
+        },
+        countDown(time) {
+            this.countdown = time;
+            this.timer = setInterval(() => {
+                let timeList = this.countdown.split(":");
+                let total = Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2]);
+                if (total > 0) {
+                    --total;
+                    let minutes = Math.floor(total / 60);
+                    let seconds = Math.floor(total % 60);
+                    this.countdown = `00:${util.formateTime(minutes)}:${util.formateTime(seconds)}`;
+                } else {
+                    this.isDone = true;
+                    util.warningMsg("测评时间结束");
+                    clearInterval(this.timer);
+                    this.prevQues();
+                }
+            }, 1000);
+        },
+        async getCountdown() {
+            let res = await this.$get(this.api.experimentRemaining, { userId: this.userId });
+            res.data && this.countDown(res.data);
+            // this.countDown('00:00:05')
+        },
+        selectOption(option) {
+            if (!this.isDone) {
+                if (this.selected.includes(option)) {
+                    this.selected = this.selected.replace(option, "");
+                } else {
+                    if (this.question.questionType == 2) {
+                        this.selected += option;
+                    } else {
+                        this.selected = option;
+                    }
+                }
+            }
+        },
+        getHistory() {
+            this.history = this.$store.state.appraisal.answerHistory;
+        },
+        async nextQues() { // 下一题
+            if (!this.selected) return util.warningMsg("请选择答案");
+            this.getHistory();
+            if (this.history.length > this.question.currentQuestionSortNo) {
+                this.history[this.question.currentQuestionSortNo - 1] = this.selected;
+            } else if (this.history.length < this.question.currentQuestionSortNo) {
+                this.history.push(this.selected);
+            }
+            this.setAnswerHistory(this.history);
+            let res = await this.$post(this.api.experimentNext, {
+                id: this.question.id,
+                currentQuestionSortNo: this.question.currentQuestionSortNo,
+                // userAnswer: this.selected.split('').sort().join(',')
+                userAnswer: this.selected
+            });
+            if (res.data) {
+                this.question = res.data;
+                this.selected = "";
+                if (this.history.length >= this.question.currentQuestionSortNo) {
+                    this.selected = this.history[this.question.currentQuestionSortNo - 1];
+                } else {
+                    this.selected = "";
+                }
+                this.handleQues();
+            }
+        },
+        async prevQues() { // 上一题
+            if (this.question.currentQuestionSortNo > 1) {
+                this.getHistory();
+                let res = await this.$post(this.api.experimentPrevious, {
+                    id: this.question.id,
+                    currentQuestionSortNo: this.question.currentQuestionSortNo,
+                    // userAnswer: this.selected.split('').sort().join(',')
+                    userAnswer: this.selected
+                });
+                if (res.data) {
+                    this.question = res.data;
+                    this.selected = this.history[this.question.currentQuestionSortNo - 1];
+                    this.isDone ? this.submitQues() : this.handleQues();
+                }
+            } else if (this.isDone) {
+                if (!this.selected) this.selected = "A";
+                this.submitQues();
+            }
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+/deep/ .evaluation_con {
+    min-height: 700px;
+    width: 550px;
+    background: url(../../../assets/img/evaluation_bg1.png) 0 0/100% 100% no-repeat;
+    border-radius: 20px;
+    margin: 0 auto;
+    .el-dialog__body {
+        flex: 1;
+        overflow: auto;
+    }
+    .title {
+        padding-top: 45px;
+        margin-bottom: 55px;
+        text-align: center;
+        font-size: 24px
+    }
+    .ques-wrap {
+        width: 70%;
+        margin: 0 auto;
+        .serial {
+            font-size: 12px;
+            text-align: center;
+        }
+        .type {
+            color: #666;
+        }
+        .ques {
+            margin: 20px 0;
+            min-height: 145px;
+            color: #666;
+            font-size: 16px;
+        }
+        .countdown {
+            margin-bottom: 20px;
+            justify-content: center;
+            text-align: center;
+            color: #DC3434;
+            font-size: 14px;
+            img {
+                width: 15px !important;
+                margin-right: 10px;
+            }
+        }
+        .options {
+            display: flex;
+            flex-direction: column;
+            min-height: 340px;
+            li {
+                padding: 0 15px;
+                margin-bottom: 15px;
+                line-height: 40px;
+                border: 1px solid #9070FF;
+                border-radius: 20px;
+                color: #666;
+                cursor: pointer;
+                em {
+                    margin-right: 10px;
+                    font-weight: bold;
+                    font-style: normal;
+                    font-size: 16px;
+                }
+                span {
+                    font-size: 16px;
+                }
+            }
+            li:hover {
+                color: #fff;
+                background-color: #b038bb;
+                border-color: #b038bb;
+            }
+            li.active {
+                color: #fff;
+                background-color: #916CFF;
+                border-color: #916CFF;
+            }
+        }
+        .options.isDone {
+            min-height: 395px;
+        }
+    }
+
+    .footer-con{
+        text-align: center;
+        padding-bottom: 20px;
+        .first {
+            color: #fff;
+            background-color: #9268FF;
+            border-color: #9268FF;
+        }
+        .second {
+            color: #fff;
+            background-color: #E371DA;
+            border-color: #E371DA;
+        }
+    }
+}
+
+/deep/ .result_dialog {
+    min-height: 500px;
+    background: url(../../../assets/img/evaluation_bg2.png) 0 0/100% 100% no-repeat;
+    border-radius: 20px;
+    .el-dialog__headerbtn .el-dialog__close {
+        color: #5a5a5a;
+        font-size: 28px;
+    }
+    .el-dialog__header{
+        border-bottom: 0px;
+    }
+    .el-dialog__footer{
+        border-top: 0px;
+    }
+    .result {
+        margin-top: 60px;
+        text-align: center;
+        color: #fff;
+        font-size: 24px;
+    }
+    .point {
+        margin: 30px 0 20px;
+        text-align: center;
+        font-size: 30px;
+        color: #666;
+        span {
+            font-size: 120px;
+            font-weight: bold;
+        }
+    }
+    .tips {
+        color: #666;
+        text-align: center;
+        font-size: 14px;
+    }
+    .dialog-footer{
+        .first {
+            color: #fff;
+            background-color: #9268FF;
+            border-color: #9268FF;
+        }
+        .second {
+            color: #fff;
+            background-color: #E371DA;
+            border-color: #E371DA;
+        }
+    }
+}
+
+/deep/ .detail_dialog {
+    background: url(../../../assets/img/evaluation_bg3.png) 0 0/100% 100% no-repeat;
+    border-radius: 20px;
+    .el-dialog__headerbtn .el-dialog__close {
+        color: #5a5a5a;
+        font-size: 28px;
+    }
+    .el-dialog__header{
+        border-bottom: 0px;
+    }
+    .el-dialog__footer{
+        border-top: 0px;
+    }
+    .title {
+        margin-top: -20px;
+        margin-bottom: 45px;
+        text-align: center;
+        font-size: 24px
+    }
+    .el-table__header th:nth-last-child(2) {
+        text-align: center;
+    }
+    .total {
+        margin-top: 20px;
+        text-align: center;
+        font-size: 30px;
+        color: #DC3434;
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/course/details/index.vue b/src/pages/course/details/index.vue
new file mode 100644
index 0000000..46a3342
--- /dev/null
+++ b/src/pages/course/details/index.vue
@@ -0,0 +1,462 @@
+<template>
+    <div>
+        <el-card shadow="hover" class="m-b-20">
+            <div class="flex-between">
+                <el-page-header @back="goBack" :content="'课程详情'"></el-page-header>
+            </div>
+        </el-card>
+        <el-card shadow="hover" class="m-b-20">
+            <div class="flex p-40">
+                <div class="cover" :class="{'is-word': showMask1}">
+                    <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
+                    <template v-else-if="iframeSrc">
+                        <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
+                        <template v-if="showMask">
+                            <div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
+                            <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
+                        </template>
+                        <template v-if="showMask1">
+                            <div class="word-mask" style="height: 40px;"></div>
+                            <div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+                        </template>
+                        <template v-if="showMask2">
+                            <div class="excel-mask1" style="height: 48px;"></div>
+                        </template>
+                    </template>
+                    <div class="pdf inner" v-else-if="pdfSrc">
+                        <p class="arrow">
+                            <span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span>
+                            {{currentPage}} / {{pageCount}}
+                            <span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span>
+                        </p>
+                        <pdf
+                            class="pdf-wrap"
+                            :src="pdfSrc"
+                            :page="currentPage"
+                            @num-pages="pageCount=$event"
+                            @page-loaded="currentPage=$event"
+                            @loaded="loadPdfHandler">
+                        </pdf>
+                    </div>
+                    <div class="inner" v-else-if="playAuth">
+                        <div class="video_wid" id="player"></div>
+                    </div>
+                </div>
+                <div class="catalog flex-1">
+                    <div class="list">
+                        <h4 class="title">{{courseName}}</h4>
+                        <div class="desc-wrap">
+                            <div class="desc" :class="{active: desShrink}" v-html="description"></div>
+                            <i class="arrow" :class="{active: desShrink}" v-if="description.length > 40">
+                                <span>...</span>
+                                <img src="@/assets/img/arrow-down.png" alt="" @click="desShrink = !desShrink">
+                            </i>
+                        </div>
+                        <div class="chapters">
+                            <template v-if="videoList.length">
+                                <div class="chapter" v-for="(item,index) in videoList" :key="index">
+                                    <div class="chapterName">{{item.name}}</div>
+                                    <div class="section" v-if="item.subsectionList.length">
+                                        <div class="sectionName" v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section)">{{section.name}}</div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import pdf from "vue-pdf";
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+import bus from '@/libs/bus'
+export default {
+    data() {
+        return {
+            id: this.$route.query.id,
+            video: 'http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4',
+            videoSrc: '',
+            userId: this.$store.state.userId,
+            videoList: [],
+            courseName: '',
+            description: '',
+            coverUrl: '',
+            playAuth: '',
+            player: null,
+            previewImg: '',
+            iframeSrc: '',
+            isWord: false,
+            isPPT: false,
+            isExcel: false,
+            showMask: false,
+            showMask1: false,
+            showMask2: false,
+            closePosi: {
+                top: '80px'
+            },
+            pdfVisible: false,
+            pdfSrc: '',
+            currentPage: 0, // pdf文件页码
+            pageCount: 0, // pdf文件总页数
+            fileType: 'pdf', // 文件类型
+            desShrink: false
+        };
+    },
+    computed: {
+        ...mapState({
+            courseId: state => state.courseId,
+            classId: state => state.classId,
+        }),
+    },
+    components: { pdf },
+    mounted() {
+        bus.$emit('setBg','none')
+        this.insertScript()
+        this.getData()
+        this.getChapter()
+    },
+    methods: {
+        goBack() {
+            this.$router.back();
+        },
+        async getData(){
+            let res = await this.$get(`${this.api.getCourseById}/${this.id}`)
+            this.courseName = res.course.name
+            this.description = res.course.description
+            this.coverUrl = res.course.coverUrl
+        },
+        async getChapter(){
+            let res = await this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`)
+            this.videoList = res.chapterList
+        },
+        insertScript(){
+            const linkTag = document.createElement('link');
+            linkTag.rel = 'stylesheet';
+            linkTag.href = 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css';
+            document.body.appendChild(linkTag);
+
+            const scriptTag = document.createElement('script');
+            scriptTag.type = 'text/javascript';
+            scriptTag.src = 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js';
+            document.body.appendChild(scriptTag);
+        },
+        transferType(ext){
+            if('jpg,jpeg,png,gif,svg,psd'.includes(ext)) return '图片'
+            if('mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv'.includes(ext)) return '视频'
+            return ext
+        },
+        preview(row){
+            this.player = null
+            this.playauth = ''
+            this.coverUrl = ''
+            this.pdfSrc = ''
+            this.iframeSrc = ''
+            this.isPPT = false
+            this.isWord = false
+            this.isExcel = false
+            if(this.transferType(row.fileType) == '视频'){
+                this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
+                    this.playAuth = res.playAuth
+                    this.$nextTick(() => {
+                        if(this.player){
+                            this.player.replayByVidAndPlayAuth(row.fileId,this.playAuth)
+                        }else{
+                            this.player = new Aliplayer({
+                                id: 'player',
+                                width: '100%',
+                                autoplay: false,
+                                vid : row.fileId,
+                                playauth : this.playAuth,
+                                encryptType:1, //当播放私有加密流时需要设置。
+                            })
+                        }
+                    })
+
+                }).catch(res => {})
+            }else if(this.transferType(row.fileType) == '图片'){
+                this.coverUrl = row.fileUrl
+            }else if(row.fileType == 'pdf'){
+                this.pdfSrc = row.fileUrl
+                this.pdfVisible = true
+            }else{
+                this.$get(`${this.api.getSubsection}/${row.id}`).then(res => {
+                    if(row.fileType == 'pptx'){
+                        this.isPPT = true
+                        this.isWord = false
+                        this.isExcel = false
+                    }else if(row.fileType == 'doc' || row.fileType == 'docx'){
+                        this.isPPT = false
+                        this.isWord = true
+                        this.isExcel = false
+                    }else if(row.fileType == 'xls' || row.fileType == 'xlsx'){
+                        this.isExcel = true
+                        this.isPPT = false
+                        this.isWord = false
+                    }else{
+                        this.isPPT = false
+                        this.isWord = false
+                        this.isExcel = false
+                    }
+                    if(this.isPPT){
+                        this.showMask = true
+                    }else{
+                        this.showMask = false
+                    }
+                    if(this.isWord){
+                        this.showMask1 = true
+                    }else{
+                        this.showMask1 = false
+                    }
+                    if(this.isExcel){
+                        this.showMask2 = true
+                    }else{
+                        this.showMask2 = false
+                    }
+                    this.iframeSrc = res.previewUrl
+                })
+                    .catch(err => {
+                    });
+            }
+        },
+        closePlayer(){
+            this.playAuth = ''
+            this.player.pause()
+        },
+        closeIframe(){
+            this.iframeSrc = ''
+            this.showMask = false
+            this.showMask1 = false
+        },
+        closePdf(){
+            this.pdfSrc = ''
+            this.currentPage = 1
+        },
+        changePdfPage (val) {
+            if (val === 0 && this.currentPage > 1) {
+                this.currentPage--
+            }
+            if (val === 1 && this.currentPage < this.pageCount) {
+                this.currentPage++
+            }
+        },
+        loadPdfHandler (e) {
+            this.currentPage = 1
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+$height: 700px;
+.video_wid,.cover{
+    position: relative;
+    width: 76%;
+    max-width: 1400px;
+    height: $height !important;
+    border: 0;
+}
+.cover{
+    img{
+        border-radius: 8px;
+    }
+    &.is-word{
+        overflow: hidden;
+    }
+}
+.fileIframe{
+    height: $height !important;
+}
+.video_wid,.inner{
+    width: 100%;
+    height: 100% !important;
+    border: 0;
+    overflow: auto;
+}
+.cover.is-word{
+    .inner{
+        height: calc(100% + 38px) !important;
+        margin-top: -38px;
+    }
+}
+.video_wid:focus{
+    outline: none;
+}
+.catalog{
+    margin-left: 40px;
+}
+.list{
+    height: $height;
+    overflow-y: auto;
+    padding: 24px 16px;
+    background: #fff;
+    .title{
+        margin-bottom: 8px;
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 20px;
+    }
+    .desc-wrap{
+        position: relative;
+        .desc{
+            font-size: 14px;
+            color: rgba(0, 0, 0, 0.65);
+            line-height: 22px;
+            @include mul-ellipsis(2);
+            &.active{
+                display: block;
+                overflow: visible;
+            }
+        }
+        .arrow{
+            position: absolute;
+            bottom: 2px;
+            right: 0;
+            display: flex;
+            justify-content: space-between;
+            width: 46px;
+            background-color: #fff;
+            span{
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.65);
+            }
+            img{
+                width: 16px;
+                cursor: pointer;
+            }
+            &.active{
+                span{
+                    opacity: 0;
+                }
+                img{
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+    .chapters{
+        margin-top: 16px;
+        max-height: calc(100% - 53px);
+        overflow: auto;
+    }
+    .chapter{
+        margin-bottom: 20px;
+        .chapterName{
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 16px;
+        }
+        .section{
+            padding: 5px 15px;
+            margin-top: 8px;
+            background: rgba(0, 0, 0, 0.02);
+            .sectionName{
+                margin: 10px 0;
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.65);
+                cursor: pointer;
+                @include ellipsis;
+            }
+        }
+    }
+}
+.el-image-viewer__wrapper{
+    transform: translateY(-10px);
+    transition: transform .5s;
+
+    &.active{
+        transform: translateY(0)
+    }
+}
+.el-image-viewer__close{
+    z-index: 2000;
+    top: 15px;
+    right: 15px;
+    &.doc-close{
+        i{
+            color: #000 !important;
+        }
+    }
+}
+.list::-webkit-scrollbar {
+    width: 4px;
+}
+.list::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.06);
+}
+
+.mask{
+    z-index: 9;
+    position: absolute;
+    background-color: rgb(57,58,61);
+}
+.word-mask{
+    z-index: 9;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    background-color: rgb(243,242,241);
+}
+.word-mask1{
+    z-index: 9;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    background-color: #185abd;
+}
+.word-mask2{
+    z-index: 9;
+    position: absolute;
+    background-color: transparent;
+}
+.excel-mask1{
+    z-index: 9;
+    position: absolute;
+    top: 0;
+    left: 20%;
+    width: 60%;
+    background-color: #107c41;
+}
+/deep/.pdf-dia{
+    border-radius: 0 !important;
+    .el-dialog__header{
+        display: none;
+    }
+    .el-dialog__body{
+        padding: 0;
+    }
+    .el-dialog__headerbtn{
+        top: 10px;
+        .el-dialog__close{
+            color: #fff;
+            font-size: 16px;
+        }
+    }
+}
+.pdf{
+    .arrow{
+        padding: 10px 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+        color: #fff;
+        background-color: #333;
+        .turn{
+            margin: 0 10px;
+            font-size: 18px;
+            cursor: pointer;
+        }
+    }
+    .pdf-wrap{
+        width: 80%;
+        margin: 0 auto;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/info/details/index.vue b/src/pages/info/details/index.vue
new file mode 100644
index 0000000..f301cc0
--- /dev/null
+++ b/src/pages/info/details/index.vue
@@ -0,0 +1,133 @@
+<template>
+    <div style="padding-bottom: 20px">
+
+        <div class="article">
+            <el-card shadow="hover" class="m-b-20">
+                <div class="flex-between">
+                    <el-page-header @back="goBack" :content="'资讯详情'"></el-page-header>
+                </div>
+            </el-card>
+            <el-card shadow="hover" class="m-b-20">
+                <div class="page">
+                    <h6 class="title">{{title}}</h6>
+                    <div class="metas">
+                        <span>作者： {{author}}</span>
+                        <span>{{date.replace(' 00:00:00','')}}</span>
+                        <span>浏览量：{{viewCount}}</span>
+                    </div>
+
+                    <div class="cover">
+                        <img :src="coverUrl" alt="">
+                    </div>
+                    <div class="content ql-editor" v-html="content"></div>
+                </div>
+            </el-card>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Loading } from 'element-ui';
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+export default {
+    name: 'article',
+    data() {
+        return {
+            firstName: this.$route.query.first,
+            secondName: this.$route.query.second,
+            id: this.$route.query.id,
+            coverUrl: '',
+            author: '',
+            date: '',
+            title: '',
+            content: '',
+            viewCount: 0,
+            loadIns: null
+        }
+    },
+    mounted() {
+        this.getData()
+    },
+    methods: {
+        goBack() {
+            this.$router.back();
+        },
+        getData() {
+            this.loadIns = Loading.service()
+            this.$get(`${this.api.getArticle}/${this.id}`)
+                .then(res => {
+                    let data = res.article
+                    this.coverUrl = data.coverUrl
+                    this.author = data.author
+                    this.date = data.date
+                    this.title = data.title
+                    this.content = data.content
+                    this.viewCount = data.viewCount
+                    this.loadIns.close()
+                })
+                .catch(err => {
+                    this.loadIns.close()
+                });
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.article{
+    width: 70%;
+    margin: 0 auto;
+    .page{
+        padding: 40px;
+        border-radius: 8px;
+        background-color: #fff;
+        .title{
+            text-align: center;
+            font-size: 24px;
+            font-weight: 500;
+            color: rgba(0, 0, 0, 0.85);
+        }
+        .metas{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-bottom: 32px;
+            margin: 16px 0 32px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+            span{
+                display: inline-flex;
+                align-items: center;
+                margin-left: 20px;
+                color: rgba(0, 0, 0, 0.45);
+                font-size: 12px;
+                img{
+                    width: 18px;
+                    margin-right: 5px;
+                }
+            }
+        }
+        .cover{
+            margin: 20px 0;
+            text-align: center;
+            img{
+                width: 800px;
+            }
+        }
+
+        .content{
+            line-height: 1.8;
+            font-size: 16px;
+            text-indent: 2em;
+            /deep/img{
+                display: block;
+                width: 600px;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+    }
+}
+</style>
+
diff --git a/src/pages/info/list/index.vue b/src/pages/info/list/index.vue
new file mode 100644
index 0000000..a181a19
--- /dev/null
+++ b/src/pages/info/list/index.vue
@@ -0,0 +1,298 @@
+<template>
+    <div>
+        <div class="main">
+            <div class="nav">
+                <div class="sub-title">最新资讯</div>
+                <el-menu
+                    v-if="menuList.length"
+                    unique-opened
+                    :default-active="defaultIndex"
+                    @select="initData">
+
+                    <template v-for="item in menuList">
+                        <template v-if="item.secondColumn.length">
+                            <el-submenu :index="item.id" :key="item.id">
+                                <template slot="title">
+                                    <i :class="item.icon"></i>
+                                    <span slot="title">{{ item.name }}</span>
+                                </template>
+                                <template v-for="subItem in item.secondColumn">
+                                    <el-menu-item
+                                        :index="subItem.id"
+                                        :key="subItem.id"
+                                    >{{ subItem.name }}</el-menu-item>
+                                </template>
+                            </el-submenu>
+                        </template>
+                        <template v-else>
+                            <el-menu-item :index="item.id" :key="item.id">
+                                <i :class="item.icon"></i>
+                                <span slot="title">{{ item.name }}</span>
+                            </el-menu-item>
+                        </template>
+                    </template>
+                </el-menu>
+            </div>
+
+            <div class="list-wrap">
+                <div class="list">
+                    <template v-if="listData.length">
+                        <ul>
+                            <li v-for="(item,index) in listData" :key="index" @click="toArticle(item.id)">
+                                <img :src="item.coverUrl" alt="">
+                                <div class="text">
+                                    <div class="title">{{item.title}}</div>
+                                    <div class="desc" :class="{ie: core.isIE() || core.isEdge(),firefox: core.isFirefox() || core.isEdge()}" v-html="item.content"></div>
+                                    <div class="metas">
+                                        <span>作者：{{item.author}}</span>
+                                        <span>{{item.date.replace(' 00:00:00','')}}</span>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                        <div class="pagination">
+                            <el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
+                            </el-pagination>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="empty">
+                            <div>
+                                <img src="@/assets/img/none.png" alt="">
+                                <p>暂无资讯</p>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Loading } from 'element-ui';
+import bus from '@/libs/bus'
+import { mapActions } from "vuex";
+export default {
+    name: 'information',
+    data() {
+        return {
+            keyword: '',
+            historyId: this.$store.state.info.columnId,
+            defaultIndex: '',
+            menuList: [],
+            pageNo: 1,
+            pageSize: 10,
+            totals: 0,
+            listData: [],
+            loadIns: null,
+            columnId: '',
+            firstName: '',
+            secondName: ''
+        };
+    },
+    watch: {
+        keyword: function(val) {
+            clearTimeout(this.searchTimer)
+            this.searchTimer = setTimeout(() => {
+                this.getData()
+            },500)
+        }
+    },
+    mounted() {
+        bus.$emit('setBg','info')
+        this.getData()
+    },
+    methods: {
+        ...mapActions("info", [
+            "setColumnId"
+        ]),
+        getData() {
+            this.setColumnId("");
+            let data = {
+                page: this.pageNo,
+                size: this.pageSize
+            }
+            this.loadIns = Loading.service()
+            this.$get(this.api.queryAllColumns,data).then(res => {
+                this.menuList = res.columnTree
+                // 从文章页返回的情况,需要回到之前进文章页的那个分类
+
+                if(this.historyId){
+                    this.defaultIndex = this.historyId
+                    this.getContent(this.historyId)
+                }else{
+                    // 正常情况默认展示第一个分类下的文章列表
+                    if(this.menuList[0].secondColumn.length){
+                        this.getContent(this.menuList[0].secondColumn[0].id)
+                        this.defaultIndex = this.menuList[0].secondColumn[0].id
+                    }else{
+                        this.getContent(this.menuList[0].id)
+                        this.defaultIndex = this.menuList[0].id
+                    }
+                }
+
+            }).catch(res => {
+                this.loadIns.close()
+            });
+        },
+        initData(index,indexPath){
+            this.pageNo = 1
+            this.getContent(index,indexPath)
+        },
+        getContent(index,indexPath){
+            if(indexPath) this.loadIns = Loading.service()
+            this.columnId = index
+            let data = {
+                name: this.keyword,
+                columnId: index,
+                port: 0
+            }
+            let list = this.menuList
+            list.map(n => {
+                if(n.secondColumn.length){
+                    n.secondColumn.map(e => {
+                        if(e.id == index){
+                            this.firstName = n.name
+                            this.secondName = e.name
+                        }
+                    })
+                }else{
+                    if(n.id == index){
+                        this.firstName = n.name
+                        this.secondName = ''
+                    }
+                }
+            })
+            this.$get(`${this.api.queryArticleByCondition}/${this.pageNo}/${this.pageSize}`,data).then(res => {
+                this.listData = res.articleList
+                this.totals = res.total
+                this.listData.map(n => {
+                    n.content = n.content.replace(/<img.*?(?:>|\/>)/gi,'')
+                })
+                this.loadIns.close()
+            }).catch(res => {
+                this.loadIns.close()
+            });
+        },
+        handleCurrentChange(val) {
+            this.pageNo = val;
+            this.getContent(this.columnId);
+        },
+        toArticle(id){
+            this.setColumnId(this.columnId);
+            this.$router.push(`/info/details?id=${id}&first=${this.firstName}&second=${this.secondName}`)
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.main{
+    display: flex;
+    justify-content: center;
+    align-items:flex-start;
+    //padding: 265px 0 40px;
+    .nav{
+        width: 220px;
+        border-radius: 8px;
+        overflow: hidden;
+        .sub-title{
+            line-height: 88px;
+            color: #fff;
+            font-size: 24px;
+            text-align: center;
+            background: #9076FF;
+        }
+
+        /deep/ .el-menu {
+            border-right: 0;
+            .el-submenu__title,.el-menu-item{
+                font-size: 18px;
+                .el-submenu__icon-arrow{
+                    font-size: 18px;
+                }
+            }
+        }
+    }
+    .list-wrap{
+        width: 50%;
+        margin-left: 40px;
+        .list{
+            padding: 32px;
+            background-color: #fff;
+            border-radius: 8px;
+            li{
+                display: flex;
+                padding-bottom: 24px;
+                margin-bottom: 20px;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+                cursor: pointer;
+                transition: all 0.3s;
+                background-color: #fff;
+                overflow: hidden;
+
+                img{
+                    width: 200px;
+                    height: 120px;
+                    border: 0;
+                }
+                .text{
+                    width: calc(100% - 340px);
+                    display: inline-flex;
+                    flex: 1;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    padding: 0 24px;
+                    .title{
+                        font-size: 20px;
+                        color: rgba(0,0,0,.85);
+                        overflow: hidden;
+                        text-overflow:ellipsis;
+                        white-space: nowrap;
+                    }
+                    .desc{
+                        font-size: 14px;
+                        color: rgba(0,0,0,.65);
+                        display: -webkit-box;
+                        display:-moz-box;
+                        -webkit-box-orient: vertical;
+                        -moz-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        -moz-line-clamp: 2;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        &.ie{
+                            height: 80px;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        }
+                        &.firefox{
+                            height: 76px;
+                        }
+                    }
+                    .metas{
+                        display: inline-flex;
+                        align-items: center;
+                        width: 100%;
+                        font-size: 12px;
+                        color: rgba(0,0,0,.45);
+                        span:first-child{
+                            margin-right: 16px;
+                        }
+                    }
+                }
+                &:hover{
+                    .text{
+                        .title{
+                            color: #9076FF;
+                        }
+                    }
+                    border-bottom-color: #9076FF;
+                }
+            }
+        }
+    }
+}
+</style>
+
diff --git a/src/pages/match/details/index.vue b/src/pages/match/details/index.vue
new file mode 100644
index 0000000..1888bd0
--- /dev/null
+++ b/src/pages/match/details/index.vue
@@ -0,0 +1,378 @@
+<template>
+    <div>
+        <el-card shadow="hover" class="m-b-20">
+            <div class="flex-between">
+                <el-page-header @back="goBack" :content="'赛事详情'"></el-page-header>
+            </div>
+        </el-card>
+        <el-card shadow="hover" class="m-b-20">
+            <div class="main">
+                <div class="nav">
+                    <div class="sub-title">赛事报名</div>
+                    <div class="sidebar">
+                        <div class="item" :class="{ active: curType === item.id }" v-for="(item, index) in typeList" :key="index" @click="tabChange(item.id)">{{item.name}}</div>
+                    </div>
+                </div>
+
+                <div class="content-wrap">
+                    <div class="content">
+                        <h6 class="title">{{title}}</h6>
+                        <div class="meta">最近编辑时间：{{gmtModified}}</div>
+                        <div class="texts ql-editor" v-html="description" v-if="curType == 1"></div>
+                        <div v-else>
+                            <ul class="progress" v-if="progress.length">
+                                <li v-for="(item,index) in progress" :key="index">
+                                    <i class="dot" :class="[item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done el-icon-circle-check')]"></i>
+                                    <p class="name">{{item.title}}</p>
+                                    <p class="desc">{{item.description}}</p>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import { Loading } from 'element-ui';
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+import bus from '@/libs/bus'
+export default {
+    name: 'matchdetail',
+    data() {
+        return {
+            id: this.$store.state.match.matchId,
+            showSignup: this.$store.state.match.matchSignupStatus,
+            coverUrl: '',
+            title: '',
+            time: '',
+            curType: 1,
+            typeList: [
+                {
+                    id: 1,
+                    icon: 'el-icon-document',
+                    name: '竞赛信息'
+                },
+                {
+                    id: 2,
+                    icon: 'el-icon-setting',
+                    name: '竞赛进展'
+                }
+            ],
+            description: '',
+            gmtModified: '',
+            progress: [],
+            end: '',
+            status: 0,
+            statusList: ['准备报名','正在报名','准备竞赛','竞赛中','竞赛结束'],
+            endList: ['报名开始','报名截止','竞赛开始','竞赛结束',''],
+            loadIns: null
+        };
+    },
+    computed: {
+        ...mapState([
+            'userId',
+            'name',
+            'account',
+            'phone',
+            'schoolName',
+        ]),
+    },
+    mounted() {
+        bus.$emit('setBg','match')
+        this.getData()
+        this.getProgress()
+    },
+    methods: {
+        ...mapActions("match", [
+            "setMatchId", "setMatchSignupStatus"
+        ]),
+        goBack() {
+            this.$router.back();
+        },
+        getData() {
+            this.loadIns = Loading.service()
+            console.log(111,this.id);
+            this.$get(this.api.getContest + '/' + this.id)
+                .then(res => {
+                    let data = res.contest
+                    this.coverUrl = data.carouselUrl
+                    this.description = data.description
+                    this.title = data.name
+                    this.gmtModified = data.gmtModified
+
+                    let time = 60 * 60 * 1000 * 24
+                    let now = new Date().getTime()
+                    // 每个字段的含义请看match.vue
+                    let signUpStartTime = new Date(data.signUpStartTime).getTime()
+                    let signUpEndTime = new Date(data.signUpEndTime).getTime()
+                    let playStartTime = new Date(data.playStartTime).getTime()
+                    let playEndTime = new Date(data.playEndTime).getTime()
+                    if(now < signUpStartTime){
+                        this.status = 0
+                        this.end = Math.floor((signUpStartTime - now) / time)
+                        this.time = `报名开始时间：${data.signUpStartTime}`
+                    }else if(now > signUpStartTime && now < signUpEndTime){
+                        this.status = 1
+                        this.end = Math.floor((signUpEndTime - now) / time)
+                        this.time = `报名结束时间：${data.signUpEndTime}`
+                    }else if(now > signUpEndTime && now < playStartTime){
+                        this.status = 2
+                        this.end = Math.floor((playStartTime - now) / time)
+                        this.time = `竞赛开始时间：${data.playStartTime}`
+                    }else if(now > playStartTime && now < playEndTime){
+                        this.status = 3
+                        this.end = Math.floor((playEndTime - now) / time)
+                        this.time = `竞赛结束时间：${data.playEndTime}`
+                    }else if(now > playEndTime){
+                        this.status = 4
+                        this.time = '竞赛结束'
+                    }
+                    this.loadIns.close()
+                })
+                .catch(err => {
+                    this.loadIns.close()
+                });
+        },
+        getProgress() {
+            this.$get(this.api.getContestProgress + '/' + this.id)
+                .then(res => {
+                    this.progress = res.contestProgressList
+                })
+                .catch(err => {
+
+                });
+        },
+        toArticle(id){
+            this.$router.push('article?id=' + id)
+        },
+        tabChange(index){
+            this.curType = index
+        },
+        signup(){
+            let data = {
+                contestId: this.id,
+                account: this.account,
+                phone: this.phone,
+                school: this.schoolName,
+                userId: this.userId,
+                userName: this.name
+            }
+            this.$post(this.api.addApplicant,data).then(res => {
+                if(res.success){
+                    this.$message.success('报名成功')
+                    this.setMatchId(this.id);
+                    this.setMatchSignupStatus(false);
+                    this.showSignup = false
+                }else{
+                    this.$message.error(res.message)
+                }
+            }).catch(res => {})
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.main{
+    display: flex;
+    justify-content: center;
+    align-items:flex-start;
+    //padding: 265px 0 20px;
+    .nav{
+        width: 220px;
+        border-radius: 8px;
+        overflow: hidden;
+        .sub-title{
+            line-height: 88px;
+            color: #fff;
+            font-size: 24px;
+            text-align: center;
+            background: #9076FF;
+        }
+        /deep/.sidebar{
+            background-color: #fff;
+            .item{
+                padding: 15px 0;
+                color: rgba(0,0,0,.85);
+                font-size: 18px;
+                text-align: center;
+                cursor: pointer;
+                &.active{
+                    color: #9076FF;
+                }
+                &:hover{
+                    background-color: #f4f1ff;
+                }
+            }
+        }
+    }
+    .content-wrap{
+        width: 950px;
+        margin-left: 40px;
+        @media(max-width: 1300px){
+            width: 700px;
+        }
+
+        .content{
+            position: relative;
+            padding: 20px 60px;
+            background-color: #fff;
+            border-radius: 8px;
+
+            .title{
+                width: 67%;
+                margin: 0 auto;
+                font-size: 24px;
+                text-align: center;
+                color: rgba(0, 0, 0, 0.85);
+            }
+            .meta{
+                padding: 16px 0 32px;
+                font-size: 12px;
+                color: rgba(0, 0, 0, 0.45);
+                text-align: center;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+            }
+            .texts{
+                margin: 20px 0 50px;
+                font-size: 16px;
+                line-height: 1.6;
+                text-indent: 2em;
+                overflow: hidden;
+                /deep/img{
+                    max-width: 100%;
+                }
+            }
+            .progress{
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                padding: 50px 0;
+                margin: 40px 0 20px;
+                &:before{
+                    content: '';
+                    position: absolute;
+                    left: 413px;
+                    width: 1px;
+                    height: 100%;
+                    background-color: #E6E6E6;
+                    @media(max-width: 1300px){
+                        left: 289px;
+                    }
+                }
+                li{
+                    position: relative;
+                    display: inline-flex;
+                    align-items: center;
+                    width: 90%;
+                    margin-bottom: 40px;
+                    .dot{
+                        position: absolute;
+                        left: 366px;
+                        width: 13px;
+                        height: 13px;
+                        background-color: #fff;
+
+                        &.not{
+                            border-radius: 50%;
+                            background-color: #fff;
+                            border: 1px solid #cb221c;
+                        }
+                        &.ing{
+                            width: 13px;
+                            height: 13px;
+                            padding: 1px;
+                            border: 1px solid #cb221c;
+                            border-radius: 50%;
+                            background-color: #cb221c;
+                            background-clip: content-box;
+                        }
+                        &.done{
+                            left: 365px;
+                            color: #cb221c;
+                            font-size: 16px;
+                        }
+                        @media(max-width: 1300px){
+                            left: 254px;
+                            &.done{
+                                left: 253px;
+                            }
+                        }
+                    }
+                    .name{
+                        width: 43%;
+                        font-size: 24px;
+                        color: rgba(0, 0, 0, 0.85);
+                    }
+                    .desc{
+                        position: relative;
+                        padding: 24px 30px;
+                        text-align: center;
+                        color: rgba(0, 0, 0, 0.85);
+                        font-size: 16px;
+                        background-color: #fff;
+                        border: 1px solid #E6E6E6;
+                        border-radius: 8px;
+                        &:before{
+                            content: '';
+                            z-index: 2;
+                            position: absolute;
+                            top: 28px;
+                            left: -16px;
+                            border: 8px solid transparent;
+                            border-right-color: #fff;
+                        }
+                        &:after{
+                            content: '';
+                            z-index: 1;
+                            position: absolute;
+                            top: 27px;
+                            left: -18px;
+                            border: 9px solid transparent;
+                            border-right-color: #E6E6E6;
+                        }
+                    }
+                    &:nth-child(even){
+                        flex-direction: row-reverse;
+                        .name{
+                            margin-left: 16%;
+                            text-align: left;
+                        }
+                        .desc{
+                            &:before{
+                                left: auto;
+                                right: -16px;
+                                border: 8px solid transparent;
+                                border-left-color: #fff;
+                            }
+                            &:after{
+                                left: auto;
+                                right: -18px;
+                                border: 9px solid transparent;
+                                border-left-color: #E6E6E6;
+                            }
+                        }
+                    }
+                    &:nth-child(odd){
+                        .name{
+                            margin-right: 16%;
+                            text-align: right;
+                        }
+                    }
+                    &:last-child{
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/record/details/index.vue b/src/pages/record/details/index.vue
new file mode 100644
index 0000000..4aaf0ad
--- /dev/null
+++ b/src/pages/record/details/index.vue
@@ -0,0 +1,94 @@
+<template>
+    <!--实验情况-->
+    <div>
+        <el-card shadow="hover" class="m-b-20">
+            <div class="flex-between">
+                <el-page-header @back="goBack" :content="'实验情况'"></el-page-header>
+            </div>
+        </el-card>
+        <el-card shadow="hover" class="m-b-20">
+            <el-table
+                ref="table"
+                class="table"
+                stripe
+                header-align="center"
+                :cell-style="tableRowStyle"
+                :data="listData"
+                @selection-change="handleSelectionChange"
+            >
+                <el-table-column prop="id" label="次序" width="120" align="center" type="index"></el-table-column>
+                <el-table-column prop="projectName" label="实验项目名称" align="center"></el-table-column>
+                <el-table-column prop="score" label="得分" align="center"></el-table-column>
+                <el-table-column prop="duration" label="耗时" align="center"></el-table-column>
+                <el-table-column prop="startTime" label="起始时间" align="center"></el-table-column>
+                <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template slot-scope="scope">
+                        <el-button type="text" @click="toReport(scope.row)">实验报告</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :total="total"
+                    :current-page="page"
+                    @current-change="handleCurrentChange"
+                ></el-pagination>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            listData: [
+                {id: 1, name: 111},
+                {id: 2, name: 222},
+                {id: 3, name: 333}
+            ],
+            total: 0,
+            page: 1,
+            pageSize: 10,
+            multipleSelection: [],
+        }
+    },
+    methods: {
+        goBack() {
+            this.$router.back();
+        },
+        getData() {
+
+        },
+        initData() {
+            this.page = 1;
+            this.getData();
+        },
+        handleSelectionChange(val) { // 处理多选
+            this.multipleSelection = val;
+        },
+        handleCurrentChange(val) { // 切换页码
+            this.page = val;
+            this.getData();
+        },
+        tableRowStyle({ row, column, rowIndex, columnIndex }) {
+            if (rowIndex % 2 === 0) {
+                return "background-color: #FFF";
+            } else {
+                return "background-color: #F5F2FF";
+            }
+        },
+        toReport(row) {
+            this.setSystemId(this.systemId);
+            this.$router.push(`/record/show?id=${row.id}&recordId=${row.recordid}&reportId=${row.reportId}`);
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/station/preview/index.vue b/src/pages/station/preview/index.vue
new file mode 100644
index 0000000..de692c1
--- /dev/null
+++ b/src/pages/station/preview/index.vue
@@ -0,0 +1,466 @@
+<template>
+<div>
+    <el-card shadow="hover" class="m-b-20">
+        <div class="flex-between">
+            <el-page-header @back="goBack" :content="systemName"></el-page-header>
+        </div>
+    </el-card>
+    <el-card shadow="hover" class="m-b-20">
+        <el-row :gutter="20" style="padding-top: 20px;">
+            <el-col :span="24">
+                <el-col :span="18">
+                    <div class="cover">
+                        <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
+                        <template v-else-if="iframeSrc">
+                            <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
+                            <template v-if="showMask">
+                                <div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
+                                <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
+                            </template>
+                            <template v-if="showMask1">
+                                <div class="word-mask" style="height: 40px;"></div>
+                                <div class="word-mask2"
+                                     style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+                            </template>
+                            <template v-if="showMask2">
+                                <div class="excel-mask1" style="height: 48px;"></div>
+                            </template>
+                        </template>
+                        <div class="pdf inner" v-else-if="pdfSrc">
+                            <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
+                        </div>
+                        <div v-else>
+                            <video ref="video" controls class="video_wid" :src="videoSrc"
+                                   controlsList="nodownload"></video>
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :span="6">
+                    <div class="catalog">
+                        <div class="btns">
+                            <el-button type="primary" @click="goSubSystem">进入实验</el-button>
+                        </div>
+                        <div class="list_he">
+                            <h4 class="list_title">学习资源</h4>
+                            <template v-if="systemId == 1">
+                                <div v-for="(item,index) in videoList1" :key="index">
+                                    <div class="flex-between list_catalog">
+                                        <p class="experimental_title" :class="{active: curLink == item.title}"
+                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else-if="systemId == 4">
+                                <div v-for="(item,index) in videoList4" :key="index">
+                                    <div class="flex-between list_catalog">
+                                        <p class="experimental_title" :class="{active: curLink == item.title}"
+                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else-if="systemId == 5">
+                                <div v-for="(item,index) in videoList5" :key="index">
+                                    <div class="flex-between list_catalog">
+                                        <p class="experimental_title" :class="{active: curLink == item.title}"
+                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else-if="systemId == 6">
+                                <div v-for="(item,index) in videoList6" :key="index">
+                                    <div class="flex-between list_catalog">
+                                        <p class="experimental_title" :class="{active: curLink == item.title}"
+                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else-if="systemId == 7">
+                                <div v-for="(item,index) in videoList7" :key="index">
+                                    <div class="flex-between list_catalog">
+                                        <p class="experimental_title" :class="{active: curLink == item.title}"
+                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else-if="systemId == 8">
+                                <div v-for="(item,index) in videoList8" :key="index">
+                                    <div class="flex-between list_catalog">
+                                        <p class="experimental_title" :class="{active: curLink == item.title}"
+                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else-if="systemId == 9">
+                                <div v-for="(item,index) in videoList9" :key="index">
+                                    <div class="flex-between list_catalog">
+                                        <p class="experimental_title" :class="{active: curLink == item.title}"
+                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else-if="systemId == 10">
+                                <div v-for="(item,index) in videoList10" :key="index">
+                                    <div class="flex-between list_catalog">
+                                        <p class="experimental_title" :class="{active: curLink == item.title}"
+                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <div v-for="(item,index) in videoList1" :key="index">
+                                    <div class="flex-between list_catalog">
+                                        <p class="experimental_title" :class="{active: curLink == item.title}"
+                                           @click="preview(item)">{{ index + 1 }} {{ item.title }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </el-col>
+            </el-col>
+        </el-row>
+    </el-card>
+
+    <el-card shadow="hover" class="m-b-20">
+        <div>课程简介</div>
+        <p>课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介</p>
+    </el-card>
+    <el-card shadow="hover" class="m-b-20">
+        <div>课程目标</div>
+        <p>课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介</p>
+    </el-card>
+    <el-card shadow="hover" class="m-b-20">
+        <div>课程进度</div>
+        <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+    </el-card>
+</div>
+</template>
+
+<script>
+import util from "@/libs/util";
+import Setting from "@/setting";
+import pdf from "@/components/pdf";
+import { videoList1, videoList4, videoList5, videoList6, videoList7, videoList8 } from "@/libs/videoList";
+import { mapState } from "vuex";
+export default {
+    components: { pdf },
+    data() {
+        return {
+            systemId: this.$route.query.systemId,
+            systemName: this.$route.query.systemName,
+            video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4",
+            videoSrc: "",
+            curLink: "",
+            videoList1,
+            videoList4,
+            videoList5,
+            videoList6,
+            videoList7,
+            videoList8,
+            coverUrl: "",
+            playAuth: "",
+            player: null,
+            previewImg: "",
+            iframeSrc: "",
+            isWord: false,
+            isPPT: false,
+            isExcel: false,
+            showMask: false,
+            showMask1: false,
+            showMask2: false,
+            closePosi: {
+                top: "80px"
+            },
+            pdfVisible: false,
+            pdfSrc: ""
+        }
+    },
+    computed: {
+        ...mapState("user", [
+            "userId", "schoolId", "studentId", "roleId", "userName"
+        ])
+    },
+    mounted() {
+        this.insertScript();
+        this.preview(this[`videoList${this.systemId}`][0]);
+    },
+    methods: {
+        goBack() {
+            this.$router.back();
+        },
+        preview(row) { // 预览
+            let url = row.links;
+            this.videoSrc = "";
+            this.coverUrl = "";
+            this.pdfSrc = "";
+            this.iframeSrc = "";
+            this.curLink = row.title;
+            let ext = util.getFileExt(url);
+            if (util.isVideo(ext)) {
+                this.videoSrc = url;
+            } else if (ext == "pdf") {
+                this.pdfSrc = url;
+                this.pdfVisible = true;
+            } else if (util.isImg(ext)) {
+                window.open(url);
+            } else if (util.isDoc(ext)) {
+                if (ext == "pptx") {
+                    this.isPPT = true;
+                    this.isWord = false;
+                    this.isExcel = false;
+                } else if (ext == "doc" || ext == "docx") {
+                    this.isPPT = false;
+                    this.isWord = true;
+                    this.isExcel = false;
+                } else if (ext == "xls" || ext == "xlsx") {
+                    this.isExcel = true;
+                    this.isPPT = false;
+                    this.isWord = false;
+                } else {
+                    this.isPPT = false;
+                    this.isWord = false;
+                    this.isExcel = false;
+                }
+                if (this.isPPT) {
+                    this.showMask = true;
+                } else {
+                    this.showMask = false;
+                }
+                if (this.isWord) {
+                    this.showMask1 = true;
+                } else {
+                    this.showMask1 = false;
+                }
+                if (this.isExcel) {
+                    this.showMask2 = true;
+                } else {
+                    this.showMask2 = false;
+                }
+                this.iframeSrc = `https://view.officeapps.live.com/op/view.aspx?src=${url}`;
+            }
+        },
+        // 插入阿里云播放器脚本
+        insertScript() {
+            const linkTag = document.createElement("link");
+            linkTag.id = "aliplayerLink";
+            linkTag.rel = "stylesheet";
+            linkTag.href = "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css";
+            document.body.appendChild(linkTag);
+
+            const scriptTag = document.createElement("script");
+            scriptTag.id = "aliplayerScript";
+            scriptTag.type = "text/javascript";
+            scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js";
+            document.body.appendChild(scriptTag);
+            this.$once("hook:beforeDestroy", function() {
+                document.body.removeChild(document.querySelector("#aliplayerLink"));
+                document.body.removeChild(document.querySelector("#aliplayerScript"));
+            });
+        },
+        goSubSystem() {
+            let type = this.systemId;
+            let host = Setting.apiBaseURL;
+            let href = "";
+
+            let roleId = this.roleId == 4 ? 0 : 1;
+            let userName = window.btoa(encodeURIComponent(this.userName));
+
+            if (type == 1) {
+                href = `${host}pyTrials/#/`;
+                // if(process.env.NODE_ENV === 'development') href = 'http://120.78.198.231/'
+            } else if (type == 4) {
+                href = `${host}pyFinance/#/`;
+            } else if (type == 5) {
+                href = `${host}pyProjects/#/`;
+            } else if (type == 6) {
+                href = `${host}pyRandom/#/`;
+            } else if (type == 7) {
+                href = `${host}pyQuantification/#/`;
+            } else if (type == 8) {
+                href = `${host}pyAnalysis/#/`;
+            } else if (type == 9) {
+                href = `${host}pyDataclean/#/`;
+            } else if (type == 10) {
+                href = `${host}pyAcquisition/#/`;
+            } else if (type == 21) {
+                window.open(`http://121.37.29.24:80/yyyflogin?userId=${this.userId}&userName=${userName}&userType=${roleId}&reqType=1&reqId=3989a0ad671849b99dcbdcc208782333&caseId=9681f86902314b10bc752909121f9ab9&authorization=87DIVy348Oxzj3ha&classId=1876&courserId=7ff5d4715b114b7398b6f26c20fac460`);
+            } else if (type == 22) {
+                window.open(`https://danbao.czcyedu.com/#/loginFromYyyf?userId=${this.userId}&userName=${userName}&userType=${roleId}&reqType=1&reqId=eb7d8355119d449184c548b07dc01ed9&caseId=1198241070647873538&authorization=87DIVy348Oxzj3ha&classId=1876&courserId=faaedd82adb9444285a5785e4a3dd4f9`);
+            }
+
+            if (type != 21 && type != 22) {
+                util.cookies.set("userId", this.userId);
+                util.cookies.set("studentId", this.studentId);
+                util.cookies.set("schoolId", this.schoolId);
+                util.cookies.set("assessmentId", "", -1);
+                util.cookies.set("projectId", "", -1);
+                util.cookies.set("startTime", "", -1);
+                util.cookies.set("stopTime", "", -1);
+                location.href = href;
+            }
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+$height: 650px;
+.cover {
+    position: relative;
+    height: $height;
+    border: 0;
+
+    .fileIframe {
+        width: 100%;
+        height: $height !important;
+    }
+}
+.video_wid {
+    width: 100%;
+    height: 650px;
+    border: 0;
+}
+
+.video_wid:focus {
+    outline: none;
+}
+
+.title_view {
+    background-color: #2F3236;
+    padding: 12px 10px;
+}
+
+h3 {
+    color: #9076FF;
+    margin-bottom: 10px;
+}
+
+.catalog .title_view .el-button {
+    padding: 8px 20px;
+}
+
+.btns {
+    display: flex;
+    justify-content: space-between;
+    .el-button {
+        flex: 1;
+        height: 90px;
+        font-size: 30px;
+        background: transparent url(../../../assets/img/ques1.png) 0 0/100% 100% no-repeat;
+        border: 0;
+    }
+}
+
+.list_he {
+    height: 550px;
+    overflow-y: auto;
+    padding: 20px 12px;
+    background: #3f4449;
+    margin-top: 10px;
+}
+
+.list_he ul {
+    padding: 20px 0;
+}
+
+.list_he ul li:first-child {
+    margin-top: 0;
+}
+
+.list_he ul li {
+    margin-top: 10px;
+    font-size: 14px;
+}
+
+.list_title {
+    color: #9278FF;
+    font-size: 20px;
+    margin-left: 12px;
+}
+
+.list_catalog {
+    padding: 0 8px;
+    font-size: 14px;
+    margin-top: 15px;
+    cursor: pointer;
+}
+
+.mar0 {
+    margin-top: 0;
+}
+
+.list_catalog .catalog_button .el-button {
+    background-color: #2F3236;
+    border: 1px solid rgba(144, 118, 255, 1);
+    color: #9278FF;
+    padding: 6px 8px;
+}
+
+.experimental_title {
+    color: #fff;
+    word-wrap: break-word;
+
+    &.active {
+        color: #9278FF;
+    }
+}
+
+.experimental_status {
+    margin-right: 10px;
+    color: #7A7A7A;
+}
+
+.curriculum_name {
+    color: #fff;
+}
+
+.curriculum_name i {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.curriculum_status {
+    color: #7A7A7A;
+}
+
+
+.mask {
+    z-index: 9;
+    position: absolute;
+    background-color: rgb(57, 58, 61);
+}
+
+.word-mask {
+    z-index: 9;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    background-color: rgb(243, 242, 241);
+}
+
+.word-mask1 {
+    z-index: 9;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    background-color: #185abd;
+}
+
+.word-mask2 {
+    z-index: 9;
+    position: absolute;
+    background-color: transparent;
+}
+
+.excel-mask1 {
+    z-index: 9;
+    position: absolute;
+    top: 0;
+    left: 20%;
+    width: 60%;
+    background-color: #107c41;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/router/modules/appraisal.js b/src/router/modules/appraisal.js
new file mode 100644
index 0000000..f536164
--- /dev/null
+++ b/src/router/modules/appraisal.js
@@ -0,0 +1,23 @@
+import BasicLayout from "@/layouts/home";
+
+const meta = {};
+
+const pre = "appraisal-";
+
+export default {
+    path: "/appraisal",
+    name: "appraisal",
+    redirect: {
+        name: `${pre}list`
+    },
+    meta,
+    component: BasicLayout,
+    children: [
+        {
+            name: `${pre}list`,
+            path: `list`,
+            component: () => import("@/pages/appraisal/list"),
+            meta: { title: "能力测评" }
+        }
+    ]
+};
\ No newline at end of file
diff --git a/src/router/modules/course.js b/src/router/modules/course.js
new file mode 100644
index 0000000..af9aa7e
--- /dev/null
+++ b/src/router/modules/course.js
@@ -0,0 +1,29 @@
+import BasicLayout from "@/layouts/home";
+
+const meta = {};
+
+const pre = "course-";
+
+export default {
+    path: "/course",
+    name: "course",
+    redirect: {
+        name: `${pre}list`
+    },
+    meta,
+    component: BasicLayout,
+    children: [
+        {
+            name: `${pre}list`,
+            path: `list`,
+            component: () => import("@/pages/course/list"),
+            meta: { title: "课程管理" }
+        },
+        {
+            name: `${pre}details`,
+            path: `details`,
+            component: () => import("@/pages/course/details"),
+            meta: { title: "课程学习" }
+        }
+    ]
+};
\ No newline at end of file
diff --git a/src/router/modules/info.js b/src/router/modules/info.js
new file mode 100644
index 0000000..72e3025
--- /dev/null
+++ b/src/router/modules/info.js
@@ -0,0 +1,29 @@
+import BasicLayout from "@/layouts/home";
+
+const meta = {};
+
+const pre = "info-";
+
+export default {
+    path: "/info",
+    name: "info",
+    redirect: {
+        name: `${pre}list`
+    },
+    meta,
+    component: BasicLayout,
+    children: [
+        {
+            name: `${pre}list`,
+            path: `list`,
+            component: () => import("@/pages/info/list"),
+            meta: { title: "资讯" }
+        },
+        {
+            name: `${pre}details`,
+            path: `details`,
+            component: () => import("@/pages/info/details"),
+            meta: { title: "资讯详情" }
+        }
+    ]
+};
\ No newline at end of file
diff --git a/src/router/modules/match.js b/src/router/modules/match.js
new file mode 100644
index 0000000..8a0fa32
--- /dev/null
+++ b/src/router/modules/match.js
@@ -0,0 +1,29 @@
+import BasicLayout from "@/layouts/home";
+
+const meta = {};
+
+const pre = "match-";
+
+export default {
+    path: "/match",
+    name: "match",
+    redirect: {
+        name: `${pre}list`
+    },
+    meta,
+    component: BasicLayout,
+    children: [
+        {
+            name: `${pre}list`,
+            path: `list`,
+            component: () => import("@/pages/match/list"),
+            meta: { title: "线上赛事" }
+        },
+        {
+            name: `${pre}details`,
+            path: `details`,
+            component: () => import("@/pages/match/details"),
+            meta: { title: "竞赛信息" }
+        }
+    ]
+};
\ No newline at end of file
diff --git a/src/store/modules/appraisal.js b/src/store/modules/appraisal.js
new file mode 100644
index 0000000..c13995a
--- /dev/null
+++ b/src/store/modules/appraisal.js
@@ -0,0 +1,19 @@
+/**
+ * 测评相关
+ * */
+export default {
+    namespaced: true,
+    state: {
+        answerHistory: [],
+    },
+    mutations: {
+        SET_ANSWER_HISTORY: (state, data) => {
+            state.answerHistory = data;
+        },
+    },
+    actions: {
+        setAnswerHistory({ state, commit }, data) {
+            commit("SET_ANSWER_HISTORY", data);
+        }
+    }
+};
\ No newline at end of file
diff --git a/src/store/modules/info.js b/src/store/modules/info.js
new file mode 100644
index 0000000..450c81c
--- /dev/null
+++ b/src/store/modules/info.js
@@ -0,0 +1,26 @@
+/**
+ * 资讯相关
+ * */
+export default {
+    namespaced: true,
+    state: {
+        tabsName: "2",
+        columnId: ""
+    },
+    mutations: {
+        SET_TABS_NAME: (state, name) => {
+            state.tabsName = name;
+        },
+        SET_COLUMN_ID: (state, id) => {
+            state.columnId = id;
+        }
+    },
+    actions: {
+        setTabsName({ state, commit }, name) {
+            commit("SET_TABS_NAME", name);
+        },
+        setColumnId({ state, commit }, id) {
+            commit("SET_COLUMN_ID", id);
+        }
+    }
+};
\ No newline at end of file
diff --git a/src/store/modules/match.js b/src/store/modules/match.js
new file mode 100644
index 0000000..ae7f238
--- /dev/null
+++ b/src/store/modules/match.js
@@ -0,0 +1,26 @@
+/**
+ * 赛事相关
+ * */
+export default {
+    namespaced: true,
+    state: {
+        matchId: "",
+        matchSignupStatus: false
+    },
+    mutations: {
+        SET_MATCH_ID: (state, id) => {
+            state.matchId = id;
+        },
+        SET_MATCH_SIGNUP_STATUS: (state, value) => {
+            state.matchSignupStatus = value;
+        }
+    },
+    actions: {
+        setMatchId({ state, commit }, id) {
+            commit("SET_MATCH_ID", id);
+        },
+        setMatchSignupStatus({ state, commit }, value) {
+            commit("SET_MATCH_SIGNUP_STATUS", value);
+        }
+    }
+};
\ No newline at end of file