static

index-mobile.css 6.3KB

    body { width: auto; min-width: 320px; font-family: PingFangSC, "微软雅黑", Arial, Helvetica, sans-serif; background-color: #fff; } /* 通用 */ .main-content { max-width: 4.8rem; margin: 0 auto; } .display-content { margin: 0 .24rem; } /* 页面头部 */ .app-head { height: 2.8866rem; background: url(../img-mobile/head-bg.png) center -.48rem no-repeat; background-size: 100% 3.3666rem; overflow: auto; } .app-logo { display: flex; justify-content: space-between; margin: .12rem .2rem 0; height: .17rem; } .app-logo-left { width: 1.0511rem; background: url(../img-mobile/head-logo.svg) center no-repeat; background-size: 100%; } .app-nav { display: none; width: .18rem; background: url(../img-mobile/head-nav.png) center no-repeat; background-size: 100%; } .app-logo-center { width: .4rem; height: .4rem; margin: .17rem auto 0; background: url(../img-mobile/head-logo-center.png) center no-repeat; background-size: 100% auto; } .app-head .app-name, .app-head .app-desc { text-align: center; color: #FFFFFF; } .app-head .app-name { margin: .1rem 0 .08rem; font-size: .18rem; font-weight: 600; line-height: .25rem; } .app-head .app-desc { font-size: .14rem; line-height: .2rem; } .app-down-link a { display: block; margin: .15rem auto 0; font-size: .16rem; font-weight: 400; line-height: .22rem; text-align: center; color: #FFFFFF; background: #FF9243; border-radius: .08rem; padding: .09rem; width: 1.2rem; box-shadow: 0 1px 15px 1px rgba(39,39,39,.1); } /* 应用特点 */ .app-feature-info-bg { background: url(../img-mobile/feature-bg.svg) left .66rem no-repeat; background-size: auto 1.728rem; height: 5rem; } .app-feature-info-title { font-size: .18rem; font-weight: 600; line-height: .25rem; color: #1A202C; } .app-feature-item-head { margin-top: .2rem; } .app-feature-item .flag { width: .22rem; height: .22rem; background-size: auto .16rem; background-position: center; background-repeat: no-repeat; } .app-feature-item .title { margin-left: .1rem; font-size: .14rem; line-height: .2rem; color: #000000; } .app-feature-item .desc { margin-top: .05rem; font-size: .14rem; line-height: .24rem; color: #5A6578; } /* 特点 :图标 */ .app-feature-item-kpt .flag { background-image: url(../img-mobile/f-flag-kpt.png); } .app-feature-item-ffzj .flag { background-image: url(../img-mobile/f-flag-ffzj.png); } .app-feature-item-gzldm .flag { background-image: url(../img-mobile/f-flag-gzldm.png); } /* 特点:自定义 */ .app-feature-item-kpt .desc { width: 1.4rem; margin: .25rem auto .6rem .06rem; color: #FFFFFF; } .app-feature-item-kpt { height: 2.4rem; background: url(../img-mobile/feature.png) right -.12rem top no-repeat; background-size: auto 100%; } .app-feature-item-kpt .app-feature-item-head { padding-top: .18rem; margin-top: 0; } .app-feature-item-ffzj .app-feature-item-head { margin-top: -.1rem; } /* 应用功能 */ .app-function-item-head { margin-top: .25rem; } .app-function-item .flag { width: .3rem; height: .3rem; background-size: auto .28rem; background-position: center center; background-repeat: no-repeat; } .app-function-item .title { margin-left: .1rem; font-weight: 500; font-size: .16rem; line-height: .25rem; color: #1A202C; } .app-function-item .desc { display: block; font-size: .14rem; line-height: .28rem; color: #5A6578; padding-top: .09rem; } /* 功能:背景图 */ .app-function-item-jcgn { height: 2.5217rem; background: url(../img-mobile/function-bg-jcgn.svg) right top .2022rem no-repeat; background-size: auto 1.83rem; margin: -.3rem 0 0; } .app-function-item-yscj { height: 5.2222rem; background: url(../img-mobile/function-bg-yscj.svg) right no-repeat; background-size: 100% 100%; /* margin: -3.1rem 0 -2.1474rem; */ } .app-function-item-zjjh { height: 5.9089rem; background: url(../img-mobile/function-bg-zjjh.svg) right top 1.0917rem no-repeat; background-size: auto 2.73rem; } .app-function-item-zjjh .front-bg { height: 100%; background: url(../img-mobile/function-bg-zjjh-f.svg) right -.2rem top 1rem no-repeat; background-size: auto 100%; } .app-function-item-gdgn { margin-top: -.5rem; height: 4.6323rem; background: url(../img-mobile/function-bg-gdgn.svg) right top .85rem no-repeat; background-size: auto 3.6245rem; } /* 功能:图片 */ .app-function-item-jcgn .display-img { width: 100%; height: 100%; background: url(../img-mobile/function-jcgn.png) right .25rem center no-repeat; background-size: auto 100%; } .app-function-item-yscj .display-img { width: 100%; height: 100%; background: url(../img-mobile/function-yscj.png) center top .2627rem no-repeat; background-size: auto 3.45rem; } .app-function-item-zjjh .display-img { width: 1.12rem; height: 2.44rem; background: url(../img-mobile/function-zjjh.png) center no-repeat; background-size: auto 100%; margin: -5.3rem auto 0; box-shadow: 0 1px 15px 1px rgba(39,39,39,.1); } .app-function-item-gdgn .display-img { width: 100%; height: 3.8373rem; background: url(../img-mobile/function-gdgn.png) top .56rem right .24rem no-repeat; background-size: auto 100%; } /* 功能:图标 */ .app-function-item-jcgn .flag { background-image: url(../img-mobile/func-flag-jcgn.png); } .app-function-item-yscj .flag { background-image: url(../img-mobile/func-flag-yscj.png); } .app-function-item-zjjh .flag { background-image: url(../img-mobile/func-flag-zjjh.png); } .app-function-item-gdgn .flag { background-image: url(../img-mobile/func-flag-gdgn.png); } /* 特点:自定义 */ .app-function-item-jcgn .app-function-item-head { margin-top: -2rem; } .app-function-item-jcgn .desc { width: 1.6rem; } .app-function-item-yscj .app-function-item-head { margin-top: -1rem; } .app-function-item-zjjh .app-function-item-head { margin-top: 1rem; } .app-function-item-gdgn .app-function-item-head { margin-top: .2rem; } /* 页面底部 */ .app-down .title { font-weight: 600; font-size: .18rem; line-height: .25rem; color: #1A202C; text-align: center; margin-top: 1.35rem; } .app-footer { padding: .64rem 0 .33rem; } .app-footer .copyright, .app-footer .webnote { font-size: .1rem; line-height: .14rem; text-align: center; color: #B9BFC6; margin-top: .06rem; }