style: generate css

src/components/TemplateCard/index.css

@@ -113,7 +113,7 @@
 /* 模板名称悬浮 - 图片底部 */
 .name-overlay {
   position: absolute;
-  bottom: 12px;
+  bottom: 16px;
   left: 24px;
   right: 24px;
   z-index: 4;

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%);
+  border-radius: 12px;
-  backdrop-filter: blur(6px);
+  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;
+.thumbnail-scan-light {
-  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%;
+  border-radius: 12px;
-  background: conic-gradient(#ff9500 0deg, transparent 0deg);
+  background: linear-gradient(
-  transition: all 0.3s ease;
+    90deg,
-  mask: radial-gradient(circle at center, transparent 42px, black 45px);
+    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;
+.thumbnail-loader {
-  height: 90px;
+  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;
+  z-index: 6;
-  display: flex;
+  animation: spin 1s linear infinite;
-  align-items: center;
+  pointer-events: none;
-  justify-content: center;
-  position: relative;
-  z-index: 2;
 }
 
-.thumbnail-progress-text {
+/* 缩略图进度文字 */
-  font-size: 28px;
+.thumbnail-scan-progress {
-  color: #ff9500;
+  font-size: 24px;
-  text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
+  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);
+  }
+}

src/pages/history/index.tsx

@@ -151,23 +151,14 @@ export default function History() {
                     ) : (
                       <View className={`thumbnail-placeholder ${record.status}`}>
                         <Image className="thumbnail-image" src={record.inputImageUrl} mode="aspectFill" />
-                        {/* 生成中状态的缩略图毛玻璃蒙版 */}
+                        {/* 生成中状态的扫描效果 */}
                         {isGenerating && (
                           <View className="thumbnail-overlay">
-                            <View className="thumbnail-glassmorphism" />
+                            <View className="thumbnail-progress-overlay" />
-                            <View className="thumbnail-progress">
+                            <View className="thumbnail-scan-light" />
-                              <View className="thumbnail-progress-circle">
+                            {/* 加载loading 转圈 */}
-                                <View 
+                            <View className='thumbnail-loader' />
-                                  className="thumbnail-progress-fill"
+                            <View className="thumbnail-scan-progress">{Math.round(progress)}%</View>
-                                  style={{
-                                    background: `conic-gradient(#ff9500 ${progress * 3.6}deg, transparent 0deg)`,
-                                  }}
-                                />
-                                <View className="thumbnail-progress-inner">
-                                  <Text className="thumbnail-progress-text">{Math.round(progress)}%</Text>
-                                </View>
-                              </View>
-                            </View>
                           </View>
                         )}
                       </View>

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%;
 }

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%;
+  width: 100%;
-  max-height: 70vh;
+  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;
+  max-height: 60vh;
-  border-radius: 16px;
+  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;
+  inset: -10px;
-  border-radius: 24px;
+  border-radius: 35px;
-  background: conic-gradient(#ff9500 0deg, #ff9500 0deg, transparent 0deg, transparent 360deg);
+  background: conic-gradient(#FFCF5F 0deg, #FFCF5F 0deg, transparent 0deg, transparent 360deg);
-  padding: 4px;
+  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;
+  width: 480px;
-  height: 80px;
+  height: 96px;
   background: #1D1F22;
   border-radius: 28px;
   display: flex;
@@ -317,7 +320,7 @@
 }
 
 .tips-text {
-  font-size: 16px;
+  font-size: 22px;
   color: #919191;
 }