d7b9d6eb6a
- 统一调整 .error-detail、.transaction-detail 和 .order-detail 的布局和间距 - 增加 align-items: flex-start以优化垂直对齐- 将 margin-bottom 从15px 调整为 20px - 添加 gap 和 min-height以改善元素间距和最小高度 - 修改 .detail-label 的文本对齐方式并设置最小宽度 -为 .detail-value 添加文本对齐和自动换行属性 - 更新最后一个子元素的 padding-top 并保持边框样式一致
387 lines
11 KiB
HTML
387 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>支付成功</title>
|
|
<!-- 引入字体 -->
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600;700&family=SF+Pro+Text:wght@400;500;600&display=swap"
|
|
rel="stylesheet">
|
|
<!-- 引入图标库 -->
|
|
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/remixicon/4.6.0/remixicon.min.css">
|
|
<!-- 引入动画库 -->
|
|
<link rel="stylesheet" href="../static/css/animate.min.css">
|
|
<!-- 引入图标库 -->
|
|
<link rel="stylesheet" href="../static/css/index-anxin.css">
|
|
<style>
|
|
/* 全局样式和重置 */
|
|
:root {
|
|
--success-green: #34c759;
|
|
--success-light-green: rgba(52, 199, 89, 0.15);
|
|
--apple-white: #ffffff;
|
|
--apple-gray: #8e8e93;
|
|
--apple-light-gray: #f5f5f7;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background: var(--apple-white);
|
|
color: #1d1d1f;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
/* 防止滚动 */
|
|
}
|
|
|
|
/* 容器样式 */
|
|
.container {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 40px 30px;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 背景效果 */
|
|
.bg-shapes {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bg-shape {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(70px);
|
|
}
|
|
|
|
.bg-shape:nth-child(1) {
|
|
top: -10%;
|
|
left: -10%;
|
|
width: 500px;
|
|
height: 500px;
|
|
background: linear-gradient(to right, rgba(52, 199, 89, 0.2), rgba(52, 199, 89, 0));
|
|
animation: float 15s ease-in-out infinite;
|
|
}
|
|
|
|
.bg-shape:nth-child(2) {
|
|
bottom: -15%;
|
|
right: -10%;
|
|
width: 600px;
|
|
height: 600px;
|
|
background: linear-gradient(to left, rgba(52, 199, 89, 0.15), rgba(52, 199, 89, 0));
|
|
animation: float 20s ease-in-out infinite reverse;
|
|
}
|
|
|
|
.bg-shape:nth-child(3) {
|
|
top: 40%;
|
|
left: 60%;
|
|
width: 300px;
|
|
height: 300px;
|
|
background: linear-gradient(to top, rgba(52, 199, 89, 0.1), rgba(52, 199, 89, 0));
|
|
animation: float 18s ease-in-out infinite 2s;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(30px, 20px) rotate(5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
/* 玻璃态效果 */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/* 成功图标容器 */
|
|
.success-icon-container {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 auto 30px;
|
|
}
|
|
|
|
/* 成功图标 */
|
|
.success-icon {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: var(--success-green);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 50px;
|
|
box-shadow: 0 10px 25px rgba(52, 199, 89, 0.3);
|
|
animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
|
}
|
|
|
|
/* 镭射效果 */
|
|
.laser-effect {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 150px;
|
|
height: 150px;
|
|
background: radial-gradient(circle, rgba(52, 199, 89, 0.8) 0%, rgba(52, 199, 89, 0) 70%);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.laser-effect:nth-child(2) {
|
|
width: 180px;
|
|
height: 180px;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.laser-effect:nth-child(3) {
|
|
width: 210px;
|
|
height: 210px;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
/* 标题样式 */
|
|
h1 {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
color: #1d1d1f;
|
|
font-family: 'SF Pro Display', sans-serif;
|
|
animation: fadeInUp 0.8s ease forwards;
|
|
animation-delay: 0.3s;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 描述文本样式 */
|
|
p {
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
margin-bottom: 30px;
|
|
color: var(--apple-gray);
|
|
animation: fadeInUp 0.8s ease forwards;
|
|
animation-delay: 0.5s;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 交易信息卡片 */
|
|
.transaction-card {
|
|
padding: 25px;
|
|
margin-bottom: 25px;
|
|
text-align: left;
|
|
animation: fadeInUp 0.8s ease forwards;
|
|
animation-delay: 0.7s;
|
|
opacity: 0;
|
|
}
|
|
|
|
.transaction-detail {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 20px;
|
|
font-size: 15px;
|
|
gap: 16px;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.transaction-detail:last-child {
|
|
margin-bottom: 0;
|
|
padding-top: 20px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.detail-label {
|
|
color: var(--apple-gray);
|
|
flex-shrink: 0;
|
|
min-width: 80px;
|
|
text-align: left;
|
|
}
|
|
|
|
.detail-value {
|
|
font-weight: 500;
|
|
color: #1d1d1f;
|
|
text-align: left;
|
|
flex: 1;
|
|
word-break: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* 完成图标 */
|
|
.completed-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: var(--success-green);
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
color: white;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* 动画定义 */
|
|
@keyframes scaleIn {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: translate(-50%, -50%) scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(1.2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 订单编号样式 */
|
|
.order-id {
|
|
font-size: 14px;
|
|
color: var(--apple-gray);
|
|
margin-bottom: 20px;
|
|
word-break: break-all;
|
|
animation: fadeInUp 0.8s ease forwards;
|
|
animation-delay: 0.7s;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 安全提示 */
|
|
.security-note {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
font-size: 14px;
|
|
color: var(--apple-gray);
|
|
animation: fadeInUp 0.8s ease forwards;
|
|
animation-delay: 1.1s;
|
|
opacity: 0;
|
|
}
|
|
|
|
.security-note i {
|
|
margin-right: 6px;
|
|
font-size: 16px;
|
|
color: var(--success-green);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 背景效果 -->
|
|
<div class="bg-shapes">
|
|
<div class="bg-shape"></div>
|
|
<div class="bg-shape"></div>
|
|
<div class="bg-shape"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- 成功图标 -->
|
|
<div class="success-icon-container">
|
|
<div class="laser-effect"></div>
|
|
<div class="laser-effect"></div>
|
|
<div class="laser-effect"></div>
|
|
<div class="success-icon">
|
|
<i class="ri-check-fill"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 成功标题 -->
|
|
<h1>卡密已提交</h1>
|
|
|
|
<!-- 成功描述 -->
|
|
<p>您的卡密已提交完成，请耐心等待处理结果。感谢您的配合</p>
|
|
|
|
<!-- 订单编号 -->
|
|
<div class="order-id">
|
|
订单编号：{{.orderId}}
|
|
</div>
|
|
|
|
<!-- 交易信息卡片 -->
|
|
<div class="transaction-card glass">
|
|
<div class="transaction-detail">
|
|
<span class="detail-label">交易状态</span>
|
|
<span class="detail-value" style="color: var(--success-green); display: flex; align-items: center;">
|
|
<span class="completed-icon"><i class="ri-check-fill"></i></span>卡密已提交
|
|
</span>
|
|
</div>
|
|
<div class="transaction-detail">
|
|
<span class="detail-label">交易金额</span>
|
|
<span class="detail-value" style="font-size: 18px; color: #1d1d1f;">¥{{.amount}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 安全提示 -->
|
|
<div class="security-note">
|
|
<i class="ri-shield-check-line"></i>
|
|
<span>交易已加密并安全保障</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |