|
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 {
background: url(../img-mobile/head-bg.png) center top no-repeat;
background-size: 100% 4.11rem;
overflow: auto;
}
.app-logo {
display: flex;
justify-content: space-between;
margin-top: .05rem;
}
.app-logo-left {
width: 1.12132rem;
height: .17rem;
background: url(../img-mobile/head-logo.svg) center center no-repeat;
background-size: 100% auto;
margin-left: .21rem;
}
.app-nav {
display: none;
width: .18rem;
height: .18rem;
background: url(../img-mobile/head-nav.png) center no-repeat;
background-size: 100% auto;
margin-right: .21rem;
}
.app-logo-center {
width: .4rem;
height: .4rem;
margin: .17rem auto;
background: url(../img-mobile/head-logo-center.png) center no-repeat;
background-size: 100% auto;
}
.app-head .app-desc,
.app-head .app-name {
font-weight: 600;
font-size: .18rem;
line-height: .25rem;
text-align: center;
color: #FFFFFF;
}
.app-head .app-name {
margin-top: .24rem;
}
.app-down-link a {
display: block;
margin: .16rem auto 0;
font-size: .16rem;
line-height: .22rem;
text-align: center;
color: #FFFFFF;
background: #0B69FF;
border-radius: .02rem;
padding: .09rem;
width: 1.2rem;
box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
}
.demo-img {
height: 2.1rem;
margin: .43rem auto 0;
background: url(../img-mobile/head-demo.png) center no-repeat;
background-size: auto 100%;
}
/* 平台特点 */
.app-feature-info-bg {
background: url(../img-mobile/feature-bg.svg) right top .2rem no-repeat;
background-size: auto 100%;
height: 9.3rem;
margin-bottom: -1.45rem;
}
.app-feature-info-title {
font-size: .18rem;
font-weight: 600;
line-height: .25rem;
color: #1A202C;
margin-top: .3rem;
padding-bottom: .04rem;
}
.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: .16rem;
font-weight: 500;
line-height: .22rem;
color: #000000;
}
.app-feature-item .desc {
margin-top: .15rem;
font-size: .14rem;
line-height: .24rem;
color: #5A6578;
}
/* 特点 :图标 */
.app-feature-item-aqkk .flag {
background-image: url(../img-mobile/f-flag-aqkk.svg);
}
.app-feature-item-dxysp .flag {
background-image: url(../img-mobile/f-flag-dxysp.svg);
}
.app-feature-item-ddywjk .flag {
background-image: url(../img-mobile/f-flag-ddywjk.svg);
}
.app-feature-item-gbfsscl .flag {
background-image: url(../img-mobile/f-flag-gbfsscl.svg);
}
.app-feature-item-glgx .flag {
background-image: url(../img-mobile/f-flag-glgx.svg);
}
.app-feature-item-yssycz .flag {
background-image: url(../img-mobile/f-flag-yssycz.svg);
}
/* 应用场景 */
.app-scene-item-head {
margin-top: .25rem;
}
.app-scene-item .flag {
width: .3rem;
height: .3rem;
background-size: auto .28rem;
background-position: center center;
background-repeat: no-repeat;
}
.app-scene-item .title {
margin-left: .1rem;
font-weight: 500;
font-size: .16rem;
line-height: .25rem;
color: #1A202C;
}
.app-scene-item .desc {
display: block;
font-size: .14rem;
line-height: .28rem;
color: #5A6578;
padding-top: .09rem;
}
/* 场景:背景图 */
.app-scene-item-sbxt {
height: 9.5689rem;
background: url(../img-mobile/scene-sbxt-bg.svg) right no-repeat;
background-size: 100% 100%;
margin: -3.1rem 0 -2.1474rem;
}
.app-scene-item-gjzx {
height: 5.8rem;
background: url(../img-mobile/scene-gjzx-bg.svg) right no-repeat;
background-size: 100% 100%;
}
.app-scene-item-3d {
margin-top: -.46rem;
background: url(../img-mobile/scene-3d-bg.svg) right top no-repeat;
background-size: auto 3.29rem;
}
/* 场景:图片 */
.app-scene-item-sjjx .display-img {
width: 100%;
height: 2.63rem;
background: url(../img-mobile/scene-sjjx.svg) center no-repeat;
background-size: 100% 100%;
margin-top: .6rem;
}
.app-scene-item-sbxt .display-img {
width: 100%;
height: 6rem;
background: url(../img-mobile/scene-sbxt.svg) right bottom no-repeat;
background-size: auto 1.7642rem;
margin-bottom: 0.557rem;
}
.app-scene-item-gjzx .display-img {
margin-top: .2rem;
width: 100%;
height: 3.74rem;
background: url(../img-mobile/scene-gjzx.svg) left .26rem top .62rem no-repeat;
background-size: auto 3.08rem;
}
.app-scene-item-3d .display-img {
width: 100%;
height: 3.29rem;
background: url(../img-mobile/scene-3d.svg) bottom 50% right .15rem no-repeat;
background-size: auto 2.06rem;
margin-bottom: -.23rem;
}
/* 场景:图标 */
.app-scene-item-sjjx .flag {
background-image: url(../img-mobile/s-flag-sjjx.svg);
}
.app-scene-item-sbxt .flag {
background-image: url(../img-mobile/s-flag-sbxt.svg);
}
.app-scene-item-gjzx .flag {
background-image: url(../img-mobile/s-flag-gjzx.svg);
}
.app-scene-item-3d .flag {
background-image: url(../img-mobile/s-flag-3d.svg);
}
/* 页面底部 */
.app-down .title {
font-weight: 600;
font-size: .18rem;
line-height: .25rem;
color: #1A202C;
text-align: center;
margin-top: .7rem;
}
.app-footer {
display: block;
height: 2.63rem;
font-size: .1rem;
line-height: .14rem;
margin-top: 1rem;
text-align: center;
}
.app-footer .main-content {
height: 100%;
background: url(../img-mobile/footer-bg.png) center/100% 2.63rem no-repeat;
padding-top: .65rem;
}
.app-footer .display-content {
display: flex;
justify-content: center;
}
.app-footer .logo {
width: 1.2132rem;
height: .17rem;
background: url(../img-mobile/footer-logo.svg) center/100% auto no-repeat;
margin: 0 auto;
}
.app-footer .copyright,
.app-footer span,
.app-footer .connection,
.app-footer .qrcode {
color: #FFFAFA;
opacity: 0.7;
}
.app-footer .copyright {
margin-top: .11rem;
transform: scale(.98);
opacity: .65;
}
.app-footer span {
display: block;
font-weight: 600;
margin: .24rem auto .16rem;
}
.app-footer .qrcode {
display: block;
width: .5rem;
height: .45rem;
background: url(../img-mobile/footer-qrcode.png) center top .025rem/auto .44rem no-repeat;
}
.app-footer .qrcode div {
margin-top: .5rem;
transform: scale(.88);
}
.app-footer .connection {
text-align: left;
margin-left: .16rem;
}
.app-footer .connection div {
margin-bottom: .115rem;
transform: scale(.9906);
}
|