新增课程详情

src/api/courseChaptersApi.ts

@@ -96,20 +96,20 @@ export const deleteCourse = (params: any) => {
 // 获取详情
 export const getCourseInfo = (params: any) => {
   return request({
-// <<<<<<< HEAD
+    // <<<<<<< HEAD
     url: '/objective_contents/' + params.id,
     method: 'get',
-//     // params
+    //     // params
-// =======
+    // =======
-// <<<<<<< HEAD
+    // <<<<<<< HEAD
-//     url: '/api/objective_contents/' + params.id,
+    //     url: '/api/objective_contents/' + params.id,
-//     method: 'get',
+    //     method: 'get',
-//     params,
+    //     params,
-// =======
+    // =======
-//     url: '/objective_contents/' + params.id,
+    //     url: '/objective_contents/' + params.id,
-//     method: "get",
+    //     method: "get",
-//     // params
+    //     // params
-// >>>>>>> 1a620e19de970965f426e07348b1dbc4be900eaf
+    // >>>>>>> 1a620e19de970965f426e07348b1dbc4be900eaf
-// >>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
+    // >>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a
   })
 }

src/api/sectionApi.ts

@@ -6,143 +6,143 @@ import request from '@/utils/request'
  * 2fa0fd63262230639d2c45a3acd9045c
  */
 export function getChapterApi(courseid: string) {
-    return request.get(`/chapter/aaa/${courseid}`);
+  return request.get(`/chapter/aaa/${courseid}`)
 }
 
-
 // 响应接口
 export interface DeleteRes {
-    code: number;
+  code: number
-    data: boolean;
+  data: boolean
-    message: string;
+  message: string
 }
 
 /**
  * 删除章节信息
  * @param {string} id id
-  * @returns
+ * @returns
  */
 export function deleteSectionApi(id: string): Promise<DeleteRes> {
-    return request.delete(`/chapter/${id}`);
+  return request.delete(`/chapter/${id}`)
 }
 
 // 响应接口
 export interface GetByIdCourseVoRes {
-    code: number;
+  code: number
-    data: {
+  data: {
-      classhours: number;
+    classhours: number
-      credit: number;
+    credit: number
-      description: string;
+    description: string
-      id: string;
+    id: string
-      img: string;
+    img: string
-      name: string;
+    name: string
-      objectContent: string;
+    objectContent: string
-      teacher: string;
+    teacher: string
-      totalAssignHours: number;
+    totalAssignHours: number
-      totalHours: number;
+    totalHours: number
-      totalKnow: number;
+    totalKnow: number
-      totalNotAssignHours: number;
+    totalNotAssignHours: number
-      totalchapter: number;
+    totalchapter: number
-    };
-    message: string;
-  }
-  
-  /** 
-   * 根据id查询课程Vo版
-   * @param {string} id id
-    * @returns
-   */
-  export function getByIdCourseVoApi(id: string): Promise<GetByIdCourseVoRes> {
-    return request.get(`/api/coursesteacher/getById/${id}`);
   }
+  message: string
+}
 
+/**
+ * 根据id查询课程Vo版
+ * @param {string} id id
+ * @returns
+ */
+export function getByIdCourseVoApi(id: string): Promise<GetByIdCourseVoRes> {
+  return request.get(`/api/coursesteacher/getById/${id}`)
+}
 
-  // 参数接口
+// 参数接口
 export interface AddChapterParams {
-    content?: string;
+  content?: string
-    courseid?: string;
+  courseid?: string
-    courseobjectivesid?: string;
+  courseobjectivesid?: string
-    createBy?: string;
+  createBy?: string
-    createTime?: Record<string, unknown>;
+  createTime?: Record<string, unknown>
-    id?: string;
+  id?: string
-    name?: string;
+  name?: string
-    num?: number;
+  num?: number
-    numshow?: string;
+  numshow?: string
-    onlinclasshours?: string;
+  onlinclasshours?: string
-    pid?: string;
+  pid?: string
-    requirement?: string;
+  requirement?: string
-    sysOrgCode?: string;
+  sysOrgCode?: string
-    totalclasshours?: string;
+  totalclasshours?: string
-    updateBy?: string;
+  updateBy?: string
-    updateTime?: Record<string, unknown>;
+  updateTime?: Record<string, unknown>
-    zc?: string;
+  zc?: string
-    ziyuan?: string;
+  ziyuan?: string
-    zywj?: string;
+  zywj?: string
-  }
+}
 
-  // 响应接口
+// 响应接口
-  export interface AddChapterRes {
+export interface AddChapterRes {
-    code: number;
+  code: number
-    data: boolean;
+  data: boolean
-    message: string;
+  message: string
-  }
+}
 
-  /** 
+/**
-   * 添加章节
+ * 添加章节
-   * @param {object} params chapter
+ * @param {object} params chapter
-   * @param {string} params.content 简介
+ * @param {string} params.content 简介
-   * @param {string} params.courseid 课程
+ * @param {string} params.courseid 课程
-   * @param {string} params.courseobjectivesid 课程目标
+ * @param {string} params.courseobjectivesid 课程目标
-   * @param {string} params.createBy 创建人
+ * @param {string} params.createBy 创建人
-   * @param {object} params.createTime 创建日期
+ * @param {object} params.createTime 创建日期
-   * @param {string} params.id 主键
+ * @param {string} params.id 主键
-   * @param {string} params.name 名称
+ * @param {string} params.name 名称
-   * @param {number} params.num 序号
+ * @param {number} params.num 序号
-   * @param {string} params.numshow 内部序号显示
+ * @param {string} params.numshow 内部序号显示
-   * @param {string} params.onlinclasshours 线上学时
+ * @param {string} params.onlinclasshours 线上学时
-   * @param {string} params.pid 父级节点
+ * @param {string} params.pid 父级节点
-   * @param {string} params.requirement 要求
+ * @param {string} params.requirement 要求
-   * @param {string} params.sysOrgCode 所属部门
+ * @param {string} params.sysOrgCode 所属部门
-   * @param {string} params.totalclasshours 总学时
+ * @param {string} params.totalclasshours 总学时
-   * @param {string} params.updateBy 更新人
+ * @param {string} params.updateBy 更新人
-   * @param {object} params.updateTime 更新日期
+ * @param {object} params.updateTime 更新日期
-   * @param {string} params.zc 周次
+ * @param {string} params.zc 周次
-   * @param {string} params.ziyuan 资源
+ * @param {string} params.ziyuan 资源
-   * @param {string} params.zywj 资源文件
+ * @param {string} params.zywj 资源文件
-   * @returns
+ * @returns
-   */
+ */
-  export function addChapterApi(params: AddChapterParams): Promise<AddChapterRes> {
+export function addChapterApi(
-    return request.post(`/chapter/add`, params);
+  params: AddChapterParams,
-  }
+): Promise<AddChapterRes> {
+  return request.post(`/chapter/add`, params)
+}
 
-  // 参数接口
+// 参数接口
 export interface UpdateChapterParams {
-  content?: string;
+  content?: string
-  courseid?: string;
+  courseid?: string
-  courseobjectivesid?: string;
+  courseobjectivesid?: string
-  createBy?: string;
+  createBy?: string
-  createTime?: Record<string, unknown>;
+  createTime?: Record<string, unknown>
-  id?: string;
+  id?: string
-  name?: string;
+  name?: string
-  num?: number;
+  num?: number
-  numshow?: string;
+  numshow?: string
-  onlinclasshours?: string;
+  onlinclasshours?: string
-  pid?: string;
+  pid?: string
-  requirement?: string;
+  requirement?: string
-  sysOrgCode?: string;
+  sysOrgCode?: string
-  totalclasshours?: string;
+  totalclasshours?: string
-  updateBy?: string;
+  updateBy?: string
-  updateTime?: Record<string, unknown>;
+  updateTime?: Record<string, unknown>
-  zc?: string;
+  zc?: string
-  ziyuan?: string;
+  ziyuan?: string
-  zywj?: string;
+  zywj?: string
 }
 
 // 响应接口
 export interface UpdateChapterRes {
-  code: number;
+  code: number
-  data: boolean;
+  data: boolean
-  message: string;
+  message: string
 }
 
 /**
@@ -169,6 +169,8 @@ export interface UpdateChapterRes {
  * @param {string} params.zywj 资源文件
  * @returns
  */
-export function updateChapterApi(params: UpdateChapterParams): Promise<UpdateChapterRes> {
+export function updateChapterApi(
-  return request.put(`/chapter`, params);
+  params: UpdateChapterParams,
+): Promise<UpdateChapterRes> {
+  return request.put(`/chapter`, params)
 }

src/router/routers.ts

@@ -64,6 +64,16 @@ export const constantRoute: any = [
           icon: 'Notebook',
         },
       },
+      {
+        path: '/curriculumCenter/courseDetails',
+        component: () => import('@/views/course/courseDetails.vue'),
+        name: 'CourseDetails',
+        meta: {
+          title: '课程详情',
+          hidden: false,
+          icon: 'Notebook',
+        },
+      },
       {
         path: '/curriculumCenter/CourseObjectives',
         component: () => import('@/views/course/CourseObjectives.vue'),
@@ -308,5 +318,5 @@ export const constantRoute: any = [
       hidden: true,
       icon: 'Notebook',
     },
-  }
+  },
 ]

src/views/course/CourseObjectives.vue

@@ -114,7 +114,7 @@ const filterTarger = (target) => {
   return res.label
 }
 
-const editdata = ref({ id: '', objectiveId:'' })
+const editdata = ref({ id: '', objectiveId: '' })
 // 编辑事件
 const flog = ref(false)
 const editBook = async (obj) => {
@@ -161,7 +161,7 @@ const data = ref({})
 const courseId = ref(0)
 onMounted(async () => {
   if (!Object.keys(route.query).length) {
-    return router.push('/curriculumCenter/basicCourseInformation')
+    return router.push('/curriculumCenter/CourseObjectives')
   }
   courseId.value = route.query.id
   console.log(courseId.value)
@@ -333,14 +333,13 @@ onMounted(async () => {
 <template>
   <div class="container">
     <div class="leftContent">
-      <div class="topContent">
+      <!-- <div class="topContent">
         <div class="title">| 课程总目标</div>
         <div class="content1">
           <textarea class="textarea" @change="textChange" v-model="text">
-文本内容</textarea
+文本内容</textarea>
-          >
         </div>
-      </div>
+      </div> -->
       <div class="footContent">
         <div class="title">| 分目标雷达图</div>
         <div class="content3">
@@ -349,29 +348,23 @@ onMounted(async () => {
       </div>
     </div>
     <div class="rightContent">
-      <div
+      <div class="title" style="
-        class="title"
-        style="
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0 20px;
           height: 60px;
-        "
+        ">
-      >
+        <div class="left2">| 课程目标</div>
-        <div class="left2">| 课程分目标</div>
         <div class="right2">
           <!-- <el-button type="primary" @click="addBook">新增</el-button> -->
         </div>
       </div>
       <div class="content2">
-        <el-scrollbar height="600px">
+        <el-scrollbar height="370px">
           <ul class="objectLi">
-            <li
+            <li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id">
-              v-for="(item, index) in data.courseObjectivesTrees"
-              :key="item.id"
-            >
               <div class="courseObject">
                 <!-- {{ filterTarger(item.targetId) }} -->
                 <div class="courseObject1">{{ item.name }}</div>
@@ -396,18 +389,10 @@ onMounted(async () => {
                           <!-- {{ filterTarger(obj.targetId) }} -->
                         </div>
                         <div class="partObject2">
-                          <el-button
+                          <el-button class="edit" type="text" @click="editBook(obj)">
-                            class="edit"
-                            type="text"
-                            @click="editBook(obj)"
-                          >
                             编辑
                           </el-button>
-                          <el-button
+                          <el-button class="destroy" type="text" @click="del(obj)">
-                            class="destroy"
-                            type="text"
-                            @click="del(obj)"
-                          >
                             删除
                           </el-button>
                         </div>
@@ -425,25 +410,11 @@ onMounted(async () => {
       </div>
     </div>
   </div>
-  <el-dialog
+  <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500"
-    v-if="dialogVisible"
+    :before-close="handleClose">
-    v-model="dialogVisible"
-    :title="flog ? '编辑' : '新增'"
-    width="500"
-    :before-close="handleClose"
-  >
     <el-form :model="formData" label-width="auto" style="max-width: 600px">
-      <!-- <el-form-item label="目标" prop="target">
-        <el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px">
-          <el-option v-for="item in targetList" :key="item.id" :label="item.label" :value="item.id"
-            :disabled="item.disabled" />
-        </el-select>
-      </el-form-item> -->
       <el-form-item label="内容" prop="description">
-        <el-input
+        <el-input v-model="formData.description" placeholder="请输入内容"></el-input>
-          v-model="formData.description"
-          placeholder="请输入内容"
-        ></el-input>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -470,8 +441,7 @@ const li
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  width: 100%;
+  width: 70%;
-
   padding: 0 10px 0 10px;
   justify-content: space-around;
 }
@@ -481,18 +451,10 @@ const li
   height: 730px;
   margin: 10px;
 
-  .topContent {
-    border-radius: 20px 20px 0 0px;
-    height: 280px;
-    background-color: #74deff;
-    margin-button: 5px;
-    background-image: linear-gradient(to right, #4984ff, #74deff);
-  }
-
   .footContent {
     border-radius: 20px;
-    margin-top: 20px;
+    // margin-top: 20px;
-    height: 430px;
+    height: 230px;
     background-color: #ffa674;
     background-image: linear-gradient(to right, #f9e397, #ffa674);
   }
@@ -500,8 +462,8 @@ const li
 
 .rightContent {
   margin: 10px;
-  width: 950px;
+  width: 550px;
-  height: 730px;
+  height: 430px;
   background-image: linear-gradient(to right, #4984ff, #74deff);
   border-radius: 20px;
 }
@@ -516,38 +478,16 @@ const li
   padding-top: 10px;
 }
 
-.content1 {
-  border-radius: 20px 20px 0 0px;
-  margin-top: 20px;
-  width: 100%;
-  height: 220px;
-  background-color: #fff;
-  background-image: linear-gradient(#c7e3ff, #ffffff);
-
-  .textarea {
-    width: 100%;
-    border: none;
-    background: transparent;
-    padding: 20px;
-    height: 215px;
-  }
-
-  p {
-    padding: 30px;
-    font-size: 16px;
-  }
-}
-
 .content2 {
   border-radius: 20px;
   padding: 10px;
   width: 100%;
-  height: 670px;
+  height: 370px;
   background-color: #fff;
   background-image: linear-gradient(#c7e3ff, #ffffff);
 
-  .objectLi > li {
+  .objectLi>li {
-    width: 845px;
+    // width: 545px;
     height: 250px;
     // margin: 40px;
     // background-color: #ffffff;
@@ -589,9 +529,9 @@ const li
     background-image: linear-gradient(#c7e3ff, #ffffff);
   }
 
-  .small > li {
+  .small>li {
     // display: inline-flex;
-    width: 650px;
+    // width: 650px;
     height: 150px;
     // margin: 40px;
     background-color: #ffffff;

src/views/course/basicCourseInformation.vue

@@ -132,7 +132,7 @@ const onDeleteCourse = async (id: any) => {
 const onGetCourseObject = async (id: any) => {
   // const res = await getCourseObjectApi(id)
   router.push({
-    path: '/curriculumCenter/CourseObjectives',
+    path: '/curriculumCenter/courseDetails',
     query: {
       id: id,
     },
@@ -172,12 +172,12 @@ const CloseCouresNameChangeEvent = () => {
         <!-- <el-button type="primary" round size="large">全部课程</el-button>
       <el-button type="primary" round plain size="large">我的文件夹</el-button> -->
         <el-form inline v-if="userStore.userInfo.roleId[0] === '1'">
-          <el-form-item label="课程教师：" class="short-form-item">
+          <!-- <el-form-item label="课程教师：" class="short-form-item">
             <el-select v-model="params.teacher">
               <el-option v-for="teachers in teacherList" :key="teachers.username" :value="teachers.username"
                 :label="teachers.name"></el-option>
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item label="课程类别：" class="short-form-item">
             <el-select v-model="params.category">
               <el-option label="专业教育" value="1"></el-option>
@@ -220,14 +220,14 @@ const CloseCouresNameChangeEvent = () => {
               </p> -->
             </li>
             <li v-for="item in courseList" :key="item.id">
-              <img :src="item.img" alt="" />
+              <img title="点击查看课程详情" :src="item.img" alt="" @click="onGetCourseObject(item.id)" />
-              <h2 class="course_name" @click="onEditCourse(item)">
+              <h2 title="点击查看课程基本信息" class="course_name" @click="onEditCourse(item)">
                 {{ item.name }}
               </h2>
               <p class="teacher_name">讲师：{{ item.teacher }}</p>
               <p class="credit">
                 <span>{{ item.classhours }}</span>
-                学时|
+                学时 |
                 <span>{{ item.credit }}</span>
                 学分
               </p>
@@ -235,7 +235,7 @@ const CloseCouresNameChangeEvent = () => {
                 <Delete />
               </el-icon>
               <el-button class="object" round plain @click="onGetCourseObject(item.id)">
-                查看课程目标
+                查看课程详情
               </el-button>
             </li>
           </ul>
@@ -340,11 +340,12 @@ const CloseCouresNameChangeEvent = () => {
       background-color: #cccccc;
       width: 100%;
       height: 178px;
+      cursor: pointer;
     }
 
     p {
       margin-left: 30px;
-      margin-top: 10px;
+      margin-top: 5px;
       color: #555555;
       font-size: 14px;
       padding-top: 12px;
@@ -360,7 +361,7 @@ const CloseCouresNameChangeEvent = () => {
 
   .del {
     position: absolute;
-    margin-left: 302px;
+    margin-left: 295px;
     margin-top: -90px;
     color: #0052ff;
     cursor: pointer;
@@ -368,7 +369,7 @@ const CloseCouresNameChangeEvent = () => {
 
   .object {
     position: absolute;
-    margin-left: 204px;
+    margin-left: 190px;
     margin-top: -24px;
   }
 }
@@ -410,7 +411,7 @@ const CloseCouresNameChangeEvent = () => {
 }
 
 .short-form-item {
-  width: 250px;
+  width: 300px;
-  margin-right: 65px;
+  margin-right: 100px;
 }
 </style>

src/views/course/courseChapters.vue

@@ -21,12 +21,11 @@
                     <FoldAdd v-model:is-d="showHide" v-if="showHide" :data="foldInfoData" @submit="foldAddSubmit" />
                     <FoldEdit v-model:is-d="showHide1" v-if="showHide1" :editData="activeEditData" :data="foldInfoData"
                         @submit="foldEditSubmit" />
-
                 </div>
             </div>
             <div class="flex_right">
                 <div class="top-container">
-                    <img src="" alt="">
+                    <img src="" alt="" />
                 </div>
                 <div class="bottom-container radius-10">
                     <!-- 查看资源 -->
@@ -35,16 +34,31 @@
             </div>
         </div>
     </div>
-
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
-import { getLearnInfoApi, getOrogramObjectiveApi } from '@/api/courseChaptersApi'
+import {
-import { getChapterApi, deleteSectionApi, addChapterApi, updateChapterApi } from '@/api/sectionApi'
+    getLearnInfoApi,
-import { theoryUi, objectiveUi, atlasUi, lookResourceUi, foldInfoUi, FoldAdd, FoldEdit } from './components/KnowledgeGraphUi/index'
+    getOrogramObjectiveApi,
+} from '@/api/courseChaptersApi'
+import {
+    getChapterApi,
+    deleteSectionApi,
+    addChapterApi,
+    updateChapterApi,
+} from '@/api/sectionApi'
+import {
+    theoryUi,
+    objectiveUi,
+    atlasUi,
+    lookResourceUi,
+    foldInfoUi,
+    FoldAdd,
+    FoldEdit,
+} from './components/KnowledgeGraphUi/index'
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus'
 
 const $router = useRouter()
 
@@ -53,12 +67,12 @@ const handle = () => $router.push('/knowledgeAtlas')
 
 // 计算机导论的数据         theory-ui
 const learnInfo: object[] = reactive([])
-getLearnInfoApi().then(res => learnInfo.push(...res as object[]))
+getLearnInfoApi().then((res) => learnInfo.push(...(res as object[])))
 // getByIdCourseVoApi('2fa0fd63262230639d2c45a3acd9045c')
 
 // 课程目标的数据           objective-ui
 const orogramObjective: any = reactive({})
-getOrogramObjectiveApi().then(res => Object.assign(orogramObjective, res))
+getOrogramObjectiveApi().then((res) => Object.assign(orogramObjective, res))
 
 // 查看资源的数据           look-resource-ui
 const lookResource: any = reactive({})
@@ -66,7 +80,7 @@ const lookResource: any = reactive({})
 // 可折叠基本概念的数据         fold-info-ui
 const foldInfoData: any = reactive([])
 function getFold() {
-    getChapterApi('2fa0fd63262230639d2c45a3acd9045c').then(res => {
+    getChapterApi('2fa0fd63262230639d2c45a3acd9045c').then((res) => {
         foldInfoData.length = 0
         foldInfoData.push(...res.data)
     })
@@ -76,36 +90,42 @@ getFold()
 const showHide = ref(false)
 function foldAddSubmit(data: any, updLoading: Function) {
     updLoading(true)
-    addChapterApi(data).then(() => {
+    addChapterApi(data)
-        ElMessage({
+        .then(() => {
-            message: `添加${data.pid === '' ? '章' : '节'}成功`,
+            ElMessage({
-            type: 'success'
+                message: `添加${data.pid === '' ? '章' : '节'}成功`,
+                type: 'success',
+            })
+            showHide.value = false
+            getFold()
         })
-        showHide.value = false
+        .catch(() => {
-        getFold()
+            ElMessage({
-    }).catch(() => {
+                message: `添加${data.pid === '' ? '章' : '节'}失败`,
-        ElMessage({
+                type: 'error',
-            message: `添加${data.pid === '' ? '章' : '节'}失败`,
+            })
-            type: 'error'
         })
-    }).finally(() => updLoading(false))
+        .finally(() => updLoading(false))
 }
 //删除章节
 const foldDelLoading = ref(false)
 function flodDel(id: string) {
     foldDelLoading.value = true
-    deleteSectionApi(id).then(() => {
+    deleteSectionApi(id)
-        ElMessage({
+        .then(() => {
-            message: `删除成功`,
+            ElMessage({
-            type: 'success'
+                message: `删除成功`,
+                type: 'success',
+            })
+            getFold()
         })
-        getFold()
+        .catch(() => {
-    }).catch(() => {
+            ElMessage({
-        ElMessage({
+                message: `删除失败`,
-            message: `删除失败`,
+                type: 'error',
-            type: 'error'
+            })
         })
-    }).finally(() => foldDelLoading.value = false)
+        .finally(() => (foldDelLoading.value = false))
 }
 // 更新章节
 const showHide1 = ref(false)
@@ -116,35 +136,37 @@ function hanEdit(data: any) {
 }
 function foldEditSubmit(data: any, updLoading: Function) {
     updLoading(true)
-    updateChapterApi(data).then(() => {
+    updateChapterApi(data)
-        ElMessage({
+        .then(() => {
-            message: `更新${data.pid === '' ? '章' : '节'}成功`,
+            ElMessage({
-            type: 'success'
+                message: `更新${data.pid === '' ? '章' : '节'}成功`,
+                type: 'success',
+            })
+            showHide1.value = false
+            getFold()
         })
-        showHide1.value = false
+        .catch(() => {
-        getFold()
+            ElMessage({
-    }).catch(() => {
+                message: `更新${data.pid === '' ? '章' : '节'}失败`,
-        ElMessage({
+                type: 'error',
-            message: `更新${data.pid === '' ? '章' : '节'}失败`,
+            })
-            type: 'error'
         })
-    }).finally(() => updLoading(false))
+        .finally(() => updLoading(false))
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .course-chapters {
     width: 100%;
     height: 100%;
     position: relative;
-    background: #F2F7FB;
+    background: #f2f7fb;
 
     &,
     * {
         box-sizing: border-box;
     }
 
-
     .radius-10 {
         border-radius: 10px;
         overflow: hidden;
@@ -159,7 +181,7 @@ function foldEditSubmit(data: any, updLoading: Function) {
             position: absolute;
             height: 100%;
             width: 12px;
-            background-color: #2147FB;
+            background-color: #2147fb;
         }
     }
 
@@ -217,6 +239,5 @@ function foldEditSubmit(data: any, updLoading: Function) {
             }
         }
     }
-
 }
 </style>

src/views/course/courseDetails.vue

@@ -0,0 +1,292 @@
+<script setup>
+import * as echarts from 'echarts'
+import { onMounted } from 'vue'
+onMounted(() => {
+  const chartDom = document.getElementById('main')
+
+  const myChart = echarts.init(chartDom)
+  const option = {
+    title: {
+      // text: 'Basic Radar Chart',
+    },
+    legend: {
+      data: ['Allocated Budget', 'Actual Spending'],
+    },
+    radar: {
+      // shape: 'circle',
+      indicator: [
+        { name: '目标1', max: 6500 },
+        { name: '目标6', max: 16000 },
+        { name: 'Information Technology', max: 30000 },
+        { name: 'Customer Support', max: 38000 },
+        { name: 'Development', max: 52000 },
+        { name: 'Marketing', max: 25000 },
+      ],
+    },
+    series: [
+      {
+        name: 'Budget vs spending',
+        type: 'radar',
+        data: [
+          {
+            value: [100, 3000, 20000, 35000, 50000, 18000],
+            name: 'Allocated Budget',
+          },
+          {
+            value: [5000, 14000, 28000, 26000, 42000, 21000],
+            name: 'Actual Spending',
+          },
+        ],
+      },
+    ],
+  }
+  option && myChart.setOption(option)
+})
+</script>
+<template>
+  <div class="top">
+    <div class="object">
+      <h3>课程目标</h3>
+      <div class="radar">
+        <div class="title">| 课程目标雷达图</div>
+
+        <div id="main" class="radarmap"></div>
+      </div>
+
+      <div class="objectives">
+        <div class="title">| 课程目标</div>
+        <div class="objectivebottom">
+          <el-scrollbar height="370px">
+            <ul class="objectLi">
+              <li>
+                <div class="courseObject">
+                  <div class="courseObject1"></div>
+                  <div class="courseObject2">
+                    <el-button type="primary">新增</el-button>
+                  </div>
+                </div>
+                <div class="smallContent">
+                  <el-scrollbar height="250px">
+                    <ul class="small">
+                      <li>
+                        <div class="partObject">
+                          <div class="partObject1">课程目标</div>
+                          <div class="partObject2">
+                            <el-button class="edit" type="text">编辑</el-button>
+                            <el-button class="destroy" type="text">
+                              删除
+                            </el-button>
+                          </div>
+                        </div>
+                        <div class="partObjectIntroduce"></div>
+                      </li>
+                    </ul>
+                  </el-scrollbar>
+                </div>
+              </li>
+            </ul>
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+    <div class="point">
+      <div class="map"></div>
+      <div class="knowledge"></div>
+    </div>
+  </div>
+  <div class="bottom">
+    <div class="chapters"></div>
+    <div class="chaptersDetails">
+      <div class="chaptersContent"></div>
+      <div class="resource"></div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.top {
+  display: flex;
+  justify-content: space-between;
+
+  .object {
+    // display: flex;
+    // justify-content: space-between;
+    width: 65%;
+    height: 400px;
+    border: 1px solid black;
+
+    // background-color: pink;
+    h3 {
+      text-align: center;
+      font-size: 36px;
+    }
+
+    .radar {
+      float: left;
+      border-radius: 20px;
+      width: 300px;
+      margin-left: 20px;
+      margin-top: 20px;
+      height: 230px;
+      background-color: #ffa674;
+      background-image: linear-gradient(to right, #f9e397, #ffa674);
+    }
+
+    .title {
+      padding-left: 30px;
+      font-size: 24px;
+      font-weight: 600;
+      color: #fff;
+      height: 40px;
+      line-height: 30px;
+      padding-top: 10px;
+    }
+
+    .radarmap {
+      border-radius: 20px;
+      margin-top: 10px;
+      // margin-right: 20px;
+      width: 100%;
+      height: 270px;
+      background-color: #fff;
+      background-image: linear-gradient(#ffe9c7, #ffffff);
+      // width: 200px;
+      // height: 200px;
+      // padding: 20px;
+      // background-color: #fff;
+      // background-image: linear-gradient(#ffe9c7, #ffffff);
+    }
+
+    .objectives {
+      margin-top: 20px;
+      margin-right: 20px;
+      float: right;
+      border-radius: 20px;
+      width: 650px;
+      height: 230px;
+      // background-color: #4984FFFF
+      background-image: linear-gradient(to right, #4984ff, #74deff);
+    }
+
+    .objectivebottom {
+      border-radius: 20px;
+      margin-top: 10px;
+      width: 100%;
+      height: 270px;
+      background-image: linear-gradient(#c7e3ff, #ffffff);
+
+      .objectLi>li {
+        // width: 545px;
+        height: 250px;
+        // margin: 40px;
+        // background-color: #ffffff;
+        border-radius: 5px;
+        margin: 20px;
+
+        .courseObject {
+          height: 45px;
+          line-height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 20px;
+          border-bottom: 1px solid #e7e7e7;
+
+          .courseObject1 {
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            background-color: #6093ff;
+            padding: 0px 16px;
+            color: #fff;
+          }
+
+          .courseObject2 {
+            font-size: 14px;
+            color: #0052d9;
+          }
+        }
+      }
+
+      // overflow-y: auto
+      .smallContent {
+        //  border-radius: 20px;
+        padding: 10px;
+        width: 100%;
+        height: 200px;
+        background-color: #fff;
+        background-image: linear-gradient(#c7e3ff, #ffffff);
+      }
+
+      .small>li {
+        // display: inline-flex;
+        // width: 650px;
+        height: 150px;
+        // margin: 40px;
+        background-color: #ffffff;
+        border-radius: 5px;
+        margin: 20px;
+
+        .partObject {
+          height: 45px;
+          line-height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 20px;
+          border-bottom: 1px solid #e7e7e7;
+
+          .partObject1 {
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            background-color: #6093ff;
+            padding: 0px 16px;
+            color: #fff;
+          }
+
+          .partObject2 {
+            font-size: 14px;
+            color: #0052d9;
+          }
+        }
+
+        .partObjectIntroduce {
+          height: 149px;
+          font-size: 16px;
+          padding: 15px;
+        }
+      }
+    }
+  }
+}
+
+.point {
+  width: 34%;
+  height: 400px;
+  background-color: blue;
+}
+
+.bottom {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+
+  .chapters {
+    width: 40%;
+    height: 800px;
+    background-color: red;
+  }
+
+  .chaptersDetails {
+    width: 59%;
+    height: 800px;
+    background-color: yellow;
+
+    .chaptersContent {
+      width: 100%;
+      height: 25%;
+      background-color: purple;
+    }
+  }
+}
+</style>