VRSystem/EasyTemplate.Blazor.Web/Components/Pages/Dashboard/Nozzle.razor

@using EasyTemplate.Service

<div class="card-container">
    <div class="icon-section">
        <img src=@IconUrl alt="功能图标" />
    </div>
    <div class="text-section">
        <div class="bottom-text">@BottomText</div>
    </div>
    <div class="right-section">
        <div class="right-line-one">@NozNo 号枪</div>
        <div class="right-line-two">@VLR</div>
        <div class="right-line-three">@OilName</div>
    </div>
</div>

@code {
    public string IconUrl { get; set; } = "img/nozzle.png";

    //[Parameter] public string IconAltText { get; set; } = "功能图标";
    //[Parameter] public string TopText { get; set; } = "默认标题";
    [Parameter] public int warnstate { get; set; } = 0;
    [Parameter] public int nozzlestate { get; set; } = 0;
    [Parameter] public string BottomText { get; set; } = "";
    [Parameter] public string NozNo { get; set; } = "行1";
    [Parameter] public string VLR { get; set; } = "行2";
    [Parameter] public string OilName { get; set; } = "行3";


    protected override void OnParametersSet()
    {
        RecalculateInternalValues();
    }

    private void RecalculateInternalValues()
    {
        if (nozzlestate == Tool.NozzleState_Offline)
        {
            IconUrl = "img/nozzle-offline.png";
        }
        else if (nozzlestate == Tool.NozzleState_Idle)
        {
            IconUrl = "img/nozzle-idle.png";
        }
        else if (nozzlestate == Tool.NozzleState_Filling)
        {
            IconUrl = "img/nozzle-filling.png";
        }
        else
        {
            IconUrl = "img/nozzle-offline.png";
        }
    }

}

<style>
    .card-container {
        width: 90px;
        height: 65px;
        position: relative;
        /*  border: 1px solid #e0e0e0; */
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        font-family: Arial, sans-serif;
    }

    .icon-section {
        position: absolute;
        top: 0;
        left: 0;
        width: 54px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .icon-section img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-top-left-radius: 6px;
        }

    .text-section {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 4px;
    }


    .bottom-text {
        font-size: 10px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .right-section {
        position: absolute;
        top: 0;
        right: 0;
        padding: 2px 4px;
        text-align: right;
        width: calc(100% - 32px);
    }

    .right-line-one,
    .right-line-two,
    .right-line-three {
        font-size: 10px;
        color: #444;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>