main.css 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  1. /*//////////////////////////////////////////////////////////////////
  2. [ RESTYLE TAG ]*/
  3. * {
  4. margin: 0px;
  5. padding: 0px;
  6. box-sizing: border-box;
  7. }
  8. body, html {
  9. height: 100%;
  10. font-family: 'Microsoft Yahei', sans-serif;
  11. }
  12. /*------------网站的背景---------------------------------*/
  13. .bg {
  14. background: url(https://www.98qy.com/sjbz/api.php) no-repeat center;
  15. background-size: cover;
  16. background-attachment: fixed;
  17. }
  18. /*---------------------------------------------*/
  19. a {
  20. font-family: 'Microsoft Yahei';
  21. font-size: 14px;
  22. line-height: 1.7;
  23. color: #666666;
  24. margin: 0px;
  25. transition: all 0.4s;
  26. -webkit-transition: all 0.4s;
  27. -o-transition: all 0.4s;
  28. -moz-transition: all 0.4s;
  29. }
  30. a:focus {
  31. outline: none !important;
  32. }
  33. a:hover {
  34. text-decoration: none;
  35. color: #a64bf4;
  36. }
  37. /*---------------------------------------------*/
  38. h1,h2,h3,h4,h5,h6 {
  39. margin: 0px;
  40. }
  41. p {
  42. font-family: 'Microsoft Yahei';
  43. font-size: 14px;
  44. line-height: 1.7;
  45. color: #666666;
  46. margin: 0px;
  47. }
  48. ul, li {
  49. margin: 0px;
  50. list-style-type: none;
  51. }
  52. /*---------------------------------------------*/
  53. input {
  54. outline: none;
  55. border: none;
  56. }
  57. /* 文本框特效不要了2021.1.27
  58. textarea {
  59. outline: none;
  60. border: none;
  61. }
  62. textarea:focus, input:focus {
  63. border-color: transparent !important;
  64. }
  65. input:focus::-webkit-input-placeholder { color:transparent; }
  66. input:focus:-moz-placeholder { color:transparent; }
  67. input:focus::-moz-placeholder { color:transparent; }
  68. input:focus:-ms-input-placeholder { color:transparent; }
  69. textarea:focus::-webkit-input-placeholder { color:transparent; }
  70. textarea:focus:-moz-placeholder { color:transparent; }
  71. textarea:focus::-moz-placeholder { color:transparent; }
  72. textarea:focus:-ms-input-placeholder { color:transparent; }
  73. input::-webkit-input-placeholder { color: #adadad;}
  74. input:-moz-placeholder { color: #adadad;}
  75. input::-moz-placeholder { color: #adadad;}
  76. input:-ms-input-placeholder { color: #adadad;}
  77. textarea::-webkit-input-placeholder { color: #adadad;}
  78. textarea:-moz-placeholder { color: #adadad;}
  79. textarea::-moz-placeholder { color: #adadad;}
  80. textarea:-ms-input-placeholder { color: #adadad;}
  81. */
  82. /*---------------------------------------------*/
  83. button {
  84. outline: none !important;
  85. border: none;
  86. background: transparent;
  87. }
  88. button:hover {
  89. cursor: pointer;
  90. }
  91. iframe {
  92. border: none !important;
  93. }
  94. /*//////////////////////////////////////////////////////////////////
  95. [ Utility ]*/
  96. .txt1 {
  97. font-family: 'Microsoft Yahei';
  98. font-size: 14px;
  99. line-height: 1.5;
  100. color: #666666;
  101. }
  102. .txt2 {
  103. font-family: 'Microsoft Yahei';
  104. font-size: 14px;
  105. line-height: 1.5;
  106. color: #333333;
  107. text-transform: uppercase;
  108. }
  109. .bg1 {background-color: #3b5998}
  110. .bg2 {background-color: #1da1f2}
  111. .bg3 {background-color: #ea4335}
  112. /*//////////////////////////////////////////////////////////////////
  113. [ login ]*/
  114. .limiter {
  115. width: 100%;
  116. margin: 0 auto;
  117. }
  118. .container-login100 {
  119. width: 100%;
  120. min-height: 100vh;
  121. display: -webkit-box;
  122. display: -webkit-flex;
  123. display: -moz-box;
  124. display: -ms-flexbox;
  125. display: flex;
  126. flex-wrap: wrap;
  127. justify-content: center;
  128. align-items: center;
  129. padding: 15px;
  130. background-repeat: no-repeat;
  131. background-position: center;
  132. background-size: cover;
  133. }
  134. .wrap-login100 {
  135. width: 500px;
  136. background: #fff;
  137. border-radius: 10px;
  138. overflow: hidden;
  139. }
  140. /*------------------------------------------------------------------
  141. [ Form ]*/
  142. .login100-form {
  143. width: 100%;
  144. }
  145. .login100-form-title {
  146. display: block;
  147. font-family: 'Microsoft Yahei';
  148. font-size: 30px;
  149. color: #CC3333;
  150. line-height: 1.8;
  151. text-align: center;
  152. }
  153. /*------------------------------------------------------------------
  154. [ Input ]*/
  155. .wrap-input100 {
  156. width: 100%;
  157. position: relative;
  158. border-bottom: 2px solid #d9d9d9;
  159. }
  160. .label-input100 {
  161. font-family: 'Microsoft Yahei';
  162. font-size: 14px;
  163. color: #333333;
  164. line-height: 1.5;
  165. padding-left: 7px;
  166. }
  167. .input100 {
  168. font-family: 'Microsoft Yahei';
  169. font-size: 16px;
  170. color: #333333;
  171. line-height: 1.2;
  172. display: block;
  173. width: 100%;
  174. height: 55px;
  175. background: transparent;
  176. padding: 0 7px 0 43px;
  177. }
  178. /*---------------------------------------------*/
  179. .focus-input100 {
  180. position: absolute;
  181. display: block;
  182. width: 100%;
  183. height: 100%;
  184. top: 0;
  185. left: 0;
  186. pointer-events: none;
  187. }
  188. .focus-input100::after {
  189. content: attr(data-symbol);
  190. font-family: Material-Design-Iconic-Font;
  191. color: #adadad;
  192. font-size: 22px;
  193. display: -webkit-box;
  194. display: -webkit-flex;
  195. display: -moz-box;
  196. display: -ms-flexbox;
  197. display: flex;
  198. align-items: center;
  199. justify-content: center;
  200. position: absolute;
  201. height: calc(100% - 20px);
  202. bottom: 0;
  203. left: 0;
  204. padding-left: 13px;
  205. padding-top: 3px;
  206. }
  207. .focus-input100::before {
  208. content: "";
  209. display: block;
  210. position: absolute;
  211. bottom: -2px;
  212. left: 0;
  213. width: 0;
  214. height: 2px;
  215. background: #7f7f7f;
  216. -webkit-transition: all 0.4s;
  217. -o-transition: all 0.4s;
  218. -moz-transition: all 0.4s;
  219. transition: all 0.4s;
  220. }
  221. .input100:focus + .focus-input100::before {
  222. width: 100%;
  223. }
  224. .has-val.input100 + .focus-input100::before {
  225. width: 100%;
  226. }
  227. .input100:focus + .focus-input100::after {
  228. color: #a64bf4;
  229. }
  230. .has-val.input100 + .focus-input100::after {
  231. color: #a64bf4;
  232. }
  233. /*------------------------------------------------------------------
  234. [ Button ]*/
  235. .container-login100-form-btn {
  236. display: -webkit-box;
  237. display: -webkit-flex;
  238. display: -moz-box;
  239. display: -ms-flexbox;
  240. display: flex;
  241. flex-wrap: wrap;
  242. justify-content: center;
  243. }
  244. .wrap-login100-form-btn {
  245. width: 100%;
  246. display: block;
  247. position: relative;
  248. z-index: 1;
  249. border-radius: 25px;
  250. overflow: hidden;
  251. margin: 0 auto;
  252. box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
  253. -moz-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
  254. -webkit-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
  255. -o-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
  256. -ms-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
  257. }
  258. .login100-form-bgbtn {
  259. position: absolute;
  260. z-index: -1;
  261. width: 300%;
  262. height: 100%;
  263. background: #a64bf4;
  264. background: -webkit-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
  265. background: -o-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
  266. background: -moz-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
  267. background: linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
  268. top: 0;
  269. left: -100%;
  270. -webkit-transition: all 0.4s;
  271. -o-transition: all 0.4s;
  272. -moz-transition: all 0.4s;
  273. transition: all 0.4s;
  274. }
  275. .login100-form-btn {
  276. font-family: 'Microsoft Yahei';
  277. font-size: 16px;
  278. color: #fff;
  279. line-height: 1.2;
  280. text-transform: uppercase;
  281. display: -webkit-box;
  282. display: -webkit-flex;
  283. display: -moz-box;
  284. display: -ms-flexbox;
  285. display: flex;
  286. justify-content: center;
  287. align-items: center;
  288. padding: 0 20px;
  289. width: 100%;
  290. height: 50px;
  291. }
  292. .wrap-login100-form-btn:hover .login100-form-bgbtn {
  293. left: 0;
  294. }
  295. /*------------------------------------------------------------------
  296. [ Alert validate ]*/
  297. .validate-input {
  298. position: relative;
  299. }
  300. .alert-validate::before {
  301. content: attr(data-validate);
  302. position: absolute;
  303. max-width: 70%;
  304. background-color: #fff;
  305. border: 1px solid #c80000;
  306. border-radius: 2px;
  307. padding: 4px 25px 4px 10px;
  308. bottom: calc((100% - 20px) / 2);
  309. -webkit-transform: translateY(50%);
  310. -moz-transform: translateY(50%);
  311. -ms-transform: translateY(50%);
  312. -o-transform: translateY(50%);
  313. transform: translateY(50%);
  314. right: 2px;
  315. pointer-events: none;
  316. font-family: 'Microsoft Yahei';
  317. color: #c80000;
  318. font-size: 13px;
  319. line-height: 1.4;
  320. text-align: left;
  321. visibility: hidden;
  322. opacity: 0;
  323. -webkit-transition: opacity 0.4s;
  324. -o-transition: opacity 0.4s;
  325. -moz-transition: opacity 0.4s;
  326. transition: opacity 0.4s;
  327. }
  328. .alert-validate::after {
  329. content: "\f06a";
  330. font-family: FontAwesome;
  331. display: block;
  332. position: absolute;
  333. color: #c80000;
  334. font-size: 16px;
  335. bottom: calc((100% - 20px) / 2);
  336. -webkit-transform: translateY(50%);
  337. -moz-transform: translateY(50%);
  338. -ms-transform: translateY(50%);
  339. -o-transform: translateY(50%);
  340. transform: translateY(50%);
  341. right: 8px;
  342. }
  343. .alert-validate:hover:before {
  344. visibility: visible;
  345. opacity: 1;
  346. }
  347. @media (max-width: 992px) {
  348. .alert-validate::before {
  349. visibility: visible;
  350. opacity: 1;
  351. }
  352. }
  353. /*//////////////////////////////////////////////////////////////////
  354. [ Social item ]*/
  355. .login100-social-item {
  356. font-size: 25px;
  357. color: #fff;
  358. display: -webkit-box;
  359. display: -webkit-flex;
  360. display: -moz-box;
  361. display: -ms-flexbox;
  362. display: flex;
  363. justify-content: center;
  364. align-items: center;
  365. width: 50px;
  366. height: 50px;
  367. border-radius: 50%;
  368. margin: 5px;
  369. }
  370. .login100-social-item:hover {
  371. color: #fff;
  372. background-color: #333333;
  373. }
  374. /*///////雪-糕-资-源-网-w-c-h-1-2-3-.--c-n///////////////////////////////////////
  375. [ Responsive ]*/
  376. @media (max-width: 576px) {
  377. .wrap-login100 {
  378. padding-left: 15px;
  379. padding-right: 15px;
  380. }
  381. }