style: update CSS and TSX for TemplateCard and history components
This commit is contained in:
parent
89b6ff3fec
commit
884d7410c8
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue