magiccube-vue3/package/style/notify.less

vue3-js版组件库

.mc-notify{
    display      : flex;
    position     : fixed;
    z-index      : 11000;
    width        : 300px;
    padding      : 14px 26px 14px 13px;
    color        : #fff;
    background   : #fff;
    border-radius: 8px;
    box-shadow   : 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    &.right {
        right: 16px;
    }

    &.left {
        left: 16px;
    }

    &__group {
        margin-left : 13px;
        margin-right: 8px;
    }

    &__title {
        font-weight: 700;
        font-size  : 16px;
        color      : #303133;
        margin     : 0;
    }

    &__content {
        font-size  : 14px;
        line-height: 21px;
        margin     : 6px 10px 0 0;
        color      : #606266;
        text-align : justify;
    }

    &__close{
        position         : absolute;
        display          : inline-block;
        width            : 14px;
        height           : 1px;
        top              : 20px;
        right            : 23px;
        background       : #ccc;
        transform        : rotate(45deg);
        -webkit-transform: rotate(45deg);

        &:after {
            content          : '';
            display          : block;
            width            : 14px;
            height           : 1px;
            background       : #ccc;
            transform        : rotate(-90deg);
            -webkit-transform: rotate(-90deg);
        }

        &:hover{
            cursor: pointer;
        }
    }
}


.mc-notify-fade-enter {
    &.right {
      right: 0;
      transform: translateX(100%);
    }

    &.left {
      left: 0;
      transform: translateX(-100%);
    }
  }

  .mc-notify-fade-leave-active {
    opacity: 0;
  }