diff --git a/src/components/breadcrumb/index.vue b/src/components/breadcrumb/index.vue
index 2d5b6cc..5f37bd3 100644
--- a/src/components/breadcrumb/index.vue
+++ b/src/components/breadcrumb/index.vue
@@ -3,14 +3,11 @@
   <div class="breadcrumb">
     <el-breadcrumb separator=">">
       <template v-for="(item, index) in pages">
-        <el-breadcrumb-item v-if="index != pages.length - 1"
-                            :key="index"
-                            :to="{ path: route, query }">
-          {{item}}
+        <el-breadcrumb-item v-if="index != pages.length - 1" :key="index" :to="{ path: route, query }">
+          {{ item }}
         </el-breadcrumb-item>
-        <el-breadcrumb-item v-else
-                            :key="index">
-          {{item}}
+        <el-breadcrumb-item v-else :key="index">
+          {{ item }}
         </el-breadcrumb-item>
       </template>
     </el-breadcrumb>
@@ -46,18 +43,20 @@ export default {
 </script>
 <style lang="scss" scoped>
 .breadcrumb {
-    margin: 4px 0 16px;
-    /deep/.el-breadcrumb__item {
-        .is-link,
-        .el-breadcrumb__separator {
-            font-weight: 400;
-            color: #9278ff;
-        }
-        &:last-child {
-            .is-link {
-                color: #0b1d30;
-            }
-        }
+  margin: 4px 0 16px;
+
+  /deep/.el-breadcrumb__item {
+    .is-link,
+    .el-breadcrumb__separator {
+      font-weight: 400;
+      color: #9278ff;
+    }
+
+    &:last-child {
+      .is-link {
+        color: #0b1d30;
+      }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 91459fd..5f16092 100644
--- a/src/main.js
+++ b/src/main.js
@@ -32,14 +32,14 @@ Vue.config.productionTip = false;
 Vue.use(VueI18n);
 Vue.use(ElementUI, { size: "small" });
 const i18n = new VueI18n({
-    locale: Setting.i18n.default,
-    messages
+  locale: Setting.i18n.default,
+  messages
 });
 
 new Vue({
-    mixins: [mixinApp],
-    router,
-    i18n,
-    store,
-    render: h => h(App)
+  mixins: [mixinApp],
+  router,
+  i18n,
+  store,
+  render: h => h(App)
 }).$mount("#app");
diff --git a/src/pages/achievement/show/index.vue b/src/pages/achievement/show/index.vue
index b623c95..eb9d00f 100644
--- a/src/pages/achievement/show/index.vue
+++ b/src/pages/achievement/show/index.vue
@@ -1,216 +1,137 @@
 <template>
   <div class="wrap">
-    <el-card shadow="hover"
-             class="m-b-20">
-      <el-page-header @back="$router.back()"
-                      content="查看报告"></el-page-header>
+    <el-card shadow="hover" class="m-b-20">
+      <el-page-header @back="$router.back()" content="查看报告"></el-page-header>
     </el-card>
 
-    <div class="content"
-         v-loading="loading">
+    <div class="content" v-loading="loading">
       <div class="text-right">
-        <el-button type="primary"
-                   @click="exportPage">导出报告</el-button>
+        <el-button type="primary" @click="exportPage">导出报告</el-button>
       </div>
       <h6 class="r-title">标准实验报告</h6>
       <div class="info">
         <h6 class="l-title">
-          <img src="@/assets/img/info1.png"
-               alt="">
+          <img src="@/assets/img/info1.png" alt="">
           基本信息
         </h6>
-        <ul :class="['info-list', {edit: editing}]">
+        <ul :class="['info-list', { edit: editing }]">
           <li>
             <label>学生姓名：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.userName"
-                      disabled></el-input>
+            <el-input v-if="editing" v-model="infoData.userName" disabled></el-input>
             <span v-else>{{ infoData.userName }}</span>
           </li>
           <li>
             <label>学生学号：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.workNumber"
-                      disabled></el-input>
+            <el-input v-if="editing" v-model="infoData.workNumber" disabled></el-input>
             <span v-else>{{ infoData.workNumber }}</span>
           </li>
           <li>
             <label>实验时间：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.submitTime"
-                      disabled></el-input>
+            <el-input v-if="editing" v-model="infoData.submitTime" disabled></el-input>
             <span v-else>{{ infoData.submitTime }}</span>
           </li>
           <li>
             <label>实验成绩：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.score"
-                      disabled></el-input>
-            <div v-else
-                 class="score-wrap">
+            <el-input v-if="editing" v-model="infoData.score" disabled></el-input>
+            <div v-else class="score-wrap">
               <em>{{ infoData.score }}</em>
-              <img src="@/assets/img/point.png"
-                   alt="">
+              <img src="@/assets/img/point.png" alt="">
             </div>
           </li>
           <li>
             <label>学生班级：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.className"></el-input>
+            <el-input v-if="editing" v-model="infoData.className"></el-input>
             <span v-else>{{ infoData.className }}</span>
           </li>
           <li>
             <label>指导老师：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.instructor"></el-input>
+            <el-input v-if="editing" v-model="infoData.instructor"></el-input>
             <span v-else>{{ infoData.instructor }}</span>
           </li>
           <li>
             <label>实验学时：</label>
-            <el-input v-if="editing"
-                      v-model="infoData.period"></el-input>
+            <el-input v-if="editing" v-model="infoData.period"></el-input>
             <span v-else>{{ infoData.period }}</span>
           </li>
         </ul>
         <div class="m-b-20">
           <h6 class="l-title">
-            <img src="@/assets/img/report2.png"
-                 alt="">
+            <img src="@/assets/img/report2.png" alt="">
             实验项目名称
           </h6>
-          <el-input v-if="editing"
-                    v-model="form.projectName"
-                    type="textarea"></el-input>
-          <div v-else
-               class="pre-wrap"
-               v-html="form.projectName"></div>
+          <el-input v-if="editing" v-model="form.projectName" type="textarea"></el-input>
+          <div v-else class="pre-wrap" v-html="form.projectName"></div>
         </div>
         <div class="m-b-20">
           <h6 class="l-title">
-            <img src="@/assets/img/report3.png"
-                 alt="">
+            <img src="@/assets/img/report3.png" alt="">
             实验目的
           </h6>
-          <div :class="['pre-wrap', {edit: editing}]"
-               v-html="form.purpose"></div>
+          <div :class="['pre-wrap', { edit: editing }]" v-html="form.purpose"></div>
         </div>
         <div class="m-b-20">
           <h6 class="l-title">
-            <img src="@/assets/img/report4.png"
-                 alt="">
+            <img src="@/assets/img/report4.png" alt="">
             实验数据
           </h6>
-          <el-table :data="expData"
-                    class="table"
-                    border
-                    stripe
-                    header-align="center">
-            <el-table-column type="index"
-                             label="序号"
-                             align="center"
-                             width="60">
+          <el-table :data="expData" class="table" border stripe header-align="center">
+            <el-table-column type="index" label="序号" align="center" width="60">
               <template slot-scope="scope">
                 {{ scope.$index + 1 }}
               </template>
             </el-table-column>
-            <el-table-column prop="judgmentName"
-                             label="判分点"
-                             :key="1"
-                             width="270"
-                             align="center"></el-table-column>
-            <el-table-column v-if='project'
-                             prop="judgmentName"
-                             label="考核点"
-                             :key="2"
-                             align="center"
-                             width="150">
+            <el-table-column prop="judgmentName" label="判分点" :key="1" width="270" align="center"></el-table-column>
+            <el-table-column v-if="isLc" prop="judgmentName" label="考核点" :key="2" align="center" width="150">
               <template slot-scope="scope">
-                <div v-for="(item, index) in scope.row.lcRuleRecords"
-                     :key="index">
-                  <span>
-                    <span>{{index+1}}. </span>{{item.name}}
-                  </span>
+                <div v-for="(item, i) in scope.row.lcRuleRecords" :key="i" class="rule-line">
+                  <span>{{ item.index }}. </span>{{ item.name }}
+                  <p v-if="item.ruleOperation === '或'" class="m-t-5 m-b-5">
+                    {{ item.ruleOperation === '或' ? '或' : '' }}</p>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="ruleAnswer"
-                             label="参考答案"
-                             :key="3"
-                             style='word-wrap: break-word'>
+            <el-table-column prop="ruleAnswer" label="参考答案" :key="3" style="word-wrap: break-word">
               <template slot-scope="scope">
-                <div v-if='scope.row.lcRuleRecords'>
-                  <div v-for="(item, index) in scope.row.lcRuleRecords"
-                       :key="index">
-                    <span>
-                      <span>{{index+1}}. </span>{{item.ruleAnswer}}
-                    </span>
+                <div v-if="scope.row.lcRuleRecords">
+                  <div v-for="(item, i) in scope.row.lcRuleRecords" :key="i" class="rule-line">
+                    <span>{{ item.index }}. </span>{{ item.ruleAnswer }}
+                    <p v-if="item.ruleOperation === '或'" class="p-l-10 m-t-5 m-b-5">
+                      {{ item.ruleOperation === '或' ? '或' : '' }}</p>
                   </div>
                 </div>
-                <div v-else
-                     v-html="scope.row.referenceAnswer"></div>
+                <div v-else v-html="scope.row.referenceAnswer"></div>
               </template>
             </el-table-column>
-            <el-table-column prop="userAnswer"
-                             :key="4"
-                             label="学生答案">
+            <el-table-column prop="userAnswer" :key="4" label="学生答案">
               <template slot-scope="scope">
-                <div v-if='scope.row.lcRuleRecords'>
-                  <div v-for="(item, index) in scope.row.lcRuleRecords"
-                       :key="index">
-                    {{index+1}}. {{item.userAnswer || '未填写'}}
+                <div v-if="scope.row.lcStudentAnswer">
+                  <div v-for="(item, i) in scope.row.lcStudentAnswer" :key="i" class="rule-line">
+                    {{ i + 1 }}. {{ item.userAnswer || '未填写' }}
                   </div>
                 </div>
-                <div v-else
-                     v-html='scope.row.answer'
-                     style='white-space: pre-wrap'></div>
+                <div v-else v-html="scope.row.answer" style="white-space: pre-wrap"></div>
               </template>
             </el-table-column>
-            <el-table-column v-if="!project"
-                             prop="runResult"
-                             label="学生运行结果"
-                             :key="5"
-                             align="center">
+            <el-table-column v-if="!isLc" prop="runResult" label="学生运行结果" :key="5" align="center">
               <template slot-scope="scope">
-                <div class="m-b-20"
-                     v-html='scope.row.runResult'
-                     style='white-space: pre-wrap'></div>
+                <div class="m-b-20" v-html="scope.row.runResult" style="white-space: pre-wrap"></div>
                 <template v-if="scope.row.runThePictureList">
-                  <img v-for="(img, i) in scope.row.runThePictureList"
-                       :key="i"
-                       width="200"
-                       class="result-pic"
-                       :src="img"
-                       alt="">
+                  <img v-for="(img, i) in scope.row.runThePictureList" :key="i" width="200" class="result-pic"
+                    :src="img" alt="">
                 </template>
               </template>
             </el-table-column>
-            <el-table-column prop="quesScore"
-                             label="分值"
-                             :key="6"
-                             width="80"
-                             align="center"></el-table-column>
-            <el-table-column prop="score"
-                             label="得分"
-                             :key="7"
-                             width="80"
-                             align="center"></el-table-column>
+            <el-table-column prop="quesScore" label="分值" :key="6" width="80" align="center"></el-table-column>
+            <el-table-column prop="score" label="得分" :key="7" width="80" align="center"></el-table-column>
           </el-table>
         </div>
         <div class="m-b-20">
           <h6 class="l-title">
-            <img src="@/assets/img/report5.png"
-                 alt="">
+            <img src="@/assets/img/report5.png" alt="">
             实验总结与体会
           </h6>
-          <quill v-if="editing"
-                 :border="true"
-                 v-model="form.summarize"
-                 :minHeight="150"
-                 :height="150"
-                 :index="1" />
-          <div v-else
-               class="pre-wrap"
-               v-html="form.summarize"></div>
+          <quill v-if="editing" :border="true" v-model="form.summarize" :minHeight="150" :height="150" :index="1" />
+          <div v-else class="pre-wrap" v-html="form.summarize"></div>
         </div>
       </div>
     </div>
@@ -236,7 +157,7 @@ export default {
       editing: false,
       loadIns: null,
       loading: false,
-      project: false,
+      isLc: false,
       userScores: []
     };
   },
@@ -249,7 +170,7 @@ export default {
       const { report, userScores } = await this.$get(`${this.api.reportDetail}?reportId=${this.reportId}`)
       this.form = report
       this.expData = userScores
-      this.project = this.expData.find(e => e.lcRuleRecords) // 银行系统才有lcRuleRecords
+      this.isLc = this.expData.find(e => e.lcRuleRecords) // 流程系统才有lcRuleRecords
       let form = this.form;
       this.infoData = {
         workNumber: form.workNumber,
@@ -277,17 +198,28 @@ export default {
     },
     // 处理实验数据
     handleList (list) {
-      this.project = list.find(e => e.lcRuleRecords) // 银行系统才有lcRuleRecords
-      if (this.project) {
+      this.isLc = list.find(e => e.lcRuleRecords) // 流程系统才有lcRuleRecords
+      if (this.isLc) {
         list.map(e => {
           e.assessmentPoint = ''
           e.referenceAnswer = ''
           e.answer = ''
+          let index = 1
           e.lcRuleRecords.map((n, i) => {
-            e.assessmentPoint += `${i + 1}.${n.name}`
-            e.referenceAnswer += `${i + 1}.${n.ruleAnswer}`
+            n.index = index
+            // 下面几行是导出的时候后端需要的字段
+            e.assessmentPoint += `${index}.${n.name};${n.ruleOperation === '或' ? '\n或\n' : ''}`
+            e.referenceAnswer += `${index}.${n.ruleAnswer};${n.ruleOperation === '或' ? '\n或\n' : ''}`
             if (!n.userAnswer) n.userAnswer = '未填写'
-            e.answer += `${i + 1}.${n.userAnswer}`
+
+            if (n.ruleOperation === '或') {
+              index = 1
+            } else {
+              index++
+            }
+          })
+          e.lcStudentAnswer.map((n, i) => {
+            e.answer += `${i + 1}.${n.userAnswer};`
           })
         })
       } else { // python系统显示图片（从userScores里取）
@@ -317,7 +249,7 @@ export default {
         if (form[i] && typeof form[i] === 'string') form[i] = form[i].replace(/<[^>]+>/g, '')
       }
       form.purpose = form.purpose.replace(/<[^>]+>/g, '')
-      this.$post(this.project ? this.api.exportBankExperimentReport : this.api.exportLabReport, {
+      this.$post(this.isLc ? this.api.exportBankExperimentReport : this.api.exportLabReport, {
         ...form,
         experimentalData: list
       }).then(res => {
@@ -331,133 +263,166 @@ export default {
 
 <style lang="scss" scoped>
 @import '/styles/css/editor.css';
+
 .wrap {
-    padding: 12px 300px 20px;
+  padding: 12px 300px 20px;
 }
+
 code,
 kbd,
 samp {
-    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
-    word-wrap: break-word;
-    white-space: pre-wrap;
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
+  word-wrap: break-word;
+  white-space: pre-wrap;
 }
+
 /deep/ pre {
-    white-space: pre-wrap; /* css-3 */
-    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
-    white-space: pre-wrap; /* Opera 4-6 */
-    white-space: -o-pre-wrap; /* Opera 7 */
-    word-wrap: break-word; /* Internet Explorer 5.5+ */
-    word-break: break-all;
-    overflow: hidden;
-    font-size: 12px;
-    font-weight: 400;
-    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
+  white-space: pre-wrap;
+  /* css-3 */
+  white-space: -moz-pre-wrap;
+  /* Mozilla, since 1999 */
+  white-space: pre-wrap;
+  /* Opera 4-6 */
+  white-space: -o-pre-wrap;
+  /* Opera 7 */
+  word-wrap: break-word;
+  /* Internet Explorer 5.5+ */
+  word-break: break-all;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
 }
+
 .content {
-    padding: 16px 40px;
-    background: #fff;
-    &.loading {
-        padding-top: 30px;
+  padding: 16px 40px;
+  background: #fff;
+
+  &.loading {
+    padding-top: 30px;
+  }
+
+  .r-title {
+    margin-bottom: 40px;
+    font-size: 24px;
+    text-align: center;
+    color: #333;
+  }
+
+  .info {
+    padding: 20px 16px;
+    border: 1px solid #e1e6f2;
+  }
+
+  .l-title {
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    margin-bottom: 12px;
+    font-size: 14px;
+    color: #333;
+    background-color: #f7f5ff;
+  }
+
+  .info-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px 0 0 20px;
+
+    li {
+      display: inline-flex;
+      width: 25%;
+      padding: 0 10px;
+      margin-bottom: 34px;
     }
-    .r-title {
-        margin-bottom: 40px;
-        font-size: 24px;
-        text-align: center;
-        color: #333;
+
+    &.edit {
+      li {
+        align-items: center;
+      }
     }
-    .info {
-        padding: 20px 16px;
-        border: 1px solid #e1e6f2;
+
+    label {
+      font-size: 14px;
+      color: #333;
+      white-space: nowrap;
     }
-    .l-title {
-        display: flex;
-        align-items: center;
-        padding: 5px 8px;
-        margin-bottom: 12px;
-        font-size: 14px;
-        color: #333;
-        background-color: #f7f5ff;
+
+    span {
+      min-width: 150px;
+      padding: 0 10px 3px;
+      border-bottom: 1px solid #e1e6f2;
     }
-    .info-list {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 10px 0 0 20px;
-        li {
-            display: inline-flex;
-            width: 25%;
-            padding: 0 10px;
-            margin-bottom: 34px;
-        }
-        &.edit {
-            li {
-                align-items: center;
-            }
-        }
-        label {
-            font-size: 14px;
-            color: #333;
-            white-space: nowrap;
-        }
-        span {
-            min-width: 150px;
-            padding: 0 10px 3px;
-            border-bottom: 1px solid #e1e6f2;
-        }
-        /deep/.el-input {
-            width: 174px;
-        }
+
+    /deep/.el-input {
+      width: 174px;
     }
-    .score-wrap {
-        position: relative;
-        min-width: 150px;
-        border-bottom: 1px solid #e1e6f2;
-        em {
-            position: absolute;
-            top: -12px;
-            left: 30px;
-            font-family: din;
-            font-size: 30px;
-            font-weight: 600;
-            color: #0b1d30;
-        }
-        img {
-            position: absolute;
-            bottom: -15px;
-            left: 0;
-        }
+  }
+
+  .score-wrap {
+    position: relative;
+    min-width: 150px;
+    border-bottom: 1px solid #e1e6f2;
+
+    em {
+      position: absolute;
+      top: -12px;
+      left: 30px;
+      font-family: din;
+      font-size: 30px;
+      font-weight: 600;
+      color: #0b1d30;
     }
-    /deep/.el-textarea .el-textarea__inner,
-    .pre-wrap {
-        min-height: 72px;
-        padding: 10px 16px;
-        font-size: 14px;
-        color: #333;
-        &.edit {
-            color: #abb3c6;
-            border: 1px solid #cacfdb;
-            border-radius: 4px;
-            background-color: #f6f7f9;
-        }
+
+    img {
+      position: absolute;
+      bottom: -15px;
+      left: 0;
     }
-    /deep/ .table th {
-        background-color: #e5dfff !important;
-        .cell {
-            line-height: 35px;
-            color: #555555;
-        }
+  }
+
+  /deep/.el-textarea .el-textarea__inner,
+  .pre-wrap {
+    min-height: 72px;
+    padding: 10px 16px;
+    font-size: 14px;
+    color: #333;
+
+    &.edit {
+      color: #abb3c6;
+      border: 1px solid #cacfdb;
+      border-radius: 4px;
+      background-color: #f6f7f9;
     }
+  }
+
+  /deep/ .table th {
+    background-color: #e5dfff !important;
+
+    .cell {
+      line-height: 35px;
+      color: #555555;
+    }
+  }
+
+  .rule-line {
+    line-height: 1.8;
+  }
 }
+
 .result-pic {
-    margin: 10px 0;
+  margin: 10px 0;
 }
+
 @media (max-width: 1650px) {
-    .wrap {
-        padding: 12px 200px 20px;
-    }
+  .wrap {
+    padding: 12px 200px 20px;
+  }
 }
+
 @media (max-width: 1430px) {
-    .wrap {
-        padding: 12px 100px 20px;
-    }
+  .wrap {
+    padding: 12px 100px 20px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/match/add/index.vue b/src/pages/match/add/index.vue
index 16f0cf2..1f6768e 100644
--- a/src/pages/match/add/index.vue
+++ b/src/pages/match/add/index.vue
@@ -264,6 +264,7 @@ export default {
 <style scoped lang="scss">
 .type-wrap {
   position: relative;
+  padding: 10px;
   margin-top: 20px;
   background: #fff;
 
diff --git a/src/pages/match/add/step1.vue b/src/pages/match/add/step1.vue
index 6cedb8f..d6d86fa 100644
--- a/src/pages/match/add/step1.vue
+++ b/src/pages/match/add/step1.vue
@@ -162,10 +162,10 @@
 </template>
 
 <script>
-import util from "@/libs/util";
-import quill from "@/components/quill";
-import Setting from "@/setting";
-import Upload from '@/components/upload';
+import Util from '@/libs/util'
+import quill from '@/components/quill'
+import Setting from '@/setting'
+import Upload from '@/components/upload'
 import Oss from '@/components/upload/upload.js'
 export default {
   props: ['editing'],
@@ -173,7 +173,7 @@ export default {
     const that = this
     return {
       headers: {
-        token: util.local.get(Setting.tokenKey)
+        token: Util.local.get(Setting.tokenKey)
       },
       form: {
         id: this.$route.query.id || '',
@@ -338,7 +338,7 @@ export default {
   },
   methods: {
     getData () {
-      const { id } = this.form
+      const { id } = this.$route.query
       id && this.$post(`${this.api.getCompetition}?competitionId=${id}`).then(({ competition }) => {
         this.$parent.publishStatus = competition.publishStatus
         this.$parent.releaseType = competition.releaseType
@@ -476,10 +476,10 @@ export default {
       this.rangeVisible = false
     },
     handleExceed (files, fileList) {
-      util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
+      Util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
     },
     handleExceedAnnex (files, fileList) {
-      util.warningMsg(`当前限制选择 5 个文件，如需更换，请删除一个文件再重新选择！`);
+      Util.warningMsg(`当前限制选择 5 个文件，如需更换，请删除一个文件再重新选择！`);
     },
     // 封面自定义上传
     async handleRequest ({ file }) {
@@ -508,7 +508,7 @@ export default {
     // 附件上传前
     beforeUpload (file) {
       const isLt2M = file.size / 1024 / 1024 < 10
-      if (!isLt2M) util.warningMsg('请上传小于10MB的附件！')
+      if (!isLt2M) Util.warningMsg('请上传小于10MB的附件！')
       if (isLt2M) {
         this.fileName = file.name
         return true
@@ -557,34 +557,34 @@ export default {
       const form = JSON.parse(JSON.stringify(this.form))
       form.sponsor = this.sponsorList.filter(d => d).join();
       form.undertaker = this.undertakerList.filter(d => d).join();
-      if (!form.name) return util.warningMsg("请填写竞赛名称");
+      if (!form.name) return Util.warningMsg("请填写竞赛名称");
       // 下一步需要校验
       if (next === 2) {
-        if (form.competitionScope == 2 && (!form.competitionRangeList || !form.competitionRangeList.length)) return util.warningMsg('请选择区域、院校')
-        if (!form.sponsor) return util.warningMsg("请填写主办方");
-        if (!form.signUpStartTime) return util.warningMsg("请选择报名时间");
+        if (form.competitionScope == 2 && (!form.competitionRangeList || !form.competitionRangeList.length)) return Util.warningMsg('请选择区域、院校')
+        if (!form.sponsor) return Util.warningMsg("请填写主办方");
+        if (!form.signUpStartTime) return Util.warningMsg("请选择报名时间");
         let now = new Date().getTime();
         let signUpStartTime = new Date(form.signUpStartTime).getTime();
         let signUpEndTime = new Date(form.signUpEndTime).getTime();
         let playStartTime = new Date(form.playStartTime).getTime();
-        // if (signUpStartTime && now > signUpStartTime) return util.warningMsg("报名时间不能早于当前时间");
-        if (!form.playStartTime) return util.warningMsg("请选择竞赛时间");
-        if (playStartTime && signUpEndTime && playStartTime < signUpEndTime) return util.warningMsg("竞赛时间不能早于报名结束时间");
+        // if (signUpStartTime && now > signUpStartTime) return Util.warningMsg("报名时间不能早于当前时间");
+        if (!form.playStartTime) return Util.warningMsg("请选择竞赛时间");
+        if (playStartTime && signUpEndTime && playStartTime < signUpEndTime) return Util.warningMsg("竞赛时间不能早于报名结束时间");
         const { competitionType, quantityLimit, minTeamSize, maxTeamSize, isNeedCode, invitationCode } = form.completeCompetitionSetup
         // 团队
         if (competitionType) {
-          if (quantityLimit === '') return util.warningMsg('请填写报名团队数上限')
-          if (quantityLimit < 0) return util.warningMsg('报名团队数上限不得小于0')
-          if (minTeamSize === '') return util.warningMsg('请填写团队人数下限')
-          if (minTeamSize < 2) return util.warningMsg('团队人数下限不得小于2')
-          if (maxTeamSize === '') return util.warningMsg('请填写团队人数上限')
-          if (minTeamSize > maxTeamSize) return util.warningMsg('团队人数上限不得小于下限')
+          if (quantityLimit === '') return Util.warningMsg('请填写报名团队数上限')
+          if (quantityLimit < 0) return Util.warningMsg('报名团队数上限不得小于0')
+          if (minTeamSize === '') return Util.warningMsg('请填写团队人数下限')
+          if (minTeamSize < 2) return Util.warningMsg('团队人数下限不得小于2')
+          if (maxTeamSize === '') return Util.warningMsg('请填写团队人数上限')
+          if (minTeamSize > maxTeamSize) return Util.warningMsg('团队人数上限不得小于下限')
         } else { // 个人
-          if (quantityLimit === '') return util.warningMsg('请填写报名人数上限')
-          if (quantityLimit < 0) return util.warningMsg('报名人数上限不得小于0')
+          if (quantityLimit === '') return Util.warningMsg('请填写报名人数上限')
+          if (quantityLimit < 0) return Util.warningMsg('报名人数上限不得小于0')
         }
-        if (isNeedCode && (!invitationCode || invitationCode.length !== 4)) return util.warningMsg('请填写四位数邀请码')
-        if (!form.description) return util.warningMsg("请填写竞赛详情");
+        if (isNeedCode && (!invitationCode || invitationCode.length !== 4)) return Util.warningMsg('请填写四位数邀请码')
+        if (!form.description) return Util.warningMsg("请填写竞赛详情");
       } else {
         if (form.competitionScope == 2 && (!form.competitionRangeList || !form.competitionRangeList.length)) form.competitionScope = 1
       }
@@ -599,7 +599,7 @@ export default {
       if (form.id) {
         this.$post(this.api.editCompetition, form).then(async () => {
           this.$parent.hideLoad()
-          this.updateTime && util.successMsg("修改成功");
+          this.updateTime && Util.successMsg("修改成功");
           this.updateTime = 0
           await this.automaticAllocation()
           this.$emit('next', next, cb)
@@ -610,7 +610,7 @@ export default {
         this.$post(this.api.addCompetition, form).then(({ competitionId, setupId }) => {
           this.updateTime = 0
           this.$parent.hideLoad()
-          util.successMsg("创建成功");
+          Util.successMsg("创建成功");
           this.$emit('next', next, setupId, competitionId, cb)
         }).catch(err => {
           this.$parent.hideLoad()
@@ -622,9 +622,10 @@ export default {
       // 团队赛
       if (this.form.completeCompetitionSetup.competitionType) {
         const { signUpEndTime, id } = this.form
+        const now = await Util.getNow()
 
         // 报名结束之后修改的报名结束时间晚于当前现实时间的话，就调接口
-        if (signUpEndTime !== this.originSignUpEndTime && new Date(signUpEndTime) > Date.now()) {
+        if (this.originSignUpEndTime && signUpEndTime !== this.originSignUpEndTime && new Date(signUpEndTime) < now) {
           await this.$post(this.api.updateEventAllocationRecord, {
             competitionId: id,
             whetherToModifyTheRule: 1,
@@ -634,7 +635,7 @@ export default {
     },
     // 预览
     preview () {
-      util.local.set('match', this.form)
+      Util.local.set('match', this.form)
       window.open(this.$router.resolve('/matchPreview').href)
     },
     addSponsor () {
diff --git a/src/pages/match/add/step3.vue b/src/pages/match/add/step3.vue
index bbc37f7..32f7b04 100644
--- a/src/pages/match/add/step3.vue
+++ b/src/pages/match/add/step3.vue
@@ -90,7 +90,7 @@
 
 <script>
 import Oss from '@/components/upload/upload.js'
-import util from "@/libs/util";
+import Util from "@/libs/util";
 import Setting from "@/setting";
 import set from './set'
 export default {
@@ -98,7 +98,7 @@ export default {
   data () {
     return {
       headers: {
-        token: util.local.get(Setting.tokenKey)
+        token: Util.local.get(Setting.tokenKey)
       },
       id: this.$route.query.id,
       updateTime: 0,
@@ -237,7 +237,7 @@ export default {
         const startTime = new Date(val[0])
         const endTime = new Date(val[1])
         const { playStartTime, playEndTime } = this.step1
-        if (startTime < new Date(playStartTime) || endTime > new Date(playEndTime)) return util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。')
+        if (startTime < new Date(playStartTime) || endTime > new Date(playEndTime)) return Util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。')
         const { form, curStep } = this
         for (const i in form) {
           // 判断其他阶段的时间跟当前选的时间是否重叠
@@ -245,7 +245,7 @@ export default {
             const time1 = new Date(form[i].startTime)
             const time2 = new Date(form[i].endTime)
             if ((startTime >= time1 && startTime <= time2) || (endTime >= time1 && endTime <= time2)) {
-              util.warningMsg('请注意，所设置的时间与已设置的阶段时间重合。')
+              Util.warningMsg('请注意，所设置的时间与已设置的阶段时间重合。')
               break
             }
           }
@@ -257,7 +257,7 @@ export default {
     // 附件上传前
     beforeUpload (file) {
       const isLt2M = file.size / 1024 / 1024 < 10
-      if (!isLt2M) util.warningMsg('请上传小于10MB的附件！')
+      if (!isLt2M) Util.warningMsg('请上传小于10MB的附件！')
       if (isLt2M) {
         this.fileName = file.name
         return true
@@ -274,10 +274,10 @@ export default {
     },
     downloadFile () {
       // const { name, url } = this.fileList[0]
-      // util.downloadFile(name, url)
+      // Util.downloadFile(name, url)
     },
     handlePreview (file) {
-      window.open((util.isDoc(util.getFileExt(file.name)) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + file.url)
+      window.open((Util.isDoc(Util.getFileExt(file.name)) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + file.url)
     },
     beforeRemove (file, fileList) {
       return this.$confirm(`确定移除 ${file.name}？`);
@@ -310,39 +310,9 @@ export default {
     },
     // 自动分配人员弹框
     async autoAllocationConfirm (next) {
-      // 编辑
-      if (this.form[0].contentId) {
-        // 报名结束时间>当前时间
-        if (new Date(this.$parent.$refs.step1.form.signUpEndTime) > Date.now()) {
-          this.$confirm('<p>团队赛发布成功，是否要重新自动分配阶段参赛人员？</p><p style="margin-top: 10px;color: #a9a9a9;">（点击“是”将会<span style="color: #f00;">在报名结束后</span>给报名的团队自动分配阶段参赛人员</p>', '提示', {
-            confirmButtonText: '是',
-            cancelButtonText: '否',
-            type: 'success',
-            closeOnClickModal: false,
-            showClose: false,
-            dangerouslyUseHTMLString: true,
-          }).then(async () => {
-            this.automaticAllocation(1, next)
-          }).catch(() => {
-            this.automaticAllocation(0, next)
-          })
-        } else {
-          this.$confirm('<p>团队赛发布成功，是否要重新自动分配阶段参赛人员？</p><p style="margin-top: 10px;color: #a9a9a9;">（点击“是”将会<span style="color: #f00;">立即</span>给报名的团队自动分配阶段参赛人员</p>', '提示', {
-            confirmButtonText: '是',
-            cancelButtonText: '否',
-            type: 'success',
-            closeOnClickModal: false,
-            showClose: false,
-            dangerouslyUseHTMLString: true,
-          }).then(async () => {
-            await this.$post(`${this.api.automaticAllocation}?competitionId=${this.id}`) // 立马分配
-            this.$emit('next', next)
-          }).catch(() => {
-            this.automaticAllocation(0, next)
-          });
-        }
-      } else {
-        // 新增
+      const { data } = await this.$post(`${this.api.viewEventAllocationInformation}?competitionId=${this.competitionId}`)
+      if (data.assignOrNot === undefined || !this.form[0].contentId) {
+        // 首次发布 or 新增 才需要弹框
         this.$confirm('<p>团队赛发布成功，是否要自动分配阶段参赛人员？</p><p style="margin-top: 10px;color: #a9a9a9;">（点击“是”将会在报名结束后给报名的团队自动分配阶段参赛人员</p>', '提示', {
           confirmButtonText: '是',
           cancelButtonText: '否',
@@ -353,7 +323,34 @@ export default {
           this.automaticAllocation(1, next)
         }).catch(() => {
           this.automaticAllocation(0, next)
-        });
+        })
+      } else {
+        const now = await Util.getNow()
+        // 报名结束时间>当前时间
+        if (new Date(this.$parent.$refs.step1.form.signUpEndTime) > now) {
+          this.$emit('next', next)
+        } else {
+          // 查询是否需要弹框
+          const res = await this.$post(`${this.api.editWhetherPopUpsAppear}?competitionId=${this.competitionId}`)
+          if (res.popupState) {
+            this.$confirm('<p>团队赛发布成功，是否要重新自动分配阶段参赛人员？</p><p style="margin-top: 10px;color: #a9a9a9;">（点击“是”将会<span style="color: #f00;">立即</span>给报名的团队自动分配阶段参赛人员</p>', '提示', {
+              confirmButtonText: '是',
+              cancelButtonText: '否',
+              type: 'success',
+              closeOnClickModal: false,
+              showClose: false,
+              dangerouslyUseHTMLString: true,
+            }).then(async () => {
+              await this.$post(`${this.api.automaticAllocation}?competitionId=${this.id}`) // 立马分配
+              this.$emit('next', next)
+            }).catch(() => {
+              this.automaticAllocation(0, next)
+            })
+          } else {
+            // 无需弹框
+            this.$emit('next', next)
+          }
+        }
       }
     },
     // 提交
@@ -361,7 +358,7 @@ export default {
       const { form } = this
       if (!form.length) {
         this.$parent.hideLoad()
-        util.successMsg('保存成功')
+        Util.successMsg('保存成功')
         this.$emit('next', next)
         return
       }
@@ -372,51 +369,51 @@ export default {
         if (status) {
           if (!e.time.length) {
             invalid = 1
-            util.errorMsg('请选择比赛时间')
+            Util.errorMsg('请选择比赛时间')
             break
           }
           if (new Date(e.time[0]) < new Date(playStartTime) || new Date(e.time[1]) > new Date(playEndTime)) {
             invalid = 1
-            util.errorMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。')
+            Util.errorMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。')
             break
           }
           e.startTime = e.time[0]
           e.endTime = e.time[1]
           if (e.method !== 2 && !e.cid) {
             invalid = 1
-            util.errorMsg('请选择课程')
+            Util.errorMsg('请选择课程')
             break
           }
           if (e.method === 2) { // 线下
             if (!e.offlineAddress) {
               invalid = 1
-              util.errorMsg('请输入比赛地点')
+              Util.errorMsg('请输入比赛地点')
               break
             }
             if (!e.contentDescription) {
               invalid = 1
-              util.errorMsg('请输入比赛内容')
+              Util.errorMsg('请输入比赛内容')
               break
             }
             if (!e.scoreRule) {
               invalid = 1
-              util.errorMsg('请输入评分规则')
+              Util.errorMsg('请输入评分规则')
               break
             }
           } else {
             if (e.onlineButton && !e.onlineAddress) {
               invalid = 1
-              util.errorMsg('请输入线上地点')
+              Util.errorMsg('请输入线上地点')
               break
             }
             if (e.offlineButton && !e.offlineAddress) {
               invalid = 1
-              util.errorMsg('请输入线下地点')
+              Util.errorMsg('请输入线下地点')
               break
             }
             if (!e.onlineAddress && !e.offlineAddress) {
               invalid = 1
-              util.errorMsg('请输入比赛地点')
+              Util.errorMsg('请输入比赛地点')
               break
             }
           }
@@ -443,8 +440,8 @@ export default {
         this.$parent.hideLoad()
         // 新增赛事，并且点的是发布按钮，则发布该赛事
         status && this.publish(status)
-        util.successMsg((status ? '发布' : '保存') + '成功')
-        if (this.$parent.$refs.step1.form.completeCompetitionSetup.competitionType) {
+        Util.successMsg((status ? '发布' : '保存') + '成功')
+        if (status && this.$parent.$refs.step1.form.completeCompetitionSetup.competitionType) {
           this.autoAllocationConfirm() // 团队并且第一次发布才需要弹框询问是否自动分配人员
         } else {
           this.$emit('next', next)
diff --git a/src/pages/match/list/index.vue b/src/pages/match/list/index.vue
index e6d98e7..d038ea1 100644
--- a/src/pages/match/list/index.vue
+++ b/src/pages/match/list/index.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="page"
-       v-loading="loading">
+  <div class="page" v-loading="loading">
     <h6 class="p-title">筛选</h6>
     <div class="tool mul">
       <ul class="filter">
@@ -9,12 +8,9 @@
           <div class="single-choice">
             <dl>
               <dd>
-                <el-radio-group v-model="form.month"
-                                @change="changeType">
-                  <el-radio v-for="(item,index) in dateList"
-                            :key="index"
-                            :label="item.id"
-                            border>{{ item.name }}</el-radio>
+                <el-radio-group v-model="form.month" @change="changeType">
+                  <el-radio v-for="(item, index) in dateList" :key="index" :label="item.id" border>{{ item.name
+                    }}</el-radio>
                 </el-radio-group>
               </dd>
             </dl>
@@ -22,22 +18,12 @@
         </li>
         <li>
           <label>创建区间：</label>
-          <el-date-picker v-model="date"
-                          align="right"
-                          unlink-panels
-                          type="daterange"
-                          start-placeholder="开始日期"
-                          end-placeholder="结束日期"
-                          format="yyyy-MM-dd"
-                          value-format="yyyy-MM-dd"
-                          clearable></el-date-picker>
+          <el-date-picker v-model="date" align="right" unlink-panels type="daterange" start-placeholder="开始日期"
+            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker>
         </li>
         <li>
           <label>搜索：</label>
-          <el-input placeholder="请输入竞赛名称/创建人"
-                    suffix-icon="el-icon-search"
-                    v-model="form.keyword"
-                    clearable></el-input>
+          <el-input placeholder="请输入竞赛名称/创建人" suffix-icon="el-icon-search" v-model="form.keyword" clearable></el-input>
         </li>
       </ul>
     </div>
@@ -47,169 +33,91 @@
           <label>状态：</label>
           <dl>
             <dd>
-              <el-radio-group v-model="form.publishStatus"
-                              @change="changeType">
-                <el-radio v-for="(item,index) in statuses"
-                          :key="index"
-                          :label="item.id"
-                          border>{{ item.name }}</el-radio>
+              <el-radio-group v-model="form.publishStatus" @change="changeType">
+                <el-radio v-for="(item, index) in statuses" :key="index" :label="item.id" border>{{ item.name
+                  }}</el-radio>
               </el-radio-group>
             </dd>
           </dl>
         </li>
       </ul>
       <div>
-        <el-button type="primary"
-                   round
-                   @click="add"
-                   v-auth>创建竞赛</el-button>
-        <el-button type="primary"
-                   round
-                   @click="delAllSelection"
-                   v-auth>批量删除</el-button>
+        <el-button type="primary" round @click="add" v-auth>创建竞赛</el-button>
+        <el-button type="primary" round @click="delAllSelection" v-auth>批量删除</el-button>
       </div>
     </div>
 
-    <el-table ref="table"
-              :data="matchData"
-              class="table"
-              stripe
-              header-align="center"
-              @selection-change="handleSelectionChange"
-              row-key="id">
-      <el-table-column type="selection"
-                       width="55"
-                       align="center"
-                       :reserve-selection="true"></el-table-column>
-      <el-table-column type="index"
-                       width="60"
-                       label="序号"
-                       align="center">
+    <el-table ref="table" :data="matchData" class="table" stripe header-align="center"
+      @selection-change="handleSelectionChange" row-key="id">
+      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
+      <el-table-column type="index" width="60" label="序号" align="center">
         <template slot-scope="scope">
           {{ scope.$index + (page - 1) * pageSize + 1 }}
         </template>
       </el-table-column>
-      <el-table-column prop="competitionName"
-                       label="竞赛名称"
-                       align="center"></el-table-column>
-      <el-table-column prop="name"
-                       label="竞赛类型"
-                       width="90"
-                       align="center">
+      <el-table-column prop="competitionName" label="竞赛名称" align="center"></el-table-column>
+      <el-table-column prop="name" label="竞赛类型" width="90" align="center">
         <template slot-scope="scope">
           {{ scope.row.competitionType ? '团队赛' : '个人赛' }}
         </template>
       </el-table-column>
-      <el-table-column prop="applicantNum"
-                       label="报名人数"
-                       align="center"
-                       width="150"></el-table-column>
-      <el-table-column prop="status"
-                       label="状态"
-                       align="center"
-                       width="90">
+      <el-table-column prop="applicantNum" label="报名人数" align="center" width="150"></el-table-column>
+      <el-table-column prop="status" label="状态" align="center" width="90">
         <template slot-scope="scope">
           {{ scope.row.publishStatus ? '已发布' : '未发布' }}
         </template>
       </el-table-column>
-      <el-table-column prop="time"
-                       label="竞赛时间"
-                       align="center"
-                       width="300">
+      <el-table-column prop="time" label="竞赛时间" align="center" width="300">
         <template slot-scope="scope">
           {{ scope.row.playStartTime }} ~ {{ scope.row.playEndTime }}
         </template>
       </el-table-column>
-      <el-table-column prop="createTime"
-                       label="创建时间"
-                       align="center"
-                       width="160"></el-table-column>
-      <el-table-column prop="founderName"
-                       label="创建人"
-                       align="center"
-                       width="130">
+      <el-table-column prop="createTime" label="创建时间" align="center" width="160"></el-table-column>
+      <el-table-column prop="founderName" label="创建人" align="center" width="130">
         <template slot-scope="scope">
           {{ scope.row.founderName || '学校超管' }}
         </template>
       </el-table-column>
-      <el-table-column label="操作"
-                       align="center"
-                       width="280">
+      <el-table-column label="操作" align="center" width="280">
         <template slot-scope="scope">
-          <el-button type="text"
-                     @click="copy(scope.row)">复制</el-button>
+          <el-button type="text" @click="copy(scope.row)">复制</el-button>
           <el-button v-if="scope.row.publishStatus && scope.row.playingStages && scope.row.playingStages.length"
-                     type="text"
-                     @click="editEndTime(scope.row)"
-                     v-auth>修改结束时间</el-button>
-          <el-button v-auth
-                     type="text"
-                     @click="manage(scope.row)">管理</el-button>
-          <el-button v-auth
-                     type="text"
-                     @click="delData(scope.row)">删除</el-button>
+            type="text" @click="editEndTime(scope.row)" v-auth>修改结束时间</el-button>
+          <el-button v-auth type="text" @click="manage(scope.row)">管理</el-button>
+          <el-button v-auth type="text" @click="delData(scope.row)">删除</el-button>
           <!-- 列表展示中台的禁启用依据zt_open展示，职站的禁启用依据is_open展示 -->
           <!-- 中台禁用了这个学校发布的学校这边还能看到，但是学校这边不能启用。 -->
-          <el-switch v-if="scope.row.publishStatus"
-                     v-auth="'禁用'"
-                     v-model="scope.row.isOpen"
-                     :active-value="0"
-                     :inactive-value="1"
-                     style="margin: 0 10px 0 5px"
-                     :active-text="scope.row.isOpen ? '关' : '开'"
-                     @change="switchOff($event,scope.row,scope.$index)"></el-switch>
+          <el-switch v-if="scope.row.publishStatus" v-auth="'禁用'" v-model="scope.row.isOpen" :active-value="0"
+            :inactive-value="1" style="margin: 0 10px 0 5px" :active-text="scope.row.isOpen ? '关' : '开'"
+            @change="switchOff($event, scope.row, scope.$index)"></el-switch>
         </template>
       </el-table-column>
     </el-table>
     <div class="pagination">
-      <el-pagination background
-                     layout="total, prev, pager, next"
-                     :total="total"
-                     @current-change="handleCurrentChange"
-                     :current-page="page">
+      <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"
+        :current-page="page">
       </el-pagination>
     </div>
 
-    <el-dialog title="修改当前阶段结束时间"
-               :visible.sync="modifyVisible"
-               width="900px"
-               :close-on-click-modal="false">
-      <el-table :data="curRow.playingStages"
-                class="table"
-                ref="table"
-                stripe
-                header-align="center">
-        <el-table-column prop="stageName"
-                         label="阶段名称"
-                         min-width="100"
-                         align="center"></el-table-column>
-        <el-table-column label="竞赛起止时间"
-                         width="300"
-                         align="center">
+    <el-dialog title="修改当前阶段结束时间" :visible.sync="modifyVisible" width="900px" :close-on-click-modal="false">
+      <el-table :data="curRow.playingStages" class="table" ref="table" stripe header-align="center">
+        <el-table-column prop="stageName" label="阶段名称" min-width="100" align="center"></el-table-column>
+        <el-table-column label="竞赛起止时间" width="300" align="center">
           <template slot-scope="scope">
             {{ scope.row.startTime + ' ~ ' + scope.row.endTime }}
           </template>
         </el-table-column>
-        <el-table-column label="结束时间调整为"
-                         align="center"
-                         width="280">
+        <el-table-column label="结束时间调整为" align="center" width="280">
           <template slot-scope="scope">
-            <el-date-picker popper-class="no-atTheMoment"
-                            v-model="scope.row.newEndTime"
-                            placeholder="请选择结束时间"
-                            type="datetime"
-                            :picker-options="pickerOptions">
+            <el-date-picker popper-class="no-atTheMoment" v-model="scope.row.newEndTime" placeholder="请选择结束时间"
+              type="datetime" :picker-options="pickerOptions">
             </el-date-picker>
           </template>
         </el-table-column>
       </el-table>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button size="small"
-                   @click="modifyVisible = false">取 消</el-button>
-        <el-button size="small"
-                   type="primary"
-                   @click="modifySubmit">确 定</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="modifyVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="modifySubmit">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -508,22 +416,22 @@ export default {
 
 <style lang="scss" scoped>
 /deep/ .tool {
-    .filter {
-        .el-input {
-            min-width: 190px;
-        }
+  .filter {
+    .el-input {
+      min-width: 190px;
     }
+  }
 }
 
 @media (max-width: 1640px) {
-    .page .page-content .tool .filter {
-        flex-wrap: wrap;
-        margin-bottom: -15px;
+  .page .page-content .tool .filter {
+    flex-wrap: wrap;
+    margin-bottom: -15px;
 
-        li {
-            min-width: 34%;
-            margin-bottom: 15px;
-        }
+    li {
+      min-width: 34%;
+      margin-bottom: 15px;
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/match/manage/matchInfo.vue b/src/pages/match/manage/matchInfo.vue
index 6f71b65..5fbfe15 100644
--- a/src/pages/match/manage/matchInfo.vue
+++ b/src/pages/match/manage/matchInfo.vue
@@ -86,7 +86,8 @@
                   <th width="110">参赛人数限制</th>
                   <th>
                     允许参赛人员
-                    <el-tooltip v-if="stageTip" effect="dark" :content="stageTip" placement="bottom">
+                    <el-tooltip v-if="stageTip" effect="dark" content="阶段参赛人员异常，请尽快按照阶段赛规则调整，否则可能影响比赛成绩！"
+                      placement="bottom">
                       <i class="info el-icon-warning" style="margin-right: 10px;color: #ff1650;"></i>
                     </el-tooltip>
                   </th>
@@ -109,7 +110,7 @@
                       </template>
                       <span v-else class="m-r-5">无</span>
                       <i class="el-icon-edit icon" @click="selectPar(item)"></i>
-                      <el-tooltip v-if="stageTips.length && stageTips[i]" effect="dark" :content="stageTips[i]"
+                      <el-tooltip v-if="stageTip.length && stageTip[i]" effect="dark" :content="stageTip[i]"
                         placement="bottom">
                         <el-tag type="danger" class="m-l-5">异常</el-tag>
                       </el-tooltip>
@@ -285,8 +286,7 @@ export default {
       chooses: [],
       timer: null,
       teamErrors: [],
-      stageTip: '',
-      stageTips: [],
+      stageTip: null,
     };
   },
   mounted () {
@@ -345,9 +345,8 @@ export default {
         teamId: this.info.teamId
       })
       this.teamErrors = res.teamTip.split(';').filter(e => e)
-      if (res.stageTip) {
+      if (Object.keys(res.stageTip)) {
         this.stageTip = res.stageTip
-        this.stageTips = res.stageTip.split(';').filter(e => e)
       }
     },
     // 报名时间、比赛时间、状态处理
@@ -539,8 +538,8 @@ export default {
     chooseSubmit () {
       const accountIds = this.checkedMembers
       if (!accountIds.length) return Util.errorMsg('请选择参赛成员！')
-      const limit = this.curRow.teamNumLimit // 参赛人数限制
-      if (limit && accountIds.length > limit) return Util.errorMsg(`请选择${this.curRow.customNumber}个以下参赛成员！`) // 选择的参赛人员个数不能大于参赛人数限制
+      const { customNumber, teamNumLimit } = this.curRow // 参赛人数限制
+      if (teamNumLimit && accountIds.length > customNumber) return Util.errorMsg(`请选择${this.curRow.customNumber}个以下参赛成员！`) // 选择的参赛人员个数不能大于参赛人数限制
       this.$post(this.api.stageSelectParticipants, {
         accountIds,
         competitionId: this.id,
diff --git a/src/pages/match/manage/matchRank.vue b/src/pages/match/manage/matchRank.vue
index d49c7d4..88a3f13 100644
--- a/src/pages/match/manage/matchRank.vue
+++ b/src/pages/match/manage/matchRank.vue
@@ -171,10 +171,9 @@
 </template>
 
 <script>
-import Setting from "@/setting";
-import util from "@/libs/util";
-import echarts from "echarts";
-import axios from 'axios';
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import axios from 'axios'
 export default {
   data () {
     return {
@@ -201,7 +200,7 @@ export default {
         }
       ],
       headers: {
-        token: util.local.get(Setting.tokenKey)
+        token: Util.local.get(Setting.tokenKey)
       },
       active: '',
       grades: [],
@@ -513,7 +512,7 @@ export default {
         headers: this.headers,
         responseType: 'blob'
       }).then((res) => {
-        util.downloadFileDirect(`${this.grades.find(e => e.stageId == this.active).stageName}排名.xls`, new Blob([res.data]))
+        Util.downloadFileDirect(`${this.grades.find(e => e.stageId == this.active).stageName}排名.xls`, new Blob([res.data]))
         this.exporting = false
       }).catch(res => { })
     },
@@ -523,7 +522,7 @@ export default {
         competitionId: this.id,
         isOverallRanking: this.active ? 0 : 1,
         publicationType: this.type,
-        releaseTime: util.formatDate("yyyy-MM-dd hh:mm:ss", this.publishTime),
+        releaseTime: Util.formatDate("yyyy-MM-dd hh:mm:ss", this.publishTime),
         stageId: this.active || this.stageId,
       })
       this.uploadData = []
@@ -561,8 +560,9 @@ export default {
     },
     // 定时发布排名
     async publishTimeSubmit () {
-      const { startTime, endTime } = this.grades[this.index]
-      if (Date.now() <= new Date(endTime)) return util.errorMsg('当前阶段还在进行中,请在本阶段结束后再发布!')
+      const { endTime } = this.grades[this.index]
+      const now = await Util.getNow()
+      if (now <= new Date(endTime)) return Util.errorMsg('当前阶段还在进行中,请在本阶段结束后再发布!')
 
       this.publishSubmit()
       // await this.$post(this.api.addCompetitionStageRankingTime, {
@@ -570,10 +570,10 @@ export default {
       //   isOverallRanking: this.active ? 0 : 1,
       //   publicationType: this.type,
       //   stageId: this.active || this.stageId,
-      //   releaseTime: util.formatDate("yyyy-MM-dd hh:mm:ss", this.publishTime)
+      //   releaseTime: Util.formatDate("yyyy-MM-dd hh:mm:ss", this.publishTime)
       // })
 
-      util.successMsg('发布成功')
+      Util.successMsg('发布成功')
       this.getData()
       this.uploaded = 0
       this.publishVisible = false
@@ -591,7 +591,7 @@ export default {
       if (publish) {
         // 如果是手动发布，并且没有上传排名，则提示
         if (this.type && !this.uploaded && !this.list.length) {
-          return util.errorMsg('请先上传数据！')
+          return Util.errorMsg('请先上传数据！')
         } else {
           this.publishTime = new Date()
           this.publishVisible = true
@@ -608,7 +608,7 @@ export default {
           this.sourceType = ''
           this.type = 0
           this.getData()
-          util.successMsg('取消发布成功！')
+          Util.successMsg('取消发布成功！')
         } catch (error) { }
       }
     },
@@ -624,7 +624,7 @@ export default {
     },
     // 上传文件
     handleExceed (files, fileList) {
-      util.warningMsg(
+      Util.warningMsg(
         `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
       )
     },
@@ -634,7 +634,7 @@ export default {
         headers: this.headers,
         responseType: 'blob'
       }).then((res) => {
-        util.downloadFileDirect(`批量导入排名管理失败数据导出.xls`, new Blob([res.data]))
+        Util.downloadFileDirect(`批量导入排名管理失败数据导出.xls`, new Blob([res.data]))
       }).catch(res => { })
     },
     uploadSuccess (res) {
@@ -650,11 +650,11 @@ export default {
         } else {
           this.uploaded = 1
           this.importVisible = false
-          util.successMsg(data.tip, 3000)
-          // util.successMsg('请检查数据后，点击发布排名以发布数据！')
+          Util.successMsg(data.tip, 3000)
+          // Util.successMsg('请检查数据后，点击发布排名以发布数据！')
         }
       } else {
-        util.errorMsg(res.message || "上传失败，请检查数据")
+        Util.errorMsg(res.message || "上传失败，请检查数据")
       }
     },
     uploadError (err, file, fileList) {
diff --git a/src/pages/match/manage/matchSignup.vue b/src/pages/match/manage/matchSignup.vue
index 171ecd7..ab6efad 100644
--- a/src/pages/match/manage/matchSignup.vue
+++ b/src/pages/match/manage/matchSignup.vue
@@ -17,7 +17,8 @@
         </li>
       </ul>
       <div>
-        <el-button type="primary" round @click="autoAllocationConfirm">{{ !notBeginSign && allocated ? '取消' : ''
+        <el-button v-if="loaded && info.completeCompetitionSetup.competitionType" type="primary" round
+          :loading="allocating" @click="autoAllocationConfirm">{{ !notBeginSign && allocated ? '取消' : ''
           }}自动分配阶段成员</el-button>
         <el-button type="primary" round @click="batchImport">导入</el-button>
         <el-button type="primary" round @click="add" v-auth="'/match/list:管理:报名人员:新增'">新增</el-button>
@@ -286,6 +287,8 @@ export default {
       now: '',
       notBeginSign: true,
       allocated: true,
+      allocating: false,
+      loaded: 0,
     };
   },
   watch: {
@@ -304,10 +307,13 @@ export default {
     }
   },
   mounted () {
+    this.$once('hook:beforeDestroy', function () {
+      clearInterval(this.timer)
+    })
+
     this.getData()
     this.getInfo()
     this.getTeam()
-    this.getAutomaticAllocation()
   },
   methods: {
     init () {
@@ -351,18 +357,25 @@ export default {
         this.form.schoolId = this.$store.state.user.schoolId
       }
 
-      // 判断当前处于报名结束前还是后，报名结束前显示：自动分配/取消分配。报名结束后显示：自动分配。
-      clearInterval(this.timer)
-      this.now = await Util.getNow()
-      this.timer = setInterval(() => {
-        this.now = new Date(this.now.setSeconds(this.now.getSeconds() + 1))
+      // 团队赛才有自动分配
+      if (this.info.completeCompetitionSetup.competitionType) {
+        this.getAutomaticAllocation()
         this.notBeginSign = this.now > new Date(this.info.signUpEndTime) // 是否在报名结束时间之前
-      }, 1000)
+        // 判断当前处于报名结束前还是后，报名结束前显示：自动分配/取消分配。报名结束后显示：自动分配。
+        clearInterval(this.timer)
+        this.now = await Util.getNow()
+        this.timer = setInterval(() => {
+          this.now = new Date(this.now.setSeconds(this.now.getSeconds() + 1))
+          this.notBeginSign = this.now > new Date(this.info.signUpEndTime) // 是否在报名结束时间之前
+        }, 1000)
+      }
     },
     // 获取是否已分配
     async getAutomaticAllocation () {
       const res = await this.$post(`${this.api.viewEventAllocationInformation}?competitionId=${this.id}`)
       this.allocated = res.data && res.data.assignOrNot
+      this.allocating = false
+      this.loaded = 1
     },
     // 自动分配人员
     async automaticAllocation (assignOrNot) {
@@ -376,17 +389,18 @@ export default {
     async autoAllocationConfirm () {
       // 报名结束后
       if (this.notBeginSign) {
-        this.$confirm('确定立即自动分配阶段成员？', '提示', {
+        this.$confirm('确定立即给所有报名的团队自动分配阶段成员？', '提示', {
           type: 'success',
           closeOnClickModal: false,
         }).then(async () => {
           await this.$post(`${this.api.automaticAllocation}?competitionId=${this.id}`) // 立马分配
         }).catch(() => { })
       } else {
-        this.$confirm(`确定${this.allocated ? '取消' : '开启'}自动分配阶段成员？`, {
+        this.$confirm(this.allocated ? '确定取消自动分配阶段成员？' : '确定开启自动分配阶段成员？开启后，将在报名结束后给所有报名的团队自动分配阶段参赛人员', {
           type: 'success',
           closeOnClickModal: false,
         }).then(async () => {
+          this.allocating = true
           this.automaticAllocation(this.allocated ? 0 : 1)
         }).catch(() => { })
       }
diff --git a/src/pages/station/preview/index.vue b/src/pages/station/preview/index.vue
index 50594c7..19aa710 100644
--- a/src/pages/station/preview/index.vue
+++ b/src/pages/station/preview/index.vue
@@ -1,152 +1,101 @@
 <template>
   <div style="padding: 24px">
-    <el-card shadow="hover"
-             class="m-b-20">
+    <el-card shadow="hover" class="m-b-20">
       <div class="flex-between">
-        <el-page-header @back="back"
-                        :content="curriculumName || courseName"></el-page-header>
+        <el-page-header @back="back" :content="curriculumName || courseName"></el-page-header>
       </div>
     </el-card>
-    <el-card class="source-card"
-             shadow="hover"
-             style="background: none;">
+    <el-card class="source-card" shadow="hover" style="background: none;">
       <div class="flex">
-        <div class="cover"
-             :class="{'is-word': showMask1}">
+        <div class="cover" :class="{ 'is-word': showMask1 }">
           <!--实验台不显示课程封面-->
-          <img v-if="coverUrl"
-               :src="coverUrl"
-               alt=""
-               width="100%"
-               height="100%">
+          <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>
+            <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
             <template v-if="showMask">
-              <div class="mask"
-                   style="top: 0;width:100%;height: 48px;"></div>
-              <div class="mask"
-                   style="top: 53px;width:100%;height: 30px;"></div>
-              <div class="mask"
-                   style="bottom: 0;right: 0;width:280px;height: 22px;background-color: #444;"></div>
+              <div class="mask" style="top: 0;width:100%;height: 48px;"></div>
+              <div class="mask" style="top: 53px;width:100%;height: 30px;"></div>
+              <div class="mask" style="bottom: 0;right: 0;width:280px;height: 22px;background-color: #444;"></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>
+              <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>
+              <div class="excel-mask1" style="height: 48px;"></div>
             </template>
           </template>
-          <div class="pdf inner"
-               v-else-if="pdfSrc">
-            <img class="full"
-                 src="@/assets/img/screen/full.png"
-                 alt=""
-                 @click="fullScreen">
+          <div class="pdf inner" v-else-if="pdfSrc">
+            <img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen">
             <p class="arrow">
-              <span @click="changePdfPage(0)"
-                    class="turn el-icon-arrow-left"
-                    :class="{grey: currentPage==1}"></span>
+              <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>
+              <span @click="changePdfPage(1)" class="turn el-icon-arrow-right"
+                :class="{ grey: currentPage == pageCount }"></span>
             </p>
             <div style='color:#393A3D;height: 30px;background: #393A3D;'></div>
-            <pdf class="pdf-wrap"
-                 :src="pdfSrc"
-                 :page="currentPage"
-                 @num-pages="pageCount=$event"
-                 @page-loaded="currentPage=$event"
-                 @loaded="loadPdfHandler">
+            <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 class="inner" v-else-if="playAuth">
+            <div class="video_wid" id="player"></div>
           </div>
-          <div class="inner"
-               v-else-if="videoSrc">
-            <video class="video"
-                   :key="videoSrc"
-                   width="100%"
-                   height="100%"
-                   autoplay
-                   controls>
-              <source :src="videoSrc"
-                      type="video/mp4">
+          <div class="inner" v-else-if="videoSrc">
+            <video class="video" :key="videoSrc" width="100%" height="100%" autoplay controls>
+              <source :src="videoSrc" type="video/mp4">
               您的浏览器不支持 video 标签。
             </video>
           </div>
         </div>
         <div class="catalog">
           <div class="m-b-20">
-            <el-button v-if="!overdue"
-                       class="entry"
-                       type="primary"
-                       size="small"
-                       @click="showBuy">续费</el-button>
-            <el-button v-else
-                       class="entry"
-                       type="primary"
-                       @click="entry">进 入 实 验</el-button>
+            <el-button v-if="!overdue" class="entry" type="primary" size="small" @click="showBuy">续费</el-button>
+            <el-button v-else class="entry" type="primary" @click="entry">进 入 实 验</el-button>
           </div>
           <div class="list">
             <h4 class="title">{{ curriculumName || courseName }}</h4>
             <div>
               <h6 class="pro-title">当前教学进度</h6>
-              <el-progress :stroke-width="12"
-                           :percentage="schedule"
-                           :format="percentFormat"
-                           :text-color="'#fff'"></el-progress>
+              <el-progress :stroke-width="12" :percentage="schedule" :format="percentFormat"
+                :text-color="'#fff'"></el-progress>
             </div>
             <div class="types">
-              <div :class="['item', { active: type === 1 }]"
-                   @click="typeChange(1)">
+              <div :class="['item', { active: type === 1 }]" @click="typeChange(1)">
                 <i class="icon el-icon-notebook-2"></i> 目录
               </div>
-              <div :class="['item', { active: type === 2 }]"
-                   @click="typeChange(2)">
+              <div :class="['item', { active: type === 2 }]" @click="typeChange(2)">
                 <i class="icon el-icon-timer"></i> 教学进度
               </div>
             </div>
             <div class="chapters">
               <template v-if="type === 1">
                 <template v-if="chapterList.length">
-                  <div class="chapter"
-                       v-for="(item,index) in chapterList"
-                       :key="index">
+                  <div class="chapter" v-for="(item, i) in chapterList" :key="i">
                     <div class="chapterName">{{ item.name }}</div>
-                    <div class="section"
-                         v-if="item.subsectionList.length">
-                      <div v-for="(section,i) in item.subsectionList"
-                           :key="i"
-                           @click="preview(section, item.name)">
-                        <p class="sectionName"
-                           :title="section.name"
-                           :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p>
-                      </div>
+                    <div class="section" v-if="item.subsectionList.length">
+                      <p class="sectionName" :class="{ active: curLink === `${item.name}${section.name}` }"
+                        v-for="(section, i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
+                        <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
+                        <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
+                        <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
+                          src="@/assets/img/exts/word.png" alt="">
+                        <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
+                        <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
+                        <img v-else src="@/assets/img/exts/pic.png" alt="">
+                        {{ section.name }}
+                      </p>
                     </div>
                   </div>
                 </template>
               </template>
-              <div v-else
-                   class="section">
-                <p class="sectionName"
-                   v-for="(item, i) in progressList"
-                   :key="i"
-                   :title="item.projectName">
+              <div v-else class="section">
+                <p class="sectionName" v-for="(item, i) in progressList" :key="i" :title="item.projectName">
                   {{ i + 1 }}.
                   {{ item.projectName }}
                   <i :class="['icon', item.whetherToStudyOrNot ? 'el-icon-success' : 'circle']"
-                     @click.stop="studySection(item)"></i>
+                    @click.stop="studySection(item)"></i>
                 </p>
               </div>
             </div>
@@ -156,46 +105,33 @@
     </el-card>
 
     <div class="tabs">
-      <a class="item"
-         v-for="(item, i) in tabs"
-         :key="i"
-         :class="{active: item.id == active}"
-         @click="tabChange(item)">{{ item.name }}</a>
+      <a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: item.id == active }"
+        @click="tabChange(item)">{{
+          item.name }}</a>
     </div>
     <div class="flex">
       <div class="tab-content">
         <template v-if="active === 1">
           <div class="page">
-            <div class="des"
-                 v-html="briefIntroduction"></div>
+            <div class="des" v-html="briefIntroduction"></div>
           </div>
         </template>
         <template v-if="active === 2">
           <div class="page">
             <template v-if="showNoteAdd || !notes.length">
-              <el-form class="form"
-                       ref="form"
-                       label-width="120px"
-                       center>
-                <el-form-item class="required"
-                              label="笔记标题">
-                  <el-input placeholder="请输入笔记标题"
-                            v-model="noteForm.noteName"
-                            maxlength="30"
-                            style="width: 400px"></el-input>
+              <el-form class="form" ref="form" label-width="120px" center>
+                <el-form-item class="required" label="笔记标题">
+                  <el-input placeholder="请输入笔记标题" v-model="noteForm.noteName" maxlength="30"
+                    style="width: 400px"></el-input>
                 </el-form-item>
-                <el-form-item class="required"
-                              label="笔记内容">
-                  <Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
-                          v-model="noteForm.noteContent"
-                          :init="editorConfig" />
+                <el-form-item class="required" label="笔记内容">
+                  <Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="noteForm.noteContent"
+                    :init="editorConfig" />
                 </el-form-item>
               </el-form>
               <div class="text-right">
-                <el-button v-if="notes.length"
-                           @click="showNoteAdd = false">取消</el-button>
-                <el-button type="primary"
-                           @click="submitNote">保存</el-button>
+                <el-button v-if="notes.length" @click="showNoteAdd = false">取消</el-button>
+                <el-button type="primary" @click="submitNote">保存</el-button>
               </div>
             </template>
             <template v-else>
@@ -203,32 +139,24 @@
                 <ul class="filter">
                   <li>
                     <label>搜索：</label>
-                    <el-input placeholder="请输入标题"
-                              v-model="noteKeyword"
-                              clearable></el-input>
+                    <el-input placeholder="请输入标题" v-model="noteKeyword" clearable></el-input>
                   </li>
                 </ul>
                 <div>
-                  <el-button type="primary"
-                             @click="addNote">新增笔记</el-button>
+                  <el-button type="primary" @click="addNote">新增笔记</el-button>
                 </div>
               </div>
               <el-timeline class="timeline">
-                <el-timeline-item placement="top"
-                                  v-for="(item, i) in notes"
-                                  :key="i">
+                <el-timeline-item placement="top" v-for="(item, i) in notes" :key="i">
                   <p class="sign">{{ item.createTime }}</p>
                   <div class="ver">
                     {{ item.noteName }}
                     <span class="action">
-                      <i class="el-icon-edit-outline"
-                         @click="editNote(item)"></i>
-                      <i class="el-icon-delete"
-                         @click="delNote(item)"></i>
+                      <i class="el-icon-edit-outline" @click="editNote(item)"></i>
+                      <i class="el-icon-delete" @click="delNote(item)"></i>
                     </span>
                   </div>
-                  <div class="des"
-                       v-html="item.noteContent"></div>
+                  <div class="des" v-html="item.noteContent"></div>
                 </el-timeline-item>
               </el-timeline>
             </template>
@@ -236,39 +164,26 @@
         </template>
         <template v-if="active === 4">
           <div class="page">
-            <quill ref="quill"
-                   :border="true"
-                   v-model="comment"
-                   :height="150"
-                   :toTop="false" />
+            <quill ref="quill" :border="true" v-model="comment" :height="150" :toTop="false" />
             <div class="m-t-10 text-right">
-              <el-button type="primary"
-                         size="mini"
-                         @click="submitComment(0)">提交</el-button>
+              <el-button type="primary" size="mini" @click="submitComment(0)">提交</el-button>
             </div>
             <ul class="msg">
-              <li v-for="(item, i) in comments"
-                  :key="i"
-                  :id="'comment' + item.commentId">
+              <li v-for="(item, i) in comments" :key="i" :id="'comment' + item.commentId">
                 <div class="li-wrap">
-                  <img :src="item.createUserAvatars"
-                       alt=""
-                       class="avatar">
+                  <img :src="item.createUserAvatars" alt="" class="avatar">
                   <div class="texts">
                     <h6>
                       <span class="name">{{ item.createUsername }}</span>
                       发表于 {{ item.createTime }}
                     </h6>
-                    <div class="m-t-8"
-                         v-html="item.content"></div>
+                    <div class="m-t-8" v-html="item.content"></div>
                   </div>
                   <div class="action">
-                    <i class="icon el-icon-chat-dot-square"
-                       @click="showReplay(item)"></i>
+                    <i class="icon el-icon-chat-dot-square" @click="showReplay(item)"></i>
                     <!-- 当前用户是管理员 || 该条评论是学生发的（没有createRoleName即是学生） || 当前用户的account==该条评论的创建人accountId -->
                     <i v-if="(item.currentRoleName && item.currentRoleName.includes('管理员')) || !item.createRoleName || item.currentAccountId == item.createAccountId"
-                       class="icon el-icon-delete"
-                       @click="delComment(item)"></i>
+                      class="icon el-icon-delete" @click="delComment(item)"></i>
 
                     <!-- <div class="like-wrap"
                          @click="like(item)">
@@ -284,29 +199,18 @@
                     </div> -->
                   </div>
                 </div>
-                <div class="reply"
-                     v-if="item.showReply">
-                  <quill :border="true"
-                         v-model="item.replyContent"
-                         :toTop="false"
-                         :height="150" />
+                <div class="reply" v-if="item.showReply">
+                  <quill :border="true" v-model="item.replyContent" :toTop="false" :height="150" />
                   <div class="m-v-10 text-right">
-                    <el-button type="primary"
-                               size="mini"
-                               @click="submitComment(item)">提交</el-button>
+                    <el-button type="primary" size="mini" @click="submitComment(item)">提交</el-button>
                   </div>
                 </div>
-                <ul class="msg children"
-                    v-if="item.showChildren">
-                  <li v-for="(reply,i) in item.children"
-                      :key="i"
-                      :id="'comment' + reply.commentId">
+                <ul class="msg children" v-if="item.showChildren">
+                  <li v-for="(reply, i) in item.children" :key="i" :id="'comment' + reply.commentId">
                     <div class="li-wrap">
-                      <img class="avatar"
-                           :src="reply.createUserAvatars"
-                           alt="">
+                      <img class="avatar" :src="reply.createUserAvatars" alt="">
                       <div class="texts">
-                        <div class="name">{{reply.createUsername}}</div>
+                        <div class="name">{{ reply.createUsername }}</div>
                         <div class="flex m-v-8">
                           <template v-if="reply.level !== 2">
                             回复
@@ -314,15 +218,13 @@
                           </template>
                           <div v-html="reply.content"></div>
                         </div>
-                        <div class="date">{{reply.createTime}}</div>
+                        <div class="date">{{ reply.createTime }}</div>
                       </div>
                       <div class="action">
-                        <i class="icon el-icon-chat-dot-square"
-                           @click="showReplay(reply)"></i>
+                        <i class="icon el-icon-chat-dot-square" @click="showReplay(reply)"></i>
                         <!-- 当前用户是管理员 || 该条评论是学生发的（没有createRoleName即是学生） || 当前用户的account==该条评论的创建人accountId -->
                         <i v-if="(reply.currentRoleName && reply.currentRoleName.includes('管理员')) || !reply.createRoleName || reply.currentAccountId == reply.createAccountId"
-                           class="icon el-icon-delete"
-                           @click="delComment(reply)"></i>
+                          class="icon el-icon-delete" @click="delComment(reply)"></i>
                         <!-- <div class="like-wrap"
                              @click="like(item, reply)">
                           <img v-if="reply.isLike"
@@ -337,22 +239,17 @@
                         </div> -->
                       </div>
                     </div>
-                    <div class="reply"
-                         v-if="reply.showReply">
-                      <quill :border="true"
-                             v-model="reply.replyContent"
-                             :toTop="false"
-                             :height="150" />
+                    <div class="reply" v-if="reply.showReply">
+                      <quill :border="true" v-model="reply.replyContent" :toTop="false" :height="150" />
                       <div class="p-b-10 m-t-10 text-right">
-                        <el-button type="primary"
-                                   size="mini"
-                                   @click="submitComment(item, reply)">提交</el-button>
+                        <el-button type="primary" size="mini" @click="submitComment(item, reply)">提交</el-button>
                       </div>
                     </div>
                   </li>
                 </ul>
-                <div v-if="item.children"
-                     class="toggle"><span @click="item.showChildren = !item.showChildren">{{item.showChildren ? '收起所有回复' : `查看所有${item.children.length}条回复`}} <i class="el-icon-arrow-down"></i></span></div>
+                <div v-if="item.children" class="toggle"><span @click="item.showChildren = !item.showChildren">{{
+                  item.showChildren ?
+                    '收起所有回复' : `查看所有${item.children.length}条回复` }} <i class="el-icon-arrow-down"></i></span></div>
               </li>
             </ul>
           </div>
@@ -360,77 +257,48 @@
       </div>
       <div class="rank">
         <h6 class="title">练习成绩排行</h6>
-        <el-select style="width: 100%"
-                   v-model="archProject"
-                   placeholder="请选择"
-                   @change="getMaximumScore">
-          <el-option v-for="(item, i) in progressList"
-                     :key="i"
-                     :label="item.projectName"
-                     :value="item.projectId"></el-option>
+        <el-select style="width: 100%" v-model="archProject" placeholder="请选择" @change="getMaximumScore">
+          <el-option v-for="(item, i) in progressList" :key="i" :label="item.projectName"
+            :value="item.projectId"></el-option>
         </el-select>
-        <div v-if="maximumScores.length"
-             class="arches">
-          <div v-for="(item, i) in maximumScores"
-               :key="i"
-               class="line">
+        <div v-if="maximumScores.length" class="arches">
+          <div v-for="(item, i) in maximumScores" :key="i" class="line">
             <div>
-              <img :src="item.userAvatars"
-                   alt=""
-                   class="avatar">
+              <img :src="item.userAvatars" alt="" class="avatar">
               <span class="name">{{ item.userName }}</span>
             </div>
             <span class="point">{{ item.highestScore }}分</span>
           </div>
         </div>
-        <p v-else
-           class="none">暂无数据</p>
+        <p v-else class="none">暂无数据</p>
       </div>
     </div>
 
-    <el-dialog title="请选择项目"
-               v-loading="loading"
-               :visible.sync="projectVisible"
-               width="828px"
-               custom-class="project-dia"
-               :close-on-click-modal="false">
+    <el-dialog title="请选择项目" v-loading="loading" :visible.sync="projectVisible" width="828px" custom-class="project-dia"
+      :close-on-click-modal="false">
       <ul class="projects">
-        <li v-for="(item, i) in projects"
-            :key="i"
-            :class="{active: curProject == item.projectId}"
-            @click="selectProject(item)">
-          <img src="@/assets/img/project.png"
-               alt="">
+        <li v-for="(item, i) in projects" :key="i" :class="{ active: curProject == item.projectId }"
+          @click="selectProject(item)">
+          <img src="@/assets/img/project.png" alt="">
           <span>{{ i + 1 }}. {{ item.projectName }}</span>
         </li>
       </ul>
 
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button size="small"
-                   @click="projectVisible = false">取 消</el-button>
-        <el-button size="small"
-                   type="primary"
-                   @click="toSub">确 定</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="projectVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="toSub">确 定</el-button>
       </span>
     </el-dialog>
 
     <!-- 购买弹框 -->
-    <el-dialog title="温馨提示"
-               :visible.sync="buyVisible"
-               width="420px"
-               center
-               :close-on-click-modal="false">
+    <el-dialog title="温馨提示" :visible.sync="buyVisible" width="420px" center :close-on-click-modal="false">
       <div class="buy">
         <p class="tips">该课程订阅期限已到期，若需要续费请扫码添加客服咨询</p>
-        <img src="@/assets/img/wechat-code.jpeg"
-             alt="">
+        <img src="@/assets/img/wechat-code.jpeg" alt="">
       </div>
     </el-dialog>
 
-    <pdfDia :key="pdfVisible"
-            :visible.sync="pdfVisible"
-            :src.sync="pdfSrc" />
+    <pdfDia :key="pdfVisible" :visible.sync="pdfVisible" :src.sync="pdfSrc" />
   </div>
 </template>
 
@@ -1030,395 +898,484 @@ export default {
 <style lang="scss" scoped>
 @import '../../../styles/page/station.scss';
 $height: 700px;
+
 .page {
-    border-radius: 0;
-    .intro {
-        font-size: 14px;
-        color: #333;
-        line-height: 24px;
-    }
+  border-radius: 0;
 
-    /deep/.des {
-        div,
-        p,
-        span {
-            font-family: PingFangSC-Regular !important;
-        }
+  .intro {
+    font-size: 14px;
+    color: #333;
+    line-height: 24px;
+  }
+
+  /deep/.des {
+    div,
+    p,
+    span {
+      font-family: PingFangSC-Regular !important;
     }
+  }
 }
+
 /deep/.source-card {
-    .el-card__body {
-        padding: 0;
-    }
+  .el-card__body {
+    padding: 0;
+  }
 }
+
 .video_wid,
 .cover {
-    position: relative;
-    width: 76%;
-    height: $height !important;
-    border: 0;
+  position: relative;
+  width: 76%;
+  height: $height !important;
+  border: 0;
 }
+
 .cover {
-    flex: 1;
-    width: auto;
+  flex: 1;
+  width: auto;
 }
+
 .cover {
-    img {
-        border-radius: 8px;
-    }
-    &.is-word {
-        overflow: hidden;
-    }
-}
-.entry {
-    width: 100%;
-    height: 50px;
-    font-size: 18px;
-}
-.types {
-    display: flex;
-    margin: 15px 0;
-    .item {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 120px;
-        height: 40px;
-        color: #fff;
-        background-color: #b5b5b5;
-        border-radius: 4px;
-        cursor: pointer;
-        &:first-child {
-            margin-right: 10px;
-        }
-        &:hover {
-            background-color: #ac89fd;
-        }
-        &.active {
-            background-color: $main-color;
-        }
-    }
-    .icon {
-        margin-right: 5px;
-        font-size: 18px;
-    }
+  img {
+    border-radius: 8px;
+  }
+
+  &.is-word {
+    overflow: hidden;
+  }
 }
+
+
 .fileIframe {
-    height: $height !important;
+  height: $height !important;
 }
+
 .video_wid,
 .inner {
-    width: 100%;
-    height: 100% !important;
-    border: 0;
-    overflow: auto;
+  width: 100%;
+  height: 100% !important;
+  border: 0;
+  overflow: auto;
 }
+
 .cover.is-word {
-    .inner {
-        height: calc(100% + 38px) !important;
-        margin-top: -38px;
-    }
+  .inner {
+    height: calc(100% + 38px) !important;
+    margin-top: -38px;
+  }
 }
+
 .video_wid:focus {
-    outline: none;
+  outline: none;
 }
+
 .catalog {
-    width: 330px;
-    margin-left: 20px;
-}
-.list {
-    height: calc(700px - 70px);
-    padding: 24px 16px;
-    background: #fff;
+  width: 296px;
+  padding: 16px;
+  margin-left: 12px;
+  background-color: #252528;
+
+  .entry {
+    width: 100%;
+    height: 50px;
+    font-size: 18px;
+  }
+
+  .types {
+    display: flex;
+    margin: 15px 0;
+
+    .item {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 120px;
+      height: 40px;
+      color: #fff;
+      background-color: #4e4e4e;
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:first-child {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        background-color: #ac89fd;
+      }
+
+      &.active {
+        background-color: $main-color;
+      }
+    }
+
+    .icon {
+      margin-right: 5px;
+      font-size: 18px;
+    }
+  }
+
+  .list {
+    height: calc(700px - 104px);
+    overflow-y: auto;
+
     .title {
-        margin-bottom: 8px;
-        color: rgba(0, 0, 0, 0.85);
-        font-size: 20px;
+      margin-bottom: 11px;
+      color: #fff;
+      font-size: 16px;
     }
+
     .pro-title {
-        margin-bottom: 5px;
-        font-size: 14px;
+      margin-bottom: 5px;
+      color: #fff;
+      font-size: 12px;
     }
+
     /deep/.el-progress-bar {
-        width: 86%;
+      width: 92%;
+    }
+
+    /deep/.el-progress__text {
+      color: #fff;
     }
+
     .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;
-            }
+      position: relative;
+
+      .desc {
+        font-size: 12px;
+        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);
-                }
-            }
+      }
+
+      .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% - 167px);
-        overflow: auto;
+      margin-top: 16px;
+      max-height: calc(100% - 53px);
+      overflow: auto;
     }
+
     .chapter {
-        margin-bottom: 20px;
+      margin-bottom: 20px;
     }
+
     .chapterName {
-        color: rgba(0, 0, 0, 0.85);
-        font-size: 16px;
+      color: #fff;
+      font-size: 14px;
     }
+
     .section {
-        padding: 5px 15px;
-        margin-top: 8px;
-        background: rgba(0, 0, 0, 0.02);
+      padding: 5px 15px;
+      margin-top: 12px;
+      background-color: #121214;
     }
+
     .sectionName {
-        position: relative;
-        padding-right: 15px;
-        margin: 10px 0;
+      position: relative;
+      padding-right: 15px;
+      margin: 12px 0;
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+      @include ellipsis;
+
+      img {
+        margin-right: 8px;
+      }
+
+      .icon {
+        position: absolute;
+        right: 0;
         font-size: 14px;
-        color: rgba(0, 0, 0, 0.65);
-        cursor: pointer;
-        @include ellipsis;
-        &.active {
-            color: #9278ff;
-        }
-        .icon {
-            position: absolute;
-            right: 0;
-            font-size: 16px;
-            color: #00c935;
-        }
-        .circle {
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            border: 1px solid #ccc;
-        }
+        color: #00c935;
+      }
+
+      .circle {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: 1px solid #ccc;
+      }
+
+      &.active {
+        color: #fff;
+      }
     }
+  }
 }
+
 .buy {
-    text-align: center;
-    .tips {
-        margin-bottom: 10px;
-        font-size: 14px;
-    }
-    img {
-        width: 85%;
-    }
+  text-align: center;
+
+  .tips {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  img {
+    width: 85%;
+  }
 }
+
 .el-image-viewer__wrapper {
-    transform: translateY(-10px);
-    transition: transform 0.5s;
+  transform: translateY(-10px);
+  transition: transform 0.5s;
 
-    &.active {
-        transform: translateY(0);
-    }
+  &.active {
+    transform: translateY(0);
+  }
 }
+
 .el-image-viewer__close {
-    z-index: 2000;
-    top: 15px;
-    right: 15px;
-    &.doc-close {
-        i {
-            color: #000 !important;
-        }
+  z-index: 2000;
+  top: 15px;
+  right: 15px;
+
+  &.doc-close {
+    i {
+      color: #000 !important;
     }
+  }
 }
+
 .list::-webkit-scrollbar {
-    width: 4px;
+  width: 4px;
 }
+
 .list::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: rgba(0, 0, 0, 0.06);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.06);
 }
 
 .mask {
-    z-index: 9;
-    position: absolute;
-    background-color: rgb(57, 58, 61);
+  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);
+  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;
+  z-index: 9;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  background-color: #185abd;
 }
+
 .word-mask2 {
-    z-index: 9;
-    position: absolute;
-    background-color: transparent;
+  z-index: 9;
+  position: absolute;
+  background-color: transparent;
 }
+
 .excel-mask1 {
-    z-index: 9;
-    position: absolute;
-    top: 0;
-    left: 20%;
-    width: 60%;
-    background-color: #107c41;
+  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;
-        }
+  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 {
-    position: relative;
-    margin-top: 0 !important;
-    .full {
-        position: absolute;
-        top: 7px;
-        right: 10px;
-        cursor: pointer;
-    }
-    .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;
+  position: relative;
+  margin-top: 0 !important;
+
+  .full {
+    position: absolute;
+    top: 7px;
+    right: 10px;
+    cursor: pointer;
+  }
+
+  .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;
+  }
 }
+
 .tabs {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
+
 .tab-content {
-    width: 80%;
+  width: 80%;
 }
+
 .rank {
-    width: calc(20% - 12px);
-    padding: 20px;
-    margin-left: 12px;
-    background-color: #fff;
-    .title {
-        margin-bottom: 10px;
-        font-size: 15px;
-        font-weight: 400;
-    }
-    .arches {
-        max-height: 223px;
-        padding-right: 10px;
-        margin-top: 20px;
-        overflow: auto;
-    }
-    .line {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
-    }
-    .avatar {
-        width: 35px;
-        height: 35px;
-        margin-right: 10px;
-    }
-    .point {
-        font-weight: 600;
-        color: #9278ff;
-    }
-    .none {
-        margin-top: 10px;
-        text-align: center;
-        font-size: 12px;
-        color: #727272;
-    }
+  width: calc(20% - 12px);
+  padding: 20px;
+  margin-left: 12px;
+  background-color: #fff;
+
+  .title {
+    margin-bottom: 10px;
+    font-size: 15px;
+    font-weight: 400;
+  }
+
+  .arches {
+    max-height: 223px;
+    padding-right: 10px;
+    margin-top: 20px;
+    overflow: auto;
+  }
+
+  .line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .avatar {
+    width: 35px;
+    height: 35px;
+    margin-right: 10px;
+  }
+
+  .point {
+    font-weight: 600;
+    color: #9278ff;
+  }
+
+  .none {
+    margin-top: 10px;
+    text-align: center;
+    font-size: 12px;
+    color: #727272;
+  }
 }
+
 /deep/.project-dia {
-    .el-dialog__body {
-        padding: 28px 32px;
-    }
+  .el-dialog__body {
+    padding: 28px 32px;
+  }
 }
+
 .projects {
-    display: flex;
-    flex-wrap: wrap;
-    max-height: 400px;
-    overflow: auto;
-    li {
-        display: inline-flex;
-        align-items: center;
-        width: 238px;
-        padding: 16px;
-        margin: 0 20px 20px 0;
-        background-color: #f6f8fa;
-        border-radius: 16px;
-        cursor: pointer;
-        &:hover {
-            span {
-                color: #007eff;
-            }
-        }
-        &:nth-child(3n) {
-            margin-right: 0;
-        }
-        &.active {
-            background-color: #f2f7ff;
-            span {
-                color: #3988ff;
-            }
-        }
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 400px;
+  overflow: auto;
+
+  li {
+    display: inline-flex;
+    align-items: center;
+    width: 238px;
+    padding: 16px;
+    margin: 0 20px 20px 0;
+    background-color: #f6f8fa;
+    border-radius: 16px;
+    cursor: pointer;
+
+    &:hover {
+      span {
+        color: #007eff;
+      }
     }
-    span {
-        max-width: 140px;
-        margin-left: 14px;
-        font-size: 14px;
-        color: #333;
+
+    &:nth-child(3n) {
+      margin-right: 0;
     }
+
+    &.active {
+      background-color: #f2f7ff;
+
+      span {
+        color: #3988ff;
+      }
+    }
+  }
+
+  span {
+    max-width: 140px;
+    margin-left: 14px;
+    font-size: 14px;
+    color: #333;
+  }
 }
 </style>
\ No newline at end of file