html
<div class="machine" v-show="showMachine" @click.stop="showMachine = true">
<img src="../assets/machine.png" alt="" />
<div class="title">您正在為xxx主播進行打分</div>
<div id="score">
<div
v-for="(itemScore, indexScore) in scoreList"
:key="indexScore"
class="num"
:style="{
color: scoreNum === indexScore ? '#3A59FF' : '#984afe',
fontSize: scoreNum === indexScore ? '4.8rem' : '3rem',
lineHeight: scoreNum === indexScore ? '5rem' : '4rem',
fontWeight: scoreNum === indexScore ? 'bold' : 'normal',
}"
>
<div>{{ itemScore.num }}<span class="fen">分</span></div>
</div>
</div>
<div class="sure" @click="makeSure">
<img src="/src/assets/sure.png" alt="" />
</div>
</div>
script
export default {
data() {
return {
showMachine: false, // 显示机台
isVideoVisible: false, // 视频是否可见
scoreList: [
{ num: "01" },
{ num: "02" },
{ num: "03" },
{ num: "04" },
{ num: "05" },
{ num: "06" },
],
scoreNum: 0,
scrollView: 0,
};
},
methods: {
openMachine() {
this.showMachine = true;
document.body.style.overflow = "hidden";
// 获取滚动盒子元素
var scrollBox = document.getElementById("score");
// 添加滚动事件监听器
scrollBox.addEventListener("scroll", this.debounce(this.handleScrollStop, 100));
},
debounce(func, wait) {
let timeout;
return function executedFunction() {
const context = this;
const scrollTop = context.scrollTop; // 获取滚动距离
clearTimeout(timeout); // 清除上一次延时函数
timeout = setTimeout(() => {
func.call(context, scrollTop); // 延时后执行函数
}, wait);
};
},
handleScrollStop(scrollTop) {
if (0 < scrollTop && scrollTop <= 40) {
this.scoreNum = 1;
scrollTop = 31;
} else if (40 < scrollTop && scrollTop <= 80) {
this.scoreNum = 2;
scrollTop = 62;
} else if (80 < scrollTop && scrollTop <= 120) {
this.scoreNum = 3;
scrollTop = 94;
} else if (120 < scrollTop && scrollTop <= 150) {
this.scoreNum = 4;
scrollTop = 125;
} else if (150 < scrollTop && scrollTop <= 200) {
this.scoreNum = 5;
scrollTop = 157;
} else if (200 < scrollTop && scrollTop <= 240) {
this.scoreNum = 6;
} else if (240 < scrollTop && scrollTop <= 280) {
this.scoreNum = 7;
} else {
this.scoreNum = 0;
}
this.scrollView = scrollTop;
// 这里可以执行一些基于滚动位置的操作
this.debounce(this.changeScroll(), 500);
},
// 滚动指定位置
changeScroll() {
const scrollBox = document.getElementById("score");
scrollBox.scrollTo({
top: this.scrollView,
behavior: "smooth",
});
},
// 确认打分
makeSure() {},
},
};
css
// 显示机台
.machine {
position: fixed;
animation: shake 0.5s;
top: 15rem;
z-index: 1000;
.title {
position: absolute;
top: 8.2rem;
left: 12rem;
font-weight: 600;
font-size: 2.2936rem;
color: #ffffff;
}
.sure {
position: absolute;
bottom: 18.5rem;
left: 15rem;
width: 20rem;
height: 8rem;
&:active {
animation: shake 0.5s;
}
}
/* 定义关键帧动画 */
@keyframes shake {
0% {
transform: translateZ(0);
}
90% {
transform: translateZ(-3px) rotate(2deg);
}
80% {
transform: translateZ(3px) rotate(-2deg);
}
100% {
transform: translateZ(0);
}
}
#score {
display: flex;
flex-direction: column;
align-items: center;
font-size: 3.0581rem;
color: #984afe;
position: absolute;
top: 20.4rem;
left: 10rem;
overflow: hidden;
height: 19rem;
width: 30rem;
overflow-y: auto;
padding: 7rem 0;
&::-webkit-scrollbar {
width: 0; /* 设置滚动条宽度为0 */
background: transparent; /* 隐藏滚动条背景 */
display: none;
}
.num {
height: 4.8rem;
}
.fen {
font-size: 1.682rem;
line-height: 2.4rem;
}
}
}