页面修改

src/pages/stuMan/StudentProgress.vue

 <template>
-  <div
-    class="column"
+  <div class="column"
     style="background-color: #e3e6ed; overflow: hidden; position: absolute; left: 0; right: 0; top: 0; bottom: 0;"
-    @click="cancleCellHandle"
-  >
+    @click="cancleCellHandle">
     <study-header @change="getStudents" ref="studyHeaderRef"></study-header>
     <div class="sptable-box col" id="sptable">
       <div class="sptable-wrap" v-loading="loading">
@@ -11,12 +9,7 @@
           <thead>
             <tr class="sticky-header">
               <th class="sticky-column stubg">学员</th>
-              <th
-                class="stubg cursor-pointer"
-                v-for="(x, i) in students"
-                :key="i"
-                @click="showStuRight(x)"
-              >
+              <th class="stubg cursor-pointer" v-for="(x, i) in students" :key="i" @click="showStuRight(x)">
                 {{ x.GuestName }}
               </th>
             </tr>
@@ -26,6 +19,9 @@
               <td class="sticky-column coursebg">课程</td>
               <td class="coursebg " v-for="(x, i) in students" :key="i">
                 <template v-if="x.CourseRate<=6">
+                  <q-tooltip anchor="top middle" :offset="[10, 10]">
+                    {{x.CourseName}}
+                  </q-tooltip>
                   {{ x.NewCourseName }}
                 </template>
                 <template v-else>
@@ -35,27 +31,16 @@
             </tr>
             <tr>
               <td class="sticky-column teacherbg">班主任</td>
-              <td
-                class="teacherbg cursor-pointer "
-                v-for="(x, i) in students"
-                @click="showDialogHandle(x, 1)"
-                :key="i"
-              >
+              <td class="teacherbg cursor-pointer " v-for="(x, i) in students" @click="showDialogHandle(x, 1)" :key="i">
                 {{ x.HeadMasterName }}
               </td>
             </tr>
             <tr>
               <td class="sticky-column studybg">方式</td>
-              <td
-                @click="showDialogHandle(x, 2)"
-                class="cursor-pointer "
-                :class="{
+              <td @click="showDialogHandle(x, 2)" class="cursor-pointer " :class="{
                   'study-online-bg': x.TeachingMethod == 2,
                   studybg: x.TeachingMethod != 2
-                }"
-                v-for="(x, i) in students"
-                :key="i"
-              >
+                }" v-for="(x, i) in students" :key="i">
                 {{ x.TeachingMethod == 2 ? "线上" : "面授" }}
               </td>
             </tr>
@@ -63,27 +48,19 @@
               <td class="sticky-column defaultBg">
                 进度<br />({{ currentCourse.ClassHours }}课时)
               </td>
-              <td
-                @click="showDialogHandle(x, 3)"
-                v-for="(x, i) in students"
-                :key="i"
-                :class="{
+              <td @click="showDialogHandle(x, 3)" v-for="(x, i) in students" :key="i" :class="{
                   stop:
                     currentCourse.ClassHours - x.ClassProgress < 0 ||
                     x.ScheduleStatus == 1
-                }"
-                class="cursor-pointer "
-              >
-                <div
-                  v-if="
+                }" class="cursor-pointer ">
+                <div v-if="
                     (currentCourse.CourseRate == 10 ||
                     currentCourse.CourseRate == 11
                       ? x.TotalTimes
                       : currentCourse.ClassHours) -
                       x.ClassProgress <
                       0 || x.ScheduleStatus == 1
-                  "
-                >
+                  ">
                   <div>暂停排课</div>
                   <div style="font-size: 12px;font-family: microsoft yahei;">
                     {{
@@ -100,27 +77,20 @@
                       : "正常排课"
                   }}
                 </div>
-                <span style="font-size: 12px;font-family: microsoft yahei;"
-                  >剩余{{
+                <span style="font-size: 12px;font-family: microsoft yahei;">剩余{{
                     (currentCourse.CourseRate == 10 ||
                     currentCourse.CourseRate == 11
-                      ? x.TotalTimes
+                      ? x.TotalHours
                       : currentCourse.ClassHours) - x.ClassProgress
-                  }}课时</span
-                >
+                  }}课时</span>
               </td>
             </tr>
             <tr>
               <td class="sticky-column studybg">备注</td>
-              <td
-                v-for="(x, i) in students"
-                :key="i"
+              <td v-for="(x, i) in students" :key="i"
                 style="word-wrap: break-word;white-space: wrap; max-width: 150px; vertical-align: middle;"
-                @click="changeRemark(i)"
-                @blur="setRemark(i)"
-                :contenteditable="i == currentRemark"
-                :ref="`stu_remark_${x.GuestId}`"
-              >
+                @click="changeRemark(i)" @blur="setRemark(i)" :contenteditable="i == currentRemark"
+                :ref="`stu_remark_${x.GuestId}`">
                 {{ x.XGRemark }}
               </td>
             </tr>
@@ -132,12 +102,8 @@
               <td class="sticky-column defaultBg" style="text-align: left;">
                 {{ x.ChapterName }}
               </td>
-              <td
-                v-for="(y, yi) in x.assemble"
-                @click.stop="() => resetContextmenu(i, yi)"
-                @contextmenu.prevent="e => contextMenuHandle(i, yi, e,y)"
-                :key="yi"
-                :class="{
+              <td v-for="(y, yi) in x.assemble" @click.stop="() => resetContextmenu(i, yi)"
+                @contextmenu.prevent="e => contextMenuHandle(i, yi, e,y)" :key="yi" :class="{
                   'disable-class': y && y.overlayer,
                   'focus-box': coor[0] == i && coor[1] == yi,
                   'unchecked':y &&y.State==1,
@@ -146,8 +112,7 @@
                   'onlineStudy':y &&y.State==3 && y.AttendanceMethod==2,
                   'notChecked':y &&y.State==3 && y.AttendanceMethod==3,
                   'study-normal':y &&y.State==3 && y.AttendanceMethod==1
-                }"
-              >
+                }">
                 <template v-if="y&&(y.State<3||y.State==6)">
                   {{ y.StateName }}
                 </template>
@@ -178,43 +143,21 @@
             </tr>
           </tbody>
         </table>
-        <q-card
-          class="rounded-borders"
-          v-if="locationMenu[0] > 0 && locationMenu[0] > 0"
+        <q-card class="rounded-borders" v-if="locationMenu[0] > 0 && locationMenu[0] > 0"
           style="width: 200px; position: absolute; z-index: 9;margin-left: -100px;"
-          :style="{ left: locationMenu[0] + 'px', top: locationMenu[1] + 'px' }"
-        >
+          :style="{ left: locationMenu[0] + 'px', top: locationMenu[1] + 'px' }">
           <q-list bordered>
-            <q-item
-              v-close-popup
-              clickable
-              @click="showDialogHandle(students[coor[1]], 4)"
-              v-if="currentMenuState==0"
-            >
+            <q-item v-close-popup clickable @click="showDialogHandle(students[coor[1]], 4)" v-if="currentMenuState==0">
               <q-item-section>立即排课</q-item-section>
             </q-item>
-            <q-item
-              v-close-popup
-              clickable
-              @click="confirmSub"
-              v-if="currentMenuState==1"
-            >
+            <q-item v-close-popup clickable @click="confirmSub" v-if="currentMenuState==1">
               <q-item-section>确认排课</q-item-section>
             </q-item>
-            <q-item
-              v-close-popup
-              clickable
-              v-if="currentMenuState==1||currentMenuState==2"
-              @click="showDialogHandle(students[coor[1]], 4)"
-            >
+            <q-item v-close-popup clickable v-if="currentMenuState==1||currentMenuState==2"
+              @click="showDialogHandle(students[coor[1]], 4)">
               <q-item-section>修改排课</q-item-section>
             </q-item>
-            <q-item
-              v-close-popup
-              clickable
-              v-if="currentMenuState==1||currentMenuState==2"
-              @click="getPlan"
-            >
+            <q-item v-close-popup clickable v-if="currentMenuState==1||currentMenuState==2" @click="getPlan">
               <q-item-section class="text-negative">取消排课</q-item-section>
             </q-item>
             <!-- <q-item
@@ -230,83 +173,49 @@
       </div>
       <div class="cusor-tools row">
         <div class="col row">
-          <div
-            class="item"
-            @click="changeCourseHandle(x)"
-            :class="{ active: x.CourseId == currentCourse.CourseId }"
-            v-for="(x, i) in list"
-            :key="i"
-          >
+          <div class="item" @click="changeCourseHandle(x)" :class="{ active: x.CourseId == currentCourse.CourseId }"
+            v-for="(x, i) in list" :key="i">
             {{ x.CourseName }}
           </div>
         </div>
-        <scroll-bar
-          targetBox="sptable"
-          targetWrap="sptableWrap"
-          @scrollChange="scrollHandle"
-          ref="scrollBar"
-        ></scroll-bar>
+        <scroll-bar targetBox="sptable" targetWrap="sptableWrap" @scrollChange="scrollHandle" ref="scrollBar">
+        </scroll-bar>
         <div class="q-ml-md row items-center">
           <span>{{ Math.ceil(zoom * 100) }}%</span>
-          <q-btn
-            @click="resetZoom"
-            color="primary"
-            v-show="zoom != 1"
+          <q-btn @click="resetZoom" color="primary" v-show="zoom != 1"
             style="padding: 0; font-size: 11px !important;font-family: microsoft yahei !important; font-weight: 400;"
-            flat
-            label="重置"
-          />
+            flat label="重置" />
         </div>
       </div>
       <q-dialog v-if="showDialog != 0" v-model="dialogVisible" persistent>
-        <set-student-teacher
-          :stuInfo="currentStu"
-          @close="() => (showDialog = 0)"
-          v-if="showDialog == 1"
-          @success="setTeacherHandle"
-        ></set-student-teacher>
-        <set-study-method
-          :stuInfo="currentStu"
-          @close="() => (showDialog = 0)"
-          v-if="showDialog == 2"
-          @success="setStudyHandle"
-        ></set-study-method>
-        <set-study-status
-          :stuInfo="currentStu"
-          @close="() => (showDialog = 0)"
-          v-if="showDialog == 3"
-          @success="settGuestScheduleHandle"
-        ></set-study-status>
-        <set-study-plan
-          :stuInfo="currentStu"
-          :sourceList="sourceStudents"
-          :chapters="chapters"
-          :rate="currentCourse"
-          :coor="coor"
-          @close="() => (showDialog = 0)"
-          v-if="showDialog == 4"
-          @success="setStudyPlayHandle"
-          :planTime="currentSchedu"
-        ></set-study-plan>
+        <set-student-teacher :stuInfo="currentStu" @close="() => (showDialog = 0)" v-if="showDialog == 1"
+          @success="setTeacherHandle"></set-student-teacher>
+        <set-study-method :stuInfo="currentStu" @close="() => (showDialog = 0)" v-if="showDialog == 2"
+          @success="setStudyHandle"></set-study-method>
+        <set-study-status :stuInfo="currentStu" @close="() => (showDialog = 0)" v-if="showDialog == 3"
+          @success="settGuestScheduleHandle"></set-study-status>
+        <set-study-plan :stuInfo="currentStu" :sourceList="sourceStudents" :chapters="chapters" :rate="currentCourse"
+          :coor="coor" @close="() => (showDialog = 0)" v-if="showDialog == 4" @success="setStudyPlayHandle"
+          :planTime="currentSchedu"></set-study-plan>
       </q-dialog>
     </div>
-    <studentRight-form
-      v-if="stuInfoVisible"
-      :save-obj="stuOption"
-      @close="() => (stuInfoVisible = false)"
-    ></studentRight-form>
+    <studentRight-form v-if="stuInfoVisible" :save-obj="stuOption" @close="() => (stuInfoVisible = false)">
+    </studentRight-form>
     <q-dialog v-model="cancelConfirm" persistent>
       <q-card>
         <q-card-section class="row items-center">
           <div>你正在执行取消已确认学员的上课计划，请确认以下操作</div>
           <div class="q-mt-sm">
-            <q-radio v-model="adminCancelChosenOpera" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="yes" label="扣除学员课时按缺勤处理" />
-            <q-radio v-model="adminCancelChosenOpera" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="no" label="无损取消" />
+            <q-radio v-model="adminCancelChosenOpera" checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+              val="yes" label="扣除学员课时按缺勤处理" />
+            <q-radio v-model="adminCancelChosenOpera" checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+              val="no" label="无损取消" />
           </div>
         </q-card-section>
         <q-card-actions align="right">
           <q-btn flat label="不执行此次操作" color="primary" v-close-popup />
-          <q-btn unelevated label="确认选择" @click="checkRemoveChosenHandle" :disable="adminCancelChosenOpera==''" color="primary" v-close-popup />
+          <q-btn unelevated label="确认选择" @click="checkRemoveChosenHandle" :disable="adminCancelChosenOpera==''"
+            color="primary" v-close-popup />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -314,23 +223,32 @@
 </template>
 
 <script>
-import scrollBar from "src/components/common/scrollBar.vue";
-import {
+  import scrollBar from "src/components/common/scrollBar.vue";
+  import {
     queryCoursePage,
     queryChapterTree,
     queryScheduleCourseStu
-} from "../../api/course/index";
-import { SetSureAppointment } from "../../api/studyabroad/subscribe.js";
-import { getStudentInfo } from "src/api/school/index";
-import { setGuestRemark } from "src/api/studentmsg/index";
-import setStudentTeacher from "./components/setStudentTeacher.vue";
-import SetStudyMethod from "./components/setStudyMethod.vue";
-import SetStudyStatus from "./components/setStudyStatus.vue";
-import StudyHeader from "./components/studyHeader.vue";
-import studentRightForm from "src/components/school/student/studentRight-form.vue";
-import SetStudyPlan from "./components/setStudyPlan.vue";
-import {getStuAppointPlan,cancelStuAppointment} from 'src/api/scheduling/schedu'
-export default {
+  } from "../../api/course/index";
+  import {
+    SetSureAppointment
+  } from "../../api/studyabroad/subscribe.js";
+  import {
+    getStudentInfo
+  } from "src/api/school/index";
+  import {
+    setGuestRemark
+  } from "src/api/studentmsg/index";
+  import setStudentTeacher from "./components/setStudentTeacher.vue";
+  import SetStudyMethod from "./components/setStudyMethod.vue";
+  import SetStudyStatus from "./components/setStudyStatus.vue";
+  import StudyHeader from "./components/studyHeader.vue";
+  import studentRightForm from "src/components/school/student/studentRight-form.vue";
+  import SetStudyPlan from "./components/setStudyPlan.vue";
+  import {
+    getStuAppointPlan,
+    cancelStuAppointment
+  } from 'src/api/scheduling/schedu'
+  export default {
     components: {
       scrollBar,
       setStudentTeacher,
@@ -380,11 +298,11 @@ export default {
         },
         coor: [-1, -1],
         locationMenu: [0, 0],
-      currentMenuState:0,
-      currentSchedu:null,
-      cancelConfirm:false,
-      adminCancelChosenOpera:'',
-      updatePlan:{}
+        currentMenuState: 0,
+        currentSchedu: null,
+        cancelConfirm: false,
+        adminCancelChosenOpera: '',
+        updatePlan: {}
       };
     },
     methods: {
@@ -408,7 +326,9 @@ export default {
       getChapters() {
         if (!this.currentCourse || !this.currentCourse.CourseId) return;
         this.loading = true;
-      queryChapterTree({ CourseId: this.currentCourse.CourseId })
+        queryChapterTree({
+            CourseId: this.currentCourse.CourseId
+          })
           .then(res => {
             this.loading = false;
             this.chapters = res.Data;
@@ -425,7 +345,7 @@ export default {
       changeRemark(i) {
         this.currentRemark = i;
       },
-    setStudyPlayHandle(){
+      setStudyPlayHandle() {
         this.showDialog = 0;
         this.getStudentByStoreage()
       },
@@ -434,7 +354,10 @@ export default {
         this.loading = true;
 
         if (playload)
-        this.queryParemeter = { ...this.queryParemeter, ...playload };
+          this.queryParemeter = {
+            ...this.queryParemeter,
+            ...playload
+          };
         if (this.currentCourse.CourseRate != this.queryParemeter.CourseRate) {
           this.queryParemeter.CourseRate = this.currentCourse.CourseRate;
           this.getStudentByStoreage();
@@ -501,7 +424,7 @@ export default {
               this.chapters.push({
                 ChapterId: i + 1,
                 ChapterName: `第${i + 1}次`,
-              ChapterGradeNo: i+1
+                ChapterGradeNo: i + 1
               });
             }
             this.currentCourse.ClassHours = maxTemp;
@@ -522,7 +445,9 @@ export default {
                 this.currentCourse.CourseRate == 11) &&
               stu.TotalTimes < i + 1
             ) {
-            x.assemble.push({ overlayer: true });
+              x.assemble.push({
+                overlayer: true
+              });
             } else {
               x.assemble.push(r);
             }
@@ -587,8 +512,14 @@ export default {
           x => x.GuestId == this.currentStu.GuestId
         );
         if (i < 0) return;
-      this.students[i] = { ...this.students[i], ...playload };
-      this.sourceStudents[j] = { ...this.sourceStudents[j], ...playload };
+        this.students[i] = {
+          ...this.students[i],
+          ...playload
+        };
+        this.sourceStudents[j] = {
+          ...this.sourceStudents[j],
+          ...playload
+        };
       },
       resetContextmenu(i, yi) {
         this.locationMenu = [-1, -1];
@@ -616,7 +547,9 @@ export default {
         if (obj) {
           this.$q.loading.show();
           console.log(obj.StuId);
-        getStudentInfo({ StuId: obj.StuId })
+          getStudentInfo({
+              StuId: obj.StuId
+            })
             .then(r => {
               this.stuOption = r.Data;
               this.stuOption.noEdit = true;
@@ -648,84 +581,88 @@ export default {
 
         });
       },
-    contextMenuHandle(i, yi, e,y) {
-      this.currentMenuState = y?y.State:0
+      contextMenuHandle(i, yi, e, y) {
+        this.currentMenuState = y ? y.State : 0
         this.currentSchedu = y
         const tips = this.$refs[`plantime_${i}_${yi}`]
-      if(tips && tips.length>0){
+        if (tips && tips.length > 0) {
           tips[0].hide()
         }
         this.coor = [i, yi];
         const t = e.target;
         let top = t.offsetTop + t.offsetHeight;
         top =
-        document.querySelector(".sptable-wrap").offsetHeight < top + 48
-          ? t.offsetTop - 48
-          : top;
+          document.querySelector(".sptable-wrap").offsetHeight < top + 48 ?
+          t.offsetTop - 48 :
+          top;
         //sptable-wrap
-      this.locationMenu = [(t.offsetLeft + t.offsetWidth / 2)*this.zoom, top*this.zoom];
+        this.locationMenu = [(t.offsetLeft + t.offsetWidth / 2) * this.zoom, top * this.zoom];
       },
       cancleCellHandle() {
         this.coor = [-1, -1];
         this.locationMenu = [-1, -1];
       },
-    getPlan(){
+      getPlan() {
         const y = this.currentSchedu
         this.$q.loading.show()
-      getStuAppointPlan({AccountId:y.AccountId,Date:y.Date,ShiftSort:y.ShiftSort}).then(r=>{
-        if(r.Code==1){
+        getStuAppointPlan({
+          AccountId: y.AccountId,
+          Date: y.Date,
+          ShiftSort: y.ShiftSort
+        }).then(r => {
+          if (r.Code == 1) {
             const d = r.Data
             this.updatePlan = d
             this.canclePlanClassHandler()
-        }else{
+          } else {
             this.$q.loading.hide()
           }
         })
       },
-    canclePlanClassHandler(){
-      if(this.currentSchedu.State==2){
+      canclePlanClassHandler() {
+        if (this.currentSchedu.State == 2) {
           this.adminCancelChosenOpera = ''
-        this.cancelConfirm=true
-      }else if(this.currentSchedu.State==1){
+          this.cancelConfirm = true
+        } else if (this.currentSchedu.State == 1) {
           this.adminCancelChosenOpera = 'no'
-        this.cancelConfirm=false
+          this.cancelConfirm = false
           this.removePlanHandle()
         }
         this.$q.loading.hide()
       },
-    checkRemoveChosenHandle(){
-      if(this.adminCancelChosenOpera==''){
+      checkRemoveChosenHandle() {
+        if (this.adminCancelChosenOpera == '') {
           this.errorMsgHandle('请选择执行的内容')
           return
         }
         this.cancelConfirm = false
         this.removePlanHandle()
       },
-    errorMsgHandle(msg){
+      errorMsgHandle(msg) {
         this.$q.notify({
           color: "negative",
           message: msg,
           position: "top"
         });
       },
-    removePlanHandle(){
+      removePlanHandle() {
         this.$q.loading.show()
         var chosenList = []
-      this.updatePlan.ChooseStuList.forEach(x=>{
+        this.updatePlan.ChooseStuList.forEach(x => {
           chosenList.push({
-          AppointId:x.AppointmentId,
-          IsCalcStuCheck: this.adminCancelChosenOpera=='yes'?1:0
+            AppointId: x.AppointmentId,
+            IsCalcStuCheck: this.adminCancelChosenOpera == 'yes' ? 1 : 0
           })
         })
 
         cancelStuAppointment({
-        AccountId:this.currentSchedu.AccountId,
-        Date:this.updatePlan.Date,
-        ShiftSort:this.updatePlan.ShiftSort,
-        ChooseStuList:chosenList
-      }).then(r=>{
+          AccountId: this.currentSchedu.AccountId,
+          Date: this.updatePlan.Date,
+          ShiftSort: this.updatePlan.ShiftSort,
+          ChooseStuList: chosenList
+        }).then(r => {
           this.$q.loading.hide()
-        if(r.Code==1){
+          if (r.Code == 1) {
             this.getStudentByStoreage();
             this.$q.notify({
               icon: "iconfont icon-chenggong",
@@ -744,50 +681,60 @@ export default {
       this.getCourse();
     },
     mounted() {
-    document.addEventListener("wheel", this.handleWheel, { passive: false });
+      document.addEventListener("wheel", this.handleWheel, {
+        passive: false
+      });
     },
     beforeDestroy() {
-    document.removeEventListener("wheel", this.handleWheel, { passive: false });
+      document.removeEventListener("wheel", this.handleWheel, {
+        passive: false
+      });
     }
-};
+  };
+
 </script>
 
 <style>
-.sptable-box {
+  .sptable-box {
     width: 100%;
     height: 100%;
     overflow-y: auto;
     padding-bottom: 20px;
     /* user-select: none; */
     background: #fff;
-}
-.sptable-box .sptable-wrap {
+  }
+
+  .sptable-box .sptable-wrap {
     position: relative;
-}
+  }
 
-.sptable-box::-webkit-scrollbar {
+  .sptable-box::-webkit-scrollbar {
     width: 6px;
     height: 6px;
-}
-.sptable-box::-webkit-scrollbar-thumb {
+  }
+
+  .sptable-box::-webkit-scrollbar-thumb {
     background-color: #888;
     border-radius: 6px;
-}
+  }
 
-.sptable-box::-webkit-scrollbar-thumb:hover {
+  .sptable-box::-webkit-scrollbar-thumb:hover {
     background-color: #555;
-}
-.sptable-box::-webkit-scrollbar-track {
+  }
+
+  .sptable-box::-webkit-scrollbar-track {
     background-color: #f1f1f1;
-}
-.sptable {
+  }
+
+  .sptable {
     border-collapse: collapse;
     border: 1px solid #2a363b;
     border-top: none;
     min-width: 100%;
-}
-.sptable td,
-.sptable th {
+  }
+
+  .sptable td,
+  .sptable th {
     border-right: 1px solid #2a363b;
     border-bottom: 1px solid #2a363b;
     padding: 6px 15px;
@@ -797,9 +744,10 @@ export default {
     color: #000;
     outline: none;
     position: relative;
-}
-.sptable td.focus-box::before,
-.sptable td:focus::before {
+  }
+
+  .sptable td.focus-box::before,
+  .sptable td:focus::before {
     position: absolute;
     content: " ";
     display: block;
@@ -810,32 +758,37 @@ export default {
     z-index: 15;
     border: 3px solid #418f1f;
     pointer-events: none;
-}
-.sptable tr td:last-child {
+  }
+
+  .sptable tr td:last-child {
     border-right: none;
-}
-.sptable tr:last-child td:last-child {
+  }
+
+  .sptable tr:last-child td:last-child {
     border: none;
-}
-.sptable .sticky-header th {
+  }
+
+  .sptable .sticky-header th {
     position: sticky;
     top: 0px;
     background: #fff;
     z-index: 2;
     border-bottom: none;
-}
-.sptable .sticky-column {
+  }
+
+  .sptable .sticky-column {
     position: sticky;
     left: 0px;
     background: #fff;
     box-shadow: inset -4px -2px 0px -3px #1fbb7d;
     border-right: 0;
     z-index: 1;
-}
-.sptable .sticky-header th::before,
-.sptable .sticky-header th::after,
-.sptable-box::before,
-.sptable .sticky-column::before {
+  }
+
+  .sptable .sticky-header th::before,
+  .sptable .sticky-header th::after,
+  .sptable-box::before,
+  .sptable .sticky-column::before {
     position: absolute;
     content: "";
     display: block;
@@ -846,30 +799,35 @@ export default {
     bottom: 0;
     z-index: 15;
     height: 100%;
-}
-.sptable-box::before {
+  }
+
+  .sptable-box::before {
     left: 0;
     top: 55px;
-}
-.sptable .sticky-header th::before {
+  }
+
+  .sptable .sticky-header th::before {
     top: 0;
     left: 0;
     width: 100%;
     height: 1px;
-}
-.sptable .sticky-header th::after {
+  }
+
+  .sptable .sticky-header th::after {
     top: unset;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: #1fbb7d;
-}
-.sptable .sticky-header .sticky-column {
+  }
+
+  .sptable .sticky-header .sticky-column {
     z-index: 3;
     border-right: 0;
-}
-.sptable-box .cusor-tools {
+  }
+
+  .sptable-box .cusor-tools {
     position: absolute;
     left: 0;
     right: 0;
@@ -882,8 +840,9 @@ export default {
     border-right: 1px solid #2a363b;
     z-index: 9;
     padding: 0 30px;
-}
-.sptable-box .cusor-tools .item {
+  }
+
+  .sptable-box .cusor-tools .item {
     height: 22px;
     line-height: 22px;
     border: 1px solid transparent;
@@ -895,11 +854,13 @@ export default {
     padding: 0 15px;
     cursor: pointer;
     position: relative;
-}
-.sptable-box .cusor-tools .item:hover {
+  }
+
+  .sptable-box .cusor-tools .item:hover {
     background: #cfcfcf;
-}
-.sptable-box .cusor-tools .item.active {
+  }
+
+  .sptable-box .cusor-tools .item.active {
     background: #fff !important;
     cursor: default !important;
     border-color: #c9ccd2;
@@ -909,48 +870,63 @@ export default {
     color: #007a6b;
     height: 23px;
     line-height: 23px;
-}
-.sptable .coursebg {
+  }
+
+  .sptable .coursebg {
     background: #f5cd79;
-}
-.sptable .stubg {
+  }
+
+  .sptable .stubg {
     background: #26de81;
-}
-.sptable .teacherbg {
+  }
+
+  .sptable .teacherbg {
     background: #778beb;
-}
-.sptable .studybg {
+  }
+
+  .sptable .studybg {
     background: #cf6a87;
-}
-.sptable .study-online-bg {
+  }
+
+  .sptable .study-online-bg {
     background: #fa8231;
-}
-.sptable .stop {
+  }
+
+  .sptable .stop {
     background: #fc427b;
-}
-.sptable .defaultBg {
+  }
+
+  .sptable .defaultBg {
     background: #dfe4ea;
-}
-.sptable .study-normal {
+  }
+
+  .sptable .study-normal {
     background: #20bf6b;
-}
-.sptable .disable-class {
+  }
+
+  .sptable .disable-class {
     background: #e3e6ed;
     cursor: not-allowed;
-}
-.sptable .unchecked {
+  }
+
+  .sptable .unchecked {
     background: #778ca3;
-}
-.sptable .unstudy {
+  }
+
+  .sptable .unstudy {
     background: #58B19F;
-}
-.sptable .onlineStudy{
+  }
+
+  .sptable .onlineStudy {
     background: #8854d0;
-}
-.sptable .notChecked{
+  }
+
+  .sptable .notChecked {
     background: #eb3b5a;
-}
-.sptable .notFreeCancle{
+  }
+
+  .sptable .notFreeCancle {
     background: #acacac;
-}
+  }
+
 </style>