<template>
    <el-card style="width: 100%;">
        <div class="container">
            <div class="item">
                <div class="top">
                    <div class="icon">
                        <img src="/assets/sb1.png" alt="">
                    </div>
                    <div class="content">
                        <p class="t1">运行中</p>
                        <p class="t2">当前状态</p>
                    </div>
                </div>
                <div class="bottom">
                    <span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
                            viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
                            <path
                                d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
                                stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
                            </path>
                        </svg>
                    </span>
                    <span class="t1">平稳运行</span>
                    <span class="t2">(30 days)</span>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <div class="icon">
                        <img src="/assets/sb2.png" alt="">
                    </div>
                    <div class="content">
                        <p class="t1" style="font-size: 21px;">128小时</p>
                        <p class="t2">运行时长</p>
                    </div>
                </div>
                <div class="bottom">
                    <span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
                            viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
                            <path
                                d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
                                stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
                            </path>
                        </svg>
                    </span>
                    <span class="t1">平稳运行</span>
                    <span class="t2">(30 days)</span>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <div class="icon">
                        <img src="/assets/sb3.png" alt="">
                    </div>
                    <div class="content">
                        <p class="t1">5/8</p>
                        <p class="t2">已完成步骤</p>
                    </div>
                </div>
                <div class="bottom">
                    <span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
                            viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
                            <path
                                d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
                                fill="#00B87A">
                            </path>
                        </svg>

                    </span>
                    <span class="t1">完成率98%</span>
                    <span class="t2">(30 days)</span>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <div class="icon">
                        <img src="/assets/sb4.png" alt="">
                    </div>
                    <div class="content">
                        <p class="t1" style="color: rgba(255, 153, 0, 1);">2条</p>
                        <p class="t2">告警信息</p>
                    </div>
                </div>
                <div class="bottom">
                    <span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
                            viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
                            <path
                                d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
                                fill="#00B87A">
                            </path>
                        </svg>

                    </span>
                    <span class="t1">4%</span>
                    <span class="t2">(30 days)</span>
                </div>
            </div>
            <div class="item day">
                <span class="text">34522天</span>
            </div>
        </div>
    </el-card>
</template>
<style scoped lang="scss">
.content {
    font-family: "Alibaba-PuHuiTi-Bold";
}

.container {
    display: flex;
    gap: 20px;
}

.day {
    flex: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    background-image: url('/assets/dayImg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 100% 50%;
    position: relative;
    width: 120px;

    .text {
        position: absolute;
        bottom: 60px;
        color: rgba(24, 109, 245, 1);
        font-weight: bold;
        font-size: 25px;
        margin-left: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
}

.item {
    background-color: rgba(240, 249, 255, 1);
    padding: 30px 15px;
    border-radius: 20px;
    text-align: center;
    flex: 1;
    margin: 75px 0;

    .top {
        display: flex;
        align-items: center;
        text-align: left;

        .icon {
            img {
                width: 100%;
                height: 100%;
                display: block;
                margin-top: -20px;
            }

            width: 50px;
            height: 50px;
            margin-right: 20px;
        }

        .t1 {
            font-size: 26px;
        }

        .t2 {
            font-size: 18px;
            color: rgba(62, 73, 84, 1);
        }

        p {
            margin: 10px 0;
        }
    }

    .bottom {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
            display: flex;
            align-items: center;
        }

        .t1 {
            color: rgba(0, 184, 122, 1);
            margin: 0 5px;
        }

        .t2 {
            color: rgba(150, 155, 160, 1);
        }
    }

}




:deep(.el-card__body) {
    padding: 0 !important;
}

.box {
    display: flex;
    height: 100%;
}
</style>
<script setup>

</script>