fix 隐藏当前播放窗口
This commit is contained in:
zilong
parent
69643be75a
commit
03542b80a7
@ -60,7 +60,15 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background-color: #eee">asdfladjflsdfsdlf</div>
|
||||
<div style="background-color: #eee">
|
||||
测试啊哈哈，安居客圣诞节疯狂大水井坊
|
||||
<div>
|
||||
啊啊啊啊啊啊啊
|
||||
<div>
|
||||
bbbbbbbbbbbbbb
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="lyric-line">一句歌词，哈哈</div>
|
||||
<div class="lyric-line">一句歌词，哈歌词歌词哈</div>
|
||||
|
||||
18
src/App.vue
18
src/App.vue
@ -87,16 +87,16 @@ onUnmounted(() => {
|
||||
pubsub.unsubscribe(token);
|
||||
});
|
||||
|
||||
const c = (item) => {
|
||||
return (
|
||||
item.id == "playingList" ||
|
||||
item.id == "top" ||
|
||||
item.id == "footer"
|
||||
);
|
||||
};
|
||||
|
||||
const wpEl = ref('')
|
||||
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;
|
||||
}
|
||||
};
|
||||
@ -107,7 +107,7 @@ const hideWins = (e) => {
|
||||
:theme-overrides="store.state.theme.themeOverrides"
|
||||
>
|
||||
<n-message-provider>
|
||||
<div id="wp" @click="hideWins">
|
||||
<div id="wp" ref="wpEl" @click="hideWins">
|
||||
<!-- <NThemeEditor/> -->
|
||||
<div id="top">
|
||||
<Nav></Nav>
|
||||
|
||||
@ -72,7 +72,7 @@ watch(
|
||||
// let elContent = document.getElementsByClassName('ly-content')[0]
|
||||
nextTick(()=>{
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "@/assets/css/common.less";
|
||||
#sdTitle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -243,7 +244,7 @@ export default {};
|
||||
height: 50px;
|
||||
}
|
||||
.disk {
|
||||
--back-color: #ddd;
|
||||
--back-color: #eee;
|
||||
--width-num: 340;
|
||||
--padding-num: 10;
|
||||
--width: calc(var(--width-num) * 1px);
|
||||
@ -284,6 +285,7 @@ export default {};
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin-top: 10px;
|
||||
.text-el-line-normal();
|
||||
}
|
||||
.others {
|
||||
// display: flex;
|
||||
@ -291,31 +293,33 @@ export default {};
|
||||
color: #999;
|
||||
.album {
|
||||
flex: 1;
|
||||
.text-el-line-normal();
|
||||
}
|
||||
.artists {
|
||||
flex: 1;
|
||||
.text-el-line-normal();
|
||||
}
|
||||
}
|
||||
|
||||
.ly {
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
height: 290px;
|
||||
height: 288px;
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0,
|
||||
rgba(0, 0, 0, 1) 25px,
|
||||
rgba(0, 0, 0, 1) 255px,
|
||||
rgba(0, 0, 0, 1) 20px,
|
||||
rgba(0, 0, 0, 1) 260px,
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0,
|
||||
rgba(0, 0, 0, 1) 25px,
|
||||
rgba(0, 0, 0, 1) 255px,
|
||||
rgba(0, 0, 0, 1) 20px,
|
||||
rgba(0, 0, 0, 1) 250px,
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ const songInfo = (id, im) => {
|
||||
getSongDetial(id)
|
||||
.then((res) => {
|
||||
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.artists = res.data.songs[0].ar;
|
||||
info.album = res.data.songs[0].al;
|
||||
@ -69,9 +69,8 @@ const songLyric = (id) => {
|
||||
getLyric(id)
|
||||
.then((res) => {
|
||||
if (res.data.code == 200)
|
||||
pubsub.publish("zp.lyric", res.data.lrc.lyric );
|
||||
else
|
||||
pubsub.publish("zp.lyric", null);
|
||||
pubsub.publish("zp.lyric", res.data.lrc.lyric);
|
||||
else pubsub.publish("zp.lyric", null);
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
@ -128,12 +127,18 @@ const toggleSongDetail = () => {
|
||||
</div>
|
||||
|
||||
<div class="song" v-show="showInfo">
|
||||
<div class="w-song">
|
||||
<div class="song-name" @click="toggleSongDetail">
|
||||
<div class="w-song" @click="toggleSongDetail">
|
||||
<div class="song-name" >
|
||||
{{ info.name }}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user