修改

src/components/the-vip/index.module.less

@@ -25,7 +25,7 @@
 
 .content {
   position: relative;
-  padding: 40px 20px 20px 20px;
+  padding: 40px 16px 20px;
   font-size: 14px;
   font-weight: 400;
   color: #333333;

src/views/hot-music-more/index.module.less

@@ -15,7 +15,7 @@
   }
 
   .mSearch11 {
-    padding-top: 8px;
+    // padding-top: 8px;
     :global {
       .van-search__content {
         background: rgba(255,255,255,0.5) !important;
@@ -112,9 +112,6 @@
       .van-tab {
         font-size: 16px;
       }
-      .van-tab--active {
-        font-size: 18px;
-      }
       .van-tab__text {
         line-height: normal;
         font-weight: 600;
@@ -288,6 +285,10 @@
       color: #777777;
       line-height: 1;
       padding-top: 1px;
+      max-width: 120px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 }
@@ -472,7 +473,7 @@
     .van-popup__close-icon {
       font-size: 16px;
       color: #aaa;
-      top: 29px;
+      top: 24px;
       right: 20px;
     }
   }

src/views/hot-music-more/index.tsx

@@ -1,7 +1,9 @@
 import {
   computed,
   defineComponent,
+  nextTick,
   onMounted,
+  onUnmounted,
   reactive,
   ref,
   Teleport,
@@ -22,7 +24,7 @@ import { api_musicSheetPage } from '../co-ai/api';
 import { state as baseState } from '@/state';
 import request from '@/helpers/request';
 import MEmpty from '@/components/m-empty';
-import { postMessage } from '@/helpers/native-message';
+import { listenerMessage, postMessage } from '@/helpers/native-message';
 import { audioPlayType } from '@/helpers/constant';
 import MusicDetail from './music-detail';
 import TheVip from '@/components/the-vip';
@@ -150,6 +152,7 @@ export default defineComponent({
         name: ''
       }
     });
+    const tabsRef = ref();
 
     const musicForms = reactive({
       page: 1,
@@ -166,6 +169,7 @@ export default defineComponent({
       tagActive: {} as any,
       childSelectId: null as any
     });
+    const contentRef = ref()
 
     const searchValue = computed(() => {
       if (state.tabActive === 'RECOMMEND') {
@@ -251,6 +255,24 @@ export default defineComponent({
       getMusicList();
     };
 
+    const onReset = () => {
+      //
+      state.sNt = '';
+      state.sAPT = '';
+      data.tagActiveId = '';
+      data.childSelectId = null;
+      data.selectParents = {}
+      state.allSearch.bookVersionId = data.childSelectId || data.tagActiveId;
+      state.allSearch.audioPlayTypes = state.sAPT
+        ? state.sAPT === 'PLAY_SING'
+          ? ['SING', 'PLAY']
+          : [state.sAPT]
+        : [];
+      state.allSearch.musicTagIds = state.sNt;
+      state.searchPopup = false;
+      onSearch();
+    };
+
     const onDetail = (item: any) => {
       state.item = item;
       state.musicDetailPopup = true;
@@ -358,11 +380,17 @@ export default defineComponent({
       }
     };
 
+    const tabResize = () => {
+      tabsRef.value?.resize();
+    };
+
     onMounted(async () => {
       if (route.query.type) {
         state.tabActive = route.query.type;
         state.isAllStatus = false;
       }
+
+      // tabsRef
       // 场景
       const tempAudio = Object.keys(audioPlayType).map(key => {
         return {
@@ -373,10 +401,20 @@ export default defineComponent({
       state.audioPlayTypeList = [{ name: '全部', id: '' }, ...tempAudio];
 
       state.loading = true;
-      getUserInfo()
+      getUserInfo();
       await getTags();
       await getMusicTagTree();
       getMusicList();
+
+      window.addEventListener('resize', tabResize);
+
+      listenerMessage('webViewOnResume', () => {
+        tabResize();
+      });
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', tabResize);
     });
     return () => (
       <div
@@ -404,6 +442,7 @@ export default defineComponent({
                       styles.leftArrow
                     ]}></i>
                   <Tabs
+                    ref={tabsRef}
                     class={styles.tabSection}
                     v-model:active={state.tabActive}
                     shrink
@@ -419,6 +458,7 @@ export default defineComponent({
                           onSearch();
                         }
                       } else {
+                        state.searchPopup = false;
                         state.isAllStatus = false;
                         onSearch();
                       }
@@ -453,6 +493,9 @@ export default defineComponent({
             background={'transparent'}
             inputBackground="transparent"
             class={styles.mSearch11}
+            onFocus={() => {
+              state.searchPopup = false;
+            }}
             onSearch={(val: any) => {
               if (state.tabActive === 'RECOMMEND') {
                 state.recommendSearch.name = val;
@@ -463,6 +506,7 @@ export default defineComponent({
               } else {
                 state.allSearch.name = val;
               }
+              state.searchPopup = false;
               onSearch();
             }}></MSearch>
         </MSticky>
@@ -513,7 +557,12 @@ export default defineComponent({
                               </span>
                             )}
 
-                            {item.composer && <p>{item.composer}</p>}
+                            {item.composer && (
+                              <p>
+                                {item.composer}
+                                {item.composer}
+                              </p>
+                            )}
                           </div>
                         </div>
                       ),
@@ -547,7 +596,6 @@ export default defineComponent({
                           <div
                             class={[
                               styles.subjectItem,
-                              styles.subjectItem4,
                               subject.id === state.sNt && styles.active
                             ]}
                             onClick={() => {
@@ -583,7 +631,7 @@ export default defineComponent({
 
                   {data.tags.length > 0 && (
                     <>
-                      <div class={styles.title}>
+                      <div class={styles.title} ref={contentRef}>
                         {data.tags[0]?.columnName}
 
                         {state.isTagExpand && (
@@ -616,11 +664,14 @@ export default defineComponent({
                             )
                         )}
 
-                        {!state.isTagExpand && (
+                        {!state.isTagExpand && data.tags.length > 5 && (
                           <div
                             class={[styles.subjectItem]}
                             onClick={() => {
                               state.isTagExpand = true;
+                              nextTick(() => {
+                                contentRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+                              })
                             }}>
                             更多 <Icon name="arrow-down" />
                           </div>
@@ -638,10 +689,8 @@ export default defineComponent({
                 </div>
 
                 <div class={styles.searchHead}>
-                  <span
-                    class={styles.cancel}
-                    onClick={() => (state.searchPopup = false)}>
-                    取消
+                  <span class={styles.cancel} onClick={() => onReset()}>
+                    重置
                   </span>
                   {/* <span>筛选</span> */}
                   <span

src/views/hot-music-more/music-detail/index.module.less

@@ -1,6 +1,8 @@
 .musicDetail {
   .musicContainer {
     position: relative;
+    height: 300px;
+    overflow: hidden;
     &::before {
       pointer-events: none;
       content: ' ';
@@ -12,21 +14,6 @@
       height: 38px;
       background: linear-gradient(180deg, #e3f4fa 0%, #ffffff 100%);
     }
-    &::after {
-      pointer-events: none;
-      content: ' ';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      display: block;
-      height: 50px;
-      background: linear-gradient(
-        180deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0.83) 100%
-      );
-    }
   }
   .container {
     position: relative;
@@ -54,9 +41,20 @@
     .right-musicName {
       position: relative;
       text-align: center;
-      padding: 25px 0 8px;
+      padding: 20px 0;
       width: 185px;
       margin: 0 auto;
+
+      .name {
+        width: 185px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 600;
+        font-size: 18px;
+        color: #131415;
+        line-height: 25px;
+      }
     }
 
     .noticeBar {

src/views/hot-music-more/music-detail/index.tsx

@@ -59,6 +59,9 @@ export default defineComponent({
       () => props.item,
       () => {
         item.value = props.item;
+        data.musicPdfUrl = ''
+        data.iframeSrc = ''
+        console.log(props.item, 'item')
         __init();
       }
     );
@@ -150,7 +153,7 @@ export default defineComponent({
             const waterCanvasImg = await addWatermark(canvas);
             // canvas转图片
             const dataURL = await convasToImg(waterCanvasImg);
-            // console.log(dataURL, 'dataURL');
+            console.log(dataURL, 'dataURL');
             setTimeout(() => {
               showToast('已保存到相册');
             }, 500);
@@ -475,7 +478,7 @@ export default defineComponent({
         }&musicRenderType=${musicRenderType}&zoom=0.6`;
       }
 
-      // console.log('地址', data.iframeSrc);
+      // console.log('地址', data.iframeSrc, isEnsemble.value , data.musicPdfUrl , !isMusicImg.value);
     };
 
     const __init = async () => {
@@ -495,7 +498,7 @@ export default defineComponent({
     return () => (
       <div class={styles.musicDetail}>
         <div class={styles.musicContainer}>
-          <div class={styles.container} ref={downRef}>
+          <div class={styles.container}>
             <div
               class={styles['right-musicName']}
               style={{
@@ -588,6 +591,71 @@ export default defineComponent({
               </div>
             )}
           </div>
+
+
+          <div class={styles.container} ref={downRef} style={{
+              display: 'block',
+              height: 'auto',
+            }}>
+            <div
+              class={styles['right-musicName']}
+              style={{
+                opacity: !data.musicPdfUrl ? '1' : '0',
+                height: !data.musicPdfUrl ? 'auto' : '0'
+              }}>
+                  <div class={styles.name}>{item.value?.musicSheetName}</div>
+              </div>
+              <div>
+                {data.showMusicImg === 'first' ? (
+                  <>
+                    {item.value?.musicFirstImg
+                      ?.split(',')
+                      .map((item: any, index: number) => {
+                        return (
+                          <img
+                            class={styles.staff}
+                            src={item}
+                            key={item}
+                            crossorigin="anonymous"
+                          />
+                        );
+                      })}
+                  </>
+                ) : data.showMusicImg === 'fixed' ? (
+                  <>
+                    <TransitionGroup name="van-fade">
+                      {item.value?.musicJianImg
+                        ?.split(',')
+                        .map((item: any, index: number) => {
+                          return (
+                            <img
+                              class={styles.staff}
+                              src={item}
+                              key={item}
+                              crossorigin="anonymous"
+                            />
+                          );
+                        })}
+                    </TransitionGroup>
+                  </>
+                ) : (
+                  <>
+                    {item.value?.musicImg
+                      ?.split(',')
+                      .map((item: any, index: number) => {
+                        return (
+                          <img
+                            class={styles.staff}
+                            src={item + '?v=' + Date.now()}
+                            key={item}
+                            crossorigin="anonymous"
+                          />
+                        );
+                      })}
+                  </>
+                )}
+              </div>
+          </div>
         </div>
         <div class={styles.btnGroup}>
           <div class={styles.operation}>