| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- .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;
- }
|