ZBLOG

生成一个支付成功的页面

以下是一个简单的支付成功页面的HTML代码示例,包含常见的元素(订单信息、支付金额、返回按钮等):

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>支付成功</title>
  7. <style>
  8. body {
  9. font-family: 'Arial', sans-serif;
  10. background-color: #f5f5f5;
  11. display: flex;
  12. justify-content: center;
  13. align-items: center;
  14. height: 100vh;
  15. margin: 0;
  16. }
  17. .success-container {
  18. background-color: white;
  19. border-radius: 10px;
  20. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  21. padding: 30px;
  22. width: 400px;
  23. text-align: center;
  24. }
  25. .success-icon {
  26. color: #52c41a;
  27. font-size: 60px;
  28. margin-bottom: 20px;
  29. }
  30. h1 {
  31. color: #333;
  32. margin-bottom: 20px;
  33. }
  34. .order-info {
  35. text-align: left;
  36. margin: 25px 0;
  37. padding-top: 15px;
  38. border-top: 1px solid #eee;
  39. }
  40. .info-row {
  41. display: flex;
  42. justify-content: space-between;
  43. margin-bottom: 10px;
  44. }
  45. .amount {
  46. font-size: 24px;
  47. color:#1890ff;
  48. font-weight:bold;
  49. margin:15 px 0;}。btn - return {background - color:#1890 ff;color:white;border:none;padding:10 px 20 px;border - radius:4 px;cursor:pointer;font - size:16 px;transition:background - color 3s ;}。btn - return:hover {background - color:#40 a9 ff ;}</ style > </ head > < body > < div class = "success-container"> < div class = "success-icon">✓</ div > < h1 >支付成功!</ h1 > < p >感谢您的购买,我们会尽快处理您的订单</ p > < div class = "amount">¥128.00</ div > < div class = "order-info"> < div class = "info-row">< span>订单编号:< /span>< span>202311258796< /span></ div > < div class = "info-row">< span>支付方式:< /span>< span>微信支付< /span></ div > <div class="info-row"><span>支付时间:</span><span>2023-11-25 14 :30 :45 </ span></div></div><buttonclass="btn-return"onclick="window.location.href='/'">返回首页</button></div></body></html>

页面包含的核心要素

  1. 视觉反馈
    ✅绿色大勾图标 + “支付成功”标题,明确传达状态。

  2. 关键信息展示

    • ⚡️订单金额(高亮显示)
    • 📝订单编号(便于用户查询)
    • 💳支付方式(微信/支付宝/银行卡等)
    • 🕒支付时间
  3. 用户引导
    👉「返回首页」按钮(或可增加「查看订单」的跳转链接)

扩展建议

  • 动态数据 :实际应用中需通过后端接口填充订单数据(如{{order_id}})。
  • 安全提示 :可添加”谨防诈骗,平台不会索要验证码”等提醒。
  • 倒计时跳转 :用JavaScript实现5秒后自动返回首页。

需要进一步调整样式或功能可以告诉我!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=23423

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?