page.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. .main{
  2. width: 100%;
  3. background: url(../img/bg.png) no-repeat;
  4. background-size: cover;
  5. }
  6. .banner{
  7. width: 100%;
  8. }
  9. .login{
  10. width: 94%;
  11. margin: 0 auto;
  12. margin-bottom: 2rem;
  13. padding: 1.8rem 0.8rem 1.5rem 0.8rem;
  14. background: url(../img/login_bg.png) no-repeat;
  15. /*opacity: 0.8;*/
  16. background-size: 100% 100%;
  17. border-radius: 0.6rem;
  18. box-sizing: border-box;
  19. }
  20. .kaitong{
  21. margin-top: 2rem;
  22. }
  23. .login .iphone,.login .yanzhenma{
  24. width: 100%;
  25. box-sizing: border-box;
  26. margin-bottom: 1rem;
  27. padding: 0.84rem 0 0.8rem 1rem;
  28. font-size: 0.95rem;
  29. border-radius: 0.3rem;
  30. opacity:0.49;
  31. border: 1px solid #FFFFFF;
  32. }
  33. .login .yanzhenma{
  34. width: 60%;
  35. margin-bottom: 0;
  36. }
  37. .login .yangzhenma_box{
  38. display: flex;
  39. justify-content: space-between;
  40. align-items: center;
  41. }
  42. .login .yanzhenma_btn{
  43. display: block;
  44. border: 0;
  45. width: 35%;
  46. text-align: center;
  47. padding: 0.8rem;
  48. font-size: 0.9rem;
  49. border-radius: 0.3rem;
  50. background-color: #FF14CB;
  51. color: white;
  52. }
  53. .btn,.Tbtn{
  54. display: block;
  55. width: 90%;
  56. margin: 0 auto;
  57. margin-bottom: 0.875rem;
  58. padding: 0.68rem 0;
  59. background: linear-gradient(to right,#562BE4,#461BD2,#D61D87,#E53535);
  60. font-size: 1.25rem;
  61. color: white;
  62. text-align: center;
  63. border-radius: 0.3rem;
  64. }
  65. .line{
  66. width: 100%;
  67. height: 0.07rem;
  68. background:rgba(208,208,208,1);
  69. }
  70. .tips{
  71. width: 94%;
  72. margin: 0 auto;
  73. }
  74. .tips_header{
  75. width: 100%;
  76. margin: 1.3rem 0 1.1rem 0;
  77. font-size: 0.95rem;
  78. color: white;
  79. text-align: center;
  80. }
  81. .tips_item{
  82. display: flex;
  83. padding-bottom: 1rem;
  84. font-size: 0.8rem;
  85. align-items: flex-start;
  86. }
  87. .tips_item .num{
  88. width: 1.4rem;
  89. line-height: 1.4rem;
  90. margin-top: 0.1rem;
  91. margin-right: 0.68rem;
  92. background: url(../img/font-bg.png) no-repeat;
  93. background-size: 100% 100%;
  94. text-align: center;
  95. color:white;
  96. }
  97. .tips_item span{
  98. width: 90%;
  99. color:rgba(173,173,173,1);
  100. }
  101. .login_header{
  102. margin-bottom: 1rem;
  103. font-size: 1rem;
  104. color: white;
  105. }
  106. .login .circular{
  107. display: inline-block;
  108. width: 0.7rem;
  109. height: 0.7rem;
  110. margin-top: 0.1rem;
  111. border: 0.06rem solid white;
  112. position: relative;
  113. border-radius: 0.7rem;
  114. }
  115. #chec+label:before{
  116. content: "\a0";
  117. display: inline-block;
  118. vertical-align: middle;
  119. box-sizing: border-box;
  120. font-size: 18px;
  121. width: 0.75em;
  122. height: 0.75em;
  123. margin-right: .4em;
  124. margin-top: -0.2rem;
  125. border-radius: 50%;
  126. border: 0.06rem solid #fff;
  127. /* text-indent: .15em;*/
  128. /* line-height: 1; */
  129. }
  130. #chec:checked+label:before {
  131. background-color: #FF14CB;
  132. background-clip: content-box;
  133. padding: .16em;
  134. }
  135. #chec{
  136. position: absolute;
  137. clip: rect(0, 0, 0, 0);
  138. }
  139. .login .active:before{
  140. content: '';
  141. width: 0.3rem;
  142. height: 0.3rem;
  143. position: absolute;
  144. top:0.1875rem;
  145. left: 0.1875rem;
  146. border-radius: 0.3rem;
  147. background-color: #FF14CB;
  148. }
  149. .login_foot label{
  150. color: #7561B4;
  151. font-size: 0.8rem;
  152. }
  153. .login .login_foot{
  154. margin-top: 1rem;
  155. }
  156. .login .login_foot span{
  157. display: inline-block;
  158. font-size: 0.8rem;
  159. color:rgba(117,97,180,1);
  160. }
  161. .fuli{
  162. width: 94%;
  163. text-align: center;
  164. margin: 0 auto;
  165. margin-bottom: 1rem;
  166. font-size:0.97rem;
  167. text-shadow: 3px 1px 1px #FF14CB;
  168. color:rgba(255,255,255,1);
  169. }
  170. .fuli a{
  171. color: white;
  172. text-decoration: underline;
  173. }
  174. .maskArea{
  175. position: fixed;
  176. width: 100%;
  177. height: 100%;
  178. top:0;
  179. left: 0;
  180. background-color: black;
  181. opacity: 0.5;
  182. z-index: 1;
  183. font-size:1.25rem;
  184. color: white;
  185. }
  186. .tc{
  187. width: 96%;
  188. min-height: 40%;
  189. position: fixed;
  190. top:27%;
  191. left: 2%;
  192. display: flex;
  193. flex-flow: column;
  194. align-items: center;
  195. align-content: center;
  196. justify-content: center;
  197. /*padding-top: 4.5rem;*/
  198. /*padding-bottom: 6.1rem;*/
  199. text-align: center;
  200. background: url(../img/tanchaung.png) no-repeat;
  201. background-size: 100% 100%;
  202. z-index: 2;
  203. color: white;
  204. }
  205. .tc .wancheng{
  206. width: 3.5rem;
  207. margin: 0 auto;
  208. margin-bottom: 1rem;
  209. }
  210. .close{
  211. position: fixed;
  212. top: 27%;
  213. width: 2rem;
  214. right: 12%;
  215. z-index: 3;
  216. }
  217. .shengyu{
  218. width: 50%;
  219. height: 50%;
  220. margin: 0 auto;
  221. position: relative;
  222. display: flex;
  223. flex-flow: column;
  224. align-items: center;
  225. align-content: center;
  226. justify-content: center;
  227. color: white;
  228. border-radius: 50%;
  229. background: linear-gradient(to bottom,#562BE4,#461BD2,#D61D87,#E53535);
  230. }
  231. .header1{
  232. width: 94%;
  233. position: relative;
  234. display: flex;
  235. align-items: center;
  236. align-content: center;
  237. box-sizing: border-box;
  238. margin: 1rem auto;
  239. background: url(../img/zhizhen.png) no-repeat;
  240. background-position: 0.06rem;
  241. background-size: 100%;
  242. }
  243. .shengyu p{
  244. font-size: 1.25rem;
  245. }
  246. .shengyu span{
  247. font-size: 2.8rem;
  248. }
  249. .yiyong{
  250. width: 100%;
  251. display: flex;
  252. justify-content: space-around;
  253. font-size: 0.94rem;
  254. color: #484A9A;
  255. }
  256. .yiyong .yiyong_item{
  257. display: flex;
  258. flex-flow: column;
  259. align-items: center;
  260. align-content: center;
  261. margin-bottom: 1.5rem;
  262. }
  263. .yiyong_item span{
  264. color: white;
  265. padding-top: 0.5rem;
  266. }
  267. .fuli1{
  268. width: 100%;
  269. padding: 0.5rem 0;
  270. text-align: center;
  271. color: white;
  272. font-size: 0.94rem;
  273. background-color: #FF14CB;
  274. }
  275. .fuli1 span{
  276. text-decoration: underline;
  277. }
  278. .dingyue{
  279. padding-top: 1.5rem;
  280. }
  281. #myCanvas{
  282. width: 80%;
  283. position: absolute;
  284. top: 10%;
  285. left: 10%;
  286. }
  287. .tuiding{
  288. display: flex;
  289. align-items: flex-start;
  290. text-align: left;
  291. margin-top: 2rem;
  292. }
  293. .tuiding img{
  294. width: 0.5rem;
  295. padding-right: 0.4rem;
  296. padding-top: 0.2rem;
  297. }
  298. .Ttips{
  299. width: 90%;
  300. }
  301. .info_data li.ck {
  302. text-align: left;
  303. }
  304. #co{
  305. display:inline-block;
  306. width:60%;
  307. word-wrap:break-word;
  308. white-space:normal;
  309. }