build: 看板学生页面与404页面样式

src/assets/icons/compare.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687312779365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1182" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M245.76 0h245.76l491.52 532.48-450.56 491.52H286.72l450.56-491.52zM40.96 163.84h163.84l327.68 368.64-327.68 327.68H40.96l368.64-327.68z" fill="#EC482D" p-id="1183"></path></svg>

src/components/Breadcrumb/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <el-breadcrumb class="h-[70px] flex items-center">
+  <el-breadcrumb
+    class="h-[70px] flex items-center"
+    :separator-icon="ArrowRight"
+  >
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
         <span
@@ -21,6 +24,7 @@ import { onBeforeMount, ref, watch } from "vue";
 import { useRoute, RouteLocationMatched } from "vue-router";
 import { compile } from "path-to-regexp";
 import router from "@/router";
+import { ArrowRight } from "@element-plus/icons-vue";
 
 const currentRoute = useRoute();
 const pathCompile = (path: string) => {

src/layout/components/Sidebar/SidebarItem.vue

@@ -85,10 +85,13 @@ function addActiveClass(routePath) {
   document.querySelectorAll(".el-menu-item").forEach((item) => {
     const pathBase = item.attributes["mack"].value.split("/")[1];
     if (currentBase == pathBase) {
-      if (document.querySelector(".el-menu-item.is-active")) {
-        document
-          .querySelector(".el-menu-item.is-active")
-          .classList.remove("is-active");
+      const active = document.querySelectorAll(".el-menu-item.is-active");
+      if (active && active.length) {
+        active.forEach((a) => {
+          if (a) {
+            a.classList.remove("is-active");
+          }
+        });
       }
       item.classList.add("is-active");
       //console.log(currentBase, "is-active current路由");
@@ -98,7 +101,7 @@ function addActiveClass(routePath) {
 }
 
 router.afterEach((to, from) => {
-  //console.log(to.fullPath, "路由变动");
+  //console.log(from.fullPath, to.fullPath, "路由变动");
   setTimeout(() => {
     addActiveClass(to.fullPath);
   }, 100);

src/views/error/401.vue

@@ -1,109 +0,0 @@
-<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
-<script lang="ts">
-export default {
-  name: "Page401",
-};
-</script>
-
-<script setup lang="ts">
-import { reactive, toRefs } from "vue";
-import { useRouter } from "vue-router";
-
-const state = reactive({
-  errGif: new URL(`../../assets/401_images/401.gif`, import.meta.url).href,
-  ewizardClap:
-    "https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646",
-  dialogVisible: false,
-});
-
-const { errGif, ewizardClap, dialogVisible } = toRefs(state);
-
-const router = useRouter();
-
-function back() {
-  router.back();
-}
-</script>
-
-<template>
-  <div class="errPage-container">
-    <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
-      返回
-    </el-button>
-    <el-row>
-      <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">Oops!</h1>
-        <h2>你没有权限去该页面</h2>
-        <h6>如有不满请联系你领导</h6>
-        <ul class="list-unstyled">
-          <li>或者你可以去:</li>
-          <li class="link-type">
-            <router-link to="/dashboard"> 回首页 </router-link>
-          </li>
-          <li>
-            <a href="#" @click.prevent="dialogVisible = true">点我看图</a>
-          </li>
-        </ul>
-      </el-col>
-      <el-col :span="12">
-        <img
-          :src="errGif"
-          width="313"
-          height="428"
-          alt="Girl has dropped her ice cream."
-        />
-      </el-col>
-    </el-row>
-    <el-dialog v-model="dialogVisible" title="随便看">
-      <img :src="ewizardClap" class="pan-img" />
-    </el-dialog>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.errPage-container {
-  width: 800px;
-  max-width: 100%;
-  margin: 100px auto;
-
-  .pan-back-btn {
-    color: #fff;
-    background: #008489;
-    border: none !important;
-  }
-
-  .pan-gif {
-    display: block;
-    margin: 0 auto;
-  }
-
-  .pan-img {
-    display: block;
-    width: 100%;
-    margin: 0 auto;
-  }
-
-  .text-jumbo {
-    font-size: 60px;
-    font-weight: 700;
-    color: #484848;
-  }
-
-  .list-unstyled {
-    font-size: 14px;
-
-    li {
-      padding-bottom: 5px;
-    }
-
-    a {
-      color: #008489;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-</style>

src/views/error/404.vue

@@ -1,280 +1,31 @@
-<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
 <script lang="ts">
 export default {
   name: "Page404",
 };
 </script>
 
-<script setup lang="ts">
-function message() {
-  return "The webmaster said that you can not enter this page...";
-}
-</script>
-
 <template>
-  <div class="wscn-http404-container">
-    <div class="wscn-http404">
-      <div class="pic-404">
-        <img
-          class="pic-404__parent"
-          src="@/assets/404_images/404.png"
-          alt="404"
-        />
-        <img
-          class="pic-404__child left"
-          src="@/assets/404_images/404_cloud.png"
-          alt="404"
-        />
-        <img
-          class="pic-404__child mid"
-          src="@/assets/404_images/404_cloud.png"
-          alt="404"
-        />
-        <img
-          class="pic-404__child right"
-          src="@/assets/404_images/404_cloud.png"
-          alt="404"
-        />
-      </div>
-      <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">
-          All rights reserved
-          <a
-            style="color: #20a0ff"
-            href="https://wallstreetcn.com"
-            target="_blank"
-            >wallstreetcn</a
-          >
-        </div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">
-          Please check that the URL you entered is correct, or click the button
-          below to return to the homepage.
-        </div>
-        <a href="" class="bullshit__return-home">Back to home</a>
-      </div>
-    </div>
+  <div class="page404-container">
+    <a href="/" class="return-home" title="Back to home"></a>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.wscn-http404-container {
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.wscn-http404 {
+.page404-container {
+  width: 100%;
+  height: 100%;
+  background: #1e2e64 url("../../assets/404/404.png") no-repeat;
+  background-size: 100% auto;
   position: relative;
-  width: 1200px;
-  padding: 0 50px;
-  overflow: hidden;
-
-  .pic-404 {
-    position: relative;
-    float: left;
-    width: 600px;
-    overflow: hidden;
-
-    &__parent {
-      width: 100%;
-    }
-
-    &__child {
-      position: absolute;
-
-      &.left {
-        top: 17px;
-        left: 220px;
-        width: 80px;
-        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-delay: 1s;
-        animation-fill-mode: forwards;
-      }
-
-      &.mid {
-        top: 10px;
-        left: 420px;
-        width: 46px;
-        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-delay: 1.2s;
-        animation-fill-mode: forwards;
-      }
-
-      &.right {
-        top: 100px;
-        left: 500px;
-        width: 62px;
-        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-delay: 1s;
-        animation-fill-mode: forwards;
-      }
-
-      @keyframes cloudLeft {
-        0% {
-          top: 17px;
-          left: 220px;
-          opacity: 0;
-        }
-
-        20% {
-          top: 33px;
-          left: 188px;
-          opacity: 1;
-        }
-
-        80% {
-          top: 81px;
-          left: 92px;
-          opacity: 1;
-        }
-
-        100% {
-          top: 97px;
-          left: 60px;
-          opacity: 0;
-        }
-      }
-
-      @keyframes cloudMid {
-        0% {
-          top: 10px;
-          left: 420px;
-          opacity: 0;
-        }
-
-        20% {
-          top: 40px;
-          left: 360px;
-          opacity: 1;
-        }
-
-        70% {
-          top: 130px;
-          left: 180px;
-          opacity: 1;
-        }
-
-        100% {
-          top: 160px;
-          left: 120px;
-          opacity: 0;
-        }
-      }
-
-      @keyframes cloudRight {
-        0% {
-          top: 100px;
-          left: 500px;
-          opacity: 0;
-        }
-
-        20% {
-          top: 120px;
-          left: 460px;
-          opacity: 1;
-        }
-
-        80% {
-          top: 180px;
-          left: 340px;
-          opacity: 1;
-        }
-
-        100% {
-          top: 200px;
-          left: 300px;
-          opacity: 0;
-        }
-      }
-    }
-  }
-
-  .bullshit {
-    position: relative;
-    float: left;
-    width: 300px;
-    padding: 30px 0;
-    overflow: hidden;
-
-    &__oops {
-      margin-bottom: 20px;
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 40px;
-      color: #1482f0;
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;
-    }
-
-    &__headline {
-      margin-bottom: 10px;
-      font-size: 20px;
-      font-weight: bold;
-      line-height: 24px;
-      color: #222;
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
-    }
-
-    &__info {
-      margin-bottom: 30px;
-      font-size: 13px;
-      line-height: 21px;
-      color: grey;
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.2s;
-      animation-fill-mode: forwards;
-    }
-
-    &__return-home {
-      display: block;
-      float: left;
-      width: 110px;
-      height: 36px;
-      font-size: 14px;
-      line-height: 36px;
-      color: #fff;
-      text-align: center;
-      cursor: pointer;
-      background: #1482f0;
-      border-radius: 100px;
-      opacity: 0;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.3s;
-      animation-fill-mode: forwards;
-    }
-
-    @keyframes slideUp {
-      0% {
-        opacity: 0;
-        transform: translateY(60px);
-      }
-
-      100% {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
+  .return-home {
+    display: block;
+    width: 210px;
+    height: 60px;
+    background: url("../../assets/404/back.png") no-repeat;
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    margin-left: -100px;
   }
 }
 </style>

src/views/student/result.vue

@@ -10,6 +10,7 @@ import { useUserStore } from "@/store/modules/user";
 import RadarChart from "@/views/base-charts/RadarChart.vue";
 import CircleChart from "@/views/base-charts/CircleChart.vue";
 import DoubleChart from "@/views/base-charts/DoubleChart.vue";
+import SvgIcon from "@/components/SvgIcon/index.vue";
 const userStore = useUserStore();
 watch(
   () => userStore.schoolId,
@@ -105,6 +106,139 @@ watch(
         </div>
       </el-col>
     </el-row>
+
+    <div class="note-box">
+      <div class="note-title">专注力脑电维度数据分析</div>
+      <el-row :gutter="15">
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="box-card">
+            <div class="tit">专注力平均值</div>
+            <el-row class="compare">
+              <el-col :span="11">
+                <p>训练前</p>
+                <div class="star s1"></div>
+                <div class="status">重度不足</div>
+              </el-col>
+              <el-col :span="2">
+                <svg-icon icon-class="compare" color="#ec482d" size="26px" />
+              </el-col>
+              <el-col :span="11">
+                <p>训练后</p>
+                <div class="star s2"></div>
+                <div class="status">中等不足</div>
+              </el-col>
+            </el-row>
+            <p class="content">
+              通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+            </p>
+            <p class="note">专注力平均值指16次课程训练的专注力平均水平</p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="box-card">
+            <div class="tit">高专注力占比</div>
+            <el-row class="compare">
+              <el-col :span="11">
+                <p>训练前</p>
+                <div class="star s2"></div>
+                <div class="status">中等不足</div>
+              </el-col>
+              <el-col :span="2">
+                <svg-icon icon-class="compare" color="#ec482d" size="26px" />
+              </el-col>
+              <el-col :span="11">
+                <p>训练后</p>
+                <div class="star s3"></div>
+                <div class="status">轻度不足</div>
+              </el-col>
+            </el-row>
+            <p class="content">
+              在进行学习和生活任务时，需要主观意志的努力，此时脑电静息电位会提高，专注度也会显示为60分以上，因此，将专注力60分以上定义为高专注区间，这代表高专注区间在整次训练中的占比。
+            </p>
+            <p class="note">
+              高专注力占比指大于60分的高专注值在16次课程训练中的占比均值
+            </p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="box-card">
+            <div class="tit">专注力稳定度</div>
+            <el-row class="compare">
+              <el-col :span="11">
+                <p>训练前</p>
+                <div class="star s3"></div>
+                <div class="status">轻度不足</div>
+              </el-col>
+              <el-col :span="2">
+                <svg-icon icon-class="compare" color="#ec482d" size="26px" />
+              </el-col>
+              <el-col :span="11">
+                <p>训练后</p>
+                <div class="star s4"></div>
+                <div class="status">良好</div>
+              </el-col>
+            </el-row>
+            <p class="content">
+              在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
+            </p>
+            <p class="note">专注力稳定度指在训练过程中，专注值的离散程度。</p>
+          </div>
+        </el-col>
+
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="box-card">
+            <div class="tit">专注唤醒效率</div>
+            <el-row class="compare">
+              <el-col :span="11">
+                <p>训练前</p>
+                <div class="star s4"></div>
+                <div class="status">良好</div>
+              </el-col>
+              <el-col :span="2">
+                <svg-icon icon-class="compare" color="#ec482d" size="26px" />
+              </el-col>
+              <el-col :span="11">
+                <p>训练后</p>
+                <div class="star s5"></div>
+                <div class="status">优秀</div>
+              </el-col>
+            </el-row>
+            <p class="content">
+              通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+            </p>
+            <p class="note">
+              专注唤醒效率指从训练开始时专注值达到60所需时间效率。
+            </p>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8">
+          <div class="box-card">
+            <div class="tit">整体和谐度</div>
+            <el-row class="compare">
+              <el-col :span="11">
+                <p>训练前</p>
+                <div class="star s1"></div>
+                <div class="status">重度不足</div>
+              </el-col>
+              <el-col :span="2">
+                <svg-icon icon-class="compare" color="#ec482d" size="26px" />
+              </el-col>
+              <el-col :span="11">
+                <p>训练后</p>
+                <div class="star s5"></div>
+                <div class="status">优秀</div>
+              </el-col>
+            </el-row>
+            <p class="content">
+              既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
+            </p>
+            <p class="note">
+              整体和谐度指在专注训练过程中对于目标压力的管理水平和情绪稳定水平。
+            </p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
@@ -162,4 +296,71 @@ watch(
     }
   }
 }
+.note-box {
+  .note-title {
+    height: 54px;
+    line-height: 54px;
+    font-size: 18px;
+    color: #09132e;
+  }
+  .box-card {
+    padding: 15px 34px;
+    position: relative;
+    margin-bottom: 15px;
+    .tit {
+      color: #4284f2;
+      margin-bottom: 20px;
+    }
+    p {
+      line-height: 28px;
+      color: #686d6d;
+      font-size: 14px;
+      margin: 0;
+    }
+    .compare {
+      text-align: center;
+      .svg-icon {
+        margin-top: 38px;
+      }
+      .star {
+        width: 162px;
+        height: 24px;
+        margin: 10px auto;
+        background: url("../../assets/student/stars.png") no-repeat;
+        background-position-x: 0;
+        &.s1 {
+          background-position-y: 0;
+        }
+        &.s2 {
+          background-position-y: -40px;
+        }
+        &.s3 {
+          background-position-y: -80px;
+        }
+        &.s4 {
+          background-position-y: -120px;
+        }
+        &.s5 {
+          background-position-y: -160px;
+        }
+      }
+      .status {
+        height: 42px;
+        line-height: 42px;
+        white-space: nowrap;
+        font-size: 18px;
+        font-weight: bold;
+        color: #00449b;
+        margin-bottom: 12px;
+      }
+    }
+    .content {
+      height: 150px;
+    }
+    .note {
+      position: absolute;
+      bottom: 15px;
+    }
+  }
+}
 </style>