view-ui-plus/src/styles/components/result.less

A high quality UI components Library with Vue.js 3

.ivu-result{
    width: 72%;
    margin: 0 auto;
    text-align: center;
    @media screen and (max-width: @screen-xs) {
        width: 100%;
    }

    &-icon{
        display: inline-block;
        width: 72px;
        border-radius: 50%;
        margin-bottom: 24px;
        &-success{
            background-color: @success-color;
        }
        &-error{
            background-color: @error-color;
        }
        &-warning{
            background-color: @warning-color;
        }
        .ivu-icon{
            color: #fff;
            font-size: 72px;
            border-radius: 50%;
        }
    }

    &-title{
        margin-bottom: 16px;
        color: @title-color;
        font-weight: 500;
        font-size: 24px;
        line-height: 32px;
    }

    &-desc{
        margin-bottom: 24px;
        color: @subsidiary-color;
        font-size: 14px;
        line-height: 22px;
    }

    &-extra{
        padding: 24px 40px;
        text-align: left;
        background: @table-thead-bg;
        border-radius: @border-radius-small;

        @media screen and (max-width: @screen-xs) {
            padding: 18px 20px;
        }
    }

    &-actions {
        margin-top: 32px;

        .ivu-btn:not(:last-child) {
            margin-right: 8px;
        }
    }
}