<!--
 * @LastEditors: gcz
-->
<template>
    <div class="numerical">
        <div class="ntitle">{{$store.state.addr.selectAddr}}{{ntitle}}</div>
        <!-- <div class="ntitle">
            <span v-if="$store.state.addr.mapLevel=='province'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
            <span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
            <span v-if="$store.state.addr.mapLevel=='district'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
            <span v-if="$store.state.addr.mapLevel=='street'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
        </div> -->
        <!-- <div class="addr">{{$store.state.addr.selectAddr}}</div> -->
        <div class="item-wrap">
            <div class="inner 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>
    </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{
        height: calc( 100% - 48px );
        display:flex;
        align-items: center;
        .inner{
            width: 100%;
        }
        .numerical-item{
            padding: 0 15px 15px 15px;
            box-sizing: border-box;
            width: 50%;
            text-align: center;
            .name{
                font-size: 18px;
                color: #a6b7bf;
                margin-bottom: 5px;
            }
            .number{
                color: var(--main-color);
                font-size: 35px;
                margin-right: 5px;
                font-family: 'Rubik', sans-serif;
            }
            .unit{
                font-size: 17px;
                color: var(--main-color);
            }
        }
    }
}
@media only screen and (max-width : 1280px) {
  //概况
    .numerical{

        .item-wrap{
            .numerical-item{
                padding: 0 0 15px 5px;
                .name{
                    font-size: 16px;
                }
                .number{
                    font-size: 24px;
                }
                .unit{
                    font-size: 16px;
                }
            }
        }
    }
}

</style>