话不多说，直接上代码
<template>
<div class="scroll-number-section">
<div :class="['number-list',`number-length${length}`,{'allZero':allZero}]">
<div :class="['number-item',`number-item${item}`,{'disabled-num':index<(9-length)}]" v-for="(item,index) in numberStrArr" :key="index">
<div class="number-group">
<div class="number-group-item" v-for="item in 12" :key="item"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ScrollNumber",
props:["number"],
data(){
return {
allZero:false,
length:0,
numberStrArr:["0","0","0","0","0","0","0","0","0"]
}
},
watch:{
number:{
handler:function(value){
let result = ["0","0","0","0","0","0","0","0","0"]
const valueArr = value.split("")
const valueArrReverse = valueArr.reverse()
valueArrReverse.forEach((item,index)=>{
const itemPosition = result.length-1-index
result[itemPosition] = item
})
this.length = valueArr.length
this.allZero = result.every(item=>item==="0")
this.numberStrArr = result
},
immediate: true
}
}
}
</script>
<style lang="scss" scoped>
$opacity:0.5;
.scroll-number-section{
width: 100%;
height: 100%;
background: url(../../assets/img/prediction/rank-number-setction-bg@2x.webp) no-repeat center center / contain;
box-sizing: border-box;
padding: 10px 0;
.number-list{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
&::before,
&::after{
content:"";
width: 5px;
height: 6px;
position: absolute;
left: 72px;
bottom: 3px;
background: url(../../assets/img/prediction/rank-split.webp) no-repeat center bottom / contain;
}
&::after{
left: 124px;
}
&.allZero{
.number-item{
opacity: $opacity;
}
}
&.number-length1,
&.number-length2,
&.number-length3{
&::after{
opacity: $opacity;
}
}
&.number-length1,
&.number-length2,
&.number-length3,
&.number-length4,
&.number-length5,
&.number-length6{
&::before{
opacity: $opacity;
}
}
.number-item{
position: relative;
height: 100%;
width: 14px;
top: 0;
margin: 0 1px;
overflow: hidden;
&:nth-child(3),
&:nth-child(6){
margin-right: 5px;
}
background: url(../../assets/img/prediction/rank-number-bg@2x.webp) no-repeat center center / contain;
.number-group{
width: 80%;
height: 860%;
position: absolute;
left: 10%;
transition: all ease 1s;
.number-group-item{
overflow: hidden;
height: 8.33333333%;
width: 100%;
background-image: url(../../assets/img/prediction/rank0@2x.webp);
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
&:nth-child(1){
background-image: url(../../assets/img/prediction/rank9@2x.webp);
}
&:nth-child(2){
background-image: url(../../assets/img/prediction/rank0@2x.webp);
}
&:nth-child(3){
background-image: url(../../assets/img/prediction/rank1@2x.webp);
}
&:nth-child(4){
background-image: url(../../assets/img/prediction/rank2@2x.webp);
}
&:nth-child(5){
background-image: url(../../assets/img/prediction/rank3@2x.webp);
}
&:nth-child(6){
background-image: url(../../assets/img/prediction/rank4@2x.webp);
}
&:nth-child(7){
background-image: url(../../assets/img/prediction/rank5@2x.webp);
}
&:nth-child(8){
background-image: url(../../assets/img/prediction/rank6@2x.webp);
}
&:nth-child(9){
background-image: url(../../assets/img/prediction/rank7@2x.webp);
}
&:nth-child(10){
background-image: url(../../assets/img/prediction/rank8@2x.webp);
}
&:nth-child(11){
background-image: url(../../assets/img/prediction/rank9@2x.webp);
}
&:nth-child(12){
background-image: url(../../assets/img/prediction/rank0@2x.webp);
}
}
}
&.disabled-num{
opacity: $opacity;
}
&.number-item0{
.number-group{
top: -14px;
.number-group-item{
&:nth-child(1),
&:nth-child(3){
opacity:$opacity
}
}
}
}
&.number-item1{
.number-group{
top: -33px;
.number-group-item{
&:nth-child(2),
&:nth-child(4){
opacity:$opacity
}
}
}
}
&.number-item2{
.number-group{
top: -52px;
.number-group-item{
&:nth-child(3),
&:nth-child(5){
opacity:$opacity
}
}
}
}
&.number-item3{
.number-group{
top: -70px;
.number-group-item{
&:nth-child(4),
&:nth-child(6){
opacity:$opacity
}
}
}
}
&.number-item4{
.number-group{
top: -89px;
.number-group-item{
&:nth-child(5),
&:nth-child(7){
opacity:$opacity
}
}
}
}
&.number-item5{
.number-group{
top: -107px;
.number-group-item{
background-size: 99% auto;
&:nth-child(6),
&:nth-child(8){
opacity:$opacity
}
}
}
}
&.number-item6{
.number-group{
top: -126px;
.number-group-item{
&:nth-child(7),
&:nth-child(9){
opacity:$opacity
}
}
}
}
&.number-item7{
.number-group{
top: -145px;
.number-group-item{
&:nth-child(8),
&:nth-child(10){
opacity:$opacity
}
}
}
}
&.number-item8{
.number-group{
top: -163px;
.number-group-item{
&:nth-child(9),
&:nth-child(11){
opacity:$opacity
}
}
}
}
&.number-item9{
.number-group{
top: -182px;
.number-group-item{
&:nth-child(10),
&:nth-child(12){
opacity:$opacity
}
}
}
}
}
}
}
</style>
把图片换成自己的图片就可以了，组件就一个参数number
网友评论