下载页更新

pages/download/App.vue

@@ -1,20 +1,196 @@
 <template>
   <div class="app download">
-    <div class="download-bg"></div>
-    <div class="download-body">
-      <div class="download-content">
-        <div class="school-logo">
-          <img :src="info.logo" :alt="info.name" />
+    <div class="download-header">
+      <div class="download-header-body">
+        <img class="download-logo" :src="info.logo" :alt="info.name" />
+      </div>
+    </div>
+    <div class="download-info">
+      <div class="download-info-body">
+        <h1 class="download-title">在线考试客户端下载</h1>
+        <p class="download-desc">让考试更诚信，让监考更轻松</p>
+        <div v-if="info.packagePath" class="download-action">
+          <div class="download-btn" @click="toDownload">客户端下载</div>
+          <div class="download-qrcode">
+            <img src="./assets/docImgs/app-qr.png" alt="监考APP下载" />
+            <p>监考APP下载</p>
+          </div>
         </div>
-        <div class="download-logo">
-          <img src="./assets/logo.png" alt="客户端" />
+      </div>
+    </div>
+    <div class="download-qa">
+      <div class="download-qa-body">
+        <div class="download-qa-menu">
+          <el-menu
+            active-text-color="rgba(1, 115, 255, 1)"
+            text-color="rgba(32, 43, 75, 1)"
+            :default-active="curMenu.id"
+            unique-opened
+            @select="handleSelect"
+          >
+            <el-submenu v-for="menu in menus" :key="menu.id" :index="menu.id">
+              <template slot="title">
+                <i :class="['icon', menu.icon]"></i>
+                <span>{{ menu.title }}</span>
+              </template>
+              <el-menu-item
+                v-for="(nav, nindex) in menu.children"
+                :key="nav.id"
+                :index="nav.id"
+              >
+                {{ nindex + 1 }}.{{ nav.title }}
+              </el-menu-item>
+            </el-submenu>
+          </el-menu>
         </div>
-        <h1 class="download-title">在线考试客户端</h1>
-        <p v-if="info.version" class="download-version">
-          版本号：{{ info.version.name }}
-        </p>
-        <div v-if="info.packagePath" class="btn-primary" @click="toDownload">
-          点击下载
+        <div class="download-qa-texts">
+          <div class="download-qa-title">{{ curMenu.title }}</div>
+          <div
+            v-if="curMenu.desc && curMenu.desc.length"
+            class="download-qa-content"
+          >
+            <p v-for="(cont, index) in curMenu.desc" :key="index">{{ cont }}</p>
+          </div>
+          <!-- 1 -->
+          <div v-if="curMenu.id === '1-2'" class="download-qa-content">
+            <p><img src="./assets/docImgs/1-2-1.png" alt="1-2-1" /></p>
+            <p>
+              这是因为系统默认安装在d盘，但考生电脑没有D盘导致，可以让他选择安装在其他盘符。具体操作如下：
+            </p>
+            <p><img src="./assets/docImgs/1-2-2.png" alt="1-2-2" /></p>
+          </div>
+          <div v-if="curMenu.id === '1-3'" class="download-qa-content">
+            <p><img src="./assets/docImgs/1-3-1.png" alt="1-3-1" /></p>
+            <p>
+              网上下载VC合集，安装完成后，再打开程序，一般都能解决。如果还是不行请按照<a
+                href="https://www.jb51.net/dll/72355.html"
+                target="_block"
+                >https://www.jb51.net/dll/72355.html</a
+              >
+              网页的说明处理
+            </p>
+          </div>
+          <div v-if="curMenu.id === '1-4'" class="download-qa-content">
+            <p><img src="./assets/docImgs/1-4-1.png" alt="1-4-1" /></p>
+            <p>
+              检查电脑时区是否是中国时区utc+8，若时区正确，则电脑操作系统的字库有问题，需要重新安装操作系统或更换电脑。
+            </p>
+            <p>
+              检查电脑时区方法可以百度，若win10操作系统也可以按下图所示操作：
+            </p>
+            <p><img src="./assets/docImgs/1-4-2.png" alt="1-4-2" /></p>
+            <p>
+              若更改时区后还是显示乱码，则是电脑操作系统字库缺失文件导致。需要重装电脑操作系统或更换电脑。
+            </p>
+          </div>
+          <!-- 2 -->
+          <div v-if="curMenu.id === '2-1'" class="download-qa-content">
+            <p><img src="./assets/docImgs/2-1-1.png" alt="2-1-1" /></p>
+            <p>
+              考试系统不允许通过无线或有线的方式连接第二块屏幕或投屏，若有连接，需要断开后再打开考试系统；
+            </p>
+            <p>
+              若没有以上操作，可以将电脑屏幕分辨率调整为1920*1080后，再打开考试系统。
+            </p>
+          </div>
+          <div v-if="curMenu.id === '2-2'" class="download-qa-content">
+            <p>
+              右键“我的电脑”，点击属性：
+            </p>
+            <p><img src="./assets/docImgs/2-2-1.png" alt="2-2-1" /></p>
+            <p>
+              打开属性界面，点击“关于”界面的高级系统设置：
+            </p>
+            <p><img src="./assets/docImgs/2-2-2.png" alt="2-2-2" /></p>
+            <p>
+              选择远程栏，取消勾选。
+            </p>
+            <p><img src="./assets/docImgs/2-2-3.png" alt="2-2-3" /></p>
+          </div>
+          <div v-if="curMenu.id === '2-3'" class="download-qa-content">
+            <p>
+              协通是个远程软件，可以退出或卸载该软件，也可以在进程里(任务管理器-进程)关闭XT或协通开头的进程。
+            </p>
+            <p>
+              如何打开任务管理-进程可以百度，也可以参照下图所示：
+            </p>
+            <p><img src="./assets/docImgs/2-3-1.png" alt="2-3-1" /></p>
+            <p>打开任务管理-进程，列表为空，需要点击详细信息。如下图所示：</p>
+            <p><img src="./assets/docImgs/2-3-2.png" alt="2-3-2" /></p>
+          </div>
+          <div v-if="curMenu.id === '2-5'" class="download-qa-content">
+            <p>
+              该问题是考生电脑与服务器网络不畅通导致（注：可以上网不代表网络稳定畅通），可以重启路由器和光猫设备再登录，或者试试以下方法：
+            </p>
+            <ul>
+              <li>Cmd中运行下列命令刷新DNS：ipconfig/flushdns</li>
+              <li>修改首选DNS为阿里公共DNS：223.5.5.5</li>
+            </ul>
+            <p>若设置后还是不行，则需要考生自行解决网络问题后再考试</p>
+          </div>
+          <!-- 3 -->
+          <div v-if="curMenu.id === '3-5'" class="download-qa-content">
+            <p><img src="./assets/docImgs/3-5-1.png" alt="3-5-1" /></p>
+            <p>
+              这是考生电脑时间和时区的问题，有可能考生电脑和北京时间不一致，或者时区不是中国时区，是美国时区阿富汗时区之类的，调整后再登录。
+            </p>
+          </div>
+          <!-- 4 -->
+          <div v-if="curMenu.id === '4-1'" class="download-qa-content">
+            <p><img src="./assets/docImgs/4-1-1.png" alt="4-1-1" /></p>
+            <p>
+              电脑摄像头未开启，需要找到键盘上摄像头的开关，或者看看有没有其他物理开关。联想的电脑可以按下f8键试试。
+            </p>
+          </div>
+          <div v-if="curMenu.id === '4-2'" class="download-qa-content">
+            <p><img src="./assets/docImgs/4-2-1.png" alt="4-2-1" /></p>
+            <p>
+              将电脑上的360杀毒软件和360安全卫士退出后，再登录考试客户端。
+            </p>
+          </div>
+          <div v-if="curMenu.id === '4-3'" class="download-qa-content">
+            <p><img src="./assets/docImgs/4-3-1.png" alt="4-3-1" /></p>
+            <p><img src="./assets/docImgs/4-3-2.png" alt="4-3-2" /></p>
+            <p>
+              大多数杀毒软件会禁止摄像头运行，将电脑上杀毒软件、360安全卫士、电脑管家等退出，再登录试试
+            </p>
+            <p>若还是显示黑色或灰色，可以按下图方法处理下：</p>
+            <p><img src="./assets/docImgs/4-3-3.png" alt="4-3-3" /></p>
+            <p>
+              处理后还是不行，则可能是电脑和摄像头兼容性的问题，建议更换电脑。
+            </p>
+          </div>
+          <div v-if="curMenu.id === '4-5'" class="download-qa-content">
+            <p><img src="./assets/docImgs/4-5-1.png" alt="4-5-1" /></p>
+            <p>
+              首先此提示不会影响成绩；出现提示时可以适当进行坐姿调整，保持人脸正对摄像头，完整清晰的出现在摄像头的范围内，面部光线充足，背后无强光源，右下角监控中人脸清晰完整。如果有带眼镜也可能导致误报，误报不影响成绩。
+            </p>
+          </div>
+          <div v-if="curMenu.id === '4-7'" class="download-qa-content">
+            <p><img src="./assets/docImgs/4-7-1.png" alt="4-7-1" /></p>
+            <p>
+              修改电脑显示设置中“缩放与布局”，将更改文本、应用等项目的大小修改100%。
+            </p>
+            <p>WIN10操作系统为如下方式：</p>
+            <p><img src="./assets/docImgs/4-7-2.png" alt="4-7-2" /></p>
+            <p>WIN7操作系统为如下方式：</p>
+            <p><img src="./assets/docImgs/4-7-3.png" alt="4-7-3" /></p>
+          </div>
+          <div v-if="curMenu.id === '4-8'" class="download-qa-content">
+            <p><img src="./assets/docImgs/4-8-1.png" alt="4-8-1" /></p>
+          </div>
+          <!-- 5 -->
+          <div v-if="curMenu.id === '5-1'" class="download-qa-content">
+            <p>
+              整场考试答题过程中，需要将整个人脸保持在摄像头范围内（不要带口罩或遮挡人脸）。考生需要时刻关注并确认电脑摄像头画面中的自己的人脸完整，摄像头工作正常（电脑右下角）。错误示例见下图：
+            </p>
+            <p>
+              <img src="./assets/docImgs/5-1-1.png" alt="5-1-1" />
+              <img src="./assets/docImgs/5-1-2.png" alt="5-1-2" />
+              <img src="./assets/docImgs/5-1-3.png" alt="5-1-3" />
+              <img src="./assets/docImgs/5-1-4.png" alt="5-1-4" />
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -23,6 +199,7 @@
 
 <script>
 import { getSchoolInfo } from "./api";
+import { menus } from "./constant/menu";
 
 function getParam(paramName) {
   const hs = window.location.href.split(/\?|&/);
@@ -43,10 +220,16 @@ export default {
           name: "",
         },
       },
+      curMenu: {
+        id: "",
+        title: "",
+      },
+      menus,
     };
   },
   created() {
     this.getData();
+    this.handleSelect("1-1", ["1"]);
   },
   methods: {
     async getData() {
@@ -61,6 +244,13 @@ export default {
         this.$message.error("数据错误！");
       }
     },
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+      const parentId = keyPath[0];
+      const pmenu = this.menus.find((item) => item.id === parentId);
+      if (!pmenu) return;
+      this.curMenu = pmenu.children.find((item) => item.id === key);
+    },
     toDownload() {
       if (!this.info.packagePath) return;
       window.open(this.info.packagePath);

pages/download/assets/base.scss

@@ -1,72 +0,0 @@
-.download {
-  .download-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-size: cover;
-    background-image: url(./bg.png);
-  }
-
-  .download-body {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 600px;
-    transform: translate(-50%, -50%);
-    z-index: 99;
-    border: 6px solid rgba(0, 0, 0, 0.1);
-    border-radius: 20px;
-  }
-
-  .download-content {
-    background-color: #fff;
-    padding: 55px 56px 50px;
-    border-radius: 20px;
-    text-align: center;
-  }
-
-  .school-logo {
-    height: 60px;
-    position: relative;
-    margin-bottom: 60px;
-
-    > img {
-      display: block;
-      position: absolute;
-      margin: auto;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      max-height: 100%;
-      max-width: 100%;
-    }
-  }
-
-  .download-title {
-    font-size: 16px;
-    line-height: 30px;
-    margin: 0;
-  }
-  .download-version {
-    margin: 0 0 20px;
-  }
-}
-
-.btn-primary {
-  padding: 10px 15px;
-  font-size: 14px;
-  line-height: 1;
-  border-radius: 5px;
-  display: inline-block;
-  vertical-align: middle;
-  background-color: #1886fe;
-  color: #fff;
-  cursor: pointer;
-
-  &:hover {
-    background-color: mix(#fff, #1886fe, 20%);
-  }
-}

pages/download/assets/styles/base.scss

@@ -0,0 +1,350 @@
+$--font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+  "Microsoft YaHei", Arial, sans-serif;
+$--color-text-gray-4: #ccc !default;
+$--color-text-gray-3: #aaa !default;
+
+/* reset */
+body,
+div,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+p,
+tr,
+th,
+td,
+span,
+a,
+header,
+footer,
+i {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+li {
+  list-style: none;
+}
+em,
+i,
+u {
+  font-style: normal;
+}
+input {
+  outline: none;
+  border: none;
+  background: rgba(245, 245, 245, 1);
+  font-family: $--font-family;
+}
+input::-webkit-input-placeholder,
+input::-moz-placeholder,
+input:-ms-input-placeholder,
+input:-moz-placeholder {
+  font-size: 12px;
+  font-weight: bold;
+  color: $--color-text-gray-4;
+}
+button,
+textarea {
+  font-family: $--font-family;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+}
+fieldset,
+img {
+  border: 0;
+}
+abbr {
+  border: 0;
+  font-variant: normal;
+}
+a {
+  text-decoration: none;
+  color: inherit;
+}
+img {
+  vertical-align: middle;
+}
+
+/* common-style */
+input:-webkit-autofill {
+  box-shadow: 0 0 0 1000px white inset;
+}
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="number"]:focus,
+textarea:focus {
+  box-shadow: 0 0 0 1000px white inset;
+}
+
+/* browse style */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+::-webkit-scrollbar-button {
+  display: none;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background: #666;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+::-webkit-scrollbar-resizer {
+  background: transparent;
+}
+
+body {
+  font-family: $--font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 14px;
+  color: #202b4b;
+  background-color: #f0f4f9;
+}
+
+// page
+.download {
+  background: #f0f4f9;
+  &-header {
+    height: 64px;
+    padding: 16px;
+
+    &-body {
+      width: 1200px;
+      margin: 0 auto;
+      height: 100%;
+    }
+  }
+  &-logo {
+    max-height: 32px;
+    display: block;
+  }
+
+  &-info {
+    height: 440px;
+    background: linear-gradient(360deg, #02abff 0%, #0173ff 100%);
+    &-body {
+      width: 1200px;
+      height: 100%;
+      margin: 0 auto;
+      position: relative;
+      padding: 0 600px 0 115px;
+
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 458px;
+        height: 332px;
+        background-image: url(../images/body-bg.png);
+        background-size: 100% 100%;
+        top: 68px;
+        right: 115px;
+        z-index: 8;
+      }
+    }
+  }
+  &-title {
+    font-size: 48px;
+    font-weight: normal;
+    color: #ffffff;
+    line-height: 57px;
+    padding-top: 106px;
+    margin-bottom: 10px;
+  }
+  &-desc {
+    height: 17px;
+    font-size: 14px;
+    font-weight: normal;
+    color: #ffffff;
+    line-height: 17px;
+    letter-spacing: 1px;
+    margin-bottom: 42px;
+  }
+  &-action {
+    display: flex;
+    align-items: center;
+  }
+  &-btn {
+    padding: 14px 30px;
+    line-height: 1;
+    border-radius: 4px;
+    background: linear-gradient(270deg, #00c57e 0%, #00d488 100%);
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+
+    &:hover {
+      background: mix(#333, #00c57e, 5%);
+    }
+  }
+  &-qrcode {
+    width: 120px;
+    height: 120px;
+    border-radius: 4px;
+    border: 3px solid #fff;
+    margin-left: 40px;
+    position: relative;
+
+    > img {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    > p {
+      position: absolute;
+      height: 12px;
+      font-size: 12px;
+      line-height: 1;
+      text-align: center;
+      color: #ffffff;
+      left: 0;
+      right: 0;
+      bottom: -25px;
+    }
+  }
+  &-qa {
+    margin-bottom: 20px;
+    &-body {
+      width: 1200px;
+      margin: 0 auto;
+      padding-top: 20px;
+      display: flex;
+      justify-content: stretch;
+    }
+
+    &-menu {
+      width: 260px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      margin-right: 20px;
+
+      background: #ffffff;
+      border-radius: 4px;
+      padding: 30px 20px;
+
+      .el-menu {
+        border: none;
+      }
+      .el-submenu {
+        margin-bottom: 15px;
+      }
+      .el-menu-item {
+        font-size: 13px;
+        padding: 5px 10px !important;
+        line-height: 18px;
+        height: auto;
+        white-space: normal;
+        margin-bottom: 5px;
+      }
+      .el-submenu__title {
+        font-size: 14px;
+        padding: 5px 10px !important;
+        line-height: 20px;
+        height: auto;
+        white-space: normal;
+        font-weight: bold;
+      }
+      .icon {
+        margin-right: 8px;
+      }
+      .el-submenu__icon-arrow {
+        right: 10px;
+      }
+    }
+
+    &-texts {
+      flex-grow: 2;
+      background: #ffffff;
+      border-radius: 4px;
+      padding: 22px 30px;
+    }
+
+    &-title {
+      padding: 0 0 22px 30px;
+      border-bottom: 1px solid #f0f4f9;
+      position: relative;
+      line-height: 20px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #202b4b;
+      min-height: 42px;
+
+      &::before {
+        content: "";
+
+        display: block;
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background-image: url(../images/icon-question.png);
+        background-size: 100% 100%;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    &-content {
+      padding: 20px 0 0 30px;
+      position: relative;
+      font-size: 14px;
+      font-weight: normal;
+      color: #202b4b;
+      line-height: 24px;
+      min-height: 400px;
+
+      > p {
+        margin-bottom: 10px;
+      }
+      img {
+        max-width: 100%;
+        box-shadow: 0 0 5px #ccc;
+      }
+
+      a {
+        color: #0173ff;
+        margin: 0 5px;
+
+        &:hover {
+          color: mix(#000, #0173ff, 20%);
+        }
+      }
+
+      &::before {
+        content: "";
+
+        display: block;
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background-image: url(../images/icon-answer.png);
+        background-size: 100% 100%;
+        top: 24px;
+        left: 0;
+      }
+    }
+  }
+}

pages/download/assets/styles/icons.scss

@@ -0,0 +1,41 @@
+// icon
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  &-answer {
+    width: 20px;
+    height: 20px;
+    background-image: url(../images/icon-answer.png);
+  }
+  &-check {
+    background-image: url(../images/icon-check.png);
+  }
+  &-download {
+    background-image: url(../images/icon-download.png);
+  }
+  &-face {
+    background-image: url(../images/icon-face.png);
+  }
+  &-login {
+    background-image: url(../images/icon-login.png);
+  }
+  &-paper {
+    background-image: url(../images/icon-paper.png);
+  }
+  &-phone {
+    background-image: url(../images/icon-phone.png);
+  }
+  &-question {
+    width: 20px;
+    height: 20px;
+    background-image: url(../images/icon-question.png);
+  }
+  &-submit {
+    background-image: url(../images/icon-submit.png);
+  }
+}

pages/download/constant/menu.js

@@ -0,0 +1,216 @@
+export const menus = [
+  {
+    id: "1",
+    title: "下载及安装问题",
+    icon: "icon-download",
+    children: [
+      {
+        id: "1-1",
+        title: "考试系统安装对电脑有什么要求？",
+        desc: [
+          "考试程序支持win7及以上版本的windows系统（不支持苹果操作系统），；Intel i5（6代）及以上CPU；4G及以上内存；显示器分辨率推荐1280 x 800及以上，并且页面缩放选择100%；电脑摄像头100万像素或以上。",
+        ],
+      },
+      {
+        id: "1-2",
+        title:
+          "考试系统安装时报错，提示：您选择的驱动器或UNC共享不存在或不可访问。请另选一个。如何解决？",
+      },
+      {
+        id: "1-3",
+        title: "运行考试客户端后提示：计算机丢失或找不到XXXX.dll。如何解决？",
+      },
+      {
+        id: "1-4",
+        title: "安装完成后，运行考试客户端出现乱码情况，如何解决？",
+      },
+    ],
+  },
+  {
+    id: "2",
+    title: "系统环境检测问题",
+    icon: "icon-check",
+    children: [
+      {
+        id: "2-1",
+        title:
+          "运行考试客户端后提示：环境检测不通过；请检测是否开启分屏。如何解决？",
+      },
+      {
+        id: "2-2",
+        title:
+          "运行考试客户端后提示：环境检测不通过；请检测是否开启远程桌面。如何解决？",
+      },
+      {
+        id: "2-3",
+        title:
+          "运行考试客户端后提示：环境检测不通过；请检测是否开启协通。如何解决？",
+      },
+      {
+        id: "2-4",
+        title:
+          "运行考试客户端后提示：环境检测不通过；请检测是否开启向日葵、sunlogin、QQ、微信、wechat、dingtalk等。如何解决？",
+        desc: [
+          "在电脑进程里(任务管理器-进程)关闭考试系统提示的相关名称开头的所有进程。",
+          "将QQ卸载了，还会提示是否开启QQ，需要在电脑进程里(任务管理器-进程)关闭QQ和腾讯开头的所有进程",
+          "无法结束QQ电脑管家，可以在电脑右下角任务栏找到QQ电脑管家图标，右键退出。",
+        ],
+      },
+      {
+        id: "2-5",
+        title: "运行考试客户端后提示：环境检测不通过；网络连接不畅。如何解决？",
+      },
+    ],
+  },
+  {
+    id: "3",
+    title: "登录问题",
+    icon: "icon-login",
+    children: [
+      {
+        id: "3-1",
+        title: "考试系统如何登录？",
+        desc: ["登录账号为考生身份证号，默认密码为身份证号后六位。"],
+      },
+      {
+        id: "3-2",
+        title: "考生的身份证号码最后一位是字母，如何输入？",
+        desc: ["需要输入大写的字母。"],
+      },
+      {
+        id: "3-3",
+        title:
+          "为什么账号和密码确认输入正确，且考生未修改初始密码，系统提示账号和密码错误。如何解决？",
+        desc: ["系统中不存在该考生，请先和考试中心负责的老师确认下报考信息"],
+      },
+      {
+        id: "3-4",
+        title: "考生登录后，待考列表为空。如何解决？",
+        desc: [
+          "确认考生电脑时间是不是北京时间，时区是不是中国时区（utc+8时区）",
+          "若时间和时区都正确，但是待考列表还是空的，则该考生本次没有考试课程，请先和老师确认下报考信息",
+        ],
+      },
+      {
+        id: "3-5",
+        title:
+          "考生登录后，可以看到待考列表，但是进入考试按钮是灰色的，无法点击。如何解决？",
+      },
+    ],
+  },
+  {
+    id: "4",
+    title: "进入考试时人脸检测问题",
+    icon: "icon-face",
+    children: [
+      {
+        id: "4-1",
+        title:
+          "点击进入考试按钮后，在人脸检测环节摄像头画面显示，无法进行人脸识别，如何处理？",
+      },
+      {
+        id: "4-2",
+        title:
+          "点击进入考试按钮后，在人脸检测环节摄像头画面显示360摄像头保护，无法进行人脸识别，如何解决？",
+      },
+      {
+        id: "4-3",
+        title:
+          "点击进入考试按钮后，在人脸检测环节摄像头画面显示黑色或灰色，无法进行人脸识别，如何解决？",
+      },
+      {
+        id: "4-4",
+        title: "考生网络无问题、且摄像头调用也正常，但是登录时人脸比对不通过。",
+        desc: [
+          "原因：1、光线太暗或太亮。2、照片不带眼镜，本人带眼镜。3、本人与照片差异过大如果是照片问题，可以联系学校申请更换照片。",
+        ],
+      },
+      {
+        id: "4-5",
+        title: "考试界面提示“人脸多次检查不通过，请调整坐姿”。如何解决？",
+      },
+      {
+        id: "4-6",
+        title: "如果电话导致APP退出，怎么处理？",
+        desc: [
+          "如果电话导致APP退出，电脑端会提醒重新扫描二维码重连，可以重新打开APP扫码后摆放好第二机位，继续作答。如果没有及时处理会退出考试，多次退出考试会自动交卷。",
+          "建议设置呼叫转移，退出手机上登录的QQ，微信等通讯软件。",
+        ],
+      },
+      {
+        id: "4-7",
+        title: "考试界面显示不全，如何处理？",
+      },
+      {
+        id: "4-8",
+        title: "活体检测问题",
+      },
+    ],
+  },
+  {
+    id: "5",
+    title: "答题过程中的问题",
+    icon: "icon-paper",
+    children: [
+      {
+        id: "5-1",
+        title: "答题过程中，若提示请调整坐姿，诚信考试。如何处理？",
+      },
+      {
+        id: "5-2",
+        title: "答题过程中，若提示请独立完成考试。如何处理？",
+        desc: [
+          "整场考试答题过程中，考生电脑摄像头范围内不允许出现第二张人脸。",
+        ],
+      },
+      {
+        id: "5-3",
+        title:
+          "答题过程中，无法输入中文汉字，只能输入英文字母或无法键入中文汉字至答题框。如何处理？",
+        desc: [
+          "考试中输入法切换需要用快捷键来操作切换。shift、shift+空格、crtl+shift、crtl+空格、windows键+空格。这是操作切换输入法几个常见的热键。",
+          "或者强制重启电脑，先在外面把输入法快捷键切换的方法掌握好，或切换好了再登录接着考。",
+        ],
+      },
+    ],
+  },
+  {
+    id: "6",
+    title: "交卷问题",
+    icon: "icon-submit",
+    children: [
+      {
+        id: "6-1",
+        title: "交卷时，系统提示冻结时间内不允许交卷。如何解决？",
+        desc: [
+          "每场考试要求必须答题满30分钟才可交卷，考生可以查看倒计时，倒计时小于1小时则能提前交卷。",
+        ],
+      },
+      {
+        id: "6-2",
+        title:
+          "交卷时，系统提示：交卷中请稍后，并卡死在此界面或提示提交答案失败。如何解决？",
+        desc: [
+          "网络问题导致，考生需要长按电脑电源键，强制重启电脑后，解决好网络问题后，再次登录确认下是否交卷，或者重新交卷。",
+        ],
+      },
+    ],
+  },
+  {
+    id: "7",
+    title: "手机端问题",
+    icon: "icon-phone",
+    children: [
+      {
+        id: "7-1",
+        title: "手机监控提示网络异常，但没退出",
+        desc: ["检查网络是否阻塞"],
+      },
+      {
+        id: "7-2",
+        title: "APP扫描候考阶段的二维码后，提示监考开启失败。-1317错误码",
+        desc: ["重新安装APP，允许APP应用获取相应权限。"],
+      },
+    ],
+  },
+];

pages/download/main.js

@@ -1,6 +1,9 @@
 import Vue from "vue";
 import App from "./App.vue";
-import "./assets/base.scss";
+import "@/plugins/element.js";
+
+import "./assets/styles/base.scss";
+import "./assets/styles/icons.scss";
 
 Vue.config.productionTip = false;