build: 看板训练页面样式

src/store/modules/permission.ts

@@ -163,7 +163,7 @@ const adminRoutes: RouteRecordRaw[] = JSON.parse(
           path: "index",
           component: "training/index",
           meta: {
-            title: "训练管理",
+            title: "训练记录",
             name: "TrainingIndex",
             icon: "training",
             keepAlive: true,

src/views/dashboard/components/DataCard.vue

@@ -1,7 +1,7 @@
 <!-- 数据卡片 -->
 <script setup lang="ts">
-import SvgIcon from "@/components/SvgIcon/index.vue";
-import { useTransition, TransitionPresets } from "@vueuse/core";
+import { TransitionPresets, useTransition } from "@vueuse/core";
+
 const props = defineProps({
   classes: {
     type: Number,

src/views/student/index.vue

@@ -39,7 +39,7 @@ const tableData = ref<any>([
 
 <template>
   <div class="student-container">
-    <!-- 教师查找 -->
+    <!-- 学生查找 -->
     <div class="student-search">
       <el-select
         v-model="classNumber"

src/views/training/components/DialogData.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: String,
+    default: "dialog",
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div>{{ props.data }}</div>
+</template>
+
+<style scoped lang="scss"></style>

src/views/training/index.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import DialogData from "@/views/training/components/DialogData.vue";
+
 defineOptions({
   name: "TrainingIndex",
   inheritAttrs: false,
 });
+import { CaretBottom } from "@element-plus/icons-vue";
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
+import { ClassList } from "@/api/school/types";
 const userStore = useUserStore();
 watch(
   () => userStore.schoolId,
@@ -12,13 +16,171 @@ watch(
     console.log(newValue, oldValue);
   }
 );
+let studentType = ref("");
+let classNumber = ref("");
+let trainingType = ref("");
+const classData = ref<ClassList[]>([
+  {
+    id: 0,
+    school_id: 0,
+    name: "全部班级",
+  },
+]);
+const tableData = ref<any>([
+  {
+    number: 1,
+    name: "学生A",
+    type: "智脑水舞",
+    phone: "15814111616",
+    date: "2023-08-22",
+    times: "1分12秒",
+    cls: "向日葵小班",
+  },
+]);
+let dialogVisible = ref(false);
 </script>
 
 <template>
-  <div class="container">
-    <h1>训练管理</h1>
-    <div>{{ userStore.schoolId }}</div>
+  <div class="training-container">
+    <!-- 学生查找 -->
+    <div class="training-search">
+      <el-select
+        v-model="studentType"
+        placeholder="正式学生/体验用户"
+        size="large"
+        :suffix-icon="CaretBottom"
+      >
+        <el-option key="1" value="1" label="正式学生"></el-option>
+        <el-option key="2" value="2" label="体验用户"></el-option>
+      </el-select>
+      <el-select
+        v-model="classNumber"
+        placeholder="请选择班级名称"
+        size="large"
+        :suffix-icon="CaretBottom"
+      >
+        <el-option
+          v-for="item in classData"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <el-select
+        v-model="trainingType"
+        placeholder="请选择训练方式"
+        size="large"
+        :suffix-icon="CaretBottom"
+      >
+        <el-option
+          key="1"
+          value="1"
+          label="专注模式（脑机专注力训练）"
+        ></el-option>
+        <el-option key="2" value="2" label="智脑水舞"></el-option>
+        <el-option key="2" value="2" label="智脑恐龙"></el-option>
+        <el-option key="2" value="2" label="智脑碰碰车"></el-option>
+        <el-option key="2" value="2" label="智脑SUV"></el-option>
+        <el-option key="2" value="2" label="智脑积木"></el-option>
+        <el-option key="2" value="2" label="智脑UFO"></el-option>
+        <el-option
+          key="2"
+          value="2"
+          label="放松模式（脑机放松度训练，即正念）"
+        ></el-option>
+      </el-select>
+      <!--			<el-input-->
+      <!--						v-model="studentInfo"-->
+      <!--						size="large"-->
+      <!--						placeholder="请输入学生名称或手机号码"-->
+      <!--			/>-->
+      <!--			<el-button size="large" type="primary">查找</el-button>-->
+    </div>
+    <!-- 学生数据 -->
+    <div class="list-table">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="number" label="序号" align="center" />
+        <el-table-column prop="name" label="学生名称" align="center" />
+        <el-table-column prop="phone" label="手机号码" align="center" />
+        <el-table-column prop="type" label="训练方式" align="center" />
+        <el-table-column prop="date" label="训练时间" align="center" />
+        <el-table-column prop="times" label="训练时长" align="center" />
+        <el-table-column prop="cls" label="所在班级" align="center" />
+        <el-table-column />
+        <el-table-column label="操作" align="center">
+          <el-button text class="table-btn" @click="dialogVisible = true">
+            报告详情
+          </el-button>
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
+  <el-dialog v-model="dialogVisible">
+    <DialogData data="1sdgfsdaf" />
+  </el-dialog>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.training-container {
+  position: relative;
+  padding: 20px 30px;
+}
+.training-search {
+  margin-bottom: 20px;
+  font-size: 16px;
+  .el-select {
+    width: 200px;
+    margin: 0 20px 0 0;
+  }
+  .el-input {
+    width: 250px;
+    margin: 0;
+  }
+  :deep(.el-input__inner) {
+    font-size: 16px;
+  }
+  .el-button {
+    font-size: 16px;
+    padding: 0 26px;
+    margin: 0 20px;
+    border-radius: 12px;
+  }
+}
+:deep(.el-input__wrapper) {
+  background: #ffffff;
+  border-radius: 12px;
+}
+:deep(.el-input__wrapper) {
+  box-shadow: none !important;
+}
+:deep(.el-select) {
+  --el-select-input-focus-border-color: none !important;
+}
+:deep(.el-select .el-input__wrapper.is-focus) {
+  box-shadow: none !important;
+}
+:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
+  box-shadow: none !important;
+}
+:deep(.el-table th.el-table__cell) {
+  background: #e9ebee;
+}
+.list-table {
+  background: #ffffff;
+  border-radius: 25px;
+  overflow: hidden;
+  .table-btn {
+    display: inline-block;
+    height: 38px;
+    line-height: 38px;
+    padding: 0 15px;
+    background: #4284f2;
+    border-radius: 10px;
+    color: #ffffff;
+    &.disabled {
+      background: #bfbfbf;
+      cursor: not-allowed;
+    }
+  }
+}
+</style>