fix: #9789

src/views/courseware-play/component/instrument-info/index.module.less

@@ -12,21 +12,20 @@
   }
 
   .left {
-    width: 250px;
+    width: 195px;
     height: 100%;
     display: flex;
     flex-direction: column;
     margin-right: 10px;
     border-radius: 8px;
     background: #fff;
-    padding: 16px;
+    padding: 16px 8px 12px;
 
     .insTop {
-      height: 138px;
-      min-height: 138px;
       display: flex;
       flex-direction: column;
       align-items: center;
+      padding-bottom: 8px;
       border-bottom: 1px solid #F2F2F2;
       :global {
         .van-notice-bar {
@@ -34,22 +33,22 @@
         }
       }  
       >img {
-        width: 74px;
-        height: 74px;
+        width: 54px;
+        height: 54px;
         border-radius: 50%;
         margin-bottom: 8px;
       }
 
       .musician {
-        width: 66px;
-        height: 83px;
+        width: 48px;
+        height: 60px;
         overflow: hidden;
       }
 
       .insName {
         color: #131415;
-        font-size: 16px;
-        margin-bottom: 4px;
+        font-size: 14px;
+        margin-bottom: 2px;
       }
 
       .insTro {
@@ -129,12 +128,29 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        text-align: center;
         >span {
           margin-right: 16px;
         }
       }
     }
 
+    .songColumn {
+      display: flex;
+      align-items: center;
+      margin: 14px 8px 4px;
+      img {
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
+      }
+      span {
+        font-size: 12px;
+        color: #000000;
+        font-weight: 500;
+      }
+    }
+
     .insList {
       width: 103%;
       padding-right: 3%;
@@ -146,12 +162,26 @@
       .li {
         display: flex;
         align-items: center;
-        padding: 12px 0;
+        padding: 8px 8px;
+        position: relative;
 
+        :global {
+          .van-notice-bar {
+              padding: 0;
+          }
+        } 
+        
         .liBg {
           width: 28px;
           height: 28px;
           border-radius: 8px;
+          position: relative;
+          overflow: hidden;
+          >img {
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+          }
         }
 
         .liName {
@@ -160,14 +190,30 @@
           overflow-x: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          font-size: 14px;
+          font-size: 13px;
           color: #131415;
+          :global {
+            .van-notice-bar__wrap {
+                padding: 0;
+                justify-content: left;
+            }
+          }
         }
 
         .liPlay {
           width: 20px;
           height: 20px;
         }
+
+        .hidePlayLoading {
+          opacity: 0;
+        }
+
+        &.liActive {
+          background: #E8F6FF;
+          border-radius: 6px;
+          height: 39px;
+        }
       }
 
       .emptyBox {
@@ -178,8 +224,8 @@
         padding-top: 8px;
 
         >img {
-          width: 138px;
-          height: 110px;
+          width: 86px;
+          //height: 76px;
         }
 
         >span {
@@ -213,15 +259,15 @@
     .title {
       display: flex;
       align-items: center;
-      font-size: 16px;
+      font-size: 14px;
       color: #000000;
       font-weight: 500;
-      margin-bottom: 15px;
+      margin-bottom: 14px;
 
       >img {
-        width: 24px;
-        height: 24px;
-        margin-right: 8px;
+        width: 20px;
+        height: 20px;
+        margin-right: 6px;
       }
     }
 

src/views/courseware-play/component/instrument-info/index.tsx

@@ -16,8 +16,10 @@ import titleIcon2 from '../../image/title_icon2.png';
 import playIcon from '../../image/music_play_icon.png';
 import pauseIcon from '../../image/music_pause_icon.png';
 import emptyIcon from '../../image/ins-empty-icon.png';
+import songIcon from '../../image/song_icon.png';
 import { NoticeBar } from 'vant';
 import PlayItem from '../play-item';
+import PlayLoading from '../play-loading'
 
 export default defineComponent({
   name: 'InstrumentInfo',
@@ -46,7 +48,7 @@ export default defineComponent({
       title: ' ',
       playState: 'pause' as 'play' | 'pause',
       showPlayer: false,
-      listActive: 0
+      listActive: null as any,
     });
     /** 选中的item */
     const activeItem = computed(() => {
@@ -186,20 +188,40 @@ export default defineComponent({
               </div>
             </div>
           )}
+          <div class={styles.songColumn}>
+            <img src={songIcon} />
+            <span>{props.type === 'instrument' ? '名曲鉴赏' : '代表作'}</span>
+          </div>
           <div class={styles.insList}>
             {forms.musicList.length ? (
               <>
                 {forms.musicList.map((item: any, index: number) => {
                   return (
                     <div
-                      class={styles.li}
+                      class={[styles.li, forms.listActive === index ? styles.liActive : '']}
                       onClick={(e: Event) => {
                         e.stopPropagation();
                         handlePlay(item);
                       }}>
-                      <img class={styles.liBg} src={musicBg} />
-                      <div class={styles.liName}>{item.name || '--'}</div>
-                      <img
+                      <div class={styles.liBg}>
+                        <img src={musicBg} />
+                        <PlayLoading
+                          class={[
+                            forms.listActive === index &&
+                            forms.playState === 'play'
+                              ? ''
+                              : styles.hidePlayLoading
+                          ]}
+                          /> 
+                      </div>
+                      {/* <div class={styles.liName}>{item.name || '--'}</div> */}
+                      <NoticeBar
+                        text={item.name}
+                        color="#131415"
+                        class={styles.liName}
+                        background="none"
+                      />
+                      {/* <img
                         class={styles.liPlay}
                         src={
                           forms.listActive === index &&
@@ -207,7 +229,7 @@ export default defineComponent({
                             ? pauseIcon
                             : playIcon
                         }
-                      />
+                      /> */}
                     </div>
                   );
                 })}

src/views/courseware-play/component/play-item/index.module.less

@@ -43,7 +43,7 @@
     margin-right: 12px;
     background-color: #000;
     box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
-    padding: 4px;
+    padding: 2px;
     overflow: hidden;
     flex-shrink: 0;
 

src/views/courseware-play/component/play-loading/index.module.less

@@ -0,0 +1,48 @@
+.audioAnimate {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .6);
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding-bottom: 30%;
+
+    div {
+        width: 5px;
+        height: 20px;
+        background: linear-gradient(135deg, #34FFC5 0%, #1BD2FF 100%);
+        transform-origin: bottom;
+        border-radius: 5px 5px 0 0;
+        margin: 0 2px;
+    }
+
+    & div:nth-child(1) {
+        animation: musicWave 0.5s infinite linear both alternate;
+    }
+
+    & div:nth-child(2) {
+        animation: musicWave 0.2s infinite linear both alternate;
+    }
+
+    & div:nth-child(3) {
+        animation: musicWave 0.6s infinite linear both alternate;
+    }
+
+    & div:nth-child(4) {
+        animation: musicWave 0.3s infinite linear both alternate;
+    }
+}
+
+
+@keyframes musicWave {
+    0% {
+        height: 5px;
+    }
+
+    100% {
+        height: 20px;
+    }
+}

src/views/courseware-play/component/play-loading/index.tsx

@@ -0,0 +1,16 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'playLoading',
+  setup() {
+    return () => (
+      <div class={styles.audioAnimate}>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    );
+  }
+});

src/views/courseware-play/index.tsx

@@ -901,10 +901,10 @@ export default defineComponent({
       popupData.itemActive = data.knowledgePointList[0].id;
       popupData.itemName = data.knowledgePointList[0].name;
       // 匹配到当前的章节名称
-      const dyItem  = data.courseDetails.find((unit: any) => unit.id === activeData.lessonCoursewareDetailId)
+      const dyItem = data.courseDetails.find((unit: any) => unit.id === activeData.lessonCoursewareDetailId)
       const zjItem = dyItem?.knowledgeList?.find((chapter: any) => chapter.id === activeData.coursewareDetailKnowledgeId)
       zjItem && (popupData.itemPointName = zjItem.name)
-      console.log(2222,popupData.itemPointName)
+      console.log('章节名称',popupData.itemPointName)
       loadingClass.value = false;
     };
     // 通过章节id，检测此章节有几个课件