build: "数据图表调试"

src/store/modules/user.ts

@@ -53,8 +53,8 @@ export const useUserStore = defineStore("user", () => {
     nickname.value = data.name;
     phone.value = data.phone;
     schoolNum.value = data.num;
-    //role.value = data.role;
-    role.value = "ADMIN";
+    role.value = data.role;
+    //role.value = "ADMIN";
     perms.value = data.perms;
     return role.value;
   }

src/views/areaboard/index.vue

@@ -276,11 +276,11 @@ onMounted(() => {
     <!-- Echarts 图表 -->
     <div class="charts-container">
       <el-row :gutter="20">
-        <el-col :md="24" :lg="12" :xl="8">
+        <el-col :xs="24" :span="8">
           <div class="charts-item">
             <p class="title">学员专注力平均值整体对比分析</p>
             <el-row justify="space-between">
-              <el-col :xs="24" :sm="12">
+              <el-col :span="12">
                 <div v-if="pieStatus" class="item">
                   <LiquidChart
                     id="liquidChart1"
@@ -298,7 +298,7 @@ onMounted(() => {
                   <p>专注力评估均值</p>
                 </div>
               </el-col>
-              <el-col :xs="24" :sm="12">
+              <el-col :span="12">
                 <div v-if="pieStatus" class="item">
                   <LiquidChart
                     id="liquidChart2"
@@ -318,7 +318,7 @@ onMounted(() => {
               </el-col>
             </el-row>
             <el-row justify="space-between">
-              <el-col :xs="24" :sm="12">
+              <el-col :span="12">
                 <div v-if="pieStatus" class="item">
                   <CircleChart
                     id="circleChart1"
@@ -336,7 +336,7 @@ onMounted(() => {
                   <p>专注力50以上人数比例</p>
                 </div>
               </el-col>
-              <el-col :xs="24" :sm="12">
+              <el-col :span="12">
                 <div v-if="pieStatus" class="item">
                   <CircleChart
                     id="circleChart2"
@@ -358,14 +358,14 @@ onMounted(() => {
           </div>
         </el-col>
         <!-- 学员专注力评分分级占比分析 -->
-        <el-col :md="24" :lg="12" :xl="16">
+        <el-col :xs="24" :span="16">
           <div class="charts-item">
             <p class="title">样本每次训练专注力评分均值整体变化曲线</p>
             <template v-if="lineStatus">
               <line-chart
                 id="lineChart1"
                 :data="lineChartData?.curve"
-                width="1000px"
+                width="100%"
                 height="558px"
               />
             </template>
@@ -375,7 +375,7 @@ onMounted(() => {
     </div>
     <div class="charts-container">
       <el-row :gutter="20">
-        <el-col :md="24" :lg="12" :xl="8">
+        <el-col :xs="24" :span="8">
           <div class="charts-item">
             <p class="title pos">学员专注力训练高专注占比分析</p>
             <template v-if="lineStatus">
@@ -407,11 +407,11 @@ onMounted(() => {
           </div>
         </el-col>
         <!-- 学员专注力评分分级占比分析 -->
-        <el-col :md="24" :lg="12" :xl="16">
+        <el-col :xs="24" :span="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">
+              <el-col :xs="24" :span="12">
                 <div v-if="pieStatus" class="bar">
                   <PercentBarChart
                     id="barChart1"
@@ -425,7 +425,7 @@ onMounted(() => {
                   />
                 </div>
               </el-col>
-              <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
+              <el-col :xs="24" :span="12">
                 <div v-if="pieStatus" class="bar">
                   <PercentBarChart
                     id="barChart2"
@@ -466,11 +466,6 @@ onMounted(() => {
     margin-right: 10px;
   }
 
-  .el-date-editor {
-    width: 300px !important;
-    margin: 0;
-  }
-
   .el-button {
     padding: 0 26px;
     margin: 0 20px;
@@ -483,6 +478,8 @@ onMounted(() => {
 :deep(.el-date-editor) {
   --el-select-input-focus-border-color: none !important;
 
+  width: 300px;
+  margin: 0;
   overflow: hidden;
   border: 1px solid #ddd;
   border-radius: 10px;
@@ -604,4 +601,8 @@ onMounted(() => {
     }
   }
 }
+
+.mobile .el-col {
+  margin-bottom: 10px;
+}
 </style>

src/views/charts-components/CurveLineChart.vue

@@ -1,99 +1,104 @@
 <!-- 圆饼图 -->
 <template>
-	<div :id="id" :class="className" :style="{ height, width }"/>
+  <div :id="id" :class="className" :style="{ height, width }" />
 </template>
 
 <script setup lang="ts">
 import * as echarts from "echarts";
 
 const props = defineProps({
-	id: {
-		type: String,
-		default: "curveLineChart",
-		required: true,
-	},
-	className: {
-		type: String,
-		default: "chart",
-	},
-	width: {
-		type: String,
-		default: "400px",
-	},
-	height: {
-		type: String,
-		default: "300px",
-	},
-	title: {
-		type: String,
-		default: "",
-	},
-	// dataSets:[[1,2,5,6,3,4],[6,3,4,1,2,5],[1,2,3,4,5,6]]
-	dataSets: {
-		type: Array,
-		default: [] as Array<number>,
-	},
+  id: {
+    type: String,
+    default: "curveLineChart",
+    required: true,
+  },
+  className: {
+    type: String,
+    default: "chart",
+  },
+  width: {
+    type: String,
+    default: "400px",
+  },
+  height: {
+    type: String,
+    default: "300px",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  // dataSets:[[1,2,5,6,3,4],[6,3,4,1,2,5],[1,2,3,4,5,6]]
+  dataSets: {
+    type: Array,
+    default: [] as Array<number>,
+  },
 });
 /**
  * 配置项
  */
 const options = {
-	grid: {
-		x: "6%",
-		y: "22%",
-		x2: "0",
-		y2: "16%",
-	},
-	xAxis: {
-		type: "category",
-	},
-	yAxis: {
-		type: "value",
-		offset: -6,
-	},
-	legend: {
-		data: ["Att(专注度)","Med(放松度)","Amp(和谐度)"],
-		top: "6%",
-		right: "0",
-	},
-	color: [
-		"#FAB615",
-		"#40FF31",
-		"#D4327A"
-	],
-	series: [{
-		name: "Att(专注度)",
-		type: "line",
-		symbol: "none",
-		smooth: true,
-		data: props.dataSets?.[0],
-	},
-		{
-			name: "Med(放松度)",
-			type: "line",
-			symbol: "none",
-			smooth: true,
-			data: props.dataSets?.[1],
-		},
-		{
-			name: "Amp(和谐度)",
-			type: "line",
-			symbol: "none",
-			smooth: true,
-			data: props.dataSets?.[2],
-		}
-	]
+  grid: {
+    x: "6%",
+    y: "22%",
+    x2: "0",
+    y2: "16%",
+  },
+  xAxis: {
+    type: "category",
+    axisLabel: {
+      formatter: function (value, index) {
+        return Math.ceil(index / 60) + "分钟";
+      },
+      interval: (index: number, value: string) => {
+        return index % 60 == 0;
+      },
+    },
+  },
+  yAxis: {
+    type: "value",
+    offset: -6,
+  },
+  legend: {
+    data: ["Att(专注度)", "Med(放松度)", "Amp(和谐度)"],
+    top: "6%",
+    right: "0",
+  },
+  color: ["#FAB615", "#40FF31", "#D4327A"],
+  series: [
+    {
+      name: "Att(专注度)",
+      type: "line",
+      symbol: "none",
+      smooth: true,
+      data: props.dataSets?.[0],
+    },
+    {
+      name: "Med(放松度)",
+      type: "line",
+      symbol: "none",
+      smooth: true,
+      data: props.dataSets?.[1],
+    },
+    {
+      name: "Amp(和谐度)",
+      type: "line",
+      symbol: "none",
+      smooth: true,
+      data: props.dataSets?.[2],
+    },
+  ],
 };
 
 onMounted(() => {
-	// 图表初始化
-	const chart = echarts.init(
-			document.getElementById(<string>props.id) as HTMLDivElement
-	);
-	chart.setOption(options);
-	// 大小自适应
-	window.addEventListener("resize", () => {
-		chart.resize();
-	});
+  // 图表初始化
+  const chart = echarts.init(
+    document.getElementById(<string>props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+  // 大小自适应
+  window.addEventListener("resize", () => {
+    chart.resize();
+  });
 });
 </script>

src/views/charts-components/LineChart.vue

@@ -39,10 +39,10 @@ const props = defineProps({
  */
 const options = {
   grid: {
-    x: "5%",
-    y: "5%",
-    x2: "8%",
-    y2: "10%",
+    x: "8%",
+    y: "8%",
+    x2: "12%",
+    y2: "12%",
   },
   xAxis: {
     type: "category",
@@ -124,8 +124,8 @@ const options = {
     calculable: false,
     color: ["#ffd223", "#9685fb"],
     itemWidth: 30,
-    right: "2%",
-    bottom: "5%",
+    right: "5%",
+    bottom: "8%",
   },
 };
 

src/views/charts-components/RadarChart.vue

@@ -24,10 +24,10 @@ const props = defineProps({
     type: String,
     default: "300px",
   },
-	color: {
-		type: String,
-		default: "#063b79",
-	},
+  color: {
+    type: String,
+    default: "#063b79",
+  },
   // dataSets:[[训练后],[训练前]]
   // dataSets:[[78,88,65,82,65],[28,38,45,32,25]]
   dataSets: {
@@ -112,15 +112,15 @@ const indicatorFormatter = (name: string, indicator: any) => {
 const positionLabelData = (data: number[], idx: number) => {
   const labelValue: any = [0, 0, 0, 0, 0];
   labelValue[idx] = data[idx];
-  // idx = 0,1,2,3,4 对应 top,left,left,right,right
+  // idx = 0,1,2,3,4 对应 top,left,bottom,bottom,right
   let pos = "bottom";
   if (idx === 0) {
     pos = "top";
   }
-  if (idx === 1 || idx === 2) {
+  if (idx === 1) {
     pos = "left";
   }
-  if (idx === 3 || idx === 4) {
+  if (idx === 4) {
     pos = "right";
   }
   return {

src/views/dashboard/example.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import PercentBarChart from "@/views/charts-components/PercentBarChart.vue";
+import { watch } from "vue";
+import { useUserStore } from "@/store/modules/user";
 
 defineOptions({
   name: "DashboardExample",
   inheritAttrs: false,
 });
-import { watch } from "vue";
-import { useUserStore } from "@/store/modules/user";
-import CircleChart from "@/views/charts-components/CircleChart.vue";
-import LiquidChart from "@/views/charts-components/LiquidChart.vue";
 const userStore = useUserStore();
 watch(
   () => userStore.schoolId,

src/views/dashboard/index.vue

@@ -3,13 +3,13 @@ import DataCard from "@/views/dashboard/components/DataCard.vue";
 import LiquidChart from "@/views/charts-components/LiquidChart.vue";
 import CircleChart from "@/views/charts-components/CircleChart.vue";
 import PercentBarChart from "@/views/charts-components/PercentBarChart.vue";
-import {watch} from "vue";
-import {useUserStore} from "@/store/modules/user";
+import { watch } from "vue";
+import { useUserStore } from "@/store/modules/user";
 
-import {getDashboardData, getDashboardTop} from "@/api/dashboard";
-import {DashboardCard, DashboardData} from "@/api/dashboard/types";
-import {getGradeSelect} from "@/api/grade";
-import {GradeList} from "@/api/grade/types";
+import { getDashboardData, getDashboardTop } from "@/api/dashboard";
+import { DashboardCard, DashboardData } from "@/api/dashboard/types";
+import { getGradeSelect } from "@/api/grade";
+import { GradeList } from "@/api/grade/types";
 
 const userStore = useUserStore();
 defineOptions({
@@ -24,8 +24,8 @@ const cards = ref<DashboardCard>();
 async function getDataCard(schoolId: number) {
   getDashboardTop(schoolId)
     .then(({ data }) => {
-			cards.value = data
-			cardStatus.value = true;
+      cards.value = data;
+      cardStatus.value = true;
     })
     .catch((error) => {
       console.log(error);
@@ -38,16 +38,16 @@ 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);
+    });
 }
 /**
  * 图表数据
@@ -63,16 +63,16 @@ const chartData = ref<DashboardData>();
 //   frontProportion: { num: [], percentage: [] }, // 初期分期占比分析
 //   afterProportion: { num: [], percentage: [] }, // 近期分期占比分析
 // });
-async function getChartData(schoolId:number, gradeId: number) {
-	chartStatus.value = false;
+async function getChartData(schoolId: number, gradeId: number) {
+  chartStatus.value = false;
   getDashboardData(schoolId, gradeId)
     .then(({ data }) => {
       chartData.value = data;
-			chartStatus.value = true;
+      chartStatus.value = true;
     })
     .catch((error) => {
-			chartStatus.value = false;
-			chartMessage.value = error.message;
+      chartStatus.value = false;
+      chartMessage.value = error.message;
       console.log(error.message);
     });
 }
@@ -82,12 +82,14 @@ function changeGrade() {
   getChartData(userStore.schoolId, gradeId.value);
 }
 onMounted(() => {
-  // 获取班级
-  getGradeData(userStore.schoolId);
-  // 数据卡片
-  getDataCard(userStore.schoolId);
-  // 图表数据
-  getChartData(userStore.schoolId, gradeId.value);
+  if (userStore.schoolId > 0) {
+    // 获取班级
+    getGradeData(userStore.schoolId);
+    // 数据卡片
+    getDataCard(userStore.schoolId);
+    // 图表数据
+    getChartData(userStore.schoolId, gradeId.value);
+  }
 });
 watch(
   () => userStore.schoolId,
@@ -97,7 +99,7 @@ watch(
     gradeId.value = 0;
     getGradeData(newValue);
     getDataCard(newValue);
-    getChartData(newValue,0);
+    getChartData(newValue, 0);
   }
 );
 </script>
@@ -105,16 +107,16 @@ watch(
 <template>
   <div class="dashboard-container">
     <!-- 数据卡片 -->
-		<template v-if="cardStatus">
-			<DataCard
-					:key="cards.toString()"
-					:classes="cards.grade"
-					:teachers="cards.teacher"
-					:students="cards.student"
-					:equipments="cards.equipment"
-					:trainings="cards.game"
-			/>
-		</template>
+    <template v-if="cardStatus">
+      <DataCard
+        :key="cards.toString()"
+        :classes="cards.grade"
+        :teachers="cards.teacher"
+        :students="cards.student"
+        :equipments="cards.equipment"
+        :trainings="cards.game"
+      />
+    </template>
 
     <!-- 班级选择 及 案例展示 -->
     <div class="class-select clear">
@@ -254,18 +256,18 @@ watch(
       <el-col :xs="24" :span="8">
         <div class="charts-item">
           <p class="title">学员专注力平均值整体对比分析</p>
-<!--          <div v-if="dataStatus == 2" class="empty">-->
-<!--            <p>筛选条件的学生人群训练3次以上才能进行训练数据分析，</p>-->
-<!--            <p>当前训练数据不足以进行数据分析！</p>-->
-<!--          </div>-->
-<!--          <div v-if="dataStatus == 3" class="empty">-->
-<!--            <p class="red">合作已过期，无法进行数据看板的查看！</p>-->
-<!--          </div>-->
-<!--          <div v-if="dataStatus == 4" class="empty">-->
-<!--            <p>您的学校还没有任何训练数据！</p>-->
-<!--          </div>-->
+          <!--          <div v-if="dataStatus == 2" class="empty">-->
+          <!--            <p>筛选条件的学生人群训练3次以上才能进行训练数据分析，</p>-->
+          <!--            <p>当前训练数据不足以进行数据分析！</p>-->
+          <!--          </div>-->
+          <!--          <div v-if="dataStatus == 3" class="empty">-->
+          <!--            <p class="red">合作已过期，无法进行数据看板的查看！</p>-->
+          <!--          </div>-->
+          <!--          <div v-if="dataStatus == 4" class="empty">-->
+          <!--            <p>您的学校还没有任何训练数据！</p>-->
+          <!--          </div>-->
           <div class="empty">
-						<img src="../../assets/empty.png" alt="数据为空">
+            <img src="../../assets/empty.png" alt="数据为空" />
             <p>{{ chartMessage }}</p>
           </div>
         </div>
@@ -273,18 +275,18 @@ watch(
       <el-col :xs="24" :span="16">
         <div class="charts-item">
           <p class="title">学员专注力评分分级占比分析</p>
-<!--          <div v-if="dataStatus == 2" class="empty">-->
-<!--            <p>筛选条件的学生人群训练3次以上才能进行训练数据分析，</p>-->
-<!--            <p>当前训练数据不足以进行数据分析！</p>-->
-<!--          </div>-->
-<!--          <div v-if="dataStatus == 3" class="empty">-->
-<!--            <p class="red">合作已过期，无法进行数据看板的查看！</p>-->
-<!--          </div>-->
-<!--          <div v-if="dataStatus == 4" class="empty">-->
-<!--            <p>您的学校还没有任何训练数据！</p>-->
-<!--          </div>-->
+          <!--          <div v-if="dataStatus == 2" class="empty">-->
+          <!--            <p>筛选条件的学生人群训练3次以上才能进行训练数据分析，</p>-->
+          <!--            <p>当前训练数据不足以进行数据分析！</p>-->
+          <!--          </div>-->
+          <!--          <div v-if="dataStatus == 3" class="empty">-->
+          <!--            <p class="red">合作已过期，无法进行数据看板的查看！</p>-->
+          <!--          </div>-->
+          <!--          <div v-if="dataStatus == 4" class="empty">-->
+          <!--            <p>您的学校还没有任何训练数据！</p>-->
+          <!--          </div>-->
           <div class="empty">
-						<img src="../../assets/empty.png" alt="数据为空">
+            <img src="../../assets/empty.png" alt="数据为空" />
             <p>{{ chartMessage }}</p>
           </div>
         </div>
@@ -298,70 +300,80 @@ watch(
   position: relative;
   padding: 30px;
 }
+
 .class-select {
   margin: 30px auto;
+
   .el-select {
     width: 160px;
     margin: 0 20px 0 0;
   }
+
   a {
     display: inline-block;
     height: 38px;
-    line-height: 38px;
     padding: 0 30px;
+    line-height: 38px;
+    color: #fff;
     background: #4284f2;
     border-radius: 12px;
-    color: #ffffff;
   }
 }
+
 /* 自定义 el-select 样式 */
 :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;
 }
 
 .charts-item {
-  background: #ffffff;
+  position: relative;
+  text-align: center;
+  background: #fff;
   border: 1px solid #e8eaec;
   border-radius: 24px;
-  text-align: center;
-  position: relative;
+
   .title {
-    margin: 0;
     height: 78px;
+    margin: 0;
+    font-size: 18px;
     line-height: 78px;
     text-align: left;
     text-indent: 2em;
-    font-size: 18px;
   }
+
   .item {
     padding-bottom: 30px;
   }
+
   .chart {
     margin: 0 auto;
   }
+
   p {
     margin: 0;
-    line-height: 24px;
     font-size: 16px;
+    line-height: 24px;
   }
+
   .bar {
     margin-top: 60px;
   }
+
   .empty {
     padding: 200px 0;
   }

src/views/grade/index.vue

@@ -45,8 +45,10 @@ function changeGradeType() {
 }
 // 打开班级请求学生
 function collapseGrade(grade: GradeItem) {
-  if (!grade.students || grade.students.length === 0) {
-    getStudentList(grade);
+  if (grade.count > 0) {
+    if (!grade.students || grade.students.length === 0) {
+      getStudentList(grade);
+    }
   }
 }
 onMounted(() => {

src/views/student/download.vue

@@ -4,481 +4,581 @@ 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 { getUrlParam } from "@/utils";
 /**
  * pnpm install html2canvas --save
  * 导出页面内容为图片
  */
-import {ref} from "vue";
-import {useUserStore} from "@/store/modules/user";
-import {getStudentBoard} from "@/api/student";
-import {StudentBoard} from "@/api/student/types";
+import { ref } from "vue";
+import { useUserStore } from "@/store/modules/user";
+import { getStudentBoard } from "@/api/student";
+import { StudentBoard } from "@/api/student/types";
 import html2canvas from "html2canvas";
 
 const userStore = useUserStore();
 defineOptions({
-	name: "StudentDownload",
-	inheritAttrs: false,
+  name: "StudentDownload",
+  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];
-			setTimeout(()=>{
-				dialogVisible.value = true;
-			}, 500);
-		})
-		.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];
+      setTimeout(() => {
+        dialogVisible.value = true;
+      }, 500);
+    })
+    .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 ["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 ["star s" + star, tag, value];
 }
 
 const dialogVisible = ref(false);
 onMounted(() => {
-	// 图表数据
-	getChartData(userStore.schoolId);
+  // 图表数据
+  getChartData(userStore.schoolId);
 });
 
 // 绑定需要生成图片的页面内容
 const exportPage = ref();
 // 下载页面内容为图片
-const downloadHandle = (name:string)=>{
-	// html2canvas(绑定的元素,{})
-	html2canvas(exportPage.value,{
-		backgroundColor:"#f3f6fd",//海报的背景颜色
-		useCORS:true, //允许跨域
-		width: document.querySelector(".result-container").offsetWidth , //生成海报的width,默认px
-		height: document.querySelector(".result-container").offsetHeight , //生成海报的height
-	}).then(canvas=>{
-		// canvas 其实就是返回报文，我们所讲的response的意思
-		let  imgSrc = canvas.toDataURL("image/png");
-		// 创建一个临时a标签
-		let saveElement  = document.createElement("a");
-		saveElement.href = imgSrc;
-		// 下载的名字
-		saveElement.download = "训练效果分析报告-"+name+".png";
-		// 直接回调a的点击事件
-		saveElement.click();
-		// 下载之后删除临时a标签
-		saveElement.remove();
-	}).catch(e =>{
-		console.log(e)
-	})
-}
+const downloadHandle = (name: string) => {
+  // html2canvas(绑定的元素,{})
+  html2canvas(exportPage.value, {
+    backgroundColor: "#f3f6fd", //海报的背景颜色
+    useCORS: true, //允许跨域
+    width: document.querySelector(".result-container").offsetWidth, //生成海报的width,默认px
+    height: document.querySelector(".result-container").offsetHeight, //生成海报的height
+  })
+    .then((canvas) => {
+      // canvas 其实就是返回报文，我们所讲的response的意思
+      let imgSrc = canvas.toDataURL("image/png");
+      // 创建一个临时a标签
+      let saveElement = document.createElement("a");
+      saveElement.href = imgSrc;
+      // 下载的名字
+      saveElement.download = "训练效果分析报告-" + name + ".png";
+      // 直接回调a的点击事件
+      saveElement.click();
+      // 下载之后删除临时a标签
+      saveElement.remove();
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
 </script>
 
 <template>
-	<div class="container">
-		<el-dialog v-model="dialogVisible" title="已生成【训练效果分析】离线报告，您可以：">
-			<el-button @click="dialogVisible=false">预览</el-button>
-			<el-button @click="downloadHandle(chartData.name)"  color="#626aef" class="mr-3">下载报告</el-button>
-			<router-link :to="'/student/result?id='+getUrlParam('id')"><el-button  color="#626aef" plain>返回上一页</el-button></router-link>
-		</el-dialog>
-		<div  class="download-btn">
-			<el-button @click="downloadHandle(chartData.name)" color="#626aef" class="mr-5">下载报告</el-button>
-			<router-link :to="'/student/result?id='+getUrlParam('id')"><el-button color="#626aef" plain>返回上一页</el-button></router-link>
-		</div>
-		<div v-if="dataStatus" class="result-container" ref="exportPage">
-			<div class="result-title">
-				<el-row class="box-card">
-					<el-col :span="24">
-						<div class="l1"><span>{{ chartData.name }}</span></div>
-						<div class="l2">{{ chartData.phone }}</div>
-					</el-col>
-					<el-col :span="6">
-						<div class="l1"><span>{{ chartData.count }}</span></div>
-						<div class="l2">训练次数累计</div>
-					</el-col>
-					<el-col :span="7">
-						<div class="l1"><span>{{ chartData.minute }}</span>分<span>{{ chartData.second }}</span>秒</div>
-						<div class="l2">训练时长累计</div>
-					</el-col>
-					<el-col :span="11">
-						<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 :span="24">
-					<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="690px"
-									height="480px"
-									class="chart"
-							/>
-						</template>
-					</div>
-				</el-col>
-				<el-col :span="24">
-					<div class="box-card">
-						<div class="chart-title">专注力区间分布统计</div>
-						<el-row>
-							<el-col :span="24">
-								<div class="charts">
-									<template v-if="chartData.percentage?.length>0">
-										<PieChart
-												id="pieChart"
-												:key="chartData.percentage.toString()"
-												:data="chartData.percentage"
-												width="690px"
-												height="400px"
-												class="chart"
-												title="专注力分布"
-										/>
-									</template>
-								</div>
-							</el-col>
-							<el-col :span="12">
-								<div class="charts last">
-									<CircleChart
-											id="resultChart1"
-											:key="chartData.height"
-											:data="chartData.height"
-											height="220px"
-											width="220px"
-											color="#4284f2"
-											bg-color="#dadff0"
-											font-color="#09132e"
-											font-weight="normal"
-											font-size="18px"
-											:line-width="Number(30)"
-									/>
-									<p>高专注力状态数据占比</p>
-								</div>
-							</el-col>
-							<el-col :span="12">
-								<div class="charts last">
-									<DoubleChart
-											id="doubleChart1"
-											:key="chartData.height_num"
-											:data="chartData.height_num"
-											height="220px"
-											width="220px"
-											color="#4e68b0"
-											bg-color="#d6daed"
-									/>
-									<p>整体高专注力状态数据累计条数</p>
-								</div>
-							</el-col>
-
-						</el-row>
-					</div>
-				</el-col>
-			</el-row>
-
-			<div class="note-box">
-				<div class="note-title">专注力脑电维度数据分析</div>
-				<el-row :gutter="15">
-					<el-col :span="24">
-						<div class="box-card">
-							<div class="tit">专注力平均值</div>
-							<el-row class="compare">
-								<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>
-								</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>
-								</el-col>
-							</el-row>
-							<p class="content">
-								通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
-							</p>
-						</div>
-					</el-col>
-					<el-col :span="24">
-						<div class="box-card">
-							<div class="tit">高专注力占比</div>
-							<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>
-								</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>
-								</el-col>
-							</el-row>
-							<p class="content">
-								在进行学习和生活任务时，需要主观意志的努力，此时脑电静息电位会提高，专注度也会显示为60分以上，因此，将专注力60分以上定义为高专注区间，这代表高专注区间在整次训练中的占比。
-							</p>
-						</div>
-					</el-col>
-					<el-col :span="24">
-						<div class="box-card">
-							<div class="tit">专注力稳定度</div>
-							<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>
-								</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>
-								</el-col>
-							</el-row>
-							<p class="content">
-								在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
-							</p>
-						</div>
-					</el-col>
-
-					<el-col :span="24">
-						<div class="box-card">
-							<div class="tit">专注唤醒效率</div>
-							<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>
-								</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>
-								</el-col>
-							</el-row>
-							<p class="content">
-								通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
-							</p>
-						</div>
-					</el-col>
-					<el-col :span="24">
-						<div class="box-card">
-							<div class="tit">整体和谐度</div>
-							<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>
-								</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>
-								</el-col>
-							</el-row>
-							<p class="content">
-								既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
-							</p>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-		</div>
-	</div>
+  <div class="container">
+    <el-dialog
+      v-model="dialogVisible"
+      title="已生成【训练效果分析】离线报告，您可以："
+    >
+      <el-button @click="dialogVisible = false">预览</el-button>
+      <el-button
+        color="#626aef"
+        class="mr-3"
+        @click="downloadHandle(chartData.name)"
+        >下载报告</el-button
+      >
+      <router-link :to="'/student/result?id=' + getUrlParam('id')"
+        ><el-button color="#626aef" plain>返回上一页</el-button></router-link
+      >
+    </el-dialog>
+    <div class="download-btn">
+      <el-button
+        color="#626aef"
+        class="mr-5"
+        @click="downloadHandle(chartData.name)"
+        >下载报告</el-button
+      >
+      <router-link :to="'/student/result?id=' + getUrlParam('id')"
+        ><el-button color="#626aef" plain>返回上一页</el-button></router-link
+      >
+    </div>
+    <div v-if="dataStatus" ref="exportPage" class="result-container">
+      <div class="result-title">
+        <el-row class="box-card">
+          <el-col :span="24">
+            <div class="l1">
+              <span>{{ chartData.name }}</span>
+            </div>
+            <div class="l2">{{ chartData.phone }}</div>
+          </el-col>
+          <el-col :span="6">
+            <div class="l1">
+              <span>{{ chartData.count }}</span>
+            </div>
+            <div class="l2">训练次数累计</div>
+          </el-col>
+          <el-col :span="7">
+            <div class="l1">
+              <span>{{ chartData.minute }}</span
+              >分<span>{{ chartData.second }}</span
+              >秒
+            </div>
+            <div class="l2">训练时长累计</div>
+          </el-col>
+          <el-col :span="11">
+            <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 :span="24">
+          <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="680px"
+                height="480px"
+                class="chart"
+              />
+            </template>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="box-card">
+            <div class="chart-title">专注力区间分布统计</div>
+            <el-row>
+              <el-col :span="24">
+                <div class="charts pieChart">
+                  <template v-if="chartData.percentage?.length > 0">
+                    <PieChart
+                      id="pieChart"
+                      :key="chartData.percentage.toString()"
+                      :data="chartData.percentage"
+                      width="500px"
+                      height="400px"
+                      class="chart"
+                      title="专注力分布"
+                    />
+                  </template>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="charts last">
+                  <CircleChart
+                    id="resultChart1"
+                    :key="chartData.height"
+                    :data="chartData.height"
+                    height="220px"
+                    width="220px"
+                    color="#4284f2"
+                    bg-color="#dadff0"
+                    font-color="#09132e"
+                    font-weight="normal"
+                    font-size="18px"
+                    :line-width="Number(30)"
+                  />
+                  <p>高专注力状态数据占比</p>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="charts last">
+                  <DoubleChart
+                    id="doubleChart1"
+                    :key="chartData.height_num"
+                    :data="chartData.height_num"
+                    height="220px"
+                    width="220px"
+                    color="#4e68b0"
+                    bg-color="#d6daed"
+                  />
+                  <p>整体高专注力状态数据累计条数</p>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+
+      <div class="note-box">
+        <div class="note-title">专注力脑电维度数据分析</div>
+        <el-row :gutter="15">
+          <el-col :span="24">
+            <div class="box-card">
+              <div class="tit">专注力平均值</div>
+              <el-row class="compare">
+                <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>
+                </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>
+                </el-col>
+              </el-row>
+              <p class="content">
+                通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+              </p>
+            </div>
+          </el-col>
+          <el-col :span="24">
+            <div class="box-card">
+              <div class="tit">高专注力占比</div>
+              <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>
+                </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>
+                </el-col>
+              </el-row>
+              <p class="content">
+                在进行学习和生活任务时，需要主观意志的努力，此时脑电静息电位会提高，专注度也会显示为60分以上，因此，将专注力60分以上定义为高专注区间，这代表高专注区间在整次训练中的占比。
+              </p>
+            </div>
+          </el-col>
+          <el-col :span="24">
+            <div class="box-card">
+              <div class="tit">专注力稳定度</div>
+              <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>
+                </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>
+                </el-col>
+              </el-row>
+              <p class="content">
+                在专注平均值相同时，第一种是专注值高低错落，跳跃明显。第二种是无限接近平均值，显然此种状态代表专注力更加稳定，操控专注力能力更强；在平均专注值高时，稳定度越高越好。
+              </p>
+            </div>
+          </el-col>
+
+          <el-col :span="24">
+            <div class="box-card">
+              <div class="tit">专注唤醒效率</div>
+              <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>
+                </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>
+                </el-col>
+              </el-row>
+              <p class="content">
+                通过脑电检测技术，将各项脑波数值的AI算法分析得出专注力平均值，反应了大脑专注集中在某件事上的程度。
+              </p>
+            </div>
+          </el-col>
+          <el-col :span="24">
+            <div class="box-card">
+              <div class="tit">整体和谐度</div>
+              <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>
+                </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>
+                </el-col>
+              </el-row>
+              <p class="content">
+                既专注又紧张，这种状态在考试和上台表演中比较常见，耗能过高不能长期保持；既专注又轻松，此种状态情绪相对稳定，焦虑值更低，提倡长期保持。和谐度记录的是专注值和放松值的同步率，和谐度越高越好。
+              </p>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.container{
+.container {
   min-width: 100%;
-  min-height:100%;
+  min-height: 100%;
   //background: #1e2e64 url("../../assets/404/404.png") no-repeat;
   background: #1e2e64;
-	:deep(.el-dialog){text-align:center;max-width:600px;}
+
+  :deep(.el-dialog) {
+    max-width: 600px;
+    text-align: center;
+  }
 }
-.download-btn{
+
+.download-btn {
   position: fixed;
+  top: 20px;
+  left: 50%;
   z-index: 99;
-	top: 20px;
-	left:50%;
-	margin-left: -105px;
+  margin-left: -105px;
 }
 
 .result-container {
-	background: #f3f6fd;
-	box-sizing: border-box;
-	width:750px;
-	margin:0 auto;
   position: relative;
+  box-sizing: border-box;
+  width: 750px;
   padding: 30px;
-  .empty{
-	padding: 200px 0;
+  margin: 0 auto;
+  background: #f3f6fd;
+
+  .empty {
+    padding: 200px 0;
   }
+
   .box-card {
-	background: #ffffff;
-	border-radius: 30px;
-	border: 1px solid #e6e8eb;
-	position: relative;
+    position: relative;
+    background: #fff;
+    border: 1px solid #e6e8eb;
+    border-radius: 30px;
   }
+
   .result-title {
-	white-space: nowrap;
-	font-size: 16px;
-	.box-card {
-	  padding: 24px 0 30px 42px;
-	}
-	.l1 {
-	  line-height: 52px;
-	  color: #4284f2;
-	  span {
-		font-size: 28px;
-		font-weight: bold;
-	  }
-	}
-	.l2 {
-	  line-height: 32px;
-	}
+    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;
-	.el-col{
-		margin-bottom: 15px;
-	}
+
+  .el-col {
+    margin-bottom: 15px;
+  }
+
   .chart-title {
-	position: absolute;
-	top: 20px;
-	left: 30px;
-	font-size: 18px;
-	color: #09132e;
+    position: absolute;
+    top: 20px;
+    left: 30px;
+    font-size: 18px;
+    color: #09132e;
   }
+
+  .box-card {
+    padding-bottom: 20px;
+  }
+
   .charts {
-		position: relative;
-		padding-top: 74px;
-		margin:0 auto;
-		text-align: center;
-	&.last {
-	  padding: 0;
-	}
-	.chart {
-	  margin: 0 auto;
-	}
-	p {
-	  margin: 5px 0 0 0;
-	}
+    position: relative;
+    margin: 0 auto;
+    text-align: center;
+
+    &.pieChart {
+      margin-bottom: 20px;
+      border-bottom: 1px solid #e6e8eb;
+    }
+
+    .chart {
+      margin: 0 auto;
+    }
+
+    p {
+      margin: 5px 0 0;
+    }
   }
 }
+
 .note-box {
+  background: #fff;
+  border: 1px solid #e6e8eb;
+  border-radius: 30px;
+
   .note-title {
-	height: 54px;
-	line-height: 54px;
-	font-size: 18px;
-	color: #09132e;
+    height: 54px;
+    font-size: 18px;
+    line-height: 54px;
+    color: #09132e;
+    text-indent: 2em;
   }
+
   .box-card {
-	padding: 15px 34px;
-	position: relative;
-	margin-bottom: 15px;
-	.tit {
-	  color: #4284f2;
-	  margin-bottom: 20px;
-	}
-	p {
-	  line-height: 28px;
-	  color: #686d6d;
-	  font-size: 14px;
-	  margin: 0;
-	}
-	.compare {
-	  text-align: center;
-	  .svg-icon {
-		margin-top: 38px;
-	  }
-	  .star {
-		width: 162px;
-		height: 24px;
-		margin: 10px auto;
-		background: url("../../assets/student/stars.png") no-repeat;
-		background-position-x: 0;
-		&.s1 {
-		  background-position-y: 0;
-		}
-		&.s2 {
-		  background-position-y: -40px;
-		}
-		&.s3 {
-		  background-position-y: -80px;
-		}
-		&.s4 {
-		  background-position-y: -120px;
-		}
-		&.s5 {
-		  background-position-y: -160px;
-		}
-	  }
-	  .status {
-		height: 42px;
-		line-height: 42px;
-		white-space: nowrap;
-		font-size: 18px;
-		//font-weight: bold;
-		color: #00449b;
-		margin-bottom: 12px;
-	  }
-	}
-	.content {
-	  height: 140px;
-	}
-	.note {
-	  position: absolute;
-	  bottom: 15px;
-	}
+    position: relative;
+    padding: 15px 34px;
+    margin-bottom: 15px;
+    border: none;
+
+    .tit {
+      width: 220px;
+      height: 40px;
+      margin: 0 auto 20px;
+      font-size: 17px;
+      line-height: 40px;
+      color: #fff;
+      text-align: center;
+      background: #4284f2;
+      border-radius: 10px;
+    }
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 28px;
+      color: #686d6d;
+    }
+
+    .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;
+        margin-bottom: 12px;
+        font-size: 18px;
+        line-height: 42px;
+        //font-weight: bold;
+        color: #00449b;
+        white-space: nowrap;
+      }
+    }
+
+    .content {
+      padding-bottom: 20px;
+      border-bottom: 1px solid #e6e8eb;
+    }
+
+    .note {
+      position: absolute;
+      bottom: 15px;
+    }
   }
 }
 </style>