rsxm-master/src/views/portraitScreen/components/pxkcjh.vue

<template>
  <div class="tableBox">
    <el-table :data="tableData" height="1540px" style="width: 100%">
      <el-table-column label="序号" width="140px">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="课程名称" width="550px" />
      <el-table-column prop="starTime" label="开课时间" />
      <el-table-column prop="endTime" label="结束时间" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const tableData = ref([
  {
    name: "人社局劳务经纪人培训",
    starTime: "2025/09/24",
    endTime: "2025/09/26"
  },
  {
    name: "退役军人适应性培训",
    starTime: "2025/10/16",
    endTime: "2025/10/20"
  },
  {
    name: "首席统计员培训项目",
    starTime: "2025/10/14",
    endTime: "2025/10/17"
  },
  {
    name: "电工",
    starTime: "2025/05/12",
    endTime: "2025/06/06"
  },
  {
    name: "焊工",
    starTime: "2025/05/19",
    endTime: "2025/06/13"
  },
  {
    name: "钳工",
    starTime: "2025/05/26",
    endTime: "2025/06/20"
  },
  {
    name: "人工智能训练师",
    starTime: "2025/06/02",
    endTime: "2025/06/27"
  },
  {
    name: "无人机飞手",
    starTime: "2025/06/16",
    endTime: "2025/07/11"
  }
  // {
  //   name: "手工木工",
  //   starTime: "2025/7/14",
  //   endTime: "2025/8/8"
  // },
  // {
  //   name: "高空作业",
  //   starTime: "2025/8/18",
  //   endTime: "2025/9/12"
  // }
  // {
  //   name: "学生就业指导",
  //   starTime: "2025/9/1",
  //   endTime: "2025/9/1"
  // }
]);
</script>

<style lang="scss" scoped>
.tableBox {
  width: 100%;
  margin-top: 50px;
}
::v-deep .el-table {
  background-color: transparent;
  --el-table-border-color: rgba(22, 65, 85, 0.9);
  .cell {
    line-height: normal;
    color: #fff;
  }
}
::v-deep .el-table__header-wrapper {
  margin: 0 0 1px 0;
}
::v-deep .el-table .el-table__cell {
  padding: 32px 0;
}
::v-deep .el-table th.el-table__cell {
  background-color: rgba(31, 84, 145, 0.473);
  color: #c4f3fe;
  margin: 0 0 4px 0;
  font-size: 50px;
}
::v-deep .el-table tr {
  background-color: rgba(22, 43, 85, 0);
}
::v-deep .el-table tr:nth-child(even) {
  background-color: rgba(31, 84, 145, 0.473);
}
::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid rgba(22, 41, 85, 0);
  font-size: 50px;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid rgba(22, 41, 85, 0.3);
}
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: rgb(16, 68, 171, 0.3);
  color: #fff;
}
</style>