page { background-color: #f5f6f8; padding: 30rpx; box-sizing: border-box; } /* 地址 */ .address { background-color: #FFFFFF; border-radius: 20rpx; overflow: hidden; position: relative; } .address-arrow { position: absolute; right: 30rpx; top: 80rpx; width: 38rpx; height: 38rpx; } .address-cont { padding: 30rpx 30rpx 0; box-sizing: border-box; } .address-area { color: #585866; font-size: 28rpx; } .address-text { font-weight: 600; padding: 10px 0; } .address-name text { color: #585866; padding-left: 30rpx; } .address-img { width: 100%; } .address-add { width: 100%; text-align: center; padding: 30rpx 30rpx 0; box-sizing: border-box; } .address-go { display: inline-block; font-size: 28rpx; line-height: 68rpx; border-radius: 10rpx; color: #df723a; } /* 商品 */ .good { background-color: #FFFFFF; border-radius: 20rpx; overflow: hidden; margin: 30rpx 0; position: relative; padding: 30rpx; } .good-img { width: 160rpx; height: 160rpx; } .good-cont { position: absolute; left: 0; top: 0; width: 100%; padding: 30rpx 30rpx 0 220rpx; box-sizing: border-box; } .good-name { font-size: 30rpx; } .good-price { color: #df723a; } .good-price text { font-size: 26rpx; padding-right: 5rpx; } .label-integral { color: #6c78f8; font-weight: 600; } .good-tips { margin: 10rpx 0 25rpx; color: #585866; font-size: 28rpx; } /* 规格 */ .label { background-color: #FFFFFF; border-radius: 20rpx; overflow: hidden; box-sizing: border-box; } .label-item { display: flex; line-height: 100rpx; color: #585866; font-size: 30rpx; padding: 0 30rpx; box-sizing: border-box; border-bottom: 2rpx solid rgb(243, 243, 243); } .label-item:last-child { border: none; } .label-name { flex: 1; } .label-price { text-align: right; line-height: 90rpx; font-size: 30rpx; font-weight: 600; padding: 0 30rpx 5rpx; box-sizing: border-box; } .label-price text { font-size: 34rpx; padding: 0 10rpx; } .label-number { display: flex; margin-top: 25rpx; } .number-btn { background-color: #f1f1f1; width: 48rpx; height: 48rpx; line-height: 46rpx; text-align: center; } .number-input { width: 80rpx; text-align: center; } /* 购买方式 */ .payWay { margin-top: 30rpx; padding: 30rpx; box-sizing: border-box; } .cashierCont-pay-way { padding: 40rpx 0; height: 270rpx; box-sizing: border-box; } .cashierCont-way-label { float: left; border: 2rpx solid #e8e8e8; box-sizing: border-box; padding: 30rpx 0; border-radius: 10rpx; width: calc(50% - 84rpx); text-align: center; margin: 0 40rpx; font-size: 30rpx; position: relative; color: #999999; } .cashierCont-way-label.active { border-color: #d5a56d; color: #df723a; box-shadow: 0 4rpx 20rpx rgba(204, 6, 29, 0.2); } .cashierCont-way-label radio { opacity: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .cashierCont-way-label image { width: 78rpx; height: 78rpx; display: block; margin: 0 auto 20rpx; } /* 底部 */ .footer { width: 100%; height: 60px; background-color: #FFFFFF; position: fixed; left: 0; bottom: 0; z-index: 9; padding: 8px 30rpx; box-sizing: border-box; display: flex; } .number { flex: 1; line-height: 44px; color: #6c78f8; } .number text { padding: 0 5rpx; font-weight: 600; font-size: 38rpx; } .btn { height: 36px; line-height: 36px; background-color: #6c78f8; text-align: center; color: #FFFFFF; border-radius: 60rpx; font-size: 28rpx; padding: 0 30rpx !important; width: auto !important; margin-top: 8rpx; } /* 兑换弹出 */ .exchangePop { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); left: 0; top: 0; display: none; z-index: 9; } .exchangePop.active { display: block; } .exchangeCont { left: 10%; top: 50%; width: 80%; margin-top: -200rpx; position: fixed; z-index: 100; background-color: #FFFFFF; border-radius: 20rpx; overflow: hidden; text-align: center; padding: 40rpx; display: none; box-sizing: border-box; } .exchangeCont.active { display: block; } .exchange-title { text-align: center; color: #2b2b2b; font-weight: 600; font-size: 34rpx; } .exchange-number { font-size: 28rpx; margin: 30rpx 0; } .exchange-number text { color: #f31d23; font-weight: 600; padding: 0 5rpx; } .exchange-img { display: block; width: 80rpx; height: 80rpx; margin: 10rpx auto; } .exchange-btn { display: flex; } .exchange-item { line-height: 78rpx; flex: 2; text-align: center; margin: 0 15rpx; border: 2rpx solid #000; border-radius: 50rpx; background-color: #FFFFFF; } .exchange-item:last-child { background-color: #f31d23; color: #FFFFFF; border-color: #f31d23; } .grey { background-color: #f9f9f9; z-index: 99999; position: fixed; }