AI_Student_Client/src/views/course/courses.vue

<template>
  <div class="container learnstyle-page">
    <el-row class="grid-head">

    </el-row>
    <el-row>
      <div class="homewort-part">
        <div class="assess-tips">
          <div class="col-1">
            <!-- <el-select v-model="courseVal" placeholder="请选择课程">
              <el-option v-for="item in courseList" :key="item.id" :label="item.name"
                         :value="item.id" @change="getCourseSection(courseVal)">
              </el-option>
            </el-select> -->
            <div style="width:100%;display: flex;justify-content: space-between;align-items: center;">
              <span>我的课程列表</span>
              <el-button type="primary" plain @click="()=>{onSelectCourse()}">选课</el-button>
            </div>

          </div>
          <!-- <div  class="col-2"><span  class="total  current">全部</span><span
                   class="total ">学习中</span><span
                  class="total ">未学习</span><span  class="total ">已完成</span></div> -->
        </div>
        <div class="list-data">
          <div class="list-header">
            <div class="top">
              <div class="category_name" v-if="!loading">
                <el-tag class="elTag" :type="currentCourse.id == course.id?'success':'info'"
                        v-for="course in courseList" :key="`c_${course.id}`"
                        @click="()=>{selectCourse(course)}">{{course.name}}</el-tag>
              </div>
              <div v-else style="display: flex;justify-content: center;align-items: center;">
                <i class="el-icon-loading"></i>
              </div>
            </div>
          </div>
          <div class="table-body" v-if="courseList.length > 0">
            <el-table v-loading="xloading" :data="tableData" border>
              <el-table-column prop="gOriented" width="350" label="导向目标">
              </el-table-column>
              <el-table-column prop="pScore" label="P(问题定义)(得分/满分)">
                <template  slot-scope="scope">
                  <span>{{scope.row.pScore==null?0:scope.row.pScore}}/{{stepscore['P']}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="sScore" label="S(系统拆解)(得分/满分)">
                <template  slot-scope="scope">
                  <span>{{scope.row.sScore==null?0:scope.row.sScore}}/{{stepscore['S']}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rScore" label="R(结果整合)(得分/满分)">
                <template  slot-scope="scope">
                  <span>{{scope.row.rScore==null?0:scope.row.rScore}}/{{stepscore['R']}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="eScore" label="E(评估方法)(得分/满分)">
                <template  slot-scope="scope">
                  <span>{{scope.row.eScore==null?0:scope.row.eScore}}/{{stepscore['E']}}</span>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text">
                    学习
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-row>

    <!--    <template>-->
    <!--      <el-dialog :visible.sync="selectCourseVisible" fullscreen top="0" custom-class="GPSREN" :close-on-click-modal="false"-->
    <!--        :before-close="()=>{selectCourseVisible = false;}">-->
    <!--        <div slot="title" class="cust-title">-->
    <!--          选课-->
    <!--        </div>-->
    <!--        <el-cascader :props="cascader"></el-cascader>-->
    <!--        <el-transfer v-model="cascader.value" :data="cascader.data"></el-transfer>-->
    <!--      </el-dialog>-->
    <!--    </template>-->
    <template  v-if="selectCourseVisible">
      <el-dialog :visible.sync="selectCourseVisible" top="0" custom-class="course-selection-dialog" :close-on-click-modal="false"
                 :before-close="()=>{selectCourseVisible = false;courseOptions.length=0;this.getCourseList();}" width="80%">
        <div slot="title" class="cust-title">
          <i class="el-icon-collection-tag"></i> 选课中心
        </div>

        <div class="course-selection-container">
          <!-- 选课导航 -->
          <!--          <div class="selection-header">-->
          <!--            <div class="header-title">-->
          <!--&lt;!&ndash;              <p>请按阶段 → 年级 → 科目顺序选择您要学习的课程</p>&ndash;&gt;-->
          <!--            </div>-->
          <!--          </div>-->

          <!-- 级联选择器区域 -->
          <div class="cascader-section">
            <div class="section-title">
              <i class="el-icon-menu"></i> 课程分类选择
            </div>
            <el-cascader
              :props="cascaderProps"
              @change="handleCascaderChange"
              placeholder="请选择阶段/年级/科目（例如：本科 → 2025级 → 人工智能）"
              style="width: 100%;"
              size="large"
              clearable>
            </el-cascader>
          </div>

          <!-- 课程列表区域 -->
          <div class="courses-section flex-column">
            <div class="section-title">
              <i class="el-icon-document"></i> 可选课程列表
            </div>

            <div v-if="courseOptions.length > 0" class="courses-table-wrapper flex-item">
              <el-table :data="courseOptions" border style="width: 100%" stripe
                        v-loading="selectLoading"
                        height="100%"
                        :header-cell-style="{background: '#f5f7fa', fontWeight: 'bold'}"
                        class="adaptive-table">
                <el-table-column prop="name" label="课程名称" width="200" fixed>
                  <template slot-scope="scope">
                    <span class="course-name">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="description" label="课程描述" min-width="300">
                  <template slot-scope="scope">
                    <span class="course-description">{{ scope.row.description || '暂无描述' }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button
                      size="small"
                      v-if="!!scope.row.studentId"
                      @click="addCourseToStudent(scope.row.id,0)"
                      :type="'warning'"
                      :icon="'el-icon-circle-close'" >
                      取消
                    </el-button>
                    <el-button
                      size="small"
                      v-else
                      @click="addCourseToStudent(scope.row.id,1)"
                      :type="'success'"
                      :icon="'el-icon-circle-check'" >
                      选择
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div v-else class="no-courses flex-item">
              <el-empty description="该科目下暂无课程">
              </el-empty>
            </div>
          </div>
        </div>

        <!--        &lt;!&ndash; 底部提示 &ndash;&gt;-->
        <!--        <div slot="footer" class="dialog-footer">-->
        <!--          <el-button @click="selectCourseVisible = false">取消</el-button>-->
        <!--          <el-button type="primary" @click="confirmSelection" :disabled="!selectedSubject">确认选课</el-button>-->
        <!--        </div>-->
      </el-dialog>
    </template>



    <template v-if="dialogVisible">
      <el-dialog :visible.sync="dialogVisible" fullscreen top="0" custom-class="GPSREN" :close-on-click-modal="false"
                 :before-close="handleClose">
        <div slot="title" class="cust-title">
          GPS-REN学习法
        </div>

        <Gpsren :question="currentGoal" :finish="onFinish"></Gpsren>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import {getStepModel} from '../../api/ai'
import subjectInfo from "../../components/subject-info";
import Gpsren from "../../components/gpsren.vue";
export default {
  name: 'courseVideo',
  components: { subjectInfo, Gpsren },
  data() {
    return {
      stepscore: {
                        "P": 0,
                        "S":0,
                        "R":0,
                        "E":0
                        },
      selectCourseVisible:false,
      xloading:false,
      loading: false,
      selectLoading:false,
      fileHost: this.$store.state.common.fileHost,
      courseList: [],
      learnInfo: [],
      gradeInfo: [],
      subjectInfo: [],
      tableData: [],
      currentPage: 0,
      courseVal: 1,
      pageSize: 10,
      totalCount: 0,
      options: [],
      dialogVisible: false,
      currentCourse: null,
      currentGoal:null,
      cascader:{
        lazy: true,
        lazyLoad (node, resolve) {
          console.log(node)
          if(node.level == 0) {
            setTimeout(() => {
              const nodes =  [{
                level:1,
                label: `选项1`,
                value:1,
                leaf: node.level > 2
              },{
                level:1,
                label: `选项2`,
                value:2,
                leaf: node.level > 2
              }]
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      },
      // 新的级联选择器配置
      cascaderProps: {
        lazy: true,
        lazyLoad: this.lazyLoadCascader,
        value: 'id',
        label: 'name',
        children: 'children',
        leaf: 'leaf'
      },

      // 选中的科目
      selectedSubject: null,

      // 课程选项列表
      courseOptions: [],
      // 已选课程列表
      selectedCourses: [],
      transfer:{

      }
    }
  },

  mounted() {
    this.setStepModel()
    this.getCourseList()
    this.getLearnList()
    this.getGradeList()
    //this.getsubjectList()
    this.tableData = [ ]
  },

  destroyed() {

  },

  methods: {
    onFinish() {
      this.handleClose()
    },
    getLearnList() {
      return this.axios.get(this.$httpApi.httpUrl('/api/dictValue/selectByDictId'), {
        params: {
          pageNumber: 0,
          pageSize: 100,
          status: 1,
          dictId: 1
        }
      }).then(response => {
        this.learnInfo = response.data.data.dataList
      })
    },

    // getsubjectList() {
    //   this.axios.get(this.$httpApi.httpUrl('/student/subjectInfo/selectByGradeInfoId'), {
    //     params: {
    //       pageNumber: 0,
    //       pageSize: 100,
    //       status: 1,
    //     }
    //   }).then(response => {
    //     this.subjectInfo = response.data.data.dataList
    //   })
    // },

    getGradeList(stageId) {
     return  this.axios.get(this.$httpApi.httpUrl('/student/gradeInfo/list'), {
        params: {
          pageNumber: 0,
          pageSize: 100,
          schoolType: stageId
        }
      }).then(response => {
        this.gradeInfo = response.data.data.dataList
      })
    },

    //选课
    onSelectCourse(){
      this.selectCourseVisible = true
    },

    // 检查课程是否已选择
    isSelectedCourse(courseId) {
      return this.selectedCourses.some(course => course.id === courseId)
    },
    // 懒加载级联选择器数据
    async lazyLoadCascader(node, resolve) {
      const { level, value } = node;

      try {
        let nodes = [];

        if (level === 0) {
          // 加载阶段数据（如本科、研究生等）
          nodes = await this.loadStages();
        } else if (level === 1) {
          // 加载年级数据
          nodes = await this.loadGrades(value);
        } else if (level === 2) {
          // 加载科目数据
          nodes = await this.loadSubjects(value);
        }

        resolve(nodes);
      } catch (error) {
        console.error('加载级联数据失败:', error);
        resolve([]);
      }
    },

    // 加载阶段数据 - 从learnInfo获取
    async loadStages() {
      try {
        // 使用已获取的learnInfo数据作为阶段数据
         await  this.getLearnList()
        if (this.learnInfo && this.learnInfo.length > 0) {
          // 假设learnInfo中的数据结构包含id和name字段
          return this.learnInfo.map(item => ({
            id: item.code,
            name: item.value,
            leaf: false
          }));
        } else {

          return [
            { id: 1, name: '本科', leaf: false },
            { id: 2, name: '研究生', leaf: false },
            { id: 3, name: '博士', leaf: false }
          ];
        }
      } catch (error) {
        console.error('处理阶段数据失败:', error);
        // 出错时使用默认数据
        return [
          { id: 1, name: '本科', leaf: false },
          { id: 2, name: '研究生', leaf: false },
          { id: 3, name: '博士', leaf: false }
        ];
      }
    },


    // 加载年级数据 - 从gradeInfo获取
    async loadGrades(stageId) {
      try {
        // 使用已获取的gradeInfo数据作为年级数据

         await this.getGradeList(stageId)

        if ((this.gradeInfo && this.gradeInfo.length > 0)) {
          // 过滤出对应阶段的年级数据
          const filteredGrades = this.gradeInfo.filter(item => {
            // 假设gradeInfo中有stageId字段来关联阶段
            return item.schoolType === stageId;
          });

          // 将数据映射为级联选择器需要的格式
          return filteredGrades.map(item => ({
            id: item.id,
            name: item.name,
            leaf: false
          }));
        } else {
          // 如果gradeInfo为空，使用默认数据
          const grades = {
            1: [ // 本科阶段的年级
              { id: 101, name: '2025级', leaf: false },
              { id: 102, name: '2024级', leaf: false },
              { id: 103, name: '2023级', leaf: false }
            ],
            2: [ // 研究生阶段的年级
              { id: 201, name: '2025级', leaf: false },
              { id: 202, name: '2024级', leaf: false }
            ],
            3: [ // 博士阶段的年级
              { id: 301, name: '2025级', leaf: false },
              { id: 302, name: '2024级', leaf: false }
            ]
          };

          return grades[stageId] || [];
        }
      } catch (error) {
        console.error('处理年级数据失败:', error);
        // 出错时使用默认数据
        const grades = {
          1: [ // 本科阶段的年级
            { id: 101, name: '2025级', leaf: false },
            { id: 102, name: '2024级', leaf: false },
            { id: 103, name: '2023级', leaf: false }
          ],
          2: [ // 研究生阶段的年级
            { id: 201, name: '2025级', leaf: false },
            { id: 202, name: '2024级', leaf: false }
          ],
          3: [ // 博士阶段的年级
            { id: 301, name: '2025级', leaf: false },
            { id: 302, name: '2024级', leaf: false }
          ]
        };

        return grades[stageId] || [];
      }
    },

    // 加载科目数据
    async loadSubjects(gradeId) {
      // 这里应该调用实际的API获取科目数据
      try {
        // 使用已获取的gradeInfo数据作为年级数据
        const response = await this.axios.get(this.$httpApi.httpUrl('/student/subjectInfo/selectByGradeInfoId'), {
          params: {
            gradeInfoId: gradeId
          }
        });

        // 检查API响应是否成功
        if (response.data.success && response.data.code === 1) {
          // 将返回的数据映射为级联选择器需要的格式
          return response.data.data.map(item => ({
            id: item.id,
            name: item.name,
            leaf: true  // 科目是最后一级，所以leaf为true
          }));
        }
        // 示例数据
        else{

          const subjects = {
            101: [ // 2025级本科
              { id: 1001, name: '人工智能', leaf: true },
              { id: 1002, name: '计算机科学', leaf: true },
              { id: 1003, name: '数据科学', leaf: true }
            ],
            102: [ // 2024级本科
              { id: 1004, name: '人工智能', leaf: true },
              { id: 1005, name: '软件工程', leaf: true }
            ],
            201: [ // 2025级研究生
              { id: 2001, name: '机器学习', leaf: true },
              { id: 2002, name: '深度学习', leaf: true }
            ]
          };

          return subjects[gradeId] || [];
        }
      }catch (error) {
        console.error('处理科目数据失败:', error);
        // 出错时使用默认数据
      }
    },

    // 级联选择器值变化时的处理
    async handleCascaderChange(value) {
      if (value && value.length === 3) {
        // 选择了完整的三级结构（阶段->年级->科目）
        const subjectId = value[2];
        this.selectedSubject = subjectId;
        await this.loadCoursesBySubject(subjectId);
      } else {
        this.selectedSubject = null;
        this.courseOptions = [];
      }
    },

    // 根据科目加载课程
    // async loadCoursesBySubject(subjectId) {
    //   try {
    //     // 这里应该调用实际的API获取课程数据
    //     // 示例数据
    //     const courses = {
    //       1001: [ // 人工智能科目下的课程
    //         { id: 10001, name: '机器学习基础', description: '介绍机器学习的基本概念和算法' },
    //         { id: 10002, name: '深度学习', description: '深入学习神经网络和深度学习模型' },
    //         { id: 10001, name: '机器学习基础', description: '介绍机器学习的基本概念和算法' },
    //         { id: 10002, name: '深度学习', description: '深入学习神经网络和深度学习模型' },
    //         { id: 10001, name: '机器学习基础', description: '介绍机器学习的基本概念和算法' },
    //         { id: 10002, name: '深度学习', description: '深入学习神经网络和深度学习模型' },
    //         { id: 10001, name: '机器学习基础', description: '介绍机器学习的基本概念和算法' },
    //         { id: 10002, name: '深度学习', description: '深入学习神经网络和深度学习模型' }
    //       ],
    //       1002: [ // 计算机科学科目下的课程
    //         { id: 10003, name: '数据结构与算法', description: '学习基本的数据结构和算法设计' },
    //         { id: 10004, name: '操作系统', description: '理解操作系统的基本原理' }
    //       ]
    //     };
    //
    //     this.courseOptions = courses[subjectId] || [];
    //   } catch (error) {
    //     console.error('加载课程失败:', error);
    //     this.courseOptions = [];
    //   }
    // },

    // 根据科目加载课程
    async loadCoursesBySubject(subjectId) {
      try {
        // 调用实际的API获取课程数据

        this.axios.get(this.$httpApi.httpUrl('/student/courseInfo/list'), {
          params: {
            subjectId: subjectId,  // 添加科目ID作为筛选条件
            pageNumber: 0,
            pageSize: 100,
            status: 1
          }
        }).then(response=>{
        // 检查API响应是否成功
        if (response.data.success && response.data.code === 1) {
          // 将返回的数据映射为表格需要的格式
          this.courseOptions = response.data.data.dataList.map(item => ({
            id: item.id,
            name: item.name,
            studentId: item.studentId,
            description: item.description || '暂无描述'
          })) || [];
        } else {
          console.error('获取课程数据失败:', response.data.message);
          this.courseOptions = [];
        }
        })

      } catch (error) {
        console.error('加载课程失败:', error);
        this.courseOptions = [];
      }
    },


    // 选择课程选项
    selectCourseOption(course) {
      // 检查是否已选择
      if (this.isSelectedCourse(course.id)) {
        this.$message.info('该课程已选择')
        return
      }

      // 这里处理选择课程的逻辑
      console.log('选择了课程:', course)

      // 可以调用API将课程添加到学生的课程列表中
      // this.addCourseToStudent(course.id)

      // 添加到已选课程列表
      this.selectedCourses.push({
        id: course.id,
        name: course.name
      })

      // 关闭选课对话框
      this.selectCourseVisible = false

      // 刷新课程列表
      this.getCourseList()

      this.$message.success(`成功选择课程: ${course.name}`)
    },

    // 添加课程到学生课程列表（需要实现实际的API调用）
    async addCourseToStudent(courseId,selected) {
      try {
        // 调用API添加课程
         this.selectLoading = true
        this.axios.post(this.$httpApi.httpUrl('/student/course/collect'), { courseId:courseId,collectFlag:selected }).then(d=>{
          return this.loadCoursesBySubject(this.selectedSubject);
        }).finally(()=>{
          this.selectLoading = false
        })

      } catch (error) {
        console.error('添加课程失败:', error);
        this.$message.error('选课失败，请重试');
      }
    },
    //关闭学习界面
    handleClose() {
      this.dialogVisible = false
      this.currentGoal = null
    },
    //点击打开
    handleClick(item) {
      this.dialogVisible = true
      this.currentGoal = item

    },
    //加载
    getGoalInfoByCourse(courseId) {
       this.xloading = true
      this.axios.get(this.$httpApi.httpUrl(`/student/stuGoalInfo/listByCourseId`), {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          courseId:courseId
        }
      }).then(goals=>{
        this.tableData = goals.data.data.dataList || []
      }).finally(f => {
        this.xloading = false
      })
    },

    selectCourse(c) {
      //选择课程，查询课程目标列表
      this.currentCourse.checked = false
      this.currentCourse = c
      this.currentCourse.checked = true
      getStepModel().then(resp=>{
        if(resp.status == 200) {
            let res = resp.data
            if(res.code == 1) {
                  let stepModels = res.data.dataList
                  for(let n =0 ;n<stepModels.length;n++) {
                    let m = stepModels[n]
                    this.stepscore[m.name] = m.score
                  }
            }
        }
      }).finally(d=>{
         this.getGoalInfoByCourse(this.currentCourse.id)
      })
    },
    setStepModel(){
      getStepModel().then(resp=>{
        if(resp.status == 200) {
          let res = resp.data
          if(res.code == 1) {
            let stepModels = res.data.dataList
            for(let n =0 ;n<stepModels.length;n++) {
              let m = stepModels[n]
              this.stepscore[m.name] = m.score
            }
          }
        }
      }).finally(d=>{
        this.getGoalInfoByCourse(this.currentCourse.id)
      })
    },

    getCourseList() {
      this.loading = true
      this.axios.get(this.$httpApi.httpUrl('/student/courseInfo/mylist'), {
      }).then(response => {
        this.courseList = response.data.data
        if (this.courseList && this.courseList.length > 0) {
          this.currentCourse = this.courseList[0]
          this.currentCourse.checked = true
        }

        // this.totalCount = response.data.data.total
      }).then(d => {
        if(!!this.currentCourse) {
             this.getGoalInfoByCourse(this.currentCourse.id)
        }
      }).finally(()=>{
         this.loading = false
      })
    },

    studyCourse(course) {
      this.$store.commit('course/updateCourseInfo', course)
      this.$router.push({
        name: 'courseDetail',
      })
    }
  }
}
</script>

<style lang="scss">

.el-dialog__header {
    background-color: #477efa !important;
    color: aliceblue !important;
}

.el-dialog__close {
    color: aliceblue !important;
}

.course-selection-dialog {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;

  .el-dialog__body {
    flex: 1;
    overflow-y: hidden;
    padding: 10px 20px 20px;
  }
}

.course-selection-container {
  height: calc(100vh - 150px); // 减去对话框标题和其他元素的高度
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item {
  flex: 1;
  min-height: 0; // 允许项目收缩
}

.selection-header {
  flex-shrink: 0; // 不收缩
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;

  .header-title {
    h2 {
      color: #303133;
      margin-bottom: 8px;
      font-size: 20px;
    }

    p {
      color: #909399;
      font-size: 14px;
    }
  }
}

.cascader-section {
  flex-shrink: 0; // 不收缩
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
}

.courses-section {
  flex: 1; // 占据剩余空间
  min-height: 0; // 允许收缩
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;

}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 15px;
  display: flex;
  align-items: center;

  i {
    margin-right: 8px;
    color: #409EFF;
  }
}

.courses-table-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ebeef5;
  border-radius: 4px;

  .adaptive-table {
    flex: 1;
    min-height: 0;

    .el-table__header-wrapper {
      flex-shrink: 0;
    }

    .el-table__body-wrapper {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
}

// 表格滚动条美化
.courses-table-wrapper .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.courses-table-wrapper .el-table__body-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.courses-table-wrapper .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.courses-table-wrapper .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.no-courses {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-name {
  font-weight: 500;
  color: #303133;
}

.course-description {
  color: #606266;
  font-size: 14px;
}

.no-courses {
  text-align: center;
  padding: 40px 0;
}

.dialog-footer {
  text-align: right;
  padding: 20px;
  border-top: 1px solid #eee;
}

.homewort-part {
  .assess-tips {
    background-color: aliceblue;
    border-radius: 5px;
    padding: 10px;
  }
}

.list-data {
  .list-header {
    .top {
      margin-top: 10px;
      padding: 10px;
      font-size: 14px;
    }
  }
}

.category_name {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.elTag {
  cursor: pointer;
}

.learnstyle-page {
  // background-color: aliceblue;
  height: 100%;
  max-width: 1200px;
}

.demoList ul {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 100px;
}

.demoList {
  padding-top: 30px;
}

.course_detail {
  padding-top: 6px;
  max-height: 48px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  color: #93999f
}

.demoList li {
  box-sizing: border-box;
  width: 192px;
  min-height: 160px;
  float: left;
  margin-right: 40px;
  margin-bottom: 30px;
  text-align: left;

  img {
    cursor: pointer;
    width: 100%;
    height: 108px;
    display: block;
    border-radius: 8px;

    &:hover {
      opacity: 0.7;
    }
  }
}

.typeitem {
  cursor: pointer;
  width: 300px;

  .title {
    padding-top: 8px;
    font-weight: bold;

    &:hover {
      cursor: pointer;
      color: red;
    }
  }
}

.demoList li {
  width: 30%;
}

.demoList .page {
  position: relative;
  left: 0;
  bottom: 50px;
  width: 100%;
  text-align: center;
}

.demoList li .image {
  height: 199px;
  width: 100%;
  display: block;
}

.top .item {
  margin-left: 20px;
}

.grid-head {
  margin-bottom: 30px;
}

.col-1 {
  width: 100%;
  color: #999;
}
</style>