<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">3</p>
|
<p class="month tc">6月</p>
|
</div>
|
</div>
|
<div class="blue" ref="blue">
|
<div class="value">
|
<p class="count tc">7</p>
|
<p class="month tc">5月</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: 40%;
|
position: relative;
|
.red {
|
position: absolute;
|
width: 110px;
|
height: 110px;
|
background-size: 100% 100%;
|
top: 5px;
|
left: 10px;
|
background: no-repeat url('~@/assets/img/lifeline/riskMonitoring/month.png');
|
background-size: 100% 100%;
|
}
|
|
.yellow {
|
position: absolute;
|
width: 90px;
|
height: 90px;
|
top: 10px;
|
left: 140px;
|
background: no-repeat url('~@/assets/img/lifeline/riskMonitoring/month.png');
|
background-size: 100% 100%;
|
}
|
|
.blue {
|
position: absolute;
|
width: 100px;
|
height: 100px;
|
top: 0px;
|
right: 10px;
|
background: no-repeat url('~@/assets/img/lifeline/riskMonitoring/month.png');
|
background-size: 100% 100%;
|
}
|
.value {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
.count{
|
font-size: 28px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #fefefe;
|
letter-spacing: 1.5px;
|
text-shadow: 0px 1.5px 12px 0px rgba(0,29,45,0.53);
|
background: linear-gradient(0deg,rgba(62,242,255,1) 0%, rgba(222,222,222,1) 100%);
|
-webkit-text-fill-color: transparent;
|
-webkit-background-clip: text;
|
}
|
.month {
|
font-size: 16px;
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #cbcbcb;
|
letter-spacing: 1.8px;
|
text-shadow: 0px 1.5px 0.98px 0.03px rgba(0,14,17,0.19);
|
}
|
}
|
}
|
</style>
|
