修改样式

src/views/xiaoku-list/detail.module.less

@@ -2,7 +2,6 @@
   min-height: 100%;
   display: flex;
   flex-direction: column;
-
 }
 .detailContainer {
   flex: 1 auto;
@@ -57,6 +56,23 @@
 
   .inputSearch {
     width: 480px;
+    :global {
+      .n-button {
+        padding: 0 24px;
+        font-size: max(16px, 13px) !important;
+        color: #ffffff;
+        --n-border: none !important;
+        background: linear-gradient(312deg, #1b7af8 0%, #3cbbff 100%);
+      }
+      .n-input__input-el {
+        font-size: max(16px, 13px) !important;
+        color: #000000;
+      }
+
+      .n-input__placeholder {
+        font-size: max(16px, 13px) !important;
+      }
+    }
   }
 
   .searchSection {
@@ -111,7 +127,7 @@
     .n-form-item {
       .n-form-item-label {
         font-size: max(17px, 13px);
-        font-weight: 600;
+        // font-weight: 600;
         color: #131415;
         line-height: 24px;
       }
@@ -158,11 +174,11 @@
       background: url('./images/icon-arrow-down.png') no-repeat center;
       background-size: contain;
       margin-left: 6px;
+      margin-top: 1px;
     }
-    
+
     &.activeSearch::after {
       transform: rotate(180deg);
-      
     }
   }
 }
@@ -255,7 +271,7 @@
   background: transparent;
   border-radius: 8px;
   padding: 4px 20px;
-  font-size: max(17px, 12px);
+  font-size: max(17px, 13px);
   color: rgba(0, 0, 0, 0.6);
   cursor: pointer;
   display: flex;
@@ -315,7 +331,6 @@
       height: 100%;
       flex: 1 auto;
     }
-    
   }
 }
 

src/views/xiaoku-list/index.module.less

@@ -19,7 +19,7 @@
   // color: #004aff;
   text-align: center;
   img {
-    height: 60px;
+    height: 50px;
     margin: 0 auto;
   }
 }
@@ -37,13 +37,15 @@
         padding: 0 24px;
         font-size: 18px !important;
         color: #ffffff;
+        --n-border: none !important;
+        background: linear-gradient( 312deg, #1B7AF8 0%, #3CBBFF 100%);
       }
       .n-input__input-el {
         font-size: 18px !important;
         color: #000000;
       }
 
-      input::placeholder {
+      .n-input__placeholder {
         font-size: 18px !important;
       }
     }
@@ -147,6 +149,7 @@
   :global {
     .n-scrollbar {
       max-height: calc(100vh - 64px - 154px - 48px - 91px);
+      height: calc(100vh - 64px - 154px - 48px - 91px);
     }
   }
 }

src/views/xiaoku-list/index.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref
+} from 'vue';
 import styles from './index.module.less';
 import TheSearch from '/src/components/TheSearch';
 import recommendTitle from './images/reommon_title.png';
@@ -10,11 +17,11 @@ import { useRouter } from 'vue-router';
 import { api_musicSheetQueryByTag } from './api';
 import { api_musicSheetPage } from '../xiaoku-ai/api';
 import TheEmpty from '/src/components/TheEmpty';
-import titleBg from './images/title-bg.png'
+import titleBg from './images/title-bg.png';
 import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
 import PreviewWindow from '../preview-window';
 import { useUserStore } from '/src/store/modules/users';
-import {state as baseState} from '/src/state';
+import { state as baseState } from '/src/state';
 import { exitFullscreen, fscreen } from '/src/utils';
 
 export const formatUsedNum = (num: number) => {
@@ -37,6 +44,7 @@ export default defineComponent({
       RECOMMEND: [] as any,
       isSearch: false, // 是否点击搜索
       keyword: null as any,
+      detailLoading: false,
       list: [] as any,
       loading: false as any,
       finshed: false,
@@ -46,28 +54,32 @@ export default defineComponent({
       previewParams: {
         type: '',
         src: ''
-      } as any,
+      } as any
     });
 
-    
-
     /** 获取三个模块 */
     const getDetail = async () => {
+      state.detailLoading = true;
       try {
-        const { data } = await api_musicSheetQueryByTag();
+        const { data } = await api_musicSheetQueryByTag({ rows: 48 });
         state.RECOMMEND = data.RECOMMEND || [];
         state.HOT = data.HOT || [];
         state.NEW = data.NEW || [];
       } catch {
         //
       }
+      state.detailLoading = false;
     };
 
     /** 获取更多 */
     const getList = async () => {
       state.loading = true;
       try {
-        const { data } = await api_musicSheetPage({ keyword: state.keyword, page: state.page, rows: state.rows });
+        const { data } = await api_musicSheetPage({
+          keyword: state.keyword,
+          page: state.page,
+          rows: state.rows
+        });
         const result = data.rows || [];
         result.forEach((item: any) => {
           if (item.musicSheetName) {
@@ -103,7 +115,7 @@ export default defineComponent({
         }
       });
       obv.observe(spinRef.value);
-    }
+    };
 
     // 查看更多
     const onMore = (type?: '' | 'RECOMMEND' | 'NEW' | 'HOT') => {
@@ -119,20 +131,11 @@ export default defineComponent({
     const onDetail = (item: any) => {
       // 默认进页面显示对应的曲谱
       let lineType = item.scoreType || 'FIRST';
-      // if (data.showMusicImg === 'first') {
-      //   lineType = 'firstTone';
-      // } else if (data.showMusicImg === 'fixed') {
-      //   lineType = 'fixedTone';
-      // } else if (data.showMusicImg === 'staff') {
-      //   lineType = 'staff';
-      // }
       let src = `${vaildMusicScoreUrl()}/instrument?v=${+new Date()}&platform=pc&id=${
         item.id
       }&Authorization=${
         userStore.getToken
-      }&musicRenderType=${lineType}&showGuide=true&part-index=${
-        0
-      }`;
+      }&musicRenderType=${lineType}&showGuide=true&part-index=${0}`;
 
       if (window.matchMedia('(display-mode: standalone)').matches) {
         baseState.application = window.matchMedia(
@@ -147,14 +150,14 @@ export default defineComponent({
       } else {
         window.open(src, +new Date() + '');
       }
-    }
+    };
 
     const iframeHandle = (ev: MessageEvent) => {
       if (ev.data?.api === 'onAttendToggleMenu') {
-        exitFullscreen()
+        exitFullscreen();
         state.previewModal = !state.previewModal;
       }
-    }
+    };
 
     onMounted(() => {
       getDetail();
@@ -163,8 +166,8 @@ export default defineComponent({
     });
 
     onUnmounted(() => {
-      window.removeEventListener('message', iframeHandle)
-    })
+      window.removeEventListener('message', iframeHandle);
+    });
     return () => (
       <div class={styles.list}>
         <h2 class={styles.topTitle}>
@@ -176,60 +179,67 @@ export default defineComponent({
             round
             class={styles.searchInput}
             onSearch={val => {
-              if(val && val.trim()) {
+              if (val && val.trim()) {
                 state.isSearch = true;
-                state.keyword = val.trim()
+                state.keyword = val.trim();
                 state.loading = true;
                 state.finshed = false;
-                state.list = []
+                state.list = [];
                 getList();
                 nextTick(() => {
-                  __initSpin()
-                })
+                  __initSpin();
+                });
               } else {
                 state.isSearch = false;
               }
             }}
           />
 
-          <div class={styles.moreMusic} onClick={() => onMore()}>全部曲目</div>
+          <div class={styles.moreMusic} onClick={() => onMore()}>
+            全部曲目
+          </div>
         </div>
 
         {state.isSearch ? (
           <div class={styles.searchContainer}>
             <NScrollbar>
-            <div class={styles.sectionContainer}>
-              {state.list.map((item: any) => (
-                <div class={styles.sectionItem}>
-                  <div class={styles.img} style={{ marginLeft: 0 }}>
-                    <img referrerpolicy="no-referrer" src={item.titleImg} />
-                  </div>
-                  <div class={styles.infos}>
-                    <div
-                      class={styles.topName}
-                      v-html={item.musicNameReg}></div>
-                    <div class={styles.types}>
-                      <div class={styles.hot}>
-                        <span>{formatUsedNum(item.usedNum)}</span>
-                      </div>
-                      {item.audioPlayTypes?.includes('SING') && (
-                        <div class={styles.sing}>演唱</div>
-                      )}
-                      {item.audioPlayTypes?.includes('PLAY') && (
-                        <div class={styles.song}>演奏</div>
-                      )}
+              <div class={styles.sectionContainer}>
+                {state.list.map((item: any) => (
+                  <div
+                    class={styles.sectionItem}
+                    onClick={() => onDetail(item)}>
+                    <div class={styles.img} style={{ marginLeft: 0 }}>
+                      <img referrerpolicy="no-referrer" src={item.titleImg} />
+                    </div>
+                    <div class={styles.infos}>
+                      <div
+                        class={styles.topName}
+                        v-html={item.musicNameReg}></div>
+                      <div class={styles.types}>
+                        <div class={styles.hot}>
+                          <span>{formatUsedNum(item.usedNum)}</span>
+                        </div>
+                        {item.audioPlayTypes?.includes('SING') && (
+                          <div class={styles.sing}>演唱</div>
+                        )}
+                        {item.audioPlayTypes?.includes('PLAY') && (
+                          <div class={styles.song}>演奏</div>
+                        )}
 
-                      <div class={styles.author}>{item.composer}</div>
+                        <div class={styles.author}>{item.composer}</div>
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
-            </div>
-            <div
-              ref={spinRef}
-              class={[styles.loadingWrap, state.finshed && styles.showLoading]}>
-              <NSpin show={true}></NSpin>
-            </div>
+                ))}
+              </div>
+              <div
+                ref={spinRef}
+                class={[
+                  styles.loadingWrap,
+                  state.finshed && styles.showLoading
+                ]}>
+                <NSpin show={true}></NSpin>
+              </div>
             </NScrollbar>
 
             {!state.loading && state.list.length === 0 && (
@@ -244,150 +254,160 @@ export default defineComponent({
               <div class={styles.sectionTitle}>
                 <img src={recommendTitle} class={styles.imgTitle} />
 
-                <div class={styles.moreBtn} onClick={() => onMore("RECOMMEND")}>更多</div>
+                <div class={styles.moreBtn} onClick={() => onMore('RECOMMEND')}>
+                  更多
+                </div>
               </div>
 
-              <NScrollbar>
-                {state.RECOMMEND.map((item: any, index: number) => (
-                  <div
-                    class={styles.item}
-                    onClick={() => {
-                      onDetail(item)
-                    }}>
+              <NSpin show={state.detailLoading}>
+                <NScrollbar>
+                  {state.RECOMMEND.map((item: any, index: number) => (
                     <div
-                      class={[
-                        styles.num,
-                        index === 0 ? styles.num1 : '',
-                        index === 1 ? styles.num2 : '',
-                        index === 2 ? styles.num3 : ''
-                      ]}>
-                      {(index + 1).toString().padStart(2, '0')}
-                    </div>
-                    <div class={styles.img}>
-                      <img referrerpolicy="no-referrer" src={item.titleImg} />
-                    </div>
-                    <div class={styles.infos}>
-                      <div class={styles.topName}>
-                        <TheNoticeBar text={item.musicSheetName} />
+                      class={styles.item}
+                      onClick={() => {
+                        onDetail(item);
+                      }}>
+                      <div
+                        class={[
+                          styles.num,
+                          index === 0 ? styles.num1 : '',
+                          index === 1 ? styles.num2 : '',
+                          index === 2 ? styles.num3 : ''
+                        ]}>
+                        {(index + 1).toString().padStart(2, '0')}
                       </div>
-                      <div class={styles.types}>
-                        <div class={styles.hot}>
-                          <span>{formatUsedNum(item.usedNum)}</span>
+                      <div class={styles.img}>
+                        <img referrerpolicy="no-referrer" src={item.titleImg} />
+                      </div>
+                      <div class={styles.infos}>
+                        <div class={styles.topName}>
+                          <TheNoticeBar text={item.musicSheetName} />
                         </div>
-                        {item.audioPlayTypes?.includes('SING') && (
-                          <div class={styles.sing}>演唱</div>
-                        )}
-                        {item.audioPlayTypes?.includes('PLAY') && (
-                          <div class={styles.song}>演奏</div>
-                        )}
+                        <div class={styles.types}>
+                          <div class={styles.hot}>
+                            <span>{formatUsedNum(item.usedNum)}</span>
+                          </div>
+                          {item.audioPlayTypes?.includes('SING') && (
+                            <div class={styles.sing}>演唱</div>
+                          )}
+                          {item.audioPlayTypes?.includes('PLAY') && (
+                            <div class={styles.song}>演奏</div>
+                          )}
 
-                        <div class={styles.author}>{item.composer}</div>
+                          <div class={styles.author}>{item.composer}</div>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
-              </NScrollbar>
+                  ))}
+                </NScrollbar>
+              </NSpin>
             </div>
             <div class={[styles.section, styles.hotSection]}>
               <div class={styles.sectionTitle}>
                 <img src={hotTitle} class={styles.imgTitle} />
-                <div class={styles.moreBtn} onClick={() => onMore("HOT")}>更多</div>
+                <div class={styles.moreBtn} onClick={() => onMore('HOT')}>
+                  更多
+                </div>
               </div>
-
-              <NScrollbar>
-                {state.HOT.map((item: any, index: number) => (
-                  <div
-                    class={styles.item}
-                    onClick={() => {
-                      onDetail(item);
-                    }}>
+              <NSpin show={state.detailLoading}>
+                <NScrollbar>
+                  {state.HOT.map((item: any, index: number) => (
                     <div
-                      class={[
-                        styles.num,
-                        index === 0 ? styles.num1 : '',
-                        index === 1 ? styles.num2 : '',
-                        index === 2 ? styles.num3 : ''
-                      ]}>
-                      {(index + 1).toString().padStart(2, '0')}
-                    </div>
-                    <div class={styles.img}>
-                      <img referrerpolicy="no-referrer" src={item.titleImg} />
-                    </div>
-                    <div class={styles.infos}>
-                      <div class={styles.topName}>
-                        <TheNoticeBar text={item.musicSheetName} />
+                      class={styles.item}
+                      onClick={() => {
+                        onDetail(item);
+                      }}>
+                      <div
+                        class={[
+                          styles.num,
+                          index === 0 ? styles.num1 : '',
+                          index === 1 ? styles.num2 : '',
+                          index === 2 ? styles.num3 : ''
+                        ]}>
+                        {(index + 1).toString().padStart(2, '0')}
                       </div>
-                      <div class={styles.types}>
-                        <div class={styles.hot}>
-                          <span>{formatUsedNum(item.usedNum)}</span>
+                      <div class={styles.img}>
+                        <img referrerpolicy="no-referrer" src={item.titleImg} />
+                      </div>
+                      <div class={styles.infos}>
+                        <div class={styles.topName}>
+                          <TheNoticeBar text={item.musicSheetName} />
                         </div>
-                        {item.audioPlayTypes?.includes('SING') && (
-                          <div class={styles.sing}>演唱</div>
-                        )}
-                        {item.audioPlayTypes?.includes('PLAY') && (
-                          <div class={styles.song}>演奏</div>
-                        )}
+                        <div class={styles.types}>
+                          <div class={styles.hot}>
+                            <span>{formatUsedNum(item.usedNum)}</span>
+                          </div>
+                          {item.audioPlayTypes?.includes('SING') && (
+                            <div class={styles.sing}>演唱</div>
+                          )}
+                          {item.audioPlayTypes?.includes('PLAY') && (
+                            <div class={styles.song}>演奏</div>
+                          )}
 
-                        <div class={styles.author}>{item.composer}</div>
+                          <div class={styles.author}>{item.composer}</div>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
-              </NScrollbar>
+                  ))}
+                </NScrollbar>
+              </NSpin>
             </div>
             <div class={[styles.section, styles.newSection]}>
               <div class={styles.sectionTitle}>
                 <img src={newTitle} class={styles.imgTitle} />
 
-                <div class={styles.moreBtn} onClick={() => onMore("NEW")}>更多</div>
+                <div class={styles.moreBtn} onClick={() => onMore('NEW')}>
+                  更多
+                </div>
               </div>
-
-              <NScrollbar>
-                {state.NEW.map((item: any, index: number) => (
-                  <div
-                    class={styles.item}
-                    onClick={() => {
-                      onDetail(item)
-                    }}>
+              <NSpin show={state.detailLoading}>
+                <NScrollbar>
+                  {state.NEW.map((item: any, index: number) => (
                     <div
-                      class={[
-                        styles.num,
-                        index === 0 ? styles.num1 : '',
-                        index === 1 ? styles.num2 : '',
-                        index === 2 ? styles.num3 : ''
-                      ]}>
-                      {(index + 1).toString().padStart(2, '0')}
-                    </div>
-                    <div class={styles.img}>
-                      <img referrerpolicy="no-referrer" src={item.titleImg} />
-                    </div>
-                    <div class={styles.infos}>
-                      <div class={styles.topName}>
-                        <TheNoticeBar text={item.musicSheetName} />
+                      class={styles.item}
+                      onClick={() => {
+                        onDetail(item);
+                      }}>
+                      <div
+                        class={[
+                          styles.num,
+                          index === 0 ? styles.num1 : '',
+                          index === 1 ? styles.num2 : '',
+                          index === 2 ? styles.num3 : ''
+                        ]}>
+                        {(index + 1).toString().padStart(2, '0')}
                       </div>
-                      <div class={styles.types}>
-                        <div class={styles.hot}>
-                          <span>{formatUsedNum(item.usedNum)}</span>
+                      <div class={styles.img}>
+                        <img referrerpolicy="no-referrer" src={item.titleImg} />
+                      </div>
+                      <div class={styles.infos}>
+                        <div class={styles.topName}>
+                          <TheNoticeBar text={item.musicSheetName} />
                         </div>
-                        {item.audioPlayTypes?.includes('SING') && (
-                          <div class={styles.sing}>演唱</div>
-                        )}
-                        {item.audioPlayTypes?.includes('PLAY') && (
-                          <div class={styles.song}>演奏</div>
-                        )}
+                        <div class={styles.types}>
+                          <div class={styles.hot}>
+                            <span>{formatUsedNum(item.usedNum)}</span>
+                          </div>
+                          {item.audioPlayTypes?.includes('SING') && (
+                            <div class={styles.sing}>演唱</div>
+                          )}
+                          {item.audioPlayTypes?.includes('PLAY') && (
+                            <div class={styles.song}>演奏</div>
+                          )}
 
-                        <div class={styles.author}>{item.composer}</div>
+                          <div class={styles.author}>{item.composer}</div>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
-              </NScrollbar>
+                  ))}
+                </NScrollbar>
+              </NSpin>
             </div>
           </div>
         )}
 
-      {/* 应用内预览*/}
-      <PreviewWindow
+        {/* 应用内预览*/}
+        <PreviewWindow
           v-model:show={state.previewModal}
           type="music"
           params={state.previewParams}