page { width: 100%; border-top: 2rpx solid #dedede; } .box { width: 100%; height: auto; } .notice{ width: 100%; height: 60rpx; display: flex; align-items: center; color: black; font-size: 26rpx; position: fixed; top: 0; left: 0; justify-content: center; background: #E92E16; } .notice .text{ color: white; } .notice image{ margin-right: 20rpx; } .box .top { width: 100%; height: 606rpx; display: flex; flex-direction: column; align-items: center; background-image: url('http://resource.bike.hanyiyun.com/weapp/map.jpg'); background-size: 100% 100%; justify-content: space-around; } .top .top_view{ display: flex; flex-direction: column; align-items: center; padding-top: 44rpx; } .top .top_view .title{ width:474rpx; font-size:52rpx; font-family:PingFang SC; font-weight:500; color:rgba(51,51,51,1); } .top .top_view .view{ width: 468rpx; display: flex; justify-content: center; font-size:24rpx; font-family:PingFang SC; font-weight:400; color:rgba(51,51,51,1); padding-top: 25rpx; } .top .top_view .view view{ display: flex; align-items: center; } .top image{ width: 276rpx; height: 141rpx; } .top .btm_view{ width:212rpx; height:52rpx; border:2rpx solid red; border-radius:26rpx; display: flex; align-items: center; justify-content: center; font-size:24rpx; font-family:PingFang SC; font-weight:400; color:red; } .background { width: 100%; height: 16rpx; background: rgba(249, 249, 248, 1); } .bottom { width: 84%; display: flex; flex-direction: column; margin: 0 auto; } .bottom .baoxiu{ text-align: right; font-size:24rpx; font-family:PingFang SC; font-weight:500; color:rgba(24,213,185,1); padding-bottom: 20rpx; } .bottom .btm_top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 34rpx; border-bottom: 2rpx solid #dedede; font-weight: 800; } .bottom .btm_top view{ font-size:40rpx; font-family:PingFang SC; font-weight:500; color:rgba(42,42,42,1); } .bottom .btm_center { display: flex; justify-content: space-between; align-items: center; } .bottom .btm_center view { width: 50%; display: flex; flex-direction: column; align-items: center; } .bottom .btm_center view text:nth-of-type(1) { font-size:40rpx; font-family:PingFang SC; font-weight:bold; color:rgba(42,42,42,1); } .bottom .btm_center view text:nth-of-type(2) { font-size: 24rpx; font-family: PingFang-SC-Regular; font-weight: 400; color: rgba(153, 153, 153, 1); padding-top: 15rpx; } .bottom .btm_btm_rent { display: flex; justify-content: center; align-items: center; height: 90rpx; border-radius: 10rpx; font-size: 32rpx; font-family: PingFang-SC-Medium; font-weight: 500; color: rgba(255, 254, 254, 1); width:630rpx; background:rgba(24,213,185,1); box-shadow:0px 8rpx 54rpx 0px rgba(224,224,224,0.68); } .bottom .btm_btm_use { display: flex; justify-content: center; align-items: center; height: 90rpx; width:630rpx; background:#E92E16; box-shadow:0px 8rpx 8rpx 0px rgba(224,224,224,0.68); border-radius:10rpx; font-size:32rpx; font-family:PingFang SC; font-weight:500; color:white; } .bottom .btm_btm1 { border: 2rpx solid rgba(24, 213, 185, 1); box-shadow: 0rpx 8rpx 54rpx 0rpx rgba(224, 224, 224, 0.68); border-radius: 10rpx; background: #fff !important; font-size: 32rpx; font-family: PingFang SC; font-weight: 500; color: rgba(24, 213, 185, 1); margin-top: 25rpx !important; } .back { width: 100%; height: 100%; position: fixed; top: 0rpx; left: 0rpx; right: 0rpx; bottom: 0rpx; z-index: 9999; background: #666; opacity: 0.5; } .model { display: flex; justify-content: center; width: 100%; position: fixed; z-index: 9999; top: 8%; left: 0%; } .over { position: fixed; bottom: 10%; z-index: 99999; } .content { width: 582rpx; height: 670rpx; background: white; z-index: 99999; margin-top: 160rpx; position: relative; } .content .view1 { display: flex; align-items: center; width: 100%; justify-content: space-around; } .content .view2 { display: flex; align-items: center; padding-left: 50rpx; padding-top: 14rpx; } .content .view2 view:nth-of-type(1) { width: 10rpx; height: 10rpx; background: rgba(24, 213, 185, 1); opacity: 0.85; border-radius: 50%; } .content .view2 view:nth-of-type(2) { font-size: 30rpx; font-family: PingFang SC; font-weight: 500; color: rgba(24, 213, 185, 1); padding-left: 10rpx; } .content .text { font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: rgba(152, 152, 152, 1); padding-left: 65rpx; padding-top: 10rpx; display: flex; flex-direction: column; } .content .view1 view { width: 218rpx; height: 228rpx; background: #efefef; display: flex; align-items: center; justify-content: center; margin-top: -40rpx; } .content .bottom1 { width: 100%; display: flex; position: absolute; bottom: 0rpx; left: 0rpx; height: 88rpx; justify-content: space-between; align-items: flex-end; } .content .bottom1 view { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #10d6bb; color: white; } .pop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 670rpx; height: 1180rpx; background: rgba(255, 255, 255, 1); border-radius: 14rpx; } .pop .top { width: 100%; height: 100rpx; background: rgba(246, 246, 246, 1); border-radius: 14rpx 14rpx 0rpx 0rpx; display: flex; align-items: center; justify-content: center; font-size: 46rpx; font-family: PingFang SC; font-weight: bold; color: rgba(31, 31, 31, 1); } .pop .center { display: flex; flex-direction: column; width: 100%; } .pop .center .view { display: flex; width: 100%; border-bottom: 2rpx #EFEFEF solid; } .pop .center .view view { width: 64.29%; display: flex; flex-direction: column; padding-left: 25rpx; } .pop .center .view view .title2 { padding-top: 22rpx; font-size: 32rpx; font-family: PingFang SC; font-weight: 500; color: rgba(54, 54, 50, 1); } .pop .center .view view .content1 { padding-top: 5rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: rgba(103, 103, 103, 1); opacity: 0.8; width: 92%; letter-spacing: 0.5px; } .pop .center .view image { width: 235rpx; height: 188rpx; } .pop .bottom1 { width: 100%; height: 130rpx; display: flex; align-items: center; justify-content: center; } .pop .bottom1 view { width: 400rpx; height: 76rpx; background: #0FD6BA; border-radius: 38rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-family: PingFang SC; font-weight: 400; color: rgba(255, 255, 255, 1); } .cover { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5); } .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; } .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; } .authName { width: 470rpx; height: 598rpx; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 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%; } .deposit { width: 564rpx; height: 614rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 8888; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .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; bottom: -12%; } .cell{ width: 38rpx; height: 38rpx; vertical-align: middle; } .useBikeTip { width: 100%; top: 0; height: 100vh; position: absolute; z-index: 99999; background-color: rgba(51, 51, 51, 0.6); } .useTipContent { margin-top: 20%; margin-left: 5%; width: 90%; background: #fff; padding-bottom: 50rpx; border-radius: 10rpx; } .useTipContent_title { text-align: center; height:100rpx; line-height: 100rpx; font-size: 40rpx; border-bottom: solid 1rpx rgb(216, 213, 213); /* background-color: #f4915b; */ font-weight: 500; } .useContent { border-bottom: solid 1rpx rgb(216, 213, 213); display: flex; } .tip-left { flex: 0 0 35%; /* height: 100%; */ /* height:150rpx; */ /* overflow: hidden; */ /* background-color: #E92E16 */ } .tip-left image{ width: 100%; height: 99%; } .tip-right{ flex: 1; padding:20rpx; border-left:solid 1rpx rgb(216, 213, 213); } .tip-right view:first-child{ font-size: 34rpx; /* font-weight: 500; */ } .tip-right view:last-child{ margin-top: 10rpx; font-size: 28rpx; color: rgb(131, 131, 131); } .tip-right text{ color: red; } .iKnow{ width: 50%; margin-left: 25%; height: 70rpx; line-height: 70rpx; text-align: center; color: #fff; border-radius: 15rpx; margin-top: 50rpx; background-color: #0FD6BA }