carInsightSystem/src/views/Index/dynamicNumber/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-09 14:25:05
 * @LastEditTime: 2021-10-11 18:11:01
 * @LastEditors: Please set LastEditors
 * @Description: 大数据统计gif
 * @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue
-->
<template>
    <div class="dy-outter">
        <div class="d1">
            <span class="s1">APP</span>
            <span class="s2">
                 <countTo :startVal='0' :endVal='1320897' :duration='3000'></countTo>
            </span>
        </div>
        <div class="d1" :style="{top: '340px', left: '0px'}">
            <span class="s1">其他</span>
            <span class="s2">
                <countTo :startVal='0' :endVal='822588' :duration='3000'></countTo>
            </span>
        </div>
        <div class="d1" :style="{top: '91px', left: '426px'}">
            <span class="s1">微信</span>
            <span class="s2">
                <countTo :startVal='0' :endVal='658345' :duration='3000'></countTo>
            </span>
        </div>
        <div class="d2" :style="{top: '240px', left: '656px'}">
            <span class="s1">
                <countTo :startVal='0' :endVal='567894' :duration='3000'></countTo>
            </span>
            <span class="s2">论坛</span> 
        </div>
        <div class="d2" :style="{top: '340px', left: '656px'}">
            <span class="s1">
                <countTo :startVal='0' :endVal='567894' :duration='3000'></countTo>
            </span>
            <span class="s2">微博</span> 
        </div>
        <div class="d2" :style="{top: '490px', left: '246px'}">
            <span class="s1">
                 <countTo :startVal='0' :endVal='567894' :duration='3000'></countTo>
            </span>
            <span class="s2">新闻</span> 
        </div>
        <div class="d3">
            <span class="s1">系统入库 数据总量</span>
            <span class="s2">
                <countTo :startVal='0' :endVal='274073195' :duration='3000'></countTo>
            </span>
        </div>
    </div>
</template>

<script>
import countTo from 'vue-count-to';
export default {
    name: "dynamic-number",
    components: {
        countTo
    }
}
</script>

<style lang="less" scoped>
.dy-outter {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('../../../assets/images/Index/d3.gif');
    background-repeat: no-repeat;
    background-size: cover;
    .d1 {
        position: absolute;
        display: flex;
        width: 280px;
        height: 60px;
        background-image: url('../../../assets/images/Index/img_jbtter.png');
        background-repeat: no-repeat;
        background-size: cover;
        justify-content: flex-start;
        align-items: center;
        top: 240px;
        left: 0px;
        .s1 {
            display: block;
            font-size: 18px;
            margin-left: 32px;
            color: #d2dadf;
        }
        .s2 {
            display: block;
            font-size: 28px;
            font-family: Bebas;
            color: #FFFFFF;
            margin-left: 24px;
        }
    }
    .d2 {
        position: absolute;
        display: flex;
        width: 280px;
        height: 60px;
        background-image: url('../../../assets/images/Index/img_jbtter.png');
        background-repeat: no-repeat;
        background-size: cover;
        justify-content: flex-end;
        align-items: center;
        top: 240px;
        left: 0px;
        .s2 {
            display: block;
            font-size: 18px;
            margin-left: 32px;
            color: #d2dadf;
            margin-right: 32px;
        }
        .s1 {
            display: block;
            font-size: 28px;
            font-family: Bebas;
            color: #FFFFFF;
        }
    }
    .d3 {
        position: absolute;
        width: 320px;
        height: 82px;
        background-image: url('../../../assets/images/Index/img_jbtt.png');
        background-repeat: no-repeat;
        background-size: cover;
        left: 308px;
        top: 323px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .s1 {
            display: block;
            font-size: 18px;
            color: #d2dadf;
            width: 72px;
            margin-left: 38px;
        }
        .s2 {
            display: block;
            font-size: 32px;
            font-family: Bebas;
            color: #FFFFFF;
            margin-left: 23px;
        }
    }
}

</style>