更新

src/components/m-header/index.module.less

@@ -1,3 +1,7 @@
+:root:root {
+  --sticky-header-height: 56px;
+}
+
 .headerSection {
   position: relative;
   height: 56px;

src/views/colexiu-person/index.tsx

@@ -58,7 +58,7 @@ export default defineComponent({
 
       let urlIos = '';
       let urlAndroid = '';
-      if (location.origin.indexOf('online.colexiu.com') <= -1) {
+      if (location.origin.indexOf('online.colexiu.com') > -1) {
         if (type === 'student') {
           urlIos = 'https://itunes.apple.com/cn/app/id1626971695?mt=8';
           urlAndroid = studentAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-student-domain.apk'

src/views/colexiu-tenant/index.tsx

@@ -60,9 +60,7 @@ export default defineComponent({
               <span>解决音乐课堂数字化问题</span>
             </div>
             <div class={styles.content}>
-              利用小酷AI的合奏曲谱将总谱分给各个声部的演奏者，让
-              他们单独练习自己的部分。练习过程统一各声部的练习进
-              度和标准；以便后续在合排的基础上，对曲目进行细化练 习.
+              利用小酷AI的合奏曲谱将总谱分给各个声部的演奏者，让他们单独练习自己的部分。练习过程统一各声部的练习进度和标准；以便后续在合排的基础上，对曲目进行细化练习.
             </div>
           </div>
 
@@ -87,7 +85,7 @@ export default defineComponent({
           <div class={[styles.section3, styles.sectionBg]}>
             <img class="w100" src={img22} />
             <div class={styles.content}>
-              同时，注意乐团的整体平衡，确保各个声部之间协调-致；在细化练习的基础上，让乐团从起始点到结束连续演奏整个曲目。在合排过程中，团员需要掌握曲目中的难点，提高演奏的流畅性。
+              同时，注意乐团的整体平衡，确保各个声部之间协调一致；在细化练习的基础上，让乐团从起始点到结束连续演奏整个曲目。在合排过程中，团员需要掌握曲目中的难点，提高演奏的流畅性。
             </div>
           </div>
           <div class={[styles.section4, styles.sectionBg]}>

src/views/home/index.module.less

@@ -13,6 +13,10 @@
 
 .tabs {
   :global {
+    .van-sticky--fixed {
+      top: var(--sticky-header-height) !important;
+    }
+
     .van-tabs__nav--line {
       padding-bottom: 0;
       display: flex;

src/views/home/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import MHeader from '@/components/m-header';
 import MFooter from '@/components/m-footer';
@@ -10,6 +10,7 @@ import PianoRoom from './piano-room';
 import MusicRoom from './music-room';
 import CoTenant from './co-tenant';
 import CoPerson from './co-person';
+import { useScroll } from '@vueuse/core';
 
 export default defineComponent({
   name: 'home-page',
@@ -18,8 +19,11 @@ export default defineComponent({
       activeTab: 1,
       banner: aiBanner
     });
+    const homeRef = ref<HTMLElement | null>(null);
+    // const { x, y, isScrolling, arrivedState, directions } = useScroll(homeRef);
+
     return () => (
-      <div class={styles.home}>
+      <div class={styles.home} ref={homeRef}>
         <MHeader />
 
         <div class={styles.banner}>
@@ -32,6 +36,8 @@ export default defineComponent({
           class={styles.tabs}
           lineHeight={0}
           shrink
+          // sticky
+          // swipeable
           onUpdate:active={(val: number) => {
             if (val === 1) {
               state.banner = aiBanner;
@@ -48,7 +54,7 @@ export default defineComponent({
                 'https://oss.dayaedu.com/klx/1699439359542banner.png';
             }
           }}>
-          <Tab title=" 小酷Ai " name={1}>
+          <Tab title={'小酷Ai' + y.value} name={1}>
             <CoAi />
           </Tab>
           <Tab title="云酷琴房" name={2}>