添加备齐弹窗样式居中显示

src/views/prepare-lessons/model/select-resources/index.module.less

@@ -1,5 +1,6 @@
 .selectMusic {
   padding-bottom: 10px;
+  height: 85vh;
 
   :global {
     .n-tabs-tab-pad {
@@ -7,7 +8,11 @@
     }
 
     .n-tabs-nav {
-      padding: 20px 20px 30px;
+      padding: 0 20px 0;
+
+      .n-tabs-nav-scroll-wrapper {
+        padding: 20px 0 30px;
+      }
     }
 
     .n-tabs-tab {
@@ -54,74 +59,4 @@
 .listContainer {
   margin-bottom: 20px;
   max-height: 50vh;
-}
-
-// .list {
-//   margin-top: 10px;
-//   padding: 0 40px 0;
-//   margin-bottom: 12px;
-//   display: flex;
-//   flex-flow: row wrap;
-//   justify-content: flex-start;
-//   gap: 22px;
-// }
-
-// .searchGroup {
-//   position: relative;
-//   padding: 0 40px;
-
-//   :global {
-//     .n-form {
-//       .n-form-item .n-form-item-label {
-//         font-size: 17px;
-//         font-weight: 600;
-//         color: #131415;
-//         line-height: 24px;
-//       }
-
-//       .n-button {
-//         height: 32px;
-//         font-size: 17px;
-//         border-radius: 8px;
-//         color: rgba(0, 0, 0, 0.6);
-//       }
-
-//       .n-button--primary-type {
-//         color: #131415;
-//       }
-
-//       .n-form-item-feedback-wrapper {
-//         min-height: 14px;
-//       }
-//     }
-//   }
-
-//   .inputSearch {
-//     position: absolute;
-//     top: 4px;
-//     right: 40px;
-//     width: 360px;
-//     height: 42px;
-//     font-size: 16px;
-
-//     img {
-//       width: 18px;
-//       height: 18px;
-//     }
-
-//     :global {
-//       .n-input-wrapper {
-//         padding-left: 12px;
-//         padding-right: 4px;
-//         height: 42px !important;
-//       }
-
-//       .n-button {
-//         height: 34px;
-//         font-size: 15px;
-//         font-weight: 500;
-//         width: auto;
-//       }
-//     }
-//   }
-// }
+}

src/views/prepare-lessons/model/select-resources/index.tsx

@@ -1,7 +1,8 @@
 import { NTabPane, NTabs } from 'naive-ui';
-import { defineComponent, ref, toRefs } from 'vue';
+import { defineComponent, onMounted, ref, toRefs } from 'vue';
 import styles from './index.module.less';
 import SelectItem from './select-item';
+import { useResizeObserver } from '@vueuse/core';
 
 export default defineComponent({
   name: 'select-music',
@@ -15,8 +16,29 @@ export default defineComponent({
   setup(props) {
     const { type } = toRefs(props);
     const tabType = ref(type.value);
+
+    onMounted(() => {
+      console.log(
+        document.querySelector('.select-resource .n-tabs-nav--top'),
+        ''
+      );
+      useResizeObserver(
+        document.querySelector(
+          '.select-resource .n-tabs-nav--top'
+        ) as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          console.log(height, 'height - 11');
+          document.documentElement.style.setProperty(
+            '--modal-lesson-tab-height',
+            height + 'px'
+          );
+        }
+      );
+    });
     return () => (
-      <div class={styles.selectMusic}>
+      <div class={[styles.selectMusic, 'select-resource']}>
         <NTabs
           animated
           value={tabType.value}

src/views/prepare-lessons/model/select-resources/select-item/index.module.less

@@ -1,9 +1,9 @@
 .listContainer {
   margin: 0;
-  max-height: calc(var(--window-page-lesson-height) - 324px - 20px);
+  // max-height: calc(80vh - var(--modal-lesson-search-height) - 50px - 30Px);
 
   .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 324px - 20px);
+    // min-height: calc(80vh - var(--modal-lesson-search-height) - 50px - 30Px);
   }
 
   .emptySection {
@@ -12,9 +12,9 @@
   }
 
   .list {
-    margin-top: 10px;
-    padding: 0 40px 0;
-    margin-bottom: 12px;
+    // margin-top: 10px;
+    padding: 10px 40px 0;
+    // margin-bottom: 12px;
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-start;
@@ -26,7 +26,7 @@
     // text-align: center;
 
     &>div {
-      margin-bottom: 20px;
+      // margin-bottom: 20px;
 
       &:last-child {
         margin-bottom: 0;

src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -14,7 +14,7 @@ import { materialQueryPage } from '/src/views/natural-resources/api';
 import TheEmpty from '/src/components/TheEmpty';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { saveCourseware } from '../../../api';
-import { useDebounceFn } from '@vueuse/core';
+import { useDebounceFn, useResizeObserver } from '@vueuse/core';
 import CardPreview from '/src/components/card-preview';
 import { eventGlobal } from '/src/utils';
 
@@ -40,7 +40,9 @@ export default defineComponent({
     const prepareStore = usePrepareStore();
     const message = useMessage();
     const { type } = toRefs(props);
+    const className = 'resourceSearchGroup' + +new Date();
     const state = reactive({
+      searchHeight: '0px',
       loading: false,
       finshed: false, // 是否加载完
       pagination: {
@@ -185,16 +187,34 @@ export default defineComponent({
 
     onMounted(() => {
       getList();
+
+      useResizeObserver(
+        document.querySelector('.' + className) as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          // document.documentElement.style.setProperty(
+          //   '--modal-lesson-search-height',
+          //   height + 'px'
+          // );
+          state.searchHeight = height + 'px';
+        }
+      );
     });
     return () => (
       <div>
-        <ResourceSearchGroup
-          type={props.type}
-          subjectId={prepareStore.getSubjectId as any}
-          onSearch={(item: any) => throttledFnSearch(item)}
-        />
+        <div class={className}>
+          <ResourceSearchGroup
+            type={props.type}
+            subjectId={prepareStore.getSubjectId as any}
+            onSearch={(item: any) => throttledFnSearch(item)}
+          />
+        </div>
         <NScrollbar
           class={styles.listContainer}
+          style={{
+            'max-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px) `
+          }}
           onScroll={(e: any) => {
             const clientHeight = e.target?.clientHeight;
             const scrollTop = e.target?.scrollTop;
@@ -211,6 +231,9 @@ export default defineComponent({
           }}>
           <NSpin show={state.loading} size={'small'}>
             <div
+              style={{
+                'min-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px)`
+              }}
               class={[
                 styles.listSection,
                 !state.loading && state.tableList.length <= 0

src/views/prepare-lessons/model/select-resources/select-item/resource-search-group/index.tsx

@@ -66,7 +66,6 @@ export default defineComponent({
         divDomList.value = [...new Set(divDomList.value)];
         let offsetLeft = -1;
         divDomList.value.forEach((item: any, index: number) => {
-          console.log(item, 'item');
           if (index === 0) {
             line.value = 1;
             offsetLeft = item.offsetLeft;
@@ -116,8 +115,8 @@ export default defineComponent({
       // 这里开始
       // musicCateRef
       if (forms.type === 'MUSIC') {
-        orginHeight.value = collapseWrapRef.value.offsetHeight;
-        hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
+        orginHeight.value = collapseWrapRef.value?.offsetHeight;
+        hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
         // 默认隐藏
         getLive();
       }