base.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876
  1. body {
  2. color: #333;
  3. background: #f7f7f7;
  4. }
  5. body,
  6. h1,
  7. h2,
  8. h3,
  9. h4,
  10. h5,
  11. h6,
  12. .h1,
  13. .h2,
  14. .h3,
  15. .h4,
  16. .h5,
  17. .h6,
  18. a {
  19. font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei";
  20. }
  21. h1,
  22. h2,
  23. h3,
  24. h4,
  25. h5 {
  26. margin: 0;
  27. }
  28. ul,
  29. li {
  30. list-style: none;
  31. margin: 0;
  32. padding: 0;
  33. }
  34. a:hover,
  35. a:focus {
  36. text-decoration: none;
  37. }
  38. a,
  39. a:focus,
  40. .btn:focus,
  41. .btn:active:focus,
  42. .btn.active:focus,
  43. .btn.focus,
  44. .btn.focus:active,
  45. .btn.active.focus {
  46. outline: none;
  47. }
  48. /*theme color 主题色*/
  49. .text_default,
  50. .text_default:focus {
  51. color: #fb8d5c;
  52. }
  53. a.text_default:hover {
  54. color: #fb5d0c;
  55. }
  56. .text_tips {
  57. color: #ff4646;
  58. }
  59. a.text_tips:hover {
  60. color: #ff5757;
  61. }
  62. .a_link {
  63. color: #357ebc;
  64. font-size: 12px;
  65. }
  66. .color_666 {
  67. color: #666;
  68. }
  69. .color_80 {
  70. color: #808080;
  71. }
  72. .fz_14 {
  73. font-size: 14px;
  74. }
  75. .bg_default,
  76. .btn_default {
  77. background: #5c92ef;
  78. }
  79. .bg_ccc {
  80. background: #ccc;
  81. }
  82. .btn_success {
  83. background: #78bf78;
  84. }
  85. .btn_white {
  86. background: #fff;
  87. border: 1px solid #fb8d5c;
  88. }
  89. .btn_tips {
  90. background: #f96363;
  91. }
  92. .btn_default,
  93. .btn_success,
  94. .btn_tips {
  95. color: #fff;
  96. }
  97. .btn_hot {
  98. background: #f96363;
  99. }
  100. .btn_success {
  101. background: #78bf78;
  102. }
  103. .btn_default {
  104. background: #5c92ef;
  105. }
  106. .btn_hot,
  107. .btn_success,
  108. .btn_default {
  109. vertical-align: middle;
  110. color: #fff;
  111. outline: none;
  112. }
  113. .btn_dismiss,
  114. .btn_dismiss:hover {
  115. border: 1px solid #fc8e5d;
  116. background: #fff;
  117. color: #fc8e5d;
  118. outline: none;
  119. }
  120. .btn_hot:hover,
  121. .btn_success:hover,
  122. .btn_default:hover,
  123. .btn_hot:focus,
  124. .btn_success:focus,
  125. .btn_default:focus {
  126. color: #fff;
  127. outline: none;
  128. }
  129. .fz_20 {
  130. font-size: 20px;
  131. }
  132. .m-b_40 {
  133. margin-bottom: 40px;
  134. }
  135. .m-t_60 {
  136. margin-top: 60px;
  137. }
  138. .color_4c {
  139. color: #4c4c4c;
  140. }
  141. /*导航条*/
  142. #nav-box {
  143. position: relative;
  144. min-height: 70px;
  145. margin-bottom: 0;
  146. border: none;
  147. }
  148. #nav-box .container-fluid {
  149. max-width: 1170px;
  150. }
  151. #nav-box.navbar-default {
  152. background-color: #fff;
  153. border-bottom: 2px solid #5c92ef;
  154. }
  155. #nav-box .navbar-brand {
  156. float: left;
  157. padding: 0 15px;
  158. height: 70px;
  159. }
  160. #nav-box .navbar-brand {
  161. padding: 0;
  162. }
  163. #nav-box .navbar-brand .logo {
  164. display: block;
  165. width: 158px;
  166. height: 70px;
  167. background: url(../img/logo.png) 0 center no-repeat;
  168. }
  169. #nav-box.other_nav .navbar-brand .logo {
  170. width: auto;
  171. height: 40px;
  172. background: none;
  173. margin: 15px 0;
  174. }
  175. #nav-box.other_nav .navbar-brand .logo img {
  176. height: 40px;
  177. }
  178. #nav-box .navbar-brand h1 {
  179. height: 0;
  180. font-size: 0;
  181. overflow: hidden;
  182. text-decoration: -9999px;
  183. }
  184. #nav-box .navbar-toggle {
  185. margin-left: 15px;
  186. margin-top: 18px;
  187. }
  188. .navbar-header {
  189. float: right;
  190. }
  191. /*main-nav*/
  192. #main-nav {
  193. margin-left: 45px;
  194. }
  195. #main-nav li a {
  196. padding: 0;
  197. }
  198. #main-nav li {
  199. margin-right: 60px;
  200. }
  201. #main-nav li a {
  202. padding: 0;
  203. line-height: 70px;
  204. font-size: 16px;
  205. color: #666;
  206. }
  207. #main-nav li a:hover {
  208. color: #5c92ef;
  209. }
  210. #main-nav li.active a,
  211. #main-nav li.active a:hover,
  212. .navbar-default #main-nav li.active a:focus {
  213. color: #5c92ef;
  214. background-color: #fff;
  215. outline: none;
  216. }
  217. .header-user {
  218. float: right;
  219. display: block;
  220. }
  221. .header-user li {
  222. float: right;
  223. margin-left: 15px;
  224. line-height: 70px;
  225. }
  226. .header-user .notice-tips {
  227. display: block;
  228. font-size: 0;
  229. }
  230. .notice-tips .notice-count {
  231. display: none;
  232. vertical-align: middle;
  233. padding: 2px 10px;
  234. line-height: 1;
  235. font-size: 12px;
  236. color: #fff;
  237. border-radius: 8px;
  238. background: #ff5224;
  239. }
  240. .notice-tips img {
  241. vertical-align: middle;
  242. }
  243. .main-nav .user_btn {
  244. height: 26px;
  245. line-height: 24px;
  246. padding: 0 10px;
  247. text-align: center;
  248. border-radius: 15px;
  249. font-size: 12px;
  250. }
  251. .main-nav .sign_in_btn:hover,
  252. .main-nav .sign_in_btn:active,
  253. .main-nav .sign_in_btn:focus {
  254. color: #5c92ef;
  255. border: none;
  256. background: none;
  257. }
  258. .main-nav .register_btn,
  259. .main-nav .register_btn:hover,
  260. .main-nav .register_btn:active,
  261. .main-nav .register_btn:active,
  262. .main-nav .admin_btn,
  263. .main-nav .admin_btn:hover,
  264. .main-nav .admin_btn:active,
  265. .main-nav .admin_btn:active {
  266. color: #5c92ef;
  267. background: #fff;
  268. border: 1px solid #5c92ef;
  269. }
  270. .main-nav .sign_in_btn,
  271. .main-nav .register_btn {
  272. padding: 0 10px;
  273. }
  274. .main-nav .admin_btn {
  275. padding: 0 20px;
  276. }
  277. .main-nav .sign_in_btn {
  278. color: #666;
  279. border: none;
  280. background: none;
  281. }
  282. .other_nav {
  283. position: relative;
  284. }
  285. .other_nav .page_title {
  286. line-height: 70px;
  287. font-size: 16px;
  288. width: auto;
  289. font-weight: bold;
  290. }
  291. .other_nav_right {
  292. float: right;
  293. }
  294. .other_nav_right .back_btn {
  295. padding: 0;
  296. width: 120px;
  297. height: 30px;
  298. line-height: 28px;
  299. margin: 20px 0;
  300. border-radius: 20px;
  301. text-align: center;
  302. color: #fff;
  303. background: #5c92ef;
  304. }
  305. .two .vip_hot {
  306. display: inline-block;
  307. position: absolute;
  308. width: 14px;
  309. height: 16px;
  310. margin-top: 26px;
  311. margin-left: 2px;
  312. background: url(../img/vip/VIP_Hot.png) 0 0 no-repeat;
  313. }
  314. .one .vip_hot {
  315. position: absolute;
  316. width: 14px;
  317. height: 16px;
  318. top: 26px;
  319. margin-left: 5px;
  320. background: url(../img/vip/VIP_Hot.png) 0 0 no-repeat;
  321. }
  322. @media (max-width: 768px) {
  323. .two {
  324. display: none !important;
  325. }
  326. }
  327. @media (min-width: 768px) {
  328. .one {
  329. display: none !important;
  330. }
  331. }
  332. /*子导航*/
  333. .mini-menu-box {
  334. width: 100%;
  335. background: #f2f2f2;
  336. }
  337. #mini-menu {
  338. min-height: 40px;
  339. }
  340. #mini-menu li {
  341. float: left;
  342. height: 40px;
  343. line-height: 40px;
  344. text-align: center;
  345. width: 11%;
  346. position: relative;
  347. }
  348. #mini-menu li a {
  349. display: block;
  350. color: #666;
  351. font-size: 14px;
  352. }
  353. #mini-menu li a:hover {
  354. background: #e8effc;
  355. }
  356. #mini-menu li.active a {
  357. color: #fff;
  358. background: #5c92ef;
  359. }
  360. #mini-menu li .new_ico {
  361. position: absolute;
  362. display: inline-block;
  363. width: 26px;
  364. height: 13px;
  365. top: 3px;
  366. right: 15%;
  367. background: url(../img/index/new_ico.png) 0 0 no-repeat;
  368. }
  369. #mini-menu li.active .mergeCode_tab .new_ico {
  370. display: block;
  371. background: url(../img/index/new_ico_on.png) 0 0 no-repeat;
  372. }
  373. /*#footer*/
  374. .fix_footer {
  375. position: fixed;
  376. bottom: 0;
  377. left: 0;
  378. width: 100%;
  379. }
  380. #footer {
  381. margin-top: 25px;
  382. padding: 15px 0;
  383. background: #fff;
  384. border-top: 1px solid #e6e6e6;
  385. }
  386. #footer p {
  387. margin: 5px 0;
  388. color: #808080;
  389. font-size: 14px;
  390. }
  391. #footer .site_map a {
  392. color: #808080;
  393. }
  394. #footer .site_map a:hover {
  395. color: #fb8d5c;
  396. text-decoration: underline;
  397. }
  398. /*登陆注册*/
  399. #registerModal .modal-header,
  400. #loginModal .modal-footer,
  401. #registerModal .modal-header,
  402. #registerModal .modal-footer {
  403. padding: 0;
  404. }
  405. #loginModal .modal-footer,
  406. #registerModal .modal-footer {
  407. border: 0;
  408. }
  409. #loginModal .modal-header,
  410. #registerModal .modal-header {
  411. padding-top: 20px;
  412. padding-bottom: 20px;
  413. border-bottom: none;
  414. position: relative;
  415. }
  416. #loginModal .modal-header .close,
  417. #registerModal .modal-header .close {
  418. position: fixed;
  419. top: 20px;
  420. right: 20px;
  421. width: 12px;
  422. height: 12px;
  423. background: url(../img/x.png) 0 0 no-repeat;
  424. font-size: 0;
  425. opacity: 1;
  426. }
  427. #loginModal .modal-title,
  428. #registerModal .modal-title {
  429. padding-top: 20px;
  430. text-align: center;
  431. font-size: 18px;
  432. color: #5c92ef;
  433. }
  434. #loginModal .modal-body,
  435. #registerModal .modal-body {
  436. padding: 0;
  437. }
  438. #loginModal .modal-content,
  439. #registerModal .modal-content {
  440. overflow: hidden;
  441. }
  442. #loginModal .modal-dialog,
  443. #registerModal .modal-dialog {
  444. max-width: 420px;
  445. }
  446. #loginModal .login_form_box,
  447. #registerModal .register_form_box {
  448. width: 280px;
  449. margin: 0 auto;
  450. margin-top: 50px;
  451. }
  452. #loginModal .login_form_box .form-control,
  453. #registerModal .register_form_box .form-control {
  454. height: 40px;
  455. }
  456. #loginModal .loginPhone_box,
  457. #registerModal .registerPhone_box,
  458. #registerModal .verificationCode_box {
  459. margin-bottom: 20px;
  460. }
  461. #registerModal .registerPassword_box {
  462. margin-bottom: 0;
  463. }
  464. #loginModal .loginPassword_box {
  465. margin-bottom: 10px;
  466. }
  467. #loginModal .forget_password {
  468. color: #5c93ef;
  469. font-size: 12px;
  470. }
  471. #loginModal .submit_box,
  472. #registerModal .submit_box {
  473. padding: 30px 0;
  474. }
  475. #loginModal .submit_btn,
  476. #code_login-form .submit_btn,
  477. #registerModal .submit_btn {
  478. padding: 0;
  479. width: 180px;
  480. height: 40px;
  481. line-height: 40px;
  482. background: #5c92ef;
  483. color: #fff;
  484. }
  485. #loginModal .register_link,
  486. #registerModal .login_link {
  487. margin-top: 20px;
  488. }
  489. #loginModal .register_link span,
  490. #registerModal .login_link span {
  491. color: #999;
  492. font-size: 12px;
  493. }
  494. #loginModal .register_link a,
  495. #registerModal .login_link a {
  496. color: #5c92ef;
  497. font-size: 12px;
  498. }
  499. #loginModal .footer_content,
  500. #registerModal .footer_content {
  501. font-size: 14px;
  502. text-align: center;
  503. padding: 12px 35px;
  504. background: #fff;
  505. color: #666;
  506. }
  507. #loginModal .footer_content a,
  508. #registerModal .footer_content a {
  509. color: #ff4949;
  510. text-decoration: underline;
  511. }
  512. #loginModal .footer_content a:hover,
  513. #registerModal .footer_content a:hover {
  514. color: #fa4040;
  515. }
  516. #registerModal .getVerificationCode {
  517. background: #5c92ef;
  518. color: #fff;
  519. height: 40px;
  520. }
  521. .reg_agreement_box {
  522. margin-top: 10px;
  523. font-size: 13px;
  524. }
  525. .reg_agreement_box .reg_agreement_check {
  526. vertical-align: -2px;
  527. }
  528. .reg_agreement_box .reg_agreement_tips {
  529. display: none;
  530. width: 100%;
  531. margin-top: 10px;
  532. text-align: center;
  533. padding: 5px 0;
  534. background: #f7e1df;
  535. color: #da4949;
  536. }
  537. .reg_agreement_link {
  538. color: #5c92ef;
  539. }
  540. .bind-weixin-tab {
  541. /*width: 280px;*/
  542. margin: 0 auto;
  543. margin-bottom: 20px;
  544. display: flex;
  545. }
  546. .bind-weixin-tab .tabitem {
  547. width: 50%;
  548. height: 30px;
  549. text-align: center;
  550. font-size: 18px;
  551. color: #999;
  552. cursor: pointer;
  553. }
  554. .bind-weixin-tab .tabitem.active {
  555. color: #7F8FEF;
  556. position: relative;
  557. }
  558. .bind-weixin-tab .tabitem.active span {
  559. position: absolute;
  560. height: 2px;
  561. width: 50px;
  562. left: 50%;
  563. margin-left: -25px;
  564. bottom: 0;
  565. background-color: #7F8FEF;
  566. display: block !important;
  567. }
  568. @media (max-width: 768px) {
  569. .navbar-header {
  570. float: none;
  571. width: 100%;
  572. }
  573. .navbar-toggle {
  574. float: left;
  575. margin-right: 0;
  576. margin-left: 15px;
  577. }
  578. #nav-box .navbar-brand {
  579. margin-top: 15px;
  580. float: none;
  581. height: 40px;
  582. text-align: center;
  583. }
  584. #nav-box .navbar-brand .logo {
  585. margin: 0 auto;
  586. height: 40px;
  587. }
  588. #main-nav {
  589. margin: 0;
  590. }
  591. #main-nav li {
  592. display: inline-block;
  593. margin: 0 15px 0 0;
  594. }
  595. #main-nav li a {
  596. line-height: 40px;
  597. }
  598. }
  599. /* 绑定微信 */
  600. .bind-weixin .modal {
  601. position: relative;
  602. top: auto;
  603. right: auto;
  604. bottom: auto;
  605. left: auto;
  606. z-index: 1;
  607. display: block;
  608. }
  609. .bind-weixin .modal .modal-content {
  610. background: #fff;
  611. border: none;
  612. -webkit-box-shadow: none;
  613. box-shadow: none;
  614. }
  615. .bind-weixin .modal .close {
  616. display: none;
  617. }
  618. .bind_account-modal .modal-dialog,
  619. .wx_qrcode-modal .modal-dialog {
  620. max-width: 420px;
  621. }
  622. /*.bind_account-modal .modal-content,
  623. .wx_qrcode-modal .modal-content{
  624. background: #f7f7f7;
  625. }*/
  626. .bind_account-modal .modal-body,
  627. .wx_qrcode-modal .modal-body {
  628. padding-top: 50px;
  629. padding-bottom: 50px;
  630. }
  631. .bind_account-modal .title,
  632. .wx_qrcode-modal .title {
  633. font-size: 16px;
  634. font-weight: 400;
  635. text-align: center;
  636. }
  637. .wx_qrcode-modal .title {
  638. color: #5c92ef;
  639. padding: 35px 0;
  640. }
  641. .wx_qrcode-modal .qrcode {
  642. display: block;
  643. width: 200px;
  644. height: 200px;
  645. margin: 0 auto;
  646. }
  647. .wx_qrcode-modal .open_wx_scan {
  648. padding-top: 30px;
  649. padding-bottom: 20px;
  650. font-size: 14px;
  651. color: #333;
  652. text-align: center;
  653. }
  654. .wx_qrcode-modal .phone_login {
  655. text-align: center;
  656. color: #5c92ef;
  657. font-size: 12px;
  658. }
  659. .wx_qrcode-modal .phone_login a {
  660. color: #5c92ef;
  661. }
  662. .bind_account-modal .close,
  663. .wx_qrcode-modal .close {
  664. float: none;
  665. color: #cccccc;
  666. position: absolute;
  667. top: 20px;
  668. right: 20px;
  669. font-size: 20px;
  670. opacity: 1;
  671. line-height: 1;
  672. }
  673. .bind_account-modal .title {
  674. color: #999;
  675. padding: 35px 0 50px 0;
  676. }
  677. .bind_account-modal .bind_new_account,
  678. .bind_account-modal .bind_old_account {
  679. display: block;
  680. width: 180px;
  681. height: 40px;
  682. padding: 0;
  683. margin: 0 auto;
  684. font-size: 14px;
  685. background: none;
  686. }
  687. .bind_account-modal .bind_new_account {
  688. background: #5c92ef;
  689. color: #fff;
  690. }
  691. .bind_account-modal .bind_old_account {
  692. margin-top: 30px;
  693. border: 1px solid #5c92ef;
  694. color: #5c92ef;
  695. }
  696. /* 适配 */
  697. @media (max-width: 992px) {
  698. #main-nav {
  699. margin-left: 15px;
  700. padding: 0;
  701. }
  702. }
  703. @media (min-width: 1200px) {
  704. #nav-box .navbar-brand {
  705. display: block;
  706. }
  707. }
  708. html, body {
  709. width: 100%;
  710. height: 100%;
  711. margin: 0;
  712. padding: 0;
  713. font-size: 14px;
  714. }
  715. body {
  716. font-family: 'PingFangSC-Regular', 'Avenir', Helvetica, Arial, sans-serif;
  717. -webkit-font-smoothing: antialiased;
  718. -moz-osx-font-smoothing: grayscale;
  719. color: #333;
  720. }
  721. ul {
  722. padding: 0;
  723. margin: 0;
  724. list-style: none;
  725. }
  726. p {
  727. margin: 0;
  728. padding: 0;
  729. }
  730. a {
  731. color: inherit;
  732. text-decoration: none;
  733. }
  734. button {
  735. border: none;
  736. outline: none;
  737. }