优化样式

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

@@ -27,11 +27,13 @@
       align-items: center;
       padding-bottom: 8px;
       border-bottom: 1px solid #F2F2F2;
+
       :global {
         .van-notice-bar {
-            padding: 0;
+          padding: 0;
         }
-      }  
+      }
+
       >img {
         width: 54px;
         height: 54px;
@@ -114,11 +116,12 @@
         font-weight: 500;
         color: #131415;
         width: 100%;
+
         :global {
-            .van-notice-bar__wrap {
-                padding: 0;
-                justify-content: center;
-            }
+          .van-notice-bar__wrap {
+            padding: 0;
+            justify-content: center;
+          }
         }
       }
 
@@ -130,6 +133,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         text-align: center;
+
         >span {
           margin-right: 16px;
         }
@@ -140,11 +144,13 @@
       display: flex;
       align-items: center;
       margin: 14px 8px 4px;
+
       img {
         width: 14px;
         height: 14px;
         margin-right: 4px;
       }
+
       span {
         font-size: 12px;
         color: #000000;
@@ -165,29 +171,32 @@
         align-items: center;
         padding: 8px 8px;
         position: relative;
+        height: 40px;
 
         :global {
           .van-notice-bar {
-              padding: 0;
+            padding: 0;
           }
-        } 
-        
+        }
+
         .liBg {
-          width: 28px;
-          height: 28px;
+          width: 24px;
+          height: 24px;
           border-radius: 8px;
           position: relative;
           overflow: hidden;
+
           >img {
             width: 100%;
             height: 100%;
             border-radius: 8px;
           }
+
           .playingIcon {
             position: absolute;
             left: 50%;
             top: 50%;
-            transform: translate(-50%,-50%);
+            transform: translate(-50%, -50%);
             width: 100%;
             height: 100%;
           }
@@ -201,10 +210,11 @@
           white-space: nowrap;
           font-size: 13px;
           color: #131415;
+
           :global {
             .van-notice-bar__wrap {
-                padding: 0;
-                justify-content: left;
+              padding: 0;
+              justify-content: left;
             }
           }
         }

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

@@ -50,7 +50,7 @@ export default defineComponent({
       title: ' ',
       playState: 'pause' as 'play' | 'pause',
       showPlayer: false,
-      listActive: 0,
+      listActive: 0
     });
     /** 选中的item */
     const activeItem = computed(() => {
@@ -68,7 +68,7 @@ export default defineComponent({
           '<video class="video-music" style="width: 100% !important;" controlslist="nodownload" poster="https://oss.dayaedu.com/ktqy/1701759849244.png"'
         );
         forms.dataInfo = data || {};
-        
+
         forms.musicList = data.knowledgeWikiResources.map((item: any) => {
           return {
             id: item.id,
@@ -82,7 +82,7 @@ export default defineComponent({
 
     /** 播放曲目 */
     const handlePlay = (item: any) => {
-      if (!initDone.value) initDone.value = true
+      if (!initDone.value) initDone.value = true;
       const index = forms.musicList.findIndex(
         (_item: any) => _item.id === item.id
       );
@@ -120,6 +120,9 @@ export default defineComponent({
       val => {
         if (val) {
           // onToggleAudio();
+          forms.dataInfo = {};
+          forms.musicList = [];
+          getDetail();
         } else {
           //  audioRef.value.pause();
           //  data.playState = 'pause';
@@ -180,7 +183,8 @@ export default defineComponent({
               <img src={forms.dataInfo.avatar || pBg} />
               <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
               <div class={styles.insTro}>
-                {forms.dataInfo.knowledgeWikiCategories?.[0]?.knowledgeWikiCategoryTypeName || ''}
+                {forms.dataInfo.knowledgeWikiCategories?.[0]
+                  ?.knowledgeWikiCategoryTypeName || ''}
               </div>
             </div>
           )}
@@ -189,7 +193,8 @@ export default defineComponent({
               <img class={styles.musician} src={forms.dataInfo.avatar || pBg} />
               <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
               <div class={styles.insTro}>
-                {forms.dataInfo.knowledgeWikiCategories?.[0]?.knowledgeWikiCategoryTypeName || ''}
+                {forms.dataInfo.knowledgeWikiCategories?.[0]
+                  ?.knowledgeWikiCategoryTypeName || ''}
               </div>
             </div>
           )}
@@ -203,15 +208,26 @@ export default defineComponent({
                 {forms.musicList.map((item: any, index: number) => {
                   return (
                     <div
-                      class={[styles.li, initDone.value && forms.listActive === index ? styles.liActive : '']}
+                      class={[
+                        styles.li,
+                        initDone.value && forms.listActive === index
+                          ? styles.liActive
+                          : ''
+                      ]}
                       onClick={(e: Event) => {
                         e.stopPropagation();
                         handlePlay(item);
                       }}>
                       <div class={styles.liBg}>
                         <img src={musicBg} />
-                        <div class={[forms.listActive === index && forms.playState === 'play' ? styles.playingIcon : styles.hidePlayLoading]}>
-                          <PlayLoading /> 
+                        <div
+                          class={[
+                            forms.listActive === index &&
+                            forms.playState === 'play'
+                              ? styles.playingIcon
+                              : styles.hidePlayLoading
+                          ]}>
+                          <PlayLoading />
                         </div>
                       </div>
                       {/* <div class={styles.liName}>{item.name || '--'}</div> */}

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

@@ -1,48 +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: 2px;
-        height: 10px;
-        background: linear-gradient(135deg, #34FFC5 0%, #1BD2FF 100%);
-        transform-origin: bottom;
-        border-radius: 5px 5px 0 0;
-        margin: 0 1px;
-    }
-
-    & 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;
-    }
+  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: 25%;
+
+  div {
+    width: 2px;
+    height: 8px;
+    background: linear-gradient(135deg, #34FFC5 0%, #1BD2FF 100%);
+    transform-origin: bottom;
+    border-radius: 5px 5px 0 0;
+    margin: 0 1px;
+  }
+
+  & 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: 2px;
-    }
+  0% {
+    height: 2px;
+  }
 
-    100% {
-        height: 10px;
-    }
+  100% {
+    height: 10px;
+  }
 }

src/views/courseware-play/index.tsx

@@ -1136,7 +1136,7 @@ export default defineComponent({
                       // />
                     )}
                     {m.type === 'THEORY' && <Theory id={m.bizId} />}
-                    {popupData.activeIndex === mIndex && 
+                    {/* {popupData.activeIndex === mIndex && ( */}
                     <>
                       {m.type === 'MUSIC_WIKI' && (
                         <InstrumentInfo
@@ -1160,7 +1160,7 @@ export default defineComponent({
                         />
                       )}
                     </>
-                    }
+                    {/* )} */}
                   </div>
                 ) : (
                   <div

src/views/tempo-practice/setting-modal/index.module.less

@@ -44,7 +44,8 @@
     display: inline-block;
     width: 31px;
     height: 32px;
-    background: url('../images/icon-close.png') no-repeat center center / contain;
+    background: url('../images/icon-close.png') no-repeat center center;
+    background-size: 96%;
     cursor: pointer;
   }
 }
@@ -140,11 +141,11 @@
   align-items: center;
   justify-content: center;
   padding: 14px 0;
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 1));
   border-radius: 0 0 26px 26px;
 
   .btnSubmit {
-    width: 143px;
+    width: 135px;
     height: 45px;
     line-height: 45px;
     border-radius: 20px;