修改样式

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

@@ -73,18 +73,18 @@
     :global {
       .n-button {
         padding: 0 24px;
-        font-size: max(16px, 13px) !important;
+        // 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;
+        // font-size: max(16px, 13px) !important;
         color: #000000;
       }
 
       .n-input__placeholder {
-        font-size: max(16px, 13px) !important;
+        // font-size: max(16px, 13px) !important;
       }
     }
   }
@@ -143,9 +143,9 @@
     }
 
     .n-form-item {
-      // .n-form-item-label {
-       
-      // }
+      .n-form-item-label,  .n-form-item-blank {
+        min-height: auto !important;
+      }
       .n-form-item-label__text {
         font-size: max(17px, 13Px);
         // cursor: pointer;
@@ -180,7 +180,7 @@
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
-    font-size: 17px;
+    font-size: max(17px, 12Px);
     color: rgba(0,0,0,0.6);
     cursor: pointer;
     background: url('./images/search-bg.png') no-repeat center;
@@ -368,6 +368,10 @@
   .loadingSection {
     min-height: calc(100vh - 64px - 64px - 56px - 80px);
   }
+  .loadingSectionEmpty {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .empty {
@@ -402,7 +406,7 @@
   background: #f7f8f9;
   cursor: pointer;
   transition: all .2s ease;
-  border: 2px solid #F4F4F4;
+  border: 2px solid #f7f8f9;
   box-sizing: border-box;
   &:hover {
     transform: scale(1.01);
@@ -457,6 +461,9 @@
         font-size: max(12px, 11px);
         color: #fe4343;
         padding: 0 5px;
+        line-height: 16Px;
+        display: flex;
+        align-items: center;
         &::before {
           content: '';
           display: inline-block;
@@ -476,6 +483,7 @@
         background: #ffffff;
         font-size: max(12px, 11Px);
         border-radius: 3px;
+        line-height: 16Px;
         padding: 0 4px;
         line-height: 1;
         display: flex;

src/views/xiaoku-list/detail.tsx

@@ -38,6 +38,7 @@ export default defineComponent({
       searchType: ''
     });
     const state = reactive({
+      countPage: 1,
       loading: true,
       finshed: false,
       reshing: false,
@@ -144,10 +145,16 @@ export default defineComponent({
       } as any;
       if (state.tabName === 'RECOMMEND') {
         params = Object.assign(params, state.recommendSearch);
+        params.rows = 60
+        params.page = 1
       } else if (state.tabName === 'HOT') {
         params = Object.assign(params, state.hotSearch);
+        params.rows = 60
+        params.page = 1
       } else if (state.tabName === 'NEW') {
         params = Object.assign(params, state.newSearch);
+        params.rows = 60
+        params.page = 1
       } else {
         params.name = state.allSearch.name;
         const { ...more } = state.allSearch;
@@ -181,6 +188,7 @@ export default defineComponent({
         });
         state.list = [...state.list, ...res.data.rows];
         state.finshed = forms.page >= res.data.pages;
+        state.countPage = res.data.pages
       } else {
         state.finshed = true;
       }
@@ -304,7 +312,10 @@ export default defineComponent({
                   styles.wrapListEmpty
               ]
             ]}
-            onScroll={(e: any) => {
+            onScroll={async (e: any) => {
+              if(state.tabName) {
+                return
+              }
               const clientHeight = e.target?.clientHeight;
               const scrollTop = e.target?.scrollTop;
               const scrollHeight = e.target?.scrollHeight;
@@ -314,14 +325,15 @@ export default defineComponent({
                 !state.finshed &&
                 !state.loading
               ) {
+                if(forms.page >= state.countPage) return
                 forms.page = forms.page + 1;
-                getList();
+                await getList();
               }
             }}
             >
             {/* , state.tabName ? styles.searchSectionHide : '' */}
             <NSpin show={state.loading}>
-            <div class={styles.loadingSection}>
+            <div class={[styles.loadingSection, !state.loading && state.list.length === 0 && styles.loadingSectionEmpty]}>
             <div class={[styles.searchSection]}>
               <SearchGroupResources
                 type={state.tabName}

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

@@ -23,13 +23,13 @@
 }
 
 .topTitle {
-  padding: 30px 60px 24px;
+  padding: 32px 60px 30px;
   font-size: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   img {
-    height: 50px;
+    height: 43px;
   }
 
   .moreMusic {
@@ -39,7 +39,7 @@
     background: rgba(255, 255, 255, 0.7);
     border-radius: 22px;
     font-weight: 600;
-    font-size: 18px;
+    font-size: max(18px, 13Px);
     color: #131415;
     display: flex;
     align-items: center;
@@ -68,30 +68,33 @@
   .searchInput {
     width: 480px;
     --n-border: #fff !important;
+    
     :global {
       .n-button {
         padding: 0 24px;
-        font-size: max(16px, 13px) !important;
+        // 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;
+        // font-size: max(16px, 13px) !important;
         color: #000000;
       }
 
       .n-input__placeholder {
-        font-size: max(16px, 13px) !important;
+        // font-size: max(16px, 13px) !important;
       }
-
     }
+
+    
   }
 
   .textBtn {
     background-color: rgba(255, 255, 255, 0.7);
     --n-border: none !important;
     --n-text-color-focus: rgb(51, 54, 57) !important;
+    
     .iconArrow {
       display: inline-block;
       margin-left: 8px;
@@ -143,12 +146,13 @@
       .n-button {
         min-width: 102px;
         height: 37px;
+        font-weight: bold !important;
         padding: 0 24px;
-        font-size: max(18px, 13px);
+        font-size: max(18px, 13Px);
       }
 
       .n-button--primary-type {
-        font-weight: 500 !important;
+        font-weight: 600 !important;
       }
     }
   }
@@ -183,14 +187,14 @@
       align-items: center;
       justify-content: space-between;
       .imgTitle {
-        height: 45px;
+        height: 42px;
       }
       .moreBtn {
         border-radius: 20px;
         font-weight: 600;
         font-size: 18px;
         color: #131415;
-        padding: 8px 20px;
+        padding: 9px 20px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -319,6 +323,9 @@
         font-size: max(12px, 11Px);
         color: #fe4343;
         padding: 0 5px;
+        line-height: 16Px;
+        display: flex;
+        align-items: center;
         &::before {
           content: '';
           display: inline-block;
@@ -327,17 +334,17 @@
           background: url('./images/icon-fire.png') no-repeat center;
           background-size: contain;
           margin-right: 3px;
-          vertical-align: middle;
         }
         span {
           // line-height: 1;
-          vertical-align: text-top;
+          // vertical-align: text-bottom;
         }
       }
       .sing,
       .song {
         background: #ffffff;
         font-size: max(12px, 11Px);
+        line-height: 16Px;
         border-radius: 3px;
         padding: 0 4px;
         display: flex;
@@ -420,7 +427,7 @@
   cursor: pointer;
   box-sizing: border-box;
   transition: all .2s ease;
-  border: 2px solid #F4F4F4;
+  border: 2px solid #fff;
   box-sizing: border-box;
   &:hover {
     transform: scale(1.01);

src/views/xiaoku-list/index.tsx

@@ -79,7 +79,7 @@ export default defineComponent({
       state.detailLoading = true;
       try {
         const { data } = await api_musicSheetQueryByTag({
-          rows: 48,
+          rows: 20,
           musicalInstrumentId: state.instrumentId
         });
         state.RECOMMEND = data.RECOMMEND || [];
@@ -324,7 +324,7 @@ export default defineComponent({
                   ? styles.emptyScrollBar
                   : ''
               }
-              onScroll={(e: any) => {
+              onScroll={async (e: any) => {
                 const clientHeight = e.target?.clientHeight;
                 const scrollTop = e.target?.scrollTop;
                 const scrollHeight = e.target?.scrollHeight;
@@ -335,7 +335,7 @@ export default defineComponent({
                   !state.loading
                 ) {
                   state.page = state.page + 1;
-                  getList();
+                  await getList();
                 }
               }}>
               <NSpin show={state.loading}>