common.scss 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. .loadingShadow{
  2. position: fixed;
  3. z-index: 999999999999;
  4. left: 0;
  5. top: 0;
  6. width: 100vw;
  7. height: 100vh;
  8. }
  9. .loadData{
  10. min-width:110px;
  11. height:110px;
  12. position: absolute;
  13. left: 50%;
  14. top:50%;
  15. transform: translate(-50%,-50%);
  16. background: rgba(0,0,0,0.6);
  17. border-radius: 10px;
  18. z-index: 1000;
  19. display: flex;
  20. flex-direction: column;
  21. align-items: center;
  22. justify-content:center;
  23. img{
  24. width:90px;
  25. margin-top: 10px;
  26. }
  27. .loadingMsg{
  28. color: rgba(255, 255, 255, 0.83);
  29. margin: 10px;
  30. margin-top: 0px;
  31. font-size: 18rem;
  32. }
  33. }
  34. .account-view{
  35. width: 500rem;
  36. // height: 362rem;
  37. padding:30rem 40rem;
  38. box-sizing:border-box;
  39. background-color: rgba(255, 255, 255, 0.9);
  40. border-radius: 20rem;
  41. // backdrop-filter: blur(30px);
  42. .title-icon{
  43. width:18rem;
  44. margin-right:10rem;
  45. }
  46. .close{
  47. .close-img{
  48. font-size: 16rem;
  49. font-weight: bold;
  50. color:#000;
  51. cursor: pointer;
  52. }
  53. }
  54. .content{
  55. width: 100%;
  56. color: #0b0b0b;
  57. font-size: 14rem;
  58. .content-main-view{
  59. height: 250rem;
  60. border-radius: 6rem;
  61. background: #fff;
  62. box-sizing:border-box;
  63. padding: 18rem;
  64. overflow: auto;
  65. .selcect-view{
  66. position: relative;
  67. width: 16rem;
  68. height: 16rem;
  69. border-radius: 100%;
  70. background: transparent;
  71. border: 1rem solid #ef863f;
  72. box-sizing:border-box;
  73. }
  74. .selcect-view::after{
  75. content: '';
  76. position: absolute;
  77. top: 50%;
  78. left: 50%;
  79. transform: translate(-50%,-50%);
  80. width: 10rem;
  81. height: 10rem;
  82. border-radius: 100%;
  83. background: #ef863f;
  84. box-sizing:border-box;
  85. }
  86. .unselcect-view{
  87. width: 16rem;
  88. height: 16rem;
  89. border-radius: 8rem;
  90. background: rgba(249, 249, 249, 0.2);
  91. border: 1rem solid rgba(0, 0, 0, 0.2);
  92. }
  93. .gougou-icon{
  94. color: #EF863F;
  95. }
  96. }
  97. }
  98. .auth-btn-view{
  99. .auth-btn{
  100. width: 120rem;
  101. height: 40rem;
  102. border-radius: 10rem;
  103. cursor: pointer;
  104. }
  105. .style1{
  106. font-family: "Verdana Bold";
  107. font-weight: 700;
  108. font-size: 14rem;
  109. color: #151515;
  110. background: #d5d5d5;
  111. }
  112. .style2{
  113. font-family: "Verdana Bold";
  114. font-weight: 700;
  115. font-size: 14rem;
  116. color: #fff;
  117. background: #ef863f;
  118. box-shadow: 0 12px 24px rgba(239, 134, 63, 0.2);
  119. }
  120. }
  121. }
  122. .overflow{
  123. overflow: hidden;
  124. text-overflow:ellipsis;
  125. white-space: nowrap;
  126. }
  127. .ellipsis{
  128. text-overflow: ellipsis;
  129. }
  130. // @media screen and (min-width:768px) {
  131. // body,html,#app{
  132. // min-width: 1336px;
  133. // max-width: 1336px;
  134. // background: #f4f4f4;
  135. // color: #737373;
  136. // height: 100%;
  137. // };
  138. // }
  139. body,html{
  140. height:100%;
  141. width:100%;
  142. margin: 0 auto;
  143. padding: 0;
  144. position: relative;
  145. background-color: #f4f4f4;
  146. // font-size: 13px;
  147. }
  148. #app{
  149. width:100%;
  150. margin: 0 auto;
  151. padding: 0;
  152. height:100%;
  153. left:0;
  154. top:0;
  155. -webkit-overflow-scrolling: touch;
  156. position:absolute;
  157. font-family: Verdana, Verdana-Bold, "Hiragino Sans GB", "Microsoft Yahei UI",
  158. "Microsoft Yahei", 微软雅黑, "Segoe UI", Tahoma, 宋体宋体, SimSun,
  159. sans-serif;
  160. }
  161. ul, li, ol, dl, dd,a{
  162. list-style: none;
  163. padding: 0;
  164. margin:0;
  165. }
  166. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  167. color:#B1C1C8;
  168. }
  169. ::-moz-placeholder { /* Mozilla Firefox 19+ */
  170. color:#B1C1C8;
  171. }
  172. input:-ms-input-placeholder{
  173. color:#B1C1C8;
  174. }
  175. input::-webkit-input-placeholder{
  176. color:#B1C1C8;
  177. }
  178. .show-flex5{
  179. display: flex;
  180. }
  181. .align-center{
  182. align-items: center;
  183. }
  184. .column{
  185. flex-direction: column;
  186. }
  187. .content-center{
  188. justify-content: center;
  189. }
  190. .content-between{
  191. justify-content: space-between;
  192. }
  193. .content-around{
  194. justify-content: space-around;
  195. }
  196. .cursor-pointer{
  197. cursor: pointer;
  198. }
  199. .flex-end{
  200. justify-content: flex-end;
  201. }
  202. /******************** element 分页样式修改 *****************/
  203. #app{
  204. ::v-deep .el-pagination .btn-next,::v-deep .el-pagination .btn-prev {
  205. background: center center no-repeat #0000;
  206. background-size: 16px;
  207. cursor: pointer;
  208. margin: 0;
  209. color: #c7c8c9;
  210. border: 1px solid #fff3;
  211. border-radius: 4px;
  212. }
  213. ::v-deep .el-pagination.is-background .el-pager li {
  214. background-color: #f4f4f500;
  215. color: #8d8d8d;
  216. }
  217. ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  218. background-color: #fff2;
  219. border-radius: 4px;
  220. color: #FFF;
  221. }
  222. }
  223. /*****************************************************************/