mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-10-31 11:40:39 +00:00
111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
|
<template>
|
||
|
<div class="wrap" :style="wrapStyle">
|
||
|
<div class="hp-bar-big" :style="barStyle">
|
||
|
<div class="beat" :style="beatStyle" v-for="beat in beatList"></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
|
||
|
|
||
|
export default {
|
||
|
data() {
|
||
|
return {
|
||
|
beatList: [
|
||
|
1,2,3,4,5
|
||
|
],
|
||
|
beatWidth: 10,
|
||
|
beatHeight: 30,
|
||
|
hoverScale: 1.5,
|
||
|
beatMargin: 4,
|
||
|
move: false,
|
||
|
maxBeat: 5,
|
||
|
}
|
||
|
},
|
||
|
mounted() {
|
||
|
setInterval(() => {
|
||
|
|
||
|
this.addBeat()
|
||
|
console.log("add beat")
|
||
|
}, 3000)
|
||
|
|
||
|
},
|
||
|
methods: {
|
||
|
async addBeat() {
|
||
|
this.move = true;
|
||
|
|
||
|
setTimeout(() => {
|
||
|
this.beatList.push(6)
|
||
|
|
||
|
if (this.beatList.length > this.maxBeat) {
|
||
|
this.beatList.shift();
|
||
|
this.move = false;
|
||
|
}
|
||
|
}, 300)
|
||
|
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
wrapStyle() {
|
||
|
let topBottom = (((this.beatHeight * this.hoverScale) - this.beatHeight) / 2);
|
||
|
let leftRight = (((this.beatWidth * this.hoverScale) - this.beatWidth) / 2);
|
||
|
|
||
|
return {
|
||
|
padding: `${topBottom}px ${leftRight}px`,
|
||
|
width: (this.beatWidth + this.beatMargin * 2) * this.maxBeat + (leftRight * 2) + "px"
|
||
|
}
|
||
|
},
|
||
|
barStyle() {
|
||
|
if (this.move) {
|
||
|
let width = -(this.beatWidth + this.beatMargin * 2);
|
||
|
|
||
|
return {
|
||
|
transition: "all ease-in-out 0.25s",
|
||
|
transform: `translateX(${width}px)`,
|
||
|
}
|
||
|
} else {
|
||
|
return {
|
||
|
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
beatStyle() {
|
||
|
return {
|
||
|
width: this.beatWidth + "px",
|
||
|
height: this.beatHeight + "px",
|
||
|
margin: this.beatMargin + "px",
|
||
|
"--hover-scale": this.hoverScale,
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped lang="scss">
|
||
|
@import "../assets/vars.scss";
|
||
|
|
||
|
.wrap {
|
||
|
overflow: hidden;
|
||
|
width: 100px;
|
||
|
|
||
|
white-space: nowrap;
|
||
|
}
|
||
|
|
||
|
.hp-bar-big {
|
||
|
.beat {
|
||
|
display: inline-block;
|
||
|
background-color: $primary;
|
||
|
border-radius: 50rem;
|
||
|
transition: all ease-in-out 0.15s;
|
||
|
|
||
|
|
||
|
&:hover {
|
||
|
opacity: 0.8;
|
||
|
transform: scale(var(--hover-scale));
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
</style>
|