553027b9cf
- 添加新的订单确认页面模板 (order_confirm.html) - 启用 remixicon 图标库的样式引用 - 将成功图标从 ri-check-line 更新为 ri-check-double-fill- 添加 CLAUDE.md 开发指南文件 - 添加 Claude Code 本地设置文件
441 lines
12 KiB
HTML
441 lines
12 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="../static/css/remixicon.min.css">
|
||
<!-- 引入动画库 -->
|
||
<link rel="stylesheet" href="../static/css/animate.min.css">
|
||
<!-- 引入图标库 -->
|
||
<link rel="stylesheet" href="../static/css/index-anxin.css">
|
||
<style>
|
||
/* 全局样式和重置 */
|
||
:root {
|
||
--primary-blue: #007aff;
|
||
--primary-light-blue: rgba(0, 122, 255, 0.15);
|
||
--apple-white: #ffffff;
|
||
--apple-gray: #8e8e93;
|
||
--apple-light-gray: #f5f5f7;
|
||
--border-color: #e5e5ea;
|
||
}
|
||
|
||
* {
|
||
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(0, 122, 255, 0.2), rgba(0, 122, 255, 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(0, 122, 255, 0.15), rgba(0, 122, 255, 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(0, 122, 255, 0.1), rgba(0, 122, 255, 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;
|
||
}
|
||
|
||
/* 确认图标容器 */
|
||
.confirm-icon-container {
|
||
position: relative;
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: 0 auto 30px;
|
||
}
|
||
|
||
/* 确认图标 */
|
||
.confirm-icon {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100px;
|
||
height: 100px;
|
||
background: var(--primary-blue);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: white;
|
||
font-size: 40px;
|
||
box-shadow: 0 10px 25px rgba(0, 122, 255, 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(0, 122, 255, 0.8) 0%, rgba(0, 122, 255, 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;
|
||
}
|
||
|
||
/* 订单信息卡片 */
|
||
.order-card {
|
||
padding: 25px;
|
||
margin-bottom: 25px;
|
||
text-align: left;
|
||
animation: fadeInUp 0.8s ease forwards;
|
||
animation-delay: 0.7s;
|
||
opacity: 0;
|
||
}
|
||
|
||
.order-detail {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.order-detail:last-child {
|
||
margin-bottom: 0;
|
||
padding-top: 15px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.detail-label {
|
||
color: var(--apple-gray);
|
||
}
|
||
|
||
.detail-value {
|
||
font-weight: 500;
|
||
color: #1d1d1f;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.btn-container {
|
||
animation: fadeInUp 0.8s ease forwards;
|
||
animation-delay: 0.9s;
|
||
opacity: 0;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
padding: 15px;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
margin-bottom: 15px;
|
||
font-family: 'SF Pro Text', sans-serif;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--primary-blue);
|
||
color: white;
|
||
box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #0051d5;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: var(--primary-blue);
|
||
border: 2px solid var(--primary-blue);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--primary-light-blue);
|
||
}
|
||
|
||
/* 动画定义 */
|
||
@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-top: 20px;
|
||
animation: fadeInUp 0.8s ease forwards;
|
||
animation-delay: 1.1s;
|
||
opacity: 0;
|
||
}
|
||
|
||
/* 状态标签 */
|
||
.status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
|
||
/* 旋转动画 */
|
||
.animate-spin {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.status-pending {
|
||
background: rgba(255, 149, 0, 0.15);
|
||
color: #ff9500;
|
||
}
|
||
|
||
.status-completed {
|
||
background: rgba(52, 199, 89, 0.15);
|
||
color: #34c759;
|
||
}
|
||
|
||
.status-processing {
|
||
background: rgba(0, 122, 255, 0.15);
|
||
color: #007aff;
|
||
}
|
||
</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="confirm-icon-container">
|
||
<div class="laser-effect"></div>
|
||
<div class="laser-effect"></div>
|
||
<div class="laser-effect"></div>
|
||
<div class="confirm-icon">
|
||
<i class="ri-loader-4-line animate-spin"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 确认标题 -->
|
||
<h1>订单确认</h1>
|
||
|
||
<!-- 确认描述 -->
|
||
<p>请稍候，我们正在确认您的订单。完成后我们将通知您。</p>
|
||
|
||
<!-- 订单信息卡片 -->
|
||
<div class="order-card glass">
|
||
<div class="order-detail">
|
||
<span class="detail-label">订单编号</span>
|
||
<span class="detail-value">{{.orderId}}</span>
|
||
</div>
|
||
<div class="order-detail">
|
||
<span class="detail-label">订单金额</span>
|
||
<span class="detail-value" style="font-size: 18px; color: var(--primary-blue);">¥{{.amount}}</span>
|
||
</div>
|
||
<div class="order-detail">
|
||
<span class="detail-label">下单时间</span>
|
||
<span class="detail-value">{{.orderTime}}</span>
|
||
</div>
|
||
<div class="order-detail">
|
||
<span class="detail-label">订单状态</span>
|
||
<span class="detail-value">
|
||
<span class="status-badge status-processing">处理中</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// 模拟订单处理完成后的跳转
|
||
setTimeout(() => {
|
||
// 这里可以根据实际情况跳转到不同页面
|
||
// 例如：window.location.href = '/order-completed/{{.orderId}}';
|
||
// 或者跳转到成功页面
|
||
console.log('订单处理完成，准备跳转...');
|
||
}, 5000); // 5秒后模拟处理完成
|
||
|
||
// 监听订单状态更新（可以通过WebSocket或轮询实现）
|
||
function checkOrderStatus() {
|
||
// 这里可以添加轮询检查订单状态的逻辑
|
||
// 当状态变为完成时，自动跳转到成功页面
|
||
}
|
||
|
||
// 每3秒检查一次订单状态
|
||
setInterval(checkOrderStatus, 3000);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |