static

index.css 9.3KB

    * { 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: 838px; 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: #57B83E; width: 128px; line-height: 48px; text-align: center; margin-top: 40px; } .app-name { margin-top: 196px; font-weight: 500; font-size: 40px; line-height: 56px; color: #FFFFFF; } .page-head .app-desc { margin-top: 13px; font-size: 18px; color: #FFFFFF; line-height: 25px; width: 396px; } .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: 235px; } .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 { margin-top: 86px; height: 409px; text-align: right; position: relative; background: url("../img/page-footer-bg.svg") bottom center no-repeat; } .app-page-footer .logo { position: absolute; right: 0; top: 136px; 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 { margin-top: 173px; } .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: url("../img/spe-tygk.png") center center no-repeat; } .app-platform-dlxy .flag { background-image: url("../img/spe-dlxy.png"); } .app-platform-dzgl .flag { background-image: url("../img/spe-dzgl.png"); } .app-platform-jzdy .flag { background-image: url("../img/spe-jzdy.png"); } .app-platform-ywzj .flag { background-image: url("../img/spe-ywzj.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-tygk { height: 952px; margin-top: -60px; } .app-fun-block-item-tygk .display-content { padding-top: 248px; } .app-fun-block-item-tygk .display-img { position: absolute; top: 125px; left: 459px; width: 803px; height: 593px; background: url("../img/fun-tygk.png") center no-repeat; } .app-fun-block-item-tygk .display-content .img { background-color: #E2E6FF; background-image: url("../img/fun-tygk-flag.png"); } .app-fun-block-item-dzyy { height: 961px; } .app-fun-block-item-dzyy .display-content { padding-top: 198px; margin-left: 830px; } .app-fun-block-item-dzyy .display-img { position: absolute; top: 105px; left: 173px; width: 388px; height: 534px; background: url("../img/fun-dzyy.png") center no-repeat; } .app-fun-block-item-dzyy .display-content .img { background-color: #FFEAD4; background-image: url("../img/fun-dzyy-flag.png"); } .app-fun-block-item-jzgk { height: 858px; } .app-fun-block-item-jzgk .display-content { padding-top: 110px; } .app-fun-block-item-jzgk .display-img { position: absolute; top: 0px; left: 514px; width: 777px; height: 526px; background: url("../img/fun-jzgk.png") center no-repeat; } .app-fun-block-item-jzgk .display-content .img { background-color: rgba(157, 126, 209, 0.1); background-image: url("../img/fun-jzgk-flag.png"); } .app-fun-block-item-ksfb { height: 485px; } .app-fun-block-item-ksfb .display-content { padding-top: 100px; margin-left: 824px; } .app-fun-block-item-ksfb .display-img { position: absolute; top: 0px; left: -59px; width: 766px; height: 485px; background: url("../img/fun-ksfb.png") -28px -17px no-repeat; } .app-fun-block-item-ksfb .display-content .img { background-color: rgba(72, 187, 120, 0.1); background-image: url("../img/fun-ksfb-flag.png"); } .app-fun-block-item-gndz { height: 900px; margin-top: 370px; } .app-fun-block-item-gndz .display-content { padding-top: 554px; } .app-fun-block-item-gndz .display-img { position: absolute; top: 0px; left: 673px; width: 511px; height: 754px; background: url("../img/fun-gndz.png") -21px -30px no-repeat; } .app-fun-block-item-gndz .display-content .img { background-color: rgba(255, 255, 255, 0.25); background-image: url("../img/fun-gndz-flag.png"); } .app-fun-block-item-yddh { height: 1080px; } .app-fun-block-item-yddh .display-content { padding-top: 412px; margin-left: 821px; } .app-fun-block-item-yddh .display-img { position: absolute; top: 314px; left: 187px; width: 313px; height: 516px; background: url("../img/fun-yddh.png") 0 0 no-repeat; } .app-fun-block-item-yddh .display-content .img { background-color: rgba(253, 69, 69, 0.1); background-image: url("../img/fun-yddh-flag.png"); } .app-platform-info-content-row { overflow: auto; } .main-content-bg-tygk { position: absolute; width: 1234px; height: 953px; left: 324px; top: 1586px; background: url("../img/fun-tygk-bg.svg") left center; } .main-content-bg-dzyy { position: absolute; width: 1074px; height: 988px; left: -360px; top: 2436px; background: url("../img/fun-dzyy-bg.svg") left center no-repeat; } .main-content-bg-jzgk { position: absolute; width: 1253px; height: 2222px; left: 322px; top: 2400px; background: url("../img/fun-jzgk-bg.svg") left center no-repeat; } .main-content-bg-ksfb { position: absolute; width: 1231px; height: 1283px; left: -360px; top: 4052px; background: url("../img/fun-ksfb-bg.svg") left center no-repeat; } .main-content-bg-gndz { position: absolute; width: 1920px; height: 2122px; left: -360px; top: 4745px; background: url("../img/fun-gndz-bg.svg") left center no-repeat; } .main-content-bg-yddh { position: absolute; width: 1247px; height: 987px; left: -360px; top: 6202px; background: url("../img/fun-yddh-bg.svg") left center no-repeat; } .main-content-bg-gndz2 { position: absolute; width: 1338px; height: 2857px; left: 218px; top: 4320px; background: url("../img/fun-gndz-bg2.svg") left center no-repeat; } .main-content-bg-yddh2 { position: absolute; width: 784px; height: 1670px; left: -360px; top: 5916px; background: url("../img/fun-yddh-bg2.svg") left center no-repeat; } .main-content-bg-spe { position: absolute; width: 1920px; height: 1438px; left: -360px; top: 0px; background: url("../img/spe-bg.svg") left center no-repeat; } .main-content-bg-head1 { position: absolute; width: 1237px; height: 838px; left: 300px; top: 0; background: url("../img/page-head-bg1.svg") left center no-repeat; } .main-content-bg-head0 { position: absolute; width: 1375px; height: 1163px; left: 200px; top: 0; background: url("../img/page-head-bg0.svg") left center no-repeat; } .main-content-bg-head2 { position: absolute; width: 1092px; height: 537px; left: -360px; top: -50px; background: url("../img/page-head-bg2.svg") left center no-repeat; } .app-fun-block-item .main-content { padding: 0 0 0 7px; } .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; }