first commit

This commit is contained in:
2026-09-11 01:45:04 +08:00
commit 0a8d60d87f
145 changed files with 40978 additions and 0 deletions
+560
View File
@@ -0,0 +1,560 @@
<!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>
Binary file not shown.

After

Width:  |  Height:  |  Size: 417 KiB