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

<!--
* @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>