<template>
<div class="allcontent">
<div class="headerimg">
<p class="imgresult">
<span>剩余 {{numb}} 次机会</span>
</p>
</div>
<div class="ldbg">
<div v-for="item of list" :key='item.id' :class="item.id==sui?'active':''"></div>
<p class="ldbutton" @click="btn"></p>
</div>
<div class="imgresultfoot">
<span>我的中奖</span>
</div>
</div>
</template>
<script>
export default {
props: {
list: Array,
numb: Number
},
data() {
return {
num: 0,
sui:0
};
},
methods:{
btn(){
setInterval(()=>{
this.sui = Math.floor(Math.random()*8)+1
console.log(this.sui)
},100)
}
}
};
</script>
<style scoped>
.allcontent {
width: 100%;
/* height: 13.2rem; */
margin: -1rem auto;
}
.allcontent .headerimg {
width: 100%;
height: 5.9rem;
background: url("../../../../../public/image/bg.png") no-repeat;
background-size: 100% 5.9rem;
display: flex;
}
.imgresult {
width: 3.7rem;
height: 0.62rem;
background: url("../../../../../public/image/标题框.png") no-repeat;
background-size: 3.7rem 0.62rem;
margin: 3.6rem auto;
text-align: center;
line-height: 0.62rem;
}
.allcontent .headerimg .imgresult span {
color: #ffffff;
}
.ldbg {
width: 6.9rem;
height:7.4rem;
margin: -0.8rem auto;
background-color: rgba(63, 110, 153, 0.9);
padding-top: 0.05rem;
display: flex;
flex-wrap: wrap;
}
.ldbg > div {
width: 2.27rem;
height: 2rem;
margin-top: 0.1rem;
border: .2rem solid transparent;
background: url("../../../../../public/image/01 拷贝 3.png") no-repeat;
background-size: 1.87rem 1.81rem;
}
.ldbg > div.active{
border: .2rem solid yellow;
}
.ldbg > :nth-child(1) {
order: -2;
}
.ldbg > :nth-child(2) {
order: -2;
}
.ldbg > :nth-child(3) {
order: -2;
}
.ldbg > :nth-child(4) {
order: -2;
}
.ldbg .ldbutton {
width: 1.87rem;
height: 1.81rem;
background: url("../../../../../public/image/01 拷贝 4.png") no-repeat;
background-size: 1.87rem 1.81rem;
order: -1;
margin-top: 0.3rem;
margin-left: .2rem;
margin-right: .2rem;
}
.imgresultfoot {
width: 3.7rem;
height: 0.62rem;
background: url("../../../../../public/image/标题框.png") no-repeat;
background-size: 3.7rem 0.62rem;
margin: 1.4rem auto;
text-align: center;
line-height: 0.62rem;
color: #ffffff;
}
.app-content {
padding-bottom: 0;
}
</style>
vue之随机跑马灯组件
最新推荐文章于 2024-07-22 09:29:57 发布