提交一下

1

src/components/col-header/index.css

@@ -4,7 +4,9 @@
   /* @apply bg-black/[.2] */
   background: rgba(0, 0, 0, 0.2);
 }
-
+.wall {
+  height: 70px;
+}
 .logoWrap {
   margin-left: 80px;
   margin-right:55px;
@@ -65,6 +67,9 @@
   height: 70px;
   line-height: 70px;
 }
+.isdark.headerSection {
+  background-color: #383838!important;
+}
 .rightWrap {
   margin-right: 130px;
 }

src/components/col-header/index.tsx

@@ -18,7 +18,8 @@ export default defineComponent({
         { name: '下载', href: '/downLoad', current: false }
       ],
       navPath: ['', '/musicLibrary', '', '', '/downLoad'],
-      isTop: false
+      isTop: false,
+      isdark:false
     }
   },
   mounted() {
@@ -26,14 +27,19 @@ export default defineComponent({
       //函数体
       let scrollTop =
         document.documentElement.scrollTop | document.body.scrollTop
-      scrollTop > 0 ? (this.isTop = true) : (this.isTop = false)
+      scrollTop > 70 ? (this.isTop = true) : (this.isTop = false)
     })
   },
   watch: {
     $route(res: any) {
       this.navigator.forEach((item: any) => {
-        if (item.href === res.path) {
+        item.current = false
+      })
+      this.navigator.forEach((item: any) => {
+        if (item.href === res.meta.highlightPath) {
           item.current = true
+          this.isdark = !!res.meta.isdark
+           console.log(this.isdark)
         }
       })
     }
@@ -43,8 +49,9 @@ export default defineComponent({
       <>
         {/* <div class="wall h-[70px]"></div> */}
         <div
-          class={['headerSection backdrop-blur-sm', this.isTop ? '' : 'top']}
+          class={['headerSection backdrop-blur-sm', this.isTop ? '' : 'top',this.isdark?'isdark':'']}
         >
+
           <div class="flex items-center h-full">
             <div class="logoWrap">
               <img class="w-full" src={logo} alt="" />
@@ -52,12 +59,12 @@ export default defineComponent({
             <div class="flex">
               {this.navigator.map((item: any) => (
                 <div
-                  onClick={() => {
-                    this.navigator.forEach((item: any) => {
-                      item.current = false
-                    })
-                    item.current = true
-                  }}
+                  // onClick={() => {
+                  //   this.navigator.forEach((item: any) => {
+                  //     item.current = false
+                  //   })
+                  //   item.current = true
+                  // }}
                 >
                   <RouterLink
                     to={item.href}
@@ -84,6 +91,8 @@ export default defineComponent({
             </ElButton>
           </div>
         </div>
+        {this.isTop?<div class="wall"></div>:''}
+
       </>
     )
   }

src/components/musicLIstItem/index.tsx

@@ -34,7 +34,6 @@ export default defineComponent({
   },
   setup(props: any) {
     const item = props.item
-    console.log(item)
     return () => (
       <div
         onClick={() => {

src/router/routes-admin.ts

@@ -7,19 +7,31 @@
 export default [
   {
     path: '/',
-    component: () => import('@/views/home/index')
+    component: () => import('@/views/home/index'),
+    meta: {
+      title: '首页',
+      highlightPath: '/home',
+      isdark:false
+    }
   },
   {
     path: '/home',
     name: 'home',
-    component: () => import('@/views/home/index')
+    component: () => import('@/views/home/index'),
+    meta: {
+      title: '首页',
+      highlightPath: '/home',
+      isdark:false
+    }
   },
   {
     path: '/downLoad',
     name: 'downLoad',
     component: () => import('@/views/downLoad/index'),
     meta: {
-      title: '下载'
+      title: '下载',
+      highlightPath: '/downLoad',
+      isdark:true
     }
   },
   {
@@ -28,7 +40,9 @@ export default [
     component: () => import('@/views/musicLibrary/index'),
     meta: {
       title: '谱库',
-      index: 2
+      highlightPath: '/musicLibrary',
+      index: 2,
+      isdark:false
     }
   },
   {
@@ -37,7 +51,9 @@ export default [
     component: () => import('@/views/musicLibrary/searchdetail'),
     meta: {
       title: '搜索',
-      index: 3
+      index: 3,
+      highlightPath: '/musicLibrary',
+      isdark:true
     }
   },
   {
@@ -46,7 +62,9 @@ export default [
     component: () => import('@/views/albumDetail'),
     meta: {
       title: '专辑详情',
-      index: 3
+      index: 3,
+      highlightPath: '/musicLibrary',
+      isdark:true
     }
   },
   {
@@ -55,7 +73,9 @@ export default [
     component: () => import('@/views/videoDetailList'),
     meta: {
       title: '视频课',
-      index: 3
+      index: 3,
+      highlightPath: '/videoDetailList',
+      isdark:true
     }
   },
   {
@@ -64,18 +84,21 @@ export default [
     component: () => import('@/views/videoDetailList/videoDetail'),
     meta: {
       title: '视频课详情',
-      index: 3
+      index: 3,
+      highlightPath: '/videoDetailList',
+      isdark:true
     }
   },
   //
 
-
   {
     path: '/teacherAuth',
     name: 'teacherAuth',
     component: () => import('@/views/role-auth/teacherAuth'),
     meta: {
-      title: '老师认证'
+      title: '老师认证',
+      isdark:true
+
     }
   },
   {
@@ -83,7 +106,9 @@ export default [
     name: 'musicAuth',
     component: () => import('@/views/role-auth/musicAuth'),
     meta: {
-      title: '音乐人认证'
+      title: '音乐人认证',
+      isdark:true
+
     }
   },
   {
@@ -96,13 +121,15 @@ export default [
         path: '/userInfo/practiceSetting',
         name: 'userInfoPracticeSetting',
         component: () => import('@/views/user-info/practice-setting'),
-        meta: { title: '陪练课', index: 2 }
+        meta: { title: '陪练课', index: 2,       isdark:true
+      }
       },
       {
         path: '/userInfo/liveClass',
         name: 'userInfoLiveClass',
         component: () => import('@/views/user-info/live-class'),
-        meta: { title: '直播课', index: 3 }
+        meta: { title: '直播课', index: 3 ,       isdark:true
+      }
       },
       {
         path: '/userInfo/liveOperation',
@@ -112,14 +139,17 @@ export default [
           title: '直播课',
           index: 4,
           hidden: true,
-          activeMenu: 'userInfoLiveClass'
+          activeMenu: 'userInfoLiveClass',
+          isdark:true
+
         }
       },
       {
         path: '/userInfo/videoClass',
         name: 'userInfoVideoClass',
         component: () => import('@/views/user-info/video-class'),
-        meta: { title: '视频课', index: 4 }
+        meta: { title: '视频课', index: 4,       isdark:true
+      }
       },
       {
         path: '/userInfo/videoOperation',
@@ -129,14 +159,17 @@ export default [
           title: '视频课',
           index: 4,
           hidden: true,
-          activeMenu: 'userInfoVideoClass'
+          activeMenu: 'userInfoVideoClass',
+          isdark:true
+
         }
       },
       {
         path: '/userInfo/musicClass',
         name: 'userInfoMusicClass',
         component: () => import('@/views/user-info/music-class'),
-        meta: { title: '我的曲谱', index: 5 }
+        meta: { title: '我的曲谱', index: 5,      isdark:true
+      }
       },
       {
         path: '/userInfo/musicOperation',
@@ -146,7 +179,9 @@ export default [
           title: '视频课',
           index: 4,
           hidden: true,
-          activeMenu: 'userInfoMusicClass'
+          activeMenu: 'userInfoMusicClass',
+          isdark:true
+
         }
       }
     ]
@@ -161,13 +196,15 @@ export default [
         path: '/studentInfo/myScore',
         name: 'studentInfoMyScore',
         component: () => import('@/views/student-info/my-score'),
-        meta: { title: '我的曲谱', index: 5 }
+        meta: { title: '我的曲谱', index: 5,       isdark:true
+      }
       },
       {
         path: '/studentInfo/myFollow',
         name: 'studentInfoMyFollow',
         component: () => import('@/views/student-info/my-follow'),
-        meta: { title: '我关注的老师', index: 5, hidden: true }
+        meta: { title: '我关注的老师', index: 5, hidden: true,       isdark:true
+      }
       }
     ]
   }