以下是一个简单的支付成功页面的HTML代码示例，包含常见的元素（订单信息、支付金额、返回按钮等）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>支付成功</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.success-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 400px;
text-align: center;
}
.success-icon {
color: #52c41a;
font-size: 60px;
margin-bottom: 20px;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.order-info {
text-align: left;
margin: 25px 0;
padding-top: 15px;
border-top: 1px solid #eee;
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.amount {
font-size: 24px;
color:#1890ff;
font-weight：bold；
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>
页面包含的核心要素：
视觉反馈
✅绿色大勾图标 + “支付成功”标题，明确传达状态。关键信息展示
- ⚡️订单金额（高亮显示）
- 📝订单编号（便于用户查询）
- 💳支付方式（微信/支付宝/银行卡等）
- 🕒支付时间
- ⚡️订单金额（高亮显示）
用户引导
👉「返回首页」按钮（或可增加「查看订单」的跳转链接）
扩展建议：
- 动态数据 ：实际应用中需通过后端接口填充订单数据（如
{{order_id}}）。
- 安全提示 ：可添加”谨防诈骗，平台不会索要验证码”等提醒。
- 倒计时跳转 ：用JavaScript实现5秒后自动返回首页。
需要进一步调整样式或功能可以告诉我！
内容由零声教学AI助手提供，问题来源于学员提问
![zpw@zpw-ThinkStation-P340:~$ socat -v UNIX-LISTEN:/tmp/dockerapi.sock UNIX-CONNECT:/var/run/docker.sock & docker -H unix:///tmp/dockerapi.sock ps
[1] 62533
2025/09/17 10:06:34 socat[62533] E connect(5, AF=1](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162216114425773.png)
