.history { background-color: #f8f9fa; min-height: 100vh; } .history-header { display: flex; justify-content: space-between; align-items: center; padding: 40rpx 32rpx 32rpx; background: #fff; border-bottom: 2rpx solid #eee; } .history-title { font-size: 40rpx; font-weight: 600; color: #333; } .clear-btn { font-size: 32rpx; color: #007AFF; padding: 16rpx; cursor: pointer; } .history-list { height: calc(100vh - 320rpx); padding: 32rpx; } .empty-state { text-align: center; padding: 160rpx 40rpx; } .empty-icon { font-size: 120rpx; display: block; margin-bottom: 40rpx; } .empty-text { font-size: 36rpx; color: #333; display: block; margin-bottom: 16rpx; } .empty-desc { font-size: 28rpx; color: #666; display: block; } .history-item { background: #fff; border-radius: 24rpx; padding: 32rpx; margin-bottom: 24rpx; display: flex; align-items: center; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1); } .item-thumbnail { width: 100rpx; height: 100rpx; background: linear-gradient(135deg, #007AFF, #5AC8FA); border-radius: 16rpx; display: flex; align-items: center; justify-content: center; margin-right: 32rpx; flex-shrink: 0; } .thumbnail-icon { font-size: 40rpx; } .item-content { flex: 1; min-width: 0; } .item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; } .item-title { font-size: 32rpx; font-weight: 600; color: #333; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-status { font-size: 24rpx; font-weight: 500; padding: 8rpx 16rpx; border-radius: 20rpx; background: rgba(142, 142, 147, 0.1); margin-left: 24rpx; flex-shrink: 0; } .item-info { display: flex; justify-content: space-between; align-items: center; } .item-type { font-size: 24rpx; color: #666; background: rgba(0, 122, 255, 0.1); color: #007AFF; padding: 6rpx 16rpx; border-radius: 16rpx; font-size: 24rpx; } .item-time { font-size: 24rpx; color: #8E8E93; }