style: generate css

2025-09-12 18:25:39 +08:00
parent e6f83fa1ca
commit 44a382a551
5 changed files with 107 additions and 79 deletions
--- 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;
--- 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);
+  }
+}
--- a/src/pages/history/index.tsx
+++ b/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">
-                              <View className="thumbnail-progress-circle">
-                                <View 
-                                  className="thumbnail-progress-fill"
-                                  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 className="thumbnail-progress-overlay" />
+                            <View className="thumbnail-scan-light" />
+                            {/* 加载loading 转圈 */}
+                            <View className='thumbnail-loader' />
+                            <View className="thumbnail-scan-progress">{Math.round(progress)}%</View>
                          </View>
                        )}
                      </View>
--- 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%;
 }
--- 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;
 }