From 3d32d5436eef15011c1adf90a4c7edd3ff02a717 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 25 Jul 2024 15:19:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=AB=99=E4=B8=BB=E9=A2=98=E8=89=B2?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=8F=96$main-color=E5=B9=B6=E4=B8=94?=
 =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/breadcrumb/index.vue           |   2 +-
 src/layouts/navbar/index.vue                  |  51 +-
 src/pages/achievement/edit/index.vue          | 256 ++----
 src/pages/achievement/info/project.vue        |   2 +-
 src/pages/activity/details/index.vue          | 846 +++++++++---------
 src/pages/activity/manage/preview/index.vue   | 804 +++++++++--------
 src/pages/assessment/add/index.vue            |   4 +-
 src/pages/course/preview/index.vue            | 815 +++++++++--------
 src/pages/information/contentManage/index.vue |  39 +-
 src/pages/information/list/index.vue          |  48 +-
 src/pages/match/add/index.vue                 |   4 +-
 src/pages/match/add/step3.vue                 |   2 +-
 src/pages/match/manage/matchInfo.vue          |   2 +-
 src/pages/match/preview/index.vue             | 756 ++++++++--------
 src/pages/product/list/index.vue              |  10 +-
 src/pages/product/show/index.vue              |  12 +-
 src/pages/station/list/index.vue              |   4 +-
 src/pages/station/preview/index.vue           |   4 +-
 src/pages/system/list/staffSide.vue           | 159 ++--
 src/styles/default/index.scss                 |   2 +-
 src/styles/var.scss                           |   2 +-
 21 files changed, 1892 insertions(+), 1932 deletions(-)

diff --git a/src/components/breadcrumb/index.vue b/src/components/breadcrumb/index.vue
index 5f37bd3..4216290 100644
--- a/src/components/breadcrumb/index.vue
+++ b/src/components/breadcrumb/index.vue
@@ -49,7 +49,7 @@ export default {
     .is-link,
     .el-breadcrumb__separator {
       font-weight: 400;
-      color: #9278ff;
+      color: $main-color;
     }
 
     &:last-child {
diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index af116e5..de645af 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -1,40 +1,27 @@
 <template>
   <div>
-    <el-menu v-if="menuRefresh"
-             class="sidebar-el-menu"
-             :default-active="active"
-             background-color="#324157"
-             text-color="#bfcbd9"
-             active-text-color="#9278FF"
-             unique-opened
-             mode="horizontal"
-             @select="menuSelect">
+    <el-menu v-if="menuRefresh" class="sidebar" :default-active="active" background-color="#3b3c40" text-color="#bfcbd9"
+      active-text-color="#fff" unique-opened mode="horizontal" @select="menuSelect">
       <template v-for="item in menus">
         <template v-if="item.subs">
-          <el-submenu :index="item.index"
-                      :key="item.index">
+          <el-submenu :index="item.index" :key="item.index">
             <template slot="title">
               <i :class="item.icon"></i>
               <span slot="title">{{ item.title }}</span>
             </template>
             <template v-for="subItem in item.subs">
-              <el-submenu v-if="subItem.subs"
-                          :index="subItem.index"
-                          :key="subItem.index">
+              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                 <template slot="title">{{ subItem.title }}</template>
-                <el-menu-item v-for="(threeItem,i) in subItem.subs"
-                              :key="i"
-                              :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
+                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{
+                  threeItem.title
+                }}</el-menu-item>
               </el-submenu>
-              <el-menu-item v-else
-                            :index="subItem.index"
-                            :key="subItem.index">{{ subItem.title }}</el-menu-item>
+              <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
             </template>
           </el-submenu>
         </template>
         <template v-else>
-          <el-menu-item :index="item.index"
-                        :key="item.index">
+          <el-menu-item :index="item.index" :key="item.index">
             <i :class="item.icon"></i>
             <span slot="title">{{ item.title }}</span>
           </el-menu-item>
@@ -204,19 +191,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.sidebar::-webkit-scrollbar {
-    width: 0;
-}
-
-.sidebar-el-menu:not(.el-menu--collapse) {
-    width: 100%;
-}
+/deep/.sidebar {
+  border-bottom-color: $main-color !important;
 
-.el-menu.el-menu--horizontal {
-    border-bottom: none;
-}
-
-.sidebar > ul {
-    height: 100%;
+  .el-menu-item {
+    &.is-active {
+      background-color: $main-color !important;
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/achievement/edit/index.vue b/src/pages/achievement/edit/index.vue
index 8a9f735..7f3bfac 100644
--- a/src/pages/achievement/edit/index.vue
+++ b/src/pages/achievement/edit/index.vue
@@ -2,30 +2,21 @@
   <div>
     <el-row :gutter="20">
       <el-col :span="24">
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="flex-between">
-            <div class="per_title"
-                 @click="goback()">
+            <div class="per_title" @click="goback()">
               <i class="el-icon-arrow-left"></i>
               <span class="per_back">返回</span>
               <span class="per_school">修改分数</span>
             </div>
             <div>
-              <el-button type="success"
-                         round
-                         class="mag"
-                         @click="saveAdd('form')">预览</el-button>
-              <el-button type="primary"
-                         round
-                         class="mag"
-                         @click="saveAdd('form')">发布成绩</el-button>
+              <el-button type="success" round class="mag" @click="saveAdd('form')">预览</el-button>
+              <el-button type="primary" round class="mag" @click="saveAdd('form')">发布成绩</el-button>
             </div>
           </div>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <h6 style="text-align: center;font-size: 20px">实验成绩报告</h6>
           <div class="flex-center mgb20 user_header">
             <p class="addhr_tag"></p>
@@ -33,245 +24,154 @@
           </div>
 
           <div>
-            <el-table :data="infoData"
-                      class="table"
-                      stripe
-                      header-align="center">
-              <el-table-column prop="projectName"
-                               label="实验名称"
-                               align="center">
+            <el-table :data="infoData" class="table" stripe header-align="center">
+              <el-table-column prop="projectName" label="实验名称" align="center">
               </el-table-column>
-              <el-table-column prop="period"
-                               label="实验学时"
-                               align="center">
+              <el-table-column prop="period" label="实验学时" align="center">
               </el-table-column>
-              <el-table-column prop="userName"
-                               label="学生姓名"
-                               align="center">
+              <el-table-column prop="userName" label="学生姓名" align="center">
               </el-table-column>
-              <el-table-column prop="number"
-                               label="学生学号"
-                               align="center">
+              <el-table-column prop="number" label="学生学号" align="center">
               </el-table-column>
-              <el-table-column prop="class"
-                               label="学生班级"
-                               align="center">
+              <el-table-column prop="class" label="学生班级" align="center">
               </el-table-column>
-              <el-table-column prop="content"
-                               label="实验内容"
-                               align="center">
+              <el-table-column prop="content" label="实验内容" align="center">
               </el-table-column>
-              <el-table-column prop="desc"
-                               label="实验数据与结果分析"
-                               align="center">
+              <el-table-column prop="desc" label="实验数据与结果分析" align="center">
               </el-table-column>
-              <el-table-column prop="result"
-                               label="实验结论"
-                               align="center">
+              <el-table-column prop="result" label="实验结论" align="center">
               </el-table-column>
-              <el-table-column prop="experience"
-                               label="实验与心得体会"
-                               align="center">
+              <el-table-column prop="experience" label="实验与心得体会" align="center">
               </el-table-column>
-              <el-table-column prop="total"
-                               label="总分"
-                               align="center">
+              <el-table-column prop="total" label="总分" align="center">
               </el-table-column>
             </el-table>
           </div>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="meta-title-wrap">
             <p class="meta-title">一、实验项目名称</p>
           </div>
-          <el-input v-model="form.projectName"
-                    type="textarea"
-                    :disabled="true"
-                    rows="5"></el-input>
+          <el-input v-model="form.projectName" type="textarea" :disabled="true" rows="5"></el-input>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="meta-title-wrap">
             <p class="meta-title">二、实验目的</p>
             <span>得分：50/60</span>
           </div>
-          <el-input v-model="form.experimentGoal"
-                    type="textarea"
-                    :disabled="true"
-                    rows="5"></el-input>
+          <el-input v-model="form.experimentGoal" type="textarea" :disabled="true" rows="5"></el-input>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="meta-title-wrap">
             <p class="meta-title">三、实验原理</p>
             <span>得分：50/60</span>
           </div>
-          <el-input v-model="form.principle"
-                    type="textarea"
-                    :disabled="true"
-                    rows="5"></el-input>
+          <el-input v-model="form.principle" type="textarea" :disabled="true" rows="5"></el-input>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="meta-title-wrap">
             <p class="meta-title">四、实验内容</p>
             <span>得分：50/60</span>
           </div>
-          <el-input v-model="form.content"
-                    type="textarea"
-                    :disabled="true"
-                    rows="5"></el-input>
+          <el-input v-model="form.content" type="textarea" :disabled="true" rows="5"></el-input>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="meta-title-wrap">
             <p class="meta-title">五、实验步骤</p>
             <span>得分：50/60</span>
           </div>
-          <el-input v-model="form.step"
-                    type="textarea"
-                    :disabled="true"
-                    rows="5"></el-input>
+          <el-input v-model="form.step" type="textarea" :disabled="true" rows="5"></el-input>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="meta-title-wrap">
             <p class="meta-title">六、实验数据</p>
             <span>得分：50/60</span>
           </div>
-          <el-table :data="expData"
-                    class="table"
-                    stripe
-                    header-align="center">
-            <el-table-column type="index"
-                             width="100"
-                             label="序号"
-                             align="center">
+          <el-table :data="expData" class="table" stripe header-align="center">
+            <el-table-column type="index" width="100" label="序号" align="center">
               <template slot-scope="scope">
                 {{ scope.$index + 1 }}
               </template>
             </el-table-column>
-            <el-table-column prop="module"
-                             label="模块"
-                             align="center">
+            <el-table-column prop="module" label="模块" align="center">
             </el-table-column>
-            <el-table-column prop="judgmentPointsName"
-                             label="考核点"
-                             align="center">
+            <el-table-column prop="judgmentPointsName" label="考核点" align="center">
             </el-table-column>
-            <el-table-column prop="userAnswer"
-                             label="学生答案"
-                             align="center">
+            <el-table-column prop="userAnswer" label="学生答案" align="center">
             </el-table-column>
-            <el-table-column prop="answer"
-                             label="参考答案"
-                             align="center">
+            <el-table-column prop="answer" label="参考答案" align="center">
             </el-table-column>
-            <el-table-column prop="codeScore"
-                             label="得分"
-                             align="center">
+            <el-table-column prop="codeScore" label="得分" align="center">
             </el-table-column>
           </el-table>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="meta-title-wrap">
             <p class="meta-title">七、实验结论</p>
             <span>得分：50/60</span>
           </div>
-          <el-input type="textarea"
-                    v-model="form.conclusion"
-                    rows="5"></el-input>
-          <div class="flex-between"
-               style="margin-top: 10px">
+          <el-input type="textarea" v-model="form.conclusion" rows="5"></el-input>
+          <div class="flex-between" style="margin-top: 10px">
             <span>教师评分</span>
             <div>
-              <el-input style="display: inline-block;width: auto;"
-                        placeholder="请输入"></el-input>
+              <el-input style="display: inline-block;width: auto;" placeholder="请输入"></el-input>
               (10分)
             </div>
           </div>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="meta-title-wrap">
             <p class="meta-title">八、总结及心得体会</p>
             <span>得分：50/60</span>
           </div>
-          <el-input type="textarea"
-                    v-model="form.summarize"
-                    rows="5"></el-input>
-          <div class="flex-between"
-               style="margin-top: 10px">
+          <el-input type="textarea" v-model="form.summarize" rows="5"></el-input>
+          <div class="flex-between" style="margin-top: 10px">
             <span>教师评分</span>
             <div>
-              <el-input style="display: inline-block;width: auto;"
-                        placeholder="请输入"></el-input>
+              <el-input style="display: inline-block;width: auto;" placeholder="请输入"></el-input>
               (10分)
             </div>
           </div>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="meta-title-wrap">
             <p class="meta-title">九、对本实验过程及方法、手段的改进建议</p>
             <span>得分：50/60</span>
           </div>
-          <el-input type="textarea"
-                    rows="5"
-                    v-model="form.improvement"></el-input>
+          <el-input type="textarea" rows="5" v-model="form.improvement"></el-input>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <div class="flex-between mgb20">
             <span>老师寄语</span>
           </div>
-          <el-input type="textarea"
-                    rows="5"></el-input>
+          <el-input type="textarea" rows="5"></el-input>
         </el-card>
 
-        <el-card shadow="hover"
-                 class="mgb20">
+        <el-card shadow="hover" class="mgb20">
           <p class="mgb20">教师签名</p>
           <div class="mgb20">
-            <el-radio v-model="autograph"
-                      label="1">不使用</el-radio>
-            <el-radio v-model="autograph"
-                      label="2">已有签名</el-radio>
-            <el-radio v-model="autograph"
-                      label="3">重新上传</el-radio>
+            <el-radio v-model="autograph" label="1">不使用</el-radio>
+            <el-radio v-model="autograph" label="2">已有签名</el-radio>
+            <el-radio v-model="autograph" label="3">重新上传</el-radio>
           </div>
           <el-row v-if="autograph != 1">
             <el-col :span="6">
-              <el-select class="sign-select"
-                         v-model="signId"
-                         placeholder="请选择签名"
-                         size="mini"
-                         v-show="autograph == 2">
-                <el-option v-for="item in signList"
-                           :key="item.id"
-                           :label="item.signatureName"
-                           :value="item.id">
+              <el-select class="sign-select" v-model="signId" placeholder="请选择签名" size="mini" v-show="autograph == 2">
+                <el-option v-for="item in signList" :key="item.id" :label="item.signatureName" :value="item.id">
                 </el-option>
               </el-select>
-              <el-upload :data="{userId: userId}"
-                         :limit="1"
-                         :action="api.uploadSignature"
-                         list-type="picture-card"
-                         :on-remove="handleRemove"
-                         :on-exceed="handleExceed"
-                         :on-success="uploadSuccess">
+              <el-upload :data="{ userId: userId }" :limit="1" :action="api.uploadSignature" list-type="picture-card"
+                :on-remove="handleRemove" :on-exceed="handleExceed" :on-success="uploadSuccess">
                 <i class="el-icon-plus"></i>
               </el-upload>
             </el-col>
@@ -415,59 +315,59 @@ export default {
 
 <style lang="scss" scoped>
 .meta-title {
-    margin-bottom: 10px;
-    font-size: 20px;
+  margin-bottom: 10px;
+  font-size: 20px;
 }
 
 .step-title {
-    margin-bottom: 10px;
-    font-size: 16px;
-    color: #9278ff;
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: $main-color;
 }
 
 .border_lf {
-    border-left: 1px dashed #eee;
-    padding: 0 60px;
+  border-left: 1px dashed #eee;
+  padding: 0 60px;
 }
 
 .border_lf label {
-    width: 120px;
+  width: 120px;
 }
 
 .pad_none {
-    padding: 0 0 0 60px;
+  padding: 0 0 0 60px;
 }
 
 .edit-msg {
-    font-size: 16px;
-    cursor: pointer;
+  font-size: 16px;
+  cursor: pointer;
 }
 
 .sign-select {
-    /deep/ .el-input {
-        width: 150px;
-        margin-bottom: 10px;
-    }
+  /deep/ .el-input {
+    width: 150px;
+    margin-bottom: 10px;
+  }
 }
 
 .meta-title-wrap {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .meta-title {
-    margin-bottom: 10px;
-    font-size: 14px;
+  margin-bottom: 10px;
+  font-size: 14px;
 }
 
 .step-title {
-    margin-bottom: 10px;
-    font-size: 16px;
-    color: #9278ff;
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: $main-color;
 }
 
 .bd-title {
-    padding-top: 20px;
-    border-top: 1px dashed #ccc;
+  padding-top: 20px;
+  border-top: 1px dashed #ccc;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/achievement/info/project.vue b/src/pages/achievement/info/project.vue
index b4e9a9d..04d3f33 100644
--- a/src/pages/achievement/info/project.vue
+++ b/src/pages/achievement/info/project.vue
@@ -602,7 +602,7 @@ export default {
 
   .back {
     margin-right: 20px;
-    color: #9278ff;
+    color: $main-color;
     cursor: pointer;
   }
 }
diff --git a/src/pages/activity/details/index.vue b/src/pages/activity/details/index.vue
index 6e3a80f..deef89f 100644
--- a/src/pages/activity/details/index.vue
+++ b/src/pages/activity/details/index.vue
@@ -1,115 +1,85 @@
 <template>
   <div class="wrap index">
     <div class="banner"
-         :style="{backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20230515/jpg/1658017103770836992.jpg') + ')'}">创业活动详情</div>
+      :style="{ backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20230515/jpg/1658017103770836992.jpg') + ')' }">
+      创业活动详情</div>
     <div class="center-con">
       <div class="center-wrap">
-        <breadcrumb ref="breadcrumb"
-                    :data="'全部项目/' + form.projectName"
-                    :query="{
-											whetherToSignUp: $route.query.whetherToSignUp,
-											filterSort: $route.query.filterSort,
-											keyword: $route.query.keyword,
-											page: $route.query.page,
-										}"></breadcrumb>
+        <breadcrumb ref="breadcrumb" :data="'全部项目/' + form.projectName" :query="{
+          whetherToSignUp: $route.query.whetherToSignUp,
+          filterSort: $route.query.filterSort,
+          keyword: $route.query.keyword,
+          page: $route.query.page,
+        }"></breadcrumb>
         <div class="content">
           <div class="tool flex-between">
-            <el-tabs v-model="curType"
-                     @tab-click="typeChange">
-              <el-tab-pane v-for="(item, index) in typeList"
-                           :key="index"
-                           :label="item.name"
-                           :name="item.id"></el-tab-pane>
+            <el-tabs v-model="curType" @tab-click="typeChange">
+              <el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name"
+                :name="item.id"></el-tab-pane>
             </el-tabs>
             <div class="action">
-              <p class="end-text"
-                 v-if="end">
+              <p class="end-text" v-if="end">
                 距离{{ endList[status] }}还有
                 <em>{{ end }}</em>
               </p>
               <a class="status"
-                 :class="{wait: status == 0,signing: status == 2,signed: status == 1,finish: status == 3 || status == 4}"
-                 :title="statusList[status]"
-                 @click.stop="signup">{{ statusList[status] }}</a>
+                :class="{ wait: status == 0, signing: status == 2, signed: status == 1, finish: status == 3 || status == 4 }"
+                :title="statusList[status]" @click.stop="signup">{{ statusList[status] }}</a>
             </div>
           </div>
-          <div class="info"
-               id="part1">
+          <div class="info" id="part1">
             <h6 class="title">{{ form.projectName }}</h6>
             <div class="meta">最近编辑时间：{{ form.updateTime }}</div>
           </div>
 
           <div v-show="curType < 4">
-            <div class="l-title"><img src="@/assets/img/label.png"
-                   alt=""> 项目信息</div>
-            <div v-if="form.projectDescribe"
-                 class="texts ql-editor"
-                 v-html="form.projectDescribe"></div>
+            <div class="l-title"><img src="@/assets/img/label.png" alt=""> 项目信息</div>
+            <div v-if="form.projectDescribe" class="texts ql-editor" v-html="form.projectDescribe"></div>
             <template v-if="form.activityFileList">
               <h6 class="p-title">附件下载</h6>
               <ul class="files">
-                <li v-for="(item, i) in form.activityFileList"
-                    :key="i">
-                  <el-link v-if="item.canPreview"
-                           class="m-r-10"
-                           type="primary"
-                           @click="preview(item)">{{ item.fileName }}</el-link>
-                  <span v-else
-                        class="fileName">{{ item.fileName }}</span>
-                  <el-link type="primary"
-                           :underline="false"
-                           @click="download(item)">下载</el-link>
+                <li v-for="(item, i) in form.activityFileList" :key="i">
+                  <el-link v-if="item.canPreview" class="m-r-10" type="primary" @click="preview(item)">{{ item.fileName
+                    }}</el-link>
+                  <span v-else class="fileName">{{ item.fileName }}</span>
+                  <el-link type="primary" :underline="false" @click="download(item)">下载</el-link>
                 </li>
               </ul>
             </template>
 
             <!-- 进展 -->
-            <div class="l-title"
-                 id="part2"><img src="@/assets/img/label.png"
-                   alt=""> 项目进展</div>
-            <ul class="progress"
-                v-if="progress.length">
-              <li v-for="(item,index) in progress"
-                  :key="index"
-                  :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')">
+            <div class="l-title" id="part2"><img src="@/assets/img/label.png" alt=""> 项目进展</div>
+            <ul class="progress" v-if="progress.length">
+              <li v-for="(item, index) in progress" :key="index"
+                :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')">
                 <i class="dot"></i>
-                <p class="name">{{item.title}}</p>
-                <p class="desc">{{item.description}}</p>
+                <p class="name">{{ item.title }}</p>
+                <p class="desc">{{ item.description }}</p>
               </li>
-              <img class="rocket"
-                   src="@/assets/img/rocket.png"
-                   alt="">
+              <img class="rocket" src="@/assets/img/rocket.png" alt="">
             </ul>
             <template v-else>
               <div class="empty">
                 <div>
-                  <img src="@/assets/img/none.png"
-                       alt="">
+                  <img src="@/assets/img/none.png" alt="">
                   <p>暂无数据</p>
                 </div>
               </div>
             </template>
 
             <!-- 公告 -->
-            <div class="l-title"
-                 id="part3"><img src="@/assets/img/label.png"
-                   alt=""> 通知公告</div>
-            <ul class="notice-list"
-                v-if="notices.length">
-              <li v-for="(item, i) in notices"
-                  :key="i"
-                  @click="toNotice(item)">
+            <div class="l-title" id="part3"><img src="@/assets/img/label.png" alt=""> 通知公告</div>
+            <ul class="notice-list" v-if="notices.length">
+              <li v-for="(item, i) in notices" :key="i" @click="toNotice(item)">
                 <h6>{{ item.announcementTitle }}</h6>
                 <p class="meta">{{ item.updateTime }}</p>
-                <div class="des"
-                     v-html="item.announcementText"></div>
+                <div class="des" v-html="item.announcementText"></div>
               </li>
             </ul>
             <template v-else>
               <div class="empty">
                 <div>
-                  <img src="@/assets/img/none.png"
-                       alt="">
+                  <img src="@/assets/img/none.png" alt="">
                   <p>暂无通知公告</p>
                 </div>
               </div>
@@ -119,24 +89,15 @@
       </div>
     </div>
 
-    <el-dialog title="报名"
-               :visible.sync="signupVisible"
-               :close-on-click-modal="false"
-               width="300px">
+    <el-dialog title="报名" :visible.sync="signupVisible" :close-on-click-modal="false" width="300px">
       <el-form class="dia-form">
         <el-form-item>
-          <el-input placeholder="请输入4位数大赛邀请码"
-                    maxlength="4"
-                    v-model="invitationCode"></el-input>
+          <el-input placeholder="请输入4位数大赛邀请码" maxlength="4" v-model="invitationCode"></el-input>
         </el-form-item>
       </el-form>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button size="small"
-                   type="primary"
-                   @click="signupSubmit">报名</el-button>
-        <el-button size="small"
-                   @click="signupVisible = false">取消</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="signupSubmit">报名</el-button>
+        <el-button size="small" @click="signupVisible = false">取消</el-button>
       </span>
     </el-dialog>
   </div>
@@ -399,385 +360,454 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-    margin: -24px;
+  margin: -24px;
 }
+
 .banner {
-    width: 100%;
-    height: 350px;
-    padding: 120px 0 0 24%;
-    font-size: 34px;
-    font-weight: 600;
-    color: #fff;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
+  width: 100%;
+  height: 350px;
+  padding: 120px 0 0 24%;
+  font-size: 34px;
+  font-weight: 600;
+  color: #fff;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
+
 .l-title {
-    font-size: 18px;
+  font-size: 18px;
 }
+
 .main .center-con {
-    background: url(../../../assets/img/match-bg1.png) (0px 95px) / auto auto no-repeat,
-        url(../../../assets/img/match-bg2.png) (98% 300px) / auto auto no-repeat;
+  background: url(../../../assets/img/match-bg1.png) (0px 95px) / auto auto no-repeat,
+    url(../../../assets/img/match-bg2.png) (98% 300px) / auto auto no-repeat;
 }
+
 .main .center-wrap {
-    width: 1000px;
-    margin: 30px auto 0;
+  width: 1000px;
+  margin: 30px auto 0;
 }
+
 .rule-title {
-    margin-bottom: 10px;
-    font-size: 16px;
+  margin-bottom: 10px;
+  font-size: 16px;
 }
+
 .rule {
-    padding: 15px;
-    margin-bottom: 15px;
-    border: 1px solid #dfdfdf;
-    p {
-        font-size: 14px;
-        line-height: 30px;
-        color: #6e6e6e;
-    }
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 1px solid #dfdfdf;
+
+  p {
+    font-size: 14px;
+    line-height: 30px;
+    color: #6e6e6e;
+  }
 }
+
 /deep/.el-tabs__item {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
+
 .content {
-    position: relative;
-    padding: 20px 40px;
-    margin-top: 30px;
+  position: relative;
+  padding: 20px 40px;
+  margin-top: 30px;
+  background-color: #fff;
+
+  .title {
+    width: 67%;
+    margin: 0 auto;
+    font-size: 28px;
+    text-align: center;
+    color: #0b1d30;
+  }
+
+  .tool {
+    z-index: 100;
+    position: sticky;
+    top: 0;
+    margin-bottom: 20px;
     background-color: #fff;
-    .title {
-        width: 67%;
-        margin: 0 auto;
-        font-size: 28px;
-        text-align: center;
-        color: #0b1d30;
+  }
+
+  .info .meta {
+    padding: 16px 0;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+  }
+
+  .action {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .status {
+    max-width: 120px;
+    padding: 0 16px;
+    margin-left: 20px;
+    line-height: 34px;
+    font-size: 14px;
+    color: #fff;
+    background-color: #52c41a;
+    border-radius: 4px;
+    cursor: pointer;
+    @include ellipsis();
+
+    &.wait {
+      background-color: #faad14;
     }
-    .tool {
-        z-index: 100;
-        position: sticky;
-        top: 0;
-        margin-bottom: 20px;
-        background-color: #fff;
+
+    &.signing {
+      background-color: $main-color;
     }
-    .info .meta {
-        padding: 16px 0;
-        font-size: 12px;
-        color: #999;
-        text-align: center;
+
+    &.signed {
+      background-color: #52c41a;
     }
-    .action {
-        display: inline-flex;
-        align-items: center;
+
+    &.playing {
+      background-color: #f96d6d;
     }
-    .status {
-        max-width: 120px;
-        padding: 0 16px;
-        margin-left: 20px;
-        line-height: 34px;
-        font-size: 14px;
+
+    &.finish {
+      background-color: #ccc;
+    }
+  }
+
+  .end-text {
+    font-size: 12px;
+    color: #666;
+
+    em {
+      font-style: normal;
+      color: #f00;
+    }
+  }
+
+  .texts {
+    margin: 20px 0 50px;
+    font-size: 14px;
+    line-height: 1.6;
+    text-indent: 2em;
+    overflow: hidden;
+
+    /deep/img {
+      max-width: 100%;
+    }
+  }
+
+  .progress {
+    position: relative;
+    width: 95%;
+    padding: 50px 0;
+    margin: 40px auto 80px;
+    text-align: left;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      width: 2px;
+      height: 100%;
+      background-color: #e1e6f2;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: -10px;
+      left: 430px;
+      border: 8px solid transparent;
+      border-bottom-color: #e1e6f2;
+    }
+
+    .rocket {
+      position: absolute;
+      bottom: -50px;
+      left: 425px;
+    }
+
+    li {
+      position: relative;
+      width: 400px;
+      margin-bottom: 42px;
+
+      .dot {
+        position: absolute;
+        top: 12px;
+        left: 431px;
+        width: 15px;
+        height: 15px;
+        background-color: #dcdcdc;
+        border-radius: 50%;
+      }
+
+      .name {
+        display: inline-block;
+        padding: 0 19px;
+        margin-bottom: 16px;
+        line-height: 40px;
+        text-align: center;
+        font-size: 16px;
         color: #fff;
-        background-color: #52c41a;
-        border-radius: 4px;
-        cursor: pointer;
-        @include ellipsis();
-        &.wait {
-            background-color: #faad14;
+        border-radius: 20px;
+        background-color: #c4c4c4;
+      }
+
+      .desc {
+        position: relative;
+        color: #333;
+        font-size: 14px;
+      }
+
+      &.ing,
+      &.done {
+        .dot {
+          top: 8px;
+          background-color: $main-color;
         }
-        &.signing {
-            background-color: $main-color;
+
+        .name {
+          background-color: $main-color;
         }
-        &.signed {
-            background-color: #52c41a;
+      }
+
+      &.ing {
+        .dot {
+          width: 27px;
+          height: 27px;
+          border: 6px solid #e2f1fb;
         }
-        &.playing {
-            background-color: #f96d6d;
+      }
+
+      &:nth-child(odd) {
+        text-align: right;
+
+        &.ing {
+          .dot {
+            left: auto;
+            right: -51px;
+          }
         }
-        &.finish {
-            background-color: #ccc;
+
+        .name {
+          &:before {
+            content: '';
+            z-index: 2;
+            position: absolute;
+            top: 14px;
+            right: -35px;
+            border: 18px solid transparent;
+            border-top-width: 6px;
+            border-bottom-width: 6px;
+            border-left-color: #c4c4c4;
+          }
         }
-    }
-    .end-text {
-        font-size: 12px;
-        color: #666;
-        em {
-            font-style: normal;
-            color: #f00;
+
+        .desc {
+          text-align: right;
         }
-    }
-    .texts {
-        margin: 20px 0 50px;
-        font-size: 14px;
-        line-height: 1.6;
-        text-indent: 2em;
-        overflow: hidden;
-        /deep/img {
-            max-width: 100%;
+
+        &.ing,
+        &.done {
+          .name {
+            &:before {
+              border-left-color: $main-color;
+            }
+          }
         }
-    }
-    .progress {
-        position: relative;
-        width: 95%;
-        padding: 50px 0;
-        margin: 40px auto 80px;
-        text-align: left;
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            width: 2px;
-            height: 100%;
-            background-color: #e1e6f2;
+      }
+
+      &:nth-child(even) {
+        margin-left: 482px;
+
+        .dot {
+          left: -51px;
+        }
+
+        &.ing {
+          .dot {
+            left: -57px;
+          }
         }
-        &:after {
+
+        .name {
+          text-align: left;
+
+          &:after {
             content: '';
+            z-index: 2;
             position: absolute;
-            top: -10px;
-            left: 430px;
-            border: 8px solid transparent;
-            border-bottom-color: #e1e6f2;
+            top: 14px;
+            left: -35px;
+            border: 18px solid transparent;
+            border-top-width: 6px;
+            border-bottom-width: 6px;
+            border-right-color: #c4c4c4;
+          }
         }
-        .rocket {
-            position: absolute;
-            bottom: -50px;
-            left: 425px;
+
+        .desc {
+          &:before {
+            left: auto;
+            right: -16px;
+            border: 8px solid transparent;
+            border-left-color: #fff;
+          }
+
+          &:after {
+            left: auto;
+            right: -18px;
+            border: 9px solid transparent;
+            border-left-color: #e6e6e6;
+          }
         }
-        li {
-            position: relative;
-            width: 400px;
-            margin-bottom: 42px;
-            .dot {
-                position: absolute;
-                top: 12px;
-                left: 431px;
-                width: 15px;
-                height: 15px;
-                background-color: #dcdcdc;
-                border-radius: 50%;
-            }
-            .name {
-                display: inline-block;
-                padding: 0 19px;
-                margin-bottom: 16px;
-                line-height: 40px;
-                text-align: center;
-                font-size: 16px;
-                color: #fff;
-                border-radius: 20px;
-                background-color: #c4c4c4;
-            }
-            .desc {
-                position: relative;
-                color: #333;
-                font-size: 14px;
-            }
-            &.ing,
-            &.done {
-                .dot {
-                    top: 8px;
-                    background-color: #007eff;
-                }
-                .name {
-                    background-color: #007eff;
-                }
-            }
-            &.ing {
-                .dot {
-                    width: 27px;
-                    height: 27px;
-                    border: 6px solid #e2f1fb;
-                }
-            }
-            &:nth-child(odd) {
-                text-align: right;
-                &.ing {
-                    .dot {
-                        left: auto;
-                        right: -51px;
-                    }
-                }
-                .name {
-                    &:before {
-                        content: '';
-                        z-index: 2;
-                        position: absolute;
-                        top: 14px;
-                        right: -35px;
-                        border: 18px solid transparent;
-                        border-top-width: 6px;
-                        border-bottom-width: 6px;
-                        border-left-color: #c4c4c4;
-                    }
-                }
-                .desc {
-                    text-align: right;
-                }
-                &.ing,
-                &.done {
-                    .name {
-                        &:before {
-                            border-left-color: #007eff;
-                        }
-                    }
-                }
-            }
-            &:nth-child(even) {
-                margin-left: 482px;
-                .dot {
-                    left: -51px;
-                }
-                &.ing {
-                    .dot {
-                        left: -57px;
-                    }
-                }
-                .name {
-                    text-align: left;
-                    &:after {
-                        content: '';
-                        z-index: 2;
-                        position: absolute;
-                        top: 14px;
-                        left: -35px;
-                        border: 18px solid transparent;
-                        border-top-width: 6px;
-                        border-bottom-width: 6px;
-                        border-right-color: #c4c4c4;
-                    }
-                }
-                .desc {
-                    &:before {
-                        left: auto;
-                        right: -16px;
-                        border: 8px solid transparent;
-                        border-left-color: #fff;
-                    }
-                    &:after {
-                        left: auto;
-                        right: -18px;
-                        border: 9px solid transparent;
-                        border-left-color: #e6e6e6;
-                    }
-                }
-
-                &.ing,
-                &.done {
-                    .name {
-                        &:after {
-                            border-right-color: #007eff;
-                        }
-                    }
-                }
-            }
-            &:last-child {
-                margin-bottom: 0;
+
+        &.ing,
+        &.done {
+          .name {
+            &:after {
+              border-right-color: $main-color;
             }
+          }
         }
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
+  }
 }
+
 .files {
-    margin-bottom: 30px;
-    li {
-        display: flex;
-        align-items: center;
-        margin: 10px 0;
-    }
-    .fileName {
-        margin-right: 10px;
-        font-size: 12px;
-    }
+  margin-bottom: 30px;
+
+  li {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+  }
+
+  .fileName {
+    margin-right: 10px;
+    font-size: 12px;
+  }
 }
+
 .notice-list {
-    text-align: left;
-    li {
-        padding: 16px;
-        margin-bottom: 12px;
-        transition: all 0.3s;
-        cursor: pointer;
-        border-radius: 6px;
-        background-color: #fff;
-        border-bottom: 1px dashed #ebebeb;
-        &:last-child {
-            border-bottom: 0;
-        }
-    }
-    h6 {
-        font-size: 20px;
-        font-weight: 500;
-        color: #0b1d30;
-        &:hover {
-            color: #007eff;
-        }
-    }
-    .meta {
-        margin: 10px 0;
-        font-size: 14px;
-        color: #666;
+  text-align: left;
+
+  li {
+    padding: 16px;
+    margin-bottom: 12px;
+    transition: all 0.3s;
+    cursor: pointer;
+    border-radius: 6px;
+    background-color: #fff;
+    border-bottom: 1px dashed #ebebeb;
+
+    &:last-child {
+      border-bottom: 0;
     }
-    .des {
-        font-size: 14px;
-        color: #333;
-        line-height: 24px;
-        display: -webkit-box;
-        display: -moz-box;
-        -webkit-box-orient: vertical;
-        -moz-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        -moz-line-clamp: 2;
-        overflow: hidden;
-        text-overflow: ellipsis;
+  }
+
+  h6 {
+    font-size: 20px;
+    font-weight: 500;
+    color: #0b1d30;
+
+    &:hover {
+      color: $main-color;
     }
+  }
+
+  .meta {
+    margin: 10px 0;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .des {
+    font-size: 14px;
+    color: #333;
+    line-height: 24px;
+    display: -webkit-box;
+    display: -moz-box;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    -moz-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
+
 .table {
-    width: 100%;
-    border-collapse: collapse;
-    th,
-    td {
-        padding: 12px;
-        border: 1px solid #ebeef5;
-    }
-    &.tc {
-        text-align: center;
-    }
-    th {
-        text-align: center;
-        background-color: #f8faff;
-    }
-    .icon {
-        margin-right: 10px;
-        font-size: 16px;
-        color: #7a7a7a;
-        cursor: pointer;
-        &:hover {
-            color: #007eff;
-        }
-    }
-    .plus {
-        margin-bottom: 10px;
-        text-align: right;
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 12px;
+    border: 1px solid #ebeef5;
+  }
+
+  &.tc {
+    text-align: center;
+  }
+
+  th {
+    text-align: center;
+    background-color: #f8faff;
+  }
+
+  .icon {
+    margin-right: 10px;
+    font-size: 16px;
+    color: #7a7a7a;
+    cursor: pointer;
+
+    &:hover {
+      color: $main-color;
     }
-    .line {
-        display: flex;
-        align-items: center;
-        margin-bottom: 10px;
-        .el-input {
-            margin-right: 15px;
-        }
+  }
+
+  .plus {
+    margin-bottom: 10px;
+    text-align: right;
+  }
+
+  .line {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .el-input {
+      margin-right: 15px;
     }
+  }
 }
+
 .flex-center {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
 }
+
 /deep/.dia-form {
-    .w-100 {
-        width: 100%;
-    }
-    .tips {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+  .w-100 {
+    width: 100%;
+  }
+
+  .tips {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/activity/manage/preview/index.vue b/src/pages/activity/manage/preview/index.vue
index 2929a37..ee704ce 100644
--- a/src/pages/activity/manage/preview/index.vue
+++ b/src/pages/activity/manage/preview/index.vue
@@ -1,19 +1,16 @@
 <template>
   <div class="wrap index">
     <div class="banner"
-         :style="{backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220613/png/1536269450851409920.png') + ')'}"></div>
+      :style="{ backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220613/png/1536269450851409920.png') + ')' }">
+    </div>
     <div class="center-con">
       <div class="center-wrap">
-        <breadcrumb ref="breadcrumb"
-                    :data="'全部项目/' + form.projectName"></breadcrumb>
+        <breadcrumb ref="breadcrumb" :data="'全部项目/' + form.projectName"></breadcrumb>
         <div class="content">
           <div class="tool flex-between">
-            <el-tabs v-model="curType"
-                     @tab-click="typeChange">
-              <el-tab-pane v-for="(item, index) in typeList"
-                           :key="index"
-                           :label="item.name"
-                           :name="item.id"></el-tab-pane>
+            <el-tabs v-model="curType" @tab-click="typeChange">
+              <el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name"
+                :name="item.id"></el-tab-pane>
             </el-tabs>
             <div class="status wait">等待报名</div>
           </div>
@@ -23,77 +20,53 @@
           </div>
 
           <div v-show="curType < 4">
-            <div class="l-title"
-                 id="part1"><img src="@/assets/img/label.png"
-                   alt=""> 项目信息</div>
-            <div v-if="form.projectDescribe"
-                 class="texts ql-editor"
-                 v-html="form.projectDescribe"></div>
+            <div class="l-title" id="part1"><img src="@/assets/img/label.png" alt=""> 项目信息</div>
+            <div v-if="form.projectDescribe" class="texts ql-editor" v-html="form.projectDescribe"></div>
             <template v-if="form.activityFileList">
               <h6 class="p-title">附件下载</h6>
               <ul class="files">
-                <li v-for="(item, i) in form.activityFileList"
-                    :key="i">
-                  <el-link v-if="item.canPreview"
-                           class="m-r-10"
-                           type="primary"
-                           @click="preview(item)">{{ item.fileName }}</el-link>
-                  <span v-else
-                        class="fileName">{{ item.fileName }}</span>
-                  <el-link type="primary"
-                           :underline="false"
-                           @click="download(item)">下载</el-link>
+                <li v-for="(item, i) in form.activityFileList" :key="i">
+                  <el-link v-if="item.canPreview" class="m-r-10" type="primary" @click="preview(item)">{{ item.fileName
+                    }}</el-link>
+                  <span v-else class="fileName">{{ item.fileName }}</span>
+                  <el-link type="primary" :underline="false" @click="download(item)">下载</el-link>
                 </li>
               </ul>
             </template>
 
             <!-- 进展 -->
-            <div class="l-title"
-                 id="part2"><img src="@/assets/img/label.png"
-                   alt=""> 项目进展</div>
-            <ul class="progress"
-                v-if="progress.length">
-              <li v-for="(item,index) in progress"
-                  :key="index"
-                  :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')">
+            <div class="l-title" id="part2"><img src="@/assets/img/label.png" alt=""> 项目进展</div>
+            <ul class="progress" v-if="progress.length">
+              <li v-for="(item, index) in progress" :key="index"
+                :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')">
                 <i class="dot"></i>
-                <p class="name">{{item.title}}</p>
-                <p class="desc">{{item.description}}</p>
+                <p class="name">{{ item.title }}</p>
+                <p class="desc">{{ item.description }}</p>
               </li>
-              <img class="rocket"
-                   src="@/assets/img/rocket.png"
-                   alt="">
+              <img class="rocket" src="@/assets/img/rocket.png" alt="">
             </ul>
             <template v-else>
               <div class="empty">
                 <div>
-                  <img src="@/assets/img/none.png"
-                       alt="">
+                  <img src="@/assets/img/none.png" alt="">
                   <p>暂无数据</p>
                 </div>
               </div>
             </template>
 
             <!-- 公告 -->
-            <div class="l-title"
-                 id="part3"><img src="@/assets/img/label.png"
-                   alt=""> 通知公告</div>
-            <ul class="notice-list"
-                v-if="notices.length">
-              <li v-for="(item, i) in notices"
-                  :key="i"
-                  @click="toNotice(item)">
+            <div class="l-title" id="part3"><img src="@/assets/img/label.png" alt=""> 通知公告</div>
+            <ul class="notice-list" v-if="notices.length">
+              <li v-for="(item, i) in notices" :key="i" @click="toNotice(item)">
                 <h6>{{ item.announcementTitle }}</h6>
                 <p class="meta">{{ item.updateTime }}</p>
-                <div class="des"
-                     v-html="item.announcementText"></div>
+                <div class="des" v-html="item.announcementText"></div>
               </li>
             </ul>
             <template v-else>
               <div class="empty">
                 <div>
-                  <img src="@/assets/img/none.png"
-                       alt="">
+                  <img src="@/assets/img/none.png" alt="">
                   <p>暂无通知公告</p>
                 </div>
               </div>
@@ -180,384 +153,453 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-    margin: -24px;
+  margin: -24px;
 }
+
 .banner {
-    width: 100%;
-    height: 350px;
-    padding: 120px 0 0 20%;
-    color: #fff;
-    background-size: 100% 350px;
-    background-repeat: no-repeat;
+  width: 100%;
+  height: 350px;
+  padding: 120px 0 0 20%;
+  color: #fff;
+  background-size: 100% 350px;
+  background-repeat: no-repeat;
 }
+
 .l-title {
-    font-size: 18px;
+  font-size: 18px;
 }
+
 .main .center-con {
-    width: 1000px;
-    margin: 40px auto 0;
-    background: url(../../../../assets/img/match-bg1.png) (0px 95px) / auto auto no-repeat,
-        url(../../../../assets/img/match-bg2.png) (98% 300px) / auto auto no-repeat;
+  width: 1000px;
+  margin: 40px auto 0;
+  background: url(../../../../assets/img/match-bg1.png) (0px 95px) / auto auto no-repeat,
+    url(../../../../assets/img/match-bg2.png) (98% 300px) / auto auto no-repeat;
 }
+
 .main .center-wrap {
-    margin-top: 30px;
+  margin-top: 30px;
 }
+
 .rule-title {
-    margin-bottom: 10px;
-    font-size: 16px;
+  margin-bottom: 10px;
+  font-size: 16px;
 }
+
 .rule {
-    padding: 15px;
-    margin-bottom: 15px;
-    border: 1px solid #dfdfdf;
-    p {
-        font-size: 14px;
-        line-height: 30px;
-        color: #6e6e6e;
-    }
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 1px solid #dfdfdf;
+
+  p {
+    font-size: 14px;
+    line-height: 30px;
+    color: #6e6e6e;
+  }
 }
+
 /deep/.el-tabs__item {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
+
 .content {
-    position: relative;
-    padding: 20px 40px;
-    margin-top: 30px;
+  position: relative;
+  padding: 20px 40px;
+  margin-top: 30px;
+  background-color: #fff;
+
+  .title {
+    width: 67%;
+    margin: 0 auto;
+    font-size: 28px;
+    text-align: center;
+    color: #0b1d30;
+  }
+
+  .tool {
+    z-index: 100;
+    position: sticky;
+    top: 64px;
+    margin-bottom: 20px;
     background-color: #fff;
-    .title {
-        width: 67%;
-        margin: 0 auto;
-        font-size: 28px;
-        text-align: center;
-        color: #0b1d30;
+  }
+
+  .info .meta {
+    padding: 16px 0;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+  }
+
+  .action {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .status {
+    max-width: 120px;
+    padding: 0 16px;
+    margin-left: 20px;
+    line-height: 34px;
+    font-size: 14px;
+    color: #fff;
+    background-color: #52c41a;
+    border-radius: 4px;
+    cursor: pointer;
+    @include ellipsis();
+
+    &.wait {
+      background-color: #faad14;
     }
-    .tool {
-        z-index: 100;
-        position: sticky;
-        top: 64px;
-        margin-bottom: 20px;
-        background-color: #fff;
+
+    &.signing {
+      background-color: $main-color;
     }
-    .info .meta {
-        padding: 16px 0;
-        font-size: 12px;
-        color: #999;
-        text-align: center;
+
+    &.signed {
+      background-color: #52c41a;
     }
-    .action {
-        display: inline-flex;
-        align-items: center;
+
+    &.playing {
+      background-color: #f96d6d;
     }
-    .status {
-        max-width: 120px;
-        padding: 0 16px;
-        margin-left: 20px;
-        line-height: 34px;
-        font-size: 14px;
+
+    &.finish {
+      background-color: #ccc;
+    }
+  }
+
+  .end-text {
+    font-size: 12px;
+    color: #666;
+
+    em {
+      font-style: normal;
+      color: #f00;
+    }
+  }
+
+  .texts {
+    margin: 20px 0 50px;
+    font-size: 14px;
+    line-height: 1.6;
+    text-indent: 2em;
+    overflow: hidden;
+
+    /deep/img {
+      max-width: 100%;
+    }
+  }
+
+  .progress {
+    position: relative;
+    width: 95%;
+    padding: 50px 0;
+    margin: 40px auto 80px;
+    text-align: left;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      width: 2px;
+      height: 100%;
+      background-color: #e1e6f2;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: -10px;
+      left: 430px;
+      border: 8px solid transparent;
+      border-bottom-color: #e1e6f2;
+    }
+
+    .rocket {
+      position: absolute;
+      bottom: -50px;
+      left: 425px;
+    }
+
+    li {
+      position: relative;
+      width: 400px;
+      margin-bottom: 42px;
+
+      .dot {
+        position: absolute;
+        top: 12px;
+        left: 431px;
+        width: 15px;
+        height: 15px;
+        background-color: #dcdcdc;
+        border-radius: 50%;
+      }
+
+      .name {
+        display: inline-block;
+        padding: 0 19px;
+        margin-bottom: 16px;
+        line-height: 40px;
+        text-align: center;
+        font-size: 16px;
         color: #fff;
-        background-color: #52c41a;
-        border-radius: 4px;
-        cursor: pointer;
-        @include ellipsis();
-        &.wait {
-            background-color: #faad14;
+        border-radius: 20px;
+        background-color: #c4c4c4;
+      }
+
+      .desc {
+        position: relative;
+        color: #333;
+        font-size: 14px;
+      }
+
+      &.ing,
+      &.done {
+        .dot {
+          top: 8px;
+          background-color: $main-color;
         }
-        &.signing {
-            background-color: $main-color;
+
+        .name {
+          background-color: $main-color;
         }
-        &.signed {
-            background-color: #52c41a;
+      }
+
+      &.ing {
+        .dot {
+          width: 27px;
+          height: 27px;
+          border: 6px solid #e2f1fb;
         }
-        &.playing {
-            background-color: #f96d6d;
+      }
+
+      &:nth-child(odd) {
+        text-align: right;
+
+        &.ing {
+          .dot {
+            left: auto;
+            right: -51px;
+          }
         }
-        &.finish {
-            background-color: #ccc;
+
+        .name {
+          &:before {
+            content: '';
+            z-index: 2;
+            position: absolute;
+            top: 14px;
+            right: -35px;
+            border: 18px solid transparent;
+            border-top-width: 6px;
+            border-bottom-width: 6px;
+            border-left-color: #c4c4c4;
+          }
         }
-    }
-    .end-text {
-        font-size: 12px;
-        color: #666;
-        em {
-            font-style: normal;
-            color: #f00;
+
+        .desc {
+          text-align: right;
         }
-    }
-    .texts {
-        margin: 20px 0 50px;
-        font-size: 14px;
-        line-height: 1.6;
-        text-indent: 2em;
-        overflow: hidden;
-        /deep/img {
-            max-width: 100%;
+
+        &.ing,
+        &.done {
+          .name {
+            &:before {
+              border-left-color: $main-color;
+            }
+          }
         }
-    }
-    .progress {
-        position: relative;
-        width: 95%;
-        padding: 50px 0;
-        margin: 40px auto 80px;
-        text-align: left;
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            width: 2px;
-            height: 100%;
-            background-color: #e1e6f2;
+      }
+
+      &:nth-child(even) {
+        margin-left: 482px;
+
+        .dot {
+          left: -51px;
         }
-        &:after {
+
+        &.ing {
+          .dot {
+            left: -57px;
+          }
+        }
+
+        .name {
+          text-align: left;
+
+          &:after {
             content: '';
+            z-index: 2;
             position: absolute;
-            top: -10px;
-            left: 430px;
-            border: 8px solid transparent;
-            border-bottom-color: #e1e6f2;
+            top: 14px;
+            left: -35px;
+            border: 18px solid transparent;
+            border-top-width: 6px;
+            border-bottom-width: 6px;
+            border-right-color: #c4c4c4;
+          }
         }
-        .rocket {
-            position: absolute;
-            bottom: -50px;
-            left: 425px;
+
+        .desc {
+          &:before {
+            left: auto;
+            right: -16px;
+            border: 8px solid transparent;
+            border-left-color: #fff;
+          }
+
+          &:after {
+            left: auto;
+            right: -18px;
+            border: 9px solid transparent;
+            border-left-color: #e6e6e6;
+          }
         }
-        li {
-            position: relative;
-            width: 400px;
-            margin-bottom: 42px;
-            .dot {
-                position: absolute;
-                top: 12px;
-                left: 431px;
-                width: 15px;
-                height: 15px;
-                background-color: #dcdcdc;
-                border-radius: 50%;
-            }
-            .name {
-                display: inline-block;
-                padding: 0 19px;
-                margin-bottom: 16px;
-                line-height: 40px;
-                text-align: center;
-                font-size: 16px;
-                color: #fff;
-                border-radius: 20px;
-                background-color: #c4c4c4;
-            }
-            .desc {
-                position: relative;
-                color: #333;
-                font-size: 14px;
-            }
-            &.ing,
-            &.done {
-                .dot {
-                    top: 8px;
-                    background-color: #007eff;
-                }
-                .name {
-                    background-color: #007eff;
-                }
-            }
-            &.ing {
-                .dot {
-                    width: 27px;
-                    height: 27px;
-                    border: 6px solid #e2f1fb;
-                }
-            }
-            &:nth-child(odd) {
-                text-align: right;
-                &.ing {
-                    .dot {
-                        left: auto;
-                        right: -51px;
-                    }
-                }
-                .name {
-                    &:before {
-                        content: '';
-                        z-index: 2;
-                        position: absolute;
-                        top: 14px;
-                        right: -35px;
-                        border: 18px solid transparent;
-                        border-top-width: 6px;
-                        border-bottom-width: 6px;
-                        border-left-color: #c4c4c4;
-                    }
-                }
-                .desc {
-                    text-align: right;
-                }
-                &.ing,
-                &.done {
-                    .name {
-                        &:before {
-                            border-left-color: #007eff;
-                        }
-                    }
-                }
-            }
-            &:nth-child(even) {
-                margin-left: 482px;
-                .dot {
-                    left: -51px;
-                }
-                &.ing {
-                    .dot {
-                        left: -57px;
-                    }
-                }
-                .name {
-                    text-align: left;
-                    &:after {
-                        content: '';
-                        z-index: 2;
-                        position: absolute;
-                        top: 14px;
-                        left: -35px;
-                        border: 18px solid transparent;
-                        border-top-width: 6px;
-                        border-bottom-width: 6px;
-                        border-right-color: #c4c4c4;
-                    }
-                }
-                .desc {
-                    &:before {
-                        left: auto;
-                        right: -16px;
-                        border: 8px solid transparent;
-                        border-left-color: #fff;
-                    }
-                    &:after {
-                        left: auto;
-                        right: -18px;
-                        border: 9px solid transparent;
-                        border-left-color: #e6e6e6;
-                    }
-                }
-
-                &.ing,
-                &.done {
-                    .name {
-                        &:after {
-                            border-right-color: #007eff;
-                        }
-                    }
-                }
-            }
-            &:last-child {
-                margin-bottom: 0;
+
+        &.ing,
+        &.done {
+          .name {
+            &:after {
+              border-right-color: $main-color;
             }
+          }
         }
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
+  }
 }
+
 .files {
-    margin-bottom: 30px;
-    li {
-        display: flex;
-        align-items: center;
-        margin: 10px 0;
-    }
-    .fileName {
-        margin-right: 10px;
-        font-size: 12px;
-    }
+  margin-bottom: 30px;
+
+  li {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+  }
+
+  .fileName {
+    margin-right: 10px;
+    font-size: 12px;
+  }
 }
+
 .notice-list {
-    text-align: left;
-    li {
-        padding: 16px;
-        margin-bottom: 12px;
-        transition: all 0.3s;
-        cursor: pointer;
-        border-radius: 6px;
-        background-color: #fff;
-        border-bottom: 1px dashed #ebebeb;
-        &:last-child {
-            border-bottom: 0;
-        }
-    }
-    h6 {
-        font-size: 20px;
-        font-weight: 500;
-        color: #0b1d30;
-        &:hover {
-            color: #007eff;
-        }
-    }
-    .meta {
-        margin: 10px 0;
-        font-size: 14px;
-        color: #666;
+  text-align: left;
+
+  li {
+    padding: 16px;
+    margin-bottom: 12px;
+    transition: all 0.3s;
+    cursor: pointer;
+    border-radius: 6px;
+    background-color: #fff;
+    border-bottom: 1px dashed #ebebeb;
+
+    &:last-child {
+      border-bottom: 0;
     }
-    .des {
-        font-size: 14px;
-        color: #333;
-        line-height: 24px;
-        display: -webkit-box;
-        display: -moz-box;
-        -webkit-box-orient: vertical;
-        -moz-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        -moz-line-clamp: 2;
-        overflow: hidden;
-        text-overflow: ellipsis;
+  }
+
+  h6 {
+    font-size: 20px;
+    font-weight: 500;
+    color: #0b1d30;
+
+    &:hover {
+      color: $main-color;
     }
+  }
+
+  .meta {
+    margin: 10px 0;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .des {
+    font-size: 14px;
+    color: #333;
+    line-height: 24px;
+    display: -webkit-box;
+    display: -moz-box;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    -moz-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
+
 .table {
-    width: 100%;
-    border-collapse: collapse;
-    th,
-    td {
-        padding: 12px;
-        border: 1px solid #ebeef5;
-    }
-    &.tc {
-        text-align: center;
-    }
-    th {
-        text-align: center;
-        background-color: #f8faff;
-    }
-    .icon {
-        margin-right: 10px;
-        font-size: 16px;
-        color: #7a7a7a;
-        cursor: pointer;
-        &:hover {
-            color: #007eff;
-        }
-    }
-    .plus {
-        margin-bottom: 10px;
-        text-align: right;
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 12px;
+    border: 1px solid #ebeef5;
+  }
+
+  &.tc {
+    text-align: center;
+  }
+
+  th {
+    text-align: center;
+    background-color: #f8faff;
+  }
+
+  .icon {
+    margin-right: 10px;
+    font-size: 16px;
+    color: #7a7a7a;
+    cursor: pointer;
+
+    &:hover {
+      color: $main-color;
     }
-    .line {
-        display: flex;
-        align-items: center;
-        margin-bottom: 10px;
-        .el-input {
-            margin-right: 15px;
-        }
+  }
+
+  .plus {
+    margin-bottom: 10px;
+    text-align: right;
+  }
+
+  .line {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .el-input {
+      margin-right: 15px;
     }
+  }
 }
+
 .flex-center {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
 }
+
 /deep/.dia-form {
-    .w-100 {
-        width: 100%;
-    }
-    .tips {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+  .w-100 {
+    width: 100%;
+  }
+
+  .tips {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/assessment/add/index.vue b/src/pages/assessment/add/index.vue
index 3afcde0..d4532d9 100644
--- a/src/pages/assessment/add/index.vue
+++ b/src/pages/assessment/add/index.vue
@@ -591,7 +591,7 @@ export default {
     .el-tree-node__expand-icon {
       padding: 2px;
       color: #fff;
-      background-color: #9278ff;
+      background-color: $main-color;
       border-radius: 30px;
       margin: 0 10px;
     }
@@ -607,7 +607,7 @@ export default {
     .el-checkbox__inner {
       width: 18px;
       height: 18px;
-      border: 1px solid #9278ff;
+      border: 1px solid $main-color$main-color;
       border-radius: 20px;
     }
 
diff --git a/src/pages/course/preview/index.vue b/src/pages/course/preview/index.vue
index f50daf8..2457a5d 100644
--- a/src/pages/course/preview/index.vue
+++ b/src/pages/course/preview/index.vue
@@ -1,78 +1,46 @@
 <template>
   <!--  课程预览  -->
   <div class="wrap">
-    <el-card shadow="hover"
-             class="m-b-20">
+    <el-card shadow="hover" class="m-b-20">
       <div class="flex-between">
-        <el-page-header @back="goBack"
-                        :content="'课程预览'"></el-page-header>
+        <el-page-header @back="goBack" :content="'课程预览'"></el-page-header>
       </div>
     </el-card>
 
     <div class="flex">
-      <div class="cover"
-           :class="{'is-word': showMask1}">
-        <img v-if="coverUrl"
-             :src="coverUrl"
-             alt=""
-             width="100%"
-             height="100%">
+      <div class="cover" :class="{ 'is-word': showMask1 }">
+        <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
         <template v-else-if="iframeSrc">
-          <iframe class="inner fileIframe"
-                  id="fileIframe"
-                  :src="iframeSrc"
-                  frameborder="0"></iframe>
+          <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
           <template v-if="showMask">
-            <div class="mask"
-                 style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
-            <div class="mask"
-                 style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
+            <div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
+            <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
           </template>
           <template v-if="showMask1">
-            <div class="word-mask"
-                 style="height: 40px;"></div>
-            <div class="word-mask2"
-                 style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+            <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">
+        <div class="pdf inner" v-else-if="pdfSrc">
           <p class="arrow">
-            <span @click="changePdfPage(0)"
-                  class="turn el-icon-arrow-left"
-                  :class="{grey: currentPage==1}"></span>
+            <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>
-          <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>
@@ -81,49 +49,26 @@
         <div class="list">
           <h4 class="title">{{ courseName }}</h4>
           <div class="desc-wrap">
-            <div class="desc"
-                 :class="{active: desShrink}"
-                 v-html="description"></div>
-            <i class="arrow"
-               :class="{active: desShrink}"
-               v-if="description.length > 40">
+            <div class="desc" :class="{ active: desShrink }" v-html="description"></div>
+            <i class="arrow" :class="{ active: desShrink }" v-if="description.length > 40">
               <span>...</span>
-              <img src="@/assets/img/arrow-down.png"
-                   alt=""
-                   @click="desShrink = !desShrink">
+              <img src="@/assets/img/arrow-down.png" alt="" @click="desShrink = !desShrink">
             </i>
           </div>
           <div class="chapters">
             <template v-if="videoList.length">
-              <div class="chapter"
-                   v-for="(item,index) in videoList"
-                   :key="index">
+              <div class="chapter" v-for="(item, index) in videoList" :key="index">
                 <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"
-                       :class="{active: curLink === `${item.name}${section.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="">
+                <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" :class="{ active: curLink === `${item.name}${section.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="">
+                        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>
@@ -318,387 +263,465 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-    padding: 0 200px;
+  padding: 0 200px;
 }
+
 $height: 700px;
+
 .video_wid,
 .cover {
-    position: relative;
-    width: 76%;
-    height: $height !important;
-    border: 0;
+  position: relative;
+  width: 76%;
+  height: $height !important;
+  border: 0;
 }
+
 .page {
-    /deep/.des {
-        overflow: auto;
-        div,
-        p,
-        span {
-            font-family: PingFangSC-Regular !important;
-        }
+  /deep/.des {
+    overflow: auto;
+
+    div,
+    p,
+    span {
+      font-family: PingFangSC-Regular !important;
     }
+  }
 }
+
 .l-title {
-    font-size: 17px;
+  font-size: 17px;
 }
+
 .cover {
-    background-color: #252528;
-    img {
-        border-radius: 8px;
-    }
-    &.is-word {
-        overflow: hidden;
-    }
+  background-color: #252528;
+
+  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: 296px;
-    padding: 16px;
-    margin-left: 12px;
-    background-color: #252528;
-    .renew {
-        width: 100%;
-        margin-bottom: 16px;
-        font-size: 17px;
+  width: 296px;
+  padding: 16px;
+  margin-left: 12px;
+  background-color: #252528;
+
+  .renew {
+    width: 100%;
+    margin-bottom: 16px;
+    font-size: 17px;
+  }
+
+  .entry {
+    display: block;
+    width: 100%;
+    height: 34px;
+    margin-bottom: 16px;
+    font-size: 17px;
+    color: #fff;
+    text-align: center;
+    line-height: 34px;
+    background: url(../../../assets/img/entry.png) 0 0/100% 100% no-repeat;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.9;
     }
-    .entry {
-        display: block;
-        width: 100%;
-        height: 34px;
-        margin-bottom: 16px;
-        font-size: 17px;
-        color: #fff;
-        text-align: center;
-        line-height: 34px;
-        background: url(../../../assets/img/entry.png) 0 0/100% 100% no-repeat;
-        cursor: pointer;
-        &:hover {
-            opacity: 0.9;
-        }
+  }
+
+  .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: #377be3;
+      }
+
+      &.active {
+        background-color: $main-color;
+      }
     }
-    .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: #377be3;
-            }
-            &.active {
-                background-color: $main-color;
-            }
-        }
-        .icon {
-            margin-right: 5px;
-            font-size: 18px;
-        }
+
+    .icon {
+      margin-right: 5px;
+      font-size: 18px;
     }
+  }
 }
+
 .list {
-    height: calc(700px - 82px);
-    overflow-y: auto;
-    .title {
-        margin-bottom: 11px;
-        color: #fff;
-        font-size: 16px;
-    }
-    .pro-title {
-        margin-bottom: 5px;
-        color: #fff;
-        font-size: 12px;
-    }
-    /deep/.el-progress-bar {
-        width: 92%;
-    }
-    /deep/.el-progress__text {
-        color: #fff;
+  height: calc(700px - 82px);
+  overflow-y: auto;
+
+  .title {
+    margin-bottom: 11px;
+    color: #fff;
+    font-size: 16px;
+  }
+
+  .pro-title {
+    margin-bottom: 5px;
+    color: #fff;
+    font-size: 12px;
+  }
+
+  /deep/.el-progress-bar {
+    width: 92%;
+  }
+
+  /deep/.el-progress__text {
+    color: #fff;
+  }
+
+  .desc-wrap {
+    position: relative;
+
+    .desc {
+      font-size: 12px;
+      color: #fff;
+      line-height: 22px;
+      @include mul-ellipsis(2);
+
+      &.active {
+        display: block;
+        overflow: visible;
+      }
     }
-    .desc-wrap {
-        position: relative;
-        .desc {
-            font-size: 12px;
-            color: #fff;
-            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;
         }
-        .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);
-                }
-            }
+
+        img {
+          transform: rotate(180deg);
         }
+      }
     }
-    .chapters {
-        margin-top: 16px;
-        max-height: calc(100% - 53px);
-        overflow: auto;
-    }
-    .chapter {
-        margin-bottom: 20px;
+  }
+
+  .chapters {
+    margin-top: 16px;
+    max-height: calc(100% - 53px);
+    overflow: auto;
+  }
+
+  .chapter {
+    margin-bottom: 20px;
+  }
+
+  .chapterName {
+    color: #fff;
+    font-size: 14px;
+  }
+
+  .section {
+    padding: 5px 15px;
+    margin-top: 12px;
+    background-color: #121214;
+  }
+
+  .sectionName {
+    position: relative;
+    padding-right: 15px;
+    margin: 12px 0;
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;
+    @include ellipsis;
+
+    img {
+      margin-right: 8px;
     }
-    .chapterName {
-        color: #fff;
-        font-size: 14px;
+
+    .icon {
+      position: absolute;
+      right: 0;
+      font-size: 14px;
+      color: #00c935;
     }
-    .section {
-        padding: 5px 15px;
-        margin-top: 12px;
-        background-color: #121214;
+
+    .circle {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      border: 1px solid #ccc;
     }
-    .sectionName {
-        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: #00c935;
-        }
-        .circle {
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            border: 1px solid #ccc;
-        }
-        &.active {
-            color: #fff;
-        }
+
+    &.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;
-    .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;
+
+  .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;
+  }
 }
+
 /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: $main-color;
+      }
     }
-    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;
+  }
 }
+
 .tabs {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
-    .item {
-        padding: 0 10px;
-        margin-right: 16px;
-        font-size: 16px;
-        text-align: center;
-        color: #333;
-        line-height: 50px;
-        border-bottom: 3px solid transparent;
-        cursor: pointer;
-        &.active {
-            color: #007eff;
-            border-color: #007eff;
-        }
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+
+  .item {
+    padding: 0 10px;
+    margin-right: 16px;
+    font-size: 16px;
+    text-align: center;
+    color: #333;
+    line-height: 50px;
+    border-bottom: 3px solid transparent;
+    cursor: pointer;
+
+    &.active {
+      color: $main-color;
+      border-color: $main-color;
     }
+  }
 }
+
 .tab-content {
-    width: calc(100% - 308px);
+  width: calc(100% - 308px);
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/information/contentManage/index.vue b/src/pages/information/contentManage/index.vue
index 027ed8e..42ce742 100644
--- a/src/pages/information/contentManage/index.vue
+++ b/src/pages/information/contentManage/index.vue
@@ -2,19 +2,11 @@
   <!--  内容管理  -->
   <div class="flex">
     <div class="menu-con">
-      <el-tree ref="column"
-               :data="menuList"
-               :props="{ label: 'name' }"
-               highlight-current
-               :expand-on-click-node="false"
-               default-expand-all
-               node-key="id"
-               @node-click="handleSelect"></el-tree>
+      <el-tree ref="column" :data="menuList" :props="{ label: 'name' }" highlight-current :expand-on-click-node="false"
+        default-expand-all node-key="id" @node-click="handleSelect"></el-tree>
     </div>
     <div class="right">
-      <ContentList ref="content"
-                   v-show="menuList.length"
-                   :columnId="columnId" />
+      <ContentList ref="content" v-show="menuList.length" :columnId="columnId" />
     </div>
   </div>
 </template>
@@ -102,19 +94,22 @@ export default {
 
 <style lang="scss" scoped>
 .menu-con {
-    width: 210px;
-    height: calc(100vh - 250px);
-    border-right: solid 1px #e6e6e6;
-    background-color: #f2f6fc;
-    /deep/.el-tree-node__content {
-        height: 50px;
-    }
+  width: 210px;
+  height: calc(100vh - 250px);
+  border-right: solid 1px #e6e6e6;
+  background-color: #f2f6fc;
+
+  /deep/.el-tree-node__content {
+    height: 50px;
+  }
 }
+
 .right {
-    flex: 1;
+  flex: 1;
 }
-/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-    color: #fff;
-    background-color: #9278ff;
+
+/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  color: #fff;
+  background-color: $main-color;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/information/list/index.vue b/src/pages/information/list/index.vue
index 073ccd7..bce62d7 100644
--- a/src/pages/information/list/index.vue
+++ b/src/pages/information/list/index.vue
@@ -2,17 +2,11 @@
   <!--  资讯管理  -->
   <div class="page">
     <ul class="column-tab">
-      <li :class="{active: tabsName == 1}"
-          @click="handleClick(1)"><i class="el-icon-collection-tag"></i> 栏目管理</li>
-      <li :class="{active: tabsName == 2}"
-          @click="handleClick(2)"><i class="el-icon-document"></i> 内容管理</li>
+      <li :class="{ active: tabsName == 1 }" @click="handleClick(1)"><i class="el-icon-collection-tag"></i> 栏目管理</li>
+      <li :class="{ active: tabsName == 2 }" @click="handleClick(2)"><i class="el-icon-document"></i> 内容管理</li>
     </ul>
-    <columnManage class="flex-1"
-                  ref="content1"
-                  v-if="tabsName == 1" />
-    <ContentManage class="flex-1"
-                   ref="content2"
-                   v-if="tabsName == 2" />
+    <columnManage class="flex-1" ref="content1" v-if="tabsName == 1" />
+    <ContentManage class="flex-1" ref="content2" v-if="tabsName == 2" />
   </div>
 </template>
 
@@ -78,23 +72,27 @@ export default {
 
 <style lang="scss" scoped>
 .page {
-    display: flex;
+  display: flex;
 }
+
 .column-tab {
-    width: 120px;
-    border-right: solid 1px #e6e6e6;
-    li {
-        display: flex;
-        align-items: center;
-        height: 60px;
-        cursor: pointer;
-        i {
-            margin-right: 5px;
-        }
-        &:hover,
-        &.active {
-            color: #9278ff;
-        }
+  width: 120px;
+  border-right: solid 1px #e6e6e6;
+
+  li {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    cursor: pointer;
+
+    i {
+      margin-right: 5px;
+    }
+
+    &:hover,
+    &.active {
+      color: $main-color;
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/match/add/index.vue b/src/pages/match/add/index.vue
index 1f6768e..fcce9a9 100644
--- a/src/pages/match/add/index.vue
+++ b/src/pages/match/add/index.vue
@@ -326,11 +326,11 @@ export default {
     .circle {
       color: #fff;
       border-color: #459ffb;
-      background: #007eff;
+      background: $main-color;
     }
 
     .text {
-      color: #007eff;
+      color: $main-color;
     }
   }
 
diff --git a/src/pages/match/add/step3.vue b/src/pages/match/add/step3.vue
index 91d1932..e21edae 100644
--- a/src/pages/match/add/step3.vue
+++ b/src/pages/match/add/step3.vue
@@ -508,7 +508,7 @@ export default {
     bottom: -63px;
     right: 0;
     font-size: 12px;
-    color: #007eff;
+    color: $main-color;
     cursor: pointer;
   }
 }
diff --git a/src/pages/match/manage/matchInfo.vue b/src/pages/match/manage/matchInfo.vue
index c0abf53..27ac844 100644
--- a/src/pages/match/manage/matchInfo.vue
+++ b/src/pages/match/manage/matchInfo.vue
@@ -631,7 +631,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      color: #007eff;
+      color: $main-color;
     }
   }
 
diff --git a/src/pages/match/preview/index.vue b/src/pages/match/preview/index.vue
index 26f55a0..1cd5f02 100644
--- a/src/pages/match/preview/index.vue
+++ b/src/pages/match/preview/index.vue
@@ -1,19 +1,15 @@
 <template>
   <div class="match">
     <div class="banner"
-         :style="{backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220613/png/1536269450851409920.png') + ')'}"></div>
+      :style="{ backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220613/png/1536269450851409920.png') + ')' }">
+    </div>
     <div class="center">
-      <breadcrumb ref="breadcrumb"
-                  :data="'全部赛事/' + form.name"
-                  route="list"></breadcrumb>
+      <breadcrumb ref="breadcrumb" :data="'全部赛事/' + form.name" route="list"></breadcrumb>
       <div class="match-inner">
         <div class="flex-between">
-          <el-tabs v-model="curType"
-                   @tab-click="typeChange">
-            <el-tab-pane v-for="(item, index) in typeList"
-                         :key="index"
-                         :label="item.name"
-                         :name="item.id"></el-tab-pane>
+          <el-tabs v-model="curType" @tab-click="typeChange">
+            <el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name"
+              :name="item.id"></el-tab-pane>
           </el-tabs>
           <div class="status wait">等待报名</div>
         </div>
@@ -22,46 +18,32 @@
           <div class="meta">最近编辑时间：{{ form.updateTime }}</div>
         </div>
 
-        <div class="l-title"
-             id="part1"><img src="@/assets/img/label.png"
-               alt=""> 竞赛信息</div>
-        <div v-if="form.description"
-             class="texts ql-editor"
-             v-html="form.description"></div>
+        <div class="l-title" id="part1"><img src="@/assets/img/label.png" alt=""> 竞赛信息</div>
+        <div v-if="form.description" class="texts ql-editor" v-html="form.description"></div>
         <template v-if="form.competitionAnnexList && form.competitionAnnexList.length">
           <h6 class="p-title">附件下载</h6>
           <ul class="files">
-            <li v-for="(item, i) in form.competitionAnnexList"
-                :key="i">
-              <el-link v-if="item.canPreview"
-                       class="m-r-10"
-                       type="primary"
-                       @click="previewFile(item)">{{ item.fileName }}</el-link>
-              <span v-else
-                    class="file-name">{{ item.fileName }}</span>
-              <el-link type="primary"
-                       :underline="false"
-                       @click="download(item)">下载</el-link>
+            <li v-for="(item, i) in form.competitionAnnexList" :key="i">
+              <el-link v-if="item.canPreview" class="m-r-10" type="primary" @click="previewFile(item)">{{ item.fileName
+                }}</el-link>
+              <span v-else class="file-name">{{ item.fileName }}</span>
+              <el-link type="primary" :underline="false" @click="download(item)">下载</el-link>
             </li>
           </ul>
         </template>
-        <template v-if="!form.description && (!form.competitionAnnexList || !form.competitionAnnexList.length )">
+        <template v-if="!form.description && (!form.competitionAnnexList || !form.competitionAnnexList.length)">
           <div class="empty">
             <div>
-              <img src="@/assets/img/none.png"
-                   alt="">
+              <img src="@/assets/img/none.png" alt="">
               <p>暂无数据</p>
             </div>
           </div>
         </template>
 
         <template v-if="form.releaseType && form.competitionStage.length">
-          <div class="l-title"><img src="@/assets/img/label.png"
-                 alt=""> 赛程、规则与内容</div>
+          <div class="l-title"><img src="@/assets/img/label.png" alt=""> 赛程、规则与内容</div>
           <h6 class="rule-title">共{{ form.competitionStage.length }}个竞赛阶段，同一个团队每个成员只能参加一个阶段赛项</h6>
-          <div v-for="(rule, i) in form.competitionStage"
-               :key="i"
-               class="rule">
+          <div v-for="(rule, i) in form.competitionStage" :key="i" class="rule">
             <p style="font-size: 16px;color: #333;">{{ rule.stageName }}</p>
             <p>比赛时间：{{ rule.startTime && rule.startTime + ' ~ ' + rule.endTime }}</p>
             <p>比赛方式：{{ methods.find(e => e.id == rule.method) && methods.find(e => e.id == rule.method).name }}</p>
@@ -76,11 +58,11 @@
 
             <template v-if="form.completeCompetitionSetup.competitionType">
               <p>每个团队参赛人数限制：{{ rule.teamNumLimit || '不限制' }}</p>
-              <p>团队成绩计算方式：{{ teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod) && teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod).name }}</p>
+              <p>团队成绩计算方式：{{ teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod) &&
+                teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod).name }}</p>
             </template>
             <!-- <p v-if="rule.resultAnnouncementTime != 0">阶段比赛结束后{{ rule.resultAnnouncementTime }}小时，公布阶段比赛成绩。</p> -->
-            <div v-if="form.rule === 1"
-                 class="flex">
+            <div v-if="form.rule === 1" class="flex">
               <p>晋级规则：</p>
               <div>
                 <p v-if="rule.peopleLimit">本阶段成绩排名前{{ rule.peopleLimit }}队，可晋级下一阶段比赛</p>
@@ -92,52 +74,38 @@
         </template>
 
         <!-- 进展 -->
-        <div class="l-title"
-             id="part2"><img src="@/assets/img/label.png"
-               alt=""> 竞赛进展</div>
-        <ul class="progress"
-            v-if="progress.length">
-          <li v-for="(item,index) in progress"
-              :key="index"
-              :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')">
+        <div class="l-title" id="part2"><img src="@/assets/img/label.png" alt=""> 竞赛进展</div>
+        <ul class="progress" v-if="progress.length">
+          <li v-for="(item, index) in progress" :key="index"
+            :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')">
             <i class="dot"></i>
-            <p class="name">{{item.title}}</p>
-            <p class="desc">{{item.description}}</p>
+            <p class="name">{{ item.title }}</p>
+            <p class="desc">{{ item.description }}</p>
           </li>
-          <img class="rocket"
-               src="@/assets/img/rocket.png"
-               alt="">
+          <img class="rocket" src="@/assets/img/rocket.png" alt="">
         </ul>
         <template v-else>
           <div class="empty">
             <div>
-              <img src="@/assets/img/none.png"
-                   alt="">
+              <img src="@/assets/img/none.png" alt="">
               <p>暂无数据</p>
             </div>
           </div>
         </template>
 
         <!-- 公告 -->
-        <div class="l-title"
-             id="part3"><img src="@/assets/img/label.png"
-               alt=""> 通知公告</div>
-        <ul class="notice-list"
-            v-if="notices.length">
-          <li v-for="(item, i) in notices"
-              :key="i"
-              @click="toNotice(item)">
+        <div class="l-title" id="part3"><img src="@/assets/img/label.png" alt=""> 通知公告</div>
+        <ul class="notice-list" v-if="notices.length">
+          <li v-for="(item, i) in notices" :key="i" @click="toNotice(item)">
             <h6>{{ item.announcementTitle }}</h6>
             <p class="meta">{{ item.updateTime }}</p>
-            <div class="des"
-                 v-html="item.announcementText"></div>
+            <div class="des" v-html="item.announcementText"></div>
           </li>
         </ul>
         <template v-else>
           <div class="empty">
             <div>
-              <img src="@/assets/img/none.png"
-                   alt="">
+              <img src="@/assets/img/none.png" alt="">
               <p>暂无通知公告</p>
             </div>
           </div>
@@ -237,343 +205,403 @@ export default {
 
 <style lang="scss" scoped>
 /deep/.breadcrumb .el-breadcrumb__item .is-link {
-    color: #007eff;
+  color: $main-color;
 }
+
 .match {
-    padding-bottom: 20px;
-    background-color: #f3f6fa;
-    .banner {
-        width: 100%;
-        height: 350px;
-        color: #fff;
-        background-size: 100% 350px;
-        background-repeat: no-repeat;
-        box-sizing: border-box;
-    }
-    .center {
-        width: 1000px;
-        margin: 40px auto 0;
+  padding-bottom: 20px;
+  background-color: #f3f6fa;
+
+  .banner {
+    width: 100%;
+    height: 350px;
+    color: #fff;
+    background-size: 100% 350px;
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+  }
+
+  .center {
+    width: 1000px;
+    margin: 40px auto 0;
+  }
+
+  .match-inner {
+    min-height: calc(100vh - 465px);
+    padding: 30px 40px 20px;
+    background-color: #fff;
+    box-sizing: border-box;
+  }
+
+  /deep/.el-tabs {
+    .el-tabs__item.is-active,
+    .el-tabs__item:hover {
+      color: $main-color;
     }
-    .match-inner {
-        min-height: calc(100vh - 465px);
-        padding: 30px 40px 20px;
-        background-color: #fff;
-        box-sizing: border-box;
+
+    .el-tabs__active-bar {
+      background-color: $main-color;
     }
-    /deep/.el-tabs {
-        .el-tabs__item.is-active,
-        .el-tabs__item:hover {
-            color: #007eff;
-        }
-        .el-tabs__active-bar {
-            background-color: #007eff;
-        }
+  }
+
+  .p-title {
+    border-left-color: $main-color;
+  }
+
+  .l-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    font-size: 18px;
+    color: #333;
+
+    img {
+      margin-right: 5px;
     }
-    .p-title {
-        border-left-color: #007eff;
+  }
+
+  .status {
+    padding: 0 16px;
+    margin-left: 20px;
+    line-height: 34px;
+    font-size: 14px;
+    color: #fff;
+    background-color: #52c41a;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &.wait {
+      background-color: #faad14;
     }
-    .l-title {
-        display: flex;
-        align-items: center;
-        margin-bottom: 12px;
-        font-size: 18px;
-        color: #333;
-        img {
-            margin-right: 5px;
-        }
+
+    &.signing {
+      background-color: $main-color;
     }
-    .status {
-        padding: 0 16px;
-        margin-left: 20px;
-        line-height: 34px;
-        font-size: 14px;
-        color: #fff;
-        background-color: #52c41a;
-        border-radius: 4px;
-        cursor: pointer;
-        &.wait {
-            background-color: #faad14;
-        }
-        &.signing {
-            background-color: #007eff;
-        }
-        &.signed {
-            background-color: #52c41a;
-        }
-        &.finish {
-            background-color: #ccc;
-        }
+
+    &.signed {
+      background-color: #52c41a;
     }
-    .title {
-        width: 67%;
-        margin: 0 auto;
-        font-size: 28px;
-        text-align: center;
-        color: #0b1d30;
+
+    &.finish {
+      background-color: #ccc;
     }
-    .info .meta {
-        padding: 16px 0;
-        font-size: 12px;
-        color: #999;
-        text-align: center;
+  }
+
+  .title {
+    width: 67%;
+    margin: 0 auto;
+    font-size: 28px;
+    text-align: center;
+    color: #0b1d30;
+  }
+
+  .info .meta {
+    padding: 16px 0;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+  }
+
+  .texts {
+    margin-bottom: 30px;
+    font-size: 14px;
+    line-height: 1.6;
+    text-indent: 2em;
+    overflow: hidden;
+
+    /deep/img {
+      max-width: 100%;
     }
-    .texts {
-        margin-bottom: 30px;
-        font-size: 14px;
-        line-height: 1.6;
-        text-indent: 2em;
-        overflow: hidden;
-        /deep/img {
-            max-width: 100%;
-        }
+  }
+
+  .files {
+    margin-bottom: 30px;
+
+    li {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
     }
-    .files {
-        margin-bottom: 30px;
-        li {
-            display: flex;
-            align-items: center;
-            margin: 10px 0;
-        }
-        .file-name {
-            margin-right: 10px;
-            font-size: 12px;
-        }
+
+    .file-name {
+      margin-right: 10px;
+      font-size: 12px;
     }
-    .el-link.el-link--primary {
-        color: #007eff !important;
-        &:after {
-            border-color: #007eff;
-        }
+  }
+
+  .el-link.el-link--primary {
+    color: $main-color !important;
+
+    &:after {
+      border-color: $main-color;
     }
+  }
 }
+
 .progress {
+  position: relative;
+  width: 95%;
+  padding: 50px 0;
+  margin: 40px auto 80px;
+  text-align: left;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 2px;
+    height: 100%;
+    background-color: #e1e6f2;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: 430px;
+    border: 8px solid transparent;
+    border-bottom-color: #e1e6f2;
+  }
+
+  .rocket {
+    position: absolute;
+    bottom: -50px;
+    left: 425px;
+  }
+
+  li {
     position: relative;
-    width: 95%;
-    padding: 50px 0;
-    margin: 40px auto 80px;
-    text-align: left;
-    &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 50%;
-        width: 2px;
-        height: 100%;
-        background-color: #e1e6f2;
+    width: 400px;
+    margin-bottom: 42px;
+
+    .dot {
+      position: absolute;
+      top: 12px;
+      left: 431px;
+      width: 15px;
+      height: 15px;
+      background-color: #dcdcdc;
+      border-radius: 50%;
     }
-    &:after {
-        content: '';
-        position: absolute;
-        top: -10px;
-        left: 430px;
-        border: 8px solid transparent;
-        border-bottom-color: #e1e6f2;
+
+    .name {
+      display: inline-block;
+      padding: 0 19px;
+      margin-bottom: 16px;
+      line-height: 40px;
+      text-align: center;
+      font-size: 16px;
+      color: #fff;
+      border-radius: 20px;
+      background-color: #c4c4c4;
     }
-    .rocket {
-        position: absolute;
-        bottom: -50px;
-        left: 425px;
+
+    .desc {
+      position: relative;
+      color: #333;
+      font-size: 14px;
     }
-    li {
-        position: relative;
-        width: 400px;
-        margin-bottom: 42px;
+
+    &.ing,
+    &.done {
+      .dot {
+        top: 8px;
+        background-color: $main-color;
+      }
+
+      .name {
+        background-color: $main-color;
+      }
+    }
+
+    &.ing {
+      .dot {
+        width: 27px;
+        height: 27px;
+        border: 6px solid #e2f1fb;
+      }
+    }
+
+    &:nth-child(odd) {
+      text-align: right;
+
+      &.ing {
         .dot {
-            position: absolute;
-            top: 12px;
-            left: 431px;
-            width: 15px;
-            height: 15px;
-            background-color: #dcdcdc;
-            border-radius: 50%;
+          left: auto;
+          right: -58px;
         }
-        .name {
-            display: inline-block;
-            padding: 0 19px;
-            margin-bottom: 16px;
-            line-height: 40px;
-            text-align: center;
-            font-size: 16px;
-            color: #fff;
-            border-radius: 20px;
-            background-color: #c4c4c4;
+      }
+
+      .name {
+        &:before {
+          content: '';
+          z-index: 2;
+          position: absolute;
+          top: 14px;
+          right: -35px;
+          border: 18px solid transparent;
+          border-top-width: 6px;
+          border-bottom-width: 6px;
+          border-left-color: #c4c4c4;
         }
-        .desc {
-            position: relative;
-            color: #333;
-            font-size: 14px;
+      }
+
+      .desc {
+        text-align: right;
+      }
+
+      &.ing,
+      &.done {
+        .name {
+          &:before {
+            border-left-color: $main-color;
+          }
         }
-        &.ing,
-        &.done {
-            .dot {
-                top: 8px;
-                background-color: #007eff;
-            }
-            .name {
-                background-color: #007eff;
-            }
+      }
+    }
+
+    &:nth-child(even) {
+      margin-left: 482px;
+
+      .dot {
+        left: -51px;
+      }
+
+      &.ing {
+        .dot {
+          left: -57px;
         }
-        &.ing {
-            .dot {
-                width: 27px;
-                height: 27px;
-                border: 6px solid #e2f1fb;
-            }
+      }
+
+      .name {
+        text-align: left;
+
+        &:after {
+          content: '';
+          z-index: 2;
+          position: absolute;
+          top: 14px;
+          left: -35px;
+          border: 18px solid transparent;
+          border-top-width: 6px;
+          border-bottom-width: 6px;
+          border-right-color: #c4c4c4;
         }
-        &:nth-child(odd) {
-            text-align: right;
-            &.ing {
-                .dot {
-                    left: auto;
-                    right: -58px;
-                }
-            }
-            .name {
-                &:before {
-                    content: '';
-                    z-index: 2;
-                    position: absolute;
-                    top: 14px;
-                    right: -35px;
-                    border: 18px solid transparent;
-                    border-top-width: 6px;
-                    border-bottom-width: 6px;
-                    border-left-color: #c4c4c4;
-                }
-            }
-            .desc {
-                text-align: right;
-            }
-            &.ing,
-            &.done {
-                .name {
-                    &:before {
-                        border-left-color: #007eff;
-                    }
-                }
-            }
+      }
+
+      .desc {
+        &:before {
+          left: auto;
+          right: -16px;
+          border: 8px solid transparent;
+          border-left-color: #fff;
         }
-        &:nth-child(even) {
-            margin-left: 482px;
-            .dot {
-                left: -51px;
-            }
-            &.ing {
-                .dot {
-                    left: -57px;
-                }
-            }
-            .name {
-                text-align: left;
-                &:after {
-                    content: '';
-                    z-index: 2;
-                    position: absolute;
-                    top: 14px;
-                    left: -35px;
-                    border: 18px solid transparent;
-                    border-top-width: 6px;
-                    border-bottom-width: 6px;
-                    border-right-color: #c4c4c4;
-                }
-            }
-            .desc {
-                &:before {
-                    left: auto;
-                    right: -16px;
-                    border: 8px solid transparent;
-                    border-left-color: #fff;
-                }
-                &:after {
-                    left: auto;
-                    right: -18px;
-                    border: 9px solid transparent;
-                    border-left-color: #e6e6e6;
-                }
-            }
-
-            &.ing,
-            &.done {
-                .name {
-                    &:after {
-                        border-right-color: #007eff;
-                    }
-                }
-            }
+
+        &:after {
+          left: auto;
+          right: -18px;
+          border: 9px solid transparent;
+          border-left-color: #e6e6e6;
         }
-        &:last-child {
-            margin-bottom: 0;
+      }
+
+      &.ing,
+      &.done {
+        .name {
+          &:after {
+            border-right-color: $main-color;
+          }
         }
+      }
     }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
+
 .notice-list {
-    text-align: left;
-    li {
-        padding: 16px;
-        margin-bottom: 12px;
-        transition: all 0.3s;
-        cursor: pointer;
-        border-radius: 6px;
-        background-color: #fff;
-        border-bottom: 1px dashed #ebebeb;
-        &:last-child {
-            border-bottom: 0;
-        }
-    }
-    h6 {
-        font-size: 20px;
-        font-weight: 500;
-        color: #0b1d30;
-        &:hover {
-            color: #007eff;
-        }
-    }
-    .meta {
-        margin: 10px 0;
-        font-size: 14px;
-        color: #666;
+  text-align: left;
+
+  li {
+    padding: 16px;
+    margin-bottom: 12px;
+    transition: all 0.3s;
+    cursor: pointer;
+    border-radius: 6px;
+    background-color: #fff;
+    border-bottom: 1px dashed #ebebeb;
+
+    &:last-child {
+      border-bottom: 0;
     }
-    .des {
-        font-size: 14px;
-        color: #333;
-        line-height: 24px;
-        display: -webkit-box;
-        display: -moz-box;
-        -webkit-box-orient: vertical;
-        -moz-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        -moz-line-clamp: 2;
-        overflow: hidden;
-        text-overflow: ellipsis;
+  }
+
+  h6 {
+    font-size: 20px;
+    font-weight: 500;
+    color: #0b1d30;
+
+    &:hover {
+      color: $main-color;
     }
+  }
+
+  .meta {
+    margin: 10px 0;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .des {
+    font-size: 14px;
+    color: #333;
+    line-height: 24px;
+    display: -webkit-box;
+    display: -moz-box;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    -moz-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
+
 .empty {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 50px 0;
-    text-align: center;
-    img {
-        width: 471px;
-    }
-    p {
-        margin-top: 40px;
-        font-size: 18px;
-        color: rgba(0, 0, 0, 0.25);
-    }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 50px 0;
+  text-align: center;
+
+  img {
+    width: 471px;
+  }
+
+  p {
+    margin-top: 40px;
+    font-size: 18px;
+    color: rgba(0, 0, 0, 0.25);
+  }
 }
+
 .rule-title {
-    margin-bottom: 10px;
-    font-size: 16px;
+  margin-bottom: 10px;
+  font-size: 16px;
 }
+
 .rule {
-    padding: 15px;
-    margin-bottom: 15px;
-    border: 1px solid #dfdfdf;
-    p {
-        font-size: 14px;
-        line-height: 30px;
-        color: #6e6e6e;
-    }
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 1px solid #dfdfdf;
+
+  p {
+    font-size: 14px;
+    line-height: 30px;
+    color: #6e6e6e;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/product/list/index.vue b/src/pages/product/list/index.vue
index 9d87056..128c05f 100644
--- a/src/pages/product/list/index.vue
+++ b/src/pages/product/list/index.vue
@@ -470,7 +470,7 @@ export default {
         }
 
         &.active:after {
-          background-color: #9278ff;
+          background-color: $main-color;
         }
       }
     }
@@ -526,7 +526,7 @@ export default {
 
         &.active {
           font-weight: 600;
-          color: #9278ff;
+          color: $main-color;
         }
       }
 
@@ -552,7 +552,7 @@ export default {
 
         &.active {
           .name {
-            color: #9278ff;
+            color: $main-color;
           }
         }
       }
@@ -570,7 +570,7 @@ export default {
 
         &.active {
           .el-input .el-input__inner {
-            color: #9278ff;
+            color: $main-color;
           }
         }
       }
@@ -691,7 +691,7 @@ export default {
 
       .tag {
         margin-right: 8px;
-        color: #9278ff;
+        color: $main-color;
         background-color: #f9f9f9;
         border: 0;
       }
diff --git a/src/pages/product/show/index.vue b/src/pages/product/show/index.vue
index e106f1f..9cd3dab 100644
--- a/src/pages/product/show/index.vue
+++ b/src/pages/product/show/index.vue
@@ -378,7 +378,7 @@ export default {
       color: #2e2d31;
 
       .val {
-        color: #007eff;
+        color: $main-color;
       }
     }
 
@@ -443,7 +443,7 @@ export default {
     }
 
     .entry {
-      background: #007eff;
+      background: $main-color;
     }
   }
 
@@ -474,7 +474,7 @@ export default {
       }
 
       &.active:after {
-        background-color: #007eff;
+        background-color: $main-color;
       }
     }
   }
@@ -538,7 +538,7 @@ export default {
       }
 
       &:hover {
-        color: #007eff;
+        color: $main-color;
         background: #f6fbff;
       }
 
@@ -626,7 +626,7 @@ export default {
 
       .tag {
         margin-right: 8px;
-        color: #007eff;
+        color: $main-color;
         background-color: #f9f9f9;
         border: 0;
       }
@@ -676,7 +676,7 @@ export default {
   margin: 5px 0;
 
   .url {
-    color: #007eff;
+    color: $main-color;
     text-decoration: underline;
   }
 }
diff --git a/src/pages/station/list/index.vue b/src/pages/station/list/index.vue
index f5f526d..69fac7f 100644
--- a/src/pages/station/list/index.vue
+++ b/src/pages/station/list/index.vue
@@ -195,8 +195,8 @@ export default {
     cursor: pointer;
 
     &.active {
-      color: #007eff;
-      border-color: #007eff;
+      color: $main-color;
+      border-color: $main-color;
     }
   }
 }
diff --git a/src/pages/station/preview/index.vue b/src/pages/station/preview/index.vue
index eb4aaf1..7c698ef 100644
--- a/src/pages/station/preview/index.vue
+++ b/src/pages/station/preview/index.vue
@@ -1332,7 +1332,7 @@ $height: 700px;
 
   .point {
     font-weight: 600;
-    color: #9278ff;
+    color: $main-color;
   }
 
   .none {
@@ -1367,7 +1367,7 @@ $height: 700px;
 
     &:hover {
       span {
-        color: #007eff;
+        color: $main-color;
       }
     }
 
diff --git a/src/pages/system/list/staffSide.vue b/src/pages/system/list/staffSide.vue
index 9da7660..32b6e6d 100644
--- a/src/pages/system/list/staffSide.vue
+++ b/src/pages/system/list/staffSide.vue
@@ -2,88 +2,51 @@
   <div>
     <div>
       <div class="flex-between m-b-20">
-        <h6 class="p-title"
-            style="margin-bottom: 0">教师组织架构</h6>
-        <el-button type="text"
-                   @click="addMajor"
-                   v-auth="'教师管理:新增专业'">添加</el-button>
+        <h6 class="p-title" style="margin-bottom: 0">教师组织架构</h6>
+        <el-button type="text" @click="addMajor" v-auth="'教师管理:新增专业'">添加</el-button>
       </div>
-      <org-tree :data="orgList"
-                show-checkbox
-                default-expand-all
-                ref="orgTree"
-                node-key="id"
-                highlight-current
-                :expand-on-click-node="false"
-                @node-click="getSingle"
-                @check="getCheck"
-                :props="{children: 'children', label: 'label', isLeaf: 'leaf'}">
-        <span class="custom-tree-node"
-              slot-scope="{ node, data }">
+      <org-tree :data="orgList" show-checkbox default-expand-all ref="orgTree" node-key="id" highlight-current
+        :expand-on-click-node="false" @node-click="getSingle" @check="getCheck"
+        :props="{ children: 'children', label: 'label', isLeaf: 'leaf' }">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
           <span style="display: inline-block; margin-right: 20px">{{ node.label }}</span>
           <span>
-            <el-button v-auth="'教师管理:新增专业'"
-                       type="text"
-                       icon="el-icon-edit-outline"
-                       @click="() => handleEdit(node, data)">
+            <el-button v-auth="'教师管理:新增专业'" type="text" icon="el-icon-edit-outline"
+              @click="() => handleEdit(node, data)">
             </el-button>
-            <el-button v-auth="'教师管理:编辑专业'"
-                       v-if="node.level === 1"
-                       type="text"
-                       icon="el-icon-circle-plus-outline"
-                       @click="() => handleAdd(node, data)">
+            <el-button v-auth="'教师管理:编辑专业'" v-if="node.level === 1" type="text" icon="el-icon-circle-plus-outline"
+              @click="() => handleAdd(node, data)">
             </el-button>
-            <el-button v-auth="'教师管理:删除专业'"
-                       type="text"
-                       icon="el-icon-delete"
-                       @click="() => handleDel(node, data)">
+            <el-button v-auth="'教师管理:删除专业'" type="text" icon="el-icon-delete" @click="() => handleDel(node, data)">
             </el-button>
           </span>
         </span>
       </org-tree>
     </div>
 
-    <el-dialog :title="Form.staffArchitectureId ? '编辑部门' : '新增部门'"
-               :visible.sync="majorVisible"
-               width="24%"
-               center
-               @close="closeAdd"
-               :close-on-click-modal="false">
-      <el-form ref="Form"
-               :model="Form"
-               :rules="rules">
+    <el-dialog :title="Form.staffArchitectureId ? '编辑部门' : '新增部门'" :visible.sync="majorVisible" width="24%" center
+      @close="closeAdd" :close-on-click-modal="false">
+      <el-form ref="Form" :model="Form" :rules="rules">
         <el-form-item prop="staffArchitectureName">
-          <el-input placeholder="请输入部门名称"
-                    v-model="Form.staffArchitectureName"></el-input>
+          <el-input placeholder="请输入部门名称" v-model="Form.staffArchitectureName"></el-input>
         </el-form-item>
       </el-form>
-      <span slot="footer"
-            class="dialog-footer">
+      <span slot="footer" class="dialog-footer">
         <el-button @click="majorVisible = false">取 消</el-button>
-        <el-button type="primary"
-                   @click="sure('Form')">确 定</el-button>
+        <el-button type="primary" @click="sure('Form')">确 定</el-button>
       </span>
     </el-dialog>
 
-    <el-dialog :title="Form.gradeId ? '编辑部门' : '新增部门'"
-               :visible.sync="depVisible"
-               width="24%"
-               center
-               @close="closeAdd"
-               :close-on-click-modal="false">
-      <el-form ref="Form1"
-               :model="Form"
-               :rules="rules">
+    <el-dialog :title="Form.gradeId ? '编辑部门' : '新增部门'" :visible.sync="depVisible" width="24%" center @close="closeAdd"
+      :close-on-click-modal="false">
+      <el-form ref="Form1" :model="Form" :rules="rules">
         <el-form-item prop="gradeName">
-          <el-input placeholder="请输入部门名称"
-                    v-model="Form.gradeName"></el-input>
+          <el-input placeholder="请输入部门名称" v-model="Form.gradeName"></el-input>
         </el-form-item>
       </el-form>
-      <span slot="footer"
-            class="dialog-footer">
+      <span slot="footer" class="dialog-footer">
         <el-button @click="depVisible = false">取 消</el-button>
-        <el-button type="primary"
-                   @click="sureDepartment('Form1')">确 定</el-button>
+        <el-button type="primary" @click="sureDepartment('Form1')">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -309,56 +272,56 @@ export default {
 </script>
 <style scoped>
 .side_view {
-    height: 800px;
-    padding: 40px 20px;
-    background-color: #fff;
+  height: 800px;
+  padding: 40px 20px;
+  background-color: #fff;
 }
 
 .side_icon {
-    text-align: right;
+  text-align: right;
 }
 
 .side_icon i {
-    cursor: pointer;
-    font-size: 20px;
-    color: #9278ff;
+  cursor: pointer;
+  font-size: 20px;
+  color: $main-color;
 }
 
 .side_tree {
-    width: 100%;
-    font-size: 14px;
-    color: #333;
+  width: 100%;
+  font-size: 14px;
+  color: #333;
 }
 
 .side_tree i {
-    color: #9278ff;
-    margin-left: 10px;
+  color: $main-color;
+  margin-left: 10px;
 }
 
 .fir_back {
-    width: 100%;
-    padding: 15px 0;
-    background: rgba(255, 255, 255, 1);
-    /* box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); */
-    border-radius: 10px;
-    text-align: left;
+  width: 100%;
+  padding: 15px 0;
+  background: rgba(255, 255, 255, 1);
+  /* box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); */
+  border-radius: 10px;
+  text-align: left;
 }
 
 .fir_back:first-child {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .fir_back:hover {
-    box-shadow: 1px 14px 29px 0px rgba(138, 97, 250, 0.19);
-    cursor: pointer;
+  box-shadow: 1px 14px 29px 0px rgba(138, 97, 250, 0.19);
+  cursor: pointer;
 }
 
 .fir_back span {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 .two_active {
-    color: #9278ff;
+  color: $main-color;
 }
 
 /* .two_active:hover{
@@ -366,49 +329,49 @@ export default {
     cursor:pointer;
 } */
 .two_back:hover {
-    cursor: pointer;
-    color: #9278ff;
+  cursor: pointer;
+  color: $main-color;
 }
 
 .mar_top {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .back_active {
-    box-shadow: 1px 14px 29px 0px rgba(138, 97, 250, 0.19);
+  box-shadow: 1px 14px 29px 0px rgba(138, 97, 250, 0.19);
 }
 
 .bor_lef {
-    padding: 20px 0 0 0;
-    margin-left: 40px;
+  padding: 20px 0 0 0;
+  margin-left: 40px;
 }
 
 .three_lef {
-    margin-left: 60px;
-    padding: 20px 0;
+  margin-left: 60px;
+  padding: 20px 0;
 }
 
 .three_text {
-    font-size: 14px;
-    margin-top: 10px;
+  font-size: 14px;
+  margin-top: 10px;
 }
 
 .teacher_tab {
-    margin-left: 20px;
+  margin-left: 20px;
 }
 
 .icon_select:before {
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .list-enter-active,
 .list-leave-active {
-    transition: all 1s;
+  transition: all 1s;
 }
 
 .list-enter,
 .list-leave-to {
-    opacity: 0;
-    transform: translateY(-30px);
+  opacity: 0;
+  transform: translateY(-30px);
 }
 </style>
diff --git a/src/styles/default/index.scss b/src/styles/default/index.scss
index fc9ca34..950f41e 100644
--- a/src/styles/default/index.scss
+++ b/src/styles/default/index.scss
@@ -1,6 +1,6 @@
 /* 改变主题色变量 */
 
-$--color-primary: #9278FF;
+$--color-primary: #062c87;
 
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
diff --git a/src/styles/var.scss b/src/styles/var.scss
index 6781db1..3f57beb 100644
--- a/src/styles/var.scss
+++ b/src/styles/var.scss
@@ -1,4 +1,4 @@
-$main-color: #9278FF;
+$main-color: #062c87;
 $max-width: 1440px;
 $min-width: 1280px;