更新

parts/time-table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="index" style="padding-left:10rem">
+  <div id="index" style="padding-left:0rem">
     <el-row type="flex" align="middle" justify="end" class="btn_bar">
       <el-col :span="4" class="printingBtn">
         <el-button type="primary" size="mini" @click="toPrint()">打印课程表</el-button>
@@ -19,11 +19,11 @@
                 <p style="text-align:center;padding:0 10px;color:#000;">课程</p>
                 <p style="text-align:left;padding:0 10px;color:#000;">时间</p>
               </th>
-              <th class="th" v-for="(date, index) in th" :key="index">
+              <th class="ths" v-for="(date, index) in th" :key="index">
                 <p>{{ date | getWeekDay }}</p>
                 <p>（{{ date | getDay }}）</p>
               </th>
-              <th class="th beizhu">备注</th>
+              <th class="ths beizhu">备注</th>
             </tr>
             <!-- 第一行需要合并2行单元格显示上午 -->
             <!-- 第三行需要合并3行单元格显示下午 -->
@@ -34,15 +34,22 @@
               <td>{{ time }}</td>
               <td v-for="(date, di) in th" :key="di" v-html="getLesson(date, time)"></td>
               <td rowspan="5" v-if="ti == 0">
-                <p>
-                  上课地点：<span>{{ data.jslocation || '' }}</span>
-                </p>
-                <p>
-                  班主任：<span class="teacherName">{{ data.headteacher || '' }}</span>
-                </p>
-                <p>
-                  礼仪课：<span class="teacherName">{{ data.lyteacher || '' }}</span>
-                </p>
+                <div class="classInfo">
+                  <p>上课地点</p>
+                  <p>{{ data.jslocation || '' }}</p>
+                </div>
+                <div class="classInfo">
+                  <p>班主任</p>
+                  <p>{{ data.headteacher || '' }}</p>
+                </div>
+                <div class="classInfo">
+                  <p>礼仪课</p>
+                  <p>{{ data.lyteacher || '暂无' }}</p>
+                </div>
+                <div class="classInfo">
+                  <p>督导值班</p>
+                  <p>{{ data.reteacher || '' }}</p>
+                </div>
               </td>
             </tr>
             <tr>
@@ -104,4 +111,13 @@ export default {
 
 <style lang="less" scoped>
 @import '~@frame/style/timeTable.less';
+.classInfo {
+  margin: 10px 0;
+  p:first-child {
+    padding: 5px 0;
+  }
+  p:last-child {
+    color: #ff0000;
+  }
+}
 </style>

style/timeTable.less

@@ -10,7 +10,11 @@
   padding: 10px 0 10px 26%;
 }
 .th {
-  width: 120px !important;
+  width: 200px !important;
+  height: 40px !important;
+}
+.ths{
+  width: 200px !important;
   height: 40px !important;
 }
 .th p {
@@ -21,7 +25,7 @@
 }
 .table tr td {
   text-align: center;
-  padding: 15px 5px;
+  padding: 15px;
   font-size: 15px;
   color: #000;
 }
@@ -34,3 +38,6 @@
 // .rowLesson{
 //   padding: 0 115px;
 // }
+.timeTable{
+  width: 1000px;
+}