style: update CSS and TSX for TemplateCard and history components

This commit is contained in:
iHeyTang 2025-09-12 19:17:55 +08:00
parent 89b6ff3fec
commit 884d7410c8
7 changed files with 32 additions and 37 deletions

View File

@ -122,6 +122,7 @@
justify-content: center;
align-items: center;
}
/* 水印 */
.watermark {
position: absolute;
@ -133,21 +134,23 @@
justify-content: center;
align-items: center;
}
.name-badge {
background: #0000004D;
background: #0000004d;
backdrop-filter: blur(5px);
color: #fff;
font-size: 24px;
font-weight: 500;
border-radius: 100px;
border: 1px solid #FFFFFF4D;
height: 30px;
border: 1px solid #ffffff4d;
width: fit-content;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 12px 16px;
text-align: center;
}
/* 单视频容器样式 */
.single-video-container {
position: relative;

View File

@ -101,12 +101,9 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
/>
{/* 模板名称悬浮 - 视频底部 */}
<View className="name-overlay">
<Text className="name-badge">
{template.name}
</Text>
<Text className="name-badge">{template.name}</Text>
</View>
<View className='watermark'>
<View className="watermark">
<Text className="watermark-text">AI生成</Text>
</View>
</View>
@ -161,7 +158,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
<View className="name-overlay">
<Text className="name-badge">{template.name}</Text>
</View>
<View className='watermark'>
<View className="watermark">
<Text className="watermark-text">AI生成</Text>
</View>
</View>

View File

@ -4,15 +4,18 @@
display: flex;
flex-direction: column;
}
.history-header {
padding: 32px 0;
}
.history-title {
font-size: 48px;
font-weight: 500;
color: #1D1F22;
color: #1d1f22;
padding: 0 32px;
}
.history-list {
height: 100vh;
padding: 0;
@ -60,14 +63,14 @@
.empty-icon-image {
width: 110px;
height:110px;
height: 110px;
display: block;
margin: 0 auto;
}
.empty-text {
font-size: 24px;
color: #B9B9B9;
color: #b9b9b9;
display: block;
margin-top: 32px;
}
@ -141,7 +144,7 @@
.item-title {
font-size: 28px;
font-weight: 600;
color: #1D1F22;
color: #1d1f22;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
@ -240,7 +243,7 @@
.item-time {
font-size: 22px;
color: #B9B9B9;
color: #b9b9b9;
font-weight: 400;
opacity: 0.7;
}
@ -291,12 +294,7 @@
position: absolute;
inset: 0;
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%
);
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;
}
@ -322,13 +320,13 @@
/* 缩略图加载转圈 */
.thumbnail-loader {
position: absolute;
top: calc(50% - 25px); /* 向上移动25px */
top: calc(50%); /* 向上移动25px */
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
border: 3px solid transparent;
border-top: 3px solid #FFFFFF;
border-top: 3px solid #ffffff;
border-radius: 50%;
z-index: 6;
animation: spin 1s linear infinite;
@ -338,16 +336,12 @@
/* 缩略图进度文字 */
.thumbnail-scan-progress {
font-size: 24px;
color: #FFFFFF;
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%);
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 */
top: calc(50% + 25px); /* 向下移动25px */
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;

View File

@ -158,7 +158,6 @@ export default function History() {
<View className="thumbnail-scan-light" />
{/* 加载loading 转圈 */}
<View className='thumbnail-loader' />
<View className="thumbnail-scan-progress">{Math.round(progress)}%</View>
</View>
)}
</View>

View File

@ -159,7 +159,10 @@ export default function Home() {
// 审核不通过
handleAuditFailure(auditResult);
}
} catch (error) {
} catch (error: any) {
if (error.errMsg.includes('chooseImage:fail cancel')) {
return;
}
// 统一错误处理
Taro.hideLoading();
Taro.showToast({

View File

@ -81,7 +81,6 @@ const GeneratingComponent: React.FC<GeneratingComponentProps> = ({ task }) => {
{/* 状态文本 */}
<View className="status-section">
<View className="status-title">
<Image className="status-icon-image" src="/assets/icons/funnel.png" />
<Text className="status-title-text">...</Text>
</View>
<View className="status-subtitle"></View>

View File

@ -229,15 +229,15 @@
animation: scan 2s ease-in-out infinite;
pointer-events: none;
}
/* 进度文字 */
.scan-progress {
font-size: 56px;
color: #FFFFFF;
font-weight: 700;
z-index: 6;
/* 文字阴影增强可读性 */
text-shadow:
0 2px 4px rgb(0 0 0 / 50%),
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;
@ -269,8 +269,8 @@
}
.status-icon-image {
width: 44px;
height: 44px;
width: 40px;
height: 40px;
margin-right: 8px;
}