以下是一个简单的支付成功页面的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助手提供,问题来源于学员提问