measure/src/views/debit-pay/ledgers/deductstatic.vue

<!--  -->
<template>
    <hc-new-card>
        <div class="hc-main-row">
            <div class="title_box">
                目前所有已计量但未补全资料的计量金额统计
            </div>
            <el-row :gutter="14">
                <el-col :span="8">
                    <hc-gradient-card color="purple1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-title">
                                ￥50000
                            </div>
                            <div class="item-sub-num">
                                <span class="num">总金额</span>
                            </div>
                        </div>
                    </hc-gradient-card>
                </el-col>
                <el-col :span="8">
                    <HcGradientCard color="orange1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-title">
                                ￥50000
                            </div>
                            <div class="item-sub-num">
                                <span class="num">距离截止日期还剩</span>
                                <span class="fon-lg">1</span>
                                <span class="num">天</span>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
                <el-col :span="8">
                    <HcGradientCard color="yellow1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-title">
                                ￥50000
                            </div>
                            <div class="item-sub-num">
                                <span class="num">距离截止日期还剩</span>
                                <span class="fon-lg">10</span>
                                <span class="num">天</span>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
            </el-row>
            <el-row :gutter="14" class="mt-10">
                <el-col :span="8">
                    <hc-gradient-card color="green2">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-title">
                                ￥50000
                            </div>
                            <div class="item-sub-num">
                                <span class="num">距离截止日期还剩</span>
                                <span class="fon-lg">30</span>
                                <span class="num">天</span>
                            </div>
                        </div>
                    </hc-gradient-card>
                </el-col>
                <el-col :span="8">
                    <HcGradientCard color="blue2">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-title">
                                ￥50000
                            </div>
                            <div class="item-sub-num">
                                <span class="num">距离截止日期还剩</span>
                                <span class="fon-lg">60</span>
                                <span class="num">天</span>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
                <el-col :span="8">
                    <HcGradientCard color="red1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-title">
                                ￥50000
                            </div>
                            <div class="item-sub-num">
                                <span class="num">已超过截止日期</span>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
            </el-row>
        </div>
    </hc-new-card>
</template>

<script setup>
import { ref, watch } from 'vue'
</script>

<style lang='scss' scoped>
.hc-main-row {
    height: 100%;
}
.title_box{
    width: 100%;
    height: 100px;
    background-color:#6799D9 ;
    border-radius: 25px;
    text-align: center;
    color: white;
    font-weight: bolder;
    line-height: 100px;
    margin-bottom: 30px;
    font-size: 50px;
}
.hc-card-item-sub {
 
    position: relative;
    padding: 20px;
    .item-sub-title {
        font-size: 45px;
        font-weight: bold;
    }
    .item-sub-num {
        height: 50px;
        position: relative;
        margin-top: 40px;
        text-align: left;
        .num {
            font-size: 30px;
            font-weight: bold;
        }
        .text {
            margin-left: 5px;
            font-size: 25px;
            color: inherit;
        }
    }
}
.fon-lg{
    font-size: 50px;
}
</style>