build: "页面UI移动端兼容处理"

src/layout/admin.vue

@@ -65,7 +65,7 @@ function handleOutsideClick() {
     <div :class="{ hasTagsView: showTagsView }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
         <AdminNavbar />
-<!--        <tags-view v-if="showTagsView" />-->
+        <!--        <tags-view v-if="showTagsView" />-->
       </div>
 
       <!--主页面-->
@@ -81,14 +81,17 @@ function handleOutsideClick() {
     clear: both;
     content: "";
   }
+
   position: relative;
-	box-sizing: border-box;
+  box-sizing: border-box;
   width: 100%;
   min-width: 1900px;
   height: 100%;
-  &.mobile{
-		min-width: 750px;
-	}
+
+  &.mobile {
+    min-width: 750px;
+  }
+
   &.mobile.openSidebar {
     position: fixed;
     top: 0;
@@ -111,9 +114,9 @@ function handleOutsideClick() {
 .mobile .fixed-header {
   width: 100%;
 }
-.mobile .app-main{
-  padding-top: 70px;
-}
+//.mobile .app-main{
+//  padding-top: 70px;
+//}
 
 .drawer-bg {
   position: absolute;

src/views/dashboard/example.vue

@@ -26,61 +26,67 @@ watch(
         <span>示例学校：深圳市福田区惠文幼儿园</span>
       </div>
       <div class="content">
-        <p>学员数量：从2021年春季学期开始开展水母星球课程，迄今为止，共开展5个学期，每期2个班级，分为大班和中班。每个班级人数15-20人，共约为200人次开展专注力课程教学，本次从中随机抽取56人数据进行展示。</p>
-        <p>教师配置：2名/班，由幼儿园内部班主任教师担任，一名主教老师，一名助教老师。</p>
-				<p>上课形式：前三个环节组织集体上课训练，第四环节【脑电生物反馈】，会将小朋友分成2组，一组进行脑电反馈训练，另一组由助教老师组织进行【学习迁移训练】；约10分钟后交换。</p>
-				<img src="../../assets/example/hw01.jpg" alt="慧文幼儿园案例" />
-			</div>
-			<div class="result-title">
-				<el-row class="box-card">
-					<el-col :sm="8" :md="4">
-						<div class="l1">1次/周</div>
-						<div class="l2">上课频次</div>
-					</el-col>
-					<el-col :sm="8" :md="5">
-						<div class="l1">每学期16课时</div>
-						<div class="l2">上课课时</div>
-					</el-col>
-					<el-col :sm="8" :md="5">
-						<div class="l1">8套设备（自购）</div>
-						<div class="l2">设备配置</div>
-					</el-col>
-					<el-col :sm="12" :md="5">
-						<div class="l1">下午4：30开始</div>
-						<div class="l2">上课时间</div>
-					</el-col>
-					<el-col :sm="12" :md="5">
-						<div class="l1">30-40分钟不等</div>
-						<div class="l2">课时时长</div>
-					</el-col>
-				</el-row>
-			</div>
-			<!-- Echarts 图表 -->
-			<el-row :gutter="20">
-				<el-col :md="24" :lg="12" :xl="8">
-					<div class="charts-item">
-						<p class="title">学员专注力平均值整体对比分析</p>
-						<img src="../../assets/example/hw-c1.png" alt="">
-					</div>
-				</el-col>
-				<el-col :md="24" :lg="12" :xl="16">
-					<div class="charts-item">
-						<p class="title">学员专注力评分分级占比分析</p>
-						<el-row justify="space-between">
-							<el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
-								<div class="bar">
-									<img src="../../assets/example/hw-c2.png" alt="">
-								</div>
-							</el-col>
-							<el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
-								<div class="bar">
-									<img src="../../assets/example/hw-c3.png" alt="">
-								</div>
-							</el-col>
-						</el-row>
-					</div>
-				</el-col>
-			</el-row>
+        <p>
+          学员数量：从2021年春季学期开始开展水母星球课程，迄今为止，共开展5个学期，每期2个班级，分为大班和中班。每个班级人数15-20人，共约为200人次开展专注力课程教学，本次从中随机抽取56人数据进行展示。
+        </p>
+        <p>
+          教师配置：2名/班，由幼儿园内部班主任教师担任，一名主教老师，一名助教老师。
+        </p>
+        <p>
+          上课形式：前三个环节组织集体上课训练，第四环节【脑电生物反馈】，会将小朋友分成2组，一组进行脑电反馈训练，另一组由助教老师组织进行【学习迁移训练】；约10分钟后交换。
+        </p>
+        <img src="../../assets/example/hw01.jpg" alt="慧文幼儿园案例" />
+      </div>
+      <div class="result-title">
+        <el-row class="box-card">
+          <el-col :xs="8" :span="4">
+            <div class="l1">1次/周</div>
+            <div class="l2">上课频次</div>
+          </el-col>
+          <el-col :xs="8" :span="5">
+            <div class="l1">每学期16课时</div>
+            <div class="l2">上课课时</div>
+          </el-col>
+          <el-col :xs="8" :span="5">
+            <div class="l1">8套设备（自购）</div>
+            <div class="l2">设备配置</div>
+          </el-col>
+          <el-col :xs="12" :span="5">
+            <div class="l1">下午4：30开始</div>
+            <div class="l2">上课时间</div>
+          </el-col>
+          <el-col :xs="12" :span="5">
+            <div class="l1">30-40分钟不等</div>
+            <div class="l2">课时时长</div>
+          </el-col>
+        </el-row>
+      </div>
+      <!-- Echarts 图表 -->
+      <el-row :gutter="20">
+        <el-col :xs="24" :span="8">
+          <div class="charts-item">
+            <p class="title">学员专注力平均值整体对比分析</p>
+            <img src="../../assets/example/hw-c1.png" alt="" />
+          </div>
+        </el-col>
+        <el-col :xs="24" :span="16">
+          <div class="charts-item">
+            <p class="title">学员专注力评分分级占比分析</p>
+            <el-row justify="space-between">
+              <el-col :xs="24" :span="12">
+                <div class="bar">
+                  <img src="../../assets/example/hw-c2.png" alt="" />
+                </div>
+              </el-col>
+              <el-col :xs="24" :span="12">
+                <div class="bar">
+                  <img src="../../assets/example/hw-c3.png" alt="" />
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
     </div>
     <div class="example">
       <div class="title">
@@ -88,62 +94,68 @@ watch(
         <span>示例学校：深圳市福田区石厦幼儿园</span>
       </div>
       <div class="content">
-        <p>学员数量：从2021年秋季学期开始开展水母星球课程，迄今为止，共开展4个学期，每期2个班级，分为大班和中班。每个班级人数8-12人，共约为100人次开展专注力课程教学。次从中随机抽取18人数据进行展示。</p>
-        <p>教师配置：2名/班，主教老师由深圳职业技术大学毕业的专业外派教师担任；助教老师由幼儿园本园班主任担任。</p>
-				<p>上课形式：老师按照以下规则整体组织小朋友完成所有流程训练，【脑电生物反馈】训练不分组，没有用到教具的学生被要求在旁安静等待观摩。将【学习迁移训练】布置为家长作业任务课后完成，由家长在群内提交作业。</p>
-				<img src="../../assets/example/sx01.png" alt="石厦幼儿园案例" />
-				<img src="../../assets/example/sx02.png" alt="石厦幼儿园案例" />
-			</div>
-			<div class="result-title">
-				<el-row class="box-card">
-					<el-col :sm="8" :md="4">
-						<div class="l1">1次/周</div>
-						<div class="l2">上课频次</div>
-					</el-col>
-					<el-col :sm="8" :md="5">
-						<div class="l1">每学期16课时</div>
-						<div class="l2">上课课时</div>
-					</el-col>
-					<el-col :sm="8" :md="5">
-						<div class="l1">3套设备（合约）</div>
-						<div class="l2">设备配置</div>
-					</el-col>
-					<el-col :sm="12" :md="5">
-						<div class="l1">下午4：30开始</div>
-						<div class="l2">上课时间</div>
-					</el-col>
-					<el-col :sm="12" :md="5">
-						<div class="l1">40-50分钟不等</div>
-						<div class="l2">课时时长</div>
-					</el-col>
-				</el-row>
-			</div>
-			<!-- Echarts 图表 -->
-			<el-row :gutter="20">
-				<el-col :md="24" :lg="12" :xl="8">
-					<div class="charts-item">
-						<p class="title">学员专注力平均值整体对比分析</p>
-						<img src="../../assets/example/sx-c1.png" alt="">
-					</div>
-				</el-col>
-				<el-col :md="24" :lg="12" :xl="16">
-					<div class="charts-item">
-						<p class="title">学员专注力评分分级占比分析</p>
-						<el-row justify="space-between">
-							<el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
-								<div class="bar">
-									<img src="../../assets/example/sx-c2.png" alt="">
-								</div>
-							</el-col>
-							<el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
-								<div class="bar">
-									<img src="../../assets/example/sx-c3.png" alt="">
-								</div>
-							</el-col>
-						</el-row>
-					</div>
-				</el-col>
-			</el-row>
+        <p>
+          学员数量：从2021年秋季学期开始开展水母星球课程，迄今为止，共开展4个学期，每期2个班级，分为大班和中班。每个班级人数8-12人，共约为100人次开展专注力课程教学。次从中随机抽取18人数据进行展示。
+        </p>
+        <p>
+          教师配置：2名/班，主教老师由深圳职业技术大学毕业的专业外派教师担任；助教老师由幼儿园本园班主任担任。
+        </p>
+        <p>
+          上课形式：老师按照以下规则整体组织小朋友完成所有流程训练，【脑电生物反馈】训练不分组，没有用到教具的学生被要求在旁安静等待观摩。将【学习迁移训练】布置为家长作业任务课后完成，由家长在群内提交作业。
+        </p>
+        <img src="../../assets/example/sx01.png" alt="石厦幼儿园案例" />
+        <img src="../../assets/example/sx02.png" alt="石厦幼儿园案例" />
+      </div>
+      <div class="result-title">
+        <el-row class="box-card">
+          <el-col :xs="8" :span="4">
+            <div class="l1">1次/周</div>
+            <div class="l2">上课频次</div>
+          </el-col>
+          <el-col :xs="8" :span="5">
+            <div class="l1">每学期16课时</div>
+            <div class="l2">上课课时</div>
+          </el-col>
+          <el-col :xs="8" :span="5">
+            <div class="l1">3套设备（合约）</div>
+            <div class="l2">设备配置</div>
+          </el-col>
+          <el-col :xs="12" :span="5">
+            <div class="l1">下午4：30开始</div>
+            <div class="l2">上课时间</div>
+          </el-col>
+          <el-col :xs="12" :span="5">
+            <div class="l1">40-50分钟不等</div>
+            <div class="l2">课时时长</div>
+          </el-col>
+        </el-row>
+      </div>
+      <!-- Echarts 图表 -->
+      <el-row :gutter="20">
+        <el-col :xs="24" :span="8">
+          <div class="charts-item">
+            <p class="title">学员专注力平均值整体对比分析</p>
+            <img src="../../assets/example/sx-c1.png" alt="" />
+          </div>
+        </el-col>
+        <el-col :xs="24" :span="16">
+          <div class="charts-item">
+            <p class="title">学员专注力评分分级占比分析</p>
+            <el-row justify="space-between">
+              <el-col :xs="24" :span="12">
+                <div class="bar">
+                  <img src="../../assets/example/sx-c2.png" alt="" />
+                </div>
+              </el-col>
+              <el-col :xs="24" :span="12">
+                <div class="bar">
+                  <img src="../../assets/example/sx-c3.png" alt="" />
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -151,70 +163,87 @@ watch(
 <style scoped lang="scss">
 .example-container {
   padding: 20px 30px;
+
   .example {
-    margin-bottom: 30px;
     width: 100%;
+    margin-bottom: 30px;
+
     .title {
       height: 70px;
-      line-height: 70px;
       font-size: 20px;
+      line-height: 70px;
       white-space: nowrap;
+
       img {
         display: inline-block;
         margin-right: 40px;
       }
+
       span {
         display: inline-block;
         vertical-align: top;
       }
     }
+
     .content {
       margin: 20px 0;
+
       p {
         margin: 0;
         font-size: 16px;
-				color:#3c4050;
+        color: #3c4050;
+      }
+
+      img {
+        max-height: 205px;
+        margin-top: 10px;
+      }
+    }
+
+    .result-title {
+      margin-bottom: 20px;
+      color: #142141;
+      white-space: nowrap;
+
+      .box-card {
+        position: relative;
+        padding: 20px 0 20px 40px;
+        line-height: 30px;
+        background: #fff;
+        border: 1px solid #e6e8eb;
+        border-radius: 30px;
+      }
+
+      .l1 {
+        font-size: 26px;
+      }
+
+      .l2 {
+        font-size: 16px;
       }
-			img{max-height:205px;margin-top: 10px;}
     }
-		.result-title {
-			white-space: nowrap;
-			color: #142141;
-			margin-bottom: 20px;
-			.box-card {
-				background: #ffffff;
-				border-radius: 30px;
-				border: 1px solid #e6e8eb;
-				position: relative;
-				padding: 20px 0 20px 40px;
-				line-height: 30px;
-			}
-			.l1 {
-				font-size: 26px;
-			}
-			.l2 {
-				font-size: 16px;
-			}
-		}
   }
 }
+
 .charts-item {
-  background: #ffffff;
+  position: relative;
+  padding-bottom: 20px;
+  text-align: center;
+  background: #fff;
   border: 1px solid #e8eaec;
   border-radius: 24px;
-  text-align: center;
-  position: relative;
-	padding-bottom: 20px;
+
   .title {
-		margin: 0;
-		height: 78px;
-		line-height: 78px;
-		text-align: left;
-		text-indent: 2em;
-		font-size: 18px;
+    height: 78px;
+    margin: 0;
+    font-size: 18px;
+    line-height: 78px;
+    text-align: left;
+    text-indent: 2em;
   }
+
   .bar {
-		margin-top: 60px;
+    margin-top: 60px;
   }
 }
 </style>

src/views/evaluation/index.vue

@@ -90,7 +90,7 @@ const indicatorsData = ref([
       <div class="student-chart">
         <div class="title">儿童脑电专注力测评数据分析</div>
         <el-row :gutter="10">
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+          <el-col :xs="24" :span="8">
             <div class="box-card">
               <RadarChart
                 id="radarChart1"
@@ -104,7 +104,7 @@ const indicatorsData = ref([
               <div class="info">5D脑电数据模型</div>
             </div>
           </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+          <el-col :xs="24" :span="8">
             <div class="box-card">
               <FocusBarChart
                 id="focusBarChart1"
@@ -123,11 +123,11 @@ const indicatorsData = ref([
               </div>
             </div>
           </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8"></el-col>
+          <el-col :xs="24" :span="8"></el-col>
         </el-row>
         <div class="title">脑电检测分析</div>
         <el-row :gutter="10">
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+          <el-col :xs="24" :span="8">
             <div class="box-card">
               <RadarChart
                 id="radarChart2"
@@ -141,7 +141,7 @@ const indicatorsData = ref([
               <div class="info">5D脑电数据模型</div>
             </div>
           </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+          <el-col :xs="24" :span="8">
             <div class="box-card">
               <RelaxBarChart
                 id="relaxBarChart1"
@@ -159,7 +159,7 @@ const indicatorsData = ref([
               </div>
             </div>
           </el-col>
-          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+          <el-col :xs="24" :span="8">
             <div class="box-card">
               <IndicatorsBarChart
                 id="indicatorsBarChart1"
@@ -188,49 +188,55 @@ const indicatorsData = ref([
   position: relative;
   padding: 30px;
 }
+
 .evaluate-chart {
+  position: relative;
   box-sizing: border-box;
   width: 100%;
-  border-radius: 30px;
-  background: #fff;
-  position: relative;
   padding: 0 10px 20px 386px;
+  background: #fff;
+  border-radius: 30px;
 }
+
 :deep(.el-input__wrapper) {
-  background: #ffffff;
+  background: #fff;
   border-radius: 12px;
-}
-:deep(.el-input__wrapper) {
   box-shadow: none !important;
 }
+
 .student-search {
+  position: absolute;
+  top: 0;
+  left: 0;
   box-sizing: border-box;
   width: 342px;
   height: 100%;
-  border: 1px solid #e6e8eb;
-  border-radius: 30px;
   padding-top: 34px;
   overflow: hidden;
-  position: absolute;
-  left: 0;
-  top: 0;
+  border: 1px solid #e6e8eb;
+  border-radius: 30px;
+
   .el-input {
     width: 220px;
+    margin: 0 10px 0 15px;
     border: 1px solid #e6e8eb;
     border-radius: 12px;
-    margin: 0 10px 0 15px;
   }
+
   :deep(.el-input__inner) {
     font-size: 14px;
   }
+
   .el-button {
-    font-size: 14px;
     padding: 0 24px;
+    font-size: 14px;
     border-radius: 12px;
   }
+
   .result {
-    margin-top: 15px;
     height: 700px;
+    margin-top: 15px;
+
     .scroll-item {
       position: relative;
       box-sizing: border-box;
@@ -239,71 +245,83 @@ const indicatorsData = ref([
       padding: 8px 0 0 90px;
       color: #23283c;
       cursor: pointer;
+
       &:hover {
         background: #e5eefe;
       }
+
       .active {
         color: #4284f2;
         background: #e5eefe;
       }
+
       p {
-        line-height: 27px;
         margin: 0;
+        line-height: 27px;
       }
+
       img {
         position: absolute;
-        left: 22px;
         top: 8px;
+        left: 22px;
         width: 54px;
         height: 54px;
-        background: #999999;
-        border-radius: 5px;
+        background: #999;
         border: none;
+        border-radius: 5px;
       }
     }
   }
 }
+
 .student-chart {
   .title {
     height: 54px;
-    line-height: 54px;
     font-size: 18px;
+    line-height: 54px;
     color: #23283c;
   }
+
   .box-card {
-    height: 338px;
     box-sizing: border-box;
+    height: 338px;
+    overflow: hidden;
     background: #f3f6fd;
     border-radius: 20px;
-    overflow: hidden;
+
     .info {
       height: 38px;
-      line-height: 38px;
       font-size: 14px;
-      background: #4284f2;
-      color: #ffffff;
+      line-height: 38px;
+      color: #fff;
       text-align: center;
+      background: #4284f2;
+
       &.legend {
         position: relative;
         box-sizing: border-box;
         padding-right: 180px;
+
         .tag {
           position: absolute;
           top: 0;
           right: 20px;
           white-space: nowrap;
-          .t1:before,
-          .t2:before {
-            content: "";
+
+          .t1::before,
+          .t2::before {
             display: inline-block;
             width: 20px;
             height: 10px;
             margin: 0 4px 0 10px;
+            content: "";
           }
-          .t1:before {
+
+          .t1::before {
             background: #f8b865;
           }
-          .t2:before {
+
+          .t2::before {
             background: #91cc75;
           }
         }
@@ -311,4 +329,22 @@ const indicatorsData = ref([
     }
   }
 }
+
+.mobile {
+  .student-search {
+    width: 260px;
+
+    .el-input {
+      width: 140px;
+    }
+  }
+
+  .evaluate-chart {
+    padding-left: 270px;
+
+    .el-col {
+      margin-bottom: 10px;
+    }
+  }
+}
 </style>

src/views/grade/index.vue

@@ -2,8 +2,8 @@
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
 
-import {getGradeList, getGradeStudents} from "@/api/grade";
-import {GradeItem} from "@/api/grade/types";
+import { getGradeList, getGradeStudents } from "@/api/grade";
+import { GradeItem } from "@/api/grade/types";
 
 const userStore = useUserStore();
 defineOptions({
@@ -22,10 +22,10 @@ async function getGradeItems(schoolId: number, status: number) {
   getGradeList(schoolId, status)
     .then(({ data }) => {
       gradeData.value = data;
-			dataStatus.value = 1;
+      dataStatus.value = 1;
     })
     .catch((error) => {
-			dataStatus.value = 2;
+      dataStatus.value = 2;
       console.log(error);
     });
 }
@@ -79,85 +79,86 @@ watch(
       </el-select>
     </div>
     <!-- 班级折叠面板-->
-		<template v-if="dataStatus == 1">
-			<div v-for="grade in gradeData" :key="grade.id" class="list-collapse">
-				<el-collapse v-model="grade.active" @change="collapseGrade(grade)">
-					<el-collapse-item :name="grade.id">
-						<template #title>
-							<div class="title">
-								<span class="blue mr-10">{{ grade.name }}</span>
-								<span class="mr-10">教师：{{ grade.teacher_name }}</span>
-								<span>班级号：{{ grade.num }}</span>
-								<span v-if="grade.grade_status == 1" class="red ml-10"
-								>结课时间：{{ grade.grade_time }}</span
-								>
-								<span class="blue fr"
-								>学生：{{ grade.count }}人
-                <el-icon
-										:class="
-                    grade.active && grade.active.includes(grade.id)
-                      ? 'is-active'
-                      : ''
-                  "
-								><CaretBottom/></el-icon>
-              </span>
-							</div>
-						</template>
-						<div>
-							<el-table
-									:data="grade.students"
-									max-height="400"
-									style="width: 100%"
-							>
-								<el-table-column
-										type="index"
-										label="序号"
-										width="80"
-										align="center"
-								/>
-								<el-table-column
-										prop="name"
-										label="学生名称"
-										width="180"
-										align="center"
-								/>
-								<el-table-column
-										prop="phone"
-										label="手机号"
-										width="180"
-										align="center"
-								/>
-								<el-table-column
-										prop="count"
-										label="训练次数"
-										width="180"
-										align="center"
-								/>
-								<el-table-column />
-								<!-- 无数据插槽 -->
-								<template #empty>
-									<div class="empty">
-										<img src="../../assets/empty.png" alt="数据为空">
-										<p>该班级还未绑定任何学生！</p>
-									</div>
-								</template>
-							</el-table>
-						</div>
-					</el-collapse-item>
-				</el-collapse>
-			</div>
-		</template>
-		<template v-else>
-			<div class="empty page-empty">
-				<img src="../../assets/empty.png" alt="数据为空">
-				<p v-if="dataStatus == 0">加载中...</p>
-				<template v-if="dataStatus == 2">
-					<p v-if="gradeType==0">您的学校还未创建任何班级！</p>
-					<p v-if="gradeType==1">您的学校还没有任何未结课班级！</p>
-					<p v-if="gradeType==2">您的学校还没有任何已结课班级！</p>
-				</template>
-			</div>
-		</template>
+    <template v-if="dataStatus == 1">
+      <div v-for="grade in gradeData" :key="grade.id" class="list-collapse">
+        <el-collapse v-model="grade.active" @change="collapseGrade(grade)">
+          <el-collapse-item :name="grade.id" class="testtt">
+            <template #title>
+              <div class="title">
+                <span class="blue mr-10">{{ grade.name }}</span>
+                <span class="mr-10">教师：{{ grade.teacher_name }}</span>
+                <span class="mr-10">班级号：{{ grade.num }}</span>
+                <span v-if="grade.grade_status == 1" class="red"
+                  >结课时间：{{ grade.grade_time }}</span
+                >
+                <span class="blue fr"
+                  >学生：{{ grade.count }}人
+                  <el-icon
+                    :class="
+                      grade.active && grade.active.includes(grade.id)
+                        ? 'is-active'
+                        : ''
+                    "
+                    ><CaretBottom
+                  /></el-icon>
+                </span>
+              </div>
+            </template>
+            <div>
+              <el-table
+                :data="grade.students"
+                max-height="400"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="80"
+                  align="center"
+                />
+                <el-table-column
+                  prop="name"
+                  label="学生名称"
+                  width="180"
+                  align="center"
+                />
+                <el-table-column
+                  prop="phone"
+                  label="手机号"
+                  width="180"
+                  align="center"
+                />
+                <el-table-column
+                  prop="count"
+                  label="训练次数"
+                  width="180"
+                  align="center"
+                />
+                <el-table-column />
+                <!-- 无数据插槽 -->
+                <template #empty>
+                  <div class="empty">
+                    <img src="../../assets/empty.png" alt="数据为空" />
+                    <p>该班级还未绑定任何学生！</p>
+                  </div>
+                </template>
+              </el-table>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </template>
+    <template v-else>
+      <div class="empty page-empty">
+        <img src="../../assets/empty.png" alt="数据为空" />
+        <p v-if="dataStatus == 0">加载中...</p>
+        <template v-if="dataStatus == 2">
+          <p v-if="gradeType == 0">您的学校还未创建任何班级！</p>
+          <p v-if="gradeType == 1">您的学校还没有任何未结课班级！</p>
+          <p v-if="gradeType == 2">您的学校还没有任何已结课班级！</p>
+        </template>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -166,70 +167,96 @@ watch(
   position: relative;
   padding: 20px 30px;
 }
+
 .class-select {
   margin-bottom: 20px;
+
   .el-select {
     width: 160px;
     margin: 0;
   }
 }
+
 :deep(.el-input__wrapper) {
-  background: #ffffff;
+  background: #fff;
   border-radius: 12px;
+  box-shadow: none !important;
 }
-/* el-select 各种边框线隐藏**/
+
+/* el-select 各种边框线隐藏 **/
 :deep(.el-select) {
   --el-select-input-focus-border-color: none !important;
 }
-:deep(.el-input__wrapper) {
-  box-shadow: none !important;
-}
+
 :deep(.el-select .el-input__wrapper.is-focus) {
   box-shadow: none !important;
 }
+
 :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
   box-shadow: none !important;
 }
-.page-empty{
-	padding:240px 0;
+
+.page-empty {
+  padding: 240px 0;
 }
+
 .list-collapse {
-  background: #ffffff;
-  border-radius: 25px;
   padding: 0 32px;
   margin-bottom: 10px;
-	.empty{
-		padding:20px 0;
-	}
+  background: #fff;
+  border-radius: 25px;
+
+  .empty {
+    padding: 20px 0;
+  }
+
   .title {
     width: 100%;
     font-size: 18px;
+
+    span {
+      display: inline-block;
+    }
+
     .blue {
       color: #4284f2;
     }
+
     .red {
       color: #e04962;
     }
+
     .fr {
       float: right;
     }
+
     .el-icon {
       vertical-align: middle;
+
       &.is-active {
         transform: rotate(180deg);
       }
     }
   }
+
   :deep(.el-collapse),
   :deep(.el-collapse-item__header),
   :deep(.el-collapse-item__wrap) {
     border: none;
   }
+
   :deep(.el-collapse-item__arrow) {
     display: none;
   }
 }
+
 :deep(.el-table th.el-table__cell) {
   background: #e9ebee;
 }
+
+.mobile .list-collapse {
+  :deep(.el-collapse-item__header) {
+    height: auto;
+  }
+}
 </style>

src/views/login/index.vue

@@ -88,8 +88,12 @@ const autoLogin = ref(true);
 const loginData = ref<LoginData>({
   // phone: "18770033942",
   // password: "123456",
-  phone: localStorage.getItem("autoName")?atob(localStorage.getItem("autoName")):"",
-  password: localStorage.getItem("autoPass")?atob(localStorage.getItem("autoPass")):"",
+  phone: localStorage.getItem("autoName")
+    ? atob(localStorage.getItem("autoName"))
+    : "",
+  password: localStorage.getItem("autoPass")
+    ? atob(localStorage.getItem("autoPass"))
+    : "",
 });
 
 const loginRules = {
@@ -169,68 +173,97 @@ function handleLogin() {
   width: 100%;
   height: 100%;
   min-height: 750px;
+  padding-top: 260px;
   overflow: hidden;
   background: #eaf7fd url("../../assets/login/login.jpg") no-repeat left top;
   background-size: auto 100%;
+
   .login-form {
     width: 500px;
     max-width: 100%;
-    padding: 0 42px;
-    margin: 260px auto;
+    padding: 0 42px 20px;
+    margin: 0 auto;
     overflow: hidden;
-    background: #ffffff;
+    background: #fff;
     box-shadow: 0 0 10px #f2f3f5;
+
     .title {
       height: 98px;
-      line-height: 98px;
       font-size: 30px;
+      line-height: 98px;
       color: #151515;
     }
+
     .svg-icon {
       width: 18px;
       height: 18px;
     }
   }
+
   .el-form-item {
-    background: #f2f3f5;
-    border: 1px solid #f2f3f5;
-    border-radius: 5px;
     height: 54px;
-    line-height: 54px;
     margin-bottom: 40px;
     font-size: 16px;
+    line-height: 54px;
     color: #747474;
+    background: #f2f3f5;
+    border: 1px solid #f2f3f5;
+    border-radius: 5px;
   }
+
   .el-button {
-    background: #006eff;
     height: 54px;
-    line-height: 54px;
+    margin: 20px auto 10px;
     font-size: 18px;
-    margin: 20px auto;
+    line-height: 54px;
+    background: #006eff;
   }
 }
-@media only screen and (min-width: 1200px) {
+
+@media only screen and (width >= 1080px) {
   .login-container {
     padding-left: 660px;
   }
 }
 
+@media only screen and (width <= 1080px) {
+  .login-container {
+    padding: 400px 0;
+    background-position: center center;
+  }
+}
+
+@media only screen and (width <= 600px) {
+  .login-container {
+    .login-form .title {
+      height: 80px;
+      line-height: 80px;
+    }
+
+    .el-form-item {
+      margin-bottom: 20px;
+    }
+  }
+}
+
 .el-input {
-  background: transparent;
   height: 54px;
   line-height: 54px;
+  background: transparent;
   // 子组件 scoped 无效，使用 :deep
   :deep(.el-input__wrapper) {
+    height: 54px;
     padding: 0;
     background: transparent;
     box-shadow: none;
-    height: 54px;
+
     .el-input__inner {
-      background: transparent;
       height: 54px;
+      text-indent: 1.5em;
+      background: transparent;
       border: 0;
       border-radius: 0;
-      text-indent: 1.5em;
+
       &:-webkit-autofill {
         box-shadow: 0 0 0 1000px transparent inset !important;
         -webkit-text-fill-color: #fff !important;
@@ -246,10 +279,12 @@ function handleLogin() {
     }
   }
 }
+
 :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
   background-color: #727272;
   border-color: #727272;
 }
+
 :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
   color: #727272;
 }

src/views/student/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import {GradeList} from "@/api/grade/types";
+import { GradeList } from "@/api/grade/types";
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
-import {getGradeSelect} from "@/api/grade";
-import {getStudentLists} from "@/api/student";
-import {StudentItem, StudentList, StudentParams} from "@/api/student/types";
+import { getGradeSelect } from "@/api/grade";
+import { getStudentLists } from "@/api/student";
+import { StudentItem, StudentList, StudentParams } from "@/api/student/types";
 const userStore = useUserStore();
 defineOptions({
-	name: "StudentIndex",
-	inheritAttrs: false,
+  name: "StudentIndex",
+  inheritAttrs: false,
 });
 /**
  * 班级数据
@@ -17,63 +17,63 @@ const gradeData = ref<GradeList[]>();
 // 班级编号
 let gradeId = ref(0);
 async function getGradeData(schoolId: number) {
-	getGradeSelect(schoolId)
-		.then(({ data }) => {
-			gradeData.value = data;
-			gradeData.value?.unshift({ id: 0, name: "全部班级" })
-		})
-		.catch((error) => {
-			gradeData.value = [];
-			gradeData.value?.unshift({ id: 0, name: "全部班级" })
-			console.log(error);
-		});
+  getGradeSelect(schoolId)
+    .then(({ data }) => {
+      gradeData.value = data;
+      gradeData.value?.unshift({ id: 0, name: "全部班级" });
+    })
+    .catch((error) => {
+      gradeData.value = [];
+      gradeData.value?.unshift({ id: 0, name: "全部班级" });
+      console.log(error);
+    });
 }
 /**
  * 学生数据
  */
-const studentSearch:StudentParams = reactive({
-	school_id: userStore.schoolId,
-	grade_id: 0,
-	search: "",
-	page_no: 1,
-	page_size: 12,
+const studentSearch: StudentParams = reactive({
+  school_id: userStore.schoolId,
+  grade_id: 0,
+  search: "",
+  page_no: 1,
+  page_size: 12,
 });
 // 0加载中，1数据正常，2数据为空
 const dataStatus = ref(0);
 const studentCount = ref(0);
 const studentData = ref<StudentItem[]>();
 async function getStudentData(schoolId) {
-	studentSearch.school_id = schoolId;
-	getStudentLists(studentSearch)
-		.then(({ data }) => {
-			const {count, lists} = data;
-			studentCount.value = count;
-			studentData.value = lists;
-			dataStatus.value = 1;
-		})
-		.catch((error) => {
-			dataStatus.value = 2;
-			console.log(error);
-		});
+  studentSearch.school_id = schoolId;
+  getStudentLists(studentSearch)
+    .then(({ data }) => {
+      const { count, lists } = data;
+      studentCount.value = count;
+      studentData.value = lists;
+      dataStatus.value = 1;
+    })
+    .catch((error) => {
+      dataStatus.value = 2;
+      console.log(error);
+    });
 }
-function getStudentSearch(){
-	getStudentData(userStore.schoolId);
+function getStudentSearch() {
+  getStudentData(userStore.schoolId);
 }
 onMounted(() => {
-	// 获取班级
-	getGradeData(userStore.schoolId);
-	// 获取学生数据
-	getStudentData(userStore.schoolId);
+  // 获取班级
+  getGradeData(userStore.schoolId);
+  // 获取学生数据
+  getStudentData(userStore.schoolId);
 });
 watch(
-	() => userStore.schoolId,
-	(newValue) => {
-		// 学校切换后重新加载数据
-		studentSearch.grade_id = 0;
-		studentSearch.search = "";
-		getGradeData(newValue);
-		getStudentData(userStore.schoolId);
-	}
+  () => userStore.schoolId,
+  (newValue) => {
+    // 学校切换后重新加载数据
+    studentSearch.grade_id = 0;
+    studentSearch.search = "";
+    getGradeData(newValue);
+    getStudentData(userStore.schoolId);
+  }
 );
 </script>
 
@@ -81,54 +81,82 @@ watch(
   <div class="student-container">
     <!-- 学生查找 -->
     <div class="student-search">
-			<el-select v-model="studentSearch.grade_id" placeholder="全部班级" size="large">
-				<el-option
-						v-for="item in gradeData"
-						:key="item.id"
-						:label="item.name"
-						:value="item.id"
-				/>
-			</el-select>
+      <el-select
+        v-model="studentSearch.grade_id"
+        placeholder="全部班级"
+        size="large"
+      >
+        <el-option
+          v-for="item in gradeData"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
       <el-input
         v-model="studentSearch.search"
         size="large"
         placeholder="请输入学生名称或手机号码"
       />
-      <el-button size="large" type="primary" @click="getStudentSearch()">查找</el-button>
-      <span>共<b>{{ studentCount }}</b>人</span>
+      <el-button size="large" type="primary" @click="getStudentSearch()"
+        >查找</el-button
+      >
+      <span
+        >共<b>{{ studentCount }}</b
+        >人</span
+      >
     </div>
     <!-- 学生数据 -->
     <div class="list-table">
-      <el-table :data="studentData" style="width:100%">
-        <el-table-column type="index" label="序号" align="center" width="80" />
+      <el-table :data="studentData" style="width: 100%">
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          max-width="120"
+        />
         <el-table-column prop="name" label="学生名称" align="center" />
         <el-table-column prop="grade_name" label="所在班级" align="center" />
         <el-table-column prop="phone" label="手机号码" align="center" />
         <el-table-column prop="create_time" label="注册时间" align="center" />
         <el-table-column prop="count" label="训练次数" align="center" />
-        <el-table-column />
-        <el-table-column label="操作" align="center" >
-					<template #default="scope">
-						<router-link v-if="scope.row.count>16" :to="'/student/result?id='+scope.row.id" class="table-btn">训练效果分析</router-link>
-						<button v-else class="table-btn disabled" @click="ElMessage.error('该学生训练数据还不足以进行训练效果分析，请至少完成16次专注力训练后再来查看。')">训练效果分析</button>
-					</template>
+        <el-table-column label="操作" align="center" min-width="120">
+          <template #default="scope">
+            <router-link
+              v-if="scope.row.count > 16"
+              :to="'/student/result?id=' + scope.row.id"
+              class="table-btn"
+              >训练效果分析</router-link
+            >
+            <button
+              v-else
+              class="table-btn disabled"
+              @click="
+                ElMessage.error(
+                  '该学生训练数据还不足以进行训练效果分析，请至少完成16次专注力训练后再来查看。'
+                )
+              "
+            >
+              训练效果分析
+            </button>
+          </template>
         </el-table-column>
-				<!-- 无数据插槽 -->
-				<template #empty>
-					<div class="empty">
-						<img src="../../assets/empty.png" alt="数据为空">
-						<p v-if="dataStatus == 0">加载中...</p>
-						<p v-if="dataStatus == 2">暂时还没有任何学生绑定学校！</p>
-					</div>
-				</template>
+        <!-- 无数据插槽 -->
+        <template #empty>
+          <div class="empty">
+            <img src="../../assets/empty.png" alt="数据为空" />
+            <p v-if="dataStatus == 0">加载中...</p>
+            <p v-if="dataStatus == 2">暂时还没有任何学生绑定学校！</p>
+          </div>
+        </template>
       </el-table>
-			<pagination
-					v-if="studentCount > 0"
-					v-model:total="studentCount"
-					v-model:page="studentSearch.page_no"
-					v-model:limit="studentSearch.page_size"
-					@pagination="getStudentSearch()"
-			/>
+      <pagination
+        v-if="studentCount > 0"
+        v-model:total="studentCount"
+        v-model:page="studentSearch.page_no"
+        v-model:limit="studentSearch.page_size"
+        @pagination="getStudentSearch()"
+      />
     </div>
   </div>
 </template>
@@ -138,71 +166,89 @@ watch(
   position: relative;
   padding: 20px 30px;
 }
+
 .student-search {
   margin-bottom: 20px;
   font-size: 16px;
+
   .el-select {
     width: 180px;
     margin: 0 20px 0 0;
   }
+
   .el-input {
     width: 250px;
     margin: 0;
   }
+
   :deep(.el-input__inner) {
     font-size: 16px;
   }
+
   .el-button {
-    font-size: 16px;
     padding: 0 26px;
     margin: 0 20px;
+    font-size: 16px;
+    background: #4284f2;
     border-radius: 10px;
-		background: #4284f2;
   }
+
   b {
     font-size: 20px;
   }
 }
+
 :deep(.el-input__wrapper) {
-  background: #ffffff;
+  background: #fff;
   border-radius: 12px;
-}
-:deep(.el-input__wrapper) {
   box-shadow: none !important;
 }
+
 /* 自定义 el-select 样式 */
-/* el-select 各种边框线隐藏**/
+
+/* el-select 各种边框线隐藏 **/
 :deep(.el-select) {
   --el-select-input-focus-border-color: none !important;
 }
+
 :deep(.el-select .el-input__wrapper.is-focus) {
   box-shadow: none !important;
 }
+
 :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
   box-shadow: none !important;
 }
+
+:deep(.el-table .el-table__header .el-table__cell .cell) {
+  white-space: nowrap;
+}
+
 :deep(.el-table th.el-table__cell) {
   background: #e9ebee;
 }
+
 .list-table {
-  background: #ffffff;
-  border-radius: 25px;
   overflow: hidden;
+  background: #fff;
+  border-radius: 25px;
+
   .table-btn {
     display: inline-block;
     height: 38px;
-    line-height: 38px;
     padding: 0 15px;
+    line-height: 38px;
+    color: #fff;
     background: #4284f2;
     border-radius: 6px;
-    color: #ffffff;
+
     &.disabled {
-      background: #bfbfbf;
       cursor: not-allowed;
+      background: #bfbfbf;
     }
   }
 }
-.empty{
-	padding:100px 0;
+
+.empty {
+  padding: 100px 0;
 }
 </style>

src/views/student/result.vue

@@ -4,130 +4,143 @@ import RadarChart from "@/views/charts-components/RadarChart.vue";
 import CircleChart from "@/views/charts-components/CircleChart.vue";
 import DoubleChart from "@/views/charts-components/DoubleChart.vue";
 import SvgIcon from "@/components/SvgIcon/index.vue";
-import {getUrlParam} from "@/utils";
-import {watch} from "vue";
-import {useUserStore} from "@/store/modules/user";
-import {getStudentBoard} from "@/api/student";
-import {StudentBoard} from "@/api/student/types";
+import { getUrlParam } from "@/utils";
+import { watch } from "vue";
+import { useUserStore } from "@/store/modules/user";
+import { getStudentBoard } from "@/api/student";
+import { StudentBoard } from "@/api/student/types";
 
 const userStore = useUserStore();
 defineOptions({
-	name: "StudentResult",
-	inheritAttrs: false,
+  name: "StudentResult",
+  inheritAttrs: false,
 });
 // 数据状态
 const dataStatus = ref(false);
 const dataMessage = ref("加载中...");
-let chartData:StudentBoard = reactive({});
+let chartData: StudentBoard = reactive({});
 // 五维雷达图
-let radarData:number[][] = reactive([]);
-async function getChartData(schoolId:number) {
-	// 从url获取学生Id
-	const studentId = Number(getUrlParam("id"))||0;
-	getStudentBoard(studentId, schoolId)
-		.then(({ data }) => {
-			chartData = <StudentBoard>{ ...data };
-			dataStatus.value = true;
-			radarData = [chartData.after, chartData.front];
-		})
-		.catch((error) => {
-			dataStatus.value = false;
-			dataMessage.value = error.message;
-			console.log(error.message);
-		});
+let radarData: number[][] = reactive([]);
+async function getChartData(schoolId: number) {
+  // 从url获取学生Id
+  const studentId = Number(getUrlParam("id")) || 0;
+  getStudentBoard(studentId, schoolId)
+    .then(({ data }) => {
+      chartData = <StudentBoard>{ ...data };
+      dataStatus.value = true;
+      radarData = [chartData.after, chartData.front];
+    })
+    .catch((error) => {
+      dataStatus.value = false;
+      dataMessage.value = error.message;
+      console.log(error.message);
+    });
 }
-function starElement(index:number, compare:number){
-	let star = 0;
-	let value = 0;
-	let tag = "";
-	if (compare == 0) {
-		star = chartData.eeg[index].front[1];
-		value = chartData.eeg[index].front[0];
-	} else {
-		star = chartData.eeg[index].after[1];
-		value = chartData.eeg[index].after[0];
-	}
-	if (star == 1) {
-		tag = "重度不足";
-	} else if (star == 2) {
-		tag = "轻度不足";
-	} else if (star == 3) {
-		tag = "中等水平";
-	} else if (star == 4) {
-		tag = "良好水平";
-	} else if (star == 5) {
-		tag = "优秀水平";
-	}
-	//return `<div class="star s${star}"></div><div class="status">${tag}</div>`;
-	return ["star s" + star, tag, value];
+function starElement(index: number, compare: number) {
+  let star = 0;
+  let value = 0;
+  let tag = "";
+  if (compare == 0) {
+    star = chartData.eeg[index].front[1];
+    value = chartData.eeg[index].front[0];
+  } else {
+    star = chartData.eeg[index].after[1];
+    value = chartData.eeg[index].after[0];
+  }
+  if (star == 1) {
+    tag = "重度不足";
+  } else if (star == 2) {
+    tag = "轻度不足";
+  } else if (star == 3) {
+    tag = "中等水平";
+  } else if (star == 4) {
+    tag = "良好水平";
+  } else if (star == 5) {
+    tag = "优秀水平";
+  }
+  //return `<div class="star s${star}"></div><div class="status">${tag}</div>`;
+  return ["star s" + star, tag, value];
 }
 
 onMounted(() => {
-	// 图表数据
-	getChartData(userStore.schoolId);
+  // 图表数据
+  getChartData(userStore.schoolId);
 });
 watch(
-	() => userStore.schoolId,
-	(newValue) => {
-		// 图表数据
-		getChartData(newValue);
-	}
+  () => userStore.schoolId,
+  (newValue) => {
+    // 图表数据
+    getChartData(newValue);
+  }
 );
 </script>
 
 <template>
   <div v-if="dataStatus" class="result-container">
-		<router-link :to="'/download/student/result?id='+getUrlParam('id')" class="download-btn">
-			<svg-icon icon-class="download" size="3rem"/>
-			<span>下载报告</span>
-		</router-link>
+    <router-link
+      :to="'/download/student/result?id=' + getUrlParam('id')"
+      class="download-btn"
+    >
+      <svg-icon icon-class="download" size="3rem" />
+      <span>下载报告</span>
+    </router-link>
     <div class="result-title">
       <el-row class="box-card">
-        <el-col :xs="10" :sm="5" :md="5">
-          <div class="l1"><span>{{ chartData.name }}</span></div>
+        <el-col :xs="10" :span="5">
+          <div class="l1">
+            <span>{{ chartData.name }}</span>
+          </div>
           <div class="l2">{{ chartData.phone }}</div>
         </el-col>
-        <el-col :xs="14" :sm="5" :md="5">
-          <div class="l1"><span>{{ chartData.count }}</span></div>
+        <el-col :xs="14" :span="5">
+          <div class="l1">
+            <span>{{ chartData.count }}</span>
+          </div>
           <div class="l2">训练次数累计</div>
         </el-col>
-        <el-col :xs="10" :sm="6" :md="6">
-          <div class="l1"><span>{{ chartData.minute }}</span>分<span>{{ chartData.second }}</span>秒</div>
+        <el-col :xs="10" :span="6">
+          <div class="l1">
+            <span>{{ chartData.minute }}</span
+            >分<span>{{ chartData.second }}</span
+            >秒
+          </div>
           <div class="l2">训练时长累计</div>
         </el-col>
-        <el-col :xs="14" :sm="8" :md="8">
-          <div class="l1">前<span>{{ chartData.sort }}%</span></div>
+        <el-col :xs="14" :span="8">
+          <div class="l1">
+            前<span>{{ chartData.sort }}%</span>
+          </div>
           <div class="l2">在所有通过训练的学员中你的位置是</div>
         </el-col>
       </el-row>
     </div>
 
     <el-row class="result-chart" :gutter="15">
-      <el-col :xs="24" :sm="7" :md="7">
+      <el-col :xs="24" :span="7">
         <div class="box-card">
           <div class="chart-title">5D脑电数据模型</div>
-					<template v-if="radarData.length > 0">
-						<RadarChart
-								id="radarChart"
-								:key="radarData.toString()"
-								:data-sets="radarData"
-								color="#4284f2"
-								width="450px"
-								height="350px"
-								class="chart"
-						/>
-					</template>
+          <template v-if="radarData.length > 0">
+            <RadarChart
+              id="radarChart"
+              :key="radarData.toString()"
+              :data-sets="radarData"
+              color="#4284f2"
+              width="450px"
+              height="350px"
+              class="chart"
+            />
+          </template>
         </div>
       </el-col>
-      <el-col :xs="24" :sm="17" :md="17">
+      <el-col :xs="24" :span="17">
         <div class="box-card">
           <div class="chart-title">专注力区间分布统计</div>
-          <el-row>
-            <el-col :xs="24" :sm="7" :md="7">
+          <el-row class="chart-content">
+            <el-col :xs="24" :span="7">
               <div class="charts">
                 <CircleChart
                   id="resultChart1"
-									:key="chartData.height"
+                  :key="chartData.height"
                   :data="chartData.height"
                   height="220px"
                   width="220px"
@@ -141,12 +154,12 @@ watch(
                 <p>高专注力状态数据占比</p>
               </div>
             </el-col>
-            <el-col :xs="24" :sm="7" :md="7">
+            <el-col :xs="24" :span="7">
               <div class="charts">
                 <DoubleChart
                   id="doubleChart1"
-									:key="chartData.height_num"
-									:data="chartData.height_num"
+                  :key="chartData.height_num"
+                  :data="chartData.height_num"
                   height="220px"
                   width="220px"
                   color="#4e68b0"
@@ -155,19 +168,19 @@ watch(
                 <p>整体高专注力状态数据累计条数</p>
               </div>
             </el-col>
-            <el-col :xs="24" :sm="10" :md="10">
+            <el-col :xs="24" :span="10">
               <div class="charts last">
-								<template v-if="chartData.percentage?.length>0">
-									<PieChart
-											id="pieChart"
-											:key="chartData.percentage.toString()"
-											:data="chartData.percentage"
-											width="400px"
-											height="350px"
-											class="chart"
-											title="专注力分布"
-									/>
-								</template>
+                <template v-if="chartData.percentage?.length > 0">
+                  <PieChart
+                    id="pieChart"
+                    :key="chartData.percentage.toString()"
+                    :data="chartData.percentage"
+                    width="400px"
+                    height="350px"
+                    class="chart"
+                    title="专注力分布"
+                  />
+                </template>
               </div>
             </el-col>
           </el-row>
@@ -185,15 +198,19 @@ watch(
               <el-col :span="11">
                 <p>训练前</p>
                 <div :class="starElement(0, 0)[0]"></div>
-                <div class="status">{{ starElement(0, 0)[1] }} <b>{{ starElement(0, 0)[2] }}</b></div>
+                <div class="status">
+                  {{ starElement(0, 0)[1] }} <b>{{ starElement(0, 0)[2] }}</b>
+                </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="starElement(0, 1)[0]"></div>
-								<div class="status">{{ starElement(0, 1)[1] }} <b>{{ starElement(0, 1)[2] }}</b></div>
+                <div :class="starElement(0, 1)[0]"></div>
+                <div class="status">
+                  {{ starElement(0, 1)[1] }} <b>{{ starElement(0, 1)[2] }}</b>
+                </div>
               </el-col>
             </el-row>
             <p class="content">
@@ -207,16 +224,20 @@ watch(
             <el-row class="compare">
               <el-col :span="11">
                 <p>训练前</p>
-								<div :class="starElement(1, 0)[0]"></div>
-								<div class="status">{{ starElement(1, 0)[1] }} <b>{{ starElement(1, 0)[2] }}</b></div>
+                <div :class="starElement(1, 0)[0]"></div>
+                <div class="status">
+                  {{ starElement(1, 0)[1] }} <b>{{ starElement(1, 0)[2] }}</b>
+                </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="starElement(1, 1)[0]"></div>
-								<div class="status">{{ starElement(1, 1)[1] }} <b>{{ starElement(1, 1)[2] }}</b></div>
+                <div :class="starElement(1, 1)[0]"></div>
+                <div class="status">
+                  {{ starElement(1, 1)[1] }} <b>{{ starElement(1, 1)[2] }}</b>
+                </div>
               </el-col>
             </el-row>
             <p class="content">
@@ -230,16 +251,20 @@ watch(
             <el-row class="compare">
               <el-col :span="11">
                 <p>训练前</p>
-								<div :class="starElement(2, 0)[0]"></div>
-								<div class="status">{{ starElement(2, 0)[1] }} <b>{{ starElement(2, 0)[2] }}</b></div>
+                <div :class="starElement(2, 0)[0]"></div>
+                <div class="status">
+                  {{ starElement(2, 0)[1] }} <b>{{ starElement(2, 0)[2] }}</b>
+                </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="starElement(2, 1)[0]"></div>
-								<div class="status">{{ starElement(2, 1)[1] }} <b>{{ starElement(2, 1)[2] }}</b></div>
+                <div :class="starElement(2, 1)[0]"></div>
+                <div class="status">
+                  {{ starElement(2, 1)[1] }} <b>{{ starElement(2, 1)[2] }}</b>
+                </div>
               </el-col>
             </el-row>
             <p class="content">
@@ -254,16 +279,20 @@ watch(
             <el-row class="compare">
               <el-col :span="11">
                 <p>训练前</p>
-								<div :class="starElement(3, 0)[0]"></div>
-								<div class="status">{{ starElement(3, 0)[1] }} <b>{{ starElement(3, 0)[2] }}</b></div>
+                <div :class="starElement(3, 0)[0]"></div>
+                <div class="status">
+                  {{ starElement(3, 0)[1] }} <b>{{ starElement(3, 0)[2] }}</b>
+                </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="starElement(3, 1)[0]"></div>
-								<div class="status">{{ starElement(3, 1)[1] }} <b>{{ starElement(3, 1)[2] }}</b></div>
+                <div :class="starElement(3, 1)[0]"></div>
+                <div class="status">
+                  {{ starElement(3, 1)[1] }} <b>{{ starElement(3, 1)[2] }}</b>
+                </div>
               </el-col>
             </el-row>
             <p class="content">
@@ -277,16 +306,20 @@ watch(
             <el-row class="compare">
               <el-col :span="11">
                 <p>训练前</p>
-								<div :class="starElement(4, 0)[0]"></div>
-								<div class="status">{{ starElement(4, 0)[1] }} <b>{{ starElement(4, 0)[2] }}</b></div>
+                <div :class="starElement(4, 0)[0]"></div>
+                <div class="status">
+                  {{ starElement(4, 0)[1] }} <b>{{ starElement(4, 0)[2] }}</b>
+                </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="starElement(4, 1)[0]"></div>
-								<div class="status">{{ starElement(4, 1)[1] }} <b>{{ starElement(4, 1)[2] }}</b></div>
+                <div :class="starElement(4, 1)[0]"></div>
+                <div class="status">
+                  {{ starElement(4, 1)[1] }} <b>{{ starElement(4, 1)[2] }}</b>
+                </div>
               </el-col>
             </el-row>
             <p class="content">
@@ -297,60 +330,79 @@ watch(
       </el-row>
     </div>
   </div>
-	<div v-else class="result-container">
-		<div class="empty">
-			<img src="../../assets/empty.png" alt="数据为空">
-			<p>{{ dataMessage }}</p>
-		</div>
-	</div>
+  <div v-else class="result-container">
+    <div class="empty">
+      <img src="../../assets/empty.png" alt="数据为空" />
+      <p>{{ dataMessage }}</p>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.download-btn{
-	position: absolute;
-	z-index: 99;
-	right: 4rem;
-	top: 4rem;
-	width:100px;
-	height:70px;
-	line-height: 16px;
-	text-align: center;
-	span{display: inline-block;width: 100%;}
+.download-btn {
+  position: absolute;
+  top: 4rem;
+  right: 4rem;
+  z-index: 99;
+  width: 100px;
+  height: 70px;
+  line-height: 16px;
+  text-align: center;
+
+  span {
+    display: inline-block;
+    width: 100%;
+  }
 }
+
+.mobile .download-btn {
+  top: -50px;
+  right: 30px;
+}
+
 .result-container {
   position: relative;
   padding: 30px;
-	.empty{
-		padding: 200px 0;
-	}
+
+  .empty {
+    padding: 200px 0;
+  }
+
   .box-card {
-    background: #ffffff;
-    border-radius: 30px;
-    border: 1px solid #e6e8eb;
     position: relative;
+    background: #fff;
+    border: 1px solid #e6e8eb;
+    border-radius: 30px;
   }
+
   .result-title {
     width: 950px;
-    white-space: nowrap;
     font-size: 16px;
+    white-space: nowrap;
+
     .box-card {
       padding: 24px 0 30px 42px;
     }
+
     .l1 {
       line-height: 52px;
       color: #4284f2;
+
       span {
         font-size: 28px;
         font-weight: bold;
       }
     }
+
     .l2 {
       line-height: 32px;
     }
   }
 }
+
 .result-chart {
   margin-top: 12px;
+
   .chart-title {
     position: absolute;
     top: 20px;
@@ -358,82 +410,147 @@ watch(
     font-size: 18px;
     color: #09132e;
   }
+
+  .chart-content {
+    :nth-child(1) {
+      order: 1;
+    }
+
+    :nth-child(2) {
+      order: 2;
+    }
+
+    :nth-child(3) {
+      order: 3;
+    }
+  }
+
   .charts {
     position: relative;
     padding-top: 74px;
     text-align: center;
+
     &.last {
       padding: 0;
     }
+
     .chart {
       margin: 0 auto;
     }
+
     p {
-      margin: 5px 0 0 0;
+      margin: 5px 0 0;
     }
   }
 }
+
+.mobile {
+  .result-title {
+    width: 100%;
+  }
+
+  .result-chart {
+    .chart-title {
+      position: relative;
+    }
+
+    .box-card {
+      margin-bottom: 20px;
+    }
+
+    .chart-content {
+      :nth-child(1) {
+        order: 1;
+      }
+
+      :nth-child(2) {
+        order: 2;
+      }
+
+      :nth-child(3) {
+        order: 0;
+      }
+
+      padding-bottom: 50px;
+    }
+  }
+}
+
 .note-box {
   .note-title {
     height: 54px;
-    line-height: 54px;
     font-size: 18px;
+    line-height: 54px;
     color: #09132e;
   }
+
   .box-card {
-    padding: 15px 34px;
     position: relative;
+    padding: 15px 34px;
     margin-bottom: 15px;
+
     .tit {
-      color: #4284f2;
       margin-bottom: 20px;
+      color: #4284f2;
     }
+
     p {
+      margin: 0;
+      font-size: 14px;
       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;
+        margin-bottom: 12px;
         font-size: 18px;
+        line-height: 42px;
         //font-weight: bold;
         color: #00449b;
-        margin-bottom: 12px;
+        white-space: nowrap;
       }
     }
+
     .content {
       height: 140px;
     }
+
     .note {
       position: absolute;
       bottom: 15px;

src/views/teacher/index.vue

@@ -2,8 +2,12 @@
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
 
-import {getTeacherEquipment, getTeacherGrade, getTeacherManage} from "@/api/teacher";
-import {TeacherItem, TeacherManage} from "@/api/teacher/types";
+import {
+  getTeacherEquipment,
+  getTeacherGrade,
+  getTeacherManage,
+} from "@/api/teacher";
+import { TeacherItem, TeacherManage } from "@/api/teacher/types";
 
 const userStore = useUserStore();
 defineOptions({
@@ -27,10 +31,10 @@ async function getTeacherData(schoolId: number, keyword: string) {
       const temp: TeacherManage = data;
       teacherData.value = temp.lists;
       teacherCount.value = temp.count;
-			dataStatus.value = 1;
+      dataStatus.value = 1;
     })
     .catch((error) => {
-			dataStatus.value = 2;
+      dataStatus.value = 2;
       console.log(error);
     });
 }
@@ -95,149 +99,169 @@ watch(
         >人</span
       >
     </div>
-		<template v-if="dataStatus == 1">
-    <!-- 折叠面板-->
-    <div v-for="teacher in teacherData" :key="teacher.id" class="list-collapse">
-      <el-collapse v-model="teacher.active" @change="collapseTeacher(teacher)">
-        <el-collapse-item :name="teacher.id">
-          <template #title>
-            <div class="title">
-              <span class="blue mr-10">{{ teacher.name }}</span>
-              <span>注册时间：{{ teacher.create_time }}</span>
-              <span class="blue fr"
-                >负责班级 & 绑定设备
-                <el-icon
-                  :class="
-                    teacher.active && teacher.active.includes(teacher.id)
-                      ? 'is-active'
-                      : ''
-                  "
-                  ><CaretBottom/></el-icon>
-              </span>
-            </div>
-          </template>
-          <el-row class="table-container">
-            <el-col :span="19">
-              <el-row>
-                <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.AI : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="水母星球脑机"
-                      align="center"
-                    />
-                  </el-table>
-                </el-col>
-                <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.SW : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑水舞"
-                      align="center"
-                    />
-                  </el-table>
-                </el-col>
-                <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.KL : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑恐龙"
-                      align="center"
-                    />
-                  </el-table>
-                </el-col>
-                <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.PP : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑碰碰车"
-                      align="center"
-                    />
-                  </el-table>
-                </el-col>
-                <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.UF : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column prop="sn" label="智脑UFO" align="center" />
-                  </el-table>
-                </el-col>
-                <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.SU : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column prop="sn" label="智脑SUV" align="center" />
-                  </el-table>
-                </el-col>
-                <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.SC : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑赛车"
-                      align="center"
-                    />
-                  </el-table>
-                </el-col>
-                <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.JM : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑积木"
-                      align="center"
-                    />
-                  </el-table>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="5" class="grade">
-              <el-table
-                :data="teacher.grades"
-                empty-text="-"
-                style="width: 100%"
-              >
-                <el-table-column prop="name" label="负责班级" align="center" />
-              </el-table>
-            </el-col>
-          </el-row>
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-		</template>
-		<template v-else>
-			<div class="empty page-empty">
-				<img src="../../assets/empty.png" alt="数据为空">
-				<p v-if="dataStatus == 0">加载中...</p>
-				<p v-if="dataStatus == 2">暂时还没有任何教师注册绑定学校！</p>
-			</div>
-		</template>
+    <template v-if="dataStatus == 1">
+      <!-- 折叠面板-->
+      <div
+        v-for="teacher in teacherData"
+        :key="teacher.id"
+        class="list-collapse"
+      >
+        <el-collapse
+          v-model="teacher.active"
+          @change="collapseTeacher(teacher)"
+        >
+          <el-collapse-item :name="teacher.id">
+            <template #title>
+              <div class="title">
+                <span class="blue mr-10">{{ teacher.name }}</span>
+                <span>注册时间：{{ teacher.create_time }}</span>
+                <span class="blue fr"
+                  >负责班级 & 绑定设备
+                  <el-icon
+                    :class="
+                      teacher.active && teacher.active.includes(teacher.id)
+                        ? 'is-active'
+                        : ''
+                    "
+                    ><CaretBottom
+                  /></el-icon>
+                </span>
+              </div>
+            </template>
+            <el-row class="table-container">
+              <el-col :xs="24" :span="19">
+                <el-row>
+                  <el-col :xs="6" :span="3">
+                    <el-table
+                      :data="teacher.equipment ? teacher.equipment.AI : []"
+                      empty-text="-"
+                      style="width: 100%"
+                    >
+                      <el-table-column
+                        prop="sn"
+                        label="水母星球脑机"
+                        align="center"
+                      />
+                    </el-table>
+                  </el-col>
+                  <el-col :xs="6" :span="3">
+                    <el-table
+                      :data="teacher.equipment ? teacher.equipment.SW : []"
+                      empty-text="-"
+                      style="width: 100%"
+                    >
+                      <el-table-column
+                        prop="sn"
+                        label="智脑水舞"
+                        align="center"
+                      />
+                    </el-table>
+                  </el-col>
+                  <el-col :xs="6" :span="3">
+                    <el-table
+                      :data="teacher.equipment ? teacher.equipment.KL : []"
+                      empty-text="-"
+                      style="width: 100%"
+                    >
+                      <el-table-column
+                        prop="sn"
+                        label="智脑恐龙"
+                        align="center"
+                      />
+                    </el-table>
+                  </el-col>
+                  <el-col :xs="6" :span="3">
+                    <el-table
+                      :data="teacher.equipment ? teacher.equipment.PP : []"
+                      empty-text="-"
+                      style="width: 100%"
+                    >
+                      <el-table-column
+                        prop="sn"
+                        label="智脑碰碰车"
+                        align="center"
+                      />
+                    </el-table>
+                  </el-col>
+                  <el-col :xs="6" :span="3">
+                    <el-table
+                      :data="teacher.equipment ? teacher.equipment.UF : []"
+                      empty-text="-"
+                      style="width: 100%"
+                    >
+                      <el-table-column
+                        prop="sn"
+                        label="智脑UFO"
+                        align="center"
+                      />
+                    </el-table>
+                  </el-col>
+                  <el-col :xs="6" :span="3">
+                    <el-table
+                      :data="teacher.equipment ? teacher.equipment.SU : []"
+                      empty-text="-"
+                      style="width: 100%"
+                    >
+                      <el-table-column
+                        prop="sn"
+                        label="智脑SUV"
+                        align="center"
+                      />
+                    </el-table>
+                  </el-col>
+                  <el-col :xs="6" :span="3">
+                    <el-table
+                      :data="teacher.equipment ? teacher.equipment.SC : []"
+                      empty-text="-"
+                      style="width: 100%"
+                    >
+                      <el-table-column
+                        prop="sn"
+                        label="智脑赛车"
+                        align="center"
+                      />
+                    </el-table>
+                  </el-col>
+                  <el-col :xs="6" :span="3">
+                    <el-table
+                      :data="teacher.equipment ? teacher.equipment.JM : []"
+                      empty-text="-"
+                      style="width: 100%"
+                    >
+                      <el-table-column
+                        prop="sn"
+                        label="智脑积木"
+                        align="center"
+                      />
+                    </el-table>
+                  </el-col>
+                </el-row>
+              </el-col>
+              <el-col :xs="24" :span="5" class="grade">
+                <el-table
+                  :data="teacher.grades"
+                  empty-text="-"
+                  style="width: 100%"
+                >
+                  <el-table-column
+                    prop="name"
+                    label="负责班级"
+                    align="center"
+                  />
+                </el-table>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </template>
+    <template v-else>
+      <div class="empty page-empty">
+        <img src="../../assets/empty.png" alt="数据为空" />
+        <p v-if="dataStatus == 0">加载中...</p>
+        <p v-if="dataStatus == 2">暂时还没有任何教师注册绑定学校！</p>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -246,87 +270,109 @@ watch(
   position: relative;
   padding: 20px 30px;
 }
+
 .teacher-search {
   margin-bottom: 20px;
   font-size: 16px;
+
   .el-input {
     width: 250px;
     margin: 0;
   }
+
   :deep(.el-input__inner) {
     font-size: 16px;
   }
+
   .el-button {
-    font-size: 16px;
     padding: 0 26px;
     margin: 0 20px;
+    font-size: 16px;
     border-radius: 12px;
   }
+
   b {
     font-size: 20px;
   }
 }
+
 :deep(.el-input__wrapper) {
-  background: #ffffff;
+  background: #fff;
   border-radius: 12px;
-}
-:deep(.el-input__wrapper) {
   box-shadow: none !important;
 }
+
 .list-collapse {
-  background: #ffffff;
-  border-radius: 25px;
   padding: 0 32px;
   margin-bottom: 10px;
+  background: #fff;
+  border-radius: 25px;
+
   .title {
     width: 100%;
     font-size: 18px;
+
     .blue {
       color: #4284f2;
     }
+
     .red {
       color: #e04962;
     }
+
     .fr {
       float: right;
     }
+
     .el-icon {
       vertical-align: middle;
+
       &.is-active {
         transform: rotate(180deg);
       }
     }
   }
+
   :deep(.el-collapse),
   :deep(.el-collapse-item__header),
   :deep(.el-collapse-item__wrap) {
     border: none;
   }
+
   :deep(.el-collapse-item__arrow) {
     display: none;
   }
 }
+
 .table-container {
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoAQMAAAAFeAI0AAAABlBMVEUAAADg5vHOG/+PAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjoC5oAAAA0ACB9zOkNgAAAABJRU5ErkJggg==")
     repeat;
 }
+
+:deep(.el-table .el-table__header .el-table__cell .cell) {
+  white-space: nowrap;
+}
+
 :deep(.el-table__empty-block),
 :deep(.el-table__empty-text) {
   height: 40px !important;
-  line-height: 40px !important;
   min-height: 40px !important;
+  line-height: 40px !important;
 }
 
 :deep(.el-table th.el-table__cell) {
   background: #e9ebee;
 }
+
 :deep(.el-table .el-table__row) {
   min-height: 40px;
 }
+
 .grade {
-  border-left: 1px solid #dddddd;
+  border-left: 1px solid #ddd;
 }
+
 :deep(.grade .el-table th.el-table__cell) {
-  background: #dddddd;
+  background: #ddd;
 }
 </style>

src/views/training/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import {watch} from "vue";
-import {useUserStore} from "@/store/modules/user";
-import {GradeList} from "@/api/grade/types";
-import {TrainingItem, TrainingParams} from "@/api/training/types";
-import {getGradeSelect} from "@/api/grade";
-import {getTrainingLists} from "@/api/training";
+import { watch } from "vue";
+import { useUserStore } from "@/store/modules/user";
+import { GradeList } from "@/api/grade/types";
+import { TrainingItem, TrainingParams } from "@/api/training/types";
+import { getGradeSelect } from "@/api/grade";
+import { getTrainingLists } from "@/api/training";
 
 const userStore = useUserStore();
 defineOptions({
@@ -12,44 +12,43 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const pageParams:TrainingParams = reactive({
-	is_formal: 0,
-	grade_id: 0,
-	page_no: 1,
-	page_size: 12,
+const pageParams: TrainingParams = reactive({
+  is_formal: 0,
+  grade_id: 0,
+  page_no: 1,
+  page_size: 12,
 });
 /**
  * 班级数据
  */
 const gradeData = ref<GradeList[]>();
 async function getGradeData(schoolId: number) {
-	getGradeSelect(schoolId)
-		.then(({ data }) => {
-			gradeData.value = data;
-			gradeData.value?.unshift({ id: 0, name: "全部班级" })
-		})
-		.catch((error) => {
-			gradeData.value = [];
-			gradeData.value?.unshift({ id: 0, name: "全部班级" })
-			console.log(error);
-		});
+  getGradeSelect(schoolId)
+    .then(({ data }) => {
+      gradeData.value = data;
+      gradeData.value?.unshift({ id: 0, name: "全部班级" });
+    })
+    .catch((error) => {
+      gradeData.value = [];
+      gradeData.value?.unshift({ id: 0, name: "全部班级" });
+      console.log(error);
+    });
 }
 const trainingData = ref<TrainingItem[]>();
 const trainingCount = ref(0);
 async function getTrainingData(schoolId: number) {
-	pageParams.school_id = schoolId;
-	getTrainingLists(pageParams)
-		.then(({ data }) => {
-			const {count, lists} = data;
-			trainingData.value = lists;
-			trainingCount.value = count;
-		})
-		.catch((error) => {
-			console.log(error);
-		});
+  pageParams.school_id = schoolId;
+  getTrainingLists(pageParams)
+    .then(({ data }) => {
+      const { count, lists } = data;
+      trainingData.value = lists;
+      trainingCount.value = count;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
 }
 
-
 const tableData = ref<any>([
   {
     number: 1,
@@ -62,21 +61,20 @@ const tableData = ref<any>([
   },
 ]);
 
-
-function getTrainingSearch(){
-	getTrainingData(userStore.schoolId);
+function getTrainingSearch() {
+  getTrainingData(userStore.schoolId);
 }
 onMounted(() => {
-	getGradeData(userStore.schoolId);
-	getTrainingData(userStore.schoolId);
+  getGradeData(userStore.schoolId);
+  getTrainingData(userStore.schoolId);
 });
 watch(
-	() => userStore.schoolId,
-	(newValue) => {
-		// 学校切换后重新获取
-		getGradeData(newValue);
-		getTrainingData(newValue);
-	}
+  () => userStore.schoolId,
+  (newValue) => {
+    // 学校切换后重新获取
+    getGradeData(newValue);
+    getTrainingData(newValue);
+  }
 );
 </script>
 
@@ -89,50 +87,69 @@ watch(
         placeholder="正式学生/体验用户"
         size="large"
       >
-				<el-option key="0" :value="Number(0)" label="全部学生"></el-option>
+        <el-option key="0" :value="Number(0)" label="全部学生"></el-option>
         <el-option key="1" :value="Number(1)" label="正式学生"></el-option>
         <el-option key="2" :value="Number(2)" label="体验用户"></el-option>
       </el-select>
-				<el-select v-model="pageParams.grade_id" placeholder="请选择班级" size="large">
-					<el-option
-							v-for="item in gradeData"
-							:key="item.id"
-							:label="item.name"
-							:value="item.id"
-					/>
-				</el-select>
-				<el-input
-						v-model="pageParams.search"
-						size="large"
-						placeholder="请输入学生名称或手机号码"
-				/>
-				<el-button size="large" type="primary" @click="getTrainingSearch()">查找</el-button>
+      <el-select
+        v-model="pageParams.grade_id"
+        placeholder="请选择班级"
+        size="large"
+      >
+        <el-option
+          v-for="item in gradeData"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <el-input
+        v-model="pageParams.search"
+        size="large"
+        placeholder="请输入学生名称或手机号码"
+      />
+      <el-button size="large" type="primary" @click="getTrainingSearch()"
+        >查找</el-button
+      >
     </div>
     <!-- 学生数据 -->
     <div class="list-table">
       <el-table :data="trainingData" style="width: 100%">
-				<el-table-column type="index" label="序号" align="center" width="80" />
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          max-width="120"
+        />
         <el-table-column prop="name" label="学生名称" align="center" />
         <el-table-column prop="phone" label="手机号码" align="center" />
         <el-table-column prop="device_name" label="训练方式" align="center" />
         <el-table-column prop="create_time" label="训练时间" align="center" />
         <el-table-column prop="play_time" label="训练时长" align="center" />
         <el-table-column prop="grade_name" label="所在班级" align="center" />
-        <el-table-column />
-				<el-table-column label="操作" align="center" >
-					<template #default="scope">
-						<router-link :to="'/training/result?id='+scope.row.game_record_id+'&type='+scope.row.device_id" class="table-btn">报告详情</router-link>
-					</template>
-				</el-table-column>
+        <el-table-column label="操作" align="center" min-width="120">
+          <template #default="scope">
+            <router-link
+              :to="
+                '/training/result?id=' +
+                scope.row.game_record_id +
+                '&type=' +
+                scope.row.device_id
+              "
+              class="table-btn"
+              >报告详情</router-link
+            >
+          </template>
+        </el-table-column>
       </el-table>
     </div>
-		<pagination
-				v-if="trainingCount > 0"
-				v-model:total="trainingCount"
-				v-model:page="pageParams.page_no"
-				v-model:limit="pageParams.page_size"
-				@pagination="getTrainingSearch()"
-		/>
+    <pagination
+      v-if="trainingCount > 0"
+      v-model:total="trainingCount"
+      v-model:page="pageParams.page_no"
+      v-model:limit="pageParams.page_size"
+      @pagination="getTrainingSearch()"
+    />
   </div>
 </template>
 
@@ -141,62 +158,77 @@ watch(
   position: relative;
   padding: 20px 30px;
 }
+
 .training-search {
   margin-bottom: 20px;
   font-size: 16px;
+
   .el-select {
     width: 200px;
     margin: 0 20px 0 0;
   }
+
   .el-input {
     width: 250px;
     margin: 0;
   }
+
   :deep(.el-input__inner) {
     font-size: 16px;
   }
+
   .el-button {
-    font-size: 16px;
     padding: 0 26px;
     margin: 0 20px;
-		border-radius: 10px;
-		background: #4284f2;
+    font-size: 16px;
+    background: #4284f2;
+    border-radius: 10px;
   }
 }
+
 :deep(.el-input__wrapper) {
-  background: #ffffff;
+  background: #fff;
   border-radius: 12px;
-}
-:deep(.el-input__wrapper) {
   box-shadow: none !important;
 }
+
 :deep(.el-select) {
   --el-select-input-focus-border-color: none !important;
 }
+
 :deep(.el-select .el-input__wrapper.is-focus) {
   box-shadow: none !important;
 }
+
 :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
   box-shadow: none !important;
 }
+
+:deep(.el-table .el-table__header .el-table__cell .cell) {
+  white-space: nowrap;
+}
+
 :deep(.el-table th.el-table__cell) {
   background: #e9ebee;
 }
+
 .list-table {
-  background: #ffffff;
-  border-radius: 25px;
   overflow: hidden;
+  background: #fff;
+  border-radius: 25px;
+
   .table-btn {
     display: inline-block;
     height: 38px;
-    line-height: 38px;
     padding: 0 15px;
+    line-height: 38px;
+    color: #fff;
     background: #4284f2;
     border-radius: 10px;
-    color: #ffffff;
+
     &.disabled {
-      background: #bfbfbf;
       cursor: not-allowed;
+      background: #bfbfbf;
     }
   }
 }

src/views/training/result.vue

@@ -3,9 +3,9 @@ import RadarChart from "@/views/charts-components/RadarChart.vue";
 import FocusCircleChart from "@/views/charts-components/FocusCircleChart.vue";
 import CurveLineChart from "@/views/charts-components/CurveLineChart.vue";
 import SimplePieChart from "@/views/charts-components/SimplePieChart.vue";
-import {getUrlParam} from "@/utils";
-import {getTrainingResult} from "@/api/training";
-import {TrainingResult} from "@/api/training/types";
+import { getUrlParam } from "@/utils";
+import { getTrainingResult } from "@/api/training";
+import { TrainingResult } from "@/api/training/types";
 defineOptions({
   name: "TrainingResult",
   inheritAttrs: false,
@@ -22,66 +22,67 @@ const curveData = ref<number[][]>();
 // 专注力分布饼图
 const pieData = ref<number[]>();
 
-
 const gameType = ref(getUrlParam("type"));
 let games = ref<TrainingResult>();
 const chartStatus = ref(false);
 async function getTrainingData() {
-	const gameId = <number>getUrlParam("id")||0;
-	getTrainingResult(gameId)
-		.then(({ data }) => {
-			games.value = <TrainingResult>{...data};
-			if(gameType.value == 0){
-				focusData.value = games.value.height_med;
-				focusTitle.value = "深度放松占比";
-			} else {
-				focusData.value = games.value.height_value;
-				focusTitle.value = "高专注占比";
-			}
-			// 五维雷达图
-			radarData.value = [];
-			radarData.value.push(games.value.radar[0]);
-			radarStar.value = games.value.radar[1];
-			// 专注力分布饼图
-			curveData.value = [];
-			curveData.value.push(games.value.line);
-			curveData.value.push(games.value.line_med);
-			curveData.value.push(games.value.amp);
-			// 专注力分布饼图
-			pieData.value = games.value.percentage;
-			chartStatus.value = true;
-		})
-		.catch((error) => {
-			console.log(error);
-		});
+  const gameId = <number>getUrlParam("id") || 0;
+  getTrainingResult(gameId)
+    .then(({ data }) => {
+      games.value = <TrainingResult>{ ...data };
+      if (gameType.value == 0) {
+        focusData.value = games.value.height_med;
+        focusTitle.value = "深度放松占比";
+      } else {
+        focusData.value = games.value.height_value;
+        focusTitle.value = "高专注占比";
+      }
+      // 五维雷达图
+      radarData.value = [];
+      radarData.value.push(games.value.radar[0]);
+      radarStar.value = games.value.radar[1];
+      // 专注力分布饼图
+      curveData.value = [];
+      curveData.value.push(games.value.line);
+      curveData.value.push(games.value.line_med);
+      curveData.value.push(games.value.amp);
+      // 专注力分布饼图
+      pieData.value = games.value.percentage;
+      chartStatus.value = true;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
 }
 onMounted(() => {
-	//gameType.value = getUrlParam("type")
-	getTrainingData()
+  //gameType.value = getUrlParam("type")
+  getTrainingData();
 });
 </script>
 
 <template>
   <div v-if="games" class="result-container">
-    <div class="result-title" >
+    <div class="result-title">
       <el-row class="box-card">
-				<el-col :sm="12" :md="6" class="head">
-					<div class="l1"><span>{{ games.name }}</span></div>
-					<div class="l2">{{ games.phone }}</div>
-				</el-col>
-        <el-col :sm="12" :md="4">
-          <div class="l1">{{ games.minute||0 }}分{{ games.second }}秒</div>
+        <el-col :xs="12" :span="6" class="head">
+          <div class="l1">
+            <span>{{ games.name }}</span>
+          </div>
+          <div class="l2">{{ games.phone }}</div>
+        </el-col>
+        <el-col :xs="12" :span="4">
+          <div class="l1">{{ games.minute || 0 }}分{{ games.second }}秒</div>
           <div class="l2">训练总时长</div>
         </el-col>
-        <el-col :sm="6" :md="4">
+        <el-col :xs="6" :span="4">
           <div class="l1">{{ games.device_name }}</div>
           <div class="l2">训练场景</div>
         </el-col>
-        <el-col :sm="6" :md="4">
-          <div class="l1">{{ gameType==0?"放松":"专注力" }}</div>
+        <el-col :xs="6" :span="4">
+          <div class="l1">{{ gameType == 0 ? "放松" : "专注力" }}</div>
           <div class="l2">训练模式</div>
         </el-col>
-        <el-col :sm="12" :md="6">
+        <el-col :xs="12" :span="6">
           <div class="l1">{{ games.create_time }}</div>
           <div class="l2">训练时间</div>
         </el-col>
@@ -89,236 +90,240 @@ onMounted(() => {
     </div>
 
     <el-row class="result-chart" :gutter="15">
-			<el-col v-if="games" :xs="24" :sm="12" :md="8">
-				<div class="box-card">
-					<div class="charts p-5">
-						<template v-if="chartStatus">
-							<FocusCircleChart
-									id="focusCircleChart"
-									:key="focusData"
-									:data="focusData"
-									:title="focusTitle"
-									height="200px"
-									width="200px"
-									color="#4284f2"
-									bg-color="#e4e7f4"
-							/>
-						</template>
-					</div>
-					<el-row v-if="gameType==0" class="infos">
-						<el-col :span="5">
-							<div class="l1">{{ games.average_med }}</div>
-							<div class="l2">平均放松度</div>
-						</el-col>
-						<el-col :span="5">
-							<div class="l1">{{ games.high_linemed }}</div>
-							<div class="l2">最高放松度</div>
-						</el-col>
-						<el-col :span="7">
-							<div class="l1">{{ games.scope_med }}</div>
-							<div class="l2">放松度维持区间</div>
-						</el-col>
-						<el-col :span="7">
-							<div class="l1">{{ games.stable_med }}<i>次</i></div>
-							<div class="l2">放松度稳定指数</div>
-						</el-col>
-					</el-row>
-					<el-row v-else class="infos">
-						<el-col :span="8">
-							<div class="l1">{{ games.att_average }}</div>
-							<div class="l2">平均专注力</div>
-						</el-col>
-						<el-col :span="8">
-							<div class="l1">{{ games.scope_diff }}</div>
-							<div class="l2">专注力维持区间</div>
-						</el-col>
-						<el-col :span="8">
-							<div class="l1">{{ games.interfere }}<i>次</i></div>
-							<div class="l2">受干扰次数</div>
-						</el-col>
-					</el-row>
-				</div>
-			</el-col>
-			<el-col v-if="gameType!=0" :xs="24" :sm="12" :md="8">
+      <el-col v-if="games" :xs="24" :span="8">
+        <div class="box-card">
+          <div class="charts p-5">
+            <template v-if="chartStatus">
+              <FocusCircleChart
+                id="focusCircleChart"
+                :key="focusData"
+                :data="focusData"
+                :title="focusTitle"
+                height="200px"
+                width="200px"
+                color="#4284f2"
+                bg-color="#e4e7f4"
+              />
+            </template>
+          </div>
+          <el-row v-if="gameType == 0" class="infos">
+            <el-col :span="5">
+              <div class="l1">{{ games.average_med }}</div>
+              <div class="l2">平均放松度</div>
+            </el-col>
+            <el-col :span="5">
+              <div class="l1">{{ games.high_linemed }}</div>
+              <div class="l2">最高放松度</div>
+            </el-col>
+            <el-col :span="7">
+              <div class="l1">{{ games.scope_med }}</div>
+              <div class="l2">放松度维持区间</div>
+            </el-col>
+            <el-col :span="7">
+              <div class="l1">{{ games.stable_med }}<i>次</i></div>
+              <div class="l2">放松度稳定指数</div>
+            </el-col>
+          </el-row>
+          <el-row v-else class="infos">
+            <el-col :span="8">
+              <div class="l1">{{ games.att_average }}</div>
+              <div class="l2">平均专注力</div>
+            </el-col>
+            <el-col :span="8">
+              <div class="l1">{{ games.scope_diff }}</div>
+              <div class="l2">专注力维持区间</div>
+            </el-col>
+            <el-col :span="8">
+              <div class="l1">{{ games.interfere }}<i>次</i></div>
+              <div class="l2">受干扰次数</div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+      <el-col v-if="gameType != 0" :xs="24" :span="8">
         <div class="box-card">
           <div class="chart-title">5D脑电数据模型</div>
-					<div class="charts">
-						<template v-if="chartStatus">
-						<RadarChart
-								id="radarChart1"
-								:key="radarData.toString()"
-								:data-sets="radarData"
-								:star="radarStar"
-								:tag="radarTag"
-								width="450px"
-								height="350px"
-								class="chart"
-						/></template>
-					</div>
+          <div class="charts">
+            <template v-if="chartStatus">
+              <RadarChart
+                id="radarChart1"
+                :key="radarData.toString()"
+                :data-sets="radarData"
+                :star="radarStar"
+                :tag="radarTag"
+                width="450px"
+                height="350px"
+                class="chart"
+            /></template>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :span="8">
+        <div class="box-card">
+          <div class="chart-title">脑电数值曲线</div>
+          <div class="charts">
+            <template v-if="chartStatus">
+              <CurveLineChart
+                id="curveLineChart"
+                :key="curveData.toString()"
+                :data-sets="curveData"
+                width="450px"
+                height="350px"
+                class="chart"
+            /></template>
+          </div>
         </div>
       </el-col>
-			<el-col :xs="24" :sm="12" :md="8">
-				<div class="box-card">
-					<div class="chart-title">脑电数值曲线</div>
-					<div class="charts">
-						<template v-if="chartStatus">
-						<CurveLineChart
-								id="curveLineChart"
-								:key="curveData.toString()"
-								:data-sets="curveData"
-								width="450px"
-								height="350px"
-								class="chart"
-						/></template>
-					</div>
-				</div>
-			</el-col>
     </el-row>
-		<template v-if="gameType==0">
-			<div  class="note-box">
-				<el-row :gutter="15">
-					<el-col :xs="24" :sm="12" :md="8">
-						<div class="box-card">
-							<div class="tit">深度平均放松度</div>
-							<div class="content">
-								<div :class="'star s'+games.average_content?.star"></div>
-								<p> {{ games.average_content?.content}}</p>
-								<p class="note">
-									这个阶段显示受测者处于一个相对正常的状态，并没有完全的放松下来，也没有完全的紧绷，处理学习或者工作事务是可以的，但如果你此时处于放松（正念）训练当中，那就远远不够了，继续加油哦！
-								</p>
-							</div>
-						</div>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8">
-						<div class="box-card">
-							<div class="tit">深度放松占比</div>
-							<div class="content">
-								<div :class="'star s'+games.height_med_content?.star"></div>
-								<p> {{ games.height_med_content?.content}}</p>
-								<p class="note">
-									这表明你在调配放松状态的能力弱，比较难进入深度放松状态，杂念太多，情绪不够稳定。必要时，请咨询服务老师哦。
-								</p>
-							</div>
-						</div>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8">
-						<div class="box-card">
-							<div class="tit">放松度稳定度</div>
-							<div class="content">
-								<div :class="'star s'+games.stable_med_content?.star"></div>
-								<p> {{ games.stable_med_content?.content}}</p>
-								<p class="note">
-									这表明你的放松状态稳定状况不错，已经可以有意识的让自己的脑力得到一个简短的休整了，仍需进一步训练。
-								</p>
-							</div>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-		</template>
-		<template v-else>
-			<div  class="note-box">
-				<el-row :gutter="15">
-					<el-col :xs="24" :sm="12" :md="8">
-						<div class="box-card">
-							<div class="tit">专注力平均值</div>
-							<div class="content">
-								<div :class="'star s'+games.mean_content?.star"></div>
-								<p> {{ games.mean_content?.content}}</p>
-								<p class="note">
-									通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
-								</p>
-							</div>
-						</div>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8">
-						<div class="box-card">
-							<div class="tit">高专注力占比</div>
-							<div class="content">
-								<div :class="'star s'+games.height_content?.star"></div>
-								<p> {{ games.height_content?.content}}</p>
-								<p class="note">
-									在进行学习和生活任务时，需要主观意志的努力，此时脑电静息电位会提高，专注度也会显示为60分以上，因此，将专注力60分以上定义为高专注区间，这代表高专注区间在整次训练中的占比。
-								</p>
-							</div>
-						</div>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8">
-						<div class="box-card">
-							<div class="tit">专注力稳定度</div>
-							<div class="content">
-								<div :class="'star s'+games.stable_content?.star"></div>
-								<p> {{ games.stable_content?.content}}</p>
-								<p class="note">
-									在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
-								</p>
-							</div>
-						</div>
-					</el-col>
-
-					<el-col :xs="24" :sm="12" :md="8">
-						<div class="box-card">
-							<div class="tit">专注唤醒效率</div>
-							<div class="content">
-								<div :class="'star s'+games.awaken_content?.star"></div>
-								<p> {{ games.awaken_content?.content}}</p>
-								<p class="note">
-									通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
-								</p>
-							</div>
-						</div>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8">
-						<div class="box-card">
-							<div class="tit">整体和谐度</div>
-							<div class="content">
-								<div :class="'star s'+games.linemed_content?.star"></div>
-								<p>{{ games.linemed_content?.content}}</p>
-								<p class="note">
-									既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
-								</p>
-							</div>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-		</template>
-		<div class="note-box">
-			<el-row :gutter="15">
-				<el-col v-if="gameType!=0" :xs="24" :sm="12" :md="8">
-					<div class="box-card">
-						<div class="tit btm">大脑发展小贴士</div>
-						<div class="content">
-							<p v-if="games.minDescription?.length>0">{{ games.minDescription[0]}}</p>
-							<p v-if="games.minDescription?.length>1">{{ games.minDescription[1]}}</p>
-						</div>
-					</div>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8">
-					<div class="box-card">
-						<div class="tit btm">专注力数值累计比例</div>
-						<div class="content flex">
-							<template v-if="chartStatus">
-								<SimplePieChart
-										id="pieChart"
-										:data="pieData"
-										width="200px"
-										height="200px"
-										class="chart"
-										title="专注力数值比例"
-								/></template>
-							<div class="data">
-								<p><span class="tag">81-100</span>（{{ pieData[4] }}）</p>
-								<p><span class="tag">61-80</span>（{{ pieData[3] }}）</p>
-								<p><span class="tag">41-60</span>（{{ pieData[2] }}）</p>
-								<p><span class="tag">21-40</span>（{{ pieData[1] }}）</p>
-								<p><span class="tag">0-20</span>（{{ pieData[0] }}）</p>
-							</div>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
-		</div>
+    <template v-if="gameType == 0">
+      <div class="note-box">
+        <el-row :gutter="15">
+          <el-col :xs="24" :span="8">
+            <div class="box-card">
+              <div class="tit">深度平均放松度</div>
+              <div class="content">
+                <div :class="'star s' + games.average_content?.star"></div>
+                <p>{{ games.average_content?.content }}</p>
+                <p class="note">
+                  这个阶段显示受测者处于一个相对正常的状态，并没有完全的放松下来，也没有完全的紧绷，处理学习或者工作事务是可以的，但如果你此时处于放松（正念）训练当中，那就远远不够了，继续加油哦！
+                </p>
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :span="8">
+            <div class="box-card">
+              <div class="tit">深度放松占比</div>
+              <div class="content">
+                <div :class="'star s' + games.height_med_content?.star"></div>
+                <p>{{ games.height_med_content?.content }}</p>
+                <p class="note">
+                  这表明你在调配放松状态的能力弱，比较难进入深度放松状态，杂念太多，情绪不够稳定。必要时，请咨询服务老师哦。
+                </p>
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :span="8">
+            <div class="box-card">
+              <div class="tit">放松度稳定度</div>
+              <div class="content">
+                <div :class="'star s' + games.stable_med_content?.star"></div>
+                <p>{{ games.stable_med_content?.content }}</p>
+                <p class="note">
+                  这表明你的放松状态稳定状况不错，已经可以有意识的让自己的脑力得到一个简短的休整了，仍需进一步训练。
+                </p>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </template>
+    <template v-else>
+      <div class="note-box">
+        <el-row :gutter="15">
+          <el-col :xs="24" :span="8">
+            <div class="box-card">
+              <div class="tit">专注力平均值</div>
+              <div class="content">
+                <div :class="'star s' + games.mean_content?.star"></div>
+                <p>{{ games.mean_content?.content }}</p>
+                <p class="note">
+                  通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+                </p>
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :span="8">
+            <div class="box-card">
+              <div class="tit">高专注力占比</div>
+              <div class="content">
+                <div :class="'star s' + games.height_content?.star"></div>
+                <p>{{ games.height_content?.content }}</p>
+                <p class="note">
+                  在进行学习和生活任务时，需要主观意志的努力，此时脑电静息电位会提高，专注度也会显示为60分以上，因此，将专注力60分以上定义为高专注区间，这代表高专注区间在整次训练中的占比。
+                </p>
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :span="8">
+            <div class="box-card">
+              <div class="tit">专注力稳定度</div>
+              <div class="content">
+                <div :class="'star s' + games.stable_content?.star"></div>
+                <p>{{ games.stable_content?.content }}</p>
+                <p class="note">
+                  在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
+                </p>
+              </div>
+            </div>
+          </el-col>
+
+          <el-col :xs="24" :span="8">
+            <div class="box-card">
+              <div class="tit">专注唤醒效率</div>
+              <div class="content">
+                <div :class="'star s' + games.awaken_content?.star"></div>
+                <p>{{ games.awaken_content?.content }}</p>
+                <p class="note">
+                  通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+                </p>
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :span="8">
+            <div class="box-card">
+              <div class="tit">整体和谐度</div>
+              <div class="content">
+                <div :class="'star s' + games.linemed_content?.star"></div>
+                <p>{{ games.linemed_content?.content }}</p>
+                <p class="note">
+                  既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
+                </p>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </template>
+    <div class="note-box">
+      <el-row :gutter="15">
+        <el-col v-if="gameType != 0" :xs="24" :span="8">
+          <div class="box-card">
+            <div class="tit btm">大脑发展小贴士</div>
+            <div class="content">
+              <p v-if="games.minDescription?.length > 0">
+                {{ games.minDescription[0] }}
+              </p>
+              <p v-if="games.minDescription?.length > 1">
+                {{ games.minDescription[1] }}
+              </p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :span="8">
+          <div class="box-card">
+            <div class="tit btm">专注力数值累计比例</div>
+            <div class="content flex">
+              <template v-if="chartStatus">
+                <SimplePieChart
+                  id="pieChart"
+                  :data="pieData"
+                  width="200px"
+                  height="200px"
+                  class="chart"
+                  title="专注力数值比例"
+              /></template>
+              <div class="data">
+                <p><span class="tag">81-100</span>（{{ pieData[4] }}）</p>
+                <p><span class="tag">61-80</span>（{{ pieData[3] }}）</p>
+                <p><span class="tag">41-60</span>（{{ pieData[2] }}）</p>
+                <p><span class="tag">21-40</span>（{{ pieData[1] }}）</p>
+                <p><span class="tag">0-20</span>（{{ pieData[0] }}）</p>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
@@ -326,144 +331,210 @@ onMounted(() => {
 .result-container {
   position: relative;
   padding: 30px;
+
   .box-card {
-    background: #ffffff;
-    border-radius: 30px;
-    border: 1px solid #e6e8eb;
     position: relative;
+    background: #fff;
+    border: 1px solid #e6e8eb;
+    border-radius: 30px;
   }
+
   .result-title {
     width: 1058px;
     white-space: nowrap;
+
     .box-card {
       padding: 20px 0 20px 40px;
-	  	line-height: 30px;
-			.head{
-				background: url("../../assets/student/head.png") left center no-repeat;
-				padding-left: 70px;
-			}
+      line-height: 30px;
+
+      .head {
+        padding-left: 70px;
+        background: url("../../assets/student/head.png") left center no-repeat;
+      }
     }
+
     .l1 {
-	  	font-size: 18px;
+      font-size: 18px;
       color: #4284f2;
+
       span {
-				color:#09132e
+        color: #09132e;
       }
     }
+
     .l2 {
-	  	font-size: 16px;
+      font-size: 16px;
     }
   }
 }
+
 .result-chart {
   margin-top: 12px;
+
   .chart-title {
-	position: absolute;
-	top: 20px;
-	left: 30px;
-	font-size: 18px;
-	color: #09132e;
+    position: absolute;
+    top: 20px;
+    left: 30px;
+    font-size: 18px;
+    color: #09132e;
   }
+
   .charts {
     position: relative;
-		box-sizing: border-box;
-		width:450px;
-		margin:0 auto;
+    box-sizing: border-box;
+    width: 450px;
+    margin: 0 auto;
+
     .chart {
       margin: 0 auto;
     }
   }
-	.infos{
-		border-top: 1px solid #e6e8eb;
-		width:450px;
-		margin:0 auto;
-		text-align: center;
-		padding:28px 0 30px 0;
-		.l1 {
-			font-size: 20px;
-			font-weight:bold;
-			color: #4284f2;
-			i {
-				font-size: 14px;
-				font-style: normal;
-				font-weight: normal;
-			}
-		}
-		.l2 {
-			font-size: 16px;
-		}
-	}
+
+  .infos {
+    width: 450px;
+    padding: 28px 0 30px;
+    margin: 0 auto;
+    text-align: center;
+    border-top: 1px solid #e6e8eb;
+
+    .l1 {
+      font-size: 20px;
+      font-weight: bold;
+      color: #4284f2;
+
+      i {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: normal;
+      }
+    }
+
+    .l2 {
+      font-size: 16px;
+    }
+  }
 }
+
 .note-box {
   margin-top: 12px;
+
   .box-card {
-    padding: 15px 34px;
     position: relative;
+    padding: 15px 34px;
     margin-bottom: 15px;
+
     .tit {
-      color: #4284f2;
       margin-bottom: 20px;
-			&.btm{
-				font-size:20px;
-				color: #09132e;
-			}
+      color: #4284f2;
+
+      &.btm {
+        font-size: 20px;
+        color: #09132e;
+      }
+    }
+
+    .content {
+      height: 224px;
+
+      .star {
+        width: 162px;
+        height: 24px;
+        margin: 10px 0;
+        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;
+        }
+      }
+
+      p {
+        margin: 0;
+        font-size: 14px;
+        line-height: 28px;
+        color: #09132e;
+        word-break: break-all;
+      }
+
+      .note {
+        padding-top: 10px;
+        margin-top: 10px;
+        color: #999;
+        border-top: 1px solid #e6e8eb;
+      }
+
+      .data {
+        padding: 10px 0 0 35px;
+
+        p {
+          margin-top: 10px;
+          line-height: 24px;
+          color: #666;
+        }
+
+        .tag {
+          display: inline-block;
+          width: 72px;
+          height: 24px;
+          line-height: 24px;
+          color: #fff;
+          text-align: center;
+          border-radius: 5px;
+        }
+
+        p:nth-child(1) .tag {
+          background: #38c6ff;
+        }
+
+        p:nth-child(2) .tag {
+          background: #546fc6;
+        }
+
+        p:nth-child(3) .tag {
+          background: #8bc86f;
+        }
+
+        p:nth-child(4) .tag {
+          background: #f6bb34;
+        }
+
+        p:nth-child(5) .tag {
+          background: #ed6767;
+        }
+      }
+    }
+  }
+}
+
+.mobile {
+  .result-title {
+    width: 100%;
+
+    .el-col {
+      margin-bottom: 10px;
+    }
+  }
+
+  .result-chart {
+    .box-card {
+      margin-bottom: 10px;
     }
-		.content {
-	  	height:224px;
-			.star {
-				width: 162px;
-				height: 24px;
-				margin: 10px 0;
-				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;
-				}
-			}
-			p {
-				line-height: 28px;
-				color: #09132e;
-				font-size: 14px;
-				margin: 0;
-				word-break: break-all;
-			}
-			.note {
-				margin-top: 10px;
-				padding-top: 10px;
-				border-top: 1px solid #e6e8eb;
-				color:#999999;
-			}
-			.data{
-				padding: 10px 0 0 35px;
-				p{margin-top:10px;line-height:24px;color:#666666;}
-				.tag{
-					display:inline-block;
-					width:72px;
-					height:24px;
-					line-height:24px;
-					color:#ffffff;
-					border-radius:5px;
-					text-align: center;
-				}
-				p:nth-child(1) .tag{background: #38c6ff;}
-				p:nth-child(2) .tag{background: #546fc6;}
-				p:nth-child(3) .tag{background: #8bc86f;}
-				p:nth-child(4) .tag{background: #f6bb34;}
-				p:nth-child(5) .tag{background: #ed6767;}
-			}
-		}
   }
 }
 </style>