123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- @charset "UTF-8";
- @import "base/reset";
- @import "base/mixins";
- // @import "base/ui-dialog";
- @import "plugin/nprogress";
- @import "plugin/swiper";
- .fade-transition {
- transition: opacity .3s ease;
- }
- .fade-enter, .fade-leave {
- opacity: 0;
- }
- .fade-enter-active, .fade-leave-active {
- transition: opacity .4s ease;
- }
- .fade-enter, .fade-leave-to {
- opacity: 0
- }
- .common-transit{
- transition: transform 300ms;
- }
- .common-enter, .common-leave-active {
- opacity: 0;
- transform: translate3d(0, 300px, 0);
- }
- .common-leave-active {
- position: absolute;
- }
- html,body{
- min-height: 100%;
- // background-color: #efefef;
- font-family: Microsoft Yahei,sans-serif;
- font-size: px2rem(24);
- a{
- text-decoration: none;
- }
- }
- #app{
- height: 100%;
- -webkit-overflow-scrolling: touch;
- }
- .hidden{
- display: none;
- }
- .o-wrap{
- position: relative;
- height: 100%;
- }
- .o-wrapout{
- width: 100%;
- height: 100%;
- }
- .hide_nav .o-container {
- padding-bottom: 0;
- }
- .hide_nav .o-nav {
- display: none;
- }
- .o-container{
- height: 100%;
- position: relative;
- background-color: #efefef;
- &:after{
- position: fixed;
- z-index: 11;
- content: "";
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: #000;
- opacity: 0;
- display: none;
- transition: opacity .2s ease;
- }
-
- &.o-rendering{
- &:after{
- opacity: 0.75;
- display: block;
- transition: opacity .2s ease;
- }
- }
- &.o-trans-fading{
- -webkit-transition: -webkit-transform .5s ease;
- transition: transform .5s ease;
- position: fixed;
- -webkit-transform: translate3d(100%, 0px, 0px);
- transform: translate3d(100%, 0px, 0px);
- }
- }
|