castgroup_bigscreen/src/components/numerical.vue

<!--
 * @LastEditors: gcz
-->
<template>
    <div class="numerical">
        <div class="ntitle">{{ntitle}}</div>
        <div class="item-wrap u-flex u-flex-wrap">
            <div class="numerical-item" v-for="(item,index) in data" :key="item.name+index">
                <div class="cell name">{{item.name}}：</div>
                <span class="cell number">{{item.number}}</span>
                <span class="cell unit">{{item.unit}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    //import { projectClassList } from '@/api/project/projectclass';
    export default {
        name: '',
        props:{
            data:{
                type: Array,
                default: null,
            },
            ntitle:{
                type: String,
                default: '数据概况',
            },
        },
        components: {},
        data () {
            return {
                
            };
        },
        created(){
            // console.log('data',this.data);
        },
        methods: {},
    }
</script>

<style lang='scss' scoped>
@import url('https://fonts.font.im/css?family=Rubik');
.numerical{
    // box-sizing: border-box;
    // margin-bottom: 2vh;
    // border-radius: 10px;
    // padding: 20px 24px;
    // border: 1px solid var(--main-color);
    .item-wrap{
        .numerical-item{
            padding: 0 0 15px 15px;
            box-sizing: border-box;
            width: 50%;
            text-align: left;
            .name{
                font-size: 18px;
                color: #a6b7bf;
                margin-bottom: 5px;
            }
            .number{
                color: var(--main-color);
                font-size: 39px;
                margin-right: 5px;
                font-family: 'Rubik', sans-serif;
            }
            .unit{
                font-size: 17px;
                color: var(--main-color);
            }
        }
    }
}
</style>