提交

1

src/components/albumItem/index.module.less

@@ -1,4 +1,5 @@
 .itemWrap {
+  cursor: pointer;
   &:nth-child(5n){
     margin-right: 0;
   }

src/components/albumItem/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent,toRefs, reactive, onMounted, ref  } from 'vue'
 
 import classes from './index.module.less'
 import hold from './images/hold.png'
@@ -6,20 +6,48 @@ import start from './images/start.png'
 import pan from './images/pan.png'
 export default defineComponent({
   name: 'albumItem',
-  setup() {
+  props: {
+    detail: {
+      type: Object,
+      default: {
+        albumCoverUrl: '',
+        albumDesc: '',
+        albumFavoriteCount: 0,
+        albumName: '',
+        albumStatus: 0,
+        albumTag: '',
+        auditVersion: 0,
+        createBy: 0,
+        createTime: '',
+        delFlag: null,
+        hotFlag: null,
+        id: 0,
+        musicSheetCount: 0,
+        musicTagNames: '',
+        sortNumber: 0,
+        topFlag: null,
+        updateBy: 34,
+        updateTime: ''
+      }
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      detail:props.detail
+    })
     return () => (
       <>
         <div class={classes.itemWrap}>
-          <img src={hold} alt="" class={classes.hold} />
-          <h2>专辑名称</h2>
+          <img src={state.detail.albumCoverUrl?state.detail.albumCoverUrl:hold} alt="" class={classes.hold} />
+          <h2>{state.detail.albumName}</h2>
           <div class={classes.itemBottom}>
             <div class={classes.itemBottomL}>
               <img src={pan} alt="" />
-              <span>24首</span>
+              <span>{state.detail.musicSheetCount}首</span>
             </div>
             <div class={classes.itemBottomR}>
               <img src={start} alt="" />
-              <span>24收藏</span>
+              <span>{state.detail.albumFavoriteCount}收藏</span>
             </div>
           </div>
         </div>

src/components/col-footer/index.tsx

@@ -1,5 +1,7 @@
 import { defineComponent } from 'vue'
 import classes  from './index.module.less'
+import download from '../silder/images/download.png'
+import publicCode from '../silder/images/public-code.jpg'
 export default defineComponent({
   name: 'col-footer',
   setup() {
@@ -23,7 +25,7 @@ export default defineComponent({
                   <div class={classes.qrcode}>
                     <div class={classes.qrcodeItem}>
                       <img
-                        src="../assets/images/public-code.jpg"
+                        src={publicCode}
                         width="74px"
                         height="74px"
                       />
@@ -33,7 +35,7 @@ export default defineComponent({
                   <div class={classes.qrcode}>
                     <div  class={classes.qrcodeItem}>
                       <img
-                        src="../assets/images/download.png"
+                        src={download}
                         width="74px"
                         height="74px"
                       />

src/components/col-header/index.tsx

@@ -10,7 +10,7 @@ export default defineComponent({
     return {
       navigator: [
         { name: '首页', href: '/home', current: false },
-        { name: '曲谱', href: '#', current: false },
+        { name: '谱库', href: '/musicLibrary', current: false },
         { name: '视频课', href: '#', current: false },
         { name: '云教练', href: '#', current: false },
         { name: '社区', href: '#', current: false },

src/components/hotSearch/index.module.less

@@ -27,6 +27,7 @@
     display: flex;
     flex-direction: row;
     cursor: pointer;
+    font-size: 18px;
     span {
       color: #666;
     }
@@ -36,4 +37,17 @@
       margin-left: 8px;
     }
   }
+  .searchWrap {
+    cursor: pointer;
+    span {
+      color: #000!important;
+      line-height: 28px;
+    }
+    .search {
+      width: 28px;
+      height: 28px;
+      margin-left: 8px;
+    }
+
+  }
 }

src/components/hotSearch/index.tsx

@@ -4,27 +4,61 @@ import classes from './index.module.less'
 import tagItem from '@/components/tagItem'
 import hot from './images/hot.png'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
+import search from '@/components/hotSearch/images/search.png'
+import request from '@/helpers/request'
 export default defineComponent({
   name: 'hotSearch',
   components: { tagItem },
-  props: {},
-  setup() {
-    const state = reactive({})
+  props: {
+    type:{
+      type:String,
+      default:'more'
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      hotList:[],
+      type:props.type
+    })
+    const getHotList = async () => {
+      try {
+        const res = await request.get('/api-website/open/music/sheet/hotTag', {
+          params: {
+            status: 1,
+          }
+        })
+
+        state.hotList = res.data
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    onMounted(()=>{
+      getHotList()
+    })
     return () => (
       <>
         <div class={classes.wrap}>
-          <div  class={classes.wrapLeft}>
+          <div class={classes.wrapLeft}>
             <img src={hot} class={classes.hotIcon} alt="" />
             <h5>热门搜索：</h5>
             <div class={classes.tagWrap}>
-              <tagItem title="考级"></tagItem>
-              <tagItem title="古典"></tagItem>
+              {state.hotList.map((item:any)=>{
+                return <tagItem title={item.key}></tagItem>
+              })
+
+              }
+
             </div>
           </div>
-          <div class={classes.wrapRight}>
+          {state.type == 'more'? <div class={classes.wrapRight}>
             <span>更多</span>
             <img class={classes.arrow} src={arrow} alt="" />
-          </div>
+          </div>: <div class={[classes.wrapRight,classes.searchWrap]}>
+            <span >筛选</span>
+            <img class={classes.search} src={search} alt="" />
+          </div>}
+
         </div>
       </>
     )

src/components/musicLIstItem/index.module.less

@@ -7,6 +7,8 @@
   justify-content: space-between;
   width: 100%;
   border-radius: 12px;
+  margin-bottom: 10px;
+  padding: 14px 16px;
   .left {
     display: flex;
     flex-direction: row;

src/components/musicLIstItem/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent,reactive } from 'vue'
 import icon from '../videoDetailItem/images/icon.png'
 import classes from './index.module.less'
 import detaile from './images/detaile.png'
@@ -7,7 +7,34 @@ import arrow from './images/arrow.png'
 
 export default defineComponent({
   name: 'musicLIstItem',
-  setup() {
+  props: {
+    detail: {
+      type: Object,
+      default: {
+        albumRow: 0,
+        auditStatus: '',
+        chargeType: '',
+        createBy: 0,
+        idAndName: '',
+        musicTagIds: '',
+        order: '',
+        page: 0,
+        platform: '',
+        rows: 0,
+        search: '',
+        sheetRow: 0,
+        sort: '',
+        sourceType: '',
+        state: '',
+        subjectIds: '',
+        version: ''
+      }
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      detail:props.detail
+    })
     return () => (
       <>
         <div>
@@ -18,11 +45,11 @@ export default defineComponent({
               </div>
               <div class={classes.textWrap}>
                 <p>
-                  孤勇者（《英雄联盟：双城之战》主题曲） <span>作曲: 钱雷</span>
+                 {state.detail.musicSheetName} <span>作曲: {state.detail.composer}</span>
                 </p>
                 <div class={classes.authorInfo}>
-                  <img class={classes.icon} src={icon} alt="" />
-                  <span class={classes.authorName}>李佳怡</span>
+                  <img class={classes.icon} src={ state.detail.addUserAvatar?state.detail.addUserAvatar: icon} alt="" />
+                  <span class={ classes.authorName}>{state.detail.addName}</span>
                   <div class={classes.tagList}>
                     <div class={classes.tag}>单簧管</div>
                     <div class={classes.tag}>圆号</div>

src/components/searchInput/index.module.less

@@ -0,0 +1,148 @@
+.wrap {
+  margin-bottom: 20px;
+}
+.inputSelect {
+  line-height: 54px;
+  height: 54px;
+  background: #f6f7f8;
+  border-radius: 30px;
+  overflow: hidden;
+  border: none !important;
+  padding: 0 20px;
+}
+:global {
+  .inputSelect {
+    .el-input__wrapper.is-focus {
+      border: none !important;
+      box-shadow: none !important;
+      &:hover {
+        .el-input__wrapper {
+          border: none !important;
+          box-shadow: none !important;
+        }
+        .el-input__inner {
+          border: none !important;
+          box-shadow: none !important;
+        }
+        border: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+  .el-input__wrapper {
+    border: none !important;
+    box-shadow: none !important;
+  }
+  .el-input__inner {
+    border: none !important;
+    box-shadow: none !important;
+  }
+  .el-select {
+    --el-select-input-focus-border-color: transparent;
+  }
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 0px !important;
+  }
+  .el-input__inner {
+    background-color: #f6f7f8 !important;
+    border: none !important;
+    box-shadow: none !important;
+    &:hover {
+      border: none !important;
+      box-shadow: none !important;
+    }
+  }
+  .el-input__wrapper {
+    background-color: #f6f7f8 !important;
+    border: none !important;
+    box-shadow: none !important;
+    &:hover {
+      border: none !important;
+      box-shadow: none !important;
+    }
+  }
+  .el-input-group--prepend {
+    .el-select {
+      &:hover {
+        background-color: #f6f7f8 !important;
+        border: none !important;
+        box-shadow: none !important;
+      }
+      .select-trigger {
+        &:hover {
+          background-color: #f6f7f8 !important;
+          border: none !important;
+          box-shadow: none !important;
+        }
+        .el-input--suffix.is-focus {
+          .el-input__wrapper {
+            box-shadow: none !important;
+            &:hover {
+              border: none !important;
+              box-shadow: none !important;
+            }
+          }
+          .is-focus {
+            background-color: #f6f7f8 !important;
+            border: none !important;
+            box-shadow: none !important;
+          }
+        }
+      }
+    }
+  }
+
+  .el-input-group__prepend {
+    box-shadow: none;
+  }
+  .el-input-group__append {
+    box-shadow: none !important;
+  }
+
+  .subSelect {
+    .el-input-group--prepend
+      .el-input-group__prepend
+      .el-select
+      .el-input.is-focus
+      .el-input__wrapper {
+      border: none !important;
+      box-shadow: none !important;
+      &:hover {
+        border: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+  .el-input-group--prepend .el-input-group__prepend .el-select {
+    border: none !important;
+    box-shadow: none !important;
+    &:hover {
+      border: none !important;
+      box-shadow: none !important;
+      .el-input__wrapper {
+        border: none !important;
+        box-shadow: none !important;
+        &:hover {
+          border: none !important;
+          box-shadow: none !important;
+        }
+    }
+
+  }
+  }
+}
+.selectWrap {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  .line {
+    width: 1px;
+    height: 26px;
+    background: #D8D8D8;
+    position: absolute;
+    right: -20px;
+    top:2px
+  }
+}
+
+

src/components/searchInput/index.tsx

@@ -0,0 +1,86 @@
+import { Search } from '@element-plus/icons-vue'
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElSelect,
+  ElOption
+} from 'element-plus'
+import classes from './index.module.less'
+import request from '@/helpers/request'
+
+export default defineComponent({
+  name: 'searchInput',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, conent) {
+    const state = reactive({
+      title: props.title,
+      search: '',
+      subject: '',
+      subjectList:[]
+    })
+    const getSubjectList = async ()=>{
+      try {
+        const res = await request.post('/api-website/subject/subjectSelect', {
+          data: {
+            albumStatus: 'PASS',
+            page: 1,
+            rows: 5,
+            state: 1
+          }
+        })
+
+        state.subjectList = res.data
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    onMounted(()=>{
+      getSubjectList()
+    })
+    return () => (
+      <>
+        <div class={classes.wrap}>
+          <ElInput
+            v-model={state.search}
+            placeholder="搜一搜你想练习的曲目"
+            class={classes.inputSelect}
+            v-slots={{
+              prepend: () => (
+                <div   class={classes.selectWrap}>
+                  <ElSelect
+                    v-model={state.subject}
+                    placeholder="请选择声部"
+                    style="width: 115px"
+                    popper-class="subSelect"
+                    v-slots={{
+                      suffix: () => <div class={classes.san}></div>
+                    }}
+                  >
+                    <ElOption label="Restaurant" value="1" />
+                    <ElOption label="Order No." value="2" />
+                    <ElOption label="Tel" value="3" />
+                  </ElSelect>
+                  <div class={classes.line}></div>
+                </div>
+              ),
+              append: () => (
+                <ElButton
+                  style={{ color: '#2DC7AA', font: '20px' }}
+                  icon="Search"
+                />
+              )
+            }}
+          ></ElInput>
+        </div>
+      </>
+    )
+  }
+})

src/components/silder/index.module.less

@@ -41,6 +41,10 @@
     }
 
     .silderItem {
+      img {
+        filter: drop-shadow(#2dc7aa 80px 0);
+        transform: translateX(-80px);
+      }
       cursor: pointer;
       display: flex;
       flex-direction: column;
@@ -59,14 +63,14 @@
         height: 1px;
         background-color: #ececec;
       }
+      .wall {
+        margin-top: 10px;
+      }
       &:hover {
         p {
           color: #2dc7aa;
         }
-        img {
-          filter: drop-shadow(#2dc7aa 80px 0);
-          transform: translateX(-80px);
-        }
+
       }
     }
   }
@@ -80,14 +84,24 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-top: 28px;
+    padding-top: 16px;
     border: 1px solid #ececec;
     overflow: hidden;
+    color: #666;
+    font-size: 12px;
+    line-height: 21px;
+    img {
+
+      filter: drop-shadow(#999 80px 0);
+      transform: translateX(-80px);
+      margin-bottom: 6px;
+    }
     &:hover {
       img {
         filter: drop-shadow(#2dc7aa 80px 0);
         transform: translateX(-80px);
       }
+      color: #2dc7aa;
     }
   }
 }

src/components/silder/index.tsx

@@ -33,7 +33,7 @@ export default defineComponent({
       <>
         <div class={classes.silderWrap}>
           <div class={classes.silderList}>
-            <ElPopover
+            {/* <ElPopover
               placement="left"
               trigger="hover"
               popper-class="Mopopver"
@@ -51,7 +51,7 @@ export default defineComponent({
                 <p class={classes.hoverTitle}>咨询电话：</p>
                 <p class={classes.hoverMsg}>400-8851569</p>
               </div>
-            </ElPopover>
+            </ElPopover> */}
             <ElPopover
               placement="left"
               trigger="hover"
@@ -70,8 +70,8 @@ export default defineComponent({
                 <div class={classes.codeItem}>
                   <img
                     src={download}
-                    width="111px"
-                    height="111px"
+                    width="111"
+                    height="111"
 
                   />
                   <p>扫码下载APP</p>
@@ -87,6 +87,7 @@ export default defineComponent({
                   <div class={classes.silderItem}>
                     <img src={silder1}  />
                     <p>关注微信</p>
+                    <div class={classes.wall}></div>
                   </div>
                 )
               }}
@@ -95,12 +96,14 @@ export default defineComponent({
                 <div class={classes.codeItem}>
                   <img
                     src={publicCode}
-                    width="111px"
-                    height="111px"
+                    width="111"
+                    height="111"
 
                   />
                   <p>微信订阅号</p>
+
                 </div>
+
               </div>
             </ElPopover>
           </div>
@@ -108,6 +111,7 @@ export default defineComponent({
           {state.showgo ? (
             <div class={classes.goTop} onClick={gotop}>
               <img src={silder5}  />
+              回到顶部
             </div>
           ) : (
             ''

src/components/tagItem/index.module.less

@@ -1,4 +1,5 @@
 .tag {
+  cursor: pointer;
   color: #2dc7aa;
   height: 28px;
   line-height: 28px;

src/components/videoDetailItem/index.module.less

@@ -3,11 +3,13 @@
   margin-bottom: 20px;
   margin-right: 20px;
   border-radius: 4px;
+  background-color: #fff;
   &:nth-child(3n){
     margin-right:0;
   }
   .detaile {
     width: 387px;
+    height: 216px;
   }
   .itemBottom {
     display: flex;

src/components/videoDetailItem/index.tsx

@@ -1,24 +1,46 @@
-import { defineComponent } from 'vue'
+import { defineComponent, toRefs, reactive, onMounted, ref} from 'vue'
 
 import classes from './index.module.less'
 import detaile from './images/detaile.png'
 import icon from './images/icon.png'
 export default defineComponent({
   name: 'albumItem',
-  setup() {
+  props: {
+    detail: {
+      type: Object,
+      default: {
+        "auditStatus": "",
+        "endTime": "",
+        "lessonSubject": "",
+        "order": "",
+        "orderNo": "",
+        "page": 0,
+        "rows": 0,
+        "search": "",
+        "sort": "",
+        "startTime": "",
+        "userId": 0,
+        "videoLessonGroupId": 0
+      }
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      detail:props.detail
+    })
     return () => (
       <>
         <div class={classes.itemWrap}>
-          <img src={detaile} alt="" class={classes.detaile} />
+          <img src={state.detail.lessonCoverUrl?state.detail.lessonCoverUrl:detaile} alt="" class={classes.detaile} />
           <div class={classes.itemBottom}>
             <div class={classes.itemBottomL}>
               <img src={icon} class={classes.itemHead} alt="" />
-              <span class={classes.itemTitle}>李老师</span>
+              <span class={classes.itemTitle}>{state.detail.username}</span>
               <div class={classes.line}></div>
-              <span  class={classes.course}>12课时</span>
+              <span class={classes.course}>{state.detail.lessonCount}课时</span>
             </div>
             <div class={classes.itemBottomR}>
-              <span  class={classes.buy} >6人购买</span>
+              <span class={classes.buy}>{state.detail.countStudent}人购买</span>
             </div>
           </div>
         </div>

src/router/routes-admin.ts

@@ -17,9 +17,21 @@ export default [
   {
     path: '/downLoad',
     name: 'downLoad',
-    component: () => import('@/views/downLoad/index')
+    component: () => import('@/views/downLoad/index'),
+    meta: {
+      title: '下载'
+    }
   },
   {
+    path: '/musicLibrary',
+    name: 'musicLibrary',
+    component: () => import('@/views/musicLibrary/index'),
+    meta: {
+      title: '谱库'
+    }
+  },
+
+  {
     path: '/teacherAuth',
     name: 'teacherAuth',
     component: () => import('@/views/roleAuth/teacherAuth'),

src/views/App.tsx

@@ -8,9 +8,11 @@ import Login from './login'
 import styles from './App.module.less'
 import { state } from '@/state'
 import { getAuth, getUserType } from '@/helpers/utils'
+import silder from '@/components/silder'
 import request from '@/helpers/request'
 
 export default defineComponent({
+  components:{silder},
   name: 'App',
   async mounted() {
     const token = getAuth()
@@ -42,6 +44,7 @@ export default defineComponent({
         <ElConfigProvider locale={zhCn}>
           <RouterView></RouterView>
         </ElConfigProvider>
+        <silder></silder>
         <ColFooter />
         {/* 登录弹窗 */}
         <div class={styles.loginContainer}>

src/views/home/index.module.less

@@ -40,6 +40,7 @@
     align-items: center;
     flex-wrap: wrap;
     margin-bottom: 25px;
+    margin-top: 25px;
   }
   .videoList {
     display: flex;

src/views/home/index.tsx

@@ -10,7 +10,7 @@ import hotSearch from '@/components/hotSearch'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
 import request from '@/helpers/request'
-import silder from '@/components/silder'
+
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
@@ -24,12 +24,12 @@ export default defineComponent({
     hotSearch,
     Swiper,
     SwiperSlide,
-    silder
   },
   setup() {
     const state = reactive({
       modules: [Navigation, Pagination, Scrollbar, A11y],
-      albumList: []
+      albumList: [],
+      videoList:[]
     })
     const onSwiper = swiper => {
       console.log(swiper)
@@ -46,12 +46,31 @@ export default defineComponent({
             rows: 10
           }
         })
+
+        state.albumList = res.data.rows
       } catch (e) {
         console.log(e)
       }
     }
+    const getVideoList = async () => {
+      try {
+        const res = await request.post('/api-website/open/videoLessonGroup/page', {
+          data: {
+            albumStatus: 'PASS',
+            page: 1,
+            rows: 6
+          }
+        })
+
+        state.videoList = res.data.rows
+      } catch (e) {
+        console.log(e)
+      }
+    }
+
     onMounted(() => {
       getAlbumList()
+      getVideoList()
     })
     return () => (
       <div>
@@ -88,21 +107,13 @@ export default defineComponent({
               </div>
               <hotSearch></hotSearch>
               <div class={styles.albumList}>
-                <albumItem></albumItem>
-                <albumItem></albumItem>
-                <albumItem></albumItem>
-                <albumItem></albumItem>
-                <albumItem></albumItem>
-                <albumItem></albumItem>
-                <albumItem></albumItem>
-                <albumItem></albumItem>
-                <albumItem></albumItem>
-                <albumItem></albumItem>
+                {state.albumList.map(item=>{
+                  return  <albumItem detail={item}></albumItem>
+                })}
+
+
               </div>
             </div>
-            {/*
-              <videoDetailItem></videoDetailItem>
-              <musicLIstItem></musicLIstItem> */}
           </div>
         </div>
         <div>
@@ -121,19 +132,17 @@ export default defineComponent({
                 </div>
               </div>
               <div class={styles.videoList}>
-                <videoDetailItem></videoDetailItem>
-                <videoDetailItem></videoDetailItem>
-                <videoDetailItem></videoDetailItem>
-                <videoDetailItem></videoDetailItem>
-                <videoDetailItem></videoDetailItem>
-                <videoDetailItem></videoDetailItem>
+
+              {state.videoList.map(item=>{
+                  return  <videoDetailItem detail={item}></videoDetailItem>
+                })}
               </div>
             </div>
 
             {/* <musicLIstItem></musicLIstItem> */}
           </div>
         </div>
-        <silder></silder>
+
       </div>
     )
   }

src/views/musicLibrary/index.module.less

@@ -0,0 +1,85 @@
+
+.mySwiper {
+  min-height: 300px;
+  /deep/.swiper-slide {
+    min-height: 300px;
+  }
+}
+.title {
+  font-size: 20px;
+  color: red;
+}
+.w1200 {
+  width: 1200px !important;
+  margin: 0 auto;
+}
+.section {
+  .hotAlbum {
+    margin-top: 37px;
+    font-size: 22px;
+    font-weight: 500;
+    color: #000000;
+    line-height: 30px;
+  }
+  padding: 34px 0;
+  .titleWrap {
+    text-align: center;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    .dotImg {
+      width: 54px;
+      height: 54px;
+    }
+    h4 {
+      margin: 0 10px;
+      font-size: 32px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 45px;
+    }
+  }
+  .albumList {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+    margin-top: 25px;
+  }
+  .videoList {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 25px 0;
+  }
+  .videoNav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    h5 {
+      font-size: 22px;
+      font-weight: 500;
+      color: #000000;
+      line-height: 30px;
+      margin-bottom: 14px;
+    }
+    .wrapRight {
+      display: flex;
+      flex-direction: row;
+      cursor: pointer;
+      span {
+        color: #666;
+      }
+      .arrow {
+        width: 20px;
+        height: 20px;
+        margin-left: 8px;
+      }
+    }
+  }
+}

src/views/musicLibrary/index.tsx

@@ -0,0 +1,146 @@
+// import { PaperClipIcon } from '@heroicons/vue/solid'
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import arrow from '@/components/musicLIstItem/images/arrow.png'
+import styles from './index.module.less'
+import albumItem from '@/components/albumItem'
+import videoDetailItem from '@/components/videoDetailItem'
+import musicLIstItem from '@/components/musicLIstItem'
+import hotSearch from '@/components/hotSearch'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+import request from '@/helpers/request'
+import silder from '@/components/silder'
+import searchInput from '@/components/searchInput'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import 'swiper/css/scrollbar'
+export default defineComponent({
+  name: 'home',
+  components: {
+    albumItem,
+    videoDetailItem,
+    musicLIstItem,
+    hotSearch,
+    Swiper,
+    SwiperSlide,
+    silder,
+    searchInput
+  },
+  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', {
+          data: {
+            albumStatus: 1,
+            page: 1,
+            rows: 10
+          }
+        })
+
+        state.albumList = res.data.rows
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    const getMusicList = async () => {
+      try {
+        const res = await request.post('/api-website/open/music/sheet/list', {
+          data: {
+            albumStatus: 'PASS',
+            page: 1,
+            rows: 5,
+            state: 1
+          }
+        })
+
+        state.musicList = res.data.rows
+      } catch (e) {
+        console.log(e)
+      }
+    }
+
+    onMounted(() => {
+      getAlbumList()
+      getMusicList()
+    })
+    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>
+        <div class="bg-white">
+          <div class={styles.w1200}>
+            <div class={styles.section}>
+              {/* <div class={styles.titleWrap}>
+                <img src={titleDot} class={styles.dotImg} alt="" />
+                <h4>热门专辑</h4>
+                <img src={titleDot} class={styles.dotImg} alt="" />
+              </div> */}
+              <searchInput></searchInput>
+              <hotSearch type={'search'}></hotSearch>
+              <h5 class={styles.hotAlbum}>热门专辑</h5>
+              <div class={styles.albumList}>
+                {state.albumList.map(item => {
+                  return <albumItem detail={item}></albumItem>
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class={styles.w1200}>
+            <div class={styles.section}>
+              <div class={styles.videoNav}>
+                <h5>热门乐谱</h5>
+                <div class={styles.wrapRight}>
+                  <span>更多</span>
+                  <img class={styles.arrow} src={arrow} alt="" />
+                </div>
+              </div>
+              <div class={styles.musicList}>
+                {state.musicList.map(item => {
+                  return <musicLIstItem detail={item}></musicLIstItem>
+                })}
+              </div>
+            </div>
+
+            {/* <musicLIstItem></musicLIstItem> */}
+          </div>
+        </div>
+        <silder></silder>
+      </div>
+    )
+  }
+})