refactor: 移除下载部分组件及样式,优化项目结构
- 删除DownloadSection组件及其相关CSS,简化代码结构 - 在历史页面中添加生成中任务的进度计算和显示功能 - 更新历史页面样式,增强用户体验和视觉效果 - 添加缩略图毛玻璃蒙版和进度指示器,提升信息传达的清晰度
This commit is contained in:
@@ -274,3 +274,92 @@
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 缩略图毛玻璃蒙版 */
|
||||
.thumbnail-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.thumbnail-glassmorphism {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgb(255 255 255 / 80%) 0%, rgb(255 255 255 / 70%) 50%, rgb(255 255 255 / 85%) 100%);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.thumbnail-progress {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.thumbnail-progress-circle {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.thumbnail-progress-fill {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(#ff9500 0deg, transparent 0deg);
|
||||
transition: all 0.3s ease;
|
||||
mask: radial-gradient(circle at center, transparent 42px, black 45px);
|
||||
}
|
||||
|
||||
.thumbnail-progress-inner {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.thumbnail-progress-text {
|
||||
font-size: 28px;
|
||||
color: #ff9500;
|
||||
text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user