We_Relese/OnlineApp/Relese/Views/Play/_Run/_RunBaseInfo.cshtml

@using Abp.Timing
@using WeOnlineApp.Configuration
@using WeOnlineApp.Helpers
@model WeOnlineApp.Models.Play.CampPlayModel
@{
    string id = "run-info";
}
<style>
    .base-info {
        padding: 0 15px 10px;
        display: flex;
        flex-direction: column;
        color: var(--mc);
    }

        .base-info .menu {
            font-size: 15px;
            --h: 25px;
            line-height: var(--h);
            list-style: none;
            display: flex;
            justify-content: center;
            padding: 0;
            margin: 0;
        }

            .base-info .menu a {
                color: #8c91a8;
                padding: 0 6px 0 5px;
                margin: 0 5px;
                line-height: var(--h);
            }

                .base-info .menu a:hover {
                    color: var(--mc);
                    padding-bottom: 1px;
                    border-bottom: 2px solid var(--mc);
                }

        .base-info .count-down-box {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            font-weight: bold;
            margin: 8px 0;
            color: #ff7c63;
        }

        .base-info dl {
            display: inline-flex;
            margin-bottom: 3px;
            line-height: 22px;
        }

            .base-info dl dt {
                font-size: 15px;
                margin: 0;
                white-space: nowrap;
            }

            .base-info dl dd {
                font-size: 13px;
                padding-left: 10px;
                margin: 0;
            }
</style>
@Html.Partial("_Run/_AreaBox", $"演练信息#{id}")
<div style="display: none" id="@id-pre">
    <div class="base-info">
        @if (Model.PlayUser != null)
        {
            <ul class="menu">
                <li>
                    <a href="@Url.Action("Index", "Play")"><i class="fa fa-home"></i>&nbsp;&nbsp;返回主页</a>
                </li>
                <li>
                    <a href="javascript:void(0)" onclick="Exit()"><i class="fas fa-backspace"></i>&nbsp;&nbsp;退出演练</a>
                </li>
                <li>
                    <a href="javascript:void(0)" onclick="LoginOut()"><i class="fas fa-sign-out-alt"></i>&nbsp;&nbsp;注销账号</a>
                </li>
            </ul>
        }

        <div class="count-down-box">
            @if (Model.Play.PlayState == CampPlayStateDefinition.End || Model.Play.PlayState == CampPlayStateDefinition.OverTime)
            {
                <div>演练结束</div>
            }
            else
            {
                <div id="count-down"></div>
            }
        </div>
        <dl><dt>演练名称:</dt><dd>@Model.Play.Name</dd></dl>
        <dl><dt>演练时长:</dt><dd>@Model.Camp.MaxTrainingMinute 分钟</dd></dl>
        <dl><dt>演练目标:</dt><dd>@Model.Camp.Purposes </dd></dl>
    </div>
</div>

@using (Html.BeginScripts())
{
    <script src="~/Content/Libs/countdown/countdown.js"></script>
    <script id="run-info-script">
        var $runInfoBody = $('#@id .box-body');
            $runInfoBody.html($('#@id-pre').html());
        $('#@id-pre').remove();
        @if (Model.Play.PlayState != CampPlayStateDefinition.End&& Model.Play.PlayState != CampPlayStateDefinition.OverTime)
        {
            var date = (Model.Play.StartDate ?? Clock.Now).AddMinutes((double)Model.Camp.MaxTrainingMinute).ToString("yyyy-MM-dd HH:mm:ss");
            <text>
                var countdown = new Countdown({
                    selector: '#count-down',
                    dateEnd: new Date('@(date)'),
                    msgPattern: '{hours}:{minutes}:{seconds}',
                    msgBefore: "演练未开始",
                    msgAfter: "演练已超时"
                });
            </text>
        }

        $(function() {
            OverlayScrollbar($runInfoBody.closest('.scroll-box'), { className: "os-theme-round-dark" });
        });

            function Exit() {
                MsgConfirm("退出后无法再加入演练，您确定退出演练吗？",
                    "退出演练",
                    function () {
                        @if (Model.PlayUser != null)
                        {
                            if (Model.PlayUser.PlayerType == CampPlayerTypeDefinition.Creator)
                            {
                                <text>
                                    MsgConfirm("您是房主，退出后演练就会结束，确定退出吗？",
                                        "再次确认",
                                        function() {
                                            $.iwbAjax({
                                                url: abp.appUrl + '/CampPlay/ExitPlay?no=@(Model.Play.Id)',
                                                success: function() {
                                                    window.location.href = "@Url.Action("Start", "Play")";
                                                }
                                            });
                                        });
                                </text>
                            }
                            else
                            {
                                <text>
                                    $.iwbAjax({
                                        url: abp.appUrl + '/CampPlay/ExitPlay?no=@(Model.Play.Id)',
                                        success: function() {
                                            window.location.href = "@Url.Action("Start", "Play")";
                                        }
                                    });
                                </text>
                            }
                        }
                    });
            }

            function LoginOut() {
                MsgConfirm("您确定注销账号吗？",
                    "注销账号",
                    function () {
                        @if (Model.PlayUser != null)
                        {
                             if (Model.PlayUser.PlayerType == CampPlayerTypeDefinition.Creator)
                             {
                                <text>
                                    MsgConfirm("您是房主，注销后演练进程无法继续，注销退出吗？",
                                        "再次确认",
                                        function() {
                                            window.location.href = "/Account/LogOut";
                                        });
                                </text>
                             }
                             else
                             {
                                <text>
                                    window.location.href = "/Account/LogOut";
                                </text>
                             }
                        }

                    });
            }
    </script>
}