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

560 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第3屏 衣物上传(全状态画板)</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ios: {
blue: '#007AFF',
red: '#FF3B30',
bg: '#F2F2F7',
card: '#FFFFFF',
border: '#E5E5EA',
gray: '#8E8E93',
subtext: '#C7C7CC',
darktext: '#1C1C1E',
darkgray: '#3A3A3C'
}
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', '"SF Pro Text"', '"SF Pro Display"', '"PingFang SC"', '"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
}
}
}
}
</script>
<style>
body {
background-color: #E5E5EA;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
}
.phone-mockup {
width: 375px;
height: 812px;
position: relative;
background-color: #F2F2F7;
border-radius: 44px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
/* 微信胶囊占位 */
.wx-capsule {
width: 87px;
height: 32px;
border-radius: 16px;
border: 0.5px solid rgba(0,0,0,0.15);
background: rgba(255,255,255,0.7);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.wx-capsule-divider {
width: 0.5px;
height: 16px;
background: rgba(0,0,0,0.15);
}
/* iOS 底部黑条 Home Indicator */
.home-indicator {
width: 134px;
height: 5px;
background-color: #000000;
border-radius: 3px;
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 50;
}
/* 虚线上传区 */
.dashed-box {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23C7C7CC' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
border-radius: 20px;
}
/* 呼吸脉冲动效 */
@keyframes pulse-ring {
0% { transform: scale(0.95); opacity: 0.8; }
50% { transform: scale(1.05); opacity: 0.3; }
100% { transform: scale(0.95); opacity: 0.8; }
}
.pulse-ring {
animation: pulse-ring 2.5s infinite ease-in-out;
}
</style>
</head>
<body class="p-6 md:p-12 min-h-screen">
<!-- 页面主画板 Header 规范标注 -->
<div class="max-w-[1600px] mx-auto mb-8 bg-white/80 backdrop-blur-md rounded-2xl p-6 border border-black/5 shadow-sm flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center space-x-3">
<div class="w-3 h-3 rounded-full bg-[#007AFF]"></div>
<h1 class="text-xl font-bold text-gray-900 tracking-tight">第 3 屏 | 衣物上传(全状态画板)</h1>
<span class="text-xs px-2.5 py-1 bg-blue-50 text-[#007AFF] font-medium rounded-full border border-blue-100">微信小程序二级规范 · 375 × 812 pt</span>
</div>
<div class="flex items-center space-x-6 text-xs text-gray-500 font-mono">
<span class="flex items-center"><span class="w-2.5 h-2.5 rounded-full bg-[#007AFF] mr-1.5"></span>主色: #007AFF</span>
<span class="flex items-center"><span class="w-2.5 h-2.5 rounded-full bg-[#FF3B30] mr-1.5"></span>失败色: #FF3B30</span>
<span class="flex items-center"><span class="w-2.5 h-2.5 rounded-full bg-[#F2F2F7] border border-gray-300 mr-1.5"></span>背景: #F2F2F7</span>
<span class="text-gray-400">| 全状态交付:初始态、动作面板、处理中、失败态、额度不足</span>
</div>
</div>
<!-- 主视图网格容器 -->
<div class="max-w-[1600px] mx-auto">
<!-- 第一行:三大主要屏幕流程(初始态+Sheet、处理中、失败态) -->
<div class="flex flex-wrap lg:flex-nowrap justify-center gap-8 mb-12">
<!-- ====================== 1. 初始态 + 动作面板 ====================== -->
<div class="flex flex-col items-center">
<div class="mb-3 text-center">
<span class="text-xs font-semibold px-3 py-1 bg-gray-200 text-gray-700 rounded-full">状态 1 · 初始态与 iOS ActionSheet</span>
<p class="text-[11px] text-gray-500 mt-1">40% 虚线上传区 + 底部原生 ActionSheet 面板</p>
</div>
<div class="phone-mockup relative">
<!-- 状态栏 44pt -->
<div class="h-11 px-7 pt-3 flex justify-between items-center text-xs font-semibold tracking-tight text-black select-none z-30 relative">
<span>9:41</span>
<div class="flex items-center space-x-1.5">
<i class="fa-solid fa-signal text-[10px]"></i>
<i class="fa-solid fa-wifi text-[10px]"></i>
<i class="fa-solid fa-battery-full text-[12px]"></i>
</div>
</div>
<!-- 微信原生导航栏 44pt -->
<div class="h-11 px-4 flex items-center justify-between relative z-30">
<div class="flex items-center space-x-1 text-[#007AFF] cursor-pointer active:opacity-70">
<i class="fa-solid fa-chevron-left text-sm font-bold"></i>
<span class="text-sm font-medium">衣橱</span>
</div>
<div class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">
上传衣物
</div>
<!-- 微信右上角胶囊 -->
<div class="wx-capsule">
<div class="w-4 h-4 flex items-center justify-center">
<span class="flex space-x-0.5">
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
</span>
</div>
<div class="wx-capsule-divider"></div>
<div class="w-4 h-4 flex items-center justify-center">
<span class="w-2.5 h-2.5 border border-gray-900 rounded-full flex items-center justify-center">
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
</span>
</div>
</div>
</div>
<!-- 背景主内容(虚化变暗,因 ActionSheet 展开) -->
<div class="p-4 space-y-4">
<!-- 占屏约 40% 虚线上传卡片 (高约 310pt) -->
<div class="w-full h-[310px] bg-white rounded-2xl p-6 flex flex-col items-center justify-center text-center dashed-box shadow-sm relative overflow-hidden group">
<!-- 相机大图标 -->
<div class="w-20 h-20 rounded-full bg-blue-50/80 flex items-center justify-center mb-4 text-[#007AFF]">
<i class="fa-solid fa-camera text-3xl"></i>
</div>
<div class="text-[17px] font-semibold text-gray-900 mb-2">拍照或从相册选择</div>
<div class="text-[12px] text-[#8E8E93] leading-relaxed max-w-[240px]">
支持 JPG / PNG,单张不超过 20MB<br>上传消耗 1 次上传额度
</div>
<!-- 快捷状态角标 -->
<div class="absolute top-3 right-3 text-[11px] px-2 py-0.5 bg-blue-50 text-[#007AFF] rounded-md font-medium">
剩余 13 次
</div>
</div>
<!-- 下方说明文字 -->
<div class="text-center text-[12px] text-[#8E8E93] flex items-center justify-center space-x-1.5 py-1">
<i class="fa-solid fa-wand-magic-sparkles text-[#007AFF] text-xs"></i>
<span>AI 将自动抠图并识别 15 项属性</span>
</div>
<!-- 上传指引小卡片 -->
<div class="bg-white rounded-2xl p-4 border border-[#E5E5EA]/60 shadow-sm space-y-2">
<div class="text-xs font-semibold text-gray-800">📸 拍照建议以获得最佳效果:</div>
<div class="grid grid-cols-2 gap-2 pt-1 text-[11px] text-gray-500">
<div class="flex items-center space-x-1.5 bg-[#F2F2F7] px-2.5 py-2 rounded-xl">
<i class="fa-solid fa-check text-green-500"></i>
<span>平铺或悬挂单件</span>
</div>
<div class="flex items-center space-x-1.5 bg-[#F2F2F7] px-2.5 py-2 rounded-xl">
<i class="fa-solid fa-check text-green-500"></i>
<span>光线充足背景整洁</span>
</div>
</div>
</div>
</div>
<!-- 半透明黑色蒙层 (ActionSheet Mask) -->
<div class="absolute inset-0 bg-black/40 z-40 backdrop-blur-[1.5px] transition-all"></div>
<!-- 底部弹起半屏动作面板 (iOS ActionSheet) -->
<div class="absolute bottom-0 inset-x-0 z-50 px-3 pb-8 flex flex-col items-center">
<!-- 上层组:拍照、相册选择 (圆角 14pt) -->
<div class="w-full bg-white/95 backdrop-blur-xl rounded-2xl overflow-hidden shadow-2xl border border-black/5">
<!-- Grabber 提手 36×5pt -->
<div class="pt-2.5 pb-1 flex justify-center">
<div class="w-[36px] h-[5px] bg-[#C7C7CC] rounded-full"></div>
</div>
<!-- 面板标题/说明 -->
<div class="py-2 text-center text-[12px] text-[#8E8E93] border-b border-[#E5E5EA]">
选择上传方式(消耗 1 次额度)
</div>
<!-- 选项 1:拍照 -->
<button class="w-full h-14 flex items-center justify-center text-[19px] text-[#007AFF] font-medium active:bg-gray-100 transition border-b border-[#E5E5EA]">
<i class="fa-solid fa-camera mr-2 text-base"></i>
拍照
</button>
<!-- 选项 2:从相册选择 -->
<button class="w-full h-14 flex items-center justify-center text-[19px] text-[#007AFF] font-medium active:bg-gray-100 transition">
<i class="fa-regular fa-image mr-2 text-base"></i>
从相册选择
</button>
</div>
<!-- 取消项单独成组,间隔 8pt -->
<div class="w-full mt-2">
<button class="w-full h-14 bg-white/95 backdrop-blur-xl rounded-2xl text-[19px] text-[#007AFF] font-semibold active:bg-gray-100 transition shadow-lg flex items-center justify-center border border-black/5">
取消
</button>
</div>
</div>
<div class="home-indicator"></div>
</div>
</div>
<!-- ====================== 2. 处理中状态 (三步横向进度条) ====================== -->
<div class="flex flex-col items-center">
<div class="mb-3 text-center">
<span class="text-xs font-semibold px-3 py-1 bg-blue-100 text-[#007AFF] rounded-full">状态 2 · 处理中(Processing)</span>
<p class="text-[11px] text-gray-500 mt-1">所选缩略图 + 三步横向步骤条 + 呼吸动效</p>
</div>
<div class="phone-mockup relative flex flex-col justify-between">
<div>
<!-- 状态栏 44pt -->
<div class="h-11 px-7 pt-3 flex justify-between items-center text-xs font-semibold tracking-tight text-black select-none">
<span>9:41</span>
<div class="flex items-center space-x-1.5">
<i class="fa-solid fa-signal text-[10px]"></i>
<i class="fa-solid fa-wifi text-[10px]"></i>
<i class="fa-solid fa-battery-full text-[12px]"></i>
</div>
</div>
<!-- 微信原生导航栏 44pt -->
<div class="h-11 px-4 flex items-center justify-between relative">
<div class="flex items-center space-x-1 text-gray-400 cursor-not-allowed opacity-50">
<i class="fa-solid fa-chevron-left text-sm font-bold"></i>
<span class="text-sm font-medium">返回</span>
</div>
<div class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">
正在处理
</div>
<div class="wx-capsule">
<div class="w-4 h-4 flex items-center justify-center">
<span class="flex space-x-0.5">
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
</span>
</div>
<div class="wx-capsule-divider"></div>
<div class="w-4 h-4 flex items-center justify-center">
<span class="w-2.5 h-2.5 border border-gray-900 rounded-full flex items-center justify-center">
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
</span>
</div>
</div>
</div>
<!-- 主内容区 -->
<div class="p-4 flex flex-col items-center">
<!-- 顶部所选图片缩略(圆角 16pt,1:1 纯净呈现) -->
<div class="w-44 h-44 bg-white rounded-2xl shadow-sm border border-[#E5E5EA] p-3 flex items-center justify-center relative overflow-hidden mt-2">
<!-- 衣服简约线稿 -->
<svg class="w-28 h-28 text-[#007AFF]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M30 20 L40 28 C45 32 55 32 60 28 L70 20 L88 32 L78 46 L70 42 L70 85 L30 85 L30 42 L22 46 L12 32 Z" />
<path d="M40 28 C45 32 55 32 60 28" />
<rect x="58" y="44" width="10" height="12" rx="1.5" stroke-dasharray="2 2" />
</svg>
<!-- 扫描光线动效示意 -->
<div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-transparent via-[#007AFF] to-transparent animate-pulse"></div>
<!-- 正在处理呼吸标签 -->
<div class="absolute bottom-2.5 px-2 py-0.5 bg-black/60 backdrop-blur-md rounded-full text-[10px] text-white flex items-center space-x-1">
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] animate-ping"></span>
<span>分析中...</span>
</div>
</div>
<!-- 中部卡片:三步横向步骤条 -->
<div class="w-full bg-white rounded-2xl p-5 mt-6 shadow-sm border border-[#E5E5EA]">
<div class="text-xs font-semibold text-gray-500 mb-4 text-center">AI 识别流水线</div>
<!-- 步骤进度条容器 -->
<div class="relative flex items-center justify-between px-3">
<!-- 步骤连接线 -->
<div class="absolute top-[13px] left-8 right-8 h-[2px] bg-[#E5E5EA] -z-0">
<!-- 已完成阶段连线(前段蓝线高亮) -->
<div class="h-full bg-[#007AFF] w-1/2"></div>
</div>
<!-- 步骤 1:排队中(已完成 -> 绿/蓝勾) -->
<div class="flex flex-col items-center relative z-10">
<div class="w-7 h-7 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-xs font-bold shadow-sm">
<i class="fa-solid fa-check text-[11px]"></i>
</div>
<span class="text-[12px] font-medium text-gray-800 mt-2">排队中</span>
<span class="text-[10px] text-gray-400">已就绪</span>
</div>
<!-- 步骤 2:AI 抠图(当前进行中 -> 蓝实心 + 脉冲呼吸圈) -->
<div class="flex flex-col items-center relative z-10">
<div class="relative flex items-center justify-center">
<div class="w-7 h-7 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-xs font-bold shadow-md">
<span class="w-2.5 h-2.5 bg-white rounded-full"></span>
</div>
<div class="absolute -inset-1 rounded-full bg-[#007AFF]/30 pulse-ring -z-10"></div>
</div>
<span class="text-[12px] font-bold text-[#007AFF] mt-2">AI 抠图</span>
<span class="text-[10px] text-[#007AFF] font-medium">进行中</span>
</div>
<!-- 步骤 3:智能分类(未开始 -> 浅灰圆点) -->
<div class="flex flex-col items-center relative z-10">
<div class="w-7 h-7 rounded-full bg-[#E5E5EA] text-[#8E8E93] flex items-center justify-center text-xs font-bold">
<span class="w-2 h-2 bg-[#8E8E93] rounded-full"></span>
</div>
<span class="text-[12px] font-medium text-[#8E8E93] mt-2">智能分类</span>
<span class="text-[10px] text-gray-400">等待中</span>
</div>
</div>
</div>
<!-- 文案说明与等待情绪缓和 -->
<div class="text-center mt-6 space-y-1.5">
<div class="text-[17px] font-bold text-gray-900 tracking-tight">
AI 正在识别你的衣物…
</div>
<div class="text-[13px] text-[#8E8E93]">
通常需要 10 秒左右,请稍候
</div>
</div>
<!-- 提示小贴士 -->
<div class="mt-8 bg-blue-50/70 border border-blue-100 rounded-xl p-3.5 max-w-[280px] flex items-start space-x-2 text-left">
<i class="fa-solid fa-circle-info text-[#007AFF] text-xs mt-0.5"></i>
<div class="text-[11px] text-gray-600 leading-relaxed">
处理完成后将自动跳转至衣物详情页,您可微调 15 维智能识别属性。
</div>
</div>
</div>
</div>
<!-- 底部占位 -->
<div class="p-4 mb-3 text-center">
<span class="text-[11px] text-gray-400">支持切换至后台运行,识别成功后通知推送</span>
</div>
<div class="home-indicator"></div>
</div>
</div>
<!-- ====================== 3. 失败态 (识别失败:图片抠图失败) ====================== -->
<div class="flex flex-col items-center">
<div class="mb-3 text-center">
<span class="text-xs font-semibold px-3 py-1 bg-red-100 text-[#FF3B30] rounded-full">状态 3 · 失败态(Error Fallback)</span>
<p class="text-[11px] text-gray-500 mt-1">红感叹号 + 额度回退声明 + 双操作分支</p>
</div>
<div class="phone-mockup relative flex flex-col justify-between">
<div>
<!-- 状态栏 44pt -->
<div class="h-11 px-7 pt-3 flex justify-between items-center text-xs font-semibold tracking-tight text-black select-none">
<span>9:41</span>
<div class="flex items-center space-x-1.5">
<i class="fa-solid fa-signal text-[10px]"></i>
<i class="fa-solid fa-wifi text-[10px]"></i>
<i class="fa-solid fa-battery-full text-[12px]"></i>
</div>
</div>
<!-- 微信原生导航栏 44pt -->
<div class="h-11 px-4 flex items-center justify-between relative">
<div class="flex items-center space-x-1 text-[#007AFF] cursor-pointer active:opacity-70">
<i class="fa-solid fa-chevron-left text-sm font-bold"></i>
<span class="text-sm font-medium">衣橱</span>
</div>
<div class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">
上传结果
</div>
<div class="wx-capsule">
<div class="w-4 h-4 flex items-center justify-center">
<span class="flex space-x-0.5">
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
</span>
</div>
<div class="wx-capsule-divider"></div>
<div class="w-4 h-4 flex items-center justify-center">
<span class="w-2.5 h-2.5 border border-gray-900 rounded-full flex items-center justify-center">
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
</span>
</div>
</div>
</div>
<!-- 核心失败内容展示 -->
<div class="p-6 flex flex-col items-center text-center mt-6">
<!-- 红色大感叹号圆环图标 -->
<div class="w-20 h-20 rounded-full bg-red-50 border border-red-100 flex items-center justify-center mb-5 text-[#FF3B30] shadow-sm">
<i class="fa-solid fa-circle-exclamation text-4xl"></i>
</div>
<!-- 主错误文案 -->
<div class="text-[19px] font-bold text-gray-900 mb-2">
识别失败:图片抠图失败
</div>
<!-- 额度退回核心安全感说明 -->
<div class="inline-flex items-center space-x-1.5 px-3 py-1.5 bg-green-50 border border-green-200/80 rounded-full text-green-700 text-xs font-medium mb-3">
<i class="fa-solid fa-shield-check text-[11px]"></i>
<span>本次上传额度已自动退回</span>
</div>
<div class="text-[13px] text-[#8E8E93] leading-relaxed max-w-[260px]">
可能是衣物轮廓不够清晰、背景与衣服颜色过于接近,或光线过暗导致。
</div>
<!-- 建议排查卡片 -->
<div class="w-full bg-white rounded-2xl p-4 mt-6 border border-[#E5E5EA] text-left space-y-2 text-xs">
<div class="font-semibold text-gray-800 flex items-center space-x-1">
<i class="fa-solid fa-lightbulb text-amber-500"></i>
<span>建议尝试:</span>
</div>
<ul class="list-disc list-inside text-gray-500 space-y-1 text-[11px]">
<li>将衣物平铺在纯色(如纯白/木质地板)背景上</li>
<li>避免画面中同时出现多件杂物</li>
<li>开启室内照明或闪光灯重新拍摄</li>
</ul>
</div>
</div>
</div>
<!-- 底部双操作按钮 -->
<div class="p-4 pb-8 space-y-3 bg-white border-t border-[#E5E5EA]">
<!-- 重新上传主按钮 -->
<button class="w-full h-12 rounded-xl bg-[#007AFF] text-white font-semibold text-[16px] shadow-md shadow-blue-500/20 active:opacity-80 flex items-center justify-center space-x-2">
<i class="fa-solid fa-arrow-rotate-right text-sm"></i>
<span>重新上传</span>
</button>
<!-- 手动填写信息描边按钮 -->
<button class="w-full h-12 rounded-xl bg-white border border-[#E5E5EA] text-gray-800 font-semibold text-[16px] active:bg-gray-50 flex items-center justify-center space-x-2">
<i class="fa-regular fa-pen-to-square text-sm text-[#007AFF]"></i>
<span>手动填写信息</span>
</button>
</div>
<div class="home-indicator"></div>
</div>
</div>
</div>
<!-- ====================== 第二行:异常拦截规范与业务对照 ====================== -->
<div class="bg-white rounded-3xl p-6 md:p-8 border border-black/5 shadow-sm">
<div class="flex items-center space-x-2 mb-6">
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
<h2 class="text-base font-bold text-gray-900">第 3 屏 异常拦截规范与设计核查表</h2>
<span class="text-xs text-gray-400 font-normal">(遵循 iOS HIG Alert 对话框规范与小程序异步额度防重机制)</span>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
<!-- 弹窗 1:上传额度不足 Alert 弹窗高保真 -->
<div class="bg-[#F2F2F7] p-6 rounded-2xl border border-[#E5E5EA] flex flex-col items-center">
<div class="text-xs font-semibold text-gray-500 mb-3">场景:上传前额度为 0 拦截(iOS Alert 规范)</div>
<!-- 经典 iOS 居中弹窗卡片 270pt 宽 -->
<div class="w-[270px] bg-white/90 backdrop-blur-2xl rounded-[14px] overflow-hidden shadow-2xl text-center border border-black/10">
<div class="pt-5 px-4 pb-4">
<div class="w-10 h-10 rounded-full bg-red-50 text-[#FF3B30] flex items-center justify-center mx-auto mb-2.5">
<i class="fa-solid fa-ticket text-lg"></i>
</div>
<div class="text-[17px] font-bold text-gray-900 tracking-tight">上传额度不足</div>
<div class="text-[13px] text-gray-600 mt-1.5 leading-relaxed">
当前剩余 0 次,购买额度包后可继续上传
</div>
</div>
<!-- 分割线与按钮组(iOS 双键并排规范) -->
<div class="border-t border-[#3C3C43]/20 flex divide-x divide-[#3C3C43]/20 h-[44px]">
<button class="flex-1 text-[17px] text-[#007AFF] font-normal flex items-center justify-center active:bg-black/5 transition">
取消
</button>
<button class="flex-1 text-[17px] text-[#007AFF] font-bold flex items-center justify-center active:bg-black/5 transition">
去购买
</button>
</div>
</div>
<p class="text-[11px] text-gray-400 mt-4 text-center">
符合微信小程序与 iOS 居中 Alert 标准,点击「去购买」直接吊起轻量充值半屏。
</p>
</div>
<!-- 规范核查与交互说明 -->
<div class="space-y-4">
<div class="bg-[#F2F2F7] p-5 rounded-2xl border border-[#E5E5EA] space-y-3">
<div class="text-xs font-bold text-gray-800 flex items-center space-x-1.5">
<i class="fa-solid fa-list-check text-[#007AFF]"></i>
<span>关键设计与业务逻辑核对</span>
</div>
<ul class="text-[12px] text-gray-600 space-y-2.5">
<li class="flex items-start space-x-2">
<span class="text-[#007AFF] font-bold">1.</span>
<span><strong>占屏约 40% 虚线框</strong>:精确控制在 310pt 高度,居中布局大相机图标、规格说明(JPG/PNG、20MB 内)与额度提示。</span>
</li>
<li class="flex items-start space-x-2">
<span class="text-[#007AFF] font-bold">2.</span>
<span><strong>iOS ActionSheet 标准规格</strong>:顶部附带 36×5pt 胶囊 Grabber,选项间配备 0.5px 发丝线;取消项独立成组并与上方保留严格 8pt 间距。</span>
</li>
<li class="flex items-start space-x-2">
<span class="text-[#007AFF] font-bold">3.</span>
<span><strong>三步横向步骤条</strong>:清晰划分「排队中(对勾)→ AI 抠图(实心蓝+呼吸动效进行中)→ 智能分类(浅灰圆点等待中)」,并标注文案「AI 正在识别你的衣物… 通常需要 10 秒左右」。</span>
</li>
<li class="flex items-start space-x-2">
<span class="text-[#007AFF] font-bold">4.</span>
<span><strong>识别失败与额度返还</strong>:明确提示「识别失败:图片抠图失败」并突出强调「本次上传额度已自动退回」,同时提供「重新上传」与「手动填写信息」双兜底通道。</span>
</li>
<li class="flex items-start space-x-2">
<span class="text-[#007AFF] font-bold">5.</span>
<span><strong>额度不足前置拦截</strong>:当剩余上传额度为 0 时,用户点击上传区域或入口即刻弹出 270pt iOS Alert 居中弹窗,避免无谓触发相机权限。</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>