添加作业

public/version.json

@@ -1 +1 @@
-{"version":1710833530438}
+{"version":1710852026507}

src/views/prepare-lessons/components/lesson-main/courseware-presets/index.module.less

@@ -38,7 +38,9 @@
 
     .n-tabs-nav {
       padding-top: 20px;
-      padding-bottom: 20px;
+      padding-bottom: 10px;
+      padding-left: 30px;
+      padding-right: 30px;
     }
   }
 
@@ -70,21 +72,23 @@
       display: inline-block;
       width: 23px;
       height: 50px;
-      background: url('../../../images/default-arrow.png') no-repeat center;
-      background-size: contain;
+      line-height: 50px;
       cursor: pointer;
+      background-color: #F5F6FA;
+      border-radius: 10px 0 0 10px;
+      color: #ABAEB0;
+      text-align: center;
 
-      &:hover {
-        background: url('../../../images/active-arrow.png') no-repeat center;
-        background-size: contain;
+      svg {
         transform: rotate(180deg);
       }
 
-      &.presetsArrarActive {
-        transform: rotate(180deg);
+      &:hover {
+        color: #198CFE;
+      }
 
-        &:hover {
-          background-size: contain;
+      &.presetsArrarActive {
+        svg {
           transform: rotate(0deg);
         }
       }
@@ -98,7 +102,7 @@
 
 .coursewarePresets {
   max-height: calc(var(--window-page-lesson-height) - 100px);
-  padding: 0 20px 0px;
+  // padding: 0 20px 0px;
 }
 
 .btnSubjectList {
@@ -235,7 +239,8 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  padding: 0 0 12px;
+  padding: 10px 20px 12px;
+  // padding: 0 20px 0px;
   gap: 20px 0;
   margin: 0 -10px 0;
   min-height: 313px;

src/views/prepare-lessons/components/lesson-main/courseware-presets/index.tsx

@@ -176,7 +176,10 @@ export default defineComponent({
       () => [prepareStore.getSelectKey, prepareStore.getSubjectId],
       async () => {
         await getCoursewareList();
-        await getOpenCoursewareList();
+        // await getOpenCoursewareList();
+        eventGlobal.emit('openCoursewareChanged');
+
+        subjectRef.value?.syncBarPosition();
       }
     );
 
@@ -251,9 +254,12 @@ export default defineComponent({
           'prepareLessonSubjectId',
           prepareStore.getSubjectId as any
         );
+
+        subjectRef.value?.syncBarPosition();
       }
     };
 
+    const subjectRef = ref();
     onMounted(async () => {
       useResizeObserver(
         document.querySelector('#presetsLeftRef') as HTMLElement,
@@ -288,7 +294,7 @@ export default defineComponent({
       // );
 
       await getCoursewareList();
-      await getOpenCoursewareList();
+      // await getOpenCoursewareList();
     });
 
     // 重命名
@@ -316,7 +322,8 @@ export default defineComponent({
         });
         message.success('删除成功');
         getCoursewareList();
-        getOpenCoursewareList();
+        // getOpenCoursewareList();
+        eventGlobal.emit('openCoursewareChanged');
         forms.preRemoveVisiable = false;
       } catch {
         //
@@ -334,7 +341,8 @@ export default defineComponent({
         await api_addByOpenCourseware({ id: item.id });
         message.success('添加成功');
         getCoursewareList();
-        getOpenCoursewareList();
+        // getOpenCoursewareList();
+        eventGlobal.emit('openCoursewareChanged');
       } catch {
         //
       }
@@ -441,7 +449,7 @@ export default defineComponent({
           id="presetsLeftRef"
           style={{ width: `calc(${forms.leftWidth} - ${forms.rightWidth})` }}>
           <NTabs
-            // ref={lessonMainRef}
+            ref={subjectRef}
             defaultValue="subject"
             paneClass={styles.paneTitle}
             justifyContent="start"
@@ -490,38 +498,6 @@ export default defineComponent({
             )}
           </NTabs>
           <NScrollbar class={styles.coursewarePresets}>
-            {/* <div class={styles.title} id="coursewarePresets">
-            <div class={styles.titleLeft}>
-              <i class={[styles.icon, styles.iconWork]}></i>
-              我的课件
-            </div>
-          </div> */}
-
-            {/* <NSpace>
-            <NSelect
-              placeholder="选择声部"
-              class={styles.btnSubjectList}
-              options={[
-                { name: '全部声部', id: '' },
-                ...prepareStore.getSubjectList
-              ]}
-              labelField="name"
-              valueField="id"
-              value={prepareStore.getSubjectId}
-              onUpdate:value={(val: any) => {
-                prepareStore.setSubjectId(val);
-                // 保存
-                forms.subjectId = val;
-
-                if (!val) {
-                  sessionStorage.setItem(
-                    'prepareLessonCourseWareSubjectIsNull',
-                    val ? 'false' : 'true'
-                  );
-                }
-              }}
-            />
-          </NSpace> */}
             <div style={{ overflow: 'hidden' }}>
               <NSpin show={forms.loading}>
                 <div class={styles.list}>
@@ -564,83 +540,6 @@ export default defineComponent({
                 </div>
               </NSpin>
             </div>
-
-            {/* {forms.openTableList.length > 0 && (
-            <>
-              <div class={[styles.title, styles.line]}>
-                <div class={styles.titleLeft}>
-                  <i class={[styles.icon, styles.iconCourseware]}></i>
-                  相关课件
-                  {forms.openTableList.length > 1 && (
-                    <span
-                      class={styles.more}
-                      onClick={() => (forms.showRelatedClass = true)}>
-                      查看更多
-                      <i class={styles.iconP}></i>
-                    </span>
-                  )}
-                </div>
-
-                {forms.openTableList.length > 1 && (
-                  <NSpace class={styles.swipeControll}>
-                    <div onClick={() => onChangeSlide('left')}>
-                      <NImage
-                        previewDisabled
-                        class={[
-                          styles.leftIcon,
-                          forms.carouselIndex === 0 && styles.disabled
-                        ]}
-                        src={iconSlideRight}
-                      />
-                    </div>
-                    <div onClick={() => onChangeSlide('right')}>
-                      <NImage
-                        class={
-                          forms.carouselIndex ==
-                            forms.openTableList.length - 1 && styles.disabled
-                        }
-                        previewDisabled
-                        src={iconSlideRight}
-                      />
-                    </div>
-                  </NSpace>
-                )}
-              </div>
-
-              <NSpin show={forms.openLoading} class={styles.openLoading}>
-                <NCarousel
-                  slidesPerView={1}
-                  loop={false}
-                  ref={carouselRef}
-                  // style={{ width: forms.bodyWidth }}
-                  v-model:currentIndex={forms.carouselIndex}>
-                  {forms.openTableList.map((item: any) => (
-                    <div class={[styles.list, styles.listSame]}>
-                      {item.map((child: any) => (
-                        <div
-                          class={[
-                            styles.itemWrap,
-                            styles.itemBlock,
-                            'row-nav'
-                          ]}>
-                          <div class={styles.itemWrapBox}>
-                            <CoursewareType
-                              isShowOpenFlag={false}
-                              isShowAdd
-                              isHoverShowAdd={false}
-                              item={child}
-                              onClick={() => onPreviewAttend(child.id)}
-                              onAdd={() => onAddCourseware(child)}
-                            />
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  ))}
-                </NCarousel>
-              </NSpin>
-            </>
-          )} */}
           </NScrollbar>
         </div>
 
@@ -649,20 +548,42 @@ export default defineComponent({
           <NTooltip showArrow={false}>
             {{
               trigger: () => (
-                <i
+                // <i
+                //   class={[
+                //     styles.presetsArrar,
+                //     !forms.openTableShow && styles.presetsArrarActive
+                //   ]}
+                //   onClick={() =>
+                //     (forms.openTableShow = !forms.openTableShow)
+                //   }></i>
+                <div
                   class={[
                     styles.presetsArrar,
                     !forms.openTableShow && styles.presetsArrarActive
                   ]}
-                  onClick={() =>
-                    (forms.openTableShow = !forms.openTableShow)
-                  }></i>
+                  onClick={() => (forms.openTableShow = !forms.openTableShow)}>
+                  <NIcon>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                      <path
+                        d="M16.62 2.99a1.25 1.25 0 0 0-1.77 0L6.54 11.3a.996.996 0 0 0 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"
+                        fill="currentColor"></path>
+                    </svg>
+                  </NIcon>
+                </div>
               ),
               default: () => <div>{forms.openTableShow ? '收起' : '展开'}</div>
             }}
           </NTooltip>
 
-          <Related />
+          <Related
+            onMore={() => (forms.showRelatedClass = true)}
+            onAdd={(item: any) => {
+              onAddCourseware(item);
+            }}
+            onLook={(item: any) => {
+              onPreviewAttend(item.id);
+            }}
+          />
         </div>
         {/* )} */}
 

src/views/prepare-lessons/components/lesson-main/courseware-presets/related.tsx

@@ -5,18 +5,15 @@ import SelectRelated from './select-related';
 
 export default defineComponent({
   name: 'related-modal',
-  setup() {
+  emits: ['more', 'add', 'look'],
+  setup(props, { emit }) {
     return () => (
       <div class={styles.related}>
         <NTabs
           animated
-          // value={forms.tabWorkType}
           paneClass={styles.paneTitle}
           paneWrapperClass={styles.paneWrapperContainer}
-          justifyContent="center"
-          onUpdate:value={(val: string) => {
-            // forms.tabWorkType = val;
-          }}>
+          justifyContent="center">
           {{
             suffix: () => (
               <div
@@ -24,6 +21,7 @@ export default defineComponent({
                 onClick={() => {
                   // forms.selectMusicStatus = true;
                   // prepareStore.setSelectMusicStatus(true);
+                  emit('more');
                 }}>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                   <g fill="none">
@@ -38,7 +36,10 @@ export default defineComponent({
               <>
                 <NTabPane name="myMusic" tab="相关课件">
                   {/* <SelectMusic cardType={props.cardType} type="myMusic" /> */}
-                  <SelectRelated />
+                  <SelectRelated
+                    onAdd={(item: any) => emit('add', item)}
+                    onLook={(item: any) => emit('look', item)}
+                  />
                 </NTabPane>
               </>
             )

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/index.module.less

@@ -42,15 +42,104 @@
 
 .itemModal {
   display: flex;
-  align-content: center;
+  align-items: center;
+  margin: 0 17px 20px;
 
   .itemCover {
+    position: relative;
     width: 111px;
     height: 63px;
     margin-right: 10px;
+    border-radius: 7px;
+    border: 1px solid #EFF0F2;
+
+    :global {
+      .n-image {
+        width: 111px;
+        height: 63px;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:hover {
+      .function {
+        opacity: 1;
+        transition: opacity 0.2s ease;
+      }
+    }
+  }
+
+  .function {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, .3);
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    .iconLook,
+    .iconAdd {
+      cursor: pointer;
+      width: 27px;
+      height: 27px;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, .4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+    }
+
+    .iconLook {
+      &::before {
+        display: inline-block;
+        content: '';
+        width: 15px;
+        height: 15px;
+        background: url('../../../../images/icon-look.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+
+
+    .iconAdd {
+      &::before {
+        display: inline-block;
+        content: '';
+        width: 12px;
+        height: 12px;
+        background: url('../../../../images/icon-add.png') no-repeat center;
+        background-size: contain;
+      }
+    }
   }
 
   .itemContent {
-    max-width: 128px;
+    max-width: 158px;
+    text-align: left;
+
+    .itemTitle {
+      font-weight: 600;
+      font-size: 12Px;
+      color: #000000;
+      line-height: 17px;
+    }
+
+    .itemSubject {
+      padding-top: 7px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 11Px;
+      color: #777777;
+      line-height: 15px;
+    }
   }
 }

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/index.tsx

@@ -2,67 +2,27 @@ import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NModal, NScrollbar, NSpin } from 'naive-ui';
 import styles from './index.module.less';
-import CardType from '/src/components/card-type';
 import TheEmpty from '/src/components/TheEmpty';
 import { useThrottleFn } from '@vueuse/core';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import {
-  api_queryOpenCoursewareByPage,
-  musicSheetPage
-} from '/src/views/prepare-lessons/api';
-import TrainUpdate from '/src/views/attend-class/model/train-update';
-import requestOrigin from 'umi-request';
-import CardPreview from '/src/components/card-preview';
-import { evaluateDifficult } from '/src/utils/contants';
-import { eventGlobal } from '/src/utils';
-import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
+import { api_queryOpenCoursewareByPage } from '/src/views/prepare-lessons/api';
 import Item from './item';
-
-const formatType = (type: string) => {
-  if (type === 'sahreMusic') {
-    return 2;
-  } else if (type === 'myMusic') {
-    return 3;
-  } else if (type === 'collectMusic') {
-    return 4;
-  }
-};
-
-export const typeFormat = (trainingType: string, configJson: any) => {
-  let tList: string[] = [];
-
-  if (trainingType === 'EVALUATION') {
-    tList = [
-      `${evaluateDifficult[configJson.evaluateDifficult]}`,
-      configJson.practiceChapterBegin || configJson.practiceChapterEnd
-        ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
-        : '全部小节',
-      // `速度${configJson.evaluateSpeed}`,
-      `${configJson.trainingTimes}分合格`
-    ];
-  } else {
-    tList = [
-      `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
-      `速度${configJson.practiceSpeed}`,
-      `${configJson.trainingTimes}分钟`
-    ];
-  }
-  return tList;
-};
+import { eventGlobal } from '/src/utils';
 
 export default defineComponent({
   name: 'share-resources',
-  setup(props) {
+  emits: ['look', 'add'],
+  setup(props, { emit }) {
     const prepareStore = usePrepareStore();
     const state = reactive({
       loading: false,
       finshed: false, // 是否加载完
       pagination: {
         page: 1,
-        rows: 20
+        rows: 10
       },
       searchGroup: {
-        name: ''
+        keyword: ''
       },
       tableList: [] as any,
       editStatus: false,
@@ -71,40 +31,6 @@ export default defineComponent({
       item: {} as any
     });
     const getList = async () => {
-      // try {
-      //   if (state.pagination.page === 1) {
-      //     state.loading = true;
-      //   }
-      //   const { data } = await materialQueryPage({
-      //     ...state.searchGroup,
-      //     ...state.pagination
-      //     // subjectId: prepareStore.getSubjectId
-      //   });
-      //   state.loading = false;
-      //   const tempRows = data.rows || [];
-      //   const temp: any = [];
-
-      //   tempRows.forEach((row: any) => {
-      //     const index = prepareStore.getTrainList.findIndex(
-      //       (course: any) => course.musicId === row.id
-      //     );
-      //     temp.push({
-      //       id: row.id,
-      //       coverImg: row.coverImg || row.musicSvg,
-      //       type: 'MUSIC',
-      //       title: row.name,
-      //       isCollect: !!row.favoriteFlag,
-      //       isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-      //       content: row.id,
-      //       xmlFileUrl: row.xmlFileUrl,
-      //       exist: index !== -1 ? true : false // 是否存在
-      //     });
-      //   });
-      //   state.tableList.push(...temp);
-      //   state.finshed = data.pages <= data.current ? true : false;
-      // } catch {
-      //   state.loading = false;
-      // }
       try {
         if (state.pagination.page === 1) {
           state.loading = true;
@@ -139,8 +65,12 @@ export default defineComponent({
 
         state.loading = false;
         state.tableList.push(...tempList);
-
-        state.finshed = data.pages <= data.current ? true : false;
+        // console.log(result, 'result', data);
+        const pages = !data.total
+          ? 1
+          : Math.ceil(state.pagination.rows / data.total);
+        state.finshed = pages <= data.current ? true : false;
+        // state.finshed = data.pages <= data.current ? true : false;
       } catch {
         state.loading = false;
       }
@@ -168,6 +98,7 @@ export default defineComponent({
 
     onMounted(() => {
       getList();
+      // eventGlobal.on('openCoursewareChanged', onSearch);
     });
     return () => (
       <div>
@@ -197,7 +128,13 @@ export default defineComponent({
               ]}>
               {state.tableList.length > 0 && (
                 <div class={styles.list}>
-                  <Item />
+                  {state.tableList.map((item: any) => (
+                    <Item
+                      item={item}
+                      onAdd={() => emit('add', item)}
+                      onLook={() => emit('look', item)}
+                    />
+                  ))}
                 </div>
               )}
               {!state.loading && state.tableList.length <= 0 && <TheEmpty />}

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/item.tsx

@@ -1,23 +1,49 @@
 import { defineComponent } from 'vue';
 import styles from './index.module.less';
-import { NImage } from 'naive-ui';
+import { NImage, NTooltip } from 'naive-ui';
 import TheNoticeBar from '/src/components/TheNoticeBar';
 
 export default defineComponent({
   name: 'item-modal',
-  setup() {
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['look', 'add'],
+  setup(props, { emit }) {
     return () => (
       <div class={styles.itemModal}>
         <div class={styles.itemCover}>
-          <NImage />
+          <NImage src={props.item.coverImg} objectFit="cover" previewDisabled />
+
+          <div class={styles.function}>
+            <NTooltip showArrow={false}>
+              {{
+                trigger: () => (
+                  <i class={styles.iconLook} onClick={() => emit('look')}></i>
+                ),
+                default: () => '预览课件'
+              }}
+            </NTooltip>
+            <NTooltip showArrow={false}>
+              {{
+                trigger: () => (
+                  <i class={styles.iconAdd} onClick={() => emit('add')}></i>
+                ),
+                default: () => '添加到我的课件'
+              }}
+            </NTooltip>
+          </div>
         </div>
 
         <div class={styles.itemContent}>
           <p class={styles.itemTitle}>
-            <TheNoticeBar text="三年级二班的哈哈其多三年级二班的哈哈其多" />
+            <TheNoticeBar text={props.item.name} />
           </p>
 
-          <div class={styles.itemSubject}>竖笛、葫芦丝、排箫</div>
+          <div class={styles.itemSubject}>{props.item.subjectNames}</div>
         </div>
       </div>
     );

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/resource-search-group/index.tsx

@@ -1,6 +1,6 @@
 import { PropType, defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
-import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
+import { NButton, NInput } from 'naive-ui';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
 
@@ -10,7 +10,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const catchStore = useCatchStore();
     const forms = reactive({
-      name: ''
+      keyword: ''
     });
 
     const onSearch = () => {
@@ -27,7 +27,7 @@ export default defineComponent({
             type="text"
             placeholder="请输入课件标题关键词"
             clearable
-            v-model:value={forms.name}
+            v-model:value={forms.keyword}
             class={styles.inputSearch}
             onKeyup={(e: KeyboardEvent) => {
               if (e.code === 'Enter') {
@@ -35,7 +35,7 @@ export default defineComponent({
               }
             }}
             onClear={() => {
-              forms.name = '';
+              forms.keyword = '';
               throttledFn();
             }}>
             {{

src/views/prepare-lessons/model/courseware-type/index.module.less

@@ -1,8 +1,15 @@
 .coursewareType {
   position: relative;
-  background: #F5F6FA;
   border-radius: 13px;
-  padding: 10px 10px 16px;
+  padding: 10px 10px 0;
+  transition: all .2s ease;
+
+  &:hover {
+    background: #FFFFFF;
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 15px;
+    transition: all .2s ease;
+  }
 
   &.coursewareTypeHover:hover {
     .addBtn {
@@ -53,13 +60,25 @@
     border-radius: 10px;
     overflow: hidden;
     background-color: #fff;
+    border: 1px solid #EFF0F2;
 
-    .status {
+    .iconNoWork {
       position: absolute;
+      right: 0;
       top: 0;
-      left: 0;
+      display: inline-block;
+      width: 81px;
+      height: 22px;
+      background: url('../../images/icon-no-work.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .status {
+      position: absolute;
+      top: 7px;
+      left: 7px;
       background: linear-gradient(226deg, #13BFFF 0%, #1183FF 100%);
-      border-radius: 4px 0px 10px 0px;
+      border-radius: 4px;
       font-weight: 600;
       font-size: max(12px, 11Px);
       color: #FFFFFF;
@@ -197,74 +216,186 @@
   }
 }
 
+.operationBottom {
+  padding-bottom: 16px;
+
+  &:hover .footer {
+    opacity: 1;
+    visibility: visible;
+    transition: all .2s ease;
+  }
+}
+
+
 .footer {
+  opacity: 0;
+  visibility: hidden;
   display: flex;
   align-items: center;
   padding-top: 10px;
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  bottom: 20px;
+  background-color: #fff;
+  transition: all .2s ease;
+
+  :global {
+    .n-space {
+      gap: 8px 10px !important;
+    }
+  }
 
   .actionClass {
     cursor: pointer;
     flex: 1;
     height: 30Px !important;
     line-height: 30Px;
-    background: #FFFFFF;
+    background: #198CFE;
     border-radius: 7px;
     text-align: center;
-    margin-right: 12Px;
+    margin-right: 10px;
     font-size: max(14px, 13Px);
-    color: #484F59;
+    color: #fff;
     font-weight: 600;
+    transition: all .2s ease;
 
     &:hover {
-      background-color: #198CFE;
-      color: #fff;
+      background-color: rgba(25, 140, 254, 0.8);
+      transition: all .2s ease;
+      // color: #fff;
+    }
+
+    &.actionWork {
+      margin-right: 0;
+      background: rgba(245, 246, 250, 1);
+      color: #484F59;
+      padding: 0 13px;
+
+      &:hover {
+        background-color: rgba(245, 246, 250, 1);
+        color: rgba(25, 140, 254, 1);
+      }
     }
   }
 
-  .optons {
-    width: 20Px;
-    height: 20Px;
-    background: #FFFFFF;
+  .menu {
+    height: 30Px !important;
+    line-height: 30Px;
+    width: 30Px !important;
+    background: rgba(245, 246, 250, 1);
     border-radius: 7px;
-    padding: 5px;
-    box-sizing: content-box;
-    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
 
-    img {
-      width: 20Px;
-      height: 20Px;
-    }
-
-    .iconEdit,
-    .iconDelete {
+    &::after {
+      content: '';
       display: inline-block;
-      width: 24px;
-      height: 24px;
+      width: 13Px;
+      height: 10Px;
+      background: url('../../images/icon-menu-default.png') no-repeat center;
+      background-size: contain;
     }
 
-    .iconEdit {
-      background: url('../../images/icon-courseware-edit.png') no-repeat center;
-      background-size: contain;
+    &:hover {
+      &::after {
+        background: url('../../images/icon-menu-active.png') no-repeat center;
+        background-size: contain;
+      }
     }
+  }
 
-    .iconDelete {
-      background: url('../../images/icon-courseware-delete.png') no-repeat center;
-      background-size: contain;
+
+  // .optons {
+  //   width: 20Px;
+  //   height: 20Px;
+  //   background: #FFFFFF;
+  //   border-radius: 7px;
+  //   padding: 5px;
+  //   box-sizing: content-box;
+  //   cursor: pointer;
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+
+  //   img {
+  //     width: 20Px;
+  //     height: 20Px;
+  //   }
+
+  //   .iconEdit,
+  //   .iconDelete {
+  //     display: inline-block;
+  //     width: 24px;
+  //     height: 24px;
+  //   }
+
+  //   .iconEdit {
+  //     background: url('../../images/icon-courseware-edit.png') no-repeat center;
+  //     background-size: contain;
+  //   }
+
+  //   .iconDelete {
+  //     background: url('../../images/icon-courseware-delete.png') no-repeat center;
+  //     background-size: contain;
+  //   }
+
+  //   // &:hover {
+  //   //   .iconEdit {
+  //   //     background: url('../../images/icon-courseware-edit-active.png') no-repeat center;
+  //   //     background-size: contain;
+  //   //   }
+
+  //   //   .iconDelete {
+  //   //     background: url('../../images/icon-courseware-delete-active.png') no-repeat center;
+  //   //     background-size: contain;
+  //   //   }
+  //   // }
+  // }
+  .iconEdit,
+  .iconDelete {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+  }
+
+  .iconEdit {
+    background: url('../../images/icon-courseware-edit.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .iconDelete {
+    background: url('../../images/icon-courseware-delete.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .popoverItem {
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    font-size: max(13px, 12Px);
+    color: #484F59;
+    line-height: 18px;
+    border-radius: 8px;
+    padding: 8px 13px;
+    cursor: pointer;
+
+    i {
+      margin-right: 13px;
     }
 
     &:hover {
-      .iconEdit {
-        background: url('../../images/icon-courseware-edit-active.png') no-repeat center;
-        background-size: contain;
-      }
+      background: #F5F6FA;
+    }
+  }
 
-      .iconDelete {
-        background: url('../../images/icon-courseware-delete-active.png') no-repeat center;
-        background-size: contain;
-      }
+  :global {
+    .n-popover {
+      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+      padding: 9px 7px !important;
     }
   }
 }

src/views/prepare-lessons/model/courseware-type/index.tsx

@@ -1,9 +1,9 @@
 import { defineComponent } from 'vue';
 import styles from './index.module.less';
-import { NButton, NImage, NSpace, NTooltip } from 'naive-ui';
-import iconEdit from '../../images/icon-courseware-edit.png';
-import iconDelete from '../../images/icon-courseware-delete.png';
-import iconEditName from '../../images/icon-edit-name.png';
+import { NButton, NImage, NPopover, NSpace, NTooltip } from 'naive-ui';
+// import iconEdit from '../../images/icon-courseware-edit.png';
+// import iconDelete from '../../images/icon-courseware-delete.png';
+// import iconEditName from '../../images/icon-edit-name.png';
 
 export default defineComponent({
   name: 'courseware-type',
@@ -53,7 +53,7 @@ export default defineComponent({
             ? styles.coursewareTypeHover
             : styles.coursewareTypeHocoursewareTypeShow
         ]}>
-        {props.isShowAdd && (
+        {/* {props.isShowAdd && (
           <NButton
             type="primary"
             class={[styles.addBtn]}
@@ -65,7 +65,7 @@ export default defineComponent({
             }}>
             {props.item.isAdd ? '已添加' : '添加'}
           </NButton>
-        )}
+        )} */}
         <div
           class={[styles.cover, props.isShowPreviewBtn && styles.hideP]}
           onClick={() => emit('click')}>
@@ -81,46 +81,55 @@ export default defineComponent({
               </NButton>
             </div>
           )}
+
+          <i class={styles.iconNoWork}></i>
         </div>
-        <div class={styles.coursewareText}>
-          <div class={[styles.name, props.isEditName && styles.editName]}>
-            <span>{props.item.name}</span>
-            <i class={styles.iconEditName} onClick={() => emit('editName')}></i>
+        <div class={styles.operationBottom}>
+          <div class={styles.coursewareText}>
+            <div class={[styles.name, props.isEditName && styles.editName]}>
+              <span>{props.item.name}</span>
+              <i
+                class={styles.iconEditName}
+                onClick={() => emit('editName')}></i>
+            </div>
+            <div class={styles.subjectName}>{props.item.subjectNames}</div>
           </div>
-          <div class={styles.subjectName}>{props.item.subjectNames}</div>
-        </div>
 
-        {props.operate && (
-          <div class={styles.footer}>
-            <div class={styles.actionClass} onClick={() => emit('startClass')}>
-              开始上课
+          {props.operate && (
+            <div class={styles.footer}>
+              <div
+                class={styles.actionClass}
+                onClick={() => emit('startClass')}>
+                开始上课
+              </div>
+
+              <NSpace>
+                <div class={[styles.actionClass, styles.actionWork]}>作业</div>
+                <NPopover trigger="hover" showArrow={false} to={false}>
+                  {{
+                    trigger: () => <div class={[styles.menu]}></div>,
+                    default: () => (
+                      <div class={styles.popoverList}>
+                        <div
+                          class={styles.popoverItem}
+                          onClick={() => emit('edit')}>
+                          <i class={styles.iconEdit}></i>
+                          <span>编辑课件</span>
+                        </div>
+                        <div
+                          class={styles.popoverItem}
+                          onClick={() => emit('delete')}>
+                          <i class={styles.iconDelete}></i>
+                          <span>删除课件</span>
+                        </div>
+                      </div>
+                    )
+                  }}
+                </NPopover>
+              </NSpace>
             </div>
-            <NSpace>
-              <NTooltip showArrow={false}>
-                {{
-                  trigger: () => (
-                    <div class={styles.optons} onClick={() => emit('edit')}>
-                      {/* <NImage src={iconEdit} previewDisabled></NImage> */}
-                      <i class={styles.iconEdit}></i>
-                    </div>
-                  ),
-                  default: () => <div>编辑</div>
-                }}
-              </NTooltip>
-              <NTooltip showArrow={false}>
-                {{
-                  trigger: () => (
-                    <div class={styles.optons} onClick={() => emit('delete')}>
-                      {/* <NImage src={iconDelete} previewDisabled></NImage> */}
-                      <i class={styles.iconDelete}></i>
-                    </div>
-                  ),
-                  default: () => <div>删除</div>
-                }}
-              </NTooltip>
-            </NSpace>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     );
   }

src/views/prepare-lessons/model/related-class/index.tsx

@@ -76,7 +76,10 @@ export default defineComponent({
         forms.loading = false;
         forms.tableList.push(...tempList);
 
-        forms.finshed = data.pages <= data.current ? true : false;
+        const pages = !data.total
+          ? 1
+          : Math.ceil(forms.pagination.rows / data.total);
+        forms.finshed = pages <= data.current ? true : false;
       } catch {
         forms.loading = false;
       }