|
@@ -1,6 +1,6 @@
|
|
|
// import { PaperClipIcon } from '@heroicons/vue/solid'
|
|
|
import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
|
|
|
-import arrow from '@/components/musicLIstItem/images/arrow.png'
|
|
|
+import arrow from '@/views/home/images/moreArrow.png'
|
|
|
import styles from './index.module.less'
|
|
|
import albumItem from './modals/albumItem'
|
|
|
import videoDetailItem from '@/components/videoDetailItem'
|
|
@@ -12,11 +12,12 @@ import request from '@/helpers/request'
|
|
|
import silder from '@/components/silder'
|
|
|
import searchInput from '@/components/searchInput'
|
|
|
import banner from '@/components/banner'
|
|
|
+import titleDot from '@/views/home/images/titleDot.png'
|
|
|
import 'swiper/css'
|
|
|
import 'swiper/css/navigation'
|
|
|
import 'swiper/css/pagination'
|
|
|
import 'swiper/css/scrollbar'
|
|
|
-import { useRoute,useRouter } from 'vue-router'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
export default defineComponent({
|
|
|
name: 'musicLibrary',
|
|
|
components: {
|
|
@@ -24,14 +25,12 @@ export default defineComponent({
|
|
|
videoDetailItem,
|
|
|
musicLIstItem,
|
|
|
hotSearch,
|
|
|
-
|
|
|
silder,
|
|
|
searchInput,
|
|
|
banner
|
|
|
},
|
|
|
setup() {
|
|
|
const state = reactive({
|
|
|
-
|
|
|
albumList: [],
|
|
|
musicList: []
|
|
|
})
|
|
@@ -67,16 +66,18 @@ export default defineComponent({
|
|
|
console.log(e)
|
|
|
}
|
|
|
}
|
|
|
- const gotoSearch = (val:string|object)=>{
|
|
|
- if(typeof val == 'string'){
|
|
|
- router.push({name:'searchdetail',params:{search:val}})
|
|
|
- }else{
|
|
|
- router.push({name:'searchdetail',params:{...val}})
|
|
|
+ const gotoSearch = (val: string | object) => {
|
|
|
+ if (typeof val == 'string') {
|
|
|
+ router.push({ name: 'searchdetail', params: { search: val } })
|
|
|
+ } else {
|
|
|
+ router.push({ name: 'searchdetail', params: { ...val } })
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- const gotoMusic=()=>{
|
|
|
- router.push({name:'searchdetail',params:{type:'music'}})
|
|
|
+ const gotoMusic = () => {
|
|
|
+ router.push({ name: 'searchdetail', params: { type: 'music' } })
|
|
|
+ }
|
|
|
+ const gotoAlbum = () => {
|
|
|
+ router.push({ name: 'searchdetail', params: { type: '' } })
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
getAlbumList()
|
|
@@ -94,11 +95,30 @@ export default defineComponent({
|
|
|
<img src={titleDot} class={styles.dotImg} alt="" />
|
|
|
</div> */}
|
|
|
|
|
|
- <searchInput isWhile={false} onStartSearch={(val:any)=>gotoSearch(val)}></searchInput>
|
|
|
+ <searchInput
|
|
|
+ isWhile={false}
|
|
|
+ onStartSearch={(val: any) => gotoSearch(val)}
|
|
|
+ ></searchInput>
|
|
|
<div class={styles.hotSearch}>
|
|
|
- <hotSearch onHotTag={(val:string)=>{gotoSearch(val)}} type={'more'}></hotSearch>
|
|
|
+ <hotSearch
|
|
|
+ onHotTag={(val: string) => {
|
|
|
+ gotoSearch(val)
|
|
|
+ }}
|
|
|
+ type={''}
|
|
|
+ ></hotSearch>
|
|
|
+ </div>
|
|
|
+ <div class={[styles.videoNav,styles.mt25]}>
|
|
|
+ <div class={styles.titleWrap}>
|
|
|
+ <h5 class={styles.hotAlbum}>热门专辑</h5>
|
|
|
+ <img src={titleDot} class={styles.dotImg} alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.wrapRight} onClick={() => gotoAlbum()}>
|
|
|
+ <span>更多</span>
|
|
|
+ <img class={styles.arrow} src={arrow} alt="" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <h5 class={styles.hotAlbum}>热门专辑</h5>
|
|
|
+
|
|
|
<div class={styles.albumList}>
|
|
|
{state.albumList.map(item => {
|
|
|
return <albumItem detail={item}></albumItem>
|
|
@@ -111,8 +131,11 @@ export default defineComponent({
|
|
|
<div class={styles.w1200}>
|
|
|
<div class={styles.section}>
|
|
|
<div class={styles.videoNav}>
|
|
|
- <h5>热门乐谱</h5>
|
|
|
- <div class={styles.wrapRight} onClick={()=>gotoMusic()}>
|
|
|
+ <div class={styles.titleWrap}>
|
|
|
+ <h5>热门乐谱</h5>
|
|
|
+ <img src={titleDot} class={styles.dotImg} alt="" />
|
|
|
+ </div>
|
|
|
+ <div class={styles.wrapRight} onClick={() => gotoMusic()}>
|
|
|
<span>更多</span>
|
|
|
<img class={styles.arrow} src={arrow} alt="" />
|
|
|
</div>
|