@reasy-team/reasy-ui/dist/trade/lib/notification/style.css

Tenda基于Vue2.x的PC组件库。[在线示例](https://reasyteam.github.io/Reasy-UI/)

.v-notification{position:fixed;padding:16px 24px 24px;width:400px;max-width:400px;background-color:#fff;-webkit-box-shadow:0px 6px 16px 0px rgba(0,0,0,0.12),0px 4px 12px -8px rgba(0,0,0,0.09);box-shadow:0px 6px 16px 0px rgba(0,0,0,0.12),0px 4px 12px -8px rgba(0,0,0,0.09);border-radius:2px}.v-notification__title{margin-bottom:8px;color:#4b4b5a;font-size:12px;font-weight:500;line-height:22px}.v-notification__main--default{color:#8d8c99;font-size:12px;font-weight:400;line-height:22px}.v-notification__button{margin-top:16px;text-align:right}.v-notification__close{position:absolute;top:21px;right:24px;font-size:16px;color:rgba(75,75,90,0.5);cursor:pointer}.v-notification__close-space{padding-right:36px}.v-notification--icon{padding:20px 24px 20px 72px}.v-notification__iconbox{position:absolute;top:0;left:0;height:100%;width:56px;border-right:1px solid #eeeef1}.v-notification__icon{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);font-size:24px;border-radius:50%}.v-notification__icon--success{color:#1db879}.v-notification__icon--error{color:#f7421e}.v-notification__icon--warning{color:#f5a300}.v-notification__icon--notice{color:#0058e4}.v-notification--top-right{-webkit-transition:opacity 0.3s,top 0.4s,right 0.4s,-webkit-transform 0.4s;transition:opacity 0.3s,top 0.4s,right 0.4s,-webkit-transform 0.4s;-o-transition:opacity 0.3s,transform 0.4s,top 0.4s,right 0.4s;transition:opacity 0.3s,transform 0.4s,top 0.4s,right 0.4s;transition:opacity 0.3s,transform 0.4s,top 0.4s,right 0.4s,-webkit-transform 0.4s}.v-notification-fade-right-enter,.v-notification-fade-right-leave-active{opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}.v-notification--top-left{-webkit-transition:opacity 0.3s,top 0.4s,left 0.4s,-webkit-transform 0.4s;transition:opacity 0.3s,top 0.4s,left 0.4s,-webkit-transform 0.4s;-o-transition:opacity 0.3s,transform 0.4s,top 0.4s,left 0.4s;transition:opacity 0.3s,transform 0.4s,top 0.4s,left 0.4s;transition:opacity 0.3s,transform 0.4s,top 0.4s,left 0.4s,-webkit-transform 0.4s}.v-notification-fade-left-enter,.v-notification-fade-left-leave-active{opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}.v-notification--bottom-right{-webkit-transition:opacity 0.3s,bottom 0.4s,right 0.4s,-webkit-transform 0.4s;transition:opacity 0.3s,bottom 0.4s,right 0.4s,-webkit-transform 0.4s;-o-transition:opacity 0.3s,transform 0.4s,bottom 0.4s,right 0.4s;transition:opacity 0.3s,transform 0.4s,bottom 0.4s,right 0.4s;transition:opacity 0.3s,transform 0.4s,bottom 0.4s,right 0.4s,-webkit-transform 0.4s}.v-notification-fade-right-enter,.v-notification-fade-right-leave-active{opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}.v-notification--bottom-left{-webkit-transition:opacity 0.3s,bottom 0.4s,left 0.4s,-webkit-transform 0.4s;transition:opacity 0.3s,bottom 0.4s,left 0.4s,-webkit-transform 0.4s;-o-transition:opacity 0.3s,transform 0.4s,bottom 0.4s,left 0.4s;transition:opacity 0.3s,transform 0.4s,bottom 0.4s,left 0.4s;transition:opacity 0.3s,transform 0.4s,bottom 0.4s,left 0.4s,-webkit-transform 0.4s}.v-notification-fade-left-enter,.v-notification-fade-left-leave-active{opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}