.page { background-color: #f6f7fb; min-height: 100vh; padding-bottom: 120rpx; } .progress-container { display: flex; justify-content: space-between; padding: 30rpx 20rpx; background-color: #ffffff; } .progress-item { display: flex; flex-direction: column; align-items: center; width: 33%; } .progress-item.active .progress-text { color: #ff4d4f; } .progress-text { font-size: 24rpx; color: #999999; margin-top: 10rpx; } .progress-line { width: 200rpx; height: 2rpx; background-color: #d9d9d9; align-self: center; flex-grow: 1; margin-top: 10rpx; } .status-tip { background-color: #ffffff; padding: 30rpx 20rpx; margin-bottom: 20rpx; text-align: center; } .status-title { font-size: 40rpx; font-weight: bold; color: #333333; display: block; margin-bottom: 10rpx; } .status-desc { font-size: 24rpx; color: #999999; display: block; margin-bottom: 5rpx; } .hr { height: 20rpx; background: #f5f7fb; } .goods-info { background-color: #ffffff; margin-bottom: 20rpx; padding: 20rpx; } .goods-item { display: flex; padding: 10rpx 0; border-bottom: 1rpx solid #eeeeee; position: relative; } .goods-image { width: 160rpx; height: 160rpx; border-radius: 10rpx; margin-right: 20rpx; } .goods-details { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .asGoodTag { background-color: #ff7d00; color: white; font-size: 22rpx; padding: 5rpx 10rpx; border-radius: 8rpx 0 8rpx 8rpx; } .asGoodTag1 { margin-right: 15rpx; } .tag-img { position: absolute; top: 133rpx; left: 80rpx; z-index: 1; } .goods-name { font-weight: bold; font-size: 28rpx; color: #333333; margin-bottom: 10rpx; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .goods-desc { font-size: 26rpx; color: #ff4d4f; background-color: #fff2f0; padding: 4rpx 12rpx; border-radius: 8rpx; display: inline-block; margin: 10rpx 0; } .goods-price { font-size: 26rpx; color: #ff4d4f; margin-bottom: 5rpx; } .goods-count { font-size: 24rpx; color: #666666; float: right; } .refund-amount { font-size: 28rpx; align-self: flex-start; margin-top: 20rpx; font-weight: 500; position: relative; left: 140rpx; } .refund-info { background-color: #ffffff; margin-bottom: 20rpx; } .info-item { display: flex; justify-content: space-between; align-items: center; padding: 25rpx 20rpx; border-bottom: 1rpx solid #eeeeee; } .info-label { font-size: 28rpx; color: #666666; width: 200rpx; } .info-value { font-size: 28rpx; color: #333333; flex: 1; text-align: right; padding-right: 20rpx; } .amount { color: #ff4d4f; font-weight: bold; } .info-arrow { width: 16rpx; height: 16rpx; border-top: 2rpx solid #999999; border-right: 2rpx solid #999999; transform: rotate(45deg); } .copy-icon { width: 30rpx; height: 30rpx; background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png'); background-size: cover; } .action-buttons { display: flex; justify-content: space-between; padding: 20rpx; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; } .cancel-btn { width: 220rpx; height: 80rpx; background-color: #d9d9d9; color: #333; border-radius: 40rpx; font-size: 28rpx; line-height: 80rpx; text-align: center; } .modify-btn { width: 220rpx; height: 80rpx; background-color: #ffebcb; color: #983012; border-radius: 40rpx; font-size: 28rpx; line-height: 80rpx; text-align: center; } .urge-btn { width: 220rpx; height: 80rpx; background-color: #ff4d4f; color: #ffffff; border: none; border-radius: 40rpx; font-size: 28rpx; line-height: 80rpx; text-align: center; } /* 弹窗样式 */ .popup-content { width: 600rpx; background-color: #ffffff; border-radius: 20rpx; padding: 40rpx; display: flex; flex-direction: column; align-items: center; } .success-icon { margin: 20rpx 0; } .check-circle { width: 120rpx; height: 120rpx; background-color: #00c853; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .check-mark { color: #ffffff; font-size: 70rpx; font-weight: bold; } .popup-title { font-size: 36rpx; font-weight: bold; color: #333333; margin: 20rpx 0; } .popup-desc { font-size: 28rpx; color: #666666; text-align: center; line-height: 40rpx; margin-bottom: 30rpx; padding: 0 20rpx; } .popup-buttons { display: flex; justify-content: space-between; width: 100%; margin-top: 20rpx; } .continue-btn { width: 240rpx; height: 80rpx; background-color: #f6f7fb; color: #333333; border-radius: 40rpx; font-size: 28rpx; line-height: 80rpx; text-align: center; } .know-btn { width: 240rpx; height: 80rpx; background-color: #ff4d4f; color: #ffffff; border: none; border-radius: 40rpx; font-size: 28rpx; line-height: 80rpx; text-align: center; }