126 lines
2.7 KiB
Vue
126 lines
2.7 KiB
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>
|