flyLong/tv/src/components/sumNumber.vue

<template>
    <div class="sumNumberContainer">
        <div class="imgContainer">
                <span v-for="n in imgNumber">
                    <em v-if="n == 0"><img src="../static/img/num/0.svg" alt=""></em>
                    <em v-if="n == 1"><img src="../static/img/num/1.svg" alt=""></em>
                    <em v-if="n == 2"><img src="../static/img/num/2.svg" alt=""></em>
                    <em v-if="n == 3"><img src="../static/img/num/3.svg" alt=""></em>
                    <em v-if="n == 4"><img src="../static/img/num/4.svg" alt=""></em>
                    <em v-if="n == 5"><img src="../static/img/num/5.svg" alt=""></em>
                    <em v-if="n == 6"><img src="../static/img/num/6.svg" alt=""></em>
                    <em v-if="n == 7"><img src="../static/img/num/7.svg" alt=""></em>
                    <em v-if="n == 8"><img src="../static/img/num/8.svg" alt=""></em>
                    <em v-if="n == 9"><img src="../static/img/num/9.svg" alt=""></em>
                </span>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                imgNumber: ''
            }
        },
        props: ['curNumber'],
        mounted(){
            this.imgNumber = this.curNumber.toString();
        },
        watch: {
            'curNumber' (val) {
                this.numTurnImg(val);
            }
        },
        methods: {
            numTurnImg(num){
                this.imgNumber = num.toString();
            }
        }
    }
</script>

<style scoped>
    .sumNumberContainer {
        width: 100%;
        /*width: 960px;*/
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    .imgContainer {
        width: 100%;
        overflow: hidden;
        display: flex;
        margin: 0 auto;
        justify-content: center;
        text-align: center;
        align-items:center;
        flex: 1;
        border-radius: 33rem;
        /*background: linear-gradient(#000 0%, rgba(0, 0, 0, 0.1) 100%);*/

    }
    .imgContainer span {
        /*width: 30px;*/
        /*display: flex;*/
        display: inline-block;
        float: none;
        /*justify-content: center;*/
        /*align-items:center;*/
        /*flex: 1;*/
    }
    .imgContainer span em img {
        /*width: 100%;*/
        width: 1.3rem;
        height: 2rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
</style>