详情

src/views/curriculum/components/courseCollapse/courseCollapse.vue

@@ -0,0 +1,206 @@
+<!--
+* @FileDescription: 折叠菜单
+* @Author: 黄琪勇
+* @Date:2024-04-01 18:40:50
+-->
+<template>
+   <el-collapse class="courseCollapse" accordion>
+      <el-collapse-item v-for="item in props.courseList" :key="item.id" :name="item.id">
+         <template #title>
+            <div class="courseCollapseHead">
+               <div class="courseCollapseHeadTit">
+                  <template v-if="props.titleType === 'round'">
+                     <div class="roundCon">
+                        <img src="@/img/curriculum/yuan.png" />
+                        <div class="ellipsisBox">
+                           <ellipsisScroll :title="item.name" />
+                        </div>
+                     </div>
+                  </template>
+                  <ellipsisScroll v-else :title="item.name" />
+               </div>
+               <div class="courseCollapseHeadArrow">
+                  <div class="headArrow">
+                     <div>展开</div>
+                     <img src="@/img/curriculum/xiangxia.png" />
+                  </div>
+                  <div class="headArrowActive">
+                     <div>收起</div>
+                     <img src="@/img/curriculum/xiangshang.png" />
+                  </div>
+               </div>
+            </div>
+         </template>
+         <div class="courseCollapseCon">
+            <template v-if="item.materialList">
+               <div class="courseList" v-for="i in item.materialList" :key="i.id">
+                  <div class="courseTitleCon">
+                     <img :src="require(`@/img/curriculum/${i.type}.png`)" />
+                     <div class="ellipsisBox">
+                        <ellipsisScroll :title="i.name" />
+                     </div>
+                  </div>
+                  <img class="iconArrow" src="@/img/curriculum/zkai.png" />
+               </div>
+            </template>
+            <courseCollapse v-else :courseList="item.children!" :titleType="'round'" />
+         </div>
+      </el-collapse-item>
+   </el-collapse>
+</template>
+
+<script setup lang="ts">
+import ellipsisScroll from "@/components/ellipsisScroll"
+
+type materialListType = {
+   id: string
+   type: string
+   name: string
+}
+type courseListType = {
+   id: string
+   name: string
+   materialList: materialListType[] | null
+   children: courseListType | null
+}[]
+
+const props = withDefaults(
+   defineProps<{
+      courseList: courseListType
+      titleType: "default" | "round"
+   }>(),
+   {
+      titleType: "default"
+   }
+)
+</script>
+
+<style lang="scss" scoped>
+.courseCollapse.el-collapse {
+   --el-collapse-border-color: #f2f2f2;
+   --el-collapse-header-height: 62px;
+   border: none;
+   & > :deep(.el-collapse-item) {
+      > .el-collapse-item__wrap > .el-collapse-item__content {
+         padding-bottom: 2px;
+      }
+      &:last-child {
+         > .el-collapse-item__wrap {
+            border-bottom: none;
+         }
+         > .el-collapse-item__header {
+            border-bottom: none;
+         }
+      }
+      .el-collapse-item__arrow {
+         display: none;
+      }
+      &.is-active > .el-collapse-item__header {
+         > .courseCollapseHead .courseCollapseHeadArrow {
+            > .headArrow {
+               display: none;
+            }
+            > .headArrowActive {
+               display: flex;
+            }
+         }
+      }
+   }
+   .courseCollapseHead {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .courseCollapseHeadTit {
+         text-align: left;
+         margin-right: 8px;
+         flex-grow: 1;
+         font-weight: 500;
+         font-size: 18px;
+         color: #333333;
+         overflow: hidden;
+         .roundCon {
+            display: flex;
+            align-items: center;
+            color: #f67146;
+            > .ellipsisBox {
+               flex-grow: 1;
+               overflow: hidden;
+            }
+            > img {
+               flex-shrink: 0;
+               width: 8px;
+               height: 8px;
+               margin-right: 10px;
+            }
+         }
+      }
+      .courseCollapseHeadArrow {
+         flex-shrink: 0;
+         .headArrow,
+         .headArrowActive {
+            display: flex;
+            align-items: center;
+            font-weight: 400;
+            font-size: 17px;
+            color: #999999;
+            > img {
+               margin-left: 5px;
+               width: 12px;
+               height: 8px;
+            }
+         }
+         .headArrowActive {
+            display: none;
+            color: #ff8057;
+         }
+      }
+   }
+   .courseCollapseCon {
+      padding-left: 20px;
+      .courseList {
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         height: 68px;
+         border-bottom: 1px solid #f2f2f2;
+         cursor: pointer;
+         &:hover {
+            .iconArrow,
+            .courseTitleCon > img {
+               opacity: $opacity-hover;
+            }
+         }
+         &:last-child {
+            border-bottom: initial;
+         }
+         .courseTitleCon {
+            flex-grow: 1;
+            overflow: hidden;
+            margin-right: 8px;
+            display: flex;
+            align-items: center;
+            font-weight: 400;
+            font-size: 18px;
+            color: #333333;
+            > .ellipsisBox {
+               flex-grow: 1;
+               overflow: hidden;
+            }
+            > img {
+               flex-shrink: 0;
+               width: 33px;
+               height: 33px;
+               margin-right: 10px;
+            }
+         }
+         .iconArrow {
+            flex-shrink: 0;
+            width: 8px;
+            height: 15px;
+         }
+      }
+   }
+}
+</style>

src/views/curriculum/components/courseCollapse/index.ts

@@ -0,0 +1,2 @@
+import courseCollapse from "./courseCollapse.vue"
+export default courseCollapse

src/views/curriculum/components/curriculumList/curriculumList_gym.vue

@@ -185,9 +185,9 @@ function handleClickDetail() {
       width: 989,
       height: 760,
       btnShow: [],
-      // modalData: {
-      //    //id
-      // },
+      modalData: {
+         id: "123"
+      },
       maskClose: true,
       className: "curriculumDetail"
    })

src/views/curriculum/curriculum.vue

@@ -24,8 +24,8 @@ import myCalendar from "@/components/myCalendar"
 import { ref, watchEffect } from "vue"
 import navContainer from "@/businessComponents/navContainer"
 import userStore from "@/store/modules/user"
-import curriculumList_gym from "./components/curriculumList/curriculumList_gym"
-import curriculumList_gyt from "./components/curriculumList/curriculumList_gyt"
+import curriculumList_gym from "./components/curriculumList/curriculumList_gym.vue"
+import curriculumList_gyt from "./components/curriculumList/curriculumList_gyt.vue"
 
 const userStoreHook = userStore()
 const navs = [

src/views/curriculum/curriculumDetail.vue

@@ -4,15 +4,297 @@
 * @Date:2024-04-01 16:27:48
 -->
 <template>
-   <div class="curriculumDetail"></div>
+   <div class="curriculumDetail">
+      <div class="close" @click="close"></div>
+      <div class="curriculumDetailCon">
+         <img class="imgMid" src="@/img/curriculum/mid.png" />
+         <div class="curriculumDetailBox">
+            <div class="teachingObjectives">
+               <div class="head">
+                  <div class="leftTit">
+                     <img src="@/img/curriculum/jxmb.png" />
+                     <div>教学目标</div>
+                  </div>
+                  <div class="rightBtn">
+                     <div>更换课件</div>
+                     <img src="@/img/curriculum/jt1.png" />
+                  </div>
+               </div>
+               <div class="content">
+                  <ElScrollbar class="elScrollbar">
+                     <div class="title" v-for="tit in title.split('\n')" :key="tit">{{ tit }}</div>
+                  </ElScrollbar>
+               </div>
+            </div>
+         </div>
+         <div class="curriculumDetailBox">
+            <div class="knowledgePoints">
+               <div class="head">
+                  <div class="points">
+                     <img src="@/img/curriculum/zsd.png" />
+                     <div>知识点</div>
+                  </div>
+               </div>
+               <div class="content">
+                  <ElScrollbar class="elScrollbar">
+                     <courseCollapse :courseList="data" />
+                  </ElScrollbar>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="curriculumStart">
+         <div class="startBtn">开始上课</div>
+      </div>
+   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import courseCollapse from "./components/courseCollapse"
+const props = defineProps<{
+   modalData: {
+      id: string
+   }
+}>()
+const emits = defineEmits<{
+   (e: "onClose"): void
+}>()
+
+function close() {
+   emits("onClose")
+}
+
+const title =
+   "乐理：认识五线谱，音符时值，谱号等等\n律动：节奏感受\n节奏：节奏练习1\n课堂纪律\n乐器安装于拆卸\n乐器持拿\n乐器介绍\n腹式呼吸：腹部控制，慢吸慢吐，快吸快吐\n嘴型练习：四个步骤\n唇振练习：嘴型+气息"
+
+type materialListType = {
+   id: string
+   type: string
+   name: string
+}
+type courseListType = {
+   id: string
+   name: string
+   materialList: materialListType[] | null
+   children: courseListType | null
+}[]
+const data: courseListType = [
+   {
+      id: "2",
+      name: "乐理第222",
+      materialList: null,
+      children: [
+         {
+            id: "3",
+            name: "五线谱",
+            materialList: [
+               {
+                  id: "2-1",
+                  type: "VIDEO",
+                  name: "第二课啊"
+               },
+               {
+                  id: "3-1",
+                  type: "VIDEO",
+                  name: "第二课啊"
+               }
+            ],
+            children: null
+         }
+      ]
+   },
+   {
+      id: "1",
+      name: "乐理第一课前言",
+      materialList: [
+         {
+            id: "1-1",
+            type: "VIDEO",
+            name: "第一课啊"
+         }
+      ],
+      children: null
+   }
+]
+</script>
 
 <style lang="scss" scoped>
 .curriculumDetail {
    width: 100%;
    height: 100%;
+   padding: 20px 20px 30px 20px;
+   display: flex;
+   flex-direction: column;
+   .close {
+      position: absolute;
+      top: -9px;
+      right: -9px;
+      width: 47px;
+      height: 49px;
+      cursor: pointer;
+      background: url("@/img/useDialogConfirm/close.png") no-repeat;
+      background-size: cover;
+      &:hover {
+         background: url("@/img/useDialogConfirm/closeHover.png") no-repeat;
+         background-size: cover;
+      }
+   }
+   .curriculumDetailCon {
+      flex-grow: 1;
+      overflow: hidden;
+      display: flex;
+      position: relative;
+      .imgMid {
+         width: 62px;
+         height: 470px;
+         position: absolute;
+         left: 50%;
+         top: 50%;
+         transform: translate(-50%, -50%);
+         z-index: 1;
+      }
+      .curriculumDetailBox {
+         width: 50%;
+         height: 100%;
+         background: #fff2e1;
+         border-radius: 35px;
+         padding: 10px;
+         overflow: hidden;
+         &:nth-child(3) {
+            margin-left: 10px;
+         }
+         .teachingObjectives,
+         .knowledgePoints {
+            width: 100%;
+            height: 100%;
+            background: #ffffff;
+            border-radius: 35px;
+            .content {
+               padding-top: 18px;
+               height: calc(100% - 57px);
+               & > :deep(.elScrollbar) {
+                  .el-scrollbar__view {
+                     width: 100%;
+                  }
+                  .el-scrollbar__wrap {
+                     overflow-x: hidden;
+                  }
+                  .el-scrollbar__bar.is-vertical {
+                     width: 4px;
+                     right: 0;
+                  }
+               }
+            }
+         }
+         .teachingObjectives {
+            padding: 16px 33px 20px;
+            .head {
+               width: 100%;
+               height: 57px;
+               background: #fff2e1;
+               border-radius: 12px;
+               display: flex;
+               justify-content: space-between;
+               align-items: center;
+               padding: 0 18px;
+               .leftTit {
+                  display: flex;
+                  align-items: center;
+                  & > img {
+                     width: 27px;
+                     height: 27px;
+                  }
+                  & > div {
+                     margin-left: 8px;
+                     font-weight: 500;
+                     font-size: 24px;
+                     color: #333333;
+                  }
+               }
+               .rightBtn {
+                  display: flex;
+                  align-items: center;
+                  cursor: pointer;
+                  &:hover {
+                     opacity: $opacity-hover;
+                  }
+                  & > img {
+                     margin-left: 4px;
+                     width: 10px;
+                     height: 17px;
+                  }
+                  & > div {
+                     margin-left: 8px;
+                     font-weight: 500;
+                     font-size: 20px;
+                     color: #f67146;
+                  }
+               }
+            }
+            .title {
+               line-height: 34px;
+               font-weight: 400;
+               font-size: 18px;
+               color: #333333;
+            }
+         }
+         .knowledgePoints {
+            padding: 16px 0 20px 33px;
+            .head {
+               margin-right: 33px;
+               height: 57px;
+               background: #fff2e1;
+               border-radius: 12px;
+               display: flex;
+               align-items: center;
+               padding: 0 18px;
+               .points {
+                  display: flex;
+                  align-items: center;
+                  & > img {
+                     width: 28px;
+                     height: 27px;
+                  }
+                  & > div {
+                     margin-left: 8px;
+                     font-weight: 500;
+                     font-size: 24px;
+                     color: #333333;
+                  }
+               }
+            }
+            .content {
+               & > :deep(.elScrollbar) {
+                  .el-scrollbar__view {
+                     padding-right: 33px;
+                  }
+               }
+            }
+         }
+      }
+   }
+   .curriculumStart {
+      flex-shrink: 0;
+      padding-top: 20px;
+      display: flex;
+      justify-content: center;
+      .startBtn {
+         width: 363px;
+         height: 68px;
+         background: linear-gradient(180deg, #ffffff 0%, #ffdbc1 100%);
+         box-shadow: 4px 6px 0px 0px rgba(236, 102, 52, 0.45), inset 0px -8px 3px 0px rgba(254, 163, 138, 0.46);
+         border-radius: 41px;
+         font-weight: 500;
+         font-size: 24px;
+         color: #f67146;
+         line-height: 68px;
+         text-align: center;
+         cursor: pointer;
+         &:hover {
+            opacity: $opacity-hover;
+         }
+      }
+   }
 }
 </style>
 <style lang="scss">