global.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. @charset "UTF-8";
  2. @import "base/reset";
  3. @import "base/mixins";
  4. // @import "base/ui-dialog";
  5. @import "plugin/nprogress";
  6. @import "page/match.scss";
  7. @import "page/hero.scss";
  8. .fade-transition {
  9. transition: opacity .3s ease;
  10. }
  11. .fade-enter, .fade-leave {
  12. opacity: 0;
  13. }
  14. html,body{
  15. width: 100%;
  16. height: 100%;
  17. background-color: #efefef;
  18. font-family: Microsoft Yahei,sans-serif;
  19. a{
  20. text-decoration: none;
  21. }
  22. }
  23. #app{
  24. min-height: px2rem(1334);
  25. transform: translate3d(0, 0, 0);
  26. -webkit-overflow-scrolling: touch;
  27. }
  28. .hidden{
  29. display: none;
  30. }
  31. .o-wrap{
  32. position: relative;
  33. height: 100%;
  34. }
  35. .o-wrapout{
  36. width: 100%;
  37. height: 100%;
  38. }
  39. .hide_nav .o-container {
  40. padding-bottom: 0;
  41. }
  42. .hide_nav .o-nav {
  43. display: none;
  44. }
  45. .o-container{
  46. min-height: 100%;
  47. position: relative;
  48. background-color: #efefef;
  49. &:after{
  50. position: fixed;
  51. z-index: 11;
  52. content: "";
  53. top: 0;
  54. left: 0;
  55. right: 0;
  56. bottom: 0;
  57. background: #000;
  58. opacity: 0;
  59. display: none;
  60. transition: opacity .2s ease;
  61. }
  62. &.o-rendering{
  63. &:after{
  64. opacity: 0.75;
  65. display: block;
  66. transition: opacity .2s ease;
  67. }
  68. }
  69. &.o-trans-fading{
  70. -webkit-transition: -webkit-transform .5s ease;
  71. transition: transform .5s ease;
  72. position: fixed;
  73. -webkit-transform: translate3d(100%, 0px, 0px);
  74. transform: translate3d(100%, 0px, 0px);
  75. }
  76. }