train-center/src/views/timeTable/index.vue

<template>
  <div id="index">
    <list-frame title="课程表列表" :total="total" :needFilter="false" :needAdd="false">
      <el-row>
        <el-col :span="24" class="timeTable" v-for="(item, index) in list" :key="index">
          <el-col :span="24" class="top">
            <el-col :span="24" class="title"> 2020年第（{{ item.term }}）期高校大学生就业能力拓展训练课程表（{{ item.class }}） </el-col>
            <el-col :span="24" class="date">
              （2月-12日—2月-18日）
            </el-col>
          </el-col>
          <el-col :span="24" class="info">
            <table border="1" class="table">
              <tr>
                <th colspan="2" class="th">
                  <p style="text-align:left;padding:0 10px;color:#000;">星期</p>
                  <p style="text-align:center;padding:0 10px;color:#000;">课程</p>
                  <p style="text-align:right;padding:0 10px;color:#000;">时间</p>
                </th>
                <th class="th">
                  <p>周三</p>
                  <p>（2月12日）</p>
                </th>
                <th class="th">
                  <p>周四</p>
                  <p>（2月13日）</p>
                </th>
                <th class="th">
                  <p>周五</p>
                  <p>（2月14日）</p>
                </th>
                <th class="th">
                  <p>周六</p>
                  <p>（2月15日）</p>
                </th>
                <th class="th">
                  <p>周日</p>
                  <p>（2月16日）</p>
                </th>
                <th class="th">
                  <p>周一</p>
                  <p>（2月17日）</p>
                </th>
                <th class="th beizhu">备注</th>
              </tr>
              <tr>
                <td rowspan="2">上午</td>
                <td>8:30-11:30</td>
                <td>--</td>
                <td v-for="(tag, index) in item.lessons" :key="index">
                  <p>{{ tag.name }}</p>
                  <p class="teacherName">{{ tag.teacherName }}</p>
                </td>
                <td rowspan="5">
                  <p>
                    上课地点：<span>{{ item.address }}</span>
                  </p>
                  <p>
                    班主任：<span class="teacherName">{{ item.banzhuren }}</span>
                  </p>
                  <p>
                    礼仪课：<span class="teacherName">{{ item.liyike }}</span>
                  </p>
                </td>
              </tr>
              <tr>
                <td>11:30-13:30</td>
                <td>--</td>
                <td colspan="5">午餐+休息</td>
              </tr>
              <tr class="fourth">
                <td rowspan="3">下午</td>
                <td>13:30-16:30</td>
                <td>
                  13:30开始报到 <br />（教育宾馆大厅）<br />
                  15:30开班仪式 <br />（教育宾馆六楼）
                </td>
                <td v-for="(tag, index) in item.lessons" :key="index">
                  <p>{{ tag.name }}</p>
                  <p class="teacherName">{{ tag.teacherName }}</p>
                </td>
              </tr>
              <tr>
                <td>16:30-17:30</td>
                <td colspan="5">晚餐</td>
                <td>--</td>
              </tr>
              <tr>
                <td>17:30-19:45</td>
                <td>团队组建</td>
                <td>拓展交流</td>
                <td>课程作业<br />小组展示</td>
                <td>课程作业</td>
                <td>礼仪课<br />小组面试</td>
                <td>结业仪式</td>
              </tr>
            </table>
          </el-col>
        </el-col>
      </el-row>
    </list-frame>
  </div>
</template>

<script>
import listFrame from '@frame/layout/admin/list-frame';
export default {
  name: 'index',
  props: {},
  components: {
    listFrame,
  },
  data: () => ({
    list: [
      {
        term: '1',
        class: '一班',
        address: '教学楼四楼',
        banzhuren: '栾莹',
        liyike: '史永姣',
        lessons: [
          {
            name: '拓展训练',
            teacherName: '测试人',
          },
          {
            name: '职业探索',
            teacherName: '测试人',
          },
          {
            name: '优势挖掘',
            teacherName: '测试人',
          },
          {
            name: '简历制作',
            teacherName: '测试人',
          },
          {
            name: '模拟面试',
            teacherName: '测试人',
          },
        ],
      },
    ],
    total: 0,
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
@import '~@frame/style/timeTable.less';
// .top .title {
//   text-align: center;
//   font-size: 30px;
// }
// .top .date {
//   text-align: center;
//   font-size: 25px;
//   color: #ff0000;
//   padding: 10px 0;
// }
// .th {
//   width: 120px !important;
//   height: 40px !important;
// }
// .th p {
//   color: #ff0000;
// }
// .th .beizhu {
//   color: #000;
// }
// .table tr td {
//   text-align: center;
//   padding: 15px 5px;
//   font-size: 15px;
//   color: #000;
// }
// .teacherName {
//   color: #ff0000;
// }
// .fourth td:nth-child(8n) p {
//   display: none;
// }
</style>