page { overflow: hidden; background: #f3f4f6; padding: 30rpx; box-sizing: border-box; } .While { border-radius: 10rpx; margin-bottom: 30rpx; background-color: #FFFFFF; padding: 0 30rpx; box-sizing: border-box; box-shadow: 0 0 10rpx rgba(0, 0, 0, .05); } .order { position: absolute; width: 100%; left: 0; top: 0; padding: 120rpx 30rpx 30rpx; box-sizing: border-box; height: 100%; overflow-y: scroll; } .order-top { line-height: 90rpx; box-sizing: border-box; display: flex; font-size: 28rpx; border-bottom: 2rpx #f2f2f2 solid; } .order-top-number { flex: 1; } .order-top-tips { font-size: 26rpx; color: #eb504c; } .order-name { padding: 20rpx 0; box-sizing: border-box; position: relative; } .order-img { width: 90rpx; height: 90rpx; margin-right: 20rpx; border-radius: 10rpx; } .order-goods { position: absolute; width: 100%; left: 0; top: 0; padding: 20rpx 20rpx 20rpx 110rpx; box-sizing: border-box; } .order-label { display: flex; font-size: 30rpx; margin-bottom: 15rpx; } .order-label-name { flex: 1; margin-right: 30rpx; } .order-label-price { font-size: 26rpx; color: #999; } .order-specs { font-size: 24rpx; color: #919191; display: flex; } .order-specs text { display: inline-block; flex: 1; } .order-text { font-size: 28rpx; line-height: 40rpx; display: flex; padding-bottom: 20rpx; border-top: 2rpx solid #f2f2f2; border-bottom: 2rpx solid #f2f2f2; padding-top: 20rpx; } .order-time { color: #919191; font-size: 24rpx; flex: 1; } .order-price text { font-weight: 600; color: #1d37e2; } .order-btn { padding: 30rpx 0; box-sizing: border-box; position: relative; font-size: 24rpx; text-align: right; } .order-btn-type { flex: 1; } .order-btn-type text { display: inline-block; background-image: linear-gradient(to right, #f16e06, #f34206); color: #FFFFFF; border-radius: 6rpx; padding: 0 10rpx; height: 44rpx; line-height: 44rpx; margin-top: 6rpx; } .order-btn-type text.active { background-image: linear-gradient(to right, #027be6, #2855f0); } .order-btn-atn { border: 2rpx solid #f2f2f2; border-radius: 40rpx; padding: 0 30rpx; height: 52rpx; line-height: 52rpx; color: #767676; display: inline-block; margin-left: 15rpx; } .order-btn-go { color: #eb504c; border-color: #eb504c; } .order-btn-atn.active { color: #1d37e2; border-color: #bfc5ff; } /* tabs */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 99; } .tabs { display: flex; justify-content: space-around; background: white; padding: 15rpx 0; font-size: 30rpx; color: #9d9d9d; } .item { height: 60rpx; line-height: 60rpx; } .item.show { color: #1d37e2; border-bottom: solid 4rpx #1d37e2; } .payPop { position: fixed; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .3); left: 0; top: 0; z-index: 998; display: none; } .payPop.active { display: block; } .payCont { position: fixed; width: 100vw; background-color: #FFFFFF; border-radius: 20rpx 20rpx 0 0; box-sizing: border-box; left: 0; bottom: -10000%; z-index: 999; padding: 100rpx 40rpx 40rpx; transition: .2s; } .payCont-label-close { width: 40rpx; height: 40rpx; position: absolute; top: 30rpx; right: 40rpx; z-index: 1000; } .payCont.active { bottom: 0; } .payCont-label { display: flex; height: 80rpx; line-height: 80rpx; margin-bottom: 40rpx; border-top: 2rpx solid #ececec; padding-top: 40rpx; position: relative; } .payCont-label-img { width: 64rpx; height: 64rpx; margin-top: 8rpx; margin-right: 20rpx; } .payContList-label-name { line-height: 80rpx; display: flex; flex: 1; font-weight: 600; } .payCont-label radio { opacity: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .payContList-label-arrow { width: 38rpx; height: 38rpx; margin-top: 18rpx; } .payCont-btn { width: 100%; text-align: center; margin: 80rpx 0 40rpx; background-color: #1d37e2; line-height: 100rpx; border-radius: 10rpx; color: #FFFFFF; }