<template>
|
<div class="highMonthContainer">
|
<div class="red" ref="red">
|
<div class="value">
|
<p class="count tc">9</p>
|
<p class="month tc">2月</p>
|
</div>
|
</div>
|
<div class="yellow" ref="yellow">
|
<div class="value">
|
<p class="count tc">7</p>
|
<p class="month tc">5月</p>
|
</div>
|
</div>
|
<div class="blue" ref="blue">
|
<div class="value">
|
<p class="count tc">3</p>
|
<p class="month tc">6月</p>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "highMonth",
|
components: {},
|
data() {
|
return {
|
timer: null,
|
};
|
},
|
mounted() {
|
this.$nextTick(() => {
|
this.initAnimate();
|
});
|
},
|
destroyed() {
|
clearTimeout(this.timer);
|
},
|
methods: {
|
initAnimate() {
|
clearTimeout(this.timer);
|
this.timer = setTimeout(() => {
|
this.$refs.red.style.transform =
|
"translateY(" +
|
(Math.floor(Math.random() * (20 - -20 + 1)) + -20) +
|
"px)";
|
this.$refs.yellow.style.transform =
|
"translateY(" +
|
(Math.floor(Math.random() * (20 - -20 + 1)) + -20) +
|
"px)";
|
this.$refs.blue.style.transform =
|
"translateY(" +
|
(Math.floor(Math.random() * (20 - -20 + 1)) + -20) +
|
"px)";
|
setTimeout(() => {
|
// console.log(this.$refs.red)
|
// console.log(this.$refs.yellow)
|
// console.log(this.$refs.blue)
|
if (this.$refs.red && this.$refs.yellow && this.$refs.yellow) {
|
this.$refs.red.style.transform = "translateY(0)";
|
this.$refs.yellow.style.transform = "translateY(0)";
|
this.$refs.blue.style.transform = "translateY(0)";
|
this.initAnimate();
|
}
|
}, 2000);
|
}, 2000);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.highMonthContainer {
|
height: 100%;
|
position: relative;
|
|
& > div {
|
position: absolute;
|
transition: all 2s;
|
|
.value {
|
position: absolute;
|
width: 100%;
|
top: 44%;
|
transform: translateY(-50%);
|
|
.count {
|
font-size: 16px;
|
line-height: 16px;
|
margin-bottom: 8px;
|
color: #fff;
|
font-family: DIN;
|
}
|
|
.month {
|
font-size: 14px;
|
line-height: 14px;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.red {
|
width: 96px;
|
height: 106px;
|
top: 32px;
|
left: 0;
|
background: no-repeat url("./month1.png");
|
|
.value {
|
.month {
|
color: #df3747;
|
}
|
}
|
}
|
|
.yellow {
|
width: 86px;
|
height: 96px;
|
top: 12px;
|
left: 125px;
|
background: no-repeat url("./month2.png");
|
|
.value {
|
.month {
|
color: #ffb756;
|
}
|
}
|
}
|
|
.blue {
|
width: 80px;
|
height: 90px;
|
top: 108px;
|
left: 88px;
|
background: no-repeat url("./month3.png");
|
|
.value {
|
.month {
|
color: #00c6ff;
|
}
|
}
|
}
|
}
|
</style>
|
