.container.data-v-09724fb8 { min-height: 100vh; background-color: #F5F6F8; display: flex; flex-direction: column; } /* Tabs */ .tab-header.data-v-09724fb8 { display: flex; background-color: #FFF; padding: 0 40rpx; border-bottom: 2rpx solid #F0F2F5; position: -webkit-sticky; position: sticky; top: 0; z-index: 10; } .tab-header .tab-item.data-v-09724fb8 { flex: 1; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 28rpx; color: #666; position: relative; transition: all 0.2s; } .tab-header .tab-item.active.data-v-09724fb8 { color: #1F6CFF; font-weight: bold; } .tab-header .tab-item.active.data-v-09724fb8::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48rpx; height: 6rpx; background-color: #1F6CFF; border-radius: 3rpx; } /* 列表 */ .order-scroll.data-v-09724fb8 { flex: 1; } .order-scroll .list-wrap.data-v-09724fb8 { padding: 24rpx 30rpx; } /* 订单卡片 */ .order-card.data-v-09724fb8 { background: #FFF; border-radius: 24rpx; padding: 32rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04); } .order-card .card-header.data-v-09724fb8 { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24rpx; margin-bottom: 24rpx; border-bottom: 1rpx solid #F0F2F5; } .order-card .card-header .order-no.data-v-09724fb8 { font-size: 24rpx; color: #999; } .order-card .card-header .status-badge.data-v-09724fb8 { padding: 4rpx 16rpx; border-radius: 16rpx; font-size: 22rpx; font-weight: 500; } .order-card .card-header .status-badge.unpaid.data-v-09724fb8 { background: #FFF7E6; color: #FA8C16; } .order-card .card-header .status-badge.paid.data-v-09724fb8 { background: #F0FFF4; color: #52C41A; } .order-card .card-header .status-badge.refunded.data-v-09724fb8 { background: #F5F5F5; color: #999; } .order-card .card-header .status-badge.partial_refund.data-v-09724fb8 { background: #E6F7FF; color: #1890FF; } .order-card .card-body .body-top.data-v-09724fb8 { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16rpx; } .order-card .card-body .body-top .order-info.data-v-09724fb8 { flex: 1; min-width: 0; } .order-card .card-body .body-top .order-info .order-name.data-v-09724fb8 { font-size: 32rpx; font-weight: 600; color: #1A1A1A; display: block; margin-bottom: 8rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .order-card .card-body .body-top .order-info .order-company.data-v-09724fb8 { font-size: 26rpx; color: #888; display: block; } .order-card .card-body .body-top .price-block.data-v-09724fb8 { flex-shrink: 0; margin-left: 16rpx; text-align: right; } .order-card .card-body .body-top .price-block .price-symbol.data-v-09724fb8 { font-size: 26rpx; color: #FF4D4F; font-weight: 500; } .order-card .card-body .body-top .price-block .price-num.data-v-09724fb8 { font-size: 40rpx; color: #FF4D4F; font-weight: bold; } .order-card .card-body .order-meta.data-v-09724fb8 { display: flex; gap: 24rpx; } .order-card .card-body .order-meta .meta-item.data-v-09724fb8 { font-size: 24rpx; color: #BBB; } .order-card .card-footer.data-v-09724fb8 { margin-top: 24rpx; padding-top: 24rpx; border-top: 1rpx solid #F0F2F5; display: flex; justify-content: flex-end; align-items: center; } .order-card .card-footer .footer-tip.data-v-09724fb8 { font-size: 24rpx; color: #52C41A; } .order-card .card-footer .action-btn.data-v-09724fb8 { height: 64rpx; line-height: 62rpx; padding: 0 40rpx; font-size: 26rpx; font-weight: 600; border-radius: 32rpx; margin: 0; } .order-card .card-footer .action-btn.data-v-09724fb8::after { border: none; } .order-card .card-footer .action-btn.pay-btn.data-v-09724fb8 { background: linear-gradient(135deg, #1F6CFF, #4D8FFF); color: #FFF; box-shadow: 0 4rpx 16rpx rgba(31, 108, 255, 0.25); } /* 支付弹窗 */ .modal-mask.data-v-09724fb8 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; } .modal-container.data-v-09724fb8 { width: 580rpx; background: #FFF; border-radius: 32rpx; padding: 48rpx 40rpx 40rpx; } .modal-container .modal-title.data-v-09724fb8 { font-size: 36rpx; font-weight: bold; color: #1A1A1A; text-align: center; margin-bottom: 40rpx; } .modal-container .pay-info.data-v-09724fb8 { background: #F8F9FB; border-radius: 20rpx; padding: 32rpx; margin-bottom: 40rpx; } .modal-container .pay-info .pay-row.data-v-09724fb8 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .modal-container .pay-info .pay-row.data-v-09724fb8:last-child { margin-bottom: 0; } .modal-container .pay-info .pay-row .pay-label.data-v-09724fb8 { font-size: 28rpx; color: #888; } .modal-container .pay-info .pay-row .pay-value.data-v-09724fb8 { font-size: 28rpx; color: #333; font-weight: 500; } .modal-container .pay-info .pay-row .pay-value.price.data-v-09724fb8 { color: #FF4D4F; font-size: 34rpx; font-weight: bold; } .modal-container .modal-btns.data-v-09724fb8 { display: flex; gap: 20rpx; } .modal-container .modal-btns .modal-btn.data-v-09724fb8 { flex: 1; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; font-size: 28rpx; font-weight: 600; } .modal-container .modal-btns .modal-btn.data-v-09724fb8::after { border: none; } .modal-container .modal-btns .modal-btn.cancel.data-v-09724fb8 { background: #F5F5F7; color: #666; } .modal-container .modal-btns .modal-btn.confirm.data-v-09724fb8 { background: #1F6CFF; color: #FFF; } .modal-container .modal-btns .modal-btn.confirm.data-v-09724fb8:disabled { opacity: 0.5; } /* 空状态 & 底部 */ .empty-state.data-v-09724fb8 { display: flex; flex-direction: column; align-items: center; padding-top: 150rpx; } .empty-state .empty-img.data-v-09724fb8 { width: 240rpx; height: 240rpx; margin-bottom: 20rpx; opacity: 0.5; } .empty-state text.data-v-09724fb8 { font-size: 28rpx; color: #CCC; } .no-more.data-v-09724fb8 { text-align: center; font-size: 24rpx; color: #CCC; padding: 40rpx 0; }