global.scss 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. @charset "UTF-8";
  2. @import "base";
  3. // @import "popup";
  4. body{
  5. background: #2b2c30;
  6. @media #{$desktop} {
  7. background: url('../../assets/bg.jpg') center top no-repeat;
  8. }
  9. .el-button{
  10. padding: 8px 20px;
  11. }
  12. }
  13. .pub-scroll-box{
  14. &::-webkit-scrollbar {
  15. width: 8px;
  16. height: 6px;
  17. }
  18. &::-webkit-scrollbar-thumb {
  19. border-radius: 3px;
  20. -moz-border-radius: 3px;
  21. -webkit-border-radius: 3px;
  22. background-color: transparent;
  23. }
  24. &::-webkit-scrollbar-track {
  25. background-color: transparent;
  26. }
  27. &:hover{
  28. &::-webkit-scrollbar-thumb {
  29. background-color: rgba($color: #c3c3c3, $alpha: 0.3);
  30. }
  31. }
  32. }
  33. .vb > .vb-dragger {
  34. z-index: 5;
  35. width: 8px;
  36. right: 0;
  37. min-width: 10px!important;
  38. }
  39. .vb > .vb-dragger > .vb-dragger-styler {
  40. -webkit-backface-visibility: hidden;
  41. backface-visibility: hidden;
  42. -webkit-transform: rotate3d(0,0,0,0);
  43. transform: rotate3d(0,0,0,0);
  44. -webkit-transition:
  45. background-color 100ms ease-out,
  46. margin 100ms ease-out,
  47. height 100ms ease-out;
  48. transition:
  49. background-color 100ms ease-out,
  50. margin 100ms ease-out,
  51. height 100ms ease-out;
  52. background-color: rgba(48, 121, 244,.1);
  53. // margin: 5px 0 5px 0;
  54. border-radius: 20px;
  55. // height: calc(100% - 10px);
  56. height: 100%;
  57. display: block;
  58. }
  59. .vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
  60. background-color: rgba(48, 121, 244,.3);
  61. }
  62. .vb > .vb-dragger:hover > .vb-dragger-styler {
  63. background-color: rgba(48, 121, 244,.5);
  64. margin: 0px;
  65. height: 100%;
  66. }
  67. .vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
  68. background-color: rgba(48, 121, 244,.5);
  69. margin: 0px;
  70. height: 100%;
  71. }
  72. .vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
  73. background-color: rgba(48, 121, 244,.5);
  74. }
  75. body, html{
  76. height: 100%;
  77. }
  78. #app{
  79. height: 100%;
  80. -webkit-overflow-scrolling: touch;
  81. }
  82. .box{
  83. position: relative;
  84. background-color: #eee;
  85. height: 100%;
  86. overflow: hidden;
  87. }
  88. .mee-chat-logo{
  89. position: absolute;
  90. background: url('../../assets/mee-logo.png') no-repeat;
  91. width: 84px;
  92. height: 96px;
  93. left: 50%;
  94. margin-left: -42px;
  95. top: 20px;
  96. }
  97. // 弹窗样式
  98. .msgbox-fade-enter-active {
  99. animation: msgbox-fade-in .3s;
  100. }
  101. .msgbox-fade-leave-active {
  102. animation: msgbox-fade-out .3s;
  103. }
  104. @keyframes msgbox-fade-in {
  105. 0% {
  106. transform: translate3d(0, -20px, 0);
  107. opacity: 0;
  108. }
  109. 100% {
  110. transform: translate3d(0, 0, 0);
  111. opacity: 1;
  112. }
  113. }
  114. @keyframes msgbox-fade-out {
  115. 0% {
  116. transform: translate3d(0, 0, 0);
  117. opacity: 1;
  118. }
  119. 100% {
  120. transform: translate3d(0, -20px, 0);
  121. opacity: 0;
  122. }
  123. }
  124. @keyframes fade-in {
  125. 0% {
  126. opacity: 0;
  127. }
  128. 100% {
  129. opacity: 1;
  130. }
  131. }
  132. @keyframes fade-out {
  133. 0% {
  134. opacity: 1;
  135. }
  136. 100% {
  137. opacity: 0;
  138. }
  139. }
  140. .pub-wrapper{
  141. position: fixed;
  142. left: 0;
  143. top: 0;
  144. right: 0;
  145. bottom: 0;
  146. z-index: 888;
  147. text-align: center;
  148. &:after{
  149. content: "";
  150. display: inline-block;
  151. height: 100%;
  152. width: 0;
  153. vertical-align: middle;
  154. }
  155. .pub-mask{
  156. position: fixed;
  157. left: 0;
  158. top: 0;
  159. width: 100%;
  160. height: 100%;
  161. opacity: .5;
  162. background: #000;
  163. z-index: 1014;
  164. }
  165. }
  166. .pub-modal{
  167. display: inline-block;
  168. vertical-align: middle;
  169. background-color: #ffffff;
  170. min-width: 330px;
  171. position: relative;
  172. z-index: 1015;
  173. padding: 0 18px 18px;
  174. box-sizing: border-box;
  175. .modal-hd{
  176. .title{
  177. font-size: 14px;
  178. color: #333333;
  179. text-align: center;
  180. height: 30px;
  181. line-height: 30px;
  182. padding-top: 10px;
  183. }
  184. i{
  185. position: absolute;
  186. right: 6px;
  187. top: 6px;
  188. font-size: 20px;
  189. cursor: pointer;
  190. }
  191. }
  192. }
  193. // 头像
  194. .avatar_bg0{background:#f5882b}
  195. .avatar_bg1{background:#cc90e2}
  196. .avatar_bg2{background:#80d066}
  197. .avatar_bg3{background:#6fb1e4}
  198. .avatar_bg4{background:#f98bae}
  199. .avatar_bg5{background:#ecd074}
  200. .avatar_bg6{background:#e57979}
  201. .avatar_bg7{background:#fba76f}
  202. .avatar_bg8{background:#73cdd0}
  203. .avatar_bg9{background:#fb60c4}
  204. .user-avatar{
  205. width: 40px;
  206. height: 40px;
  207. line-height: 40px;
  208. text-align: center;
  209. border-radius: 2px;
  210. cursor: pointer;
  211. &::before{
  212. content: attr(data-name);
  213. color: #ffffff;
  214. font-size: 14px;
  215. }
  216. &:hover{
  217. opacity: .8;
  218. }
  219. }
  220. @keyframes rotate {
  221. from {
  222. transform: rotate(0deg);
  223. }
  224. to {
  225. transform: rotate(360deg);
  226. }
  227. }