<!--
-->
<template>
<div class="about">
<div class="chart-m-l-c">
<p class="title">{{ title }}</p>
<div class="count" ref="height">
<div
class="numberValue"
v-for="(item, index) in prosecutorArr"
:key="index"
>
<div :style="{ top: -item * height + 'px' }">
<i v-for="(ic, indexc) in 10" :key="indexc" :style="{ 'height': height + 'px' }">{{ ic - 1 }}</i>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'about',
props: {
title: String,
numbers: {
type: String,
default: '00000000'
}
},
data () {
return {
prosecutorArr: ['0', '0', '0', '0', '0', '0', '0', '0'],
height: 54
}
},
watch: {
numbers () {
this.plusNPrAll()
}
},
methods: {
// changeVal () {
// this.plusNPrAll()
// },
PrefixInteger (num, length) {
// 给数字前面补零 比如‘59832’补成8位即位‘00059832’
return (Array(length).join('0') + num).slice(-length)
},
plusNPrAll () {
// const res = this.PrefixInteger(this.numbers, 8)
// console.log(this.prosecutorArr)
this.prosecutorArr = this.numbers.split('')
}
// refreshLeft () {
// this.numbers = '00194939'
// this.plusNPrAll()
// }
},
mounted () {
this.height = this.$refs['height'].offsetHeight;
this.plusNPrAll()
// this.changeVal()
}
}
</script>
<style lang="less" scoped>
.chart-m-l-c {
width: 100%;
// height: 60px;
padding-top: 2px;
padding-left: 40px;
box-sizing: border-box;
.title {
// margin-top: 3px;
// line-height: 40px;
color: #87d4ff;
font-size: 16px;
// font-weight: 600;
}
.count {
height: 54px;
// float: left;
padding: 0 5px 0 0;
display: flex;
.numberValue {
// flex:1;
width: 40px;
height: 100%;
color: #fff;
text-align: center;
line-height: 54px;
margin: 0 2px;
position: relative;
z-index: 3;
overflow: hidden;
background: url('~@/assets/img/number_bg.png') no-repeat center;
background-size: 100% 100%;
div {
width: 100%;
height: 540px;
position: absolute;
left: 0;
top: 0;
transition: all 0.8s ease-in-out;
i {
width: 100%;
height: 54px;
display: block;
// float: left;
font-style: normal;
font-size: 18px;
color: #fff;
}
}
}
}
}
</style>
数字滚动效果组件
最新推荐文章于 2024-04-23 14:43:51 发布