Files
zt-closet-wxmini-frontend/stitch_ai_ui/12/code.html
T
2026-09-11 01:45:04 +08:00

548 lines
30 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第12屏 订单(全状态画板)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600;700&family=SF+Pro+Text:wght@400;500;600&display=swap');
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
background-color: #0d1117;
color: #1c1c1e;
margin: 0;
padding: 40px 24px;
-webkit-font-smoothing: antialiased;
}
.mono-num {
font-family: -apple-system, "SF Pro Display", "SF Pro Text", monospace;
font-variant-numeric: tabular-nums;
}
.device-shell {
width: 375px;
height: 812px;
border-radius: 44px;
box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45), 0 0 0 10px #1c1c1e, 0 0 0 12px #2c2c2e;
position: relative;
overflow: hidden;
background: #F2F2F7;
flex-shrink: 0;
}
.capsule-pill {
border: 0.5px solid rgba(0, 0, 0, 0.18);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
}
.hairline-b {
border-bottom: 0.5px solid #E5E5EA;
}
.hairline-t {
border-top: 0.5px solid #E5E5EA;
}
.hairline-all {
border: 0.5px solid #E5E5EA;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.safe-bottom {
padding-bottom: 34px;
}
</style>
</head>
<body class="flex flex-col items-center">
<!-- 顶部设计规范标头 -->
<header class="w-full max-w-[1580px] mb-8 bg-[#161b22] border border-[#30363d] rounded-2xl p-6 text-white shadow-xl">
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center space-x-3">
<span class="w-3.5 h-3.5 rounded-full bg-[#007AFF] inline-block ring-4 ring-[#007AFF]/20"></span>
<h1 class="text-xl font-semibold tracking-tight text-white">第 12 屏 | 我的订单(全状态高保真画板)</h1>
<span class="bg-[#007AFF]/20 text-[#007AFF] text-xs font-semibold px-2.5 py-1 rounded-full border border-[#007AFF]/30">微信小程序二级页 · 375 × 812 pt</span>
</div>
<div class="flex items-center gap-4 text-xs text-gray-400 font-mono">
<span class="flex items-center gap-1.5"><i class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></i> 警示橙 #FF9500 (待支付)</span>
<span class="flex items-center gap-1.5"><i class="w-2.5 h-2.5 rounded-full bg-[#34C759]"></i> 成功绿 #34C759 (已支付)</span>
<span class="flex items-center gap-1.5"><i class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></i> 系统蓝 #007AFF (已退款)</span>
<span class="flex items-center gap-1.5"><i class="w-2.5 h-2.5 rounded-full bg-[#8E8E93]"></i> 系统灰 #8E8E93 (已过期/取消)</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-[#30363d]/70 text-xs text-gray-300 flex flex-wrap gap-x-8 gap-y-2">
<div class="flex items-center gap-2"><i class="fa-solid fa-check text-green-400"></i> SF Symbols线性图标体系(订单:doc.text)</div>
<div class="flex items-center gap-2"><i class="fa-solid fa-check text-green-400"></i> 金额展示等宽数字「¥ + 两位小数」</div>
<div class="flex items-center gap-2"><i class="fa-solid fa-check text-green-400"></i> 6种订单全状态(待支付、已支付、已取消、已过期、已退款、退款中)</div>
<div class="flex items-center gap-2"><i class="fa-solid fa-check text-green-400"></i> 完整映射:主列表 + 微信支付半屏 + 申请退款半屏 + 优雅空态</div>
</div>
</header>
<!-- 4联画板展示区 -->
<main class="w-full max-w-[1580px] flex flex-wrap justify-center gap-8 items-start">
<!-- 画板 1: 订单列表主页(包含各种状态与交互按钮) -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
<span class="text-sm font-semibold text-gray-300">状态 1 · 订单列表主页(多态混排)</span>
</div>
<div class="device-shell flex flex-col justify-between">
<!-- 顶部固定区域:状态栏 + 原生导航栏 + 筛选标签 -->
<div class="bg-white/95 backdrop-blur-md z-20 hairline-b shrink-0">
<!-- 状态栏 -->
<div class="h-11 px-6 flex justify-between items-end pb-1.5 select-none">
<span class="text-[14px] font-semibold tracking-tight text-black">9:41</span>
<div class="flex items-center space-x-1.5 text-black text-[12px]">
<i class="fa-solid fa-signal text-[11px]"></i>
<span class="text-[10px] font-bold">5G</span>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 原生导航条 (高度 44pt) -->
<div class="h-11 px-4 flex items-center justify-between relative">
<div class="flex items-center text-[#007AFF] text-[16px] active:opacity-60 cursor-pointer">
<i class="fa-solid fa-chevron-left text-[15px] mr-1"></i>
<span class="text-[15px]">我的</span>
</div>
<div class="absolute left-1/2 -translate-x-1/2 font-semibold text-[17px] text-black tracking-tight">
我的订单
</div>
<!-- 右上角微信小程序胶囊 -->
<div class="capsule-pill w-[87px] h-[32px] rounded-full flex items-center justify-evenly px-1">
<div class="w-4 h-4 flex items-center justify-center cursor-pointer">
<span class="w-1 h-1 rounded-full bg-black"></span>
<span class="w-1.5 h-1.5 rounded-full bg-black mx-0.5"></span>
<span class="w-1 h-1 rounded-full bg-black"></span>
</div>
<div class="w-[1px] h-4 bg-gray-300"></div>
<div class="w-4 h-4 flex items-center justify-center cursor-pointer">
<span class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black"></span>
</div>
</div>
</div>
<!-- 状态筛选标签栏 (横滑) -->
<div class="px-3 pt-2 pb-2.5 flex items-center space-x-2 overflow-x-auto no-scrollbar">
<button class="px-3.5 py-1.5 rounded-full bg-[#007AFF] text-white text-[13px] font-medium shrink-0 shadow-sm">全部</button>
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0 relative">
待支付
<span class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-[#FF9500] rounded-full ring-2 ring-white"></span>
</button>
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已支付</button>
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已退款</button>
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已取消</button>
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已过期</button>
</div>
</div>
<!-- 订单列表滚动容器 -->
<div class="flex-1 overflow-y-auto px-4 py-3 space-y-3.5 no-scrollbar safe-bottom">
<!-- 1. 待支付订单卡片 -->
<div class="bg-white rounded-[16px] p-4 shadow-sm hairline-all">
<!-- 头部:订单尾号 + 状态徽标 -->
<div class="flex items-center justify-between hairline-b pb-2.5 mb-3">
<div class="flex items-center space-x-1.5 text-[#8E8E93] text-[12px]">
<i class="fa-regular fa-file-lines text-[13px]"></i>
<span class="mono-num">订单号 …8b29</span>
</div>
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-[#FF9500]/10 text-[#FF9500] border border-[#FF9500]/25">
待支付
</span>
</div>
<!-- 商品行 -->
<div class="flex items-start justify-between">
<div>
<h4 class="text-[16px] font-semibold text-[#1C1C1E]">月度会员</h4>
<p class="text-[12px] text-[#8E8E93] mt-0.5">30 天无限使用 AI 推荐与尊享权益</p>
</div>
<span class="text-[12px] text-[#8E8E93] mono-num">x 1</span>
</div>
<!-- 金额与按钮行 -->
<div class="mt-3.5 pt-3 hairline-t flex items-center justify-between">
<div class="text-[13px] text-[#1C1C1E] font-medium">
实付 <span class="mono-num text-[17px] font-bold text-[#1C1C1E]">¥19.00</span>
</div>
<div class="flex items-center space-x-2">
<span class="text-[11px] text-[#8E8E93] mono-num">剩余 14:32</span>
<button class="px-2.5 py-1 rounded-[8px] border border-[#E5E5EA] text-[#8E8E93] text-[12px] font-medium active:bg-gray-100">取消订单</button>
<button class="px-3.5 py-1 rounded-[8px] bg-[#007AFF] text-white text-[12px] font-semibold shadow-sm active:bg-[#0062cc]">去支付</button>
</div>
</div>
</div>
<!-- 2. 已支付订单卡片(带申请退款按钮) -->
<div class="bg-white rounded-[16px] p-4 shadow-sm hairline-all">
<!-- 头部 -->
<div class="flex items-center justify-between hairline-b pb-2.5 mb-3">
<div class="flex items-center space-x-1.5 text-[#8E8E93] text-[12px]">
<i class="fa-regular fa-file-lines text-[13px]"></i>
<span class="mono-num">订单号 …9c41</span>
</div>
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-[#34C759]/10 text-[#34C759] border border-[#34C759]/25">
已支付
</span>
</div>
<!-- 商品行 -->
<div class="flex items-start justify-between">
<div>
<h4 class="text-[16px] font-semibold text-[#1C1C1E]">AI识图上传 20次包</h4>
<p class="text-[12px] text-[#8E8E93] mt-0.5">永久有效 · 支持高清智能抠图属性识别</p>
</div>
<span class="text-[12px] text-[#8E8E93] mono-num">x 1</span>
</div>
<!-- 金额与按钮行 -->
<div class="mt-3.5 pt-3 hairline-t flex items-center justify-between">
<div class="text-[13px] text-[#1C1C1E] font-medium">
实付 <span class="mono-num text-[17px] font-bold text-[#1C1C1E]">¥6.00</span>
</div>
<div class="flex items-center space-x-2">
<button class="px-3 py-1 rounded-[8px] border border-[#E5E5EA] text-[#1C1C1E] text-[12px] font-medium active:bg-gray-100">申请退款</button>
</div>
</div>
</div>
<!-- 3. 已退款订单卡片(无按钮) -->
<div class="bg-white rounded-[16px] p-4 shadow-sm hairline-all">
<!-- 头部 -->
<div class="flex items-center justify-between hairline-b pb-2.5 mb-3">
<div class="flex items-center space-x-1.5 text-[#8E8E93] text-[12px]">
<i class="fa-regular fa-file-lines text-[13px]"></i>
<span class="mono-num">订单号 …7a10</span>
</div>
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-[#007AFF]/10 text-[#007AFF] border border-[#007AFF]/25">
已退款
</span>
</div>
<!-- 商品行 -->
<div class="flex items-start justify-between">
<div>
<h4 class="text-[16px] font-semibold text-[#1C1C1E]">AI 推荐额度 50次包</h4>
<p class="text-[12px] text-[#8E8E93] mt-0.5">退款金额原路退回至微信零钱账户</p>
</div>
<span class="text-[12px] text-[#8E8E93] mono-num">x 1</span>
</div>
<!-- 金额与按钮行(无按钮) -->
<div class="mt-3.5 pt-3 hairline-t flex items-center justify-between">
<div class="text-[13px] text-[#1C1C1E] font-medium">
实付 <span class="mono-num text-[17px] font-bold text-[#1C1C1E]">¥12.00</span>
</div>
<span class="text-[12px] text-[#8E8E93]">已全额原路返还</span>
</div>
</div>
<!-- 4. 已取消订单卡片(无按钮) -->
<div class="bg-white rounded-[16px] p-4 shadow-sm hairline-all opacity-85">
<div class="flex items-center justify-between hairline-b pb-2.5 mb-3">
<div class="flex items-center space-x-1.5 text-[#8E8E93] text-[12px]">
<i class="fa-regular fa-file-lines text-[13px]"></i>
<span class="mono-num">订单号 …3f92</span>
</div>
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-[#E5E5EA] text-[#8E8E93]">
已取消
</span>
</div>
<div class="flex items-start justify-between">
<div>
<h4 class="text-[16px] font-semibold text-[#1C1C1E]">衣柜分享 10次包</h4>
<p class="text-[12px] text-[#8E8E93] mt-0.5">用户手动取消订单</p>
</div>
<span class="text-[12px] text-[#8E8E93] mono-num">x 1</span>
</div>
<div class="mt-3.5 pt-3 hairline-t flex items-center justify-between">
<div class="text-[13px] text-[#8E8E93] font-medium">
实付 <span class="mono-num text-[16px] font-bold text-[#8E8E93]">¥4.00</span>
</div>
<span class="text-[11px] text-[#8E8E93]">交易已关闭</span>
</div>
</div>
<!-- 底部提示 -->
<div class="text-center py-2 text-[11px] text-[#8E8E93]">
仅展示近 1 年内生成的有效订单
</div>
</div>
</div>
</div>
<!-- 画板 2: 点击「去支付」底部呼起微信支付面板 -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2 h-2 rounded-full bg-[#34C759]"></span>
<span class="text-sm font-semibold text-gray-300">状态 2 · 底部呼起「微信支付面板」</span>
</div>
<div class="device-shell flex flex-col justify-between">
<!-- 背景层(带遮罩模糊) -->
<div class="absolute inset-0 bg-black/45 z-10 backdrop-blur-[2px] transition-all"></div>
<!-- 底层透出的模糊原页面头部 -->
<div class="bg-white/95 backdrop-blur-md z-0 hairline-b shrink-0 filter blur-[1px]">
<div class="h-11 px-6 flex justify-between items-end pb-1.5 select-none">
<span class="text-[14px] font-semibold text-black">9:41</span>
<div class="flex items-center space-x-1 text-black text-[12px]">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<div class="h-11 px-4 flex items-center justify-between">
<span class="text-[#007AFF] text-[15px]">&lt; 我的</span>
<span class="font-semibold text-[17px] text-black">我的订单</span>
<div class="capsule-pill w-[87px] h-[32px] rounded-full"></div>
</div>
</div>
<!-- 真实微信支付底栏面板 (原生底部浮层 ActionSheet) -->
<div class="absolute bottom-0 inset-x-0 bg-white rounded-t-[24px] z-30 shadow-2xl safe-bottom overflow-hidden animate-slide-up">
<!-- 微信支付顶栏 -->
<div class="h-14 px-5 flex items-center justify-between hairline-b">
<button class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:bg-gray-100">
<i class="fa-solid fa-xmark text-lg"></i>
</button>
<div class="flex items-center space-x-1 text-[16px] font-semibold text-black">
<i class="fa-brands fa-weixin text-[#07C160] text-[19px]"></i>
<span>微信支付</span>
</div>
<button class="text-xs text-gray-400 font-normal">使用帮助</button>
</div>
<!-- 金额与核心商品信息 -->
<div class="px-6 pt-7 pb-5 text-center">
<p class="text-[13px] text-[#8E8E93] mb-1">纸条AI衣橱 · 月度会员服务</p>
<div class="flex items-baseline justify-center text-[#1C1C1E]">
<span class="text-[26px] font-semibold mr-1">¥</span>
<span class="mono-num text-[44px] font-bold tracking-tight">19.00</span>
</div>
<div class="inline-flex items-center gap-1 mt-2 px-2.5 py-0.5 rounded-full bg-[#F2F2F7] text-[11px] text-[#8E8E93]">
<i class="fa-solid fa-shield-halved text-[#07C160] text-[10px]"></i> 官方安全支付环境
</div>
</div>
<!-- 支付通道选择行 -->
<div class="px-5 py-3 mx-4 rounded-xl bg-[#F9F9FB] hairline-all flex items-center justify-between text-[13px] mb-5">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-credit-card text-[#007AFF] text-[15px]"></i>
<span class="font-medium text-[#1C1C1E]">招商银行储蓄卡(8920)</span>
</div>
<i class="fa-solid fa-chevron-right text-gray-400 text-xs"></i>
</div>
<!-- 绿色微信支付核心按钮 -->
<div class="px-5 mb-2">
<button class="w-full h-[48px] bg-[#07C160] active:bg-[#06ad56] text-white font-semibold text-[16px] rounded-[12px] flex items-center justify-center space-x-1.5 shadow-md shadow-green-500/20">
<i class="fa-solid fa-fingerprint text-[18px]"></i>
<span>确认支付 ¥19.00</span>
</button>
<p class="text-center text-[11px] text-[#8E8E93] mt-2.5">
点击确认即授权微信支付扣款协议
</p>
</div>
</div>
</div>
</div>
<!-- 画板 3: 点击「申请退款」弹出退款原因面板与审核轻提示 -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2 h-2 rounded-full bg-[#FF9500]"></span>
<span class="text-sm font-semibold text-gray-300">状态 3 · 弹出「申请退款面板」与轻提示</span>
</div>
<div class="device-shell flex flex-col justify-between">
<!-- 遮罩层 -->
<div class="absolute inset-0 bg-black/45 z-10 backdrop-blur-[1px]"></div>
<!-- 顶部轻提示 Toast (浮动在上层,模拟提交后的即时反馈) -->
<div class="absolute top-16 inset-x-6 z-40 flex justify-center">
<div class="bg-[#1C1C1E]/90 backdrop-blur-md text-white px-4 py-2.5 rounded-full shadow-2xl flex items-center space-x-2 border border-white/10 animate-fade-in">
<i class="fa-solid fa-circle-check text-[#34C759] text-[15px]"></i>
<span class="text-[13px] font-medium">退款申请已提交,等待审核</span>
</div>
</div>
<!-- 背景模糊的原生层 -->
<div class="bg-white/95 backdrop-blur-md z-0 hairline-b shrink-0 filter blur-[1px]">
<div class="h-11 px-6 flex justify-between items-end pb-1.5 select-none">
<span class="text-[14px] font-semibold text-black">9:41</span>
<div class="flex items-center space-x-1 text-black text-[12px]">
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<div class="h-11 px-4 flex items-center justify-between">
<span class="text-[#007AFF] text-[15px]">&lt; 我的</span>
<span class="font-semibold text-[17px] text-black">我的订单</span>
</div>
</div>
<!-- 申请退款弹窗面板 (Bottom Sheet) -->
<div class="absolute bottom-0 inset-x-0 bg-white rounded-t-[24px] z-30 shadow-2xl safe-bottom overflow-hidden">
<!-- 面板顶栏 -->
<div class="h-13 px-5 pt-3 pb-2 flex items-center justify-between hairline-b">
<h3 class="text-[17px] font-semibold text-[#1C1C1E]">申请退款</h3>
<button class="w-8 h-8 rounded-full flex items-center justify-center text-[#8E8E93] hover:bg-gray-100">
<i class="fa-solid fa-xmark text-lg"></i>
</button>
</div>
<!-- 退款表单内容 -->
<div class="p-5 space-y-4">
<!-- 订单概览卡 -->
<div class="p-3 bg-[#F2F2F7] rounded-[12px] flex items-center justify-between text-[13px]">
<div>
<p class="font-medium text-[#1C1C1E]">AI识图上传 20次包</p>
<p class="text-[11px] text-[#8E8E93] mt-0.5">订单号:202504159821</p>
</div>
<span class="mono-num text-[16px] font-bold text-[#1C1C1E]">¥6.00</span>
</div>
<!-- 退款原因多行输入框 (上限 200 字) -->
<div>
<div class="flex items-center justify-between mb-1.5">
<label class="text-[13px] font-medium text-[#1C1C1E]">退款原因说明</label>
<span class="text-[11px] text-[#8E8E93] mono-num">34 / 200字</span>
</div>
<div class="relative bg-[#F9F9FB] rounded-[12px] p-3 hairline-all focus-within:border-[#007AFF] transition-colors">
<textarea rows="3" class="w-full bg-transparent text-[13px] text-[#1C1C1E] placeholder:text-[#C7C7CC] outline-none resize-none leading-relaxed" placeholder="请填写退款原因,工作人员将在1-3个工作日内完成审核与退款...">买错了规格,原计划购买月度会员服务,希望撤销并重新购买会员包。</textarea>
</div>
</div>
<!-- 规则提示 -->
<div class="flex items-start space-x-2 text-[11px] text-[#8E8E93] leading-tight">
<i class="fa-solid fa-circle-info text-[#FF9500] text-xs mt-0.5 shrink-0"></i>
<span>未使用的额度与服务在购买7日内支持极速退款,已消耗额度将扣除对应成本。</span>
</div>
<!-- 提交按钮 -->
<div class="pt-2">
<button class="w-full h-[46px] bg-[#007AFF] active:bg-[#0062cc] text-white font-semibold text-[15px] rounded-[12px] shadow-md shadow-blue-500/20 flex items-center justify-center">
提交退款申请
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 画板 4: 空态页面(当无订单或全部被清空时) -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2 h-2 rounded-full bg-gray-400"></span>
<span class="text-sm font-semibold text-gray-300">状态 4 · 缺省空态(还没有订单)</span>
</div>
<div class="device-shell flex flex-col justify-between">
<!-- 原生导航栏 -->
<div class="bg-white/95 backdrop-blur-md z-20 hairline-b shrink-0">
<div class="h-11 px-6 flex justify-between items-end pb-1.5 select-none">
<span class="text-[14px] font-semibold text-black">9:41</span>
<div class="flex items-center space-x-1 text-black text-[12px]">
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<div class="h-11 px-4 flex items-center justify-between relative">
<div class="flex items-center text-[#007AFF] text-[16px] cursor-pointer">
<i class="fa-solid fa-chevron-left text-[15px] mr-1"></i>
<span class="text-[15px]">我的</span>
</div>
<div class="absolute left-1/2 -translate-x-1/2 font-semibold text-[17px] text-black">
我的订单
</div>
<div class="capsule-pill w-[87px] h-[32px] rounded-full flex items-center justify-evenly px-1">
<div class="w-4 h-4 flex items-center justify-center"><span class="w-1.5 h-1.5 rounded-full bg-black"></span></div>
<div class="w-[1px] h-4 bg-gray-300"></div>
<div class="w-4 h-4 flex items-center justify-center"><span class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black"></span></div>
</div>
</div>
<!-- 筛选栏 (空态下依然保留结构稳定) -->
<div class="px-3 pt-2 pb-2.5 flex items-center space-x-2 overflow-x-auto no-scrollbar opacity-60">
<span class="px-3.5 py-1.5 rounded-full bg-[#007AFF] text-white text-[13px] font-medium shrink-0">全部</span>
<span class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">待支付</span>
<span class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已支付</span>
</div>
</div>
<!-- 空态居中展示区 -->
<div class="flex-1 flex flex-col items-center justify-center px-8 text-center pb-20">
<!-- 票据线稿插画 (规范要求:票据线稿插画) -->
<div class="w-24 h-24 rounded-full bg-[#E5E5EA]/40 flex items-center justify-center mb-5 text-[#8E8E93] relative">
<!-- 票据主卡片 -->
<div class="w-12 h-16 border-2 border-[#8E8E93] rounded-[6px] bg-white flex flex-col justify-between p-1.5 shadow-sm">
<div class="space-y-1">
<div class="w-6 h-1 bg-[#8E8E93] rounded-full"></div>
<div class="w-8 h-1 bg-[#E5E5EA] rounded-full"></div>
<div class="w-5 h-1 bg-[#E5E5EA] rounded-full"></div>
</div>
<div class="hairline-t pt-1 flex justify-between items-center">
<span class="text-[8px] font-bold text-[#8E8E93]">¥</span>
<div class="w-3 h-1 bg-[#8E8E93] rounded-full"></div>
</div>
</div>
<!-- 小浮标星星 -->
<i class="fa-solid fa-sparkles text-[#007AFF] text-xs absolute -top-1 -right-1"></i>
</div>
<h3 class="text-[17px] font-semibold text-[#1C1C1E] mb-1.5">还没有订单</h3>
<p class="text-[13px] text-[#8E8E93] leading-relaxed max-w-[240px] mb-6">
您还没有产生任何购买记录,开通会员或购买额度包即可畅享智能穿搭
</p>
<!-- 描边按钮「去看看额度包」 -->
<button class="px-6 py-2.5 rounded-full border border-[#007AFF] text-[#007AFF] active:bg-[#007AFF]/5 text-[14px] font-medium transition-colors shadow-sm">
去看看额度包
</button>
</div>
<!-- 底部空白占位保证视觉对齐 -->
<div class="h-8"></div>
</div>
</div>
</main>
<!-- 底部业务逻辑与核查规范说明 -->
<footer class="w-full max-w-[1580px] mt-8 bg-[#161b22] border border-[#30363d] rounded-2xl p-6 text-white text-xs">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div>
<h4 class="text-sm font-semibold text-white mb-2 flex items-center gap-1.5">
<i class="fa-solid fa-list-check text-[#007AFF]"></i> 状态徽标与色彩对齐
</h4>
<p class="text-gray-400 leading-relaxed">
待支付采用警示橙 <span class="text-[#FF9500]">#FF9500</span> 并配倒计时;已支付采用成功绿 <span class="text-[#34C759]">#34C759</span>;已退款为系统蓝 <span class="text-[#007AFF]">#007AFF</span>;已取消/已过期为系统灰 <span class="text-[#8E8E93]">#8E8E93</span>。
</p>
</div>
<div>
<h4 class="text-sm font-semibold text-white mb-2 flex items-center gap-1.5">
<i class="fa-solid fa-wallet text-[#34C759]"></i> 微信支付呼起交互
</h4>
<p class="text-gray-400 leading-relaxed">
点击待支付卡片的「去支付」,底部滑出标准微信收银台,醒目呈现 <span class="text-white">¥19.00</span> 等宽大字、支付方式选择及原生绿色 <span class="text-[#07C160]">#07C160</span>「确认支付」按钮。
</p>
</div>
<div>
<h4 class="text-sm font-semibold text-white mb-2 flex items-center gap-1.5">
<i class="fa-solid fa-arrow-rotate-left text-[#FF9500]"></i> 申请退款与审核流
</h4>
<p class="text-gray-400 leading-relaxed">
已支付订单提供「申请退款」入口,呼起具备 200 字限制的多行输入框;提交后伴随 iOS 样式深色 Toast「退款申请已提交,等待审核」,状态自动进入「退款中」。
</p>
</div>
<div>
<h4 class="text-sm font-semibold text-white mb-2 flex items-center gap-1.5">
<i class="fa-solid fa-file-invoice text-[#8E8E93]"></i> 票据线稿空态与引导
</h4>
<p class="text-gray-400 leading-relaxed">
缺省时通过极简票据线稿插画 + 灰色文案「还没有订单」承接,并通过描边按钮「去看看额度包」平滑引导用户回流至商城(第 11 屏)。
</p>
</div>
</div>
</footer>
</body>
</html>