.order-list-container { width: 100%; min-height: 100vh; background-color: #f5f5f5; padding-top: 120rpx; /* 为固定导航栏留出空间 */ .z-paging-container { width: 100%; min-height: calc(100vh - 120rpx); } // z-paging内部列表项样式 :deep(.z-paging-content) { padding: 0 32rpx; .order-card { margin-bottom: 24rpx; &:last-child { margin-bottom: 0; } } } // 非虚拟列表内容区域样式 .order-list-content { padding: 0 32rpx; .order-card { margin-bottom: 24rpx; &:last-child { margin-bottom: 0; } } } } // 空状态样式(z-paging内置) :deep(.z-paging-empty-view) { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120rpx 60rpx; text-align: center; .z-paging-empty-view-img { width: 200rpx; height: 200rpx; margin-bottom: 40rpx; opacity: 0.6; } .z-paging-empty-view-text { font-size: 28rpx; color: #999999; margin-bottom: 40rpx; line-height: 1.5; } .z-paging-empty-view-reload-btn { padding: 20rpx 40rpx; background-color: #007aff; color: white; border: none; border-radius: 12rpx; font-size: 28rpx; transition: all 0.3s ease; &:active { background-color: #0056cc; transform: scale(0.95); } } } // 自定义空状态样式 .custom-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120rpx 60rpx; text-align: center; .empty-icon { width: 200rpx; height: 200rpx; margin-bottom: 40rpx; opacity: 0.6; } .empty-text { font-size: 28rpx; color: #999999; margin-bottom: 40rpx; line-height: 1.5; } .refresh-btn { padding: 20rpx 40rpx; background-color: #007aff; color: white; border: none; border-radius: 12rpx; font-size: 28rpx; transition: all 0.3s ease; &:active { background-color: #0056cc; transform: scale(0.95); } } } // z-paging加载更多样式 :deep(.z-paging-load-more) { padding: 40rpx 0; text-align: center; .z-paging-load-more-line { display: flex; align-items: center; justify-content: center; gap: 20rpx; .z-paging-load-more-loading { width: 32rpx; height: 32rpx; border: 4rpx solid #e5e5e5; border-top: 4rpx solid #007aff; border-radius: 50%; animation: spin 1s linear infinite; } .z-paging-load-more-text { font-size: 26rpx; color: #666666; } } .z-paging-load-more-no-more-line { .z-paging-load-more-text { font-size: 26rpx; color: #999999; } } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } // z-paging刷新器样式 :deep(.z-paging-refresh) { .z-paging-refresh-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20rpx; .z-paging-refresh-loading { width: 40rpx; height: 40rpx; border: 4rpx solid #e5e5e5; border-top: 4rpx solid #007aff; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 10rpx; } .z-paging-refresh-text { font-size: 26rpx; color: #666666; } } } /* 下拉刷新样式优化 */ :deep(.uni-scroll-view-refresher) { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); } /* 滚动条样式 */ .scroll-area::-webkit-scrollbar { width: 0; background: transparent; } /* 响应式设计 */ @media (max-width: 375px) { .order-list { padding: 8px 0; } .empty-state { padding: 60px 16px; min-height: 50vh; } .empty-icon { width: 100px; height: 100px; margin-bottom: 16px; } .empty-text { font-size: 15px; margin-bottom: 20px; } .refresh-btn { padding: 8px 20px; font-size: 13px; } } /* 暗色模式支持 */ @media (prefers-color-scheme: dark) { .order-list-container { background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%); } .empty-text { color: #cccccc; } .loading-text { color: #cccccc; } .no-more-text { color: #999999; } .loading-spinner { border-color: #404040; border-top-color: #409EFF; } } /* 列表项动画 */ .order-list view { animation: fadeInUp 0.3s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* 加载状态过渡 */ .global-loading { transition: opacity 0.3s ease; } .load-more { transition: all 0.3s ease; } /* 空状态动画 */ .empty-state { animation: fadeIn 0.5s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 刷新状态优化 */ .scroll-area[refresher-triggered="true"] { .order-list { transition: transform 0.3s ease; } }