完美解决歌词渐隐显示
This commit is contained in:
parent
15d20b8b52
commit
69643be75a
83
public/test.html
Normal file
83
public/test.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
/>
|
||||
<title>测试网页</title>
|
||||
<style>
|
||||
body {
|
||||
/* background-color: rgba(244, 244, 244, 1); */
|
||||
background-color: rgba(233, 233, 233, 1);
|
||||
}
|
||||
.content {
|
||||
margin: 2em;
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
/* background-image: linear-gradient(
|
||||
rgba(255, 255, 255, 0),
|
||||
rgb(255, 255, 255, 1)
|
||||
); */
|
||||
/* background-color: rgba(233, 233, 233, 1); */
|
||||
|
||||
/* -webkit-mask-image: -webkit-gradient(
|
||||
linear,
|
||||
left 90%,
|
||||
left bottom,
|
||||
from(rgba(0, 0, 0, 1)),
|
||||
to(rgba(0, 0, 0, 0))
|
||||
); */
|
||||
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0,
|
||||
rgba(0, 0, 0, 1) 20%,
|
||||
rgba(0, 0, 0, 1) 80%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgba(0, 0, 0, 1)
|
||||
);
|
||||
|
||||
/* background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 0) 30%,
|
||||
rgba(0, 0, 0, 0.4) 10%,
|
||||
rgba(0, 0, 0, 0.6) 40%,
|
||||
rgba(0, 0, 0, 0) 70%,
|
||||
rgba(0, 0, 0, 1) 100%
|
||||
); */
|
||||
}
|
||||
.lyric-line {
|
||||
/* mix-blend-mode: overlay; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background-color: #eee">asdfladjflsdfsdlf</div>
|
||||
<div class="content">
|
||||
<div class="lyric-line">一句歌词,哈哈</div>
|
||||
<div class="lyric-line">一句歌词,哈歌词歌词哈</div>
|
||||
<div class="lyric-line">一句歌歌词歌词词,哈哈</div>
|
||||
<div class="lyric-line">一句歌词,哈哈</div>
|
||||
<div class="lyric-line">一句歌词,哈哈</div>
|
||||
<div class="lyric-line">一句歌词,哈歌词歌词歌词哈</div>
|
||||
<div class="lyric-line">一句歌词,哈哈</div>
|
||||
<div class="lyric-line">一句歌歌词词,哈哈</div>
|
||||
<div class="lyric-line">一句歌词,哈哈</div>
|
||||
<div class="lyric-line">一句歌歌词歌词歌词词,哈哈</div>
|
||||
<div class="lyric-line">一句歌歌词歌词词,哈哈</div>
|
||||
<div class="lyric-line">一句歌词,哈哈</div>
|
||||
<div class="lyric-line">一句歌歌词歌词词,哈哈</div>
|
||||
<div class="lyric-line">一句歌词,哈歌词歌词歌词歌词哈</div>
|
||||
<div class="lyric-line">一句歌词,哈哈</div>
|
||||
<div class="lyric-line">一句歌歌词歌词歌词词,哈哈</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, defineProps, onUnmounted, onDeactivated } from "vue";
|
||||
import { ref, onUnmounted, onDeactivated, } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -21,19 +21,18 @@ const currentLyricIdx = ref(-1);
|
||||
const lyList = ref('')
|
||||
|
||||
//#region 唱机
|
||||
let interval = [];
|
||||
let interval = 0;
|
||||
watch(
|
||||
() => [store.state.settings.playing, store.state.showSongDetail],
|
||||
([playing, showSongDetail]) => {
|
||||
// console.log(playing, showSongDetail);
|
||||
if (playing && showSongDetail) {
|
||||
interval.push(
|
||||
setInterval(() => {
|
||||
clearInterval(interval)
|
||||
interval = setInterval(() => {
|
||||
coverAngle.value += 0.5;
|
||||
}, 40)
|
||||
);
|
||||
} else {
|
||||
interval.map((item) => clearInterval(item));
|
||||
interval = [];
|
||||
clearInterval(interval)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
@ -68,7 +67,7 @@ const handleLyric = (ly) => {
|
||||
watch(
|
||||
()=> [currentLyricIdx.value,store.state.showSongDetail],
|
||||
([val, showSongDetail])=>{
|
||||
console.log('changed lyric');
|
||||
// console.log('changed lyric');
|
||||
if(val>0){
|
||||
// let elContent = document.getElementsByClassName('ly-content')[0]
|
||||
nextTick(()=>{
|
||||
@ -205,7 +204,7 @@ export default {};
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 280px;
|
||||
right: 296px;
|
||||
height: 40px;
|
||||
background-color: #f9f9f9;
|
||||
padding-left: 50px;
|
||||
@ -305,6 +304,21 @@ export default {};
|
||||
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, 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, 0)
|
||||
);
|
||||
|
||||
// background-image : linear-gradient(180deg,hsla(255,0%,100%,0),rgba(255, 255, 255, 0.521));
|
||||
|
||||
.ly-content {
|
||||
@ -316,7 +330,7 @@ export default {};
|
||||
// justify-items: center;
|
||||
|
||||
.ly-line {
|
||||
min-height: 32px;
|
||||
min-height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user