fix

src/views/coursewarePlay/component/musicScore.module.less

@@ -0,0 +1,7 @@
+.musicScore{
+    .container{
+        border: none;
+        width: 100vw;
+        height: 100vh;
+    }
+}

src/views/coursewarePlay/component/musicScore.tsx

@@ -0,0 +1,26 @@
+import { defineComponent } from 'vue'
+import styles from './musicScore.module.less'
+
+export default defineComponent({
+  name: 'musicScore',
+  props: {
+    music: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  setup(props, {}) {
+    const Authorization = sessionStorage.getItem('Authorization') || ''
+    const dev = /(localhost|192)/.test(location.host)
+    console.log(dev)
+    let src = `${
+      dev ? `https://ponline.colexiu.com` : location.origin
+    }/orchestra-music-score/#/?id=${props.music.content}&Authorization=${Authorization}`
+    console.log('src', src)
+    return () => (
+      <div class={styles.musicScore}>
+        <iframe class={styles.container} src={src}></iframe>
+      </div>
+    )
+  }
+})

src/views/coursewarePlay/index.tsx

@@ -9,6 +9,7 @@ import { state } from '@/state'
 import { useRoute } from 'vue-router'
 import { postMessage } from '@/helpers/native-message'
 import OHeader from '@/components/o-header'
+import MusicScore from './component/musicScore'
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -136,7 +137,9 @@ export default defineComponent({
                               <img src={m.content} />
                             </div>
                           ) : (
-                            <div class={styles.songItem}>曲谱</div>
+                            <div class={styles.songItem}>
+                              <MusicScore music={m} />
+                            </div>
                           )}
                         </SwipeItem>
                       )

src/views/lessonCourseware/index.module.less

@@ -16,19 +16,20 @@
     height: 130px;
     border-radius: 8px;
     overflow: hidden;
+    background: rgba(247,203,143,1);
     .cover {
       position: absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
-      z-index: -1;
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
     .title {
+      position: relative;
       text-align: center;
       padding: 10px;
       color:#742C00;