@cgj/k-view/lib/fade-pop/style.css

``` npm i @cgj/k-view ```

.fade-body-container{height:100%;position:relative}

.fade-pop-container .fade-modal{position:fixed;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,0.5);z-index:999}.fade-pop-container .fade-box{position:fixed;left:0;right:0;bottom:0;top:0;margin:auto;background-size:100% 100%;height:80%;width:60%;max-height:736px;max-width:1140px;z-index:999;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 2px 12px 0 rgba(0,0,0,0.1)}.fade-pop-container .fade-box .fade-head-content{padding-left:10px}.fade-pop-container .fade-box .fade-head-close{float:right;padding:0 10px}.fade-pop-container .fade-box .fade-head-close:hover{cursor:pointer}.fade-pop-container .fade-box .fade-head-close img{vertical-align:middle;width:32px}.fade-pop-container .fade-box .fade-head{height:48px;line-height:48px;font-size:14px;padding-left:4px;font-size:18px;font-family:MicrosoftYaHei-Bold;background:#F2F2F3;color:#353535}.fade-pop-container .fade-box .fade-head .fade-head-close:active{transform:translate3d(0, -2px, 0);-webkit-transform:translate3d(0, -2px, 0)}.fade-pop-container .fade-box .fade-body{background-size:100% 100%;height:calc(100% - 48px)}.fade-pop-container .fade-box .fade-footer{height:48px;padding:0 20px;border-top:1px solid #F2F2F3;display:flex;justify-content:flex-end;align-items:center}.fade-animate-enter,.fade-animate-leave-to{opacity:0;transform:translate3d(20px, 0, 0)}.fade-animate-enter-to,.fade-animate-leave-active{transition:all 0.2s ease}.fade-modal-enter,.fade-modal-leave-to{opacity:0}.fade-modal-enter-to,.fade-modal-leave-active{transition:all 0.4s ease}