style(result): 添加下载提示文字和更新样式
- 在结果页面添加下载提示文字,提供用户反馈 - 更新CSS样式,移除冗余z-index,优化视觉效果 - 增强用户体验,提升信息传达的清晰度
This commit is contained in:
parent
ad5735b6a5
commit
e0b0c6e533
|
|
@ -122,6 +122,16 @@ const SuccessComponent: React.FC<SuccessComponentProps> = ({ task }) => {
|
|||
return '观看广告下载';
|
||||
};
|
||||
|
||||
const getTipText = () => {
|
||||
if (adLoading) {
|
||||
return '正在加载广告...';
|
||||
}
|
||||
if (!adAvailable) {
|
||||
return '🎉 恭喜!无需观看广告即可免费下载';
|
||||
}
|
||||
return '观看完整广告后即可下载到相册';
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="result-page">
|
||||
{/* 毛玻璃背景 */}
|
||||
|
|
@ -148,6 +158,7 @@ const SuccessComponent: React.FC<SuccessComponentProps> = ({ task }) => {
|
|||
返回首页
|
||||
</View>
|
||||
</View>
|
||||
<View className="download-tip">{getTipText()}</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
inset: 0;
|
||||
background: linear-gradient(135deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 5%) 50%, rgb(0 0 0 / 10%) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 主要内容区域 */
|
||||
|
|
@ -348,3 +347,13 @@
|
|||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
/* 下载提示文字 */
|
||||
.download-tip {
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue