提交一下

1

src/components/albumItem/index.module.less

@@ -5,6 +5,8 @@
   }
   margin-bottom: 28px;
   margin-right: 26px;
+  border-radius: 4px;
+  overflow: hidden;
   h2 {
     line-height: 30px;
     font-size: 22px;

src/components/banner/index.module.less

@@ -3,9 +3,17 @@
   /deep/.swiper-slide {
     min-height: 300px;
   }
+  cursor: pointer;
 }
-
 :global {
+  .mySwiper {
+    &:hover {
+      .myprev,
+      .mynext {
+        visibility: visible!important;
+      }
+    }
+  }
   .myprev,
   .mynext {
     width: 40px;
@@ -23,11 +31,19 @@
     align-items: center;
     justify-content: center;
     color: var(--swiper-navigation-color, var(--swiper-theme-color));
+    img {
+      width: 20px;
+      height: 20px;
+    }
+    visibility: hidden;
   }
   .myprev {
     left: 130px;
   }
   .mynext {
     right: 130px;
+    img {
+      transform: rotate(180deg);
+    }
   }
 }

src/components/banner/index.tsx

@@ -3,8 +3,9 @@ import classes from './index.module.less'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
 import request from '@/helpers/request'
+import bannerArray from './images/bannerArray.png'
 export default defineComponent({
-  name: 'tagItem',
+  name: 'banner',
   props: {
     title: {
       type: String,
@@ -47,7 +48,7 @@ export default defineComponent({
       <>
         <swiper
           modules={state.modules}
-          class={classes.mySwiper}
+          class={[classes.mySwiper,'mySwiper']}
           slides-per-view={1}
           space-between={50}
           pagination={{ clickable: true }}
@@ -67,8 +68,8 @@ export default defineComponent({
 
 
 
-          <div class="myprev"></div>
-          <div class="mynext"></div>
+          <div class="myprev"><img src={bannerArray} alt="" /></div>
+          <div class="mynext"><img src={bannerArray} alt="" /></div>
         </swiper>
       </>
     )

src/components/col-header/index.css

@@ -1,18 +1,17 @@
-.el-menu-item {
-  @apply my-0 mx-4 px-0 !important;
-}
+.el-menu-item {}
 
 .topNav {
-  @apply bg-black/[.2]
-  /* background: rgba(0, 0, 0, 0.2); */
+  /* @apply bg-black/[.2] */
+  background: rgba(0, 0, 0, 0.2);
 }
 
 .logoWrap {
-  @apply w-28
+  margin-left: 80px;
+  margin-right:55px;
+  width: 113px;
+  height: 26px;
 }
 
-.navWrap {}
-
 .normalItem {
   color: #fff;
 }
@@ -25,7 +24,7 @@
 .activeItem::after {
   position: absolute;
   content: "";
-  top: 95%;
+  top: 42px;
   left: 25%;
   width: 50%;
   height: 3px;
@@ -35,11 +34,44 @@
   transition: all 0.5s;
   transform-origin: left;
 }
+
 .activeItem:hover::after {
   transform: scaleX(1);
 }
 
 .itemCenter {
   position: relative;
-  @apply text-lg h-full flex items-center box-border
+  margin-right: 74px;
+  line-height: 70px;
+}
+
+.navWrap {
+  position: fixed;
+  width: 100%;
+  top: 0px;
+  z-index: 1200;
+}
+
+.headerSection {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #383838;
+  position: fixed;
+  width: 100%;
+  top: 0px;
+  z-index: 1200;
+  height: 70px;
+  line-height: 70px;
+}
+.rightWrap {
+  margin-right: 130px;
+}
+.top {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+.top.header-container {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }

src/components/col-header/index.tsx

@@ -17,9 +17,18 @@ export default defineComponent({
         { name: '社区', href: '#', current: false },
         { name: '下载', href: '/downLoad', current: false }
       ],
-      navPath: ['', '/musicLibrary', '', '', '/downLoad']
+      navPath: ['', '/musicLibrary', '', '', '/downLoad'],
+      isTop:false
     }
   },
+  mounted() {
+    window.addEventListener("scroll", (e) => {
+      //函数体
+      let scrollTop =
+        document.documentElement.scrollTop | document.body.scrollTop;
+      scrollTop > 0 ? (this.isTop = true) : (this.isTop = false);
+    });
+  },
   watch: {
     $route(res: any) {
       this.navigator.forEach((item: any) => {
@@ -31,13 +40,13 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class="topNav">
-        <div class="mx-52 flex justify-between items-center h-[70px]">
+      <div class={["headerSection",this.isTop?'':'top']} >
+
           <div class="flex items-center h-full">
             <div class="logoWrap">
               <img class="w-full" src={logo} alt="" />
             </div>
-            <div class="flex space-x-[76px] md:space-x-16 ml-28 sm:ml-20 h-full navWrap">
+            <div class="flex">
               {this.navigator.map((item: any) => (
                 <div
                   onClick={() => {
@@ -60,7 +69,7 @@ export default defineComponent({
               ))}
             </div>
           </div>
-          <div>
+          <div class={'rightWrap'}>
             <ElButton
               type="primary"
               round
@@ -72,7 +81,6 @@ export default defineComponent({
             </ElButton>
           </div>
         </div>
-      </div>
     )
   }
 })

src/views/musicLibrary/index.tsx

@@ -11,6 +11,7 @@ import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
 import request from '@/helpers/request'
 import silder from '@/components/silder'
 import searchInput from '@/components/searchInput'
+import banner from '@/components/banner'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
@@ -22,23 +23,17 @@ export default defineComponent({
     videoDetailItem,
     musicLIstItem,
     hotSearch,
-    Swiper,
-    SwiperSlide,
+
     silder,
-    searchInput
+    searchInput,
+    banner
   },
   setup() {
     const state = reactive({
-      modules: [Navigation, Pagination, Scrollbar, A11y],
+
       albumList: [],
       musicList: []
     })
-    const onSwiper = swiper => {
-      console.log(swiper)
-    }
-    const onSlideChange = () => {
-      console.log('slide change')
-    }
     const getAlbumList = async () => {
       try {
         const res = await request.post('/api-website/open/music/album/list', {
@@ -77,29 +72,7 @@ export default defineComponent({
     })
     return () => (
       <div>
-        <swiper
-          modules={state.modules}
-          class={styles.mySwiper}
-          slides-per-view={1}
-          space-between={50}
-          pagination={{ clickable: true }}
-          navigation={{
-            nextEl: '.swiper-button-next',
-            prevEl: '.swiper-button-prev'
-          }}
-          loop={true}
-          onSwiper={onSwiper}
-          onSlideChange={onSlideChange}
-        >
-          <swiper-slide>Slide 1</swiper-slide>
-          <swiper-slide>Slide 2</swiper-slide>
-          <swiper-slide>Slide 3</swiper-slide>
-          <swiper-slide>Slide 4</swiper-slide>
-          <swiper-slide>Slide 5</swiper-slide>
-          <swiper-slide>Slide 6</swiper-slide>
-        </swiper>
-        <div class="swiper-button-prev"></div>
-        <div class="swiper-button-next"></div>
+        <banner></banner>
         <div class="bg-white">
           <div class={styles.w1200}>
             <div class={styles.section}>