修改样式

src/tenant/music/train-tool/index.module.less

@@ -155,6 +155,10 @@
     .van-button--plain.van-button--primary {
       background-color: transparent;
     }
+
+    .van-sticky--fixed .van-tabs {
+      background-color: #fff;
+    }
   }
 
   .alumnList {

src/tenant/music/train-tool/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, onMounted, reactive, ref } from 'vue'
-import { Image, Tabs, Tab, List, Button, Popup, Dialog } from 'vant'
+import { Image, Tabs, Tab, List, Button, Popup, Dialog, Sticky } from 'vant'
 import styles from './index.module.less'
 import TheSticky from '@/components/the-sticky'
 import ColHeader from '@/components/col-header'
@@ -78,7 +78,8 @@ export default defineComponent({
       musicCounts: false,
       subjectCounts: false,
       tenantAlbumStatus: 0 as any,
-      ablumStatus: false
+      ablumStatus: false,
+      heightV: 0
     })
     const params = reactive({
       page: 1,
@@ -287,7 +288,13 @@ export default defineComponent({
         {(state.tenantAlbumStatus === 0 || !state.ablumStatus) &&
         state.buy != '1' ? (
           <>
-            <TheSticky position="top">
+            <TheSticky
+              position="top"
+              onBarHeight={(height: any) => {
+                console.log(height, 'height', height)
+                state.heightV = height
+              }}
+            >
               <ColHeader border={false} isFixed={false} />
             </TheSticky>
             {!state.loading && (
@@ -308,7 +315,13 @@ export default defineComponent({
           </>
         ) : (
           <>
-            <TheSticky position="top">
+            <TheSticky
+              position="top"
+              onBarHeight={(height: any) => {
+                console.log(height, 'height', height)
+                state.heightV = height
+              }}
+            >
               <ColHeader
                 background={background.value}
                 border={false}
@@ -363,28 +376,32 @@ export default defineComponent({
             </div>
 
             <div class={styles.musicList}>
-              <Tabs
-                color="var(--van-primary)"
-                background="transparent"
-                lineWidth={20}
-                shrink
-                v-model:active={state.activeTab}
-                onChange={val => {
-                  state.activeTab = val
+              <Sticky position="top" offsetTop={state.heightV}>
+                <Tabs
+                  color="var(--van-primary)"
+                  background="transparent"
+                  lineWidth={20}
+                  shrink
+                  v-model:active={state.activeTab}
+                  onChange={val => {
+                    state.activeTab = val
 
-                  params.page = 1
-                  state.list = []
-                  FetchList()
-                }}
-              >
-                {state.subjectCounts && (
-                  <Tab title="声部练习" name="SUBJECT"></Tab>
-                )}
-                {state.musicCounts && <Tab title="独奏曲目" name="MUSIC"></Tab>}
-                {state.ensembleCounts && (
-                  <Tab title="合奏练习" name="ENSEMBLE"></Tab>
-                )}
-              </Tabs>
+                    params.page = 1
+                    state.list = []
+                    FetchList()
+                  }}
+                >
+                  {state.subjectCounts && (
+                    <Tab title="声部练习" name="SUBJECT"></Tab>
+                  )}
+                  {state.musicCounts && (
+                    <Tab title="独奏曲目" name="MUSIC"></Tab>
+                  )}
+                  {state.ensembleCounts && (
+                    <Tab title="合奏练习" name="ENSEMBLE"></Tab>
+                  )}
+                </Tabs>
+              </Sticky>
 
               <div class={styles.alumnList}>
                 <List