@prettyy/ui/dist/css/message-box.css

vue2 UI

.vl-message-box{position:fixed;top:0;right:0;border:0;left:0;overflow:auto;z-index:2025;user-select:none;background-color:rgba(0,0,0,.7);height:100%}.vl-message-box__divider{display:block;margin-top:14px;flex:1 1 0;max-width:100%;height:0;max-height:0;border:0 solid #F2F3F5;border-top-width:thin;transition:inherit}.vl-message-box-cancel-btn,.vl-message-box-confirm-btn{align-items:center;padding:6px 17px;font-size:14px;cursor:pointer;display:flex}.vl-message-box-cancel-btn{justify-content:inherit;color:rgba(0,0,0,.85);border:1px solid rgba(0,0,0,.25);border-radius:6px;line-height:normal;transition:inherit;transition-property:opacity}.vl-message-box-confirm-btn{justify-content:inherit;background-color:#9155fd;border:1px solid #9155fd;border-radius:6px;color:#fff;line-height:normal;transition:inherit;transition-property:opacity}.vl-message-box__wrapper{color:#555;width:400px;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);background-color:#fff;padding:17px 24px;border-radius:6px}.vl-message-box__wrapper__header{display:flex;align-items:center;justify-content:space-between}.vl-message-box__wrapper__header__title{font-size:16px;font-weight:600;color:#000;line-height:22px;text-align:left;font-style:normal}.vl-message-box__wrapper__header .icon{font-size:22px;cursor:pointer}.vl-message-box__wrapper__body{padding:20px 0;display:flex;align-items:flex-start}.vl-message-box__wrapper__body__type{font-size:24px;margin-right:12px}.vl-message-box__wrapper__body__content{padding-top:1px;font-size:15px;line-height:25px}.vl-message-box__wrapper__footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:5px 0 0}.vl-message-box-fade-enter,.vl-message-box-fade-leave-to{opacity:0;transform:translate3d(0,-20px,0)}.vl-message-box-fade-enter-active,.vl-message-box-fade-leave-active{transition:all .3s}