修改样式

src/components/course/record-form.vue

 <style>
   #timeleft div {
-    height: 80px;
+    height: 81px;
     color: #333333;
   }
-
+  #timeleft div:last-child{
+    height:71px;
+  }
   #timecenter div {
     height: 65px;
     color: #333333;
@@ -64,7 +66,15 @@
     position: absolute;
     left: 130px;
   }
-
+  .record_List{
+    margin-bottom:10px;
+  }
+  .record_List:last-child{
+    margin-bottom:0;
+  }
+  .TeacherNameList{
+    position: relative;
+  }
 </style>
 <template>
   <div class="page-body">
@@ -77,26 +87,22 @@
         </div>
       </div>
       <div>
-        <div class="col-10" style="margin-top:30px;display:flex;"
+        <div class="col-10" style="margin:20px 0 60px 0;display:flex;"
           v-if="dataList.resultList&&dataList.resultList.length>0">
           <div class="col-4" id="timeleft">
             <div v-for="item in dataList.resultList">
               {{item.YearStr}}-{{item.MonthStr}}-{{item.DayStr}}
             </div>
           </div>
-          <div class="col-4" id="timecenter">
-            <div class="timecenter_Line" :style="{'height':getHeight(dataList.resultList)}">
-              <ul>
-                <li class="cicle1" v-for="(item,index) in dataList.resultList" :class="{'reCordRed':item.ColorType==1,'reCordBlue':item.ColorType==2,
-                'reCordOrange':item.ColorType==3}" :style="{'top':getTop(index)}">
+          <div class="col-4" id="timeright" style="padding-left:25px;margin-left:25px;width:80%;border-left: 1px solid #d1d1d1;">
+            <div v-for="item in dataList.resultList" class="record_List">
+              <div class="TeacherNameList">
+                {{item.TeacherName}}
+                <li class="cicle1"  :class="{'reCordRed':item.ColorType==1,'reCordBlue':item.ColorType==2,
+                'reCordOrange':item.ColorType==3}" style="position:absolute;top:0;left:-41px;">
                   {{getFirst(item.TeacherName)}}
                 </li>
-              </ul>
-            </div>
-          </div>
-          <div class="col-4" id="timeright" style="margin-left:50px;width:80%;">
-            <div v-for="item in dataList.resultList" style="margin-bottom:10px;">
-              <p>{{item.TeacherName}}</p>
+              </div>
               <div class="TeacherContent">
                 签到数{{item.CheckNum}}，缺勤数{{item.NoCheckNum}}
               </div>
@@ -173,12 +179,6 @@
           return val.substr(0, 1);
         }
       },
-      getTop(index) {
-        return index * 77 + 'px';
-      },
-      getHeight(data) {
-        return (data.length - 1) * 80 + 'px'
-      }
     },
     watch: {
       setingObj: function (val, oldval) {