|
|
@ -4,9 +4,16 @@
|
|
|
|
<span
|
|
|
|
<span
|
|
|
|
><div class="dropdown">
|
|
|
|
><div class="dropdown">
|
|
|
|
<font class="dropbtn"
|
|
|
|
<font class="dropbtn"
|
|
|
|
>QQ音乐 <svg-icon icon-class="arrow-down"
|
|
|
|
>{{ serverNameTable[server] }} <svg-icon icon-class="arrow-down"
|
|
|
|
/></font>
|
|
|
|
/></font>
|
|
|
|
<div class="dropdown-content"> </div>
|
|
|
|
<div class="dropdown-content">
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
v-for="(val, key, i) in serverNameTable"
|
|
|
|
|
|
|
|
:key="{ val: val, i: i }"
|
|
|
|
|
|
|
|
@click="tranSearchType(undefined, key)"
|
|
|
|
|
|
|
|
>{{ serverNameTable[key] }}</button
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
搜索
|
|
|
|
搜索
|
|
|
|
<div class="dropdown">
|
|
|
|
<div class="dropdown">
|
|
|
@ -17,7 +24,7 @@
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
v-for="(val, key, i) in typeNameTable"
|
|
|
|
v-for="(val, key, i) in typeNameTable"
|
|
|
|
:key="{ val: val, i: i }"
|
|
|
|
:key="{ val: val, i: i }"
|
|
|
|
@click="tranSearchType(key)"
|
|
|
|
@click="tranSearchType(key, undefined)"
|
|
|
|
>{{ typeNameTable[key] }}</button
|
|
|
|
>{{ typeNameTable[key] }}</button
|
|
|
|
>
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -81,6 +88,9 @@ export default {
|
|
|
|
type() {
|
|
|
|
type() {
|
|
|
|
return camelCase(this.$route.query.type || 'tracks');
|
|
|
|
return camelCase(this.$route.query.type || 'tracks');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
server() {
|
|
|
|
|
|
|
|
return camelCase(this.$route.query.server || 'tencent');
|
|
|
|
|
|
|
|
},
|
|
|
|
typeNameTable() {
|
|
|
|
typeNameTable() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
musicVideos: locale.t('search.mv'),
|
|
|
|
musicVideos: locale.t('search.mv'),
|
|
|
@ -90,6 +100,13 @@ export default {
|
|
|
|
playlists: locale.t('search.playlist'),
|
|
|
|
playlists: locale.t('search.playlist'),
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
serverNameTable() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
netease: locale.t('server.netease'),
|
|
|
|
|
|
|
|
tencent: locale.t('server.tencent'),
|
|
|
|
|
|
|
|
kugou: locale.t('server.kugou'),
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
watch: {
|
|
|
|
$route: {
|
|
|
|
$route: {
|
|
|
@ -112,8 +129,13 @@ export default {
|
|
|
|
this.player.replacePlaylist(tracks, tracks[0], 'artist', tracks[0]);
|
|
|
|
this.player.replacePlaylist(tracks, tracks[0], 'artist', tracks[0]);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
tranSearchType(type) {
|
|
|
|
tranSearchType(type, server) {
|
|
|
|
this.$router.replace({ query: { ...this.$route.query, type } });
|
|
|
|
if (type) {
|
|
|
|
|
|
|
|
this.$router.replace({ query: { ...this.$route.query, type } });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (server) {
|
|
|
|
|
|
|
|
this.$router.replace({ query: { ...this.$route.query, server } });
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
playTrack(id) {
|
|
|
|
playTrack(id) {
|
|
|
|
this.player._replaceCurrentTrackByTrack(id, true);
|
|
|
|
this.player._replaceCurrentTrackByTrack(id, true);
|
|
|
@ -231,11 +253,12 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.dropdown-content {
|
|
|
|
.dropdown-content {
|
|
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
font-size: 1em;
|
|
|
|
font-size: 1em;
|
|
|
|
opacity: 0;
|
|
|
|
opacity: 0;
|
|
|
|
transition: 0.5s;
|
|
|
|
transition: 0.5s;
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
background-color: #ffffff;
|
|
|
|
background-color: var(--color-body-bg);
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
padding: 8px;
|
|
|
|
padding: 8px;
|
|
|
|
right: 0;
|
|
|
|
right: 0;
|
|
|
@ -262,7 +285,11 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.dropdown:hover,
|
|
|
|
.dropdown:hover,
|
|
|
|
.dropdown:focus {
|
|
|
|
.dropdown:focus {
|
|
|
|
|
|
|
|
.dropdown-content:hover {
|
|
|
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
|
|
|
}
|
|
|
|
.dropdown-content {
|
|
|
|
.dropdown-content {
|
|
|
|
|
|
|
|
pointer-events: auto;
|
|
|
|
opacity: 1;
|
|
|
|
opacity: 1;
|
|
|
|
transition: 0.5s;
|
|
|
|
transition: 0.5s;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -281,7 +308,7 @@ button {
|
|
|
|
color: var(--color-primary);
|
|
|
|
color: var(--color-primary);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:hover {
|
|
|
|
&:hover {
|
|
|
|
transform: scale(1.12);
|
|
|
|
transform: scale(1.08);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:active {
|
|
|
|
&:active {
|
|
|
|
transform: scale(0.96);
|
|
|
|
transform: scale(0.96);
|
|
|
|