static

index.css 7.9KB

    * { box-sizing: border-box; } html, body { position: relative; } html { height: 100%; overflow: hidden; } body { background-color: #fff; height: 100%; min-width: 1200px; margin: 0 auto; overflow: auto; overflow-x: hidden; font-family: PingFangSC, Arial, Helvetica, sans-serif; position: relative; } /* 1200下,两边文字太靠近边框了 */ @media all and (max-width: 1240px) { html { overflow: auto; } body { width: 1240px; overflow-x: hidden; } } .page-head { height: 917px; background: url("../img/page-head-bg.svg") top center no-repeat; overflow: hidden; } .app-logo { height: 62px; display: flex; justify-content: flex-start; padding-top: 22px; } .app-logo-left, .app-head-right { background-position: center; background-size: auto 100%; background-repeat: no-repeat; } .app-logo-left { width: 144.56px; background: url("../img/head-logo-left.svg") center no-repeat; } .app-logo-right { width: 101.45px; background: url("../img/head-logo-right.svg") center no-repeat; margin-left: 20.05px; } .app-down-link a { display: block; background: #fff; border-radius: 2px; font-size: 16px; color: #3684D6; width: 128px; line-height: 48px; text-align: center; margin-top: 40px; } .app-name { margin-top: 260px; font-weight: bold; font-size: 60px; line-height: 84px; color: #FFFFFF; } .page-head .app-desc { margin-top: 18px; font-size: 36px; font-weight: 500; color: #FFFFFF; line-height: 50px; width: 597px; } .app-page-footer .copyright, .app-page-footer .webnote { font-size: 12px; line-height: 17px; color: #fff; margin-top: 16px; } .app-page-footer .copyright { padding-top: 436px; } .body-content { position: relative; z-index: 11; } .body-content-bg { position: relative; width: 1200px; left: auto; right: auto; margin: 0 auto; overflow: visible; z-index: 1; } .main-content { min-height: 100%; width: 1200px; margin: 0 auto; position: relative; } .app-page-footer { height: 650px; text-align: right; position: relative; background: url("../img/page-footer-bg.svg") bottom right no-repeat; } .app-page-footer .logo { position: absolute; right: 0; top: 296px; width: 49px; height: 35px; background: url("../img/app-logo.svg") center center no-repeat; } .app-demo { position: absolute; top: 84px; left: 716px; width: 557px; height: 781px; background: url("../img/demo.png") center center no-repeat; } .app-platform-info-title { font-weight: 500; font-size: 40px; line-height: 56px; color: #1A202C; } .app-platform-info-content { margin-top: 90px; } .app-platform-info-content-row + .app-platform-info-content-row { margin-top: 100px; } .app-platform-item { width: 300px; float: left; } .app-platform-item + .app-platform-item { margin-left: 140px; } .app-platform-item .flag { width: 37px; height: 37px; background-position: center center; background-repeat: no-repeat; } .app-platform-kpty .flag { background-image: url("../img/spe-kpty.png"); } .app-platform-ffdz .flag { background-image: url("../img/spe-ffdz.png"); } .app-platform-gzld .flag { background-image: url("../img/spe-gzld.png"); } .app-platform-info .main-content { padding: 0 6px; } .app-platform-item .title { margin-top: 20px; font-weight: 500; font-size: 24px; line-height: 34px; color: #1A202C; } .app-platform-item .desc { margin-top: 10px; font-size: 16px; line-height: 24px; color: #5A6578; } .app-fun-block-item .img { width: 70px; height: 70px; border-radius: 50%; background-position: center center; background-repeat: no-repeat; } .app-fun-block-item-sbxt .display-img { background-position: center center; background-repeat: no-repeat; } .app-fun-block-item .title { margin-top: 32px; font-weight: 500; font-size: 40px; line-height: 56px; color: #1A202C; } .app-fun-block-item .desc { margin-top: 24px; font-size: 18px; line-height: 26px; color: #5A6578; width: 370px; } .app-fun-block-item .desc-p + .desc-p { margin-top: 8px; } .app-fun-block-item-jcgn { height: 980px; margin-top: 0; } .app-fun-block-item-jcgn .display-content { padding-top: 200px; margin-left: 753px; } .app-fun-block-item-jcgn .display-img { position: absolute; top: 150px; left: 68px; width: 374px; height: 663px; background: url("../img/fun-jcgn.png") center no-repeat; } .app-fun-block-item-jcgn .display-content .img { background-color: #E2E6FF; background-image: url("../img/fun-jcgn-flag.png"); } .app-fun-block-item-yscj { height: 595px; } .app-fun-block-item-yscj .display-content { padding-top: 160px; margin-left: 86px; } .app-fun-block-item-yscj .display-img { position: absolute; top: 0px; left: 855px; width: 274px; height: 594px; background: url("../img/fun-yscj.png") center no-repeat; } .app-fun-block-item-yscj .display-content .img { background-color: #FFEAD4; background-image: url("../img/fun-yscj-flag.png"); } .app-fun-block-item-zjjh { height: 858px; } .app-fun-block-item-zjjh .display-content { padding-top: 269px; margin-left: 753px; } .app-fun-block-item-zjjh .display-img { position: absolute; top: 101px; left: 118px; width: 275px; height: 594px; background: url("../img/fun-zjjh.png") center no-repeat; } .app-fun-block-item-zjjh .display-content .img { background-color: rgba(157, 126, 209, 0.1); background-image: url("../img/fun-zjjh-flag.png"); } .app-fun-block-item-gdgn { height: 923px; } .app-fun-block-item-gdgn .display-content { padding-top: 448px; margin-left: 86px; } .app-fun-block-item-gdgn .display-img { position: absolute; top: 230px; left: 672px; width: 502px; height: 762px; background: url("../img/fun-gdgn.png") center center no-repeat; } .app-fun-block-item-gdgn .display-content .img { background-color: rgba(72, 187, 120, 0.1); background-image: url("../img/fun-gdgn-flag.png"); } .app-platform-info-content-row { overflow: auto; } .main-content-bg-jcgn { position: absolute; width: 1025px; height: 833px; left: -360px; top: 1371px; background: url("../img/fun-jcgn-bg.svg") left center; } .main-content-bg-yscj { position: absolute; width: 766px; height: 681px; right: -360px; top: 2243px; background: url("../img/fun-yscj-bg.svg") left center no-repeat; } .main-content-bg-zjjh { position: absolute; width: 819px; height: 631px; left: -160px; top: 3075px; background: url("../img/fun-zjjh-bg.svg") left center no-repeat; } .main-content-bg-gdgn { position: absolute; width: 347px; height: 828px; left: -360px; top: 3775px; background: url("../img/fun-gdgn-bg.svg") left center no-repeat; } .main-content-bg-footer { position: absolute; width: 1920px; height: 690px; left: -360px; top: 4545px; background: url("../img/footer-bg.svg") left center no-repeat; } .main-content-bg-zjjh1 { position: absolute; width: 622px; height: 1292px; left: 935px; top: 2507px; background: url("../img/fun-zjjh-bg1.svg") left center no-repeat; } .main-content-bg-jcgn1 { position: absolute; width: 741px; height: 1518px; left: -360px; top: 1428px; background: url("../img/fun-jcgn-bg1.svg") left center no-repeat; } .main-content-bg-head1 { position: absolute; width: 1064px; height: 539px; left: -360px; top: 0; background: url("../img/page-head-bg1.svg") left center no-repeat; } .main-content-bg-head2 { position: absolute; width: 1920px; height: 990px; left: -360px; top: 0; background: url("../img/page-head-bg2.svg") left center no-repeat; } .main-content-bg-head3 { position: absolute; width: 1190px; height: 1280px; right: -360px; top: 0; background: url("../img/page-head-bg3.svg") left center no-repeat; } .app-fun-block-item-white .display-content .title, .app-fun-block-item-white .display-content .desc { color: #fff; } .page-head-content { position: relative; z-index: 11; }