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
+673
View File
@@ -0,0 +1,673 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>补充页 创建 / 编辑穿搭(全状态画板)</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: #0F172A;
color: #000000;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 40px 20px;
}
.device-shell {
width: 375px;
height: 812px;
background-color: #F2F2F7;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
border: 8px solid #1E293B;
border-radius: 44px;
flex-shrink: 0;
}
.capsule-btn {
width: 87px;
height: 32px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.9);
border: 0.5px solid rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 6px;
backdrop-filter: blur(10px);
}
.thin-border {
border-bottom: 0.5px solid #E5E5EA;
}
.thin-border-t {
border-top: 0.5px solid #E5E5EA;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.toast-pill {
background: rgba(30, 30, 30, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}
</style>
</head>
<body class="min-h-screen">
<!-- 页面主说明卡片 -->
<header class="max-w-7xl mx-auto mb-8 px-4 text-white">
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-slate-700/80 pb-5">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/20 text-blue-400 text-xs font-semibold mb-2">
<span>微信小程序</span>
<span>•</span>
<span>补充页原型规范</span>
</div>
<h1 class="text-2xl md:text-3xl font-bold tracking-tight text-white">创建 / 编辑穿搭 · 全场景状态画板</h1>
<p class="text-sm text-slate-400 mt-1">严格遵循 375×812pt 原生小程序规范、iOS 设计语言与交互反馈体系</p>
</div>
<div class="flex items-center gap-3 text-xs bg-slate-800/80 border border-slate-700 px-4 py-2 rounded-xl text-slate-300">
<div><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#007AFF] mr-1.5"></span>系统强调色 #007AFF</div>
<div><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#FF3B30] mr-1.5"></span>删除危险色 #FF3B30</div>
<div><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#F2F2F7] border border-slate-600 mr-1.5"></span>底色 #F2F2F7</div>
</div>
</div>
</header>
<!-- 画板容器:横向排列 4 个核心状态屏幕 -->
<main class="max-w-[1640px] mx-auto overflow-x-auto pb-12 pt-2 px-4 no-scrollbar">
<div class="inline-flex gap-10 items-start">
<!-- ================= 屏幕 1:创建穿搭(初始 / 未选衣物空态) ================= -->
<div class="flex flex-col items-center">
<div class="mb-3 text-center">
<span class="text-xs font-semibold uppercase tracking-wider text-blue-400 bg-blue-950/60 px-2.5 py-1 rounded-md border border-blue-800/60">State 01</span>
<h2 class="text-base font-medium text-slate-200 mt-1">创建穿搭 · 初始空态</h2>
<p class="text-xs text-slate-400">无衣物预览占位、保存按钮置灰禁用</p>
</div>
<div class="device-shell">
<!-- 微信状态栏 -->
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-[11px]">
<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-xs"></i>
</div>
</div>
<!-- 原生导航栏 -->
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
<div class="flex items-center w-16">
<button class="w-8 h-8 flex items-center justify-center text-black active:opacity-60">
<i class="fa-solid fa-chevron-left text-base"></i>
</button>
</div>
<div class="font-semibold text-[17px] text-[#000000]">创建穿搭</div>
<!-- 右上角胶囊 -->
<div class="w-20 flex justify-end">
<div class="capsule-btn">
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
<div class="h-3 w-[0.5px] bg-black/20"></div>
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center">
<div class="w-1.5 h-1.5 rounded-full bg-black/70"></div>
</div>
</div>
</div>
</div>
<!-- 内容滚动区 -->
<div class="flex-1 overflow-y-auto no-scrollbar p-4 space-y-3 pb-24">
<!-- 拼图预览区(空态) -->
<div class="bg-white rounded-2xl p-4 flex flex-col items-center justify-center h-44 border border-dashed border-[#C7C7CC] relative overflow-hidden group">
<div class="w-12 h-12 rounded-full bg-[#F2F2F7] flex items-center justify-center text-[#8E8E93] mb-2">
<i class="fa-solid fa-shirt text-xl text-[#8E8E93]"></i>
</div>
<p class="text-[13px] text-[#8E8E93]">还没有选择衣物</p>
<span class="text-[11px] text-[#C7C7CC] mt-0.5">点击下方「选择衣物」添加你的单品</span>
</div>
<!-- 表单卡片 -->
<div class="bg-white rounded-2xl p-4 shadow-sm space-y-3">
<!-- 穿搭名称 -->
<div>
<div class="flex justify-between items-center mb-1.5">
<label class="text-[13px] font-semibold text-[#1C1C1E]">
穿搭名称 <span class="text-[#FF3B30]">*</span>
</label>
<span class="text-[11px] text-[#8E8E93]">0/32</span>
</div>
<input
type="text"
placeholder="给这套穿搭起个名字"
class="w-full h-11 px-3.5 bg-[#F2F2F7] rounded-[10px] text-[14px] placeholder-[#C7C7CC] outline-none border border-transparent focus:border-[#007AFF]"
/>
</div>
<!-- 穿搭描述 -->
<div>
<div class="flex justify-between items-center mb-1.5">
<label class="text-[13px] font-semibold text-[#1C1C1E]">穿搭描述</label>
<span class="text-[11px] text-[#8E8E93]">0/500</span>
</div>
<textarea
rows="3"
placeholder="简单描述这套穿搭的灵感或亮点"
class="w-full p-3 bg-[#F2F2F7] rounded-[10px] text-[14px] placeholder-[#C7C7CC] outline-none resize-none border border-transparent focus:border-[#007AFF]"
></textarea>
</div>
<!-- 适合场景 -->
<div>
<div class="flex justify-between items-center mb-1.5">
<label class="text-[13px] font-semibold text-[#1C1C1E]">适合场景</label>
<span class="text-[11px] text-[#8E8E93]">最多3个</span>
</div>
<div class="flex flex-wrap gap-2 pt-0.5">
<button class="h-7 px-3 rounded-full border border-dashed border-[#007AFF] text-[#007AFF] text-xs font-medium flex items-center gap-1 bg-[#007AFF]/5">
<i class="fa-solid fa-plus text-[10px]"></i> 添加场景
</button>
<span class="text-xs text-[#8E8E93] self-center">如:通勤、约会、旅行</span>
</div>
</div>
</div>
<!-- 选择衣物分组入口卡片 -->
<div class="bg-white rounded-2xl p-4 shadow-sm flex items-center justify-between active:bg-[#F2F2F7] transition cursor-pointer">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl bg-[#007AFF]/10 text-[#007AFF] flex items-center justify-center">
<i class="fa-solid fa-vest-patches text-sm"></i>
</div>
<div>
<div class="text-[14px] font-semibold text-[#1C1C1E]">选择衣橱单品</div>
<div class="text-[12px] text-[#8E8E93]">选择 1~10 件衣物合成画报</div>
</div>
</div>
<div class="flex items-center gap-1 text-[#8E8E93] text-[13px]">
<span>未选择</span>
<i class="fa-solid fa-chevron-right text-[11px]"></i>
</div>
</div>
</div>
<!-- 底部固定栏(安全区上方) -->
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md thin-border-t px-4 pt-3 pb-8 z-30">
<button disabled class="w-full h-11 rounded-full bg-[#007AFF]/40 text-white font-semibold text-[15px] cursor-not-allowed">
保存
</button>
</div>
</div>
</div>
<!-- ================= 屏幕 2:编辑穿搭(预填已有信息 + 拼图预览 + 删除) ================= -->
<div class="flex flex-col items-center">
<div class="mb-3 text-center">
<span class="text-xs font-semibold uppercase tracking-wider text-emerald-400 bg-emerald-950/60 px-2.5 py-1 rounded-md border border-emerald-800/60">State 02</span>
<h2 class="text-base font-medium text-slate-200 mt-1">编辑穿搭 · 预填状态</h2>
<p class="text-xs text-slate-400">顶部多图抠图拼贴错落摆放、含删除红色按钮</p>
</div>
<div class="device-shell">
<!-- 微信状态栏 -->
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-[11px]">
<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-xs"></i>
</div>
</div>
<!-- 原生导航栏 -->
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
<div class="flex items-center w-16">
<button class="w-8 h-8 flex items-center justify-center text-black active:opacity-60">
<i class="fa-solid fa-chevron-left text-base"></i>
</button>
</div>
<div class="font-semibold text-[17px] text-[#000000]">编辑穿搭</div>
<div class="w-20 flex justify-end">
<div class="capsule-btn">
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
<div class="h-3 w-[0.5px] bg-black/20"></div>
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center">
<div class="w-1.5 h-1.5 rounded-full bg-black/70"></div>
</div>
</div>
</div>
</div>
<!-- 内容滚动区 -->
<div class="flex-1 overflow-y-auto no-scrollbar p-4 space-y-3 pb-36">
<!-- 顶部拼图预览区(错落抠图展示) -->
<div class="bg-white rounded-2xl p-3 shadow-sm relative overflow-hidden">
<div class="flex justify-between items-center mb-2 px-1">
<span class="text-[12px] font-semibold text-[#8E8E93]">穿搭画报拼图</span>
<span class="text-[11px] text-[#007AFF] bg-[#007AFF]/10 px-2 py-0.5 rounded-full font-medium">已组合 4 件单品</span>
</div>
<!-- 错落布局画板 -->
<div class="h-36 bg-[#F8F8FA] rounded-xl flex items-center justify-center gap-2 p-2 relative overflow-hidden border border-[#E5E5EA]">
<!-- 单品 1: 西装外套 -->
<div class="w-20 h-28 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform -rotate-2">
<div class="w-12 h-14 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
<i class="fa-solid fa-shirt text-xl text-[#3A3A3C]"></i>
</div>
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">羊毛西装</span>
<span class="text-[8px] text-[#8E8E93]">外套</span>
</div>
<!-- 单品 2: 针织内搭 -->
<div class="w-18 h-26 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform translate-y-1">
<div class="w-11 h-12 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
<i class="fa-solid fa-vest text-lg text-[#007AFF]"></i>
</div>
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">高领打底</span>
<span class="text-[8px] text-[#8E8E93]">上装</span>
</div>
<!-- 单品 3: 直筒裤 -->
<div class="w-18 h-28 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform rotate-1">
<div class="w-10 h-14 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
<i class="fa-solid fa-socks text-lg text-[#48484A]"></i>
</div>
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">垂坠阔腿裤</span>
<span class="text-[8px] text-[#8E8E93]">下装</span>
</div>
<!-- 单品 4: 乐福鞋 -->
<div class="w-16 h-22 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform rotate-3">
<div class="w-10 h-10 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
<i class="fa-solid fa-shoe-prints text-base text-[#8E8E93]"></i>
</div>
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">复古乐福</span>
<span class="text-[8px] text-[#8E8E93]">鞋履</span>
</div>
</div>
</div>
<!-- 表单卡片(已预填) -->
<div class="bg-white rounded-2xl p-4 shadow-sm space-y-3.5">
<!-- 穿搭名称 -->
<div>
<div class="flex justify-between items-center mb-1.5">
<label class="text-[13px] font-semibold text-[#1C1C1E]">
穿搭名称 <span class="text-[#FF3B30]">*</span>
</label>
<span class="text-[11px] text-[#8E8E93]">7/32</span>
</div>
<input
type="text"
value="初秋通勤三件套"
class="w-full h-11 px-3.5 bg-[#F2F2F7] rounded-[10px] text-[14px] text-[#1C1C1E] font-medium outline-none border border-transparent focus:border-[#007AFF]"
/>
</div>
<!-- 穿搭描述 -->
<div>
<div class="flex justify-between items-center mb-1.5">
<label class="text-[13px] font-semibold text-[#1C1C1E]">穿搭描述</label>
<span class="text-[11px] text-[#8E8E93]">28/500</span>
</div>
<textarea
rows="3"
class="w-full p-3 bg-[#F2F2F7] rounded-[10px] text-[14px] text-[#1C1C1E] outline-none resize-none border border-transparent focus:border-[#007AFF]"
>微凉秋日的干练职场风格,以深灰廓形羊毛西装搭配高腰阔腿裤,兼具气场与舒适度。</textarea>
</div>
<!-- 适合场景 -->
<div>
<div class="flex justify-between items-center mb-1.5">
<label class="text-[13px] font-semibold text-[#1C1C1E]">适合场景</label>
<span class="text-[11px] text-[#8E8E93]">已选 2 个</span>
</div>
<div class="flex flex-wrap gap-2 pt-0.5">
<span class="h-7 px-3 rounded-full bg-[#007AFF]/10 text-[#007AFF] text-xs font-medium flex items-center gap-1.5">
通勤
<i class="fa-solid fa-xmark text-[10px] text-[#007AFF]/60 cursor-pointer"></i>
</span>
<span class="h-7 px-3 rounded-full bg-[#007AFF]/10 text-[#007AFF] text-xs font-medium flex items-center gap-1.5">
商务会谈
<i class="fa-solid fa-xmark text-[10px] text-[#007AFF]/60 cursor-pointer"></i>
</span>
<button class="h-7 px-2.5 rounded-full border border-dashed border-[#C7C7CC] text-[#8E8E93] text-xs flex items-center gap-1 hover:border-[#007AFF] hover:text-[#007AFF]">
<i class="fa-solid fa-plus text-[10px]"></i> 添加
</button>
</div>
</div>
</div>
<!-- 选择衣物分组入口(已选 4 件) -->
<div class="bg-white rounded-2xl p-4 shadow-sm flex items-center justify-between active:bg-[#F2F2F7] transition cursor-pointer">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl bg-[#007AFF]/10 text-[#007AFF] flex items-center justify-center">
<i class="fa-solid fa-vest-patches text-sm"></i>
</div>
<div>
<div class="text-[14px] font-semibold text-[#1C1C1E]">选择衣橱单品</div>
<div class="text-[12px] text-[#8E8E93]">点击调整当前穿搭包含的衣物</div>
</div>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[13px] text-[#007AFF] font-medium">已选 4 件</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#8E8E93]"></i>
</div>
</div>
</div>
<!-- 底部固定操作栏(保存 + 删除穿搭) -->
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md thin-border-t px-4 pt-2 pb-7 z-30 space-y-2">
<!-- 删除穿搭入口(红色文字按钮) -->
<div class="text-center pt-1">
<button class="text-[14px] text-[#FF3B30] font-medium py-1 px-4 active:opacity-60">
删除穿搭
</button>
</div>
<!-- 保存主按钮 -->
<button class="w-full h-11 rounded-full bg-[#007AFF] text-white font-semibold text-[15px] shadow-sm active:bg-[#0062CC]">
保存修改
</button>
</div>
</div>
</div>
<!-- ================= 屏幕 3:衣橱多选网格选择页(二级半屏或多选网格) ================= -->
<div class="flex flex-col items-center">
<div class="mb-3 text-center">
<span class="text-xs font-semibold uppercase tracking-wider text-purple-400 bg-purple-950/60 px-2.5 py-1 rounded-md border border-purple-800/60">State 03</span>
<h2 class="text-base font-medium text-slate-200 mt-1">衣橱多选网格</h2>
<p class="text-xs text-slate-400">两列卡片、系统蓝选中描边、右上蓝对勾、最多10件</p>
</div>
<div class="device-shell">
<!-- 微信状态栏 -->
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-[11px]">
<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-xs"></i>
</div>
</div>
<!-- 原生导航栏 -->
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
<div class="flex items-center w-16">
<button class="w-8 h-8 flex items-center justify-center text-black active:opacity-60">
<i class="fa-solid fa-chevron-left text-base"></i>
</button>
</div>
<div class="font-semibold text-[17px] text-[#000000]">选择衣橱单品</div>
<div class="w-20 flex justify-end">
<div class="capsule-btn">
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
<div class="h-3 w-[0.5px] bg-black/20"></div>
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center">
<div class="w-1.5 h-1.5 rounded-full bg-black/70"></div>
</div>
</div>
</div>
</div>
<!-- 分类筛选横滑栏 -->
<div class="bg-white px-3 py-2 thin-border flex gap-2 overflow-x-auto no-scrollbar text-xs font-medium">
<button class="px-3.5 py-1 rounded-full bg-[#007AFF] text-white flex-shrink-0">全部 (18)</button>
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">外套 (5)</button>
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">上装 (7)</button>
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">下装 (4)</button>
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">鞋履 (2)</button>
</div>
<!-- 两列衣物网格(复用第2屏规范) -->
<div class="flex-1 overflow-y-auto no-scrollbar p-3.5 pb-24">
<div class="grid grid-cols-2 gap-3">
<!-- 卡片 1 (已勾选) -->
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
<i class="fa-solid fa-check"></i>
</div>
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
<i class="fa-solid fa-shirt text-3xl text-slate-700"></i>
</div>
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">黑色双排扣西装</div>
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
<span>外套 · 秋冬</span>
<span class="text-[#007AFF] font-medium">羊毛</span>
</div>
</div>
<!-- 卡片 2 (已勾选) -->
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
<i class="fa-solid fa-check"></i>
</div>
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
<i class="fa-solid fa-vest text-3xl text-blue-500"></i>
</div>
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">米白高领羊绒衫</div>
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
<span>上装 · 秋冬</span>
<span class="text-[#007AFF] font-medium">羊绒</span>
</div>
</div>
<!-- 卡片 3 (已勾选) -->
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
<i class="fa-solid fa-check"></i>
</div>
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
<i class="fa-solid fa-socks text-3xl text-slate-600"></i>
</div>
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">垂感高腰阔腿西裤</div>
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
<span>下装 · 四季</span>
<span class="text-[#007AFF] font-medium">西装面料</span>
</div>
</div>
<!-- 卡片 4 (已勾选) -->
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
<i class="fa-solid fa-check"></i>
</div>
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
<i class="fa-solid fa-shoe-prints text-3xl text-stone-500"></i>
</div>
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">复古厚底乐福鞋</div>
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
<span>鞋履 · 四季</span>
<span class="text-[#007AFF] font-medium">牛皮</span>
</div>
</div>
<!-- 卡片 5 (未勾选态) -->
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border border-[#E5E5EA] active:scale-[0.98] transition cursor-pointer">
<div class="absolute top-2 right-2 w-5 h-5 rounded-full border border-[#C7C7CC] bg-white flex items-center justify-center text-[10px] text-transparent z-10">
<i class="fa-solid fa-check"></i>
</div>
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
<i class="fa-solid fa-glasses text-3xl text-slate-400"></i>
</div>
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">金属细框墨镜</div>
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
<span>配饰 · 夏季</span>
<span>合金</span>
</div>
</div>
<!-- 卡片 6 (未勾选态) -->
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border border-[#E5E5EA] active:scale-[0.98] transition cursor-pointer">
<div class="absolute top-2 right-2 w-5 h-5 rounded-full border border-[#C7C7CC] bg-white flex items-center justify-center text-[10px] text-transparent z-10">
<i class="fa-solid fa-check"></i>
</div>
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
<i class="fa-solid fa-bag-shopping text-3xl text-amber-700/60"></i>
</div>
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">焦糖色托特手袋</div>
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
<span>包袋 · 四季</span>
<span>植鞣皮</span>
</div>
</div>
</div>
</div>
<!-- 底部固定栏(已选数量 + 确定按钮) -->
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md thin-border-t px-4 pt-3 pb-8 z-30 flex items-center justify-between">
<div>
<div class="text-[15px] font-semibold text-[#1C1C1E]">
已选 <span class="text-[#007AFF]">4</span> 件
</div>
<div class="text-[11px] text-[#8E8E93]">最多可选择 10 件单品</div>
</div>
<button class="h-10 px-7 rounded-full bg-[#007AFF] text-white font-semibold text-[14px] shadow-sm active:bg-[#0062CC]">
确定
</button>
</div>
</div>
</div>
<!-- ================= 屏幕 4:异常态反馈与确认弹窗画板 ================= -->
<div class="flex flex-col items-center">
<div class="mb-3 text-center">
<span class="text-xs font-semibold uppercase tracking-wider text-rose-400 bg-rose-950/60 px-2.5 py-1 rounded-md border border-rose-800/60">State 04</span>
<h2 class="text-base font-medium text-slate-200 mt-1">异常提示 & 确认删除</h2>
<p class="text-xs text-slate-400">毛玻璃轻提示浮层、iOS 原生系统级确认对话框</p>
</div>
<div class="device-shell">
<!-- 微信状态栏 -->
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-[11px]">
<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-xs"></i>
</div>
</div>
<!-- 原生导航栏 -->
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
<div class="flex items-center w-16">
<button class="w-8 h-8 flex items-center justify-center text-black">
<i class="fa-solid fa-chevron-left text-base"></i>
</button>
</div>
<div class="font-semibold text-[17px] text-[#000000]">编辑穿搭</div>
<div class="w-20 flex justify-end">
<div class="capsule-btn">
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
<div class="h-3 w-[0.5px] bg-black/20"></div>
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center"></div>
</div>
</div>
</div>
<!-- 模拟半透明遮罩与浮层展示 -->
<div class="flex-1 p-4 flex flex-col justify-around relative">
<!-- 异常轻提示浮层 1: 未选衣物 -->
<div class="flex flex-col items-center">
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">未选衣物点击保存触发:</div>
<div class="toast-pill text-white px-4 py-2.5 rounded-2xl flex items-center gap-2.5 text-[13px] font-medium animate-pulse">
<div class="w-5 h-5 rounded-full bg-[#FF9500] flex items-center justify-center text-[10px] text-white">
<i class="fa-solid fa-exclamation"></i>
</div>
<span>至少选择 1 件衣物</span>
</div>
</div>
<!-- 异常轻提示浮层 2: 名称为空 -->
<div class="flex flex-col items-center">
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">名称为空触发:</div>
<div class="toast-pill text-white px-4 py-2.5 rounded-2xl flex items-center gap-2.5 text-[13px] font-medium">
<div class="w-5 h-5 rounded-full bg-[#FF3B30] flex items-center justify-center text-[10px] text-white">
<i class="fa-solid fa-triangle-exclamation"></i>
</div>
<span>请填写穿搭名称</span>
</div>
</div>
<!-- 异常轻提示浮层 3: 超出10件 -->
<div class="flex flex-col items-center">
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">多选超过10件触发:</div>
<div class="toast-pill text-white px-4 py-2.5 rounded-2xl flex items-center gap-2.5 text-[13px] font-medium">
<div class="w-5 h-5 rounded-full bg-[#FF9500] flex items-center justify-center text-[10px] text-white">
<i class="fa-solid fa-circle-info"></i>
</div>
<span>最多选择 10 件衣物</span>
</div>
</div>
<!-- 成功轻提示: 保存成功 -->
<div class="flex flex-col items-center">
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">保存成功反馈:</div>
<div class="toast-pill text-white px-5 py-3 rounded-2xl flex flex-col items-center gap-1.5 text-[13px] font-medium">
<i class="fa-solid fa-circle-check text-2xl text-[#34C759]"></i>
<span>已保存</span>
</div>
</div>
<!-- 原生 iOS 确认弹窗:确认删除这套穿搭? -->
<div class="mt-2 bg-white/95 backdrop-blur-xl rounded-[14px] overflow-hidden border border-[#E5E5EA] shadow-xl mx-2">
<div class="p-4 text-center">
<div class="font-semibold text-[17px] text-[#000000]">确认删除这套穿搭?</div>
<div class="text-[13px] text-[#8E8E93] mt-1 leading-snug">删除后不可恢复,但不会影响衣橱内的单品。</div>
</div>
<div class="border-t border-[#E5E5EA] grid grid-cols-2">
<button class="h-11 text-[17px] text-[#007AFF] font-normal border-r border-[#E5E5EA] active:bg-[#F2F2F7]">
取消
</button>
<button class="h-11 text-[17px] text-[#FF3B30] font-semibold active:bg-[#F2F2F7]">
确认删除
</button>
</div>
</div>
</div>
<!-- 底部安全区占位 -->
<div class="h-8 bg-white"></div>
</div>
</div>
</div>
</main>
<!-- 底部规格对照与交付说明 -->
<footer class="max-w-7xl mx-auto mt-6 px-4">
<div class="bg-slate-800/80 border border-slate-700/80 rounded-2xl p-6 text-slate-300">
<h3 class="text-white font-semibold text-base mb-3 flex items-center gap-2">
<i class="fa-solid fa-clipboard-check text-blue-400"></i>
补充页设计规范落地检查清单
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs leading-relaxed text-slate-400">
<div class="bg-slate-900/60 p-3.5 rounded-xl border border-slate-700/50">
<div class="font-medium text-slate-200 mb-1 text-[13px]">1. 视图与拼图引擎</div>
<p>顶部预览区在未选衣物时展示 <code class="text-blue-400">#F2F2F7</code> 占位与线性衣架;已选时自适应渲染错落层次抠图卡片,并标注已选件数。</p>
</div>
<div class="bg-slate-900/60 p-3.5 rounded-xl border border-slate-700/50">
<div class="font-medium text-slate-200 mb-1 text-[13px]">2. 完整表单与交互约束</div>
<p>名称必填(上限32字)、描述多行(上限500字含字数计数器)、场景快捷标签,底部保存按钮未就绪时降低透明度置灰禁用。</p>
</div>
<div class="bg-slate-900/60 p-3.5 rounded-xl border border-slate-700/50">
<div class="font-medium text-slate-200 mb-1 text-[13px]">3. 编辑状态与异常防御</div>
<p>编辑态顶部为预填数据与独立红色「删除穿搭」入口,弹窗带二次确认;集成 1~10 件衣物阈值校验与毛玻璃 Toast 轻提示。</p>
</div>
</div>
</div>
</footer>
</body>
</html>