<template>

    <div class="flex_home">
        <HeadlineTag type="right" value="停车系统"></HeadlineTag>
        <div class="box_arch">
            <div class="box_vehicle">
                <div class="tect_arch_tc">
                    <svg class="arch_icon_tc" aria-hidden="true">
                        <defs>
                            <linearGradient id="myleisure" x1="0%" y1="100%" x2="0%" y2="0%">
                                <stop offset="0%" stop-color="rgb(21, 213, 21)" />
                                <stop offset="100%" stop-color="rgb(255,255,255)" />
                            </linearGradient>
                        </defs>
                        <use xlink:href="#icon-leisure" fill="url('#myleisure')" />
                    </svg>
                </div>
                <div style="display: flex;align-items: center;">
                    <div class="color-green-line"></div>
                    <span>在线率</span>
                    <div class="sum_cle" style="color: rgb(21, 213, 21);">{{ resultData.online || 0 }}%</div>
                </div>
            </div>
            <div class="box_vehicle">
                <div class="tect_arch_tc">
                    <svg class="arch_icon_tc" aria-hidden="true">
                        <defs>
                            <linearGradient id="myforbid" x1="0%" y1="100%" x2="0%" y2="0%">
                                <stop offset="0%" stop-color="rgb(215, 113, 23)" />
                                <stop offset="100%" stop-color="rgb(255,255,255)" />
                            </linearGradient>
                        </defs>
                        <use xlink:href="#icon-forbid" fill="url('#myforbid')" />
                    </svg>
                </div>
                <div style="display: flex;align-items: center;">
                    <div class="color-orange-line"></div>
                    <span>离线率</span>
                    <div class="sum_cle" style="color: rgb(215, 113, 23);">{{ resultData.unline || 0 }}%
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import HeadlineTag from '@/components/HeadlineTag'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
</script>
<style lang="scss">
.flex_home {
    color: #fff;
}

.box_arch {
    display: flex;
    align-items: center;
    height: calc(100% - 40px);
}

.tect_arch_tc {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arch_icon_tc {
    width: 70%;
    height: auto;
    margin-bottom: 20px;
}

.arch_icon {
    width: 70%;
    height: 70%;
    margin-bottom: 20px;
}

.box_vehicle {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.color-green-line {
    width: 6px;
    height: 6px;
    margin-right: 10px;
    background-color: rgb(21, 213, 21);
}

.color-orange-line {
    width: 6px;
    height: 6px;
    margin-right: 10px;
    background-color: rgb(215, 113, 23);
}

.sum_cle {
    font-size: 28px;
    font-weight: bold;
    padding-left: 10px;
}
</style>