page { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } .bottom1{ position: fixed; bottom: 0rpx; left: 0rpx; width: 100%; height: 110rpx; z-index: 8886; background-size: 100% 100%; } .arrow_down{ width: 54rpx; height: 54rpx; position: fixed; right: 20rpx; bottom: 700rpx; z-index: 8888; } .arrow_down image{ width: 100%; height: 100%; } .maskLayer{ z-index: 8887; position: fixed; top: 0rpx; left: 0rpx; right: 0rpx; bottom: 0rpx; width: 100%; height: 100%; background: #333; opacity: .5; } .choose{ z-index: 8888; position: fixed; bottom: 0rpx; width: 100%; background: white; padding: 26rpx 0rpx; display: flex; flex-wrap: wrap; /* justify-content: center; */ } .choose .left{ margin-left: 4%; margin-top: 7rpx; margin-bottom: 7rpx; margin-right: 10rpx; } .choose .right{ margin-right: 4%; margin-top: 7rpx; margin-bottom: 7rpx; } .background1 { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 1); opacity: 0.6; z-index: 8887; } .image1 { position: fixed; z-index: 999999; top: 19%; width: 100%; height: 700rpx; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center; } .image1 .center_swiper{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .image1 swiper-item{ height: 100%; display: flex; align-items: center; justify-content: center; } .image1 image { width: 550rpx; height: 100%; } .guanbi { position: absolute; left: 46%; bottom: -25%; z-index: 999999; } map { width: 100%; height: 100%; position: relative; } .Swiper { width: 100%; height: 150rpx; display: flex; flex-direction: column; align-items: center; position: fixed; top: 188rpx; z-index: 1000; } .Swiper .active { width: 15rpx; height: 15rpx; border-radius: 50%; background: #18d5b9 !important; } .Swiper .dots { position: absolute; bottom: 8rpx; z-index: 9999; display: flex; } .Swiper .dots view { width: 15rpx; height: 15rpx; border-radius: 50%; background: rgb(148, 151, 151); margin: 0rpx 10rpx; } .image1 .dots { position: absolute; bottom: -40rpx; z-index: 9999; display: flex; } .image1 .dots view { width: 15rpx; height: 15rpx; border-radius: 50%; background: #fff; margin: 0rpx 10rpx; } .image1 .dots .active { background: #18D5B9; } .swiper { width: 650rpx; height: 150rpx; border-radius: 10rpx; } .swiper swiper-item { background-size: 100% 100%; width: 100%; height: 100%; border-radius: 10rpx; } .inform{ display: flex; align-items: center; width: 650rpx; height: 68rpx; background: white; position: fixed; z-index: 1000; font-size: 26rpx; justify-content: space-between; border-radius: 10rpx; } .inform-img{ display: flex; height: 100%; align-items: center; } .marquee{ width:80%; height: 70rpx; overflow: hidden; line-height: 70rpx; } .marqueeTitle{ height: 70rpx; } .img-map { width: 30rpx; height: 53rpx; position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); } cover { line-height: normal !important; overflow: visible !important; } .index { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; position: relative; } .inaver._30f2b4d { /* box-sizing: border-box; *//* padding-top: 28rpx; */ width: 100%; height: 70rpx; display: flex; position: fixed; z-index: 9999; top: 0rpx; left: 0rpx; align-items: center; } .left._30f2b4d { height: 70rpx; display: flex; align-items: center; justify-content: center; width: 70rpx; } .inaver._30f2b4d .tabbar_top { width: 42%; display: flex; justify-content: space-between; height: 70rpx; align-items: flex-end; margin-left: 19%; } .tabbar_top view { display: flex; flex-direction: column; align-items: center; height: 84%; justify-content: space-between; } .tabbar_top view text:nth-of-type(2) { width: 80%; height: 4rpx; background: #18d5b9; } .tabbar_top view text:nth-of-type(1) { font-size: 32rpx; font-family: PingFang SC; color: rgba(42, 42, 42, 1); padding-bottom: 8rpx; } .inaver .left .icon._30f2b4d { width: 48rpx; height: 50rpx; /* margin-top: 10rpx; */ } .inaver .center._30f2b4d { height: 100%; flex: 1; /* margin: 8rpx; */ display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-family: PingFang-SC-Medium; color: rgba(42, 42, 42, 1); } .inaver .right._30f2b4d { width: 105rpx; height: 100%; /* margin: 8rpx; */ } /**index.wxss**/ .fontSize24 { font-size: 24rpx; } .flexB { display: flex; justify-content: space-between; align-items: center; } .flexC { display: flex; justify-content: center; align-items: center; } /*顶部导航栏 begin*/ .nav { width: 100%; padding: 63rpx 0 30rpx 0; color: #2a2a2a; position: fixed; top: 0; left: 0; z-index: 9999; background: #fff; } .nav .iconfont { font-size: 50rpx; vertical-align: middle; margin: 0 216rpx 0 30rpx; } .nav .title { font-size: 36rpx; } .stopModel { height: 100rpx; width: 650rpx; background: #fff; position: fixed; top: 188rpx; left: 50rpx; border-radius: 10rpx; z-index: 1000; display: flex; align-items: center; justify-content: space-between; } .stopModel view:nth-of-type(1) { width: 70%; display: flex; flex-direction: column; padding-left: 32rpx; font-size: 26rpx; } .stopModel view:nth-of-type(2) { width: 30%; display: flex; align-items: center; justify-content: center; } .stopModel .ban-stop{ flex-direction: column; } .stopModel .ban-stop text{ font-size: 26rpx; color: red; } .upCon { height: 130rpx; width: 650rpx; background: #fff; position: fixed; top: 188rpx; left: 50rpx; border-radius: 10px; z-index: 1000; } /*车牌号及电量 beigin*/ .upCon .left { margin-left: 26rpx; width: 52%; } .left .number { font-size: 28rpx; font-family: PingFang-SC-Regular; font-weight: 400; color: rgba(42, 42, 42, 1); margin-bottom:15rpx; } .left .residue, .left .cost { font-size: 24rpx; } .left .cell { width: 38rpx; height: 38rpx; vertical-align: middle; } .left .residue { color: #f46a1f; margin: 0 10rpx; } /*车牌号及电量 end*/ .upCon .right { margin-right: 16rpx; border-radius: 27rpx; width: 35%; } .flexB .left1 { width: 80rpx; height: 54rpx; background: rgba(24, 213, 185, 1); margin-right: 5rpx; display: flex; align-items: center; justify-content: center; border-radius: 27px 4px 4px 27px; } .flexB .right1 { width: 150rpx; height: 54rpx; background: rgba(24, 213, 185, 1); display: flex; align-items: center; justify-content: center; border-radius: 4px 27px 27px 4px; } /*响铃及立即用车 begin*/ .right .bell { width: 38rpx; height: 38rpx; } .right .useBike { color: #fff; } cover-view { visibility: visible !important; } /*响铃及立即用车 end*/ /* 地图下面部分 begin */ /* 四个图标 begin */ .circle { height: 84rpx; width: 84rpx; display: flex; justify-content: center; align-items: center; /* margin-bottom: 30rpx; */ position: fixed; z-index: 1000; } .circle image { width: 100%; height: 100%; } .circle1 { left: 50rpx; bottom: 250rpx; } .circle2 { right: 50rpx; bottom: 250rpx; } .circle3 { left: 50rpx; bottom: 134rpx; } .circle4 { right: 50rpx; bottom: 134rpx; } .circle5 { right: 0rpx; top: 520rpx; width: 156rpx; } .top { margin-bottom: 44rpx; } /* .iconImg { height: 44rpx; width: 44rpx; } */ /* 四个图标 end */ /* 如何用车 begin */ .intro { position: absolute; bottom: 175rpx; width: 170rpx; height: 180rpx; left: 38.5%; display: flex; align-items: center; justify-content: center; } .intro .introBg { width: 100%; height: 100%; position: absolute; opacity: 0.6; } .intro .introCon { font-size: 24rpx; font-family: PingFang SC; color: rgba(255, 255, 255, 1); position: absolute; letter-spacing: 5rpx; z-index: 1111; padding-bottom: 10rpx; padding-left: 10rpx; display: flex; justify-content: space-around; } /* .intro .introCon { font-size: 24rpx; color: #fff; position: absolute; top:194rpx; left:259rpx; z-index: 2; letter-spacing: 5rpx; } .intro .introBg { width: 202rpx; height: 211rpx; opacity: 0.6; position: absolute; top:111rpx; left:215rpx; z-index: 1; } */ /* 如何用车 end */ .unlocking { height: 88rpx; border-radius: 8px; font-size: 33rpx; position: absolute; width: 365rpx; margin: 0 auto; bottom: 135rpx; z-index: 1000; left: 193rpx; } .unlocking .sweep { height: 100%; width: 100%; } .modal-content1 { height: 180rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; color: rgba(42, 42, 42, 1); } .authName { width: 470rpx; height: 598rpx; position: fixed; left: 20.5%; top: 29%; z-index: 9999; } .realname { display: flex; flex-direction: column; align-items: center; /* border: 1px solid #000; */ width: 470rpx; height: 520rpx; } .auth { position: absolute; top: 0; left: 0; width: 470rpx; height: 520rpx; } .realname .text1 { position: absolute; top: 40%; font-size: 50rpx; font-family: PingFang SC; color: #111; } .realname .text2 { position: absolute; top: 50%; font-size: 26rpx; font-family: PingFang SC; color: rgba(102, 102, 102, 1); margin-top: 23rpx; } .realname .view { position: absolute; top: 68%; width: 362rpx; height: 76rpx; background: #18d5b9; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 32rpx; border-radius: 43rpx; font-family: PingFang SC; color: rgba(255, 255, 255, 1); } .authName .over { position: absolute; bottom: 0%; z-index: 8888; left: 46%; } .backposi { width: 100%; height: 100%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 1); opacity: 0.4; z-index: 8887; } .deposit { width: 564rpx; height: 614rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 8888; position: fixed; top: 28%; left: 13%; } .deposit .text1 { position: absolute; top: 45%; font-size: 50rpx; font-family: PingFang SC; color: rgba(51, 51, 51, 1); } .deposit .depositBg { width: 100%; height: 100%; } .deposit .text2 { position: absolute; top: 59%; font-size: 32rpx; font-family: PingFang SC; color: rgba(153, 153, 153, 1); } .deposit .text3 { position: absolute; top: 60%; font-size: 32rpx; font-family: PingFang SC; color: rgba(244, 145, 91, 1); } .deposit .view { position: absolute; top: 71%; width: 266rpx; height: 68rpx; border: 1px solid #f4915b; border-radius: 34rpx; font-size: 32rpx; font-family: PingFang SC; color: #f4915b; } .deposit .text4 { position: absolute; top: 89%; font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: rgba(153, 153, 153, 1); border-bottom: 1rpx solid #999; } .scanCon { width: 550rpx; height: 712rpx; position: fixed; top: 31.7%; left: 13%; z-index: 8888; } .scanCon .over1 { position: absolute; bottom: 0rpx; left: 45%; } .scanfail { width: 550rpx; height: 612rpx; } .scanfail .tu1 { position: absolute; top: 0rpx; left: 0rpx; width: 100%; height: 612rpx; } .scanfail .text1 { font-size: 50rpx; font-family: PingFang SC; color: rgba(42, 42, 42, 1); position: absolute; top: 42%; } .scanfail .text2 { font-size: 32rpx; font-family: PingFang SC; color: rgba(153, 153, 153, 1); position: absolute; bottom: 40%; } .scanfail .text3 { font-size: 32rpx; font-family: PingFang SC; color: #f4915b; position: absolute; bottom: 30%; } .scanfail .view { position: absolute; bottom: 107rpx; width: 100%; height: 72rpx; border-radius: 0rpx 0rpx 20rpx 20rpx; display: flex; justify-content: space-between; font-size: 32rpx; font-family: PingFang SC; border-top: 1rpx solid #f4f4f4; } .scanfail .view .view1 { display: flex; align-items: center; justify-content: center; width: 49.5%; height: 100%; } .topay { width: 500rpx; height: 300rpx; background: rgba(255, 255, 255, 1); border-radius: 20rpx; position: fixed; top: 41%; left: 16%; z-index: 8888; display: flex; flex-direction: column; align-items: center; justify-content: center; } .topay .text1, .text2 { font-size: 28rpx; font-family: PingFang SC; color: rgba(42, 42, 42, 1); } .topay .view { display: flex; position: absolute; bottom: 0rpx; width: 100%; justify-content: space-between; height: 70rpx; border-top: 1rpx solid #f4f4f4; padding: 10rpx 0rpx; } .topay .view .view1 { display: flex; align-items: center; justify-content: center; width: 49.5%; } .abnormal { justify-content: space-around !important; } .hint { height: 682rpx; width: 484rpx; position: absolute; left: 20.5%; top: 29%; } .hint image:first-child { width: 470rpx; height: 520rpx; } .hint image:last-child { height: 75rpx; width: 75rpx; margin-top: 20rpx; } .verPop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 70%; height: 300rpx; text-align: center; border-radius: 10rpx; z-index:8888; } .verPop .title { padding: 34rpx 0; font-size: 32rpx; font-weight: 600; } .verPop .verHint { font-size: 28rpx; } .verPop .sure { width: 60%; margin: 0 auto; background: rgba(24, 213, 185, 1); border-radius: 10rpx; padding: 8rpx 0; color: #fff; margin-top: 50rpx; } .popCover { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; z-index:8888; } .bottomAd{ width: 345rpx !important; height: 176rpx !important; margin: 7rpx auto; }