.page-container.data-v-88bf5328 { min-height: 100vh; background: #F0F1F5; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif; } /* 导航栏 */ .custom-navbar.data-v-88bf5328 { background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; padding: 88rpx 28rpx 28rpx; position: relative; } .navbar-back.data-v-88bf5328 { width: 68rpx; height: 68rpx; background: #F5F6F8; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .back-icon.data-v-88bf5328 { font-size: 48rpx; color: #1F2937; font-weight: 300; margin-top: -4rpx; } .navbar-title.data-v-88bf5328 { position: absolute; left: 50%; transform: translateX(-50%); } .title-text.data-v-88bf5328 { font-size: 34rpx; font-weight: 600; color: #1F2937; } .navbar-placeholder.data-v-88bf5328 { width: 68rpx; } /* 滚动区域 */ .scroll-view.data-v-88bf5328 { flex: 1; height: 0; } .content-wrapper.data-v-88bf5328 { padding: 28rpx; } /* 主卡片 - 弥散阴影 */ .main-card.data-v-88bf5328 { background: #FFFFFF; border-radius: 32rpx; padding: 8rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02), 0 8rpx 24rpx rgba(0, 0, 0, 0.04), 0 24rpx 48rpx rgba(0, 0, 0, 0.04); } /* 加载状态 */ .loading-state.data-v-88bf5328 { display: flex; flex-direction: column; align-items: center; padding: 100rpx 40rpx; } .loading-spinner.data-v-88bf5328 { width: 44rpx; height: 44rpx; border: 3rpx solid #E5E7EB; border-top-color: #6366F1; border-radius: 50%; animation: spin-88bf5328 0.8s linear infinite; margin-bottom: 20rpx; } @keyframes spin-88bf5328 { to { transform: rotate(360deg); } } .loading-text.data-v-88bf5328 { font-size: 26rpx; color: #9CA3AF; } /* 空状态 */ .empty-state.data-v-88bf5328 { display: flex; flex-direction: column; align-items: center; padding: 100rpx 40rpx; } .empty-icon-wrap.data-v-88bf5328 { width: 120rpx; height: 120rpx; background: #F9FAFB; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 24rpx; } .empty-icon.data-v-88bf5328 { font-size: 52rpx; } .empty-title.data-v-88bf5328 { font-size: 30rpx; font-weight: 600; color: #1F2937; margin-bottom: 8rpx; } .empty-desc.data-v-88bf5328 { font-size: 26rpx; color: #9CA3AF; } /* 订单列表 */ .order-list.data-v-88bf5328 { padding: 16rpx; } .order-item.data-v-88bf5328 { padding: 28rpx 0; border-bottom: 1rpx solid #F3F4F6; } .order-item.no-border.data-v-88bf5328 { border-bottom: none; } /* 顶部:标签 + 状态 */ .order-top.data-v-88bf5328 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .pool-tag.data-v-88bf5328 { display: flex; align-items: center; padding: 10rpx 18rpx; border-radius: 12rpx; gap: 8rpx; } .pool-tag.tag-purple.data-v-88bf5328 { background: rgba(139, 92, 246, 0.1); } .pool-tag.tag-orange.data-v-88bf5328 { background: rgba(251, 146, 60, 0.12); } .tag-icon.data-v-88bf5328 { font-size: 26rpx; } .tag-text.data-v-88bf5328 { font-size: 26rpx; font-weight: 600; color: #374151; } .status-badge.data-v-88bf5328 { padding: 8rpx 20rpx; border-radius: 32rpx; font-size: 22rpx; font-weight: 500; } .status-badge.status-paid.data-v-88bf5328 { background: rgba(34, 197, 94, 0.12); color: #16A34A; } .status-badge.status-pending.data-v-88bf5328 { background: rgba(251, 191, 36, 0.15); color: #D97706; } .status-badge.status-cancelled.data-v-88bf5328 { background: #F3F4F6; color: #9CA3AF; } .status-badge.status-closed.data-v-88bf5328 { background: rgba(239, 68, 68, 0.1); color: #DC2626; } /* 中间:订单号 + 价格 */ .order-middle.data-v-88bf5328 { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16rpx; } .order-info.data-v-88bf5328 { display: flex; flex-direction: column; gap: 4rpx; } .info-label.data-v-88bf5328 { font-size: 22rpx; color: #9CA3AF; } .order-no.data-v-88bf5328 { font-size: 24rpx; color: #6B7280; font-family: 'SF Mono', Monaco, Consolas, monospace; } .order-price.data-v-88bf5328 { font-size: 40rpx; font-weight: 700; color: #EF4444; } /* 底部:时间信息 */ .order-bottom.data-v-88bf5328 { display: flex; flex-direction: column; gap: 8rpx; } .time-row.data-v-88bf5328 { display: flex; align-items: center; gap: 12rpx; } .time-label.data-v-88bf5328 { font-size: 22rpx; color: #9CA3AF; min-width: 100rpx; } .time-value.data-v-88bf5328 { font-size: 24rpx; color: #6B7280; } .time-value.highlight.data-v-88bf5328 { color: #3B82F6; font-weight: 500; } /* 支付按钮 */ .order-action.data-v-88bf5328 { margin-top: 20rpx; display: flex; justify-content: flex-end; } .pay-btn.data-v-88bf5328 { background: linear-gradient(135deg, #6366F1, #8B5CF6); padding: 16rpx 36rpx; border-radius: 32rpx; box-shadow: 0 6rpx 20rpx rgba(99, 102, 241, 0.3); } .pay-btn text.data-v-88bf5328 { font-size: 26rpx; color: #FFFFFF; font-weight: 600; } .pay-btn.data-v-88bf5328:active { opacity: 0.9; transform: scale(0.98); } .bottom-safe-area.data-v-88bf5328 { height: 60rpx; }