.orders-page { padding: 0 32rpx calc(220rpx + env(safe-area-inset-bottom)); min-height: 100vh; box-sizing: border-box; } /* 页面主标题 */ .orders-page .page-header { display: flex; align-items: flex-end; padding-top: 0; padding-bottom: 32rpx; margin: 0; } .orders-page .page-title { display: block; font-size: 56rpx; font-weight: 800; line-height: 1.15; color: var(--text-primary); letter-spacing: 0; } /* 状态筛选 chip */ .orders-page .status-tabs { margin: 8rpx 0 32rpx; } .orders-page .tabs-scroll { white-space: nowrap; } .orders-page .tab-item { display: inline-flex; align-items: center; justify-content: center; height: 64rpx; padding: 0 32rpx; margin-right: 16rpx; border-radius: 999rpx; background: var(--bg-card); border: 1rpx solid var(--border); color: var(--text-secondary); font-size: 26rpx; font-weight: 500; } .orders-page .tab-item.active { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--bg-page); font-weight: 600; } .orders-page .tab-label { color: inherit; } .orders-page .tab-underline { display: none; } /* 订单列表 */ .orders-page .orders-list { padding: 0 0 8rpx; } .orders-page .order-card { margin-bottom: 24rpx; padding: 28rpx; border-radius: 24rpx; box-shadow: var(--shadow-card); transition: transform 0.2s ease; } .orders-page .order-card:active { transform: scale(0.98); } .orders-page .order-header { display: flex; align-items: center; justify-content: space-between; gap: 24rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid var(--border); margin-bottom: 24rpx; } .orders-page .order-date { display: block; min-width: 0; font-size: 24rpx; color: var(--text-secondary); } .orders-page .order-card .badge { display: inline-flex; align-items: center; justify-content: center; height: 40rpx; padding: 0 16rpx; border-radius: 999rpx; font-size: 22rpx; font-weight: 600; line-height: 1; flex-shrink: 0; } .orders-page .order-body { display: flex; align-items: center; gap: 24rpx; margin-bottom: 24rpx; } .orders-page .order-icon-wrapper { width: 96rpx; height: 96rpx; border-radius: 24rpx; background: var(--bg-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .orders-page .order-icon-img { width: 100%; height: 100%; } .orders-page .order-info { flex: 1; min-width: 0; } .orders-page .order-product { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 30rpx; font-weight: 700; line-height: 1.3; color: var(--text-primary); margin-bottom: 8rpx; } .orders-page .order-sku { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24rpx; line-height: 1.4; color: var(--text-secondary); margin-bottom: 6rpx; } .orders-page .order-meta { display: block; font-size: 22rpx; line-height: 1.4; color: var(--text-muted); font-variant-numeric: tabular-nums; } .orders-page .order-countdown { display: block; margin-top: 8rpx; font-size: 22rpx; line-height: 1.4; color: var(--accent-primary); font-variant-numeric: tabular-nums; } .orders-page .order-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16rpx; padding-top: 20rpx; border-top: 1rpx solid var(--border); } .orders-page .order-price-bar { display: flex; align-items: baseline; flex-shrink: 0; } .orders-page .price-label { font-size: 24rpx; color: var(--text-secondary); margin-right: 8rpx; } .orders-page .price-value { font-size: 34rpx; font-weight: 800; line-height: 1.2; color: var(--accent-primary); font-variant-numeric: tabular-nums; } .orders-page .order-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12rpx; } .orders-page .order-btn { display: flex; align-items: center; justify-content: center; height: 64rpx; padding: 0 28rpx; font-size: 26rpx; font-weight: 600; line-height: 1.2; border-radius: 999rpx; } /* 空状态 */ .orders-page .empty-state { display: flex; flex-direction: column; align-items: center; padding: 80rpx 32rpx; text-align: center; background: var(--bg-muted); border-radius: 24rpx; } .orders-page .empty-icon-img { width: 88rpx; height: 88rpx; margin-bottom: 24rpx; } .orders-page .empty-text { display: block; font-size: 32rpx; font-weight: 700; color: var(--text-primary); margin-bottom: 12rpx; } .orders-page .empty-sub { display: block; font-size: 26rpx; color: var(--text-secondary); margin-bottom: 32rpx; } .orders-page .empty-state .btn-primary { display: flex; align-items: center; justify-content: center; min-width: 280rpx; height: 88rpx; padding: 0 48rpx; border-radius: 999rpx; font-size: 30rpx; font-weight: 600; }