From 44a382a551c8998a17db5f1cacd9994cb8984aff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8F=9C=E8=8F=9C=E9=85=B1?= Date: Fri, 12 Sep 2025 18:25:39 +0800 Subject: [PATCH] style: generate css --- src/components/TemplateCard/index.css | 2 +- src/pages/history/index.css | 118 +++++++++++++++++--------- src/pages/history/index.tsx | 21 ++--- src/pages/home/index.css | 2 +- src/pages/result/index.css | 43 +++++----- 5 files changed, 107 insertions(+), 79 deletions(-) diff --git a/src/components/TemplateCard/index.css b/src/components/TemplateCard/index.css index ff7b0ef..a84feb2 100644 --- a/src/components/TemplateCard/index.css +++ b/src/components/TemplateCard/index.css @@ -113,7 +113,7 @@ /* 模板名称悬浮 - 图片底部 */ .name-overlay { position: absolute; - bottom: 12px; + bottom: 16px; left: 24px; right: 24px; z-index: 4; diff --git a/src/pages/history/index.css b/src/pages/history/index.css index 0e2bef3..ff28a4c 100644 --- a/src/pages/history/index.css +++ b/src/pages/history/index.css @@ -286,59 +286,71 @@ pointer-events: none; } -.thumbnail-glassmorphism { +/* 缩略图进度遮罩层 */ +.thumbnail-progress-overlay { 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); + border-radius: 12px; + background: linear-gradient( + 135deg, + rgb(0 0 0 / 20%) 0%, + rgb(0 0 0 / 10%) 50%, + rgb(0 0 0 / 30%) 100% + ); + z-index: 4; + pointer-events: none; } -.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 { +/* 缩略图光扫描动画 */ +.thumbnail-scan-light { 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); + border-radius: 12px; + background: linear-gradient( + 90deg, + transparent 0%, + rgb(255 255 255 / 8%) 40%, + rgb(255 255 255 / 15%) 50%, + rgb(255 255 255 / 8%) 60%, + transparent 100% + ); + z-index: 5; + animation: thumbnail-scan 2s ease-in-out infinite; + pointer-events: none; } -.thumbnail-progress-inner { - width: 90px; - height: 90px; +/* 缩略图加载转圈 */ +.thumbnail-loader { + position: absolute; + top: calc(50% - 25px); /* 向上移动25px */ + left: 50%; + transform: translate(-50%, -50%); + width: 32px; + height: 32px; + border: 3px solid transparent; + border-top: 3px solid #FFFFFF; border-radius: 50%; - background: transparent; - display: flex; - align-items: center; - justify-content: center; - position: relative; - z-index: 2; + z-index: 6; + animation: spin 1s linear infinite; + pointer-events: none; } -.thumbnail-progress-text { - font-size: 28px; - color: #ff9500; - text-shadow: 0 1px 2px rgb(0 0 0 / 20%); +/* 缩略图进度文字 */ +.thumbnail-scan-progress { + font-size: 24px; + color: #FFFFFF; + font-weight: 700; + z-index: 7; + /* 文字阴影增强可读性 */ + text-shadow: + 0 2px 4px rgb(0 0 0 / 50%), + 0 0 8px rgb(0 0 0 / 30%), + 0 0 16px rgb(0 0 0 / 20%); + position: absolute; + top: calc(50% + 25px); /* 向下移动25px */ + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; } /* 动画效果 */ @@ -364,3 +376,25 @@ background-position: calc(200px + 100%) 0; } } + +/* 缩略图扫描动画 */ +@keyframes thumbnail-scan { + 0% { + transform: translateX(-100%); + } + + 100% { + transform: translateX(100%); + } +} + +/* 转圈动画 */ +@keyframes spin { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } +} diff --git a/src/pages/history/index.tsx b/src/pages/history/index.tsx index c7fb572..55fa8c4 100644 --- a/src/pages/history/index.tsx +++ b/src/pages/history/index.tsx @@ -151,23 +151,14 @@ export default function History() { ) : ( - {/* 生成中状态的缩略图毛玻璃蒙版 */} + {/* 生成中状态的扫描效果 */} {isGenerating && ( - - - - - - {Math.round(progress)}% - - - + + + {/* 加载loading 转圈 */} + + {Math.round(progress)}% )} diff --git a/src/pages/home/index.css b/src/pages/home/index.css index bc250a0..85f35be 100644 --- a/src/pages/home/index.css +++ b/src/pages/home/index.css @@ -43,6 +43,6 @@ gap: 14px; max-width: 100%; margin: 0 auto; - padding: 8px 28px; + padding: 14px 28px; min-height: 100%; } diff --git a/src/pages/result/index.css b/src/pages/result/index.css index 787bbf9..2cba1ed 100644 --- a/src/pages/result/index.css +++ b/src/pages/result/index.css @@ -30,19 +30,19 @@ display: flex; align-items: center; justify-content: center; - padding: 20px 16px; + padding: 20px 44px; position: relative; z-index: 2; } /* 媒体容器 - 自适应比例 */ .result-container { - width: 90%; - max-height: 70vh; + width: 100%; + max-height: 60vh; display: flex; align-items: center; justify-content: center; - border-radius: 16px; + border-radius: 32px; overflow: hidden; position: relative; } @@ -50,34 +50,37 @@ .result-image { width: 100%; height: auto; - max-height: 70vh; - border-radius: 16px; + max-height: 60vh; + border-radius: 32px; + object-fit: cover; } .result-video { width: 100%; - height: 70vh; + height: 60vh; object-fit: contain; - border-radius: 16px; + border-radius: 32px; } /* 底部操作区域 */ .result-actions { - padding: 20px 16px 40px; + padding: 20px 40px 40px; z-index: 10; } .action-buttons { display: flex; + align-items: center; + justify-content: center; gap: 24px; - margin-bottom: 32px; + margin-bottom: 64px; } /* 下载按钮 - 大按钮 */ .download-btn { - flex: 2; + width: 480px; height: 80px; - background: #1d1f22; + background: #1D1F22; border-radius: 28px; display: flex; align-items: center; @@ -143,10 +146,10 @@ .progress-fill { position: absolute; - inset: -4px; - border-radius: 24px; - background: conic-gradient(#ff9500 0deg, #ff9500 0deg, transparent 0deg, transparent 360deg); - padding: 4px; + inset: -10px; + border-radius: 35px; + background: conic-gradient(#FFCF5F 0deg, #FFCF5F 0deg, transparent 0deg, transparent 360deg); + padding: 10px; z-index: 1; } @@ -261,7 +264,7 @@ /* 状态区域 */ .status-section { text-align: center; - margin-bottom: 80px; + margin-bottom: 210px; } .status-icon-image { @@ -291,8 +294,8 @@ } .later-btn { - width: 320px; - height: 80px; + width: 480px; + height: 96px; background: #1D1F22; border-radius: 28px; display: flex; @@ -317,7 +320,7 @@ } .tips-text { - font-size: 16px; + font-size: 22px; color: #919191; }