AISln/Platform/AI.Platform.Page/Pages/Media/MediaPreview.razor

@using AI.Platform.Page.Pages.Media.Model
@using System.Threading.Tasks
@using System.Text.Json

@if (IsVisible)
{
    <div class="modal-overlay">
        <div class="modal-content filter_box">
            <div class="screen_box">
                @if(Media.Type == MediaType.VIDEO)
                {
                    <video class="video_box" src="@(Utils.ToWebPath(Media.Path))" autoplay></video>
                } else
                {
                    <div class="video_tip">视频区</div>
                }
                
                @if (Media.Type == MediaType.IMAGE)
                {
                    <img class="image_box" src="@(Utils.ToWebPath(Media.Path))" />
                }
                else
                {
                    <div class="image_tip">图片区</div>
                }
                
                <div class="nozzle_box">
                    <img  src="@(Utils.ToWebPath("wwwroot\\images\\backgroud\\nozzle.png"))" />
                </div>
                
            </div>



            <div class="filter_row" style="justify-content:end;margin-top:5%;">
                <Button Icon="plus" OnClick="onSure" Style="margin-right:2%">确定</Button>
                <Button Icon="reload" OnClick="Close" Style="margin-right:2%">取消</Button>
            </div>

            
        </div>

    </div>
}

<style>
    /* 遮罩层：全屏、半透明 */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    /* 弹窗内容：白色卡片，居中由父容器控制 */
    .modal-content {
        background: white;
        border-radius: 8px;
        width: 80%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        /* 注意：不要设 height: 100vh，否则会拉满全屏 */
    }

    .filter_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #ffffff;
        padding: 2%;
    }

    .filter_row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-top: 2%;
    }

    .screen_box{
        width:30%;
        height:80vh;
        background: #2e2e2e;
        display:flex;
        flex-direction:column;
        align-items:center;

    }

    .video_box{
        width:90%;
        height:30%;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-top:1%;
    }
    .video_tip{
        width: 90%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1%;
        border: solid 1px #FFFFFF;
        color: #FFFFFF;
    }

    .image_box{
        width: 90%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1%;
    }
    .image_tip {
        width: 90%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1%;
        border: solid 1px #FFFFFF;
        color: #FFFFFF;
    }

    .nozzle_box {
        width: 90%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1%;
    }

    .media-container img {
       
        width: 50%;
        height: 50%;
    }
</style>