magiccube-vue3/package/style/upload.less

vue3-js版组件库

@import './theme';

.mc-upload__wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.mc-upload-action {
    position: relative;
    border: 1px dashed #446DEA;
    border-radius: 8px;
    &__arrow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events:none;
        &::before,
        &::after {
            display: block;
            content: '';
            width: 20px;
            height: 20px;
            position: absolute;
        }
        &::before {
            border-bottom: 2px solid @color-border;
            border-right: 2px solid @color-border;
            transform: translate(-21px, -20px);
        }
        &::after{
            border-top: 2px solid @color-border;
            border-left: 2px solid @color-border;
        }
    }
    &__inner {
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
    }
}
.mc-upload-preview{
    position: relative;
    margin-right: 12px;
    cursor: pointer;

    & > img{
        width: 100%;
        height: 100%;
        border-radius: 8px;
        border: 1px solid #DCE4ED;
    }

    &__close{
        position: absolute;
        top: -5px;
        right: -5px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        background: #aaa;
        border-radius: 50%;
        border: 1px solid #ffffff70;
        opacity: .6;
        transform: rotate(45deg);

        &:hover{
            opacity: 1;
        }
        &::before,
        &::after {
            display: block;
            content: '';
            width: 4px;
            height: 4px;
            position: absolute;
            border: 1px solid #fff;
        }
        &::before{
            top: 50%;
            left: 50%;
            transform: translate(-95%, -95%);
            border-top: 0;
            border-left: 0;
        }
        &::after{
            right: 50%;
            bottom: 50%;
            transform: translate(95%, 95%);
            border-bottom: 0;
            border-right: 0;
        }
    }
}