bike-weapp/pages/sweep_code/sweep_code.wxss

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
}