优化

src/views/down/index.tsx

@@ -44,7 +44,7 @@ export default defineComponent({
             <Button round type="primary" onClick={() => onDownload('teacher')}>下载老师端APP</Button>
           </div>
         </div>
-        <TheFooterApp />
+        {/* <TheFooterApp /> */}
         <TheDown ref={downRef} />
       </div>
     );

src/views/home/index.tsx

@@ -14,7 +14,7 @@ export default defineComponent({
         <Banner />
         <HotAlbum />
         <BoutiqueClass />
-        <TheFooterApp />
+        {/* <TheFooterApp /> */}
       </div>
     );
   },

src/views/index/index.module.less

@@ -3,13 +3,14 @@
     position: sticky;
     top: 0;
     z-index: 100;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
+    
   }
 }
 .tabs {
   :global {
     .van-tabs__wrap {
       height: 40px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
     }
     .van-tabs__nav {
       padding-bottom: 10px;

src/views/index/index.tsx

@@ -1,7 +1,12 @@
-import { Button, Sticky, Tab, Tabs } from "vant";
+import TheFooterApp from "@/components/TheFooterApp";
+import { Button, Sticky, Swipe, SwipeItem, Tab, Tabs } from "vant";
 import { defineComponent, KeepAlive, ref, watch } from "vue";
 import { RouterView, useRoute } from "vue-router";
 import TheHeader from "../../components/TheHeader";
+import Down from "../down";
+import Home from "../home";
+import Music from "../music";
+import Video from "../video";
 import styles from "./index.module.less";
 
 export default defineComponent({
@@ -9,26 +14,38 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const active = ref(route.name as string);
-    watch(route, () => [
-      active.value = route.name as string
-    ])
+    watch(route, () => [(active.value = route.name as string)]);
     return () => (
       <div class={styles.layout}>
         <div class={styles.sticky}>
           <TheHeader />
-          <Tabs
-            class={styles.tabs}
-            active={active.value}
-            color="var(--van-primary-color)"
-            line-width="26px"
-          >
-            <Tab to="/" title="首页" name="home"></Tab>
-            <Tab to="/music" title="谱库" name="music"></Tab>
-            <Tab to="/video" title="视频" name="video"></Tab>
-            <Tab to="/down" title="下载" name="down"></Tab>
-          </Tabs>
         </div>
-        <RouterView
+        <Tabs
+          class={styles.tabs}
+          active={active.value}
+          color="var(--van-primary-color)"
+          line-width="26px"
+          swipeable
+          animated
+          sticky
+          offset-top="1.46667rem"
+        >
+          <Tab to="/" title="首页" name="home">
+            <Home />
+          </Tab>
+          <Tab to="/music" title="谱库" name="music">
+            <Music />
+          </Tab>
+          <Tab to="/video" title="视频" name="video">
+            <Video />
+          </Tab>
+          <Tab to="/down" title="下载" name="down">
+            <Down />
+          </Tab>
+        </Tabs>
+
+        <TheFooterApp />
+        {/* <RouterView
           v-slots={{
             default: ({ Component }: any) => {
               return (
@@ -38,7 +55,7 @@ export default defineComponent({
               );
             },
           }}
-        ></RouterView>
+        ></RouterView> */}
       </div>
     );
   },

src/views/music/index.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
           <HotAlbum />
         </div>
         <HotMusic />
-        <TheFooterApp />
+        {/* <TheFooterApp /> */}
       </div>
     );
   },

src/views/musicDetail/index.module.less

@@ -114,6 +114,9 @@
     background-color: #fff;
     min-height: 100px;
   }
+  .alumnList.emtry{
+    padding-top: 12px;
+  }
   .tag {
     position: absolute;
     top: 16px;

src/views/musicDetail/index.tsx

@@ -13,7 +13,7 @@ import "plyr/dist/plyr.css";
 import TheFooterApp from "@/components/TheFooterApp";
 import oStart from "@/assets/icon-xinxin.png";
 import printIcon from "@/assets/printIcon.png";
-import IconRect from '@/assets/icon-rect.png'
+import IconRect from "@/assets/icon-rect.png";
 import Iconmusicdetail from "@/assets/icon-music-detail.png";
 import TheDown from "@/components/TheDown";
 
@@ -93,12 +93,12 @@ export default defineComponent({
       },
       VIP: {
         color: "#CD863E",
-        bgColor: '#FFE1C2',
+        bgColor: "#FFE1C2",
         text: "会员",
       },
       CHARGE: {
         color: "#3591CE",
-        bgColor: '#C7E9FF',
+        bgColor: "#C7E9FF",
         text: "点播",
       },
     };
@@ -150,14 +150,22 @@ export default defineComponent({
         </div>
 
         <div class={styles.alumnContainer}>
-          <div class={styles.alumnList}>
-            <div
-              class={styles.tag}
-              style={{ color: colors[state.chargeType]?.color, backgroundColor: colors[state.chargeType]?.bgColor }}
-            >
-              {colors[state.chargeType]?.text}
-            </div>
-            <audio id="musicAudio" src={mp3.audioFileUrl} />
+          <div class={[styles.alumnList, !mp3.audioFileUrl && styles.emtry]}>
+            {mp3.audioFileUrl && (
+              <>
+                <div
+                  class={styles.tag}
+                  style={{
+                    color: colors[state.chargeType]?.color,
+                    backgroundColor: colors[state.chargeType]?.bgColor,
+                  }}
+                >
+                  {colors[state.chargeType]?.text}
+                </div>
+                <audio id="musicAudio" src={mp3.audioFileUrl} />
+              </>
+            )}
+
             <div class={styles.iframe}>
               <div class={styles.sheetName}>{state.musicSheetName}</div>
               <iframe id="musicIframe" src={mp3.iframe}></iframe>

src/views/video/index.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
             }
           />
         </List>
-        <TheFooterApp />
+        {/* <TheFooterApp /> */}
       </div>
     );
   },