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 '观看广告下载';
|
return '观看广告下载';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getTipText = () => {
|
||||||
|
if (adLoading) {
|
||||||
|
return '正在加载广告...';
|
||||||
|
}
|
||||||
|
if (!adAvailable) {
|
||||||
|
return '🎉 恭喜!无需观看广告即可免费下载';
|
||||||
|
}
|
||||||
|
return '观看完整广告后即可下载到相册';
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="result-page">
|
<View className="result-page">
|
||||||
{/* 毛玻璃背景 */}
|
{/* 毛玻璃背景 */}
|
||||||
|
|
@ -148,6 +158,7 @@ const SuccessComponent: React.FC<SuccessComponentProps> = ({ task }) => {
|
||||||
返回首页
|
返回首页
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
<View className="download-tip">{getTipText()}</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,6 @@
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: linear-gradient(135deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 5%) 50%, rgb(0 0 0 / 10%) 100%);
|
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);
|
backdrop-filter: blur(20px);
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 主要内容区域 */
|
/* 主要内容区域 */
|
||||||
|
|
@ -348,3 +347,13 @@
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 下载提示文字 */
|
||||||
|
.download-tip {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #666;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 8px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue