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

@using WeOnlineApp.Helpers
@model WeOnlineApp.Models.Play.CampPlayModel
@{
    string id = "cmd-role";
    var roleArr = Model.Play.PlayRoleNames.Split(',');

}
@Html.Partial("_Run/_AreaBox", $"指挥部#{id}")

<style>
    .cmd-role-box {
        display: flex;
        flex-wrap: wrap;
    }

    .role-box {
        font-size: 14px;
        --h: 40px;
        display: block;
        height: var(--h);
        border-radius: var(--h) 1rem 1rem var(--h);
        background: #fff;
        margin: 5px 10px;
        cursor: pointer;
    }

    .cmd-role-box .role-box .role-image {
        display: block;
        float: left;
        width: var(--h);
        height: var(--h);
        border-radius: var(--h);
        border: 3px solid #fff;
    }

    .cmd-role-box .role-box .role-name {
        float: left;
        width: auto;
        min-width: 130px;
        line-height: var(--h);
        padding:0 20px 0 15px;
        /*color: #8c91a8;*/
        color: var(--mc);
        font-weight: bold;
        text-align: center;
    }
</style>

<div style="display: none" id="@id-pre">
    <div class="cmd-role-box">
        @foreach (var role in roleArr)
        {
            var changeRole = Model.PlayUser == null ? "" : $"onclick=\"ChangeRole('{role}')\"";
        <div class="role-box" @Html.Raw(changeRole)>
            <img class="role-image" src="~/Content/Image/user.png" />
            <div class="role-name">@role</div>
        </div>
        }
    </div>
</div>


@using (Html.BeginScripts())
{
    <script id="role-script">
        var $cmdRoleBody = $('#@id .box-body');
        $cmdRoleBody.html($('#@id-pre').html());
        $('#@id-pre').remove();
        $(function() {
            OverlayScrollbar($cmdRoleBody.closest('.scroll-box'), { className: "os-theme-round-dark" });
        });
    </script>
}