index.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. html {
  6. width: 100%;
  7. height: auto;
  8. background: url(../img/bg.jpg) no-repeat bottom center
  9. }
  10. body {
  11. font-family: SourceHanSansCN-Medium;
  12. min-width: 1280px;
  13. }
  14. .head {
  15. /* width: 1280px; */
  16. height: 118px;
  17. margin: 0 auto;
  18. background: #fff;
  19. }
  20. .headcon {
  21. width: 1280px;
  22. margin: 0 auto;
  23. }
  24. .logo {
  25. width: 100px;
  26. height: 100px;
  27. background: url(../img/logo.png) no-repeat top center;
  28. margin: 6px 18px 0 18px;
  29. background-size: 100%;
  30. display: inline-block;
  31. }
  32. .name {
  33. color: #D680E5;
  34. font-size: 30px;
  35. line-height: 111px;
  36. height: 0;
  37. display: inline-block;
  38. vertical-align: top;
  39. }
  40. .article {
  41. min-height: 662px;
  42. width: 1280px;
  43. margin: 0 auto;
  44. position: relative;
  45. }
  46. .loginwrap {
  47. width: 418px;
  48. height: 576px;
  49. background: rgba(255, 255, 255, 1);
  50. position: absolute;
  51. top: 26px;
  52. right: 32px;
  53. font-size: 17px;
  54. }
  55. .type1,
  56. .type2 {
  57. display: inline-block;
  58. font-size: 17px;
  59. color: #999999;
  60. padding: 29px 54px;
  61. text-align: center;
  62. position: relative;
  63. cursor: pointer;
  64. }
  65. .type1.active,
  66. .type2.active {
  67. color: #333;
  68. }
  69. .type1.active::before,
  70. .type2.active::before {
  71. content: '';
  72. width: 84px;
  73. height: 3px;
  74. background: rgb(214, 128, 229);
  75. position: absolute;
  76. bottom: 10px;
  77. left: 0;
  78. right: 0;
  79. margin: auto;
  80. }
  81. .type2.active::before {
  82. width: 48px;
  83. }
  84. .con2 {
  85. display: none;
  86. margin-bottom: 49px;
  87. }
  88. .con1 {}
  89. .logincon {
  90. margin-top: 20px;
  91. }
  92. .user,
  93. .pwd,
  94. .phone,
  95. .code {
  96. width: 334px;
  97. height: 50px;
  98. border: 1px solid rgba(204, 204, 204, 1);
  99. margin: 0 auto 20px;
  100. }
  101. .code,
  102. .yzm {
  103. width: 334px;
  104. height: 52px;
  105. margin: 0 auto 0px;
  106. border: none;
  107. }
  108. .yzm1 {
  109. display: inline-block;
  110. vertical-align: text-bottom;
  111. }
  112. .yzm2 {
  113. height: 52px;
  114. width: 130px;
  115. display: inline-block;
  116. vertical-align: text-bottom;
  117. }
  118. .yzm2 img {
  119. width: 100%;
  120. height: 100%;
  121. }
  122. .code2 {
  123. width: 161px;
  124. height: 52px;
  125. margin-right: 37px;
  126. border: 1px solid rgba(204, 204, 204, 1);
  127. }
  128. .remember {
  129. width: 334px;
  130. margin: 0 auto 0;
  131. }
  132. .rememberme {
  133. width: 20px;
  134. margin-right: 8px;
  135. }
  136. .i1,
  137. .i2,
  138. .i5 {
  139. display: inline-block;
  140. width: 18px;
  141. height: 23px;
  142. background: url(../img/register.png) no-repeat top center;
  143. background-size: 100% auto;
  144. margin: 14px 24px;
  145. vertical-align: middle;
  146. }
  147. .i2 {
  148. background: url(../img/forget.png) no-repeat top center;
  149. background-size: 100% auto;
  150. }
  151. .i5 {
  152. width: 22px;
  153. height: 18px;
  154. background: url(../img/msg.png) no-repeat top center;
  155. background-size: 100% auto;
  156. }
  157. input {
  158. font-size: 17px;
  159. vertical-align: middle;
  160. border: none;
  161. height: 49px;
  162. width: 262px;
  163. padding-left: 4px;
  164. box-sizing: border-box;
  165. }
  166. .loginbtn {
  167. margin: 0 auto 0;
  168. width: 334px;
  169. height: 50px;
  170. border: 1px solid rgba(204, 204, 204, 1);
  171. background: #D680E5;
  172. text-align: center;
  173. color: #fff;
  174. line-height: 50px;
  175. cursor: pointer;
  176. display: inherit
  177. }
  178. .loginhard {
  179. color: #D680E5;
  180. width: 334px;
  181. margin: 20px auto 46px;
  182. overflow: hidden;
  183. }
  184. .forget {
  185. float: left;
  186. display: inline-block;
  187. cursor: pointer;
  188. }
  189. .register {
  190. float: right;
  191. display: inline-block;
  192. cursor: pointer;
  193. }
  194. .w1 {
  195. color: #999;
  196. text-align: center;
  197. position: relative;
  198. margin: 20px 0;
  199. }
  200. .w1::before {
  201. content: '';
  202. width: 84px;
  203. height: 2px;
  204. background: rgba(238, 238, 238, 1);
  205. position: absolute;
  206. left: 44px;
  207. top: 10px;
  208. }
  209. .w1::after {
  210. content: '';
  211. width: 84px;
  212. height: 2px;
  213. background: rgba(238, 238, 238, 1);
  214. position: absolute;
  215. right: 44px;
  216. top: 10px;
  217. }
  218. .i3 {
  219. display: inline-block;
  220. width: 49px;
  221. height: 40px;
  222. background: url(../img/wx.png) no-repeat top center;
  223. background-size: 100% auto;
  224. vertical-align: middle;
  225. }
  226. .i4 {
  227. display: inline-block;
  228. width: 50px;
  229. height: 50px;
  230. background: url(../img/dd.png) no-repeat top center;
  231. background-size: 100% auto;
  232. vertical-align: middle;
  233. }
  234. .thirdtype {
  235. text-align: center;
  236. margin-top: 34px;
  237. }
  238. .wechat,
  239. .ding {
  240. width: 50px;
  241. text-align: center;
  242. display: inline-block;
  243. margin: 0 42px;
  244. cursor: pointer;
  245. }
  246. .code1 {
  247. width: 201px;
  248. height: 100%;
  249. display: inline-block;
  250. border: 1px solid rgba(204, 204, 204, 1);
  251. vertical-align: text-bottom;
  252. display: inline-block;
  253. }
  254. .send {
  255. width: 115px;
  256. height: 52px;
  257. border: 1px solid rgba(204, 204, 204, 1);
  258. text-align: center;
  259. line-height: 50px;
  260. margin-left: 8px;
  261. display: inline-block;
  262. vertical-align: text-bottom;
  263. color: #666;
  264. background: transparent;
  265. cursor: default
  266. }
  267. .send.active {
  268. color: #fff;
  269. cursor: pointer;
  270. background: #D680E5;
  271. }
  272. .inputcode {
  273. width: 131px;
  274. }
  275. .loginwechat,
  276. .loginding {
  277. display: none;
  278. position: relative;
  279. width: 100%;
  280. height: 100%;
  281. }
  282. .i6 {
  283. width: 24px;
  284. height: 24px;
  285. display: inline-block;
  286. background: url(../img/close.png) no-repeat top center;
  287. background-size: 100% auto;
  288. position: absolute;
  289. right: 20px;
  290. top: 20px;
  291. cursor: pointer;
  292. }
  293. .login_container {
  294. width: 260px;
  295. height: 260px;
  296. /*background-image: url(../img/ewm.png);*/
  297. background-repeat: no-repeat;
  298. background-size: 100% auto;
  299. position: absolute;
  300. left: 0;
  301. right: 0;
  302. top: 0;
  303. bottom: 0;
  304. margin: auto;
  305. }
  306. .login_qrcode_content{
  307. text-align: center !important;
  308. height: 210px !important;
  309. width: 159px !important;
  310. margin: auto !important;
  311. margin-top: 118px !important;
  312. }
  313. .rememberme{
  314. width: 20px;
  315. }