index.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745
  1. /* 修改fullpage的css */
  2. .fp-controlArrow{
  3. display: none;
  4. }
  5. body{
  6. margin: 0;
  7. padding: 0;
  8. }
  9. .container{
  10. width: 100%;
  11. }
  12. .wrap{
  13. width:1200px;
  14. height: 100%;
  15. margin: 0 auto;
  16. display: flex;
  17. align-items: center;
  18. }
  19. .wrap1{
  20. width:1200px;
  21. height: 100%;
  22. margin: 0 auto;
  23. }
  24. .clearFixed::before{
  25. content: '';
  26. display: block;
  27. clear: both;
  28. }
  29. .header{
  30. width: 100%;
  31. height: 80px;
  32. box-sizing: border-box;
  33. padding: 21px 0 22px 0;
  34. position: fixed;
  35. top: 0;
  36. left: 0;
  37. z-index: 10;
  38. }
  39. .headerColor{
  40. background-color: #1E2A71;
  41. }
  42. .fullpage-wrapper{
  43. transform: translate3d(0px, -147px, 0px);
  44. }
  45. .iconImg{
  46. width: 140px;
  47. }
  48. .navBody{
  49. height: 37px;
  50. line-height: 37px;
  51. }
  52. .navBody ul{
  53. height: 100%;
  54. /* overflow: hidden; */
  55. }
  56. .navBody li{
  57. height: 100%;
  58. margin-right: 32px;
  59. float: left;
  60. }
  61. .navBody ul li:last-child{
  62. margin-right: 0;
  63. }
  64. .navBody ul li:first-child{
  65. float: left;
  66. }
  67. .navBody a{
  68. width:68px;
  69. font-size:16px;
  70. font-family:PingFangSC-Semibold,PingFang SC;
  71. font-weight:400;
  72. color:rgba(235,235,235,1);
  73. line-height:22px;
  74. }
  75. .navBody .activeBorde{
  76. width:30px;
  77. height:2px;
  78. background:rgba(82,196,26,1);
  79. border-radius:1px;
  80. display: none;
  81. }
  82. #menu{
  83. height: 100%;
  84. width: 100%;
  85. }
  86. #menu .nav{
  87. float:right;
  88. }
  89. .active a{
  90. color:rgba(255,255,255,1);
  91. }
  92. .active .activeBorde{
  93. display: block;
  94. }
  95. .swiper-container{
  96. width: 100%;
  97. min-width: 1200px;
  98. height: 100%;
  99. }
  100. .swiper-pagination-bullet-active{
  101. background-color: #fff;
  102. }
  103. .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  104. bottom: 50px;
  105. left: 0;
  106. width: 100%;
  107. }
  108. .bannerImg{
  109. width: 100%;
  110. height: 100%;
  111. cursor: pointer;
  112. }
  113. .intelligentDelivery{
  114. width: 100%;
  115. height: 100%;
  116. background-color: #fff;
  117. }
  118. .intelligentDeliveryBody{
  119. width: 100%;
  120. display: flex;
  121. /* box-sizing: border-box; */
  122. align-items: center;
  123. }
  124. .flexBox{
  125. width: 100%;
  126. /* margin-top: 10%; */
  127. }
  128. .intelligentDelivery-top{
  129. width: 100%;
  130. text-align: center;
  131. }
  132. .intelligentDelivery-title{
  133. font-size:34px;
  134. font-family:PingFangSC-Medium,PingFang SC;
  135. font-weight:500;
  136. color:rgba(51,51,51,1);
  137. line-height:48px;
  138. letter-spacing:1px;
  139. }
  140. .greenBar{
  141. width:40px;
  142. height:6px;
  143. display: block;
  144. margin: 28px auto 50px;
  145. background:rgba(82,196,26,1);
  146. border-radius:5px;
  147. }
  148. .intelligentDelivery-bottom{
  149. width: 100%;
  150. overflow: hidden;
  151. position: relative;
  152. bottom: -600px;
  153. }
  154. .intelligentDelivery-item{
  155. width: 30%;
  156. text-align: center;
  157. float: left;
  158. }
  159. .intelligentDelivery-item-img{
  160. width: 200px;
  161. height: 200px;
  162. margin: 0 auto;
  163. }
  164. .intelligentDelivery-item-img .itemImg{
  165. width: 200px;
  166. height: 200px;
  167. }
  168. .intelligentDelivery-item:nth-child(2){
  169. margin: 0 5%;
  170. }
  171. .intelligentDelivery-item-title{
  172. margin: 20px 0;
  173. font-size:26px;
  174. font-family:PingFangSC-Semibold,PingFang SC;
  175. font-weight:600;
  176. color:rgba(51,51,51,1);
  177. line-height:45px;
  178. letter-spacing:1px;
  179. }
  180. .intelligentDelivery-item-text{
  181. width: 100%;
  182. font-size:16px;
  183. font-family:PingFangSC-Regular,PingFang SC;
  184. font-weight:400;
  185. color:rgba(91,108,148,1);
  186. line-height:28px;
  187. word-wrap: wrap;
  188. }
  189. .efficiencyTools,.advertisingInformation{
  190. width: 100%;
  191. height: 100%;
  192. background:rgba(244,250,255,1);
  193. }
  194. .efficiencyToolsBody{
  195. box-sizing: border-box;
  196. display: flex;
  197. align-items: center;
  198. }
  199. .efficiencyToolsLeft{
  200. width: 50%;
  201. position: relative;
  202. left: -1000px;
  203. }
  204. .efficiencyToolsRight{
  205. width: 50%;
  206. height: 53.6%;
  207. box-sizing: border-box;
  208. position: relative;
  209. right: -1000px;
  210. }
  211. .imgBox {
  212. width: 100%;
  213. height: 100%;
  214. }
  215. .imgBox img{
  216. width: 100%;
  217. height: 100%;
  218. }
  219. .efficiencyToolsLeft-title{
  220. text-align:left;
  221. }
  222. .efficiencyToolsLeft-title p{
  223. font-size:34px;
  224. font-family:PingFangSC-Medium,PingFang SC;
  225. font-weight:500;
  226. color:rgba(51,51,51,1);
  227. line-height:48px;
  228. letter-spacing:1px;
  229. }
  230. .orangeBar{
  231. width:40px;
  232. height:6px;
  233. background:rgba(82,196,26,1);
  234. border-radius:4px;
  235. margin: 25px 0;
  236. }
  237. .efficiencyToolsLeft-text{
  238. margin-top: 34px;
  239. padding-right: 100px;
  240. }
  241. .efficiencyToolsLeft-text .text{
  242. text-align: left;
  243. font-size:16px;
  244. font-family:PingFangSC-Regular,PingFang SC;
  245. font-weight:400;
  246. color:rgba(91,108,148,1);
  247. line-height:28px;
  248. word-wrap: wrap;
  249. }
  250. .btn{
  251. margin-top: 50px;
  252. width:160px;
  253. height:50px;
  254. background:rgba(24,144,255,1);
  255. box-shadow:0px 2px 4px 0px rgba(193,213,253,1);
  256. border-radius:33px;
  257. text-align: center;
  258. padding: 8px 20px;
  259. box-sizing: border-box;
  260. cursor: pointer;
  261. }
  262. .btn span{
  263. display: block;
  264. width:120px;
  265. height:30px;
  266. line-height: 30px;
  267. font-size:16px;
  268. font-family:PingFangSC-Regular,PingFang SC;
  269. font-weight:500;
  270. color:rgba(255,255,255,1);
  271. cursor: pointer;
  272. }
  273. .materialManagement,.playMaterial{
  274. width: 100%;
  275. height: 100%;
  276. background:rgba(255,255,255,1);
  277. }
  278. .materialManagementBody{
  279. box-sizing: border-box;
  280. display: flex;
  281. }
  282. .materialManagementLeft{
  283. width: 50%;
  284. height: 408px;
  285. position: relative;
  286. left: -1000px;
  287. }
  288. .materialManagementRight{
  289. width: 50%;
  290. height: 408px;
  291. box-sizing: border-box;
  292. padding-left: 90px;
  293. position: relative;
  294. right: -1000px;
  295. }
  296. .materialManagementRight-text{
  297. margin-top: 34px;
  298. }
  299. .materialManagementRight-text .text{
  300. text-align: left;
  301. font-size:16px;
  302. font-family:PingFangSC-Regular,PingFang SC;
  303. font-weight:400;
  304. color:rgba(91,108,148,1);
  305. line-height:28px;
  306. word-wrap: wrap;
  307. }
  308. /* tiyandemo */
  309. .experienceDemo{
  310. width: 100%;
  311. height: 100%;
  312. background:rgba(40,106,239,1);
  313. position: relative;
  314. }
  315. .experienceDemoBody{
  316. width: 100%;
  317. display: flex;
  318. align-content: center;
  319. }
  320. .experienceDemoLeft{
  321. width: 50%;
  322. }
  323. .experienceDemoRight{
  324. width: 40%;
  325. padding-left: 10%;
  326. }
  327. .experienceDemoRight-title{
  328. width: 100%;
  329. text-align: center;
  330. }
  331. .experienceDemoRight-title .top{
  332. height:48px;
  333. font-size:34px;
  334. font-family:PingFangSC-Semibold,PingFang SC;
  335. font-weight:500;
  336. color:rgba(255,255,255,1);
  337. line-height:48px;
  338. letter-spacing:1px;
  339. }
  340. .experienceDemoRight-title .bottom{
  341. height:22px;
  342. font-size:16px;
  343. font-family:PingFangSC-Regular,PingFang SC;
  344. font-weight:400;
  345. color:rgba(255,255,255,0.8);
  346. line-height:22px;
  347. letter-spacing:1px;
  348. margin-top: 10px;
  349. }
  350. .experienceDemoRight-imgBOX{
  351. width: 80%;
  352. margin: 0 auto;
  353. }
  354. .experienceDemoRight-imgBOX .people{
  355. width: 100%;
  356. height: 100%;
  357. }
  358. .experienceDemoRight-tip .email{
  359. height:28px;
  360. font-size:20px;
  361. font-family:PingFangSC-Regular,PingFang SC;
  362. font-weight:400;
  363. color:rgba(255,255,255,0.8);
  364. line-height:28px;
  365. letter-spacing:1px;
  366. }
  367. .experienceDemoLeft-form{
  368. margin-top: 70px;
  369. width: 100%;
  370. }
  371. .experienceDemoLeft-form .item{
  372. display: flex;
  373. margin-bottom: 25px;
  374. }
  375. .experienceDemoLeft-form .item-left{
  376. width:280px;
  377. height:64px;
  378. border-radius:32px;
  379. border:2px solid rgba(107,155,255,1);
  380. padding-left: 20px;
  381. box-sizing: border-box;
  382. margin-right: 50px;
  383. position: relative;
  384. }
  385. .experienceDemoLeft-form .item-left.error{
  386. border:2px solid #FF887F;
  387. }
  388. .experienceDemoLeft-form .item-right.error{
  389. border:2px solid #FF887F;
  390. }
  391. .experienceDemoLeft-form .item-right{
  392. width:280px;
  393. height:64px;
  394. border-radius:32px;
  395. border:2px solid rgba(107,155,255,1);
  396. padding-left: 20px;
  397. box-sizing: border-box;
  398. position: relative;
  399. }
  400. input{
  401. background-color: transparent;
  402. width: 100%;
  403. height: 100%;
  404. font-size: 16px;
  405. outline: none;
  406. color: #fff;
  407. /* color: -internal-light-dark-color( white,black); */
  408. }
  409. input:focus{
  410. outline: none;
  411. }
  412. input::-webkit-input-placeholder {
  413. /* WebKit browsers */
  414. color: #B5CCFB;
  415. }
  416. input:-moz-placeholder {
  417. /* Mozilla Firefox 4 to 18 */
  418. color: #B5CCFB;
  419. }
  420. input::-moz-placeholder {
  421. /* Mozilla Firefox 19+ */
  422. color: #B5CCFB;
  423. }
  424. input:-ms-input-placeholder {
  425. /* Internet Explorer 10+ */
  426. color: #B5CCFB;
  427. }
  428. .item .yuyue{
  429. width:100%;
  430. height:64px;
  431. line-height: 64px;
  432. background:rgba(214,226,252,1);
  433. border-radius:32px;
  434. text-align: center;
  435. cursor: pointer;
  436. }
  437. .item .yuyue:hover{
  438. background:#fff;
  439. }
  440. .item .yuyue span{
  441. height:28px;
  442. font-size:18px;
  443. font-family:PingFangSC-Regular,PingFang SC;
  444. font-weight:400;
  445. color:rgba(39,107,239,1);
  446. line-height:28px;
  447. letter-spacing:1px;
  448. cursor: pointer;
  449. }
  450. .verificationCode,.showNum{
  451. height:22px;
  452. font-size:14px;
  453. font-family:PingFangSC-Regular,PingFang SC;
  454. font-weight:400;
  455. color: #B5CCFB;
  456. line-height:22px;
  457. letter-spacing:1px;
  458. cursor: pointer;
  459. }
  460. .verificationCodeArea{
  461. position: relative;
  462. height: 22px;
  463. }
  464. .clickArea{
  465. position: absolute;
  466. right: 20px;
  467. top: 19px;
  468. padding-left: 10px;
  469. }
  470. .verificationCode::before,.showNum::before{
  471. content: '';
  472. display: block;
  473. width:2px;
  474. height:14px;
  475. background:#6B9BFF;
  476. position: absolute;
  477. left: 0;
  478. top: 5px;
  479. }
  480. .showNum{
  481. color: #B5CCFB;
  482. cursor: default;
  483. }
  484. .experienceDemoBottom{
  485. width: 100%;
  486. position: absolute;
  487. height: 95px;
  488. background:rgba(44,50,54,1);
  489. text-align: center;
  490. bottom: 0;
  491. left: 0;
  492. }
  493. .topInfo{
  494. font-size:14px;
  495. font-family:PingFangSC-Regular,PingFang SC;
  496. font-weight:400;
  497. color:rgba(255,255,255,1);
  498. letter-spacing:1px;
  499. margin: 23px 0 11px;
  500. }
  501. .bottomInfo{
  502. font-size:14px;
  503. font-family:PingFangSC-Regular,PingFang SC;
  504. font-weight:400;
  505. color:rgba(255,255,255,1);
  506. letter-spacing:1px;
  507. }
  508. .item-left1,.item-left2{
  509. width: 122px;
  510. height: 64px;
  511. border-radius: 32px;
  512. border: 2px solid #6B9BFF;
  513. padding:0 20px;
  514. box-sizing: border-box;
  515. }
  516. .item-left2{
  517. margin-right: 50px;
  518. }
  519. .hengxian{
  520. width: 16px;
  521. height: 3px;
  522. background: #6B9BFF;
  523. margin: auto 10px;
  524. }
  525. select{
  526. background-color: transparent;
  527. width: 100%;
  528. height: 100%;
  529. font-size: 16px;
  530. outline: none;
  531. color: #B5CCFB;
  532. border: none;
  533. max-height: 300px;
  534. appearance:none;
  535. -moz-appearance:none;
  536. -webkit-appearance:none;
  537. }
  538. option {
  539. font-weight: normal;
  540. display: block;
  541. white-space: pre;
  542. min-height: 1.2em;
  543. padding: 0px 2px 1px;
  544. background-color: transparent;
  545. color: #333;
  546. outline: none;
  547. }
  548. option:focus{
  549. outline: none;
  550. border: none;
  551. }
  552. .arrow{
  553. width: 12px;
  554. height: 8px;
  555. display: inline-block;
  556. position: absolute;
  557. right: 20px;
  558. top: 16px;
  559. z-index: 2;
  560. }
  561. .arrow img{
  562. width: 100%;
  563. height: 100%;
  564. }
  565. .item-left1,.item-left2{
  566. position: relative;
  567. }
  568. .companyTip,.nameTip,.phoneNumtip,.verificationCodetip{
  569. position: absolute;
  570. top: 64px;
  571. left: 20px;
  572. }
  573. .item .successOK{
  574. background: #5689F1;
  575. color: #8DB4FF;
  576. }
  577. .item .successOK:hover{
  578. background:#5689F1;
  579. }
  580. .materialManagementRight-title{
  581. text-align:left;
  582. }
  583. .materialManagementRight-title p{
  584. font-size:34px;
  585. font-family:PingFangSC-Medium,PingFang SC;
  586. font-weight:500;
  587. color:rgba(51,51,51,1);
  588. line-height:48px;
  589. letter-spacing:1px;
  590. }
  591. .materialManagementRight .orangeBar{
  592. width:40px;
  593. height:6px;
  594. background:rgba(82,196,26,1);
  595. border-radius:4px;
  596. margin: 25px 0;
  597. }
  598. .materialManagementRight-text{
  599. margin-top: 34px;
  600. /* padding-right: 100px; */
  601. }
  602. .materialManagementRight-text .text{
  603. text-align: left;
  604. font-size:16px;
  605. font-family:PingFangSC-Regular,PingFang SC;
  606. font-weight:400;
  607. color:rgba(91,108,148,1);
  608. line-height:28px;
  609. word-wrap: wrap;
  610. }
  611. .onSubmitPage{
  612. width: 100%;
  613. height: 100%;
  614. background: rgba(0,0,0,.54);
  615. position: absolute;
  616. top: 0;
  617. left: 0;
  618. z-index: 50;
  619. display: none;
  620. }
  621. .onSubmitPage .infoBox{
  622. width: 618px;
  623. height: 376px;
  624. background: #FFFFFF;
  625. box-shadow: 0px 2px 4px 0px rgba(228, 228, 228, 0.5);
  626. border-radius: 6px;
  627. position: absolute;
  628. top: 50%;
  629. margin-top: -188px;
  630. left: 50%;
  631. margin-left: -309px;
  632. z-index: 60;
  633. }
  634. .closeIcon{
  635. position: absolute;
  636. top: 15px;
  637. right: 15px;
  638. width: 18px;
  639. height: 18px;
  640. cursor: pointer;
  641. z-index: 60;
  642. }
  643. .infoBodyTop{
  644. padding-top: 74px;
  645. text-align: center;
  646. }
  647. .infoBodyTop img{
  648. width: 110px;
  649. height: 110px;
  650. margin: 0 auto;
  651. }
  652. .infoBodyBottom{
  653. margin-top: 42px;
  654. text-align: center;
  655. width: 100%;
  656. }
  657. .infoBodyBottom .tipBig{
  658. height: 33px;
  659. font-size: 24px;
  660. font-family: PingFangSC-Medium, PingFang SC;
  661. font-weight: 500;
  662. color: #333333;
  663. line-height: 33px;
  664. letter-spacing: 1px;
  665. margin-bottom: 14px;
  666. }
  667. .infoBodyBottom .tipSmall{
  668. width: 342px;
  669. height: 40px;
  670. font-size: 14px;
  671. font-family: PingFangSC-Medium, PingFang SC;
  672. font-weight: 500;
  673. color: #999999;
  674. line-height: 20px;
  675. margin: 0 auto;
  676. }