bike-weapp/pages/coupon/coupon.wxss

page{
  height: 100%;
}
.box{
  height: 100%;
  background: #F4F4F4;
  width: 100%;
}
.box .top{
  width:100%;
  height:88rpx;
  background:rgba(255,255,255,1);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.box .top view{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  font-size:32rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:#A09E9E;
}
.box .top .active{
  color: #FA790F;
}
.box .top .active text:nth-of-type(2){
  width:38rpx;
  height:4rpx;
  background:rgba(250,125,14,1);
  border-radius:2rpx;
  position: absolute;
  bottom: 0rpx;
}
.box .null{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 73%;
  justify-content: center;
}
.box .null text{
  font-size:32rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(139,139,139,1);
  padding-top: 74rpx;
}
.box .coupon_1{
  padding-top: 154rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box .coupon_1 .view{
  width: 690rpx;
  height: 296rpx;
  background-size: 100% 100%;
  position: relative;
}
.box .coupon_1 .view1{
  background-image: url('http://resource.bike.hanyiyun.com/weapp/manjian1.png');
}
.box .coupon_1 .view2{
  background-image: url('http://resource.bike.hanyiyun.com/weapp/xianjin1.png');
}
.box .coupon_1 .view3{
  /* background-image: url('http://resource.bike.hanyiyun.com/weapp/zhekou1.png'); */
  background-image: url('http://resource.bike.hanyiyun.com/weapp/zhekou1.png');
}
.box .coupon_1 .view4{
  /* background-image: url('http://resource.bike.hanyiyun.com/weapp/zhekou1.png'); */
  background-image: url('http://resource.bike.hanyiyun.com/mianya2.png');
}
.box .coupon_1 .time{
  font-size:26rpx;
  font-family:PingFang SC;
  font-weight:400;
  position: absolute;
  top: 121.5rpx;
  left: 100rpx;
}
.box .coupon_1 .view1 .time{
  color: white;
}
.box .coupon_1 .view2 .time{
  color: white;
}
.box .coupon_1 .view3 .time{
  color: white;
}
.box .coupon_1 .view4 .time{
  color: rgba(255, 90, 80, 1);
  margin-top: 5rpx;
  font-weight: 550;
  
}
.box .coupon_1 .discount{
  font-size:40rpx;
  font-family:PingFang SC;
  font-weight:800;
  color:rgba(255,255,255,1);
  position: absolute;
  top: 112rpx;
  right: 80rpx;
}
.bg{
  width: 300rpx;
  height: 200rpx;
  background-color: #FA790F;
}
.box .coupon_1 .money{
  display: flex;
  align-items: center;
  position: absolute;
  top: 112rpx;
  left: 490rpx;
  font-family:PingFang SC;
  color:rgba(255,255,255,1);
}
.box .coupon_1 .text{
  font-size:26rpx;
  font-family:PingFang SC;
  position: absolute;
  top: 66rpx;
  left: 244rpx;
  color: white;
  font-weight: 400;
}
.box .coupon_2{
  padding-top: 154rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box .coupon_2 .view{
  width: 690rpx;
  height: 296rpx;
  background-size: 100% 100%;
  position: relative;
}
.box .coupon_2 .view1{
  background-image: url('http://resource.bike.hanyiyun.com/weapp/huimanjian.png');
}
.box .coupon_2 .view2{
  background-image: url('http://resource.bike.hanyiyun.com/weapp/huixianjin.png');
}
.box .coupon_2 .view3{
  background-image: url('http://resource.bike.hanyiyun.com/weapp/huizhekou.png');
}
.box .coupon_2 .view4{
  background-image: url('http://resource.bike.hanyiyun.com/mianya3.png');
}
.box .coupon_2 .text{
  font-size:26rpx;
  font-family:PingFang SC;
  position: absolute;
  top: 66rpx;
  left: 244rpx;
  color: white;
  font-weight: 400;
}
.box .coupon_2 .time{
  font-size:24rpx; 
  font-family:PingFang SC;
  font-weight:400;
  position: absolute;
  top: 124.5rpx;
  left: 100rpx;
  color: #CDCCCE;
}
.box .coupon_2 .discount{
  font-size:40rpx;
  font-family:PingFang SC;
  font-weight:800;
  color:rgba(255,255,255,1);
  position: absolute;
  top: 112rpx;
  right: 40rpx;
}
.box .coupon_2 .money{
  display: flex;
  align-items: center;
  position: absolute;
  top: 112rpx;
  left: 490rpx;
  font-family:PingFang SC;
  color:rgba(255,255,255,1);
}