.detail-page {
    &-header {
        margin: -#{$page-view-margin} -#{$page-view-margin} 0 -#{$page-view-margin};
        padding: 16px 32px 0 32px;
        background: #fff;
        border-bottom: 1px solid #e8eaec;

        > .el-page-header {
            padding: 0 0 24px 0;

            .el-page-header__left:hover {
                color: $--color-primary;
            }
        }

        > .el-row {
            display: flex;
            width: 100%;
            margin-bottom: 12px;

            @media (max-width: 768px) {
                display: block;
            }
        }

        &-left {
            width: 100%;
            overflow: hidden;

            .el-col {
                margin-bottom: 16px;
            }
        }

        &-extra {
            min-width: 242px;
            margin-left: 88px;

            @media (max-width: 1200px) {
                margin-left: 44px;
            }

            @media (max-width: 992px) {
                margin-left: 20px;
            }

            @media (max-width: 768px) {
                margin-left: 0;
            }

            > div {
                display: flex;
                justify-content: space-between;
                width: 200px;
            }

            &-title {
                margin-bottom: 4px;
                color: rgba(0, 0, 0, .45);
                font-size: 14px;
            }

            &-content {
                margin-top: 12px;
                color: rgba(0, 0, 0, .85);
                font-size: 24px;
            }
        }

        &-description {
            span {
                display: inline-flex;
                align-items: baseline;
            }

            &-label {
                color: rgba(0, 0, 0, .85);
                font-weight: 400;
                font-size: 14px;
                line-height: 1.5715;
                text-align: start;
            }

            &-content {
                color: rgba(0, 0, 0, .65);
                font-size: 14px;
                line-height: 1.5715;
            }
        }
    }

    > .el-form > .el-row > .el-card {
        margin-top: 16px;
    }

    &-footer {
        @include clearfix;
        position: absolute;
        width: 100%;
        right: 0;
        bottom: 0;
        z-index: 99;
        transition: all 0.3s ease 0s;
        height: 56px;
        padding: 0 24px;
        line-height: 56px;
        border-top: 1px solid #f0f0f0;
        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
        backdrop-filter: blur(3px);

        &-left {
            float: left;
        }

        &-right {
            float: right;
        }
    }
}