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

627 lines
32 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>第 7 屏 | AI 穿搭推荐 - 纸条AI衣橱</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=PingFang+SC:wght@400;500;600;700&display=swap');
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
background-color: #ECEEF2;
color: #1C1C1E;
margin: 0;
padding: 32px 24px;
-webkit-font-smoothing: antialiased;
}
.device-shell {
width: 375px;
height: 812px;
background-color: #F2F2F7;
border-radius: 44px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.16), 0 0 0 10px #1C1C1E, 0 0 0 12px #2C2C2E;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.status-bar {
height: 44px;
padding: 12px 20px 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 600;
z-index: 50;
}
.capsule {
height: 32px;
width: 87px;
border: 0.5px solid rgba(0, 0, 0, 0.18);
border-radius: 16px;
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 8px;
}
.capsule-divider {
width: 0.5px;
height: 18px;
background-color: rgba(0, 0, 0, 0.15);
}
.nav-header {
height: 44px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.safe-bottom {
padding-bottom: 24px;
}
.hairline-b {
border-bottom: 0.5px solid #E5E5EA;
}
.hairline-t {
border-top: 0.5px solid #E5E5EA;
}
.ios-scroll::-webkit-scrollbar {
display: none;
}
.pulse-glow {
animation: pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.04); opacity: 1; filter: drop-shadow(0 8px 16px rgba(0, 122, 255, 0.25)); }
}
.spin-slow {
animation: spin 9s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-start gap-8">
<!-- 页面主画板 Header 标头信息 -->
<header class="w-full max-w-[1580px] flex items-center justify-between px-2 pt-2">
<div>
<div class="flex items-center gap-2.5">
<span class="w-3.5 h-3.5 rounded-full bg-[#007AFF] inline-block shadow-sm"></span>
<h1 class="text-2xl font-bold text-gray-900 tracking-tight">第 7 屏 | AI 穿搭推荐</h1>
<span class="text-xs px-2 py-0.5 rounded-md bg-blue-50 text-[#007AFF] font-medium border border-blue-100">二级页面 · 规范级高保真</span>
<span class="text-xs text-gray-500 font-mono">iPhone 375 × 812 pt · 微信小程序规范</span>
</div>
<p class="text-xs text-gray-500 mt-1">从穿搭页进入,涵盖场景选择半屏弹窗、生成中全屏动效、AI推荐结果页及伴生三态异常与180秒频率保护机制。</p>
</div>
<div class="flex gap-2">
<span class="text-xs font-semibold px-2.5 py-1 bg-white text-gray-700 rounded-full border border-gray-200 shadow-sm">主色:#007AFF</span>
<span class="text-xs font-semibold px-2.5 py-1 bg-white text-[#5856D6] rounded-full border border-gray-200 shadow-sm">辅助:#5856D6 靛蓝</span>
</div>
</header>
<!-- 原型展板主视口:三屏主要阶段横排 (弹窗态 / 生成中 / 推荐结果页) -->
<main class="w-full max-w-[1580px] flex flex-wrap gap-8 justify-center items-start">
<!-- 阶段 1:场景选择半屏弹窗 -->
<div class="flex flex-col items-center gap-3">
<div class="flex items-center gap-2">
<span class="text-xs font-bold px-2.5 py-1 rounded-full bg-white text-gray-800 shadow-sm border border-gray-200">
阶段 1 · 场景选择半屏弹窗 (可跳过)
</span>
</div>
<div class="device-shell">
<!-- 状态栏 -->
<div class="status-bar text-gray-900">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-wifi text-[11px]"></i>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 页面底层毛玻璃蒙层 (底层穿搭页背景虚化) -->
<div class="relative flex-1 flex flex-col justify-between overflow-hidden">
<!-- 背景虚化展示已进入AI推荐底页 -->
<div class="p-4 opacity-40 filter blur-[2px] pointer-events-none">
<div class="h-10 flex items-center justify-between mb-4">
<span class="text-lg font-bold">AI 推荐</span>
<div class="capsule scale-90"></div>
</div>
<div class="w-full h-64 bg-white rounded-2xl mb-4 border border-gray-200"></div>
<div class="w-full h-32 bg-white rounded-2xl border border-gray-200"></div>
</div>
<!-- 半透明遮罩蒙层 -->
<div class="absolute inset-0 bg-black/45 backdrop-blur-[1px] transition-all"></div>
<!-- 半屏 ActionSheet 弹窗本体 (微信/iOS 规范圆角与手柄) -->
<div class="absolute bottom-0 inset-x-0 bg-white rounded-t-[24px] shadow-2xl z-20 flex flex-col pt-3 pb-8 px-5">
<!-- 顶部滑动指示条 -->
<div class="w-9 h-1 bg-[#D1D1D6] rounded-full mx-auto mb-3"></div>
<div class="flex items-center justify-between mb-3">
<div>
<h3 class="text-lg font-bold text-gray-900">选择推荐场景</h3>
<p class="text-[12px] text-gray-500 mt-0.5">结合你的衣橱 128 件衣物精准匹配</p>
</div>
<button class="text-[13px] text-[#8E8E93] hover:text-gray-900 px-2 py-1">跳过</button>
</div>
<!-- 两个大卡片单选 -->
<div class="space-y-3 my-2">
<!-- 卡片 1:每日推荐 (默认选中) -->
<div class="p-3.5 rounded-2xl border-2 border-[#007AFF] bg-[#F5F9FF] relative flex items-start justify-between transition-all">
<div class="flex items-start gap-3">
<div class="w-10 h-10 rounded-xl bg-blue-100/80 flex items-center justify-center text-[#007AFF] text-lg mt-0.5">
<i class="fa-solid fa-sparkles"></i>
</div>
<div>
<div class="flex items-center gap-2">
<span class="font-semibold text-gray-950 text-[15px]">每日推荐</span>
<span class="text-[10px] px-1.5 py-0.5 rounded bg-[#007AFF] text-white font-medium">默认</span>
</div>
<p class="text-[12px] text-gray-600 mt-1 leading-relaxed">
按今日白羊座运势、天气与衣橱自动搭配
</p>
</div>
</div>
<div class="w-5 h-5 rounded-full bg-[#007AFF] flex items-center justify-center text-white text-[11px] shadow-sm">
<i class="fa-solid fa-check"></i>
</div>
</div>
<!-- 卡片 2:自定义场景 -->
<div class="p-3.5 rounded-2xl border border-[#E5E5EA] bg-white relative flex flex-col gap-2.5">
<div class="flex items-start justify-between">
<div class="flex items-start gap-3">
<div class="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-gray-600 text-lg">
<i class="fa-regular fa-compass"></i>
</div>
<div>
<span class="font-semibold text-gray-900 text-[15px]">自定义场景</span>
<p class="text-[12px] text-gray-500 mt-0.5">为特定活动或出行场合量身打造</p>
</div>
</div>
<div class="w-5 h-5 rounded-full border border-gray-300 bg-transparent"></div>
</div>
<!-- 自定义场景输入框 -->
<div class="mt-1">
<div class="relative flex items-center">
<input
type="text"
placeholder="例如:海边度假、周一例会、初次约会"
class="w-full h-10 rounded-xl bg-[#F2F2F7] px-3.5 text-[13px] text-gray-900 placeholder:text-[#8E8E93] focus:outline-none focus:ring-1 focus:ring-[#007AFF] border border-transparent"
/>
<span class="absolute right-3 text-xs text-gray-400"><i class="fa-solid fa-pen-nib"></i></span>
</div>
</div>
</div>
</div>
<!-- 提示与额度说明 -->
<div class="flex items-center justify-between px-1 my-2">
<span class="text-[11px] text-gray-500">
<i class="fa-regular fa-clock-rotate-left mr-1"></i>剩余 AI 推荐额度:<strong class="text-gray-800">5 次</strong>
</span>
<span class="text-[11px] text-blue-600 font-medium">额度说明</span>
</div>
<!-- 底部系统蓝操作主按钮 -->
<button class="w-full h-12 bg-[#007AFF] active:bg-blue-600 text-white font-semibold text-[15px] rounded-[14px] shadow-sm flex items-center justify-center gap-2 mt-1">
<i class="fa-solid fa-wand-magic-sparkles text-sm"></i>
开始生成 (消耗 1 次推荐额度)
</button>
<!-- 底部安全区横条 -->
<div class="w-32 h-1 bg-black rounded-full mx-auto mt-5"></div>
</div>
</div>
</div>
<p class="text-xs text-gray-500 text-center max-w-[340px]">半屏 Sheet 规范:375pt 贴合底边,支持点击遮罩/跳过直接按每日推荐生成。</p>
</div>
<!-- 阶段 2:生成中全屏动效状态页 -->
<div class="flex flex-col items-center gap-3">
<div class="flex items-center gap-2">
<span class="text-xs font-bold px-2.5 py-1 rounded-full bg-white text-[#5856D6] shadow-sm border border-purple-100">
阶段 2 · 生成中全屏动效页
</span>
</div>
<div class="device-shell bg-gradient-to-b from-[#F0F5FF] via-[#F8F9FD] to-[#F2F2F7]">
<!-- 状态栏 -->
<div class="status-bar text-gray-900">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-wifi text-[11px]"></i>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 顶部导航条 -->
<div class="nav-header">
<button class="text-[#007AFF] text-base flex items-center gap-1">
<i class="fa-solid fa-chevron-left text-sm"></i>
<span class="text-sm">返回</span>
</button>
<span class="font-semibold text-[17px] text-gray-900">AI 正在搭配</span>
<div class="capsule">
<span class="text-xs tracking-wider text-gray-800 font-bold">···</span>
<div class="capsule-divider"></div>
<i class="fa-regular fa-circle-dot text-[11px] text-gray-800"></i>
</div>
</div>
<!-- 动效主体中央容器 -->
<div class="flex-1 flex flex-col items-center justify-center px-6 relative">
<!-- 装饰性星座星图光环粒子 -->
<div class="absolute w-72 h-72 rounded-full border border-blue-200/60 spin-slow pointer-events-none">
<span class="absolute -top-1.5 left-1/2 w-3 h-3 rounded-full bg-[#007AFF]/40"></span>
<span class="absolute bottom-6 right-6 w-2 h-2 rounded-full bg-[#5856D6]/50"></span>
<span class="absolute top-16 left-4 w-2 h-2 rounded-full bg-blue-300"></span>
</div>
<!-- 中央衣物线稿轮播与光晕 -->
<div class="relative w-44 h-44 rounded-3xl bg-white shadow-xl flex items-center justify-center p-6 border border-blue-100 pulse-glow">
<!-- 轮播线稿模拟:开衫、T恤、牛仔裤交错层叠 -->
<svg class="w-24 h-24 stroke-[#007AFF] stroke-[1.8] fill-none" viewBox="0 0 100 100">
<!-- 线条衣架与上装轮廓 -->
<path d="M 50 15 Q 50 10 46 8 A 5 5 0 0 0 42 16 L 50 22 L 78 35 L 70 48 L 62 44 L 62 82 L 38 82 L 38 44 L 30 48 L 22 35 Z" stroke-linejoin="round" stroke-linecap="round"/>
<line x1="50" y1="22" x2="50" y2="82" stroke-dasharray="3 3" stroke="#8E8E93" />
<!-- 星芒小图标 -->
<circle cx="76" cy="20" r="2.5" fill="#5856D6" stroke="none"/>
<path d="M 76 14 L 77.5 18.5 L 82 20 L 77.5 21.5 L 76 26 L 74.5 21.5 L 70 20 L 74.5 18.5 Z" fill="#5856D6" stroke="none"/>
</svg>
<!-- 悬浮小气泡标签 -->
<span class="absolute -bottom-3 bg-gradient-to-r from-[#007AFF] to-[#5856D6] text-white text-[11px] font-medium px-3 py-1 rounded-full shadow-md">
<i class="fa-solid fa-sparkles mr-1 text-[10px]"></i>智能匹配中
</span>
</div>
<!-- 引导提示文字 -->
<div class="text-center mt-8 space-y-2">
<h3 class="text-xl font-bold text-gray-900 tracking-tight">AI 正在为你搭配…</h3>
<p class="text-[13px] text-gray-500 max-w-[260px] leading-relaxed">
结合今日<span class="text-[#007AFF] font-medium">白羊座</span>运势与你的 <span class="font-semibold text-gray-800">128</span> 件衣物
</p>
</div>
<!-- 进度呼吸小点 -->
<div class="flex items-center gap-1.5 mt-6">
<span class="w-2 h-2 rounded-full bg-[#007AFF] animate-ping"></span>
<span class="w-2 h-2 rounded-full bg-[#007AFF]/60"></span>
<span class="w-2 h-2 rounded-full bg-[#007AFF]/30"></span>
</div>
<!-- 耗时温和说明 -->
<div class="mt-8 bg-white/70 backdrop-blur-sm border border-gray-200/80 px-4 py-2 rounded-full flex items-center gap-2">
<i class="fa-regular fa-clock text-xs text-gray-400"></i>
<span class="text-[11px] text-gray-500">预计耗时 2~3 秒,正在分析色彩和谐度</span>
</div>
</div>
<!-- 底部安全区 -->
<div class="safe-bottom flex justify-center">
<div class="w-32 h-1 bg-black/80 rounded-full"></div>
</div>
</div>
<p class="text-xs text-gray-500 text-center max-w-[340px]">生成中全屏态:中央矢量线稿交替,融合星座运势文案,增强感知价值。</p>
</div>
<!-- 阶段 3:推荐完成结果页 (标准态) -->
<div class="flex flex-col items-center gap-3">
<div class="flex items-center gap-2">
<span class="text-xs font-bold px-2.5 py-1 rounded-full bg-[#007AFF] text-white shadow-sm">
阶段 3 · AI 推荐结果页 (核心态)
</span>
</div>
<div class="device-shell">
<!-- 状态栏 -->
<div class="status-bar text-gray-900">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-wifi text-[11px]"></i>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 顶部二级导航栏 -->
<div class="nav-header hairline-b bg-white/80 backdrop-blur-md">
<button class="text-[#007AFF] text-base flex items-center gap-1">
<i class="fa-solid fa-chevron-left text-sm"></i>
<span class="text-sm font-normal">返回</span>
</button>
<div class="flex items-center gap-1.5">
<span class="font-semibold text-[17px] text-gray-900">AI 穿搭推荐</span>
<!-- 待保存标签 -->
<span class="text-[10px] bg-amber-50 text-amber-700 font-medium px-1.5 py-0.5 rounded border border-amber-200">
待保存
</span>
</div>
<div class="capsule">
<span class="text-xs tracking-wider text-gray-800 font-bold">···</span>
<div class="capsule-divider"></div>
<i class="fa-regular fa-circle-dot text-[11px] text-gray-800"></i>
</div>
</div>
<!-- 页面滚动内容区 -->
<div class="flex-1 overflow-y-auto ios-scroll pb-24">
<!-- 1. 顶部推荐组合大幅拼图 (4~6 件衣物拼贴) -->
<div class="p-4">
<div class="w-full h-56 bg-white rounded-2xl border border-gray-200/80 shadow-sm relative overflow-hidden p-3 flex flex-col justify-between">
<!-- 顶部角标:AI推荐徽标与星座标签 -->
<div class="flex items-center justify-between z-10">
<span class="text-[11px] px-2.5 py-1 rounded-full bg-[#5856D6]/10 text-[#5856D6] font-semibold flex items-center gap-1">
<i class="fa-solid fa-wand-magic-sparkles text-[10px]"></i>AI 专属运势匹配
</span>
<span class="text-[11px] text-gray-500 font-mono bg-gray-100/90 px-2 py-0.5 rounded-md">
4 件单品组合
</span>
</div>
<!-- 拼图式线稿排列 (4件代表:米白针织开衫、白T、直筒牛仔裤、乐福鞋) -->
<div class="grid grid-cols-4 gap-2 items-center my-auto px-1">
<!-- 单品 1:米白针织开衫 -->
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5 transform hover:-translate-y-0.5 transition-all">
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
<path d="M14 18 L24 12 L40 12 L50 18 L58 32 L48 36 L44 26 L44 54 L20 54 L20 26 L16 36 L6 32 Z" stroke-linejoin="round"/>
<line x1="32" y1="12" x2="32" y2="54" stroke="#8E8E93" stroke-width="1.2"/>
</svg>
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">米白开衫</span>
</div>
<!-- 单品 2:基础纯棉T恤 -->
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5">
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
<path d="M16 16 L24 12 Q32 18 40 12 L48 16 L56 28 L46 32 L42 24 L42 54 L22 54 L22 24 L18 32 L8 28 Z" stroke-linejoin="round"/>
</svg>
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">白色纯棉T</span>
</div>
<!-- 单品 3:直筒牛仔裤 -->
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5">
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
<path d="M18 10 L46 10 L48 54 L36 54 L32 26 L28 54 L16 54 Z" stroke-linejoin="round"/>
<line x1="32" y1="10" x2="32" y2="22" stroke="#8E8E93" stroke-width="1.2"/>
</svg>
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">直筒牛仔裤</span>
</div>
<!-- 单品 4:乐福鞋 -->
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5">
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
<ellipse cx="32" cy="38" rx="20" ry="10" stroke-linejoin="round"/>
<path d="M14 38 Q22 24 38 28 Q48 30 50 38" />
</svg>
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">皮质乐福鞋</span>
</div>
</div>
<!-- 底部浅灰标签 -->
<div class="text-right">
<span class="text-[10px] text-gray-400">点击单品可查看衣物详情</span>
</div>
</div>
</div>
<!-- 2. AI 生成的标题与搭配说明卡片 -->
<div class="px-4 mb-3">
<div class="bg-white rounded-2xl p-4 border border-gray-200/80 shadow-sm space-y-2.5">
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-950 tracking-tight">晴日轻复古通勤组合</h2>
<span class="text-xs px-2.5 py-0.5 rounded-full bg-blue-50 text-[#007AFF] font-medium border border-blue-100">
通勤
</span>
</div>
<!-- 运势与搭配建议正文 -->
<div class="bg-[#F9F9FB] rounded-xl p-3 border border-gray-100 text-[13px] leading-relaxed text-gray-700">
<div class="flex items-center gap-1.5 text-amber-500 text-xs font-semibold mb-1">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star text-gray-300"></i>
<span class="text-gray-700 font-medium ml-1">今日综合运势 4 星</span>
</div>
<p>适合以<strong class="text-gray-900 font-medium">米白针织开衫</strong>搭配<strong class="text-gray-900 font-medium">直筒牛仔裤</strong>,清爽又有层次,兼顾室内空调温度与户外舒适度。</p>
</div>
<div class="flex items-center justify-between text-[11px] text-gray-400 pt-1">
<span>生成时间:今日 09:41</span>
<span>风格:法式轻复古 · 简约</span>
</div>
</div>
</div>
<!-- 3. 「推荐单品」横向滚动列表 -->
<div class="px-4 mb-4">
<div class="flex items-center justify-between mb-2">
<span class="text-[13px] font-bold text-gray-800">推荐单品清单 (4)</span>
<span class="text-[11px] text-gray-400">向右滑动查看</span>
</div>
<div class="flex gap-2.5 overflow-x-auto ios-scroll pb-1">
<!-- 单品卡 1 -->
<div class="flex-shrink-0 w-36 bg-white rounded-xl p-2.5 border border-gray-200 shadow-sm flex items-center gap-2.5">
<div class="w-11 h-11 rounded-lg bg-[#F2F2F7] flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-vest text-lg text-[#007AFF]"></i>
</div>
<div class="overflow-hidden">
<p class="text-[12px] font-bold text-gray-900 truncate">米白针织开衫</p>
<p class="text-[10px] text-gray-500 truncate">上装 · 针织</p>
</div>
</div>
<!-- 单品卡 2 -->
<div class="flex-shrink-0 w-36 bg-white rounded-xl p-2.5 border border-gray-200 shadow-sm flex items-center gap-2.5">
<div class="w-11 h-11 rounded-lg bg-[#F2F2F7] flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-shirt text-lg text-[#007AFF]"></i>
</div>
<div class="overflow-hidden">
<p class="text-[12px] font-bold text-gray-900 truncate">白色纯棉T恤</p>
<p class="text-[10px] text-gray-500 truncate">上装 · T恤</p>
</div>
</div>
<!-- 单品卡 3 -->
<div class="flex-shrink-0 w-36 bg-white rounded-xl p-2.5 border border-gray-200 shadow-sm flex items-center gap-2.5">
<div class="w-11 h-11 rounded-lg bg-[#F2F2F7] flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-socks text-lg text-[#007AFF]"></i>
</div>
<div class="overflow-hidden">
<p class="text-[12px] font-bold text-gray-900 truncate">复古高腰牛仔</p>
<p class="text-[10px] text-gray-500 truncate">下装 · 牛仔裤</p>
</div>
</div>
</div>
</div>
</div>
<!-- 底部固定操作栏 (安全区上方,白底 + hairline-t) -->
<div class="absolute bottom-0 inset-x-0 bg-white hairline-t px-4 pt-2.5 pb-7 z-30 shadow-[0_-4px_16px_rgba(0,0,0,0.04)]">
<div class="flex gap-2.5">
<!-- 次按钮:换一套 -->
<button class="flex-1 h-11 rounded-xl border border-[#007AFF] bg-white text-[#007AFF] font-semibold text-[14px] active:bg-blue-50 flex items-center justify-center gap-1.5 transition-all">
<i class="fa-solid fa-rotate text-xs"></i>
换一套
</button>
<!-- 主按钮:保存到我的穿搭 -->
<button class="flex-[1.6] h-11 rounded-xl bg-[#007AFF] text-white font-semibold text-[14px] active:bg-blue-600 flex items-center justify-center gap-1.5 shadow-sm">
<i class="fa-solid fa-bookmark text-xs"></i>
保存到我的穿搭
</button>
</div>
<!-- 额度与180秒频控说明小字 -->
<p class="text-center text-[10px] text-[#8E8E93] mt-2 font-mono">
换一套将再消耗 1 次推荐额度 · 受 180 秒频控保护
</p>
<div class="w-32 h-1 bg-black rounded-full mx-auto mt-2"></div>
</div>
</div>
<p class="text-xs text-gray-500 text-center max-w-[340px]">结果页:顶部大拼图 + 4星运势推荐语 + 单品横滑 + 底部固定双操作栏。</p>
</div>
</main>
<!-- 规范与异常态配套画板 (三种异常态 + 业务规则说明) -->
<section class="w-full max-w-[1580px] bg-white rounded-3xl p-6 shadow-sm border border-gray-200 mt-4">
<div class="flex items-center justify-between mb-5 border-b border-gray-100 pb-3">
<div class="flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
<h2 class="text-lg font-bold text-gray-900">第 7 屏伴生交互状态与三种异常态规范</h2>
</div>
<span class="text-xs text-gray-400">微信小程序异常设计规范 (Empty States & Alerts)</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 异常态 1:衣橱为空或无可用衣物 -->
<div class="bg-[#F9F9FB] rounded-2xl p-5 border border-gray-200 flex flex-col justify-between">
<div>
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-bold text-gray-700 bg-white px-2 py-0.5 rounded border border-gray-200">异常态 1 · 缺少素材</span>
<span class="text-[11px] text-amber-600 font-medium">前置校验拦截</span>
</div>
<!-- 插画与空态内容 -->
<div class="text-center py-6">
<div class="w-16 h-16 rounded-full bg-blue-50 text-[#007AFF] flex items-center justify-center mx-auto mb-3 text-2xl">
<i class="fa-light fa-shirt"></i>
</div>
<h4 class="text-base font-bold text-gray-900">还没有可用衣物</h4>
<p class="text-xs text-gray-500 mt-1 max-w-[220px] mx-auto leading-relaxed">
先上传几件处理成功的衣物吧,AI 至少需要 2~3 件单品才能为您搭配
</p>
</div>
</div>
<button class="w-full h-10 bg-[#007AFF] text-white text-xs font-semibold rounded-xl active:bg-blue-600 shadow-sm flex items-center justify-center gap-1.5">
<i class="fa-solid fa-plus text-xs"></i>
去上传衣物
</button>
</div>
<!-- 异常态 2:额度不足 -->
<div class="bg-[#F9F9FB] rounded-2xl p-5 border border-gray-200 flex flex-col justify-between">
<div>
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-bold text-gray-700 bg-white px-2 py-0.5 rounded border border-gray-200">异常态 2 · 商业化额度</span>
<span class="text-[11px] text-rose-500 font-medium">弹窗 Alert 态</span>
</div>
<!-- 模拟 iOS Alert 居中弹窗卡片 -->
<div class="bg-white rounded-2xl p-4 border border-gray-200 shadow-md text-center my-3">
<div class="w-10 h-10 rounded-full bg-rose-50 text-rose-500 flex items-center justify-center mx-auto mb-2 text-lg">
<i class="fa-solid fa-gem"></i>
</div>
<h5 class="text-sm font-bold text-gray-900">AI 推荐额度不足</h5>
<p class="text-[11px] text-gray-500 mt-1">
本月免费推荐额度已用完。开通会员或购买加油包,解锁无限次 AI 专属穿搭灵感。
</p>
<div class="flex gap-2 mt-4">
<button class="flex-1 h-8 rounded-lg bg-gray-100 text-gray-700 text-xs font-medium">取消</button>
<button class="flex-1 h-8 rounded-lg bg-[#007AFF] text-white text-xs font-medium">去购买</button>
</div>
</div>
</div>
<p class="text-[11px] text-gray-400 text-center">符合 Apple IAP / 微信小程序虚拟支付合规指引</p>
</div>
<!-- 异常态 3:请求过于频繁 (180秒并发频控) -->
<div class="bg-[#F9F9FB] rounded-2xl p-5 border border-gray-200 flex flex-col justify-between">
<div>
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-bold text-gray-700 bg-white px-2 py-0.5 rounded border border-gray-200">异常态 3 · 180秒频控保护</span>
<span class="text-[11px] text-blue-600 font-medium">防抖 & HTTP 429</span>
</div>
<!-- 模拟 Toast 轻提示与按钮禁用态 -->
<div class="my-4 space-y-3">
<!-- iOS Toast 浮层 -->
<div class="bg-black/80 text-white rounded-full px-4 py-2 flex items-center gap-2 shadow-lg mx-auto w-fit">
<i class="fa-solid fa-hourglass-half text-amber-400 text-xs"></i>
<span class="text-xs">正在生成中,请稍候 (倒计时 142s)</span>
</div>
<!-- 禁用按钮样式展示 -->
<div class="space-y-1.5 pt-2">
<button disabled class="w-full h-10 rounded-xl bg-gray-100 text-gray-400 text-xs font-medium cursor-not-allowed border border-gray-200 flex items-center justify-center gap-1.5">
<i class="fa-solid fa-lock text-[10px]"></i>
换一套 (冷冻期中)
</button>
<p class="text-[10px] text-gray-400 text-center">上一套生成后 180s 内点击不向后端发起请求,仅轻提示</p>
</div>
</div>
</div>
<div class="bg-blue-50/70 rounded-xl p-2.5 border border-blue-100 text-[11px] text-blue-800">
<strong>保存交互规范:</strong>点击「保存到我的穿搭」后弹出轻提示「已保存到我的穿搭」,并平滑跳转至穿搭详情,标签由「待保存」变为「已保存」。
</div>
</div>
</div>
</section>
</body>
</html>