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); }