379 lines
6.6 KiB
CSS
379 lines
6.6 KiB
CSS
.history {
|
|
background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.history-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding: 40rpx 32rpx 32rpx;
|
|
background: #fff;
|
|
border-bottom: 2rpx solid #eee;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.history-title {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
letter-spacing: 0.5rpx;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.record-count {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.clear-btn {
|
|
font-size: 28rpx;
|
|
color: #007AFF;
|
|
background: rgba(0, 122, 255, 0.1);
|
|
padding: 16rpx 24rpx;
|
|
border-radius: 24rpx;
|
|
cursor: pointer;
|
|
border: 1rpx solid rgba(0, 122, 255, 0.2);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.clear-btn:active {
|
|
background: rgba(0, 122, 255, 0.2);
|
|
}
|
|
|
|
.history-list {
|
|
height: 100vh;
|
|
padding: 0;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.history-grid {
|
|
margin: 0 auto;
|
|
padding: 12rpx 16rpx;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.loading-state {
|
|
text-align: center;
|
|
padding: 120rpx 40rpx;
|
|
background: #fff;
|
|
border-radius: 32rpx;
|
|
margin: 40rpx 32rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
border: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 32rpx;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 120rpx 40rpx;
|
|
background: #fff;
|
|
border-radius: 32rpx;
|
|
margin: 40rpx 32rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
border: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 160rpx;
|
|
display: block;
|
|
margin-bottom: 32rpx;
|
|
opacity: 0.8;
|
|
filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 40rpx;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 16rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
display: block;
|
|
opacity: 0.8;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.history-item {
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
border: 1rpx solid #f0f0f0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.history-item:active {
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.item-thumbnail {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 20rpx;
|
|
margin-right: 32rpx;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.thumbnail-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.thumbnail-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
/* 不同状态的占位符背景 */
|
|
.thumbnail-placeholder {
|
|
background: linear-gradient(135deg, #007AFF, #5AC8FA);
|
|
}
|
|
|
|
/* 生成中状态 */
|
|
.thumbnail-placeholder.generating {
|
|
background: linear-gradient(135deg, #FF9500, #FFB84D);
|
|
}
|
|
|
|
/* 失败状态 */
|
|
.thumbnail-placeholder.failed {
|
|
background: linear-gradient(135deg, #FF3B30, #FF6B6B);
|
|
}
|
|
|
|
.thumbnail-icon {
|
|
font-size: 40rpx;
|
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
.item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #1a1a1a;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
line-height: 1.3;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.item-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-status {
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 24rpx;
|
|
flex-shrink: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 状态样式 - 更精确的选择器 */
|
|
.item-status {
|
|
position: relative;
|
|
}
|
|
|
|
.item-status::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -8rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 6rpx;
|
|
height: 6rpx;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
/* 生成中状态 */
|
|
.item-status[style*="color: rgb(255, 149, 0)"],
|
|
.item-status[style*="color: #FF9500"] {
|
|
background: linear-gradient(135deg, #FF9500 0%, #FFB84D 100%);
|
|
color: #fff !important;
|
|
box-shadow: 0 2rpx 8rpx rgba(255, 149, 0, 0.3);
|
|
}
|
|
|
|
.item-status[style*="color: rgb(255, 149, 0)"]::before,
|
|
.item-status[style*="color: #FF9500"]::before {
|
|
background: #fff;
|
|
}
|
|
|
|
/* 已完成状态 */
|
|
.item-status[style*="color: rgb(52, 199, 89)"],
|
|
.item-status[style*="color: #34C759"] {
|
|
background: linear-gradient(135deg, #34C759 0%, #4CD964 100%);
|
|
color: #fff !important;
|
|
box-shadow: 0 2rpx 8rpx rgba(52, 199, 89, 0.3);
|
|
}
|
|
|
|
.item-status[style*="color: rgb(52, 199, 89)"]::before,
|
|
.item-status[style*="color: #34C759"]::before {
|
|
background: #fff;
|
|
}
|
|
|
|
/* 失败状态 */
|
|
.item-status[style*="color: rgb(255, 59, 48)"],
|
|
.item-status[style*="color: #FF3B30"] {
|
|
background: linear-gradient(135deg, #FF3B30 0%, #FF6B6B 100%);
|
|
color: #fff !important;
|
|
box-shadow: 0 2rpx 8rpx rgba(255, 59, 48, 0.3);
|
|
}
|
|
|
|
.item-status[style*="color: rgb(255, 59, 48)"]::before,
|
|
.item-status[style*="color: #FF3B30"]::before {
|
|
background: #fff;
|
|
}
|
|
|
|
|
|
.item-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.item-type {
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
|
|
color: #fff;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.2);
|
|
letter-spacing: 0.5rpx;
|
|
}
|
|
|
|
.item-time {
|
|
font-size: 24rpx;
|
|
color: #8E8E93;
|
|
font-weight: 500;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
/* 加载指示器 */
|
|
.loading-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
}
|
|
|
|
.loading-dot {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: #FF9500;
|
|
font-size: 0;
|
|
}
|
|
|
|
/* 操作提示 */
|
|
.action-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.hint-text {
|
|
font-size: 20rpx;
|
|
color: #007AFF;
|
|
background: rgba(0, 122, 255, 0.1);
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 16rpx;
|
|
font-weight: 500;
|
|
letter-spacing: 0.5rpx;
|
|
}
|
|
|
|
/* 改进空状态样式 */
|
|
.empty-desc {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
display: block;
|
|
opacity: 0.8;
|
|
line-height: 1.6;
|
|
white-space: pre-line;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 响应式优化 */
|
|
@media (max-width: 750px) {
|
|
.history-title {
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.item-thumbnail {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.thumbnail-icon {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.history-item {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 100rpx 32rpx;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 140rpx;
|
|
}
|
|
} |