We_Relese/OnlineApp/Relese/Views/Shared/Layout/_Layout.Play.cshtml

@{
    Layout = "~/Views/Shared/Layout/_Layout.None.cshtml";
    var imagePath = string.IsNullOrEmpty(AbpSession.AvatarImagePath) ? "/Content/Image/user.png" : AbpSession.AvatarImagePath;
    string pageTitle = (ViewBag.Title == "主页" ? null : ViewBag.Title) ?? "在线分布式演练";
}
<style>
    body {
    }

    .wrapper {
        display: flex;
        height: 100vh;
        --mainColor: #65758f;
        --mainBgColor: #eef3f3;
        --mainBgColor2: #c7f0f3;
    }

        .wrapper .body-left {
            width: 300px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #fff;
        }

            .wrapper .body-left .logo {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-top: 20px;
            }

                .wrapper .body-left .logo img {
                }

            .wrapper .body-left .sidebar {
                height: calc(100% - 100px);
                display: flex;
                justify-content: center;
                align-items: center;
                padding-top: -100px;
            }

        .wrapper .body-right {
            display: flex;
            flex-direction: column;
            width: calc(100vw - 300px);
            height: 100vh;
            background: var(--mainBgColor);
            /*border-left: 2px solid var(--mainColor);*/
        }

            .wrapper .body-right .header {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 70px;
                color: var(--mainColor);
                border-bottom: 1px solid #65758f;
                padding: 0 25px;
            }

                .wrapper .body-right .header .title {
                    display: flex;
                    align-items: center;
                    font-size: 24px;
                    font-weight: 600;
                }

                .wrapper .body-right .header .user-box {
                    padding: 5px 25px;
                    display: flex;
                    align-items: center;
                    background: #fff;
                    border-radius: 5px;
                }

                    .wrapper .body-right .header .user-box img {
                        width: 35px;
                        height: 35px;
                        margin-right: 15px;
                    }

                    .wrapper .body-right .header .user-box .name {
                        text-align: center;
                        min-width: 70px;
                    }

            .wrapper .body-right .content {
                padding: 10px;
                height: calc(100% - 70px);
            }
</style>
<div class="wrapper">

    <div class="body-left">
        <div class="logo">
            <img src="../../../Content/Image/gjdw.png" alt="" />
        </div>
        <div class="sidebar">
            @Html.Partial("Layout/_MainSidebar.Play")
        </div>
    </div>
    <div class="body-right">
        <div class="header">
            <div class="title">
                @(pageTitle)
            </div>
            <div class="user-box">
                <img class="img-circle" src="@(imagePath)" alt="" />
                <div class="name">@(AbpSession.RealName)</div>
            </div>
        </div>
        <div class="content">
            @RenderBody()
        </div>
    </div>
</div>
@section styles{
    @RenderSection("styles", false)
}
@section css{
    @RenderSection("css", false)
}

@section js{
    @RenderSection("js", false)
}

@section scripts{
    <script>
        $(function () {
            //OverlayScrollbar($(".wrapper .body-left"));
            OverlayScrollbar($(".wrapper .content"));
        })
    </script>
    @RenderSection("scripts", false)
}

@section modal{
    @RenderSection("modal", false)
}