fix-修改了一些显示问题，添加了版本切换功能

src/router/index.ts

@@ -19,8 +19,8 @@ const router = createRouter({
     {
       path: "/",
       redirect: () => {
-        window.location.href = "https://p-nju.seec.seecoder.cn/login?from=https://air-nju.seec.seecoder.cn";
-        // window.location.href = "http://localhost:8000/login?from=http://localhost:4000";
+        // window.location.href = "https://p-nju.seec.seecoder.cn/login?from=https://air-nju.seec.seecoder.cn";
+        window.location.href = "http://localhost:8000/login?from=http://localhost:4000";
         // {本地门户首页地址}?from={本地eai首页地址}
         return "/"; // 占位返回值，实际不会执行
     },
@@ -29,11 +29,11 @@ const router = createRouter({
     //   path: "/",
     //   redirect: "/login"
     // },
-    // {
-    //   path: '/login',
-    //   name: 'login',
-    //   component: () => import('../views/LoginPage/LoginPage.vue')
-    // },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('../views/LoginPage/LoginPage.vue')
+    },
     {
       path: '/register',
       name: 'register',
@@ -260,7 +260,7 @@ const router = createRouter({
  */
   router.beforeEach(async (to) => {
     const store = useStore();
-    const publicPaths = [ '/register', '/passwordChange', '/admin/login',];
+    const publicPaths = [ '/register', '/passwordChange', '/login', '/admin/login'];
     // 1. 检查URL中的token
     const urlToken = new URLSearchParams(window.location.search).get('token');
     if (urlToken) {

src/types/history.ts

@@ -0,0 +1,7 @@
+export interface BehaviorVersionItem{
+    id:string
+    timestamp:number
+    name:string
+    time:string
+    author:string
+}

src/utils/xunfeiUtil.js

@@ -214,4 +214,4 @@ export function useXfAsr() {
         startRecognition,
         stopRecognition,
     };
-}
+}

src/views/BehaviorPage/BehaviorBoard.vue

@@ -4,6 +4,7 @@ import {Back} from "@element-plus/icons-vue";
 import {computed, onMounted, provide, type Ref, ref, watch} from "vue";
 import {ElLoading, ElMessage} from "element-plus";
 import useApis from "@/apis";
+import {BehaviorVersionItem} from "@/types/history";
 
 const apis = useApis()
 //pageHeader
@@ -26,7 +27,7 @@ const loadingStatus = ref({
   total:false
 })
 provide('loadingStatus',loadingStatus)
-
+const activeNames = ref(['1'])
 const selectedCourse  = ref({courseName: "", courseId: -1});
 const courseList:Ref<CourseVO[]> = ref([]);
 let courseData:any[]= []
@@ -193,7 +194,9 @@ watch(currentEngagementIndex,()=>{
 })
 provide('currentEngagement',currentEngagement);
 
-
+watch(currentEngagement,()=>{
+  activeNames.value = []
+})
 /**
  * 切换作业题目
  * @param value 作业题目
@@ -233,10 +236,12 @@ function AssignmentChanged(value:AssignmentVO){
 function assignmentSwitch(direction:number){
   if (direction===1){
     console.log("切换下一个作业")
+    activeNames.value = []
     currentEngagementIndex.value++;
   }
   else if (direction===-1){
     console.log("切换上一个作业")
+    activeNames.value = []
     currentEngagementIndex.value--;
   }
   else{
@@ -307,6 +312,70 @@ function downLoadBehaviorData(){
 const handleClose = (done: () => void) => {
   done()
 }
+
+const dataHistory = ref<BehaviorVersionItem[]>([])
+
+const activeVersion = ref('1')
+function getHistory(array:string[]) {
+  if (array.length == 0)return
+  dataHistory.value.length = 0
+  dataHistory.value = []
+
+  // 生成测试数据
+  const now = Date.now()
+  dataHistory.value = [
+    {
+      id: '1',
+      timestamp: now - 1000 * 60 * 60 * 24,
+      name: '版本v1.0.0',
+      time: '2024/01/27 14:30:00',
+      author: currentEngagement.value.studentName
+    },
+    {
+      id: '2',
+      timestamp: now - 1000 * 60 * 60 * 24 * 2,
+      name: '版本v1.0.1',
+      time: '2024/01/26 10:15:00',
+      author: currentEngagement.value.studentName
+    },
+    {
+      id: '3',
+      timestamp: now - 1000 * 60 * 60 * 24 * 3,
+      name: '修复登录问题',
+      time: '2024/01/25 16:45:00',
+      author: currentEngagement.value.studentName
+    },
+    {
+      id: '4',
+      timestamp: now - 1000 * 60 * 60 * 24 * 4,
+      name: '优化界面UI',
+      time: '2024/01/24 09:20:00',
+      author: currentEngagement.value.studentName
+    },
+    {
+      id: '5',
+      timestamp: now - 1000 * 60 * 60 * 24 * 5,
+      name: '版本v1.1.0',
+      time: '2024/01/23 11:00:00',
+      author: currentEngagement.value.studentName
+    },
+    {
+      id: '6',
+      timestamp: now - 1000 * 60 * 60 * 24 * 6,
+      name: '新增搜索功能',
+      time: '2024/01/22 15:10:00',
+      author: currentEngagement.value.studentName
+    },
+    {
+      id: '7',
+      timestamp: now - 1000 * 60 * 60 * 24 * 7,
+      name: '修复数据同步问题',
+      time: '2024/01/21 13:25:00',
+      author: '张三'
+    }
+  ]
+}
+
 onMounted(()=>{
   getCourseList();
 })
@@ -389,8 +458,30 @@ onMounted(()=>{
       </div>
       <el-empty v-else :description="emptyText" style="height: 227px" />
     </el-card>
-    <router-view :class="{hidden:!(!dataIsLoading&&currentEngagement)}" >
 
+    <el-card class="info-card" style="margin-top: 0">
+      <el-collapse style="border: none;" v-model="activeNames" @change="getHistory">
+        <el-collapse-item id="timeline-collapse" name="1">
+          <template #title>
+            <span  style="font-weight: bold;font-size: 16px">版本选择</span>
+          </template>
+          <el-timeline style="margin-bottom: -25px;margin-left: 10px;margin-right: 10px">
+            <el-timeline-item
+                v-for="(activity, index) in dataHistory"
+                :key="index"
+                @click="activeVersion = activity.id"
+            >
+              <div :class="{'timeline-item-row':true,'is-active':activeVersion == activity.id}" >
+                <span >{{activity.name}}</span>
+                <span >{{activity.author}}</span>
+                <span>{{activity.time}}</span>
+              </div>
+            </el-timeline-item>
+          </el-timeline>
+        </el-collapse-item>
+      </el-collapse>
+    </el-card>
+    <router-view :class="{hidden:!(!dataIsLoading&&currentEngagement)}" >
     </router-view>
     <el-dialog
         v-model="dialogVisible"
@@ -425,7 +516,7 @@ onMounted(()=>{
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 30px;
+  gap: 15px;
   margin-bottom: 100px;
 }
 .info-card{
@@ -445,4 +536,18 @@ onMounted(()=>{
   gap: 10px;
   margin-top: 50px;
 }
+.timeline-item-row{
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  & > *{
+    flex: 1;
+  }
+}
+#timeline-collapse > *{
+  border: none;
+}
+.is-active{
+  color: var(--el-color-primary);
+}
 </style>

src/views/BehaviorPage/component/EditCanvas.vue

@@ -27,6 +27,7 @@ watch(currentEngagement,()=>{
       myChart = echarts.init(chartDom);
     }
     getCanvasData(myChart);
+
   },0)
 });
 const loadingStatus = inject('loadingStatus') as Ref<{
@@ -187,193 +188,6 @@ function getCanvasData(chart:EChartsType){
       loadingStatus.value.edit = false;
     }
   })
-  //测试用数据
-
-  // productData = [[new Date('2025-07-26 00:0:20'),0],
-  //   [new Date('2025-07-26 00:0:40'),15],
-  //   [new Date('2025-07-26 00:1:0'),15],
-  //   [new Date('2025-07-26 00:1:20'),17],
-  //   [new Date('2025-07-26 00:1:40'),21],
-  //   [new Date('2025-07-26 00:2:0'),39],
-  //   [new Date('2025-07-26 00:2:20'),49],
-  //   [new Date('2025-07-26 00:2:40'),61],
-  //   [new Date('2025-07-26 00:3:0'),71],
-  //   [new Date('2025-07-26 00:3:20'),89],
-  //   [new Date('2025-07-26 00:3:40'),103],
-  //   [new Date('2025-07-26 00:4:0'),109],
-  //   [new Date('2025-07-26 00:4:20'),109],
-  //   [new Date('2025-07-26 00:4:40'),128],
-  //   [new Date('2025-07-26 00:5:0'),143],
-  //   [new Date('2025-07-26 00:5:20'),143],
-  //   [new Date('2025-07-26 00:5:40'),145],
-  //   [new Date('2025-07-26 00:6:0'),160],
-  //   [new Date('2025-07-26 00:6:20'),177],
-  //   [new Date('2025-07-26 00:6:40'),177],
-  //   [new Date('2025-07-26 00:7:0'),196],
-  //   [new Date('2025-07-26 00:7:20'),199],
-  //   [new Date('2025-07-26 00:7:40'),204],
-  //   [new Date('2025-07-26 00:8:0'),209],
-  //   [new Date('2025-07-26 00:8:20'),213],
-  //   [new Date('2025-07-26 00:8:40'),229],
-  //   [new Date('2025-07-26 00:9:0'),245],
-  //   [new Date('2025-07-26 00:9:20'),250],
-  //   [new Date('2025-07-26 00:9:40'),250],
-  //   [new Date('2025-07-26 00:10:0'),265],
-  //   [new Date('2025-07-26 00:10:20'),266],
-  //   [new Date('2025-07-26 00:10:40'),282],
-  //   [new Date('2025-07-26 00:11:0'),291],
-  //   [new Date('2025-07-26 00:11:20'),308],
-  //   [new Date('2025-07-26 00:11:40'),322],
-  //   [new Date('2025-07-26 00:12:0'),335],
-  //   [new Date('2025-07-26 00:12:20'),343],
-  //   [new Date('2025-07-26 00:12:40'),350],
-  //   [new Date('2025-07-26 00:13:0'),354],
-  //   [new Date('2025-07-26 00:13:20'),367],
-  //   [new Date('2025-07-26 00:13:40'),386],
-  //   [new Date('2025-07-26 00:14:0'),392],
-  //   [new Date('2025-07-26 00:14:20'),411],
-  //   [new Date('2025-07-26 00:14:40'),414],
-  //   [new Date('2025-07-26 00:15:0'),431],
-  //   [new Date('2025-07-26 00:15:20'),437],
-  //   [new Date('2025-07-26 00:15:40'),450],
-  //   [new Date('2025-07-26 00:16:0'),453],
-  //   [new Date('2025-07-26 00:16:20'),468],
-  //   [new Date('2025-07-26 00:16:40'),469],
-  //   [new Date('2025-07-26 00:17:0'),486],
-  //   [new Date('2025-07-26 00:17:20'),486],
-  //   [new Date('2025-07-26 00:17:40'),501],
-  //   [new Date('2025-07-26 00:18:0'),508],
-  //   [new Date('2025-07-26 00:18:20'),515],
-  //   [new Date('2025-07-26 00:18:40'),523],
-  //   [new Date('2025-07-26 00:19:0'),524],
-  //   [new Date('2025-07-26 00:19:20'),529],
-  //   [new Date('2025-07-26 00:19:40'),536],
-  //   [new Date('2025-07-26 00:20:0'),554],
-  //   [new Date('2025-07-26 00:20:20'),563],
-  //   [new Date('2025-07-26 00:20:40'),570],
-  //   [new Date('2025-07-26 00:21:0'),589],
-  //   [new Date('2025-07-26 00:21:20'),600],
-  //   [new Date('2025-07-26 00:21:40'),602],
-  //   [new Date('2025-07-26 00:22:0'),602],
-  //   [new Date('2025-07-26 00:22:20'),618],
-  //   [new Date('2025-07-26 00:22:40'),620],
-  //   [new Date('2025-07-26 00:23:0'),636],
-  //   [new Date('2025-07-26 00:23:20'),650],
-  //   [new Date('2025-07-26 00:23:40'),653],
-  //   [new Date('2025-07-26 00:24:0'),668],
-  //   [new Date('2025-07-26 00:24:20'),670],
-  //   [new Date('2025-07-26 00:24:40'),680],
-  //   [new Date('2025-07-26 00:25:0'),680],
-  //   [new Date('2025-07-26 00:25:20'),695],
-  //   [new Date('2025-07-26 00:25:40'),709],
-  //   [new Date('2025-07-26 00:26:0'),714],
-  //   [new Date('2025-07-26 00:26:20'),714],
-  //   [new Date('2025-07-26 00:26:40'),729],
-  //   [new Date('2025-07-26 00:27:0'),743],
-  //   [new Date('2025-07-26 00:27:20'),747],
-  //   [new Date('2025-07-26 00:27:40'),764],
-  //   [new Date('2025-07-26 00:28:0'),783],
-  //   [new Date('2025-07-26 00:28:20'),792],
-  //   [new Date('2025-07-26 00:28:40'),806],
-  //   [new Date('2025-07-26 00:29:0'),817],
-  //   [new Date('2025-07-26 00:29:20'),823],
-  //   [new Date('2025-07-26 00:29:40'),837],
-  //   [new Date('2025-07-26 00:30:0'),854],];
-  // cursorData = [[new Date('2025-07-26 00:0:20'),0],
-  //   [new Date('2025-07-26 00:0:40'),15],
-  //   [new Date('2025-07-26 00:1:0'),15],
-  //   [new Date('2025-07-26 00:1:20'),17],
-  //   [new Date('2025-07-26 00:1:40'),21],
-  //   [new Date('2025-07-26 00:2:0'),39],
-  //   [new Date('2025-07-26 00:2:20'),49],
-  //   [new Date('2025-07-26 00:2:40'),61],
-  //   [new Date('2025-07-26 00:3:0'),71],
-  //   [new Date('2025-07-26 00:3:20'),89],
-  //   [new Date('2025-07-26 00:3:40'),103],
-  //   [new Date('2025-07-26 00:4:0'),109],
-  //   [new Date('2025-07-26 00:4:20'),109],
-  //   [new Date('2025-07-26 00:4:40'),128],
-  //   [new Date('2025-07-26 00:5:0'),143],
-  //   [new Date('2025-07-26 00:5:20'),143],
-  //   [new Date('2025-07-26 00:5:40'),145],
-  //   [new Date('2025-07-26 00:6:0'),160],
-  //   [new Date('2025-07-26 00:6:20'),177],
-  //   [new Date('2025-07-26 00:6:40'),177],
-  //   [new Date('2025-07-26 00:7:0'),196],
-  //   [new Date('2025-07-26 00:7:20'),199],
-  //   [new Date('2025-07-26 00:7:40'),204],
-  //   [new Date('2025-07-26 00:7:41'),150],
-  //   [new Date('2025-07-26 00:7:59'),158],
-  //   [new Date('2025-07-26 00:8:0'),212],
-  //   [new Date('2025-07-26 00:8:20'),213],
-  //   [new Date('2025-07-26 00:8:40'),229],
-  //   [new Date('2025-07-26 00:9:0'),245],
-  //   [new Date('2025-07-26 00:9:20'),250],
-  //   [new Date('2025-07-26 00:9:40'),250],
-  //   [new Date('2025-07-26 00:10:0'),265],
-  //   [new Date('2025-07-26 00:10:20'),266],
-  //   [new Date('2025-07-26 00:10:40'),282],
-  //   [new Date('2025-07-26 00:11:0'),291],
-  //   [new Date('2025-07-26 00:11:20'),308],
-  //   [new Date('2025-07-26 00:11:40'),322],
-  //   [new Date('2025-07-26 00:12:0'),335],
-  //   [new Date('2025-07-26 00:12:20'),343],
-  //   [new Date('2025-07-26 00:12:40'),350],
-  //   [new Date('2025-07-26 00:13:0'),354],
-  //   [new Date('2025-07-26 00:13:20'),367],
-  //   [new Date('2025-07-26 00:13:40'),386],
-  //   [new Date('2025-07-26 00:14:0'),392],
-  //   [new Date('2025-07-26 00:14:20'),411],
-  //   [new Date('2025-07-26 00:14:40'),414],
-  //   [new Date('2025-07-26 00:15:0'),431],
-  //   [new Date('2025-07-26 00:15:20'),437],
-  //   [new Date('2025-07-26 00:15:40'),450],
-  //   [new Date('2025-07-26 00:16:0'),453],
-  //   [new Date('2025-07-26 00:16:20'),468],
-  //   [new Date('2025-07-26 00:16:40'),469],
-  //   [new Date('2025-07-26 00:17:0'),486],
-  //   [new Date('2025-07-26 00:17:20'),486],
-  //   [new Date('2025-07-26 00:17:40'),501],
-  //   [new Date('2025-07-26 00:18:0'),508],
-  //   [new Date('2025-07-26 00:18:20'),515],
-  //   [new Date('2025-07-26 00:18:40'),523],
-  //   [new Date('2025-07-26 00:19:0'),524],
-  //   [new Date('2025-07-26 00:19:20'),529],
-  //   [new Date('2025-07-26 00:19:40'),536],
-  //   [new Date('2025-07-26 00:20:0'),554],
-  //   [new Date('2025-07-26 00:20:20'),563],
-  //   [new Date('2025-07-26 00:20:40'),570],
-  //   [new Date('2025-07-26 00:21:0'),589],
-  //   [new Date('2025-07-26 00:21:20'),600],
-  //   [new Date('2025-07-26 00:21:40'),602],
-  //   [new Date('2025-07-26 00:22:0'),602],
-  //   [new Date('2025-07-26 00:22:20'),618],
-  //   [new Date('2025-07-26 00:22:40'),620],
-  //   [new Date('2025-07-26 00:23:0'),636],
-  //   [new Date('2025-07-26 00:23:20'),650],
-  //   [new Date('2025-07-26 00:23:40'),653],
-  //   [new Date('2025-07-26 00:24:0'),668],
-  //   [new Date('2025-07-26 00:24:20'),670],
-  //   [new Date('2025-07-26 00:24:40'),680],
-  //   [new Date('2025-07-26 00:25:0'),680],
-  //   [new Date('2025-07-26 00:25:20'),695],
-  //   [new Date('2025-07-26 00:25:40'),709],
-  //   [new Date('2025-07-26 00:26:0'),714],
-  //   [new Date('2025-07-26 00:26:20'),714],
-  //   [new Date('2025-07-26 00:26:21'),500],
-  //   [new Date('2025-07-26 00:26:30'),515],
-  //   [new Date('2025-07-26 00:26:39'),515],
-  //   [new Date('2025-07-26 00:26:40'),729],
-  //   [new Date('2025-07-26 00:27:0'),743],
-  //   [new Date('2025-07-26 00:27:20'),747],
-  //   [new Date('2025-07-26 00:27:40'),764],
-  //   [new Date('2025-07-26 00:28:0'),783],
-  //   [new Date('2025-07-26 00:28:20'),792],
-  //   [new Date('2025-07-26 00:28:40'),806],
-  //   [new Date('2025-07-26 00:29:0'),817],
-  //   [new Date('2025-07-26 00:29:20'),823],
-  //   [new Date('2025-07-26 00:29:40'),837],
-  //   [new Date('2025-07-26 00:30:0'),854],];
 }
 
 onMounted(()=>{

src/views/BehaviorPage/component/PauseCanvas.vue

@@ -115,8 +115,12 @@ function getCanvasData(chart:EChartsType){
             },
             yAxis: {
               type:'value',
-              name:'停顿时间(ms)',
-
+              name:'停顿时间(s)',
+              axisLabel:{
+                formatter: function (value:number) {
+                  return (value/1000).toFixed(2) + 's';
+                }
+              }
             },
             tooltip:{
               formatter:(value:any)=>{
@@ -124,7 +128,7 @@ function getCanvasData(chart:EChartsType){
                 let data = value.data[1];
                 return `停顿时刻:${[date.getHours(), date.getMinutes(), date.getSeconds()]
                     .map(num => num.toString().padStart(2, '0'))
-                    .join(':')}\n  停顿时长:${data}ms`
+                    .join(':')}\n  停顿时长:${(data/1000).toFixed(3)}s`
               }
             },
             visualMap: {
@@ -137,8 +141,11 @@ function getCanvasData(chart:EChartsType){
                 color: ['orange', 'red'] // 渐变范围：小值→蓝色，大值→红色
               },
               itemWidth: props.barWidth,
-              bottom:0,
+              bottom:'center',
               right:0,
+              formatter: function (value:number) {
+                return  (value/1000).toFixed(3)+'s'; // 范围标签显示内容。
+              }
             },
             dataZoom: [
               {

src/views/BehaviorPage/component/ProcessCanvas.vue

@@ -146,8 +146,13 @@ function getCanvasData(chart:EChartsType){
               alignTicks:true
             },{
               type: 'value',
-              name:'停顿时间(ms)',
+              name:'停顿时间(s)',
               position: 'right',
+              axisLabel:{
+                formatter: function (value:number) {
+                  return (value/1000).toFixed(2) + 's';
+                }
+              }
             }],
             tooltip:{
 
@@ -178,6 +183,9 @@ function getCanvasData(chart:EChartsType){
               right:0,
               orient:'horizontal',
               align: 'right',
+              formatter: function (value:number) {
+                return  (value/1000).toFixed(3)+'s'; // 范围标签显示内容。
+              }
             },
             series: [
               {

src/views/BehaviorPage/subPage/BehaviorHome.vue

@@ -78,7 +78,7 @@ function toDetail(index:number){
     </template>
     <div style="width: 100%;height: 350px">
       <EditCanvas
-          :split-number="4"
+          :split-number="3"
           :assignment-id="1"/>
     </div>
   </el-card>
@@ -97,7 +97,7 @@ function toDetail(index:number){
     </template>
     <div style="width: 100%;height: 350px">
       <ProcessCanvas
-          :split-number="4"
+          :split-number="3"
           :assignment-id="1"/>
     </div>
   </el-card>

src/views/BehaviorPage/subPage/EditAnalysis.vue

@@ -134,7 +134,7 @@ onMounted(()=>{
     </template>
     <div class="total-canvas-container">
       <EditCanvas
-          :split-number="10"
+          :split-number="8"
           :assignment-id="1"/>
     </div>
     <div class="table-container">

src/views/BehaviorPage/subPage/PauseAnalysis.vue

@@ -85,11 +85,11 @@ onMounted(()=>{
     </div>
     <div class="statistic-container" v-loading="dataLoading">
       <el-statistic
-          :value="data.totalTime"
+          :value="(data.totalTime/1000).toFixed(3)"
           suffix="min"
           title="停顿总时长">
         <template #suffix>
-          <span class="statistic-suffix" >ms</span>
+          <span class="statistic-suffix" >s</span>
         </template>
       </el-statistic>
       <el-divider direction="vertical" style="height: 50px;margin: 0"/>
@@ -102,18 +102,18 @@ onMounted(()=>{
       </el-statistic>
       <el-divider direction="vertical" style="height: 50px;margin: 0"/>
       <el-statistic
-          :value="data.averagePauseTime"
+          :value="(data.averagePauseTime/1000).toFixed(3)"
           title="平均停顿时长">
         <template #suffix>
-          <span class="statistic-suffix" >ms</span>
+          <span class="statistic-suffix" >s</span>
         </template>
       </el-statistic>
       <el-divider direction="vertical" style="height: 50px;margin: 0"/>
       <el-statistic
-          :value="data.medianPauseTime"
+          :value="(data.medianPauseTime/1000).toFixed(3)"
           title="停顿时长中位数">
         <template #suffix>
-          <span class="statistic-suffix" >ms</span>
+          <span class="statistic-suffix" >s</span>
         </template>
       </el-statistic>
       <el-divider direction="vertical" style="height: 50px;margin: 0"/>

src/views/BehaviorPage/subPage/ProcessAnalysis.vue

@@ -14,7 +14,7 @@ import ProcessCanvas from "@/views/BehaviorPage/component/ProcessCanvas.vue";
       </div>
     </template>
     <div class="total-canvas-container">
-      <ProcessCanvas assignment-id="-1"  split-number="3"/>
+      <ProcessCanvas :assignment-id="-1"  :split-number="8"/>
     </div>
   </el-card>
 </template>

src/views/ClassPage/CourseClass.vue

@@ -2,26 +2,29 @@
     <div class="course-class" v-show="DataLoading">
         <classHeader>{{Coursedata.courseName}}</classHeader>
         <div class="content scroll">
-            <a v-for="(item) in data" :key="item.classId" 
-                class="content-item" 
-                @mouseenter="activeId=item.classId" 
-                @mouseleave="activeId=-1" 
+            <a v-for="(item) in data" :key="item.classId"
+                class="content-item"
+                @mouseenter="activeId=item.classId"
+                @mouseleave="activeId=-1"
                 :class="{'shadow_unactive':item.classId!==activeId,'shadow_active':item.classId===activeId}"
-                @click="{$event.preventDefault();$router.push(`/home/classDetail?classId=${item.classId}&courseId=${item.courseId}`)}"
+                @click="(event)=>{
+                  event.preventDefault();
+                  $router.push(`/home/classDetail?classId=${item.classId}&courseId=${item.courseId}`)
+                }"
             >
                 <h2>{{ item.className }}</h2>
                 <div class="svg-text">
-                    <img src="@/assets/people.svg" width="24px" height="24px"></img> 
+                    <img src="@/assets/people.svg" width="24px" height="24px"/>
                     <span>:</span>
                     <span>{{ item.stuNumber }}</span>
                 </div>
                 <div class="svg-text">
-                    <img src="@/assets/time.svg" width="24px" height="24px"></img> 
+                    <img src="@/assets/time.svg" width="24px" height="24px"/>
                     <span>:</span>
                     <span>{{ item.classTime }}</span>
                 </div>
                 <div class="svg-text">
-                    <img src="@/assets/plus-square.svg" width="24px" height="24px"></img> 
+                    <img src="@/assets/plus-square.svg" width="24px" height="24px"/>
                     <span>:</span>
                     <span>{{item.classCode}}</span>
                 </div>
@@ -35,11 +38,11 @@
                 </div>
             </a>
             <a class="plus"
-                @mouseenter="activeId=-2" 
-                @mouseleave="activeId=-1" 
+                @mouseenter="activeId=-2"
+                @mouseleave="activeId=-1"
                 @click="visible_add=true"
                 :class="{'shadow_unactive':-2!==activeId,'shadow_active':-2===activeId}">
-                <img src="@/assets/add.svg"></img> 
+                <img src="@/assets/add.svg"/>
             </a>
         </div>
     </div>
@@ -59,9 +62,9 @@
     <div v-if="visible_add" class="modal-mask" @click.self="isloading_add || (visible_add=false)" >
         <div class="modal-container">
             <div class="add1" v-show="!isloading_add">
-                <h2>班级名称：</h2> <input type="text" v-model.trim="addClassName" placeholder="班级名称建议小于6个字"></input>
+                <h2>班级名称：</h2> <input type="text" v-model.trim="addClassName" placeholder="班级名称建议小于6个字"/>
             </div>
-            <div class="add1" v-show="isloading_add" 
+            <div class="add1" v-show="isloading_add"
             :style="{'height': '66%', 'margin-left':'210px'}">
                 <h2>上传中...</h2>
             </div>
@@ -83,7 +86,7 @@
                     <option value="08:00">08:00</option>
                     <option value="10:10">10:10</option>
                     <option value="14:00">14:00</option>
-                    <option value="16:10">16:10</option> 
+                    <option value="16:10">16:10</option>
                 </select>
             </div>
             <div class="modal-footer add2">
@@ -160,7 +163,7 @@ const AddClass = async () =>{
         visible_add.value=false
         addClassName.value = ""
         addClassDay.value = ""
-        addClassClock.value = ""    
+        addClassClock.value = ""
         getClass()
     }
     else{
@@ -245,7 +248,7 @@ export default {
         width: 160px;
         height: 260px;
         border-radius: 25px;
-        border: 20px solid #70bbdb; 
+        border: 20px solid #70bbdb;
         cursor: pointer;
         transition: all 0.3s ease;
         margin-left: 20px;
@@ -292,13 +295,13 @@ export default {
     }
     a:active{
         box-shadow: none;
-        border: 25px solid #4a90c4; 
+        border: 25px solid #4a90c4;
     }
     .plus{
         width: 160px;
         height: 260px;
         border-radius: 25px;
-        border: 20px solid #70bbdb; 
+        border: 20px solid #70bbdb;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -416,6 +419,6 @@ export default {
         .add2 {
             height: 33%;
         }
-    }   
+    }
 }
-</style>
+</style>