兴蜀来了平台业务数据

src/views/portraitScreen/components/pxkcjh.vue

@@ -0,0 +1,126 @@
+<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="课程名称" />
+      <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/9/24",
+    endTime: "2025/9/26"
+  },
+  {
+    name: "退役军人适应性培训",
+    starTime: "2025/10/16",
+    endTime: "2025/10/20"
+  },
+  {
+    name: "首席统计员培训项目",
+    starTime: "2025/10/14",
+    endTime: "2025/10/17"
+  },
+  {
+    name: "电工",
+    starTime: "2025/5/12",
+    endTime: "2025/6/6"
+  },
+  {
+    name: "焊工",
+    starTime: "2025/5/19",
+    endTime: "2025/6/13"
+  },
+  {
+    name: "钳工",
+    starTime: "2025/5/26",
+    endTime: "2025/6/20"
+  },
+  {
+    name: "人工智能训练师",
+    starTime: "2025/6/2",
+    endTime: "2025/6/27"
+  },
+  {
+    name: "无人机飞手",
+    starTime: "2025/6/16",
+    endTime: "2025/7/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: 1440px;
+  margin: 0 auto;
+  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: 30px 0;
+}
+::v-deep .el-table th.el-table__cell {
+  background-color: #163155 !important;
+  color: #c4f3fe;
+  margin: 0 0 4px 0;
+  font-size: 40px;
+}
+::v-deep .el-table tr {
+  background-color: rgba(22, 43, 85, 0.5);
+}
+::v-deep .el-table tr:nth-child(even) {
+  background-color: rgba(22, 51, 85, 0.9);
+}
+::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.5);
+  font-size: 40px;
+}
+::v-deep .el-table th.el-table__cell.is-leaf {
+  border-bottom: 1px solid rgba(22, 41, 85, 0.9);
+}
+::v-deep
+  .el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background-color: rgb(16, 68, 171);
+  color: #fff;
+}
+</style>