zilong/vite-zmusic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 隐藏当前播放窗口

Browse Source
This commit is contained in:
zilong 2021-10-30 13:09:11 +08:00
parent 69643be75a
commit 03542b80a7
4 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/test.html
View File

@ -60,7 +60,15 @@
</style> </style>
</head> </head>
<body> <body>
<div style="background-color: #eee">asdfladjflsdfsdlf</div> <div style="background-color: #eee">
测试啊哈哈，安居客圣诞节疯狂大水井坊
<div>
啊啊啊啊啊啊啊
<div>
bbbbbbbbbbbbbb
</div>
</div>
</div>
<div class="content"> <div class="content">
<div class="lyric-line">一句歌词，哈哈</div> <div class="lyric-line">一句歌词，哈哈</div>
<div class="lyric-line">一句歌词，哈歌词歌词哈</div> <div class="lyric-line">一句歌词，哈歌词歌词哈</div>

18
src/App.vue
View File

@ -87,16 +87,16 @@ onUnmounted(() => {
pubsub.unsubscribe(token); pubsub.unsubscribe(token);
}); });
const c = (item) => {
return (
item.id == "playingList" ||
item.id == "top" ||
item.id == "footer"
);
};
const wpEl = ref('')
const hideWins = (e) => { const hideWins = (e) => {
if (showPlaying.value && e.path.findIndex(c) < 0) { // console.log(e.clientX > 0,e, wpEl.value.clientWidth);
if (showPlaying.value
&& e.clientX > 0
&& e.clientX < wpEl.value.clientWidth - 500
&& e.clientY > 40
&& e.clientY < wpEl.value.clientHeight - 64
) {
showPlaying.value = false; showPlaying.value = false;
} }
}; };
@ -107,7 +107,7 @@ const hideWins = (e) => {
:theme-overrides="store.state.theme.themeOverrides" :theme-overrides="store.state.theme.themeOverrides"
> >
<n-message-provider> <n-message-provider>
<div id="wp" @click="hideWins"> <div id="wp" ref="wpEl" @click="hideWins">
<!-- <NThemeEditor/> --> <!-- <NThemeEditor/> -->
<div id="top"> <div id="top">
<Nav></Nav> <Nav></Nav>

18
src/views/common/SongDetail.vue
View File

@ -72,7 +72,7 @@ watch(
// let elContent = document.getElementsByClassName('ly-content')[0] // let elContent = document.getElementsByClassName('ly-content')[0]
nextTick(()=>{ nextTick(()=>{
let el = document.getElementsByClassName('ly-key-lines')[val] let el = document.getElementsByClassName('ly-key-lines')[val]
lyList.value.scrollTop = el.offsetTop - 100 lyList.value.scrollTop = el.offsetTop - 100 - 6
}) })
} }
@ -200,6 +200,7 @@ export default {};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "@/assets/css/common.less";
#sdTitle { #sdTitle {
position: absolute; position: absolute;
left: 0; left: 0;
@ -243,7 +244,7 @@ export default {};
height: 50px; height: 50px;
} }
.disk { .disk {
--back-color: #ddd; --back-color: #eee;
--width-num: 340; --width-num: 340;
--padding-num: 10; --padding-num: 10;
--width: calc(var(--width-num) * 1px); --width: calc(var(--width-num) * 1px);
@ -284,6 +285,7 @@ export default {};
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
margin-top: 10px; margin-top: 10px;
.text-el-line-normal();
} }
.others { .others {
// display: flex; // display: flex;
@ -291,31 +293,33 @@ export default {};
color: #999; color: #999;
.album { .album {
flex: 1; flex: 1;
.text-el-line-normal();
} }
.artists { .artists {
flex: 1; flex: 1;
.text-el-line-normal();
} }
} }
.ly { .ly {
position: relative; position: relative;
margin-top: 15px; margin-top: 15px;
height: 290px; height: 288px;
overflow-y: auto; overflow-y: auto;
scroll-behavior: smooth; scroll-behavior: smooth;
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(
to bottom, to bottom,
rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 1) 25px, rgba(0, 0, 0, 1) 20px,
rgba(0, 0, 0, 1) 255px, rgba(0, 0, 0, 1) 260px,
rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
); );
mask-image: linear-gradient( mask-image: linear-gradient(
to bottom, to bottom,
rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 1) 25px, rgba(0, 0, 0, 1) 20px,
rgba(0, 0, 0, 1) 255px, rgba(0, 0, 0, 1) 250px,
rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
); );

19
src/views/common/SongInfo.vue
View File

@ -34,7 +34,7 @@ const songInfo = (id, im) => {
getSongDetial(id) getSongDetial(id)
.then((res) => { .then((res) => {
showInfo.value = true; showInfo.value = true;
console.log('SongInfo: 获取歌曲详细信息',res.data.songs[0]); console.log("SongInfo: 获取歌曲详细信息", res.data.songs[0]);
info.name = res.data.songs[0].name; info.name = res.data.songs[0].name;
info.artists = res.data.songs[0].ar; info.artists = res.data.songs[0].ar;
info.album = res.data.songs[0].al; info.album = res.data.songs[0].al;
@ -69,9 +69,8 @@ const songLyric = (id) => {
getLyric(id) getLyric(id)
.then((res) => { .then((res) => {
if (res.data.code == 200) if (res.data.code == 200)
pubsub.publish("zp.lyric", res.data.lrc.lyric ); pubsub.publish("zp.lyric", res.data.lrc.lyric);
else else pubsub.publish("zp.lyric", null);
pubsub.publish("zp.lyric", null);
}) })
.catch((err) => {}); .catch((err) => {});
}; };
@ -128,12 +127,18 @@ const toggleSongDetail = () => {
</div> </div>
<div class="song" v-show="showInfo"> <div class="song" v-show="showInfo">
<div class="w-song"> <div class="w-song" @click="toggleSongDetail">
<div class="song-name" @click="toggleSongDetail"> <div class="song-name" >
{{ info.name }} {{ info.name }}
</div> </div>
<div class="song-author"> <div class="song-author">
<ArtistsSpan :artists="info.artists" /> <!-- <ArtistsSpan :artists="info.artists" /> -->
<template v-for="(ar, idx) of info.artists" key="idx">
<span
style="margin-right: 4px; cursor: pointer"
>{{ ar.name }}</span
>
</template>
</div> </div>
</div> </div>