修改样式

src/components/layout/layoutTop.tsx

@@ -208,6 +208,7 @@ export default defineComponent({
         '/xiaoku-ai',
         '/xiaoku-list',
         '/studentDetail',
+        '/xiaoku-detail',
         '/classStudentRecode',
         '/afterWorkDetail'
       ];

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

@@ -474,7 +474,7 @@
       .sing,
       .song {
         background: #ffffff;
-        font-size: max(12px, 11px);
+        font-size: max(12px, 11Px);
         border-radius: 3px;
         padding: 0 4px;
         line-height: 1;
@@ -491,7 +491,10 @@
       }
       .author {
         color: #777777;
-        font-size: max(14px, 12px);
+        font-size: max(14px, 12Px);
+        display: flex;
+        align-items: center;
+        line-height: 1;
       }
     }
   }

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

@@ -84,12 +84,14 @@
       .n-input__placeholder {
         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;
@@ -102,6 +104,12 @@
       fill: #8B8D98;
     }
 
+    &:active, &:focus {
+      background-color: rgba(255, 255, 255, 0.7);
+      --n-border: none !important;
+      --n-border-pressed: none !important;
+    }
+
     &:hover,
     &.textBtnActive {
       transition-duration: 0s !important;
@@ -118,6 +126,13 @@
         margin-top: 0;
       }
     }
+
+      :global {
+        .n-button__state-border {
+          border: none !important;
+        }
+      }
+    
   }
   .tags {
     :global {
@@ -338,7 +353,10 @@
       }
       .author {
         color: #777777;
-        font-size: max(14px, 12px);
+        font-size: max(14px, 12Px);
+        display: flex;
+        align-items: center;
+        line-height: 1;
       }
     }
   }
@@ -382,9 +400,12 @@
 
 .sectionContainer {
   padding: 0 48px;
-  display: flex;
-  flex-wrap: wrap;
   min-height: calc(100vh - 64px - 160px - 40px);
+  & > div  {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 2px;
+  }
 }
 
 .sectionItem {

src/views/xiaoku-list/index.tsx

@@ -95,7 +95,6 @@ export default defineComponent({
       const obj: any = {};
       item?.forEach((child: any) => {
         if (child.id === data.tagIndex) {
-          console.log(child, '1212');
           obj.selected = true;
           obj.name = child.name;
         }
@@ -172,6 +171,10 @@ export default defineComponent({
         userStore.getToken
       }&musicRenderType=${lineType}&showGuide=true&part-index=${0}`;
 
+      if (state.instrumentId) {
+        src += '&instrumentId=' + state.instrumentId;
+      }
+
       if (window.matchMedia('(display-mode: standalone)').matches) {
         baseState.application = window.matchMedia(
           '(display-mode: standalone)'
@@ -205,9 +208,26 @@ export default defineComponent({
       });
     };
 
+    /** 默认选中第一个声部 */
+    const formatFirstSubject = () => {
+      const tempSubjects = catchStore.getSubjectInstrumentOnly;
+      if (tempSubjects.length > 0) {
+        const firstSubject = tempSubjects[0];
+        if (firstSubject.instruments && firstSubject.instruments.length > 1) {
+          data.tagIndex = firstSubject.instruments[0]?.value;
+          state.instrumentId = firstSubject.instruments[0]?.value;
+        } else {
+          data.tagIndex = firstSubject.instruments[0]?.value;
+          state.instrumentId = firstSubject.value;
+        }
+      }
+    };
+
     onMounted(async () => {
       // 获取教材分类列表
       await catchStore.getSubjects();
+      formatFirstSubject();
+
       getDetail();
 
       window.addEventListener('message', iframeHandle);
@@ -229,7 +249,7 @@ export default defineComponent({
         <div class={styles.searchSection}>
           <NFormItem class={styles.tags} showLabel={false}>
             <NSpace size={[12, 20]}>
-              {catchStore.getSubjectInstruments.map((item: any) =>
+              {catchStore.getSubjectInstrumentOnly.map((item: any) =>
                 item.instruments && item.instruments.length > 1 ? (
                   <NPopselect
                     options={item.instruments}
@@ -262,7 +282,7 @@ export default defineComponent({
                     round
                     class={[
                       styles.textBtn,
-                      data.tagIndex === (item.value || 0) &&
+                      state.instrumentId === (item.value || 0) &&
                         styles.textBtnActive
                     ]}
                     onClick={() => {
@@ -303,7 +323,7 @@ export default defineComponent({
                 !state.loading && state.list.length === 0
                   ? styles.emptyScrollBar
                   : ''
-              } 
+              }
               onScroll={(e: any) => {
                 const clientHeight = e.target?.clientHeight;
                 const scrollTop = e.target?.scrollTop;
@@ -319,35 +339,40 @@ export default defineComponent({
                 }
               }}>
               <NSpin show={state.loading}>
-              <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.sectionContainer}>
+                  <div>
+                    {state.list.map((item: any) => (
                       <div
-                        class={styles.topName}
-                        v-html={item.musicNameReg}></div>
-                      <div class={styles.types}>
-                        <div class={styles.hot}>
-                          <span>{formatUsedNum(item.usedNum)}</span>
+                        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>
                         </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>
-                    </div>
+                    ))}
                   </div>
-                ))}
-              </div>
+                </div>
               </NSpin>
               {/* <div
                 // ref={spinRef}