From 15863f54c7a9a6cd5bdfdad93e154017a55e6fd7 Mon Sep 17 00:00:00 2001
From: xy <2115269706@qq.com>
Date: Fri, 22 Nov 2024 23:23:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A41?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 src/Layout/footer/index.vue                   |   4 +-
 src/Layout/main/index.vue                     |   2 +
 src/api/course.ts                             |   7 +
 src/router/module/constRouter/index.ts        |  31 +-
 src/styles/index.scss                         |   2 +-
 src/views/learnPathList/index.vue             | 140 ++++++
 src/views/professionalListProfile/index.vue   | 471 +++++++-----------
 src/views/professionalListProfile/indexAa.vue | 343 +++++++++++++
 9 files changed, 686 insertions(+), 316 deletions(-)
 create mode 100644 src/views/learnPathList/index.vue
 create mode 100644 src/views/professionalListProfile/indexAa.vue

diff --git a/.env.development b/.env.development
index bee98b3..e10a425 100644
--- a/.env.development
+++ b/.env.development
@@ -5,4 +5,4 @@ VITE_APP_TITLE = '教学一体化平台'
 VITE_APP_BASE_API = 'http://127.0.0.1:8080'
 # VITE_APP_BASE_API = 'http://10.100.200.177:8080'
 #跳转后台页面
-VITE_ADMIN_URL = '182.92.169.222/portalhome'
+VITE_ADMIN_URL = 'http://182.92.169.222/portalhome'
diff --git a/src/Layout/footer/index.vue b/src/Layout/footer/index.vue
index bb12e63..9718832 100644
--- a/src/Layout/footer/index.vue
+++ b/src/Layout/footer/index.vue
@@ -2,7 +2,7 @@
   <div class="footer">
     <ul>
       <li>
-        系统标题：
+        系统标题：   
         {{ adminInfoStore.info.title }}
 
       </li><el-divider direction="vertical" border-style="dashed" />
@@ -69,7 +69,7 @@ console.log(adminInfoStore);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
+    // justify-content: center;
     color: #ccc;
     font-family:'Courier New', Courier, monospace;
     // background: linear-gradient(white,#38495a);
diff --git a/src/Layout/main/index.vue b/src/Layout/main/index.vue
index 6f0e055..14649bf 100644
--- a/src/Layout/main/index.vue
+++ b/src/Layout/main/index.vue
@@ -46,3 +46,5 @@ console.log($route);
 </script>
 
 <style lang="scss" scoped></style>
+
+
diff --git a/src/api/course.ts b/src/api/course.ts
index 495af38..08a2285 100644
--- a/src/api/course.ts
+++ b/src/api/course.ts
@@ -2,6 +2,13 @@ import request from '@/utils/requset'
 import { GetCourseObjectivesList} from './types/courseType'
 // 获取课程列表
 
+
+export const getCourseListApi = (params:object) => {
+  return request.get('/api/coursesteacher/page', {
+    params,
+  })
+}
+
 export const getCourseList = (params: object) => {
   return request({
     url: '/api/coursesteacher/index',
diff --git a/src/router/module/constRouter/index.ts b/src/router/module/constRouter/index.ts
index 5765151..14966e1 100644
--- a/src/router/module/constRouter/index.ts
+++ b/src/router/module/constRouter/index.ts
@@ -42,22 +42,31 @@ export const constRouter: any = [
       //     hidden: false,
       //   },
       // },
-      // {
-      //   path: '/professionalListProfile', // 课程
-      //   component: () => import('@/views/professionalListProfile/index.vue'),
-      //   name: 'professionalListProfile',
-      //   meta: {
-      //     icon: '',
-      //     title: '课程',
-      //     hidden: false,
-      //   },
-      // },
+      {
+        path: '/professionalListProfile', // 课程
+        component: () => import('@/views/professionalListProfile/index.vue'),
+        name: 'professionalListProfile',
+        meta: {
+          icon: '',
+          title: '课程',
+          hidden: false,
+        },
+      },
       {
         path: '/roadbedRecommendation',
         component: () => import('@/views/roadbedRecommendation/index.vue'),
         name: 'RoadbedRecommendation',
         meta: {
           title: '学习路径',
+          hidden: true,
+        },
+      },
+      {
+        path: '/learnPathList',
+        component: () => import('@/views/learnPathList/index.vue'),
+        name: 'LearnPathList',
+        meta: {
+          title: '学习路径列表',
           hidden: false,
         },
       },
@@ -86,7 +95,7 @@ export const constRouter: any = [
         component: () => import('@/views/course/index.vue'),
         name: 'course',
         meta: {
-          title: '课程首页',
+          title: '课程',
           hidden: true,
         },
       },
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f7a6973..3b06824 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -43,7 +43,7 @@
   }
   .source-box {
     position: absolute;
-    top: 40%;
+    top: 30%;
     left: 180px;
 
     .source {
diff --git a/src/views/learnPathList/index.vue b/src/views/learnPathList/index.vue
new file mode 100644
index 0000000..340c0af
--- /dev/null
+++ b/src/views/learnPathList/index.vue
@@ -0,0 +1,140 @@
+<template>
+    <div class="container">
+
+        <div class="left">
+            <div class="header">
+                <span>课程学习路径</span>
+                <div class="extra">
+                    <input type="text" placeholder="请输入课程名称" name="" id="">
+                    <el-button class="btn" type="primary" :icon="Search">搜索</el-button>
+                </div>
+            </div>
+            <div class="box">
+
+
+                <el-table :data="learnPath" style="width: 95%; margin: 50px auto;">
+                    <el-table-column label="课程名称" prop="name"> </el-table-column>
+                    <el-table-column label="路径序列" prop="ll"></el-table-column>
+                    <el-table-column label="知识点个数" prop="ge" width="100"></el-table-column>
+                    <el-table-column label="总学时" prop="tla" width="100"></el-table-column>
+                </el-table>
+
+                <div class="page">
+                    <el-pagination style="margin-left: 350px;" @size-change="onSizeChange" @current-change="onCurrentChange"
+                        :current-page="params.pegenum" :page-sizes="[6,7,8,]" :page-size="params.pagesize"
+                        layout="jumper,total, sizes, prev, pager, next, " :total="7">
+                    </el-pagination>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="infomation">资讯列表</div>
+            <div class="student">学生列表</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import { Search } from "@element-plus/icons-vue";
+
+const learnPath=ref([{
+    name:'软件项目管理',
+    ll:'aaa,bbb',
+    ge:'30',
+    tla:'32'
+},
+    {
+        name: '软件分析与设计',
+        ll: 'aaa,bbb',
+        ge: '30',
+        tla: '32'
+    },
+    {
+        name: '软件项目管理',
+        ll: 'aaa,bbb,ccc,ddd,aaa,',
+        ge: '30',
+        tla: '32'
+    },
+    {
+        name: '软件分析与设计',
+        ll: 'aaa,bbb',
+        ge: '30',
+        tla: '32'
+    },
+    {
+        name: '软件项目管理',
+        ll: 'aaa,bbb',
+        ge: '30',
+        tla: '32'
+    },
+    {
+        name: '软件分析与设计',
+        ll: 'aaa,bbb',
+        ge: '30',
+        tla: '32'
+    },
+    {
+        name: '软件项目管理',
+        ll: 'aaa,bbb',
+        ge: '30',
+        tla: '32'
+    },
+  
+])
+const params=ref({
+    pegenum:1,//当前页
+    pagesize:5,//当前生效的每页条数
+    cate_id:'',
+    state:''
+})
+</script>
+
+<style scoped lang="scss">
+.container {
+    width: $base-container-width;
+    height: 650px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+
+
+    .header {
+       margin: 20px 30px 60px 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 22px;
+.extra input{
+    font-size: 13px;
+    width: 200px;
+    height: 35px;
+    margin-right: 6px;
+}
+}
+    
+}
+
+.left {
+    width: 1200px;
+    height: 620px;
+    background-color: #ffffff;
+    margin: 10px 10px 0 0;
+}
+
+.right {
+    width: 410px;
+    height: 500px;
+    margin-top: 10px;
+
+    .infomation,
+    .student {
+        height: 305px;
+        margin-bottom: 10px;
+        background-color: #ffffff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/professionalListProfile/index.vue b/src/views/professionalListProfile/index.vue
index e3bb708..7c8b161 100644
--- a/src/views/professionalListProfile/index.vue
+++ b/src/views/professionalListProfile/index.vue
@@ -1,334 +1,203 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
-import useLearnPathStore from '@/store/module/learnPath';
-import { userGetInfoService, getCourseListApi } from '@/api/configuration';
-import useUserStore from '@/store/module/user';
-const userStore = useUserStore()
-const $router = useRouter()
-const learnPathStore = useLearnPathStore()
-function paginationChange(currentPage: number, pageSize: number) {
-    params.value.pageNo = currentPage
-    params.value.pageSize = pageSize
-    getCourseList()
-}
-const params = ref({
-    pageNo: 1,
-    pageSize: 7,
-    // username: 'qiuqiu',
-    userId: userStore.userInfo.id,
-    assessmenttype: '',
-    category: '',
-    nature: '',
-    teacher: '',
-})
-const getCourseList = async () => {
-    loading.value = true
-    const res = await getCourseListApi(params.value)
-    courseList.value = res.data.list
-    total.value = res.data.total
-    loading.value = false
-    // console.log(userStore.userName, '1111')
-}
-watch(() => userStore.userInfo.id, (newVal) => {
-    params.value.userId = newVal
-    getCourseList()
-})
-
-
-
-onMounted(() => {
-    if (userStore.userInfo.id) getCourseList()
-})
-const total = ref(0)
-const loading = ref(false)
-const courseList = ref()
-
-
-const isLogin = ref(false)
-userGetInfoService(userStore.token).then(res => {
-    // @ts-ignore
-    if (res.code === 200) {
-        isLogin.value = true
-    }
-})
-function skip(url: string) {
-    location.assign(url)
-}
-function handlePraise(item: any) {
-    if (isLogin.value) item.isPraise = !item.isPraise
-    else skip('http://localhost:5173/#/login?redirect=/configurationPage')
-}
-function handleStar(item: any) {
-    if (isLogin.value) item.isStar = !item.isStar
-    else skip('http://localhost:5173/#/login?redirect=/configurationPage')
-}
-
-
-// 点击查看课程详情，把课程id传过去
-const onGetCourseObject = async (id: any) => {
-
-    skip(`http://localhost:5173/#/curriculumCenter/courseDetails?id=${id}`)
-
-}
-
-function toPath(item: any) {
-    $router.push({
-        path:'/roadbedRecommendation',
-        query:{
-            isCourse:'true',
-            id:item.id
-        }
-
-    })
-    learnPathStore.setCourseData(item)
-}
-</script>
-
 <template>
-    <div class="view-container" v-loading="loading">
-        <div class="container" style="padding-bottom: 20px;">
+    <div class="container">
+        <div class="left">
+            <div class="header">
+                <span>课程列表</span>
+            </div>
+            <div class="choose">
+                <el-form inline>
+                    <el-form-item label="课程类别：" class="short-form-item">
+                        <el-select v-model="params.category">
+                            <el-option label="专业教育" value="1"></el-option>
+                            <el-option label="通识教育" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="课程性质" class="short-form-item">
+                        <el-select v-model="params.nature">
+                            <el-option label="必修" value="1"></el-option>
+                            <el-option label="选修" value="2"></el-option>
+                            <el-option label="任修" value="3"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="考核类型：" class="short-form-item">
+                        <el-select v-model="params.assessmenttype">
+                            <el-option label="考试" value="1"></el-option>
+                            <el-option label="考查" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSearch">搜索</el-button>
+                        <el-button type="primary" plain @click="onReset">重置</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div class="course">
+                <!-- <ul>
+                    <li >
+                        <img title="点击查看课程详情" :src="item.img" alt="" @click="onGetCourseObject(item.id)" />
+                        <h2 title="点击查看课程基本信息" class="course_name">
+                            {{ item.name }}
+                        </h2>
+                        <p class="teacher_name">讲师：{{ item.teacher }}</p>
+                        <p class="credit">
+                            <span>{{ item.classhours }}</span>
+                            学时 |
+                            <span>{{ item.credit }}</span>
+                            学分
+                        </p>
+                        <el-icon class="del" @click="onDeleteCourse(item.id)">
+                            <Delete />
+                        </el-icon>
+                        <el-button :class="userStore.data.roles[0] == 1 ? 'object' : 'object1'" round plain
+                            @click="onGetCourseObject(item.id)">
+                            详情
+                        </el-button>
+                    </li>
+                </ul> -->
 
-            <div class="main-content">
-                <div class="header">
-                    <div class="btn">
-                        <div class="course">
-                            <ul class="course_list">
-                                <li v-for="item in courseList" :key="item.id">
-                                    <img title="点击查看课程详情" :src="item.img" alt="" @click="onGetCourseObject(item.id)" />
-                                    <h2 title="点击查看课程基本信息" class="course_name">
-                                        {{ item.name }}
-                                    </h2>
-                                    <p class="teacher_name">讲师：{{ item.teacher }}</p>
-                                    <p class="credit">
-                                        <span>{{ item.classhours }}</span>
-                                        学时 |
-                                        <span>{{ item.credit }}</span>
-                                        学分
-                                    </p>
 
-                                    <div class="parent">
-                                        <div class="div1" @click="handlePraise(item)">
-                                            <SvgIcon v-if="!item.isPraise" width="12px" height="12px" name="Praise">
-                                            </SvgIcon>
-                                            <SvgIcon v-else width="12px" height="12px" name="PraiseFilled"
-                                                color="#f7ba2a"></SvgIcon>
-                                        </div>
-                                        <div class="div2" @click="handleStar(item)">
-                                            <SvgIcon v-if="!item.isStar" width="12px" height="12px" name="Star">
-                                            </SvgIcon>
-                                            <SvgIcon v-else width="12px" height="12px" name="StarFilled"
-                                                color="#f7ba2a"></SvgIcon>
-                                        </div>
 
-                                    </div>
-                                    <div class="object">
-                                        <el-button round plain @click="onGetCourseObject(item.id)">
-                                            详情
-                                        </el-button>
-                                        <el-button round plain @click="toPath(item)">
-                                            路径规划
-                                        </el-button>
-                                    </div>
+            </div>
 
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
+
+            <div class="page">
+                <el-pagination style="margin-left: 350px;" @size-change="onSizeChange" @current-change="onCurrentChange"
+                    :current-page="params.pegenum" :page-sizes="[6, 7, 8,]" :page-size="params.pagesize"
+                    layout="jumper,total, sizes, prev, pager, next, " :total="7">
+                </el-pagination>
             </div>
-            <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize"
-                :page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next "
-                :total="total" @change="paginationChange" style="margin-top: 10px; justify-content: center" />
 
         </div>
+        <div class="right">
+            <div class="infomation">资讯列表</div>
+            <div class="student">学生列表</div>
+        </div>
     </div>
 </template>
 
-<style lang="scss" scoped>
-.parent {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 5px;
-    grid-row-gap: 0px;
-    position: absolute;
-    margin-left: 280px;
-    margin-top: -80px;
-    color: #0052ff;
-    cursor: pointer;
-
-    .div1 {
-        grid-area: 1 / 1 / 2 / 2;
-    }
-
-    .div2 {
-        grid-area: 1 / 2 / 2 / 3;
-    }
-}
+<script setup>
+import { ref } from "vue"
+import { Search } from "@element-plus/icons-vue";
+import { getCourseListApi } from '@/api/course.ts'
 
+const courseList = ref()
+const getCourseList = async () => {
+    const res = await getCourseListApi(params.value)
+    courseList.value = res.data.list
+    
+    total.value = res.data.total
 
+    console.log(courseList.value, 'courseList.value')
 
 
-.main-content {
-    width: 1440px;
-    margin: 0 auto;
-}
-
-.header {
-    width: 100%;
-    // height: 100px;
-    display: flex;
-    flex-direction: row;
 }
+getCourseList()
+// const learnPath = ref([{
+//     name: '软件项目管理',
+//     ll: 'aaa,bbb',
+//     ge: '30',
+//     tla: '32'
+// },
+// {
+//     name: '软件分析与设计',
+//     ll: 'aaa,bbb',
+//     ge: '30',
+//     tla: '32'
+// },
+// {
+//     name: '软件项目管理',
+//     ll: 'aaa,bbb,ccc,ddd,aaa,',
+//     ge: '30',
+//     tla: '32'
+// },
+// {
+//     name: '软件分析与设计',
+//     ll: 'aaa,bbb',
+//     ge: '30',
+//     tla: '32'
+// },
+// {
+//     name: '软件项目管理',
+//     ll: 'aaa,bbb',
+//     ge: '30',
+//     tla: '32'
+// },
+// {
+//     name: '软件分析与设计',
+//     ll: 'aaa,bbb',
+//     ge: '30',
+//     tla: '32'
+// },
+// {
+//     name: '软件项目管理',
+//     ll: 'aaa,bbb',
+//     ge: '30',
+//     tla: '32'
+// },
+
+// ])
+const params = ref({
+    pegenum: 1,//当前页
+    pagesize: 5,//当前生效的每页条数
+    cate_id: '',
+    state: ''
+})
+</script>
 
-// .btn {
-//   // display: flex;
-//   width: 50%;
-//   height: 100%;
-//   padding: 10px 0;
-//   // display: inline;
-//   // height: 40px;
-//   // margin: 20px;
-//   // padding-left: 50px;
-// }
-.search {
-    width: 50%;
+<style scoped lang="scss">
+.container {
+    width: $base-container-width;
+    height: 650px;
+    margin: 0 auto;
     display: flex;
-    height: 100%;
-    justify-content: flex-end;
-
-    // flex-direction: row-reverse;
-    // padding: 0 40px 0;
-    input {
-        width: 240px;
-        height: 40px;
-        border: 1px solid #dcdcdc;
-        border-radius: 60px;
-        font-size: 14px;
-    }
-}
+    justify-content: space-between;
+    box-sizing: border-box;
 
-.course {
 
-    // display: flex;
-    // flex: 0 0 25%;
-    // justify-content: space-between;
-    // flex-wrap: wrap;
-    .course_list {
-        display: flex;
-        // flex: 0 0 25%;
-        // justify-content: space-between;
-        flex-wrap: wrap;
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        column-gap: 50px;
-    }
-
-    li {
-        margin: 40px 0;
-        width: 349px;
-        height: 297px;
-        background: rgb(255, 255, 255);
-        transition: all 0.5s;
-        border-radius: 6px;
-        position: relative;
-
-        // flex: 1; /* 子元素按比例伸缩 */
-        &:hover {
-            transform: translate3d(0, -3px, 0);
-            box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
-        }
 
-        .course_name {
-            font-family: Inter-Bold;
-            color: #333;
-            font-size: 24px;
-            margin-left: 30px;
-            margin-top: 10px;
-            font-weight: bold;
 
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
-        img {
-            background-color: #cccccc;
-            width: 100%;
-            height: 178px;
-            cursor: pointer;
-        }
-
-        p {
-            margin-left: 30px;
-            margin-top: 5px;
-            color: #555555;
-            font-size: 14px;
-            padding-top: 10px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-
-            span {
-                color: #0052ff;
-            }
-        }
-    }
-
-    .del {
-        position: absolute;
-        margin-left: 280px;
-        margin-top: -80px;
-        color: #0052ff;
-        cursor: pointer;
-    }
-
-    .object {
-        position: absolute;
-        margin-left: 180px;
-        margin-top: -29px;
-    }
 }
 
-.plus {
-    width: 100%;
-    height: 178px;
-
-    &:hover {
-        cursor: pointer;
+.left {
+    width: 1200px;
+    height: 620px;
+    background-color: #ffffff;
+    margin: 10px 10px 0 0;
+
+    .header {
+        height: 60px;
+        line-height: 60px;
+        margin: 10px 30px;
+        font-size: 24px;
     }
 
-    // background-position: center center;
-    .el-icon.avatar-uploader-icon {
-        font-size: 50px;
-        color: #8c939d;
-        width: 100%;
-        height: 178px;
-        margin-top: 20px;
-        text-align: center;
-    }
-}
-
-.add_course {
-    border: 2px dashed rgb(143, 139, 139);
-
-    h2 {
-        font-size: 40px;
-        text-align: center;
-        font-family: Inter-Bold;
-        color: #535050;
-        font-weight: bold;
-        margin-top: 20px;
+    .choose {
+        height: 80px;
+        display: flex;
+        align-items: center;
+        padding-left: 50px;
 
-        &:hover {
-            cursor: pointer;
+        .short-form-item {
+            width: 200px;
+            margin-right: 100px;
         }
     }
+   
 }
 
-.short-form-item {
-    width: 300px;
-    margin-right: 100px;
+.right {
+    width: 410px;
+    height: 500px;
+    margin-top: 10px;
+
+    .infomation,
+    .student {
+        height: 305px;
+        margin-bottom: 10px;
+        background-color: #ffffff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/professionalListProfile/indexAa.vue b/src/views/professionalListProfile/indexAa.vue
new file mode 100644
index 0000000..570ea54
--- /dev/null
+++ b/src/views/professionalListProfile/indexAa.vue
@@ -0,0 +1,343 @@
+<script setup lang="ts">
+// import { onMounted, ref, watch } from 'vue';
+// import { useRouter } from 'vue-router';
+// import useLearnPathStore from '@/store/module/learnPath';
+// import { userGetInfoService, getCourseListApi } from '@/api/configuration';
+// import useUserStore from '@/store/module/user';
+// const userStore = useUserStore()
+// const $router = useRouter()
+// const learnPathStore = useLearnPathStore()
+// function paginationChange(currentPage: number, pageSize: number) {
+//     params.value.pageNo = currentPage
+//     params.value.pageSize = pageSize
+//     getCourseList()
+// }
+// const params = ref({
+//     pageNo: 1,
+//     pageSize: 7,
+//     // username: 'qiuqiu',
+//     userId: userStore.userInfo.id,
+//     assessmenttype: '',
+//     category: '',
+//     nature: '',
+//     teacher: '',
+// })
+// const getCourseList = async () => {
+//     loading.value = true
+//     const res = await getCourseListApi(params.value)
+//     courseList.value = res.data.list
+//     total.value = res.data.total
+//     loading.value = false
+//     // console.log(userStore.userName, '1111')
+// }
+// watch(() => userStore.userInfo.id, (newVal) => {
+//     params.value.userId = newVal
+//     getCourseList()
+// })
+
+
+
+// onMounted(() => {
+//     if (userStore.userInfo.id) getCourseList()
+// })
+// const total = ref(0)
+// const loading = ref(false)
+// const courseList = ref()
+
+
+// const isLogin = ref(false)
+// userGetInfoService(userStore.token).then(res => {
+//     // @ts-ignore
+//     if (res.code === 200) {
+//         isLogin.value = true
+//     }
+// })
+// function skip(url: string) {
+//     location.assign(url)
+// }
+// function handlePraise(item: any) {
+//     if (isLogin.value) item.isPraise = !item.isPraise
+//     else skip('http://localhost:5173/#/login?redirect=/configurationPage')
+// }
+// function handleStar(item: any) {
+//     if (isLogin.value) item.isStar = !item.isStar
+//     else skip('http://localhost:5173/#/login?redirect=/configurationPage')
+// }
+
+
+// // 点击查看课程详情，把课程id传过去
+// const onGetCourseObject = async (id: any) => {
+
+//     skip(`http://localhost:5173/#/curriculumCenter/courseDetails?id=${id}`)
+
+// }
+
+// function toPath(item: any) {
+//     $router.push({
+//         path:'/roadbedRecommendation',
+//         query:{
+//             isCourse:'true',
+//             id:item.id
+//         }
+
+//     })
+//     learnPathStore.setCourseData(item)
+// }
+</script>
+
+<template>
+    <div>aaa</div>
+
+
+
+
+    
+     <!-- <div class="view-container" > 
+        <div class="container" style="padding-bottom: 20px;">
+            <div class="main-content">
+                <div class="header">
+                    <div class="btn">
+                        <div class="course">
+                            <ul class="course_list">
+                                <li v-for="item in courseList" :key="item.id">
+                                    <img title="点击查看课程详情" :src="item.img" alt="" @click="onGetCourseObject(item.id)" />
+                                    <h2 title="点击查看课程基本信息" class="course_name">
+                                        {{ item.name }}
+                                    </h2>
+                                    <p class="teacher_name">讲师：{{ item.teacher }}</p>
+                                    <p class="credit">
+                                        <span>{{ item.classhours }}</span>
+                                        学时 |
+                                        <span>{{ item.credit }}</span>
+                                        学分
+                                    </p>
+
+                                    <div class="parent">
+                                        <div class="div1" @click="handlePraise(item)">
+                                            <SvgIcon v-if="!item.isPraise" width="12px" height="12px" name="Praise">
+                                            </SvgIcon>
+                                            <SvgIcon v-else width="12px" height="12px" name="PraiseFilled"
+                                                color="#f7ba2a"></SvgIcon>
+                                        </div>
+                                        <div class="div2" @click="handleStar(item)">
+                                            <SvgIcon v-if="!item.isStar" width="12px" height="12px" name="Star">
+                                            </SvgIcon>
+                                            <SvgIcon v-else width="12px" height="12px" name="StarFilled"
+                                                color="#f7ba2a"></SvgIcon>
+                                        </div>
+
+                                    </div>
+                                    <div class="object">
+                                        <el-button round plain @click="onGetCourseObject(item.id)">
+                                            详情
+                                        </el-button>
+                                        <el-button round plain @click="toPath(item)">
+                                            路径规划
+                                        </el-button>
+                                    </div>
+
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div> 
+            <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize"
+                :page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next "
+                :total="total" @change="paginationChange" style="margin-top: 10px; justify-content: center" />
+
+        </div>
+    </div> -->
+</template>
+
+<style lang="scss" scoped>
+
+
+
+
+// .parent {
+//     display: grid;
+//     grid-template-columns: repeat(2, 1fr);
+//     grid-template-rows: 1fr;
+//     grid-column-gap: 5px;
+//     grid-row-gap: 0px;
+//     position: absolute;
+//     margin-left: 280px;
+//     margin-top: -80px;
+//     color: #0052ff;
+//     cursor: pointer;
+
+//     .div1 {
+//         grid-area: 1 / 1 / 2 / 2;
+//     }
+
+//     .div2 {
+//         grid-area: 1 / 2 / 2 / 3;
+//     }
+// }
+
+
+
+
+// .main-content {
+//     width: 1440px;
+//     margin: 0 auto;
+// }
+
+// .header {
+//     width: 100%;
+//     // height: 100px;
+//     display: flex;
+//     flex-direction: row;
+// }
+
+// // .btn {
+// //   // display: flex;
+// //   width: 50%;
+// //   height: 100%;
+// //   padding: 10px 0;
+// //   // display: inline;
+// //   // height: 40px;
+// //   // margin: 20px;
+// //   // padding-left: 50px;
+// // }
+// .search {
+//     width: 50%;
+//     display: flex;
+//     height: 100%;
+//     justify-content: flex-end;
+
+//     // flex-direction: row-reverse;
+//     // padding: 0 40px 0;
+//     input {
+//         width: 240px;
+//         height: 40px;
+//         border: 1px solid #dcdcdc;
+//         border-radius: 60px;
+//         font-size: 14px;
+//     }
+// }
+
+// .course {
+
+//     // display: flex;
+//     // flex: 0 0 25%;
+//     // justify-content: space-between;
+//     // flex-wrap: wrap;
+//     .course_list {
+//         display: flex;
+//         // flex: 0 0 25%;
+//         // justify-content: space-between;
+//         flex-wrap: wrap;
+//         display: grid;
+//         grid-template-columns: repeat(4, 1fr);
+//         column-gap: 50px;
+//     }
+
+//     li {
+//         margin: 40px 0;
+//         width: 349px;
+//         height: 297px;
+//         background: rgb(255, 255, 255);
+//         transition: all 0.5s;
+//         border-radius: 6px;
+//         position: relative;
+
+//         // flex: 1; /* 子元素按比例伸缩 */
+//         &:hover {
+//             transform: translate3d(0, -3px, 0);
+//             box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
+//         }
+
+//         .course_name {
+//             font-family: Inter-Bold;
+//             color: #333;
+//             font-size: 24px;
+//             margin-left: 30px;
+//             margin-top: 10px;
+//             font-weight: bold;
+
+//             &:hover {
+//                 cursor: pointer;
+//             }
+//         }
+
+//         img {
+//             background-color: #cccccc;
+//             width: 100%;
+//             height: 178px;
+//             cursor: pointer;
+//         }
+
+//         p {
+//             margin-left: 30px;
+//             margin-top: 5px;
+//             color: #555555;
+//             font-size: 14px;
+//             padding-top: 10px;
+//             text-overflow: ellipsis;
+//             overflow: hidden;
+//             white-space: nowrap;
+
+//             span {
+//                 color: #0052ff;
+//             }
+//         }
+//     }
+
+//     .del {
+//         position: absolute;
+//         margin-left: 280px;
+//         margin-top: -80px;
+//         color: #0052ff;
+//         cursor: pointer;
+//     }
+
+//     .object {
+//         position: absolute;
+//         margin-left: 180px;
+//         margin-top: -29px;
+//     }
+// }
+
+// .plus {
+//     width: 100%;
+//     height: 178px;
+
+//     &:hover {
+//         cursor: pointer;
+//     }
+
+//     // background-position: center center;
+//     .el-icon.avatar-uploader-icon {
+//         font-size: 50px;
+//         color: #8c939d;
+//         width: 100%;
+//         height: 178px;
+//         margin-top: 20px;
+//         text-align: center;
+//     }
+// }
+
+// .add_course {
+//     border: 2px dashed rgb(143, 139, 139);
+
+//     h2 {
+//         font-size: 40px;
+//         text-align: center;
+//         font-family: Inter-Bold;
+//         color: #535050;
+//         font-weight: bold;
+//         margin-top: 20px;
+
+//         &:hover {
+//             cursor: pointer;
+//         }
+//     }
+// }
+
+// .short-form-item {
+//     width: 300px;
+//     margin-right: 100px;
+// }
+</style>
\ No newline at end of file