手写课表-vue3-补充

<template>
 <div class="timetable h100">
    <div class="timetable-b w100">
      <table class="timetable-content w100">
        <thead>
          <tr>
            <th></th>
            <th>周一(2024-05-20)</th>
            <th>周二(2024-05-21)</th>
            <th style="color:#409eff">周三(2024-05-22)</th>
            <th>周四(2024-05-23)</th>
            <th>周五(2024-05-24)</th>
            <th>周六(2024-05-25)</th>
            <th>周日(2024-05-26)</th>
          </tr>
        </thead>
        <tbody>
          <tr  v-for="(att,i) in props.colList" :key="i">
            <td style="width:100px">
              <span>{{att.cn}}</span>
            </td>
            <!-- 一周 -->
            <td  v-for="(item,index) in 7" :key="index" >
              <!-- 数据循环 -->
               <template v-for="(item2, index2) in props.weekCourse" :key="index2">
                <!-- 容器 -->
                <div style="height: 100%; overflow-y: scroll;" v-if="item2.week === item">
                  <!-- 每门课程 -->
                  <div v-for="(item3,index3) in item2.courses" :key="index3">
                    <div v-if="item3.colname == att.en">
                      <a-tooltip placement="right" color="#fff">
                        <template #title>
                          <p class="classcountcss">班级名称：计科一班</p>
                          <p class="classcountcss">上课时间：{{item3.startTime}}~{{item3.endTime}}</p>
                          <p class="classcountcss">课程编号：Y-135</p>
                          <p class="classcountcss" style="color:#888888">老师：崔老师</p>
                          <p class="classcountcss" style="color:#888888">教室：计算机楼503</p>
                          <p class="classcountcss" style="color:#888888">校区：南山校区</p>
                          <p class="classcountcss" style="color:#888888">学员人数：40</p>
                        </template>
                        <a-button :style="[
                          {
                            background: item3.color?item3.color:'#ccc',
                          },
                          { color: '#fff' },
                          { borderRadius: '6px' },
                          { marginBottom: '6px' },
                          { padding: '12px' },
                          { height: '100%' },
                          { textAlign: 'left' },
                          { fontSize: '15px' },
                        ]">
                        计科一班,
                        {{item3.startTime}}~{{item3.endTime}}
                        </a-button>
                      </a-tooltip>
                    </div>
                  </div>
                </div>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
  import { ref , defineProps} from 'vue';
  const props = defineProps({
    colList:Array,
    weekCourse:Array
  })
</script>

<style scoped lang="scss">
.h100 {
    height: 75vh;
  }
.timetable {
  background-color: #f1f7ff;
  .w100 {
    width: 100% !important;
  }
  

  .timetable-b {
    height: 100vh;
    height:100%;
    background-color: #fff;
    overflow: auto;
    .timetable-content {
      height: 100%;
      table-layout: fixed;
      border-collapse: collapse; //设置表格的边框是否被合并为一个单一的边框
      text-align: center;
      color: #333333;
      font-weight: 400;
      font-size: 17px;
 
      thead {
        height: 100px;
 
        th {
          border: 2px solid rgba(27, 100, 240, 0.1);
        }
      }
      tbody {
        height: calc(100% - 2px) / 7;
 
        td {
          padding: 10px;
          border: 2px solid rgba(27, 100, 240, 0.1);
          .dmsjandjs-b {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
      }
    }
  }
}
/* 整个滚动条 */
::-webkit-scrollbar {
    width: 10px;               /* 滚动条的宽度 */
    height: 10px;              /* 滚动条的高度，对水平滚动条有效 */
    background-color: #fff; /* 滚动条的背景颜色 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #fff; /* 轨道的背景颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c1c1c1; /* 滑块的背景颜色 */
    border: 3px solid #fff; /* 滑块的边框和轨道相同的颜色，可以制造“边距”的效果 */
}

/* 滚动条滑块：悬停效果 */
::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8; /* 滑块的悬停颜色 */
}

/* 滚动条滑块：激活时的效果 */
::-webkit-scrollbar-thumb:active {
    background-color: #888888; /* 滑块的激活颜色 */
}

/* 滚动条按钮（上下箭头） */
::-webkit-scrollbar-button {
    display: none; /* 通常情况下不显示滚动条按钮 */
}
.classcountcss{
  color:#000;
  margin:3px 10px;
}
</style>

<template>
  <div>
    <a-card>
          <fullcalendarVue :col-list="colList" :week-course="weekCourse" />
    </a-card>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import fullcalendarVue from './fullcalendarVue.vue';
  // 课表列
  const colList = ref([
    {
      cn: '上午',
      en: 'morning',
    },
    {
      cn: '下午',
      en: 'afternoon',
    },
    {
      cn: '晚上',
      en: 'night',
    },
  ]);
  // 课表数据
  const weekCourse = ref([
    {
      week: 1,
      courses: [
        {
          colname: 'morning',
          startTime: '08:00',
          index: 1,
          endTime: '09:30',
          color: '#409eff',
          subject: '敦煌绘画',
          major: '计算机科学与技术',
          class: '1702班',
        },
        {
          colname: '123',
          index: 3,
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '敦煌绘画', //学科
          color: '#67c23a',
          major: '计算机科学与技术', //专业
          class: '1702班', //班级
        },
        {
          index: 1,
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '敦煌绘画', //学科
          major: '计算机科学与技术', //专业
          colname: 'afternoon',
          class: '1702班', //班级
        },
        {
          index: 1,
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '手机摄影', //学科
          major: '计算机科学与技术', //专业
          colname: '456',
          class: '1702班', //班级
        },
        {
          index: 1,
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '侍女线描', //学科
          major: '计算机科学与技术', //专业
          colname: 'afternoon',
          class: '1702班', //班级
        },
        {
          index: 1,
          colname: 'afternoon',
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '壁画岩彩', //学科
          major: '计算机科学与技术', //专业
          class: '1702班', //班级
        },
        {
          index: 1,
          colname: 'afternoon',
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '轻雕塑', //学科
          major: '计算机科学与技术', //专业
          class: '1702班', //班级
        },
        {
          colname: 'afternoon',
          index: 3,
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '轻雕塑', //学科
          major: '计算机科学与技术', //专业
          class: '1702班', //班级
        },
        {
          colname: 'night',
          index: 1,
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '轻雕塑', //学科
          major: '计算机科学与技术', //专业
          class: '1702班', //班级
        },
        {
          colname: 'night',
          index: 3,
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '轻雕塑', //学科
          major: '计算机科学与技术', //专业
          class: '1702班', //班级
        },
        {
          colname: '789',
          index: 3,
          startTime: '08:00', //开始时间
          endTime: '09:30', //结束时间
          subject: '轻雕塑', //学科
          major: '计算机科学与技术', //专业
          class: '1702班', //班级
        },
      ],
    },
    {
      week: 2,
      courses: [
        {
          colname: 'morning',
          startTime: '08:00',
          index: 1,
          endTime: '09:30',
          color: '#f3c16f',
          subject: '轻雕塑',
          major: '计算机科学与技术',
          class: '1702班',
        },
      ],
    },
  ]);
</script>

<style lang="scss" scoped>
</style>