更新

src/components/card-type/index.tsx

@@ -405,13 +405,13 @@ export default defineComponent({
             ),
             footer: () => (
               <div class={styles.footer}>
-                <div class={styles.title}>
+                <div class={[styles.title, 'footerTitle']}>
                   <NImage
                     class={[styles.titleType]}
                     src={formatType(props.item.type)}
                     objectFit="cover"
                   />
-                  <span class={styles.titleContent}>
+                  <span class={[styles.titleContent, 'titleContent']}>
                     <TheNoticeBar
                       isAnimation={isAnimation.value}
                       text={props.item.title}

src/hooks/useDrag/index.module.less

@@ -8,10 +8,10 @@
   .box {
     width: 42px;
     height: 100%;
-    background: url('./img//left.png') no-repeat;
+    background: url('./img/left.png') no-repeat;
     background-size: 100% 100%;
     &:last-child {
-      background: url('./img//right.png') no-repeat;
+      background: url('./img/right.png') no-repeat;
       background-size: 100% 100%;
     }
   }

src/views/attend-class/component/tools/pen.module.less

@@ -85,8 +85,14 @@
 
 .removeVisiable {
   width: 432px;
+  position: relative;
 
   :global {
+    .bom_drag{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
     .n-card-header {
       font-size: max(22px, 16Px);
     }

src/views/attend-class/component/tools/pen.tsx

@@ -1,8 +1,11 @@
-import { defineComponent, toRefs, ref, PropType, reactive } from 'vue';
+import { defineComponent, toRefs, ref, PropType, reactive, toRef } from 'vue';
 import styles from './pen.module.less';
 import { ToolType } from '../../index';
 import { NButton, NModal, NSpace } from 'naive-ui';
 import { iframeDislableKeyboard } from '/src/utils';
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
 
 export default defineComponent({
   name: 'pen-page',
@@ -26,6 +29,10 @@ export default defineComponent({
     imagePos: {
       type: String,
       default: 'left'
+    },
+    isDrag: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
@@ -50,7 +57,18 @@ export default defineComponent({
         props.imagePos
       }`;
     }
-
+    // 拖动
+    let penBoxDragData: any;
+    const penBoxClass = 'penBoxClass_drag';
+    if (props.isDrag) {
+      const users = useUserStore();
+      penBoxDragData = useDrag(
+        [`${penBoxClass}>.n-card-header`, `${penBoxClass} .bom_drag`],
+        penBoxClass,
+        toRef(modal, 'status'),
+        users.info.id
+      );
+    }
     return () => (
       <div
         class={[
@@ -113,41 +131,81 @@ export default defineComponent({
         )}
 
         {/* 布置作业 */}
-        <NModal
-          z-index={3000}
-          transformOrigin="center"
-          v-model:show={modal.status}
-          preset="card"
-          // class={styles.attendClassModal}
-          title={modal.title}
-          class={['modalTitle', styles.removeVisiable]}>
-          <div class={styles.studentRemove}>
-            <p>{modal.content}</p>
-            {/* <div class={styles.modelAttendContent}>
+        {props.isDrag ? (
+          <NModal
+            style={penBoxDragData.styleDrag.value}
+            z-index={3000}
+            transformOrigin="center"
+            v-model:show={modal.status}
+            preset="card"
+            // class={styles.attendClassModal}
+            title={modal.title}
+            class={['modalTitle', styles.removeVisiable, penBoxClass]}>
+            <div class={styles.studentRemove}>
+              <p>{modal.content}</p>
+              {/* <div class={styles.modelAttendContent}>
               {data.modalAttendMessage}
             </div> */}
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton
-                type="default"
-                round
-                onClick={() => {
-                  modal.status = false;
-                }}>
-                取消
-              </NButton>
-              <NButton
-                type="primary"
-                round
-                onClick={() => {
-                  // data.modelTrainStatus = true;
-                  modal.status = false;
-                  props.close();
-                }}>
-                确认
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
+              <NSpace class={styles.btnGroupModal} justify="center">
+                <NButton
+                  type="default"
+                  round
+                  onClick={() => {
+                    modal.status = false;
+                  }}>
+                  取消
+                </NButton>
+                <NButton
+                  type="primary"
+                  round
+                  onClick={() => {
+                    // data.modelTrainStatus = true;
+                    modal.status = false;
+                    props.close();
+                  }}>
+                  确认
+                </NButton>
+              </NSpace>
+              <Dragbom></Dragbom>
+            </div>
+          </NModal>
+        ) : (
+          <NModal
+            z-index={3000}
+            transformOrigin="center"
+            v-model:show={modal.status}
+            preset="card"
+            // class={styles.attendClassModal}
+            title={modal.title}
+            class={['modalTitle', styles.removeVisiable]}>
+            <div class={styles.studentRemove}>
+              <p>{modal.content}</p>
+              {/* <div class={styles.modelAttendContent}>
+              {data.modalAttendMessage}
+            </div> */}
+              <NSpace class={styles.btnGroupModal} justify="center">
+                <NButton
+                  type="default"
+                  round
+                  onClick={() => {
+                    modal.status = false;
+                  }}>
+                  取消
+                </NButton>
+                <NButton
+                  type="primary"
+                  round
+                  onClick={() => {
+                    // data.modelTrainStatus = true;
+                    modal.status = false;
+                    props.close();
+                  }}>
+                  确认
+                </NButton>
+              </NSpace>
+            </div>
+          </NModal>
+        )}
       </div>
     );
   }

src/views/attend-class/index.module.less

@@ -265,64 +265,17 @@
 }
 
 .drawerContainer {
-  width: 360px !important;
-
-  :global {
-    .n-drawer-header {
-      background-color: #f5f6fa !important;
-    }
-  }
-
-  .cardContainer {
-    margin-bottom: 24px;
-  }
-
-  :global {
-    .n-drawer-body-content-wrapper {
-      padding: 8px 0px 0px !important;
-      text-align: center;
-
-      & > div {
-        // margin-bottom: 24px;
-      }
+  width: 860px;
+  :global{
+    .n-card-header{
+      background-color: #ffffff !important;
     }
-
-    .n-drawer-header {
+    .n-card__content{
       position: relative;
-      justify-content: center !important;
-      padding-top: 20px !important;
-      padding-bottom: 17px !important;
-      border-bottom: 0 !important;
-
-      .n-drawer-header__main {
-        position: relative;
-        z-index: 2;
-        font-size: max(18px, 13Px);
-        font-weight: 600;
-        color: #131415;
-        max-width: 220px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        // &::after {
-        //   position: absolute;
-        //   bottom: -4px;
-        //   left: 0;
-        //   z-index: -1;
-        //   content: ' ';
-        //   width: 100%;
-        //   display: inline-block;
-        //   height: 10px;
-        //   background: linear-gradient(90deg,
-        //       #77bbff 0%,
-        //       rgba(163, 231, 255, 0.22) 100%);
-        // }
-      }
-
-      .n-drawer-header__close {
+      .bom_drag{
         position: absolute;
-        right: 26px;
+        bottom: 0;
+        left: 0;
       }
     }
   }
@@ -576,8 +529,14 @@
 
 .removeVisiable {
   width: 432px;
+  position: relative;
 
   :global {
+    .bom_drag{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
     .n-card-header {
       font-size: max(22px, 16Px);
     }

src/views/attend-class/index.tsx

@@ -199,6 +199,7 @@ export default defineComponent({
       selectClassStatus: false, // 选择课件
       homeworkStatus: true, // 布置作业完成时
       removeVisiable: false,
+      nextEndShow: false,
       removeTitle: '',
       removeContent: '',
       removeCourseStatus: false, // 是否布置作业
@@ -827,74 +828,76 @@ export default defineComponent({
           handleSwipeChange(popupData.activeIndex + 1);
           return;
         }
+        data.nextEndShow = true;
+      }
+    };
+    // 当前课件结束之后选择下一个课件
+    function handleNextEnd() {
+      // 获取当前是哪个章节
+      let detailIndex = popupData.chapterDetails.findIndex(
+        (item: any) => item.id == data.lessonCoursewareDetailId
+      );
+      const detailItem =
+        popupData.chapterDetails[detailIndex]?.knowledgeList || [];
+      let lessonIndex = detailItem.findIndex(
+        (item: any) => item.id == data.detailId
+      );
 
-        // 获取当前是哪个章节
-        let detailIndex = popupData.chapterDetails.findIndex(
-          (item: any) => item.id == data.lessonCoursewareDetailId
-        );
-        const detailItem =
-          popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-        let lessonIndex = detailItem.findIndex(
-          (item: any) => item.id == data.detailId
-        );
-
-        let lessonStatus = false; // 当前章节下面是否有内容
-        let lessonCoursewareDetailId = '';
-        let coursewareDetailKnowledgeId = '';
-        while (lessonIndex < detailItem.length - 1) {
-          lessonIndex++;
-          if (lessonIndex >= 0) {
-            if (detailItem[lessonIndex].coursewareNum > 0) {
-              lessonStatus = true;
-              lessonCoursewareDetailId =
-                detailItem[lessonIndex].lessonCoursewareDetailId;
-              coursewareDetailKnowledgeId = detailItem[lessonIndex].id;
-            }
-          }
-          if (lessonStatus) {
-            break;
+      let lessonStatus = false; // 当前章节下面是否有内容
+      let lessonCoursewareDetailId = '';
+      let coursewareDetailKnowledgeId = '';
+      while (lessonIndex < detailItem.length - 1) {
+        lessonIndex++;
+        if (lessonIndex >= 0) {
+          if (detailItem[lessonIndex].coursewareNum > 0) {
+            lessonStatus = true;
+            lessonCoursewareDetailId =
+              detailItem[lessonIndex].lessonCoursewareDetailId;
+            coursewareDetailKnowledgeId = detailItem[lessonIndex].id;
           }
         }
-        // 判断当前章节下面课程是否有内容，否则往下一个章节走
         if (lessonStatus) {
-          popupData.courseId = coursewareDetailKnowledgeId;
-          data.selectClassStatus = true;
-          return;
+          break;
         }
+      }
+      // 判断当前章节下面课程是否有内容，否则往下一个章节走
+      if (lessonStatus) {
+        popupData.courseId = coursewareDetailKnowledgeId;
+        data.selectClassStatus = true;
+        return;
+      }
 
-        let nextLessonStatus = false;
-        while (detailIndex <= popupData.chapterDetails.length - 1) {
-          detailIndex++;
-          const tempDetail =
-            popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-          let tempLessonLength = 0;
-          while (tempLessonLength <= tempDetail.length - 1) {
-            if (tempDetail[tempLessonLength].coursewareNum > 0) {
-              nextLessonStatus = true;
-              lessonCoursewareDetailId =
-                tempDetail[tempLessonLength].lessonCoursewareDetailId;
-              coursewareDetailKnowledgeId = tempDetail[tempLessonLength].id;
-            }
-            tempLessonLength++;
-            if (nextLessonStatus) {
-              break;
-            }
+      let nextLessonStatus = false;
+      while (detailIndex <= popupData.chapterDetails.length - 1) {
+        detailIndex++;
+        const tempDetail =
+          popupData.chapterDetails[detailIndex]?.knowledgeList || [];
+        let tempLessonLength = 0;
+        while (tempLessonLength <= tempDetail.length - 1) {
+          if (tempDetail[tempLessonLength].coursewareNum > 0) {
+            nextLessonStatus = true;
+            lessonCoursewareDetailId =
+              tempDetail[tempLessonLength].lessonCoursewareDetailId;
+            coursewareDetailKnowledgeId = tempDetail[tempLessonLength].id;
           }
-
+          tempLessonLength++;
           if (nextLessonStatus) {
             break;
           }
         }
 
-        // 判断当前章节下面课程是否有内容，否则往上一个章节走
         if (nextLessonStatus) {
-          popupData.courseId = coursewareDetailKnowledgeId;
-          data.selectClassStatus = true;
-          return;
+          break;
         }
       }
-    };
 
+      // 判断当前章节下面课程是否有内容，否则往上一个章节走
+      if (nextLessonStatus) {
+        popupData.courseId = coursewareDetailKnowledgeId;
+        data.selectClassStatus = true;
+        return;
+      }
+    }
     /** 弹窗关闭 */
     const handleClosePopup = () => {
       const item = data.itemList[popupData.activeIndex];
@@ -907,11 +910,11 @@ export default defineComponent({
       }
     };
     document.body.addEventListener('keyup', (e: KeyboardEvent) => {
-      if (e.code === 'ArrowLeft') {
+      if (e.code === 'ArrowUp') {
         // if (popupData.activeIndex === 0) return;
         setModalOpen();
         handlePreAndNext('up');
-      } else if (e.code === 'ArrowRight') {
+      } else if (e.code === 'ArrowDown') {
         // if (popupData.activeIndex === data.itemList.length - 1) return;
         setModalOpen();
         handlePreAndNext('down');
@@ -1465,6 +1468,47 @@ export default defineComponent({
       toRef(data, 'selectResourceStatus'),
       users.info.id
     );
+    // 结束预览  结束课程确认弹窗
+    const removeResourBoxClass = 'removeResourBoxClass_drag';
+    const removeResourDragData = useDrag(
+      [
+        `${removeResourBoxClass}>.n-card-header`,
+        `${removeResourBoxClass} .bom_drag`
+      ],
+      removeResourBoxClass,
+      toRef(data, 'removeVisiable'),
+      users.info.id
+    );
+    // 章节next弹窗
+    const nextEndBoxClass = 'nextEndBoxClass_drag';
+    const nextEndBoxDragData = useDrag(
+      [`${nextEndBoxClass}>.n-card-header`, `${nextEndBoxClass} .bom_drag`],
+      nextEndBoxClass,
+      toRef(data, 'nextEndShow'),
+      users.info.id
+    );
+    // 章节切换弹窗
+    const chapterConBoxClass = 'chapterConBoxClass_drag';
+    const chapterConBoxDragData = useDrag(
+      [
+        `${chapterConBoxClass}>.n-card-header`,
+        `${chapterConBoxClass} .bom_drag`
+      ],
+      chapterConBoxClass,
+      toRef(popupData, 'chapterOpen'),
+      users.info.id
+    );
+    // 资源列表弹窗
+    const resourcesConBoxClass = 'resourcesConBoxClass_drag';
+    const resourcesConDragData = useDrag(
+      [
+        `${resourcesConBoxClass}>.n-card-header`,
+        `${resourcesConBoxClass} .bom_drag`
+      ],
+      resourcesConBoxClass,
+      toRef(popupData, 'open'),
+      users.info.id
+    );
     return () => (
       <div id="playContent" class={[styles.playContent, 'wrap']}>
         <div
@@ -1858,7 +1902,7 @@ export default defineComponent({
         />
 
         {/* 显示列表 */}
-        <NDrawer
+        {/* <NDrawer
           v-model:show={popupData.open}
           class={[styles.drawerContainer, styles.drawerContainerSource]}
           onAfterLeave={handleClosePopup}
@@ -1884,10 +1928,32 @@ export default defineComponent({
               )
             }}
           </NDrawerContent>
-        </NDrawer>
-
-        {/* 显示列表 */}
-        <NDrawer
+        </NDrawer> */}
+        <NModal
+          transformOrigin="center"
+          v-model:show={popupData.open}
+          preset="card"
+          class={[
+            'modalTitle background',
+            styles.drawerContainer,
+            resourcesConBoxClass
+          ]}
+          style={resourcesConDragData.styleDrag.value}
+          title={activeName.value || '资源列表'}>
+          <SourceList
+            teacherChapterName={data.teacherChapterName}
+            knowledgePointList={data.knowledgePointList}
+            courseActiveIndex={popupData.courseActiveIndex}
+            activeItem={data.itemList[popupData.activeIndex]}
+            onConfirm={(item: any) => {
+              popupData.open = false;
+              toggleMaterial(item.id);
+            }}
+          />
+          <Dragbom></Dragbom>
+        </NModal>
+        {/* 章节切换 */}
+        {/* <NDrawer
           v-model:show={popupData.chapterOpen}
           class={styles.drawerContainer}
           onAfterLeave={handleClosePopup}
@@ -1907,11 +1973,34 @@ export default defineComponent({
               }}
             />
           </NDrawerContent>
-        </NDrawer>
-
+        </NDrawer> */}
+        <NModal
+          transformOrigin="center"
+          v-model:show={popupData.chapterOpen}
+          preset="card"
+          class={[
+            'modalTitle background',
+            styles.drawerContainer,
+            chapterConBoxClass
+          ]}
+          style={chapterConBoxDragData.styleDrag.value}
+          title={'切换章节'}>
+          <Chapter
+            treeList={popupData.chapterDetails}
+            itemActive={data.detailId as any}
+            onHandleSelect={async (val: any) => {
+              // itemActive: child.id,
+              // itemName: child.name
+              popupData.courseId = val.itemActive;
+              data.selectClassStatus = true;
+            }}
+          />
+          <Dragbom></Dragbom>
+        </NModal>
         {/* 批注 */}
         {studyData.penShow && (
           <Pen
+            isDrag={true}
             show={studyData.type === 'pen'}
             type={studyData.type}
             close={() => closeStudyTool()}
@@ -1920,6 +2009,7 @@ export default defineComponent({
 
         {studyData.whiteboardShow && (
           <Pen
+            isDrag={true}
             show={studyData.type === 'whiteboard'}
             type={studyData.type}
             close={() => closeStudyTool()}
@@ -1928,6 +2018,7 @@ export default defineComponent({
 
         {studyData.callShow && (
           <Pen
+            isDrag={true}
             imagePos={columnPos.value}
             callStudents={studyData.callStudentList}
             show={studyData.type === 'call'}
@@ -2118,7 +2209,8 @@ export default defineComponent({
           transformOrigin="center"
           v-model:show={data.removeVisiable}
           preset="card"
-          class={['modalTitle', styles.removeVisiable]}
+          class={['modalTitle', styles.removeVisiable, removeResourBoxClass]}
+          style={removeResourDragData.styleDrag.value}
           title={data.removeTitle}>
           <div class={styles.studentRemove}>
             <p>{data.removeContent}</p>
@@ -2185,6 +2277,39 @@ export default defineComponent({
                 {data.removeCourseStatus ? '布置作业' : '确定'}
               </NButton>
             </NSpace>
+            <Dragbom></Dragbom>
+          </div>
+        </NModal>
+        <NModal
+          style={nextEndBoxDragData.styleDrag.value}
+          z-index={3000}
+          transformOrigin="center"
+          v-model:show={data.nextEndShow}
+          preset="card"
+          title={'提示'}
+          class={['modalTitle', styles.removeVisiable, nextEndBoxClass]}>
+          <div class={styles.studentRemove}>
+            <p>当前课件已结束，是否进入下一章节</p>
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                type="default"
+                round
+                onClick={() => {
+                  data.nextEndShow = false;
+                }}>
+                取消
+              </NButton>
+              <NButton
+                type="primary"
+                round
+                onClick={() => {
+                  data.nextEndShow = false;
+                  handleNextEnd();
+                }}>
+                确认
+              </NButton>
+            </NSpace>
+            <Dragbom></Dragbom>
           </div>
         </NModal>
       </div>

src/views/attend-class/model/chapter/index.module.less

@@ -1,48 +1,67 @@
-.scrollBar {
-  margin: 0 20px;
-  width: calc(100% - 40px);
+.chapterBox {
+  border-top: 1px solid #F0F0F0;
+  height: 46vh;
 }
-
-.treeParent {
-  transition: height 1s ease-in-out;
+.scrollBar{
+  width: 100%;
+  height: calc(100% - 42px);
+}
+.treeBox{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  :global{
+    .n-scrollbar-content{
+      padding: 0 30px;
+    }
+  }
+  .listSectionLeft{
+    padding-top: 10px;
+    width: 40%;
+    background: #F3F5F6;
+    height: 100%;
+    border-radius: 0 0 0 16px;
+  }
+  .listSectionRight{
+    padding-top: 10px;
+    width: 60%;
+    height: 100%;
+    box-shadow: 0px 12px 18px 0px rgba(217,221,223,0.45);
+  }
+}
+.treeParentSelect {
+  background-color: #fff;
+  border-radius: 10px;
 }
 
 .treeChild {
-  line-height: 54px;
+  line-height: 46px;
 }
 
 .treeItem {
-  display: flex;
-  align-items: center;
-  line-height: 54px;
+  line-height: 46px;
   border-radius: 10px;
-  padding: 0 5px;
   cursor: pointer;
   border-radius: 10px;
-  font-size: max(17px, 12Px);
-  margin-bottom: 8px;
+  font-size: max(18px, 12Px);
+  font-weight: 600;
 
   &.childItem:hover {
-
     // background: #E8F4FF;
-
-    .title {
+    .titleName {
       color: #198CFE;
     }
   }
 
   .title {
-    padding-left: 8px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 280px !important;
-    color: rgba(0, 0, 0, .5);
+    padding-left: 20px;
+    width: 100%;
+    color: #777777;
     display: flex;
     align-items: center;
 
     .dir {
-      flex-shrink: 1;
+      flex-shrink: 0;
       display: inline-block;
       width: 16px;
       height: 18px;
@@ -50,7 +69,12 @@
       background-size: contain;
       margin-right: 6px;
     }
-
+    .name{
+      flex-grow: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
     &.titleSelect {
       color: #198CFE;
       // font-weight: bold;
@@ -62,38 +86,23 @@
     }
   }
 
-  .arrow {
-    display: inline-block;
-    width: 14px;
-    height: 15px;
-    background: url('./images/arrow-default.png') no-repeat center;
-    background-size: contain;
-
-    &.arrowSelect {
-      background: url('./images/arrow-active.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-
-  .childArrow {
-    width: 12px;
-  }
-
   &.childItem {
-    padding-left: 30px;
-    font-size: max(15px, 12Px);
-
-    .title {
-      color: #131415;
+    font-size: max(16px, 12Px);
+    .titleName {
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding-left: 0;
+      color: #333333;
+      font-weight: 600;
     }
   }
 
   &.childSelect {
-    background: #E8F4FF;
-
-    .title {
-      color: #198CFE;
+    .titleName {
+      color: #1677FF;
       // font-weight: bold;
     }
   }
-}
+}

src/views/attend-class/model/chapter/index.tsx

@@ -1,4 +1,12 @@
-import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  watch,
+  ComputedRef
+} from 'vue';
 import styles from './index.module.less';
 import { NScrollbar, useMessage } from 'naive-ui';
 
@@ -63,83 +71,90 @@ export default defineComponent({
         });
       }
     });
+    const activeknowledgeList = computed<any | undefined>(() => {
+      return treeList.value.find((item: any) => {
+        return item.selected;
+      });
+    });
     return () => (
-      <NScrollbar class={styles.scrollBar}>
-        <div class={[styles.listSection]}>
-          {treeList.value.map((item: any, index: number) => (
-            <div class={styles.treeParent} key={'parent' + index}>
-              <div
-                class={[styles.treeItem, styles.parentItem]}
-                onClick={() => {
-                  treeList.value.forEach((child: any) => {
-                    if (item.id !== child.id) {
-                      child.selected = false;
-                    }
-                  });
-                  item.selected = item.selected ? false : true;
-                }}>
-                {item.knowledgeList && item.knowledgeList.length > 0 && (
-                  <span
-                    class={[
-                      styles.arrow,
-                      item.selected ? styles.arrowSelect : ''
-                    ]}></span>
-                )}
-                <p
-                  class={[
-                    styles.title,
-                    item.selected ? styles.titleSelect : ''
-                  ]}>
-                  <span
-                    class={[
-                      styles.dir,
-                      item.selected ? styles.dirSelect : ''
-                    ]}></span>
-                  {item.name}
-                </p>
-              </div>
-
-              {item.selected &&
-                item.knowledgeList &&
-                item.knowledgeList.map((child: any, j: number) => (
+      <div class={styles.chapterBox}>
+        <div class={styles.treeBox}>
+          <div class={[styles.listSectionLeft]}>
+            <NScrollbar class={styles.scrollBar}>
+              {treeList.value.map((item: any, index: number) => (
+                <div
+                  class={[item.selected ? styles.treeParentSelect : '']}
+                  key={'parent' + index}>
                   <div
-                    key={'child' + j}
-                    class={[
-                      styles.treeItem,
-                      styles.childItem,
-                      styles.animation,
-                      itemActive.value === child.id ? styles.childSelect : ''
-                    ]}
+                    class={[styles.treeItem, styles.parentItem]}
                     onClick={() => {
-                      // 判断是否选择的同一个课件
-                      if (itemActive.value == child.id) {
-                        return;
-                      }
-                      if (child.coursewareNum <= 0) {
-                        message.error('该章节暂无课件');
-                        return;
-                      }
-                      emit('handleSelect', {
-                        itemActive: child.id,
-                        itemName: child.name
+                      treeList.value.forEach((child: any) => {
+                        if (item.id !== child.id) {
+                          child.selected = false;
+                        }
                       });
-                      // emit('handleSelect', {});
-                      // prepareStore.setSelectKey(child.id);
-                      // prepareStore.setLessonCoursewareId(
-                      //   child.lessonCoursewareId
-                      // );
-                      // prepareStore.setLessonCoursewareDetailId(
-                      //   child.lessonCoursewareDetailId
-                      // );
+                      item.selected = true;
                     }}>
-                    <span class={styles.childArrow}></span>
-                    <p class={styles.title}>{child.name}</p>
+                    <p
+                      class={[
+                        styles.title,
+                        item.selected ? styles.titleSelect : ''
+                      ]}>
+                      <span
+                        class={[
+                          styles.dir,
+                          item.selected ? styles.dirSelect : ''
+                        ]}></span>
+                      <div class={styles.name}>{item.name}</div>
+                    </p>
                   </div>
-                ))}
-            </div>
-          ))}
+                </div>
+              ))}
+            </NScrollbar>
+          </div>
+          <div class={styles.listSectionRight}>
+            <NScrollbar class={styles.scrollBar}>
+              {activeknowledgeList.value &&
+                activeknowledgeList.value.knowledgeList &&
+                activeknowledgeList.value.knowledgeList.map(
+                  (child: any, j: number) => (
+                    <div
+                      key={'child' + j}
+                      class={[
+                        styles.treeItem,
+                        styles.childItem,
+                        itemActive.value === child.id ? styles.childSelect : ''
+                      ]}
+                      onClick={() => {
+                        // 判断是否选择的同一个课件
+                        if (itemActive.value == child.id) {
+                          return;
+                        }
+                        if (child.coursewareNum <= 0) {
+                          message.error('该章节暂无课件');
+                          return;
+                        }
+                        emit('handleSelect', {
+                          itemActive: child.id,
+                          itemName: child.name
+                        });
+                        // emit('handleSelect', {});
+                        // prepareStore.setSelectKey(child.id);
+                        // prepareStore.setLessonCoursewareId(
+                        //   child.lessonCoursewareId
+                        // );
+                        // prepareStore.setLessonCoursewareDetailId(
+                        //   child.lessonCoursewareDetailId
+                        // );
+                      }}>
+                      <div class={styles.titleName}>{child.name}</div>
+                    </div>
+                  )
+                )}
+            </NScrollbar>
+          </div>
         </div>
-      </NScrollbar>
+      </div>
     );
   }
 });

src/views/attend-class/model/source-list/index.module.less

@@ -1,128 +1,92 @@
-.listSection {
-  padding: 17px 20px 20px;
+.sourcelistBox {
+  border-top: 1px solid #f0f0f0;
+  height: 46vh;
 }
-
-.className {
+.treeBox{
+  width: 100%;
+  height: calc(100% - 42px);
   display: flex;
-  align-items: center;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #F0F0F0;
-  margin-bottom: 10px;
-
-  .classNameIcon {
-    display: inline-block;
-    flex-shrink: 0;
-    background: url('../../image/icon-class-name.png') center no-repeat;
-    background-size: contain;
-    margin-right: 5px;
-    width: 13px;
-    height: 18px;
-  }
-
-  .classNameContent {
-    font-weight: 600;
-    font-size: max(15px, 13Px);
-    color: #777777;
-    line-height: 21px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.treeParent {
-  transition: height 1s ease-in-out;
-  padding: 8px 13px 0;
-
-  .cardContainer {
-    margin-bottom: 12px;
-    padding-top: 12px;
-    margin-right: 30px;
-    margin-left: 18px;
-  }
-
-  &.parentSelect {
-    background: #F5F6FA;
-    border-radius: 8px;
-    padding-bottom: 12px;
-  }
-
-
-  :global {
-    .card-section-container {
-      width: 100%;
-      height: 180px;
-    }
-  }
-}
-
-.treeChild {
-  line-height: 54px;
-}
-
-.treeItem {
-  display: flex;
-  align-items: center;
-  line-height: 36px;
-  border-radius: 10px;
-  padding: 0 5px;
-  cursor: pointer;
-  border-radius: 10px;
-  font-size: max(17px, 12Px);
-
-  // &:hover {
-  //   background: #F5F6FA;
-  // }
-
-
-  .title {
-    padding-left: 8px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 280px !important;
-    color: rgba(0, 0, 0, .5);
-    display: flex;
-    align-items: center;
-
-    &.titleSelect {
-      color: #1677FF;
-      font-weight: bold;
+  .listSectionLeft{
+    width: 30%;
+    border-right: 1px solid  #F0F0F0;
+    .leftscrollBar{
+      :global{
+        .n-scrollbar-content{
+          padding: 6px 32px 0 18px;
+        }
+      }
+      .className {
+        display: flex;
+        align-items: center;
+        padding: 14px 20px 14px 38px;
+        line-height: 22px;
+        margin-bottom: 4px;
+        .classNameIcon {
+          flex-shrink: 0;
+          background: url('../../image/icon-class-name.png') center no-repeat;
+          background-size: contain;
+          margin-right: 6px;
+          width: 14px;
+          height: 18px;
+        }
+        .classNameContent {
+          font-weight: 500;
+          font-size: max(18px, 13Px);
+          color: #333333;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
     }
-  }
-
-  .arrow {
-    display: inline-block;
-    width: 14px;
-    height: 15px;
-    background: url('../../image/arrow-default.png') no-repeat center;
-    background-size: contain;
-
-    &.arrowSelect {
-      background: url('../../image/arrow-active.png') no-repeat center;
-      background-size: contain;
+    .treeParent{
+      padding: 14px 20px 14px 38px;
+      line-height: 22px;
+      margin-bottom: 4px;
+      font-size: max(18px, 13Px);
+      color: #898A8A;
+      cursor: pointer;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &.parentSelect{
+        background: #F5F6FA;
+        border-radius: 10px;
+        color: #1677FF;
+        font-weight: 600;
+      }
     }
   }
-
-  .childArrow {
-    width: 12px;
-  }
-
-  &.childItem {
-    padding-left: 30px;
-    font-size: max(15px, 12Px);
-
-    .title {
-      color: #131415;
+  .listSectionRight{
+    width: 70%;
+    padding-top: 20px;
+    .rightscrollBar{
+      :global{
+        .n-scrollbar-content{
+          padding: 0 14px;
+          display: flex;
+          flex-wrap: wrap;
+        }
+      }
     }
-  }
-
-  &.childSelect {
-    background: #F5F6FA;
-
-    .title {
-      color: var(--n-color);
-      font-weight: bold;
+    .cardContainer{
+      width: 33.33%;
+      height: 112px;
+      padding: 0 6px;
+      :global{
+        .card-section-container{
+          width: 100% !important;
+          height: 100% !important;
+          .n-card__footer{
+            .footerTitle{
+              overflow: hidden;
+              .titleContent{
+                max-width: calc(100% - 13Px);
+              }
+            }
+          }
+        }
+      }
     }
   }
-}
+}

src/views/attend-class/model/source-list/index.tsx

@@ -1,4 +1,4 @@
-import { NCollapse, NCollapseItem } from 'naive-ui';
+import { NCollapse, NCollapseItem, NScrollbar } from 'naive-ui';
 import { computed, defineComponent, ref, watch } from 'vue';
 import CardType from '/src/components/card-type';
 import styles from './index.module.less';
@@ -47,64 +47,57 @@ export default defineComponent({
       return index;
     });
     return () => (
-      <div class={[styles.listSection]} id="drawerCardRef">
-        {props.teacherChapterName && (
-          <div class={styles.className}>
-            <i class={styles.classNameIcon}></i>
-            <p class={styles.classNameContent}>{props.teacherChapterName}</p>
-          </div>
-        )}
-
-        {props.knowledgePointList.map((item: any, index: number) => (
-          <div
-            class={[
-              styles.treeParent,
-              parentIndex.value === index && styles.parentSelect
-            ]}
-            key={'parent' + index}>
-            <div
-              class={[styles.treeItem, styles.parentItem]}
-              onClick={() => {
-                if (parentIndex.value === index) {
-                  parentIndex.value = -1;
-                } else {
-                  parentIndex.value = index;
-                }
-              }}>
-              <span
-                class={[
-                  styles.arrow,
-                  parentIndex.value === index ? styles.arrowSelect : ''
-                ]}></span>
-              <p
-                class={[
-                  styles.title,
-                  parentIndex.value === index ? styles.titleSelect : ''
-                ]}>
-                {item.title}
-              </p>
-            </div>
-
-            {parentIndex.value === index &&
-              item.list &&
-              item.list.map((child: any, j: number) => (
-                <div class={[styles.cardContainer, 'drawerCardItemRef']}>
-                  <CardType
-                    item={child}
-                    isActive={
-                      childIndex.value === j &&
-                      parentIndex.value === props.courseActiveIndex
-                    }
-                    isCollect={false}
-                    isShowCollect={false}
-                    onClick={() => {
-                      emit('confirm', child);
-                    }}
-                  />
+      <div class={styles.sourcelistBox}>
+        <div class={styles.treeBox}>
+          <div class={[styles.listSectionLeft]}>
+            <NScrollbar class={styles.leftscrollBar}>
+              {props.teacherChapterName && (
+                <div class={styles.className}>
+                  <i class={styles.classNameIcon}></i>
+                  <p class={styles.classNameContent}>
+                    {props.teacherChapterName}
+                  </p>
+                </div>
+              )}
+              {props.knowledgePointList.map((item: any, index: number) => (
+                <div
+                  class={[
+                    styles.treeParent,
+                    parentIndex.value === index && styles.parentSelect
+                  ]}
+                  key={'parent' + index}
+                  onClick={() => {
+                    parentIndex.value = index;
+                  }}>
+                  {item.title}
                 </div>
               ))}
+            </NScrollbar>
+          </div>
+          <div class={[styles.listSectionRight]}>
+            <NScrollbar class={styles.rightscrollBar}>
+              {(props.knowledgePointList[parentIndex.value] as any)?.list &&
+                (props.knowledgePointList[parentIndex.value] as any).list.map(
+                  (child: any, j: number) => (
+                    <div class={[styles.cardContainer, 'drawerCardItemRef']}>
+                      <CardType
+                        item={child}
+                        isActive={
+                          childIndex.value === j &&
+                          parentIndex.value === props.courseActiveIndex
+                        }
+                        isCollect={false}
+                        isShowCollect={false}
+                        onClick={() => {
+                          emit('confirm', child);
+                        }}
+                      />
+                    </div>
+                  )
+                )}
+            </NScrollbar>
           </div>
-        ))}
+        </div>
       </div>
     );
   }