<template> <div> <IOdometer class="iOdometer" :value="num" format="(ddd).dd" /> </div> </template> <script> import IOdometer from "vue-odometer"; import "odometer/themes/odometer-theme-default.css"; export default {
components: {
IOdometer, }, data() {
return {
num: 99.99, }; }, mounted() {
const that = this; setInterval(function () {
that.num += 1; }, 3000 * 30); }, }; </script> <style lang='scss' scoped > .iOdometer {
font-size: 2em; margin: 0; ::v-deep .odometer-digit {
display: inline-block; width: 28px; height: 34px; background: linear-gradient(0deg, #0e2f6d, rgba(6, 41, 106, 0)); border: 1px solid; border-image: linear-gradient( 0deg, rgba(0, 182, 255, 0.8), rgba(0, 182, 255, 0.8) ); font-family: "DigifaceWide"; text-align: center; color: #fff; margin-left: 4px; border-radius: 3px; } ::v-deep .odometer-formatting-mark {
display: inline-block; width: 28px; height: 34px; background: linear-gradient(0deg, #0e2f6d, rgba(6, 41, 106, 0)); border: 1px solid; border-image: linear-gradient( 0deg, rgba(0, 182, 255, 0.8), rgba(0, 182, 255, 0.8) ); font-family: "DigifaceWide"; text-align: center; color: #fff; margin-left: 4px; border-radius: 3px; } } </style> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/212990.html原文链接：https://javaforall.net
