ppt 预览 组件

src/router/routes/index.ts

@@ -253,6 +253,15 @@ export const constantRoutes: RouteRecordRaw[] = [
     ]
   },
   {
+    name: 'pptResources',
+    path: '/pptResources',
+    component: () => import('@/views/pptResources'),
+    meta: {
+      title: 'ppt资源',
+      singleLayout: 'blank'
+    }
+  },
+  {
     name: 'attend-class',
     path: '/attend-class',
     component: () => import('@/views/attend-class/index'),

src/views/pptResources/index.module.less

@@ -0,0 +1,70 @@
+.pptResources {
+  width: 100%;
+  height: 100vh;
+  .modalStyles {
+    :global {
+      .pptContentWrapStyle {
+        width: 86% !important;
+        .pptIconStyle {
+          line-height: 30px;
+          padding: 12px 13px;
+          border-radius: 20px;
+          i {
+            margin-right: 8px;
+            width: 24px;
+            height: 24px;
+          }
+        }
+        .pptBtnStyle {
+          padding: 4px 12px;
+          line-height: 30px;
+          border-radius: 20px;
+          i {
+            width: 12px;
+            height: 26px;
+          }
+        }
+        .pptChangeSizeStyle {
+          width: 70px;
+          padding: 26px 0;
+          right: 40px;
+          .pptIconTStyle {
+            width: 30px;
+            height: 30px;
+          }
+          .ppticonAddTStyle,
+          .ppticonPlusTStyle {
+            width: 46px;
+            height: 46px;
+          }
+          .ppticonAddTStyle {
+            margin-top: 26px;
+            margin-bottom: 16px;
+          }
+
+          .ppticonPlusTStyle {
+            margin-top: 16px;
+          }
+          .n-slider {
+            height: 250px;
+            --n-handle-size: 30px !important;
+            --n-rail-height: 0 !important;
+          }
+
+          .n-slider.n-slider--vertical .n-slider-rail {
+            border-radius: 20px;
+          }
+
+          .n-slider .n-slider-rail .n-slider-rail__fill {
+            border-radius: 20px;
+          }
+
+          .n-slider.n-slider--vertical .n-slider-handles {
+            top: 6px !important;
+            bottom: 6px !important;
+          }
+        }
+      }
+    }
+  }
+}

src/views/pptResources/index.tsx

@@ -0,0 +1,56 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { parseQuery } from '@/router';
+import InstruemntDetail from '/src/views/prepare-lessons/model/source-instrument/detail';
+import MusicDetail from '/src/views/prepare-lessons/model/source-music/detail';
+import TheoryDetail from '/src/views/prepare-lessons/model/source-knowledge/detail';
+
+export default defineComponent({
+  name: 'pptResources',
+  setup() {
+    // 获取传递过来的参数
+    const queryParams = {
+      pptContentType: '', // ppt传过来的 资源类型
+      pptType: '', // ppt 传过来的显示类型   modal，preview
+      pptId: '' // ppt传过来的id
+    };
+    getQueryParams();
+    function getQueryParams() {
+      const search = location.href.split('??');
+      if (search[1]) {
+        const parse = search[1];
+        const result = parseQuery(parse);
+        queryParams.pptContentType = result.pptContentType;
+        queryParams.pptType = result.pptType;
+        queryParams.pptId = result.pptId;
+        console.log(queryParams, '传过来的参数');
+      }
+    }
+    return () => (
+      <div class={styles.pptResources}>
+        {queryParams.pptContentType === 'INSTRUMENT' ||
+        queryParams.pptContentType === 'MUSICIAN' ? (
+          <InstruemntDetail
+            type={queryParams.pptType}
+            contentType={queryParams.pptContentType}
+            id={queryParams.pptId}
+          />
+        ) : queryParams.pptContentType === 'MUSIC_WIKI' ? (
+          <MusicDetail
+            type={queryParams.pptType}
+            contentType={queryParams.pptContentType}
+            id={queryParams.pptId}
+          />
+        ) : queryParams.pptContentType === 'THEORY' ? (
+          <TheoryDetail
+            class={queryParams.pptType === 'modal' ? styles.modalStyles : ''}
+            type="preview"
+            id={queryParams.pptId}
+          />
+        ) : (
+          ''
+        )}
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/source-knowledge/detail.tsx

@@ -88,9 +88,9 @@ export default defineComponent({
           // 提取并分割 HTML 文档中的内容
 
           const node: any = speak.processNode(doc.body);
-          const result = document.createElement("div")
-          result.classList.add("html-to-dom")
-          result.appendChild(node)
+          const result = document.createElement('div');
+          result.classList.add('html-to-dom');
+          result.appendChild(node);
           document.querySelector('#' + speakMusicContent)?.appendChild(result);
         });
       } catch {
@@ -126,15 +126,19 @@ export default defineComponent({
           props.type === 'preview' && styles.detailPreview
         ]}>
         {/* <div class={styles.detail2}> */}
-        <div class={styles.contentWrap}>
+        <div class={[styles.contentWrap, 'pptContentWrapStyle']}>
           <div class={styles.musicStaff}>
             <div class={styles.musicTitleRight}>
               {speak.isSpeak.value ? (
-                <span class={styles.textClose} onClick={speak.onCloseSpeak}>
+                <span
+                  class={[styles.textClose, 'pptIconStyle']}
+                  onClick={speak.onCloseSpeak}>
                   <i class={styles.icon}></i>关闭朗读
                 </span>
               ) : (
-                <span class={styles.textRead} onClick={speak.onAllSpeak}>
+                <span
+                  class={[styles.textRead, 'pptIconStyle']}
+                  onClick={speak.onAllSpeak}>
                   <i class={styles.icon}></i>全文朗读
                 </span>
               )}
@@ -157,11 +161,13 @@ export default defineComponent({
                       styles.selectionCouser,
                       !speak.showDom.value && styles.hide
                     ]}>
-                    <span class={styles.textStart} onClick={speak.onTextStart}>
+                    <span
+                      class={[styles.textStart, 'pptBtnStyle']}
+                      onClick={speak.onTextStart}>
                       开始朗读<i class={styles.icon}></i>
                     </span>
                     <span
-                      class={styles.textReadOnly}
+                      class={[styles.textReadOnly, 'pptBtnStyle']}
                       onClick={speak.onTextReadOnly}>
                       只读这段<i class={styles.icon}></i>
                     </span>
@@ -174,11 +180,11 @@ export default defineComponent({
             </NSpin>
           </div>
 
-          <div class={styles.changeSizeSection}>
-            <img src={iconT} class={styles.iconT} />
+          <div class={[styles.changeSizeSection, 'pptChangeSizeStyle']}>
+            <img src={iconT} class={[styles.iconT, 'pptIconTStyle']} />
             <img
               src={iconAddT}
-              class={styles.iconAddT}
+              class={[styles.iconAddT, 'ppticonAddTStyle']}
               onClick={() => {
                 if (state.fontSize >= 32) return;
                 state.fontSize += 1;
@@ -193,7 +199,7 @@ export default defineComponent({
             />
             <img
               src={iconPlusT}
-              class={styles.iconPlusT}
+              class={[styles.iconPlusT, 'ppticonPlusTStyle']}
               onClick={() => {
                 if (state.fontSize <= 12) return;
                 state.fontSize -= 1;