magiccube-vue3/package/style/message.less

vue3-js版组件库

.mc-message{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11000;
    background: none;

    &__inner{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 240px;
        background: #fff;
        box-shadow: var(--mc-float-layer-box-shadow);
        border-radius: var(--mc-float-layer-border-radius);
        opacity: 0;
        transition: all 300ms;

        &--header{
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 24px;
            font-size: var(--mc-normal-size);
            font-weight: bold;
            line-height: 22px;

            &::before{
                content: '';
                display: inline-block;
                margin-right: 8px;
                width: 4px;
                height: 14px;
                background: linear-gradient(10.5deg, rgba(131, 195, 251, 1) 0%,rgba(131, 195, 251, 1) 1%,rgba(68, 109, 234, 1) 99%,rgba(68, 109, 234, 1) 100%);
            }
        }

        &--body{
            padding: 0 24px;
            font-size: var(--mc-normal-size);
            color: var(--mc-title-color);
            text-align: center;
        }

        &--footer{
            padding: 24px;
            text-align: center;
        }

        &.visible{
            opacity: 1;
        }
    }
}

.mc-toast{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 11000;
    transform: translate(-50%, -50%);
    padding: 12px 24px;
    color: #fff;
    background: rgba(0,0,0,.6);
    border-radius: 8px;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,.12);
    opacity: 0;
}