global.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. @charset "UTF-8";
  2. @import "base";
  3. @import "common";
  4. // @import "popup";
  5. body{
  6. background: #2b2c30;
  7. @media #{$desktop} {
  8. background: url('../../assets/bg.jpg') center top no-repeat;
  9. }
  10. .el-button{
  11. padding: 8px 20px;
  12. }
  13. }
  14. body, html{
  15. height: 100%;
  16. }
  17. #app{
  18. height: 100%;
  19. -webkit-overflow-scrolling: touch;
  20. }
  21. .box{
  22. position: relative;
  23. background-color: #eee;
  24. height: 100%;
  25. overflow: hidden;
  26. }
  27. a{
  28. &:hover{
  29. text-decoration: none;
  30. }
  31. }
  32. .mee-chat-logo{
  33. position: absolute;
  34. background: url('../../assets/mee-logo.png') no-repeat;
  35. width: 84px;
  36. height: 96px;
  37. left: 50%;
  38. margin-left: -42px;
  39. top: 20px;
  40. }
  41. // 弹窗样式
  42. .msgbox-fade-enter-active {
  43. animation: msgbox-fade-in .3s;
  44. }
  45. .msgbox-fade-leave-active {
  46. animation: msgbox-fade-out .3s;
  47. }
  48. @keyframes msgbox-fade-in {
  49. 0% {
  50. transform: translate3d(0, -20px, 0);
  51. opacity: 0;
  52. }
  53. 100% {
  54. transform: translate3d(0, 0, 0);
  55. opacity: 1;
  56. }
  57. }
  58. @keyframes msgbox-fade-out {
  59. 0% {
  60. transform: translate3d(0, 0, 0);
  61. opacity: 1;
  62. }
  63. 100% {
  64. transform: translate3d(0, -20px, 0);
  65. opacity: 0;
  66. }
  67. }
  68. @keyframes fade-in {
  69. 0% {
  70. opacity: 0;
  71. }
  72. 100% {
  73. opacity: 1;
  74. }
  75. }
  76. @keyframes fade-out {
  77. 0% {
  78. opacity: 1;
  79. }
  80. 100% {
  81. opacity: 0;
  82. }
  83. }