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

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

<style lang='scss' scoped>
.numerical{
    height: 15vh;
    margin-bottom: 2vh;
    .numerical-item{
        line-height: 1.5;
        border: 1px solid var(--main-color);
        height: 100%;
        flex-flow: column;
        .cell:not(.name){
            padding: 5px 15px 5px 5px;
            font-size: 0.5rem;
            text-align: right;
            width: 100%;
            box-sizing: border-box;
        }
        .name{
           height: 100%; 
           width: 100%;
           justify-content: center;
           display: flex;
           align-items: center;
           backdrop-filter: blur(6px);
           text-shadow:0 0 3px #dbe8ff;
        }
        .number{
            border-bottom: 1px solid var(--main-color);
        }
        & + .numerical-item{
            border-left: 0;
        }
    }
}
</style>