BaoMa/resources/views/cdms/vaccine_data.blade.php

<style type="text/css">

    .big_body{
        display: flex;
        justify-content: center;
        background-color: #D7D7D7;
    }
    .big_div {

        width: 98%;
        border: 1px solid #E4E4E4;
        box-shadow: 0 26rpx 40rpx 0 rgba(255, 255, 255, 0.31);
        background-color: #FFF;
        padding: 50px;

    }
    .title_div{
        display: flex;
        justify-content: space-between;
        /*	用下外边距和信息内容分开*/
        margin-bottom: 30px;
    }
    /*	标题*/
    .title{
        font-size: 30px;
    }

    /*	信息*/
    .inf_div{
        padding: 20px;
        display: flex;
        justify-content: space-around;

    }
    /*	一条信息 包括icon和文字*/

    .inf{
        width: 50%;
        height: 100px;

        display: flex;
        align-content: center;
    }
    /*	icon*/
    .inf_icon{
        height: 80px;
        width: 80px;
        margin-right: 100px;
        border-radius: 50%;
        border: 0.5px solid #000000;
    }
    .inf_text{
        /*		两边加边距*/
        margin-left: 50px;
        margin-right: 50px;

    }
    .inf_text_num{
        width: auto;
        text-align: center;
        margin-bottom: 5px;
        font-size: 38px;
    }
</style>
<div class="big_div">
    <!--		标题和时间-->
    <div class="title_div">
        <div class="title">实时数据</div>
        <div class="tiem">更新时间：{{date("Y-m-d H:i:s")}}</div>
    </div>
    <!--		信息-->
    <div class="inf_div">
        <!--			一段信息-->
        <div class="inf">
            <!--				icon-->
            <div class="inf_icon" style="text-align: center">
                icon
            </div>
            <!--				文字-->
            <div class="inf_text">
                <!--数字  要大-->
                <div class="inf_text_num">{{$data['sum_num']}}</div>
                <!--描述  要小-->
                <div class="inf_text_ms">疫苗种类（种）</div>
            </div>
            <div class="inf_text">
                <!--数字  要大-->
                <div class="inf_text_num">{{$data['less_num']}}</div>
                <!--描述  要小-->
                <div class="inf_text_ms">疫苗缺苗（种）</div>
            </div>
            <div class="inf_text">
                <!--数字  要大-->
                <div class="inf_text_num">{{$data['have_num']}}</div>
                <!--描述  要小-->
                <div class="inf_text_ms">剩余库存（支）</div>
            </div>

        </div>
        <div class="inf">
            <div class="inf_text">
                <!--数字  要大-->
                <div class="inf_text_num">{{$data['today_schedule']}}</div>
                <!--描述  要小-->
                <div class="inf_text_ms">今日预约（人支）</div>
            </div>

            <div class="inf_text">
                <!--数字  要大-->
                <div class="inf_text_num">{{$data['today_vaccine']}}</div>
                <!--描述  要小-->
                <div class="inf_text_ms">预计今日消耗（支）</div>
            </div>
        </div>
    </div>
</div>