page { background-color: #f5f7fb; } .container { padding: 0; margin: 0; font-size: 28rpx; color: #333; } /* 顶部切换栏 */ .tab-bar { display: flex; background-color: #fff; padding: 20rpx 0; } .tab-item { width: 180rpx; height: 70rpx; line-height: 70rpx; text-align: center; border-radius: 15rpx; margin: 0 20rpx; font-size: 28rpx; border: 1rpx solid #ddd; } .tab-item.active { background-color: #ff370b; color: #fff; } /* 分隔线 */ .divider { height: 20rpx; background-color: #f5f5f5; } /* 公共标题样式 */ .section-title { font-size: 32rpx; color: #333; font-weight: bold; padding: 20rpx 30rpx; } /* 收货地址区域 */ .info-section { background: repeating-linear-gradient(to right, #fe5355, #fe5355 20px, #549aff 20px, #549aff 40px); padding: 10rpx 0; } .address-section { background-color: #fff; } .address-info { padding: 30rpx; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1rpx solid #eee; } .address-main { flex: 1; } .address-name-phone { display: flex; align-items: center; margin-bottom: 10rpx; } .name { font-size: 32rpx; margin-right: 20rpx; } .phone { font-size: 30rpx; color: #666; } .address-detail { font-size: 28rpx; color: #666; line-height: 40rpx; display: flex; align-items: center; } .address-arrow { color: #333; } /* 商品信息区域 */ .goods-section { background-color: #fff; margin-bottom: 20rpx; } .goods-item { border-radius: 10rpx; padding: 15rpx; display: flex; background-color: #fff; } .goods-image { width: 140rpx; height: 140rpx; border-radius: 15rpx; overflow: hidden; margin-right: 15rpx; } .goods-image image { width: 100%; height: 100%; object-fit: cover; } .goods-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .goods-name { font-size: 28rpx; font-weight: bold; margin-bottom: 8rpx; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .goods-desc { font-size: 22rpx; color: #666; margin-bottom: 10rpx; } .price-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx; } .group-price { font-size: 28rpx; color: #e63946; margin-right: 10rpx; border-radius: 4rpx; /* display: flex; */ } .group-price-box { display: flex; } .group-price1 { width: 100rpx; padding: 10rpx 15rpx; color: #ffffff; background-color: #fc5d15; border-radius: 15rpx 0 0 15rpx; } .group-price2 { width: auto; padding: 10rpx 15rpx; background: linear-gradient(to bottom, #fef6d6, #fee8a9); border-radius: 0 15rpx 15rpx 0; } .original-price { font-size: 26rpx; color: #999; } .countdown { width: 250rpx; font-size: 22rpx; padding: 10rpx 15rpx; color: #ffffff; margin-bottom: 15rpx; border-radius: 50rpx; background-color: #fe2f01; position: absolute; top: 150rpx; right: 0; } .quantity-control { display: flex; align-items: center; justify-content: flex-end; } .decrease-btn { width: 40rpx; height: 40rpx; background-color: #f5f5f5; border: 1rpx solid #ccc; border-radius: 50%; line-height: 33rpx; text-align: center; font-size: 28rpx; color: #333; } .increase-btn { width: 40rpx; height: 40rpx; background-color: #ff502a; border-radius: 50%; line-height: 33rpx; text-align: center; font-size: 28rpx; color: #ffffff; } .quantity { margin: 0 15rpx; font-size: 24rpx; width: 40rpx; text-align: center; } /* 运费和总金额区域 */ .fee-section, .total-section { background-color: #fff; padding: 30rpx; display: flex; justify-content: space-between; border-bottom: 1rpx solid #eee; } .fee-name, .total-name { font-size: 30rpx; } .fee-value, .total-value { font-size: 30rpx; color: #333; } .total-value { font-weight: bold; color: #FF7658; } /* 复制 */ .copy-icon { width: 30rpx; height: 30rpx; background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png'); background-size: cover; margin-left: 10rpx; } /* 支付方式区域 */ .payment-section { background-color: #fff; margin-bottom: 20rpx; margin-top: 15rpx; } .payment-item { padding: 30rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #eee; } .payment-icon { width: 60rpx; height: 60rpx; margin-right: 20rpx; } .payment-icon image { width: 100%; height: 100%; } .payment-content { flex: 1; } .payment-name { font-size: 32rpx; margin-bottom: 5rpx; } .payment-desc { font-size: 26rpx; color: #333; } .payment-select { color: #FF7658; } /* 立即支付按钮 */ .pay-button { height: 100rpx; line-height: 100rpx; text-align: center; background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); color: #fff; font-size: 36rpx; font-weight: bold; border-radius: 50rpx; position: fixed; bottom: 50rpx; left: 15%; width: 70%; /* z-index: 99; */ } /* 自提样式 */ .pickup-info { padding: 30rpx; background-color: #fff; } .pickup-address { font-size: 30rpx; margin-bottom: 10rpx; } .pickup-time { font-size: 28rpx; color: #999; } /* 弹窗 */ .shadow { background: rgba(0, 0, 0, 0.4); position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9; } .shadowBox2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: auto; } .shadowBox_img { width: 600rpx; height: 900rpx; background-color: #fff; border-radius: 20rpx; } .boxshadow_tit { font-size: 32rpx; color: #222222; padding-top: 40rpx; display: flex; justify-content: center; align-items: center; } .boxshadow_tit_img { width: 70rpx; height: 70rpx; margin-right: 10rpx; } .boxshadow_img { width: 300rpx; height: 300rpx; margin: 0 auto; margin-top: 40rpx; text-align: center; } .boxbottom { width: 100%; margin-top: 100rpx; display: flex; justify-content: center; align-items: center; } .line1 { width: 80rpx; height: 1rpx; margin: 0 10rpx; background: linear-gradient(to left, #333, #fff); } .line2 { width: 80rpx; height: 1rpx; margin: 0 10rpx; background: linear-gradient(to right, #333, #fff); } .shadowBox1 { width: 100%; display: flex; margin-top: 30rpx; } .shadowBox1Item_btn{ width: 110rpx; height: 150rpx; border: 1rpx solid red; position: absolute; left: 50rpx; opacity:0; } .shadowBox1Item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26rpx; color: #000000; } .shadowBox1Item image { width: 100rpx; height: 100rpx; margin-bottom: 26rpx; } .shadowBoxInfo { display: flex; align-items: center; margin-left: 62rpx; margin-top: 11rpx; } .shadowboxInfo_left { width: 130rpx; height: 130rpx; background: #EFEFEF; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-right: 36rpx; } .shadowboxInfo_right_1 { font-size: 32rpx; color: #222222; margin-bottom: 10rpx; } .shadowboxInfo_right_2 { font-size: 26rpx; color: #999999; } .shadowBox_btn { font-size: 36rpx; color: #FFFFFF; width: 600rpx; height: 90rpx; background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); border-radius: 100rpx 100rpx 100rpx 100rpx; display: flex; align-items: center; justify-content: center; margin-top: 60rpx; } .empty-tip{ height: 200rpx; font-size: 28rpx; color: #999999; text-align: center; line-height: 200rpx; background-color: #fff; }