<template>
    <div style="height:150px" class="box">
        <div class="boxDiv">
            <div style="color: #07ccca">300</div>
            <img src="@/assets/imgs/ditu.png" />
            <div class="mt10 divBot">总数</div>
        </div>
        <div class="boxDiv">
            <div style="color: #339900">250</div>
            <img src="@/assets/imgs/ditu.png" />
            <div class="mt10 divBot">在运</div>
        </div>
        <div class="boxDiv">
            <div style="color: #cc0000">50</div>
            <img src="@/assets/imgs/ditu.png" />
            <div class="mt10 divBot">停运</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
import { color } from '@/components/echarts/color'
const height = mainHeight(330, 3)

const info = () => {}
onMounted(() => {
    info()
})
</script>
<style lang="scss" scoped>
.box {
    display: flex;
    align-items: center;
    
    .boxDiv {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 20px;
        img {
            width: 80%;
        }
        div:nth-child(1) {
            position: absolute;
            font-size: 30px;
            top: -10px;
            font-weight: 700;
        }
        .divBot {
            font-size: 16px;
            position: absolute;
            top: -45px;
        }
        color: #fff;
    }
}
</style>
