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="30">
                <el-col :span="8">
                    <hc-gradient-card color="purple1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-title">
                                ￥{{ infoData?.allMoney || 0 }}
                            </div>
                            <div class="item-sub-num">
                                <span class="num">总金额</span>
                                <span class="fon-lg" style="opacity: 0;">12345678</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">
                                ￥{{ infoData?.oneDayMoney || 0 }}
                            </div>
                            <div class="item-sub-num">
                                <span class="num">距离截止日期还剩</span>
                                <span class="fon-lg">1</span>
                                <span class="num">天</span>
                                <span class="num" style="opacity: 0;">1</span>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
                <el-col :span="8">
                    <HcGradientCard color="yellow1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-title">
                                ￥{{ infoData?.tenDaysMoney || 0 }}
                            </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="30" class="mt-24">
                <el-col :span="8">
                    <hc-gradient-card color="green2">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-title">
                                ￥{{ infoData?.thirtyDaysMoney || 0 }}
                            </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">
                                ￥{{ infoData?.sixtyDaysMoney || 0 }}
                            </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">
                                ￥{{ infoData?.overDateMoney || 0 }}
                            </div>
                            <div class="item-sub-num">
                                <span class="num">已超过截止日期</span>
                                <span class="fon-lg" style="opacity: 0;">1111111</span>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
            </el-row>
        </div>
    </hc-new-card>
</template>

<script setup>
import { onActivated, ref, watch } from 'vue'
import staticApi from '~api/debit-pay/ledger/static'
import { useAppStore } from '~src/store'
import { getObjValue } from 'js-fast-way'
const useAppState = useAppStore()

const contractId = ref(useAppState.getContractId || '')
const infoData = ref({})
onActivated(()=>{
    getStaticData()
})
const getStaticData = async ()=>{
    const { error, code, data } = await staticApi.deductStatistics({
        contractId:contractId.value,
    })
    if (!error && code === 200) {
         infoData.value = getObjValue(data)
        
    } else {
        infoData.value = {}
    }
}
</script>

<style lang='scss' scoped>
.hc-main-row {
    padding: 60px;
    height: 100%;
    overflow-y: auto;
}
.title_box{
    width: 100%;

    background-color:#6799D9 ;
    border-radius: 25px;
    text-align: center;
    color: white;
    font-weight: bolder;
    line-height: 100px;
    margin-bottom: 100px;
    font-size: 50px;
    word-wrap: break-word; /* 让文字在需要时自动换行 */
}
.hc-card-item-sub {
   
    position: relative;
    padding: 20px;
    .item-sub-title {
        font-size: 45px;
        font-weight: bold;
    }
    .item-sub-num {
      
        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>