Prechádzať zdrojové kódy

添加资源页面样式居中显示

lex 1 rok pred
rodič
commit
ba1dc8d56e

+ 9 - 3
src/components/card-type/index.module.less

@@ -8,6 +8,11 @@
   }
 }
 
+.card-section-content {
+  border-radius: 14px;
+  background: linear-gradient(270deg, #DBF1FF 0%, #E7F9FF 100%) !important;
+}
+
 .card-section {
   position: relative;
   box-sizing: border-box;
@@ -45,7 +50,7 @@
   // 封面样式
   .cover {
     width: 100%;
-    height: 170px;
+    height: 100%;
     background-color: #fff;
     border-radius: 14px 14px 0 0;
     overflow: hidden;
@@ -63,7 +68,8 @@
     }
 
     .n-card-cover {
-      height: 170px;
+      // height: 170px;
+      flex: 1 auto;
     }
   }
 
@@ -188,4 +194,4 @@
       min-width: 124px;
     }
   }
-}
+}

+ 2 - 2
src/components/card-type/index.tsx

@@ -101,7 +101,7 @@ export default defineComponent({
     return () => (
       <div
         onClick={() => emit('click', props.item)}
-        class={[styles['card-section']]}
+        class={[styles['card-section'], 'card-section-container']}
         onMouseenter={() => {
           isAnimation.value = true;
         }}
@@ -125,7 +125,7 @@ export default defineComponent({
         )}
         <NCard
           class={[
-            styles['card-section'],
+            styles['card-section-content'],
             props.isShowAdd ? '' : styles.course,
             props.isActive ? styles.isActive : '',
             props.item.exist ? styles.showAddBtn : '' // 是否已添加

+ 14 - 11
src/views/attend-class/component/musicScore.tsx

@@ -50,13 +50,16 @@ export default defineComponent({
           renderError.value = true;
         });
     };
-    watch(props.music, () => {
-      if (renderSuccess.value) return;
-      renderError.value = false;
-      if (props.music.display) {
-        checkView();
+    watch(
+      () => props.music,
+      () => {
+        if (renderSuccess.value) return;
+        renderError.value = false;
+        if (props.music.display) {
+          checkView();
+        }
       }
-    });
+    );
 
     // 去云教练完整版
     // const gotoAccomany = () => {
@@ -92,11 +95,11 @@ export default defineComponent({
       () => props.activeModel,
       () => {
         if (iframeRef.value.contentWindow && props.activeStatus) {
-          console.log(
-            iframeRef.value.contentWindow,
-            props.activeModel,
-            'iframeRef'
-          );
+          // console.log(
+          //   iframeRef.value.contentWindow,
+          //   props.activeModel,
+          //   'iframeRef'
+          // );
           iframeRef.value.contentWindow.postMessage(
             {
               api: 'attendClassBarStatus',

+ 4 - 3
src/views/attend-class/component/tools/pen.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
   },
   setup(props) {
     const { show, type } = toRefs(props);
-    const modelAttendStatus = ref(false);
+    // const modelAttendStatus = ref(false);
     const modal = reactive({
       status: false,
       title: type.value === 'pen' ? '退出批注' : '退出白板',
@@ -31,8 +31,9 @@ export default defineComponent({
     const firstRender = ref(true);
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://test.lexiaoya.cn/'
-      : location.origin;
-    const src = `${origin}/classroom-whiteboard?type=${props.type}`;
+      : // 'http://localhost:3000/'
+        location.origin;
+    const src = `${origin}/classroom-whiteboard?t=${+new Date()}`;
 
     return () => (
       <div

+ 17 - 11
src/views/attend-class/index.tsx

@@ -330,14 +330,26 @@ export default defineComponent({
           lessonCoursewareKnowledgeDetailId: data.detailId,
           id: data.classId
         });
-      } catch {}
+      } catch {
+        //
+      }
     };
 
     const activeName = computed(() => {
       let name = '';
-      data.knowledgePointList.forEach((item: any, index: number) => {
-        if (popupData.activeIndex === index) {
-          name = item.title;
+      // data.knowledgePointList.forEach((item: any, index: number) => {
+      //   if (popupData.activeIndex === index) {
+      //     name = item.title;
+      //   }
+      // });
+      popupData.chapterDetails.forEach((chapter: any) => {
+        if (chapter.id === data.lessonCoursewareDetailId) {
+          name = chapter.name;
+          chapter.knowledgeList?.forEach((know: any) => {
+            if (know.id === data.detailId) {
+              name += ' - ' + know.name;
+            }
+          });
         }
       });
       return name;
@@ -523,20 +535,14 @@ export default defineComponent({
               message.destroyAll();
               nextTick(() => {
                 if (item.error) {
-                  console.log(item, 'item error');
+                  // console.log(item, 'item error');
                   item.videoEle?.src(item.content);
                   item.error = false;
                   //   item.videoEle?.onPlay();
                 }
               });
-              // item.autoPlay = false;
             }
           }
-          //   requestAnimationFrame(() => {
-          //     const _effectIndex = effectIndex.value + 1;
-          //     effectIndex.value =
-          //       _effectIndex >= effects.length - 1 ? 0 : _effectIndex;
-          //   });
         },
         activeData.isAnimation ? 800 : 0
       );

+ 25 - 1
src/views/natural-resources/components/my-collect/index.module.less

@@ -3,8 +3,32 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 22px;
+  gap: 22px 0;
   min-height: 220px;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 5);
+    padding-bottom: calc(100% / 5 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .searchGroup {

+ 16 - 12
src/views/natural-resources/components/my-collect/index.tsx

@@ -116,18 +116,22 @@ export default defineComponent({
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
           <div class={styles.list} id="myColloge-0">
             {state.tableList.map((item: any) => (
-              <CardType
-                item={item}
-                offShelf={item.enableFlag ? false : true}
-                onOffShelf={() => onRemove(item)}
-                disabledMouseHover={false}
-                onClick={(val: any) => {
-                  if (val.type === 'IMG' || !item.enableFlag) return;
-                  state.show = true;
-                  state.item = val;
-                }}
-                onCollect={(item: any) => onCollect(item)}
-              />
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  <CardType
+                    item={item}
+                    offShelf={item.enableFlag ? false : true}
+                    onOffShelf={() => onRemove(item)}
+                    disabledMouseHover={false}
+                    onClick={(val: any) => {
+                      if (val.type === 'IMG' || !item.enableFlag) return;
+                      state.show = true;
+                      state.item = val;
+                    }}
+                    onCollect={(item: any) => onCollect(item)}
+                  />
+                </div>
+              </div>
             ))}
 
             {!state.loading && state.tableList.length <= 0 && (

+ 27 - 3
src/views/natural-resources/components/my-resources/index.module.less

@@ -3,7 +3,9 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 22px;
+  gap: 22px 0;
+  margin-left: -12px;
+  margin-right: -12px;
 }
 
 .searchGroup {
@@ -147,9 +149,31 @@
   }
 }
 
-.itemSection {
+
+
+.itemWrap {
+  width: calc(100% / 5);
+  padding-bottom: calc(100% / 5 * 0.73333);
   position: relative;
 
+  .itemWrapBox {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 12px;
+  }
+
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
   .itemBg {
     position: absolute;
     left: 0;
@@ -238,4 +262,4 @@
       }
     }
   }
-}
+}

+ 46 - 44
src/views/natural-resources/components/my-resources/index.tsx

@@ -207,51 +207,53 @@ export default defineComponent({
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
           <div class={styles.list}>
             {state.tableList.map((item: any) => (
-              <div class={styles.itemSection}>
-                <CardType
-                  item={item}
-                  disabledMouseHover={false}
-                  offShelf={item.enableFlag ? false : true}
-                  onOffShelf={() => {
-                    state.type = 'remove';
-                    state.removeContent = '该资源已下架,是否删除?';
-                    state.removeVisiable = true;
-                    state.removeItem = item;
-                  }} // 下架
-                  onClick={(val: any) => {
-                    if (val.type === 'IMG' || !item.enableFlag) return;
-                    state.show = true;
-                    state.item = val;
-                  }}
-                  onCollect={(item: any) => onCollect(item)}
-                />
-                {/* 编辑模式 */}
-                {state.editStatus && (
-                  <div
-                    class={[
-                      styles.itemBg,
-                      state.editIds.includes(item.id)
-                        ? styles.itemBgChecked
-                        : ''
-                    ]}
-                    onClick={() => {
-                      const index = state.editIds.indexOf(item.id);
-                      if (index > -1) {
-                        state.editIds.splice(index, 1);
-                      } else {
-                        state.editIds.push(item.id);
-                      }
-                    }}>
-                    <img
-                      src={
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  <CardType
+                    item={item}
+                    disabledMouseHover={false}
+                    offShelf={item.enableFlag ? false : true}
+                    onOffShelf={() => {
+                      state.type = 'remove';
+                      state.removeContent = '该资源已下架,是否删除?';
+                      state.removeVisiable = true;
+                      state.removeItem = item;
+                    }} // 下架
+                    onClick={(val: any) => {
+                      if (val.type === 'IMG' || !item.enableFlag) return;
+                      state.show = true;
+                      state.item = val;
+                    }}
+                    onCollect={(item: any) => onCollect(item)}
+                  />
+                  {/* 编辑模式 */}
+                  {state.editStatus && (
+                    <div
+                      class={[
+                        styles.itemBg,
                         state.editIds.includes(item.id)
-                          ? resourceChecked
-                          : resourceDefault
-                      }
-                      class={styles.resourceDefault}
-                    />
-                  </div>
-                )}
+                          ? styles.itemBgChecked
+                          : ''
+                      ]}
+                      onClick={() => {
+                        const index = state.editIds.indexOf(item.id);
+                        if (index > -1) {
+                          state.editIds.splice(index, 1);
+                        } else {
+                          state.editIds.push(item.id);
+                        }
+                      }}>
+                      <img
+                        src={
+                          state.editIds.includes(item.id)
+                            ? resourceChecked
+                            : resourceDefault
+                        }
+                        class={styles.resourceDefault}
+                      />
+                    </div>
+                  )}
+                </div>
               </div>
             ))}
 

+ 10 - 0
src/views/natural-resources/components/my-resources/search-group-resources.tsx

@@ -60,6 +60,11 @@ export default defineComponent({
                 size="small"
                 focusable={false}
                 onClick={() => {
+                  if (forms.type !== item.value) {
+                    state.isEdit = false;
+                    state.isSelectAll = false;
+                    emit('edit', state.isEdit);
+                  }
                   forms.type = item.value;
                   onSearch();
                 }}>
@@ -161,6 +166,11 @@ export default defineComponent({
                   focusable={false}
                   type={forms.subjectId === subject.id ? 'primary' : 'default'}
                   onClick={() => {
+                    if (forms.subjectId !== subject.id) {
+                      state.isEdit = false;
+                      state.isSelectAll = false;
+                      emit('edit', state.isEdit);
+                    }
                     forms.subjectId = subject.id;
                     onSearch();
                   }}>

+ 25 - 3
src/views/natural-resources/components/share-resources/index.module.less

@@ -3,8 +3,32 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 22px;
+  gap: 22px 0;
   min-height: 220px;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 5);
+    padding-bottom: calc(100% / 5 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .searchGroup {
@@ -128,8 +152,6 @@
 }
 
 
-
-
 .collapseWrap {
   width: 98%;
   display: flex;

+ 30 - 28
src/views/natural-resources/components/share-resources/index.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
       item: {} as any
     });
     const showGuide = ref(false);
-    const SearchGroupResourcesRef = ref()
+    const SearchGroupResourcesRef = ref();
     const getList = async () => {
       try {
         state.loading = true;
@@ -92,39 +92,41 @@ export default defineComponent({
     return () => (
       <>
         <SearchGroupResources
-        ref={SearchGroupResourcesRef}
+          ref={SearchGroupResourcesRef}
           onSearch={(item: any) => onSearch(item)}
           onAdd={() => (state.teachingStatus = true)}
         />
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
           <div class={styles.list}>
             {state.tableList.map((item: any, index: number) => (
-              <>
-                {index == 0 ? (
-                  <CardType
-                    {...{ id: 'shareResources-1' }}
-                    item={item}
-                    disabledMouseHover={false}
-                    onClick={(val: any) => {
-                      if (val.type === 'IMG') return;
-                      state.show = true;
-                      state.item = val;
-                    }}
-                    onCollect={(item: any) => onCollect(item)}
-                  />
-                ) : (
-                  <CardType
-                    item={item}
-                    disabledMouseHover={false}
-                    onClick={(val: any) => {
-                      if (val.type === 'IMG') return;
-                      state.show = true;
-                      state.item = val;
-                    }}
-                    onCollect={(item: any) => onCollect(item)}
-                  />
-                )}
-              </>
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  {index == 0 ? (
+                    <CardType
+                      {...{ id: 'shareResources-1' }}
+                      item={item}
+                      disabledMouseHover={false}
+                      onClick={(val: any) => {
+                        if (val.type === 'IMG') return;
+                        state.show = true;
+                        state.item = val;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                    />
+                  ) : (
+                    <CardType
+                      item={item}
+                      disabledMouseHover={false}
+                      onClick={(val: any) => {
+                        if (val.type === 'IMG') return;
+                        state.show = true;
+                        state.item = val;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                    />
+                  )}
+                </div>
+              </div>
             ))}
 
             {!state.loading && state.tableList.length <= 0 && (

+ 5 - 4
src/views/prepare-lessons/model/subject-sync/index.module.less

@@ -35,17 +35,18 @@
 .subjectItem {
   .imgSection {
     position: relative;
-    padding: 7px;
+    // padding: 7px;
     border: 3px solid transparent;
     border-radius: 24px;
     line-height: 0;
+    overflow: hidden;
   }
 
   img {
     overflow: hidden;
     border-radius: 18px;
-    width: 120px;
-    height: 120px;
+    width: 127px;
+    height: 127px;
     object-fit: contain;
   }
 
@@ -73,4 +74,4 @@
     font-weight: 600;
     color: #198CFE;
   }
-}
+}