144 lines
3.8 KiB
Vue
144 lines
3.8 KiB
Vue
<template>
|
||
<div class="chartNum" style="margin: 0 20px;">
|
||
|
||
<div class="box-item">
|
||
<li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum"
|
||
:key="index">
|
||
<span v-if="!isNaN(item)">
|
||
<i ref="numberItem">0123456789</i>
|
||
</span>
|
||
<span class="comma" v-else>{{ item }}</span>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
props: ['num'],
|
||
data() {
|
||
return {
|
||
orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
|
||
|
||
}
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this.toOrderNum(this.num) // 这里输入数字即可调用
|
||
}, 500);
|
||
|
||
},
|
||
methods: {
|
||
// 设置文字滚动
|
||
setNumberTransform() {
|
||
const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
|
||
const numberArr = this.orderNum.filter(item => !isNaN(item))
|
||
// 结合CSS 对数字字符进行滚动,显示订单数量
|
||
for (let index = 0; index < numberItems.length; index++) {
|
||
const elem = numberItems[index]
|
||
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
|
||
}
|
||
},
|
||
// 处理总订单数字
|
||
toOrderNum(num) {
|
||
num = num.toString()
|
||
// 把订单数变成字符串
|
||
if (num.length < 8) {
|
||
num = '0' + num // 如未满八位数，添加"0"补位
|
||
this.toOrderNum(num) // 递归添加"0"补位
|
||
} else if (num.length === 8) {
|
||
// 订单数中加入逗号
|
||
// num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
|
||
this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
|
||
} else {
|
||
// 订单总量数字超过八位显示异常
|
||
this.$message.warning('总量数字过大')
|
||
}
|
||
this.setNumberTransform()
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang='scss'>
|
||
/*订单总量滚动数字设置*/
|
||
.box-item {
|
||
position: relative;
|
||
height: 80px;
|
||
|
||
font-size: 54px;
|
||
line-height: 41px;
|
||
text-align: center;
|
||
list-style: none;
|
||
color: white;
|
||
writing-mode: vertical-lr;
|
||
text-orientation: upright;
|
||
/*文字禁止编辑*/
|
||
-moz-user-select: none;
|
||
/*火狐*/
|
||
-webkit-user-select: none;
|
||
/*webkit浏览器*/
|
||
-ms-user-select: none;
|
||
/*IE10*/
|
||
-khtml-user-select: none;
|
||
/*早期浏览器*/
|
||
user-select: none;
|
||
/* overflow: hidden; */
|
||
}
|
||
|
||
/* 默认逗号设置 */
|
||
.mark-item {
|
||
width: 10px;
|
||
height: 100px;
|
||
margin-right: 5px;
|
||
line-height: 10px;
|
||
font-size: 48px;
|
||
position: relative;
|
||
|
||
&>span {
|
||
position: absolute;
|
||
width: 100%;
|
||
bottom: 0;
|
||
writing-mode: vertical-rl;
|
||
text-orientation: upright;
|
||
}
|
||
}
|
||
|
||
/*滚动数字设置*/
|
||
.number-item {
|
||
width: 41px;
|
||
height: 75px;
|
||
/* 背景图片 */
|
||
background: url('/static/index/SZBG.png') no-repeat center center;
|
||
// background: #ccc;
|
||
list-style: none;
|
||
margin-right: 5px;
|
||
// background:rgba(250,250,250,1);
|
||
border-radius: 4px;
|
||
|
||
&>span {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
width: 100%;
|
||
height: 100%;
|
||
writing-mode: vertical-rl;
|
||
text-orientation: upright;
|
||
overflow: hidden;
|
||
|
||
&>i {
|
||
font-style: normal;
|
||
position: absolute;
|
||
top: 11px;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
transition: transform 1s ease-in-out;
|
||
letter-spacing: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.number-item:last-child {
|
||
margin-right: 0;
|
||
}
|
||
</style>
|
||
|