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

571 lines
30 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>第4屏 衣物详情与编辑</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+Text:wght@400;500;600;700&display=swap');
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
-webkit-font-smoothing: antialiased;
background-color: #E5E7EB;
}
/* 微信胶囊样式 */
.wechat-capsule {
width: 87px;
height: 32px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.65);
border: 0.5px solid rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-evenly;
}
/* iOS 细分割线 */
.hairline-b {
border-bottom: 0.5px solid #E5E5EA;
}
/* 隐藏滚动条 */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="p-6 flex flex-col items-center justify-start min-h-screen">
<!-- 画板标题与提示 -->
<div class="w-full max-w-[840px] mb-4 flex items-center justify-between text-xs text-gray-500 font-medium px-2">
<div class="flex items-center gap-2">
<span class="inline-block w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>
<span class="font-bold text-gray-800 text-sm">第 4 屏 | 衣物详情与编辑</span>
<span class="text-gray-400">iPhone 375 × 812 pt 规范 · 微信小程序</span>
</div>
<span class="bg-blue-50 text-[#007AFF] px-2 py-0.5 rounded text-[11px] font-medium">浏览态 / 编辑态 / 伴生删除弹窗规范</span>
</div>
<!-- 两态对比画板容器 (横向并列或网格排布) -->
<div class="flex flex-wrap items-start justify-center gap-8 w-full max-w-[840px]">
<!-- ==================== 1. 浏览态画板 ==================== -->
<div class="flex flex-col items-center">
<div class="mb-2 text-xs font-semibold text-gray-600 bg-white/80 px-3 py-1 rounded-full border border-gray-200">
状态 A:标准浏览态 (View State)
</div>
<!-- 375 x 812 pt 手机外框 -->
<div class="w-[375px] h-[812px] bg-[#F2F2F7] rounded-[44px] shadow-2xl overflow-hidden flex flex-col relative border-[7px] border-white ring-1 ring-black/10">
<!-- 微信原生顶部状态栏 + 导航栏 -->
<div class="sticky top-0 z-30 bg-[#F2F2F7]/90 backdrop-blur-md hairline-b">
<!-- 状态栏 44pt -->
<div class="h-11 px-6 flex items-center justify-between text-black text-[13px] font-semibold pt-2">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-black">
<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>
<!-- 微信导航条 44pt -->
<div class="h-11 px-4 flex items-center justify-between relative">
<!-- 左上角原生返回图标 -->
<button class="flex items-center text-[#007AFF] active:opacity-60 transition">
<i class="fa-solid fa-chevron-left text-[17px] font-semibold"></i>
<span class="text-[15px] ml-1 font-normal">衣橱</span>
</button>
<!-- 居中标题 -->
<span class="absolute left-1/2 -translate-x-1/2 text-[17px] font-semibold text-black tracking-tight">衣物详情</span>
<!-- 右侧:微信胶囊按钮 -->
<div class="wechat-capsule">
<div class="flex items-center space-x-1">
<span class="w-1 h-1 bg-black rounded-full"></span>
<span class="w-1 h-1 bg-black rounded-full"></span>
<span class="w-1 h-1 bg-black rounded-full"></span>
</div>
<div class="w-[0.5px] h-4 bg-black/15"></div>
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black flex items-center justify-center">
<div class="w-1 h-1 bg-black rounded-full"></div>
</div>
</div>
</div>
</div>
<!-- 主内容滚动区 (无底 tabBar) -->
<div class="flex-1 overflow-y-auto no-scrollbar pb-10">
<!-- 顶部浅灰大图区:占屏约 45% (高 ~320pt) -->
<div class="w-full h-[320px] bg-[#F2F2F7] relative flex items-center justify-center p-6">
<!-- 占位白底/透明底衣物展示框 -->
<div class="w-full h-full rounded-2xl bg-white/70 border border-black/5 flex flex-col items-center justify-center relative overflow-hidden shadow-sm">
<!-- 精致矢量线稿:白色纯棉T恤 -->
<svg width="180" height="180" viewBox="0 0 100 100" fill="none" stroke="#007AFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<!-- T恤轮廓 -->
<path d="M30 20 C36 28 64 28 70 20 L86 36 L75 47 L68 40 L68 84 L32 84 L32 40 L25 47 L14 36 Z" fill="#F8FAFC" />
<!-- 领口细线 -->
<path d="M38 20 C42 27 58 27 62 20" stroke="#007AFF" stroke-width="1.8" fill="none" />
<!-- 胸前小口袋 -->
<rect x="52" y="38" width="10" height="12" rx="1.5" stroke="#5856D6" stroke-width="1.2" fill="#E8F2FF" />
</svg>
<!-- 状态胶囊标签:已完成 -->
<div class="absolute top-3 left-3 bg-white/90 backdrop-blur px-2.5 py-0.5 rounded-full text-[11px] font-medium text-[#34C759] flex items-center gap-1 border border-green-100 shadow-sm">
<span class="w-1.5 h-1.5 rounded-full bg-[#34C759]"></span>
<span>AI已识别</span>
</div>
</div>
</div>
<!-- 内容卡片容器 (左右 16pt) -->
<div class="px-4 -mt-3 relative z-10 space-y-3">
<!-- 标题与编辑按钮行 -->
<div class="bg-white rounded-2xl p-4 shadow-sm flex items-center justify-between">
<div>
<h1 class="text-[20px] font-bold text-black tracking-tight">白色纯棉T恤</h1>
<p class="text-[12px] text-[#8E8E93] mt-0.5">识别耗时 1.8s · 15维属性完整</p>
</div>
<button class="px-3.5 py-1.5 bg-[#F2F2F7] rounded-full text-[14px] font-medium text-[#007AFF] active:opacity-60 transition flex items-center gap-1">
<i class="fa-solid fa-pencil text-[12px]"></i>
<span>编辑</span>
</button>
</div>
<!-- Inset 分组列表 1:基础分类与风格 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-sm">
<div class="px-4 py-2 text-[12px] font-semibold text-[#8E8E93] bg-gray-50/50 hairline-b">基础属性</div>
<!-- 大类 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">大类</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">上装</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 小类 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">小类</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">T恤</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 风格 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">风格</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">简约</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 主色 (附带色块) -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">主色</span>
<div class="flex items-center gap-2">
<span class="text-[15px] text-[#8E8E93]">白色</span>
<span class="w-3.5 h-3.5 rounded-full border border-gray-300 bg-white shadow-xs"></span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 副色 -->
<div class="h-11 flex items-center justify-between pr-4 relative">
<span class="pl-4 text-[15px] text-[#000000]">副色</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#C7C7CC]">—</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
</div>
<!-- Inset 分组列表 2:版型与材质细节 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-sm">
<div class="px-4 py-2 text-[12px] font-semibold text-[#8E8E93] bg-gray-50/50 hairline-b">版型与材质</div>
<!-- 厚度 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">厚度</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">薄</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 版型 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">版型</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">宽松</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 材质 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">材质</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">纯棉</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 花纹 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">花纹</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">纯色</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 袖型 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">袖型</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">短袖</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 衣长 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">衣长</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">常规</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 领型 -->
<div class="h-11 flex items-center justify-between pr-4 relative">
<span class="pl-4 text-[15px] text-[#000000]">领型</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93]">圆领</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
</div>
<!-- Inset 分组列表 3:量化评分与场合 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-sm">
<div class="px-4 py-2 text-[12px] font-semibold text-[#8E8E93] bg-gray-50/50 hairline-b">智能量化评估</div>
<!-- 正式程度 (5段进度条 3/5) -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">正式程度</span>
<div class="flex items-center gap-2.5">
<div class="flex items-center gap-1">
<span class="w-3.5 h-1.5 rounded-full bg-[#007AFF]"></span>
<span class="w-3.5 h-1.5 rounded-full bg-[#007AFF]"></span>
<span class="w-3.5 h-1.5 rounded-full bg-[#007AFF]"></span>
<span class="w-3.5 h-1.5 rounded-full bg-[#E5E5EA]"></span>
<span class="w-3.5 h-1.5 rounded-full bg-[#E5E5EA]"></span>
</div>
<span class="text-[13px] font-mono text-[#8E8E93] w-6 text-right">3/5</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 适用场合 (标签形式) -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">适用场合</span>
<div class="flex items-center gap-1.5">
<span class="px-2 py-0.5 rounded-md bg-[#F2F2F7] text-[#007AFF] text-[12px] font-medium">休闲</span>
<span class="px-2 py-0.5 rounded-md bg-[#F2F2F7] text-[#007AFF] text-[12px] font-medium">通勤</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 视觉冲击力 (5段进度条 4/5) -->
<div class="h-11 flex items-center justify-between pr-4 relative">
<span class="pl-4 text-[15px] text-[#000000]">视觉冲击力</span>
<div class="flex items-center gap-2.5">
<div class="flex items-center gap-1">
<span class="w-3.5 h-1.5 rounded-full bg-[#5856D6]"></span>
<span class="w-3.5 h-1.5 rounded-full bg-[#5856D6]"></span>
<span class="w-3.5 h-1.5 rounded-full bg-[#5856D6]"></span>
<span class="w-3.5 h-1.5 rounded-full bg-[#5856D6]"></span>
<span class="w-3.5 h-1.5 rounded-full bg-[#E5E5EA]"></span>
</div>
<span class="text-[13px] font-mono text-[#8E8E93] w-6 text-right">4/5</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
</div>
<!-- 备注区 -->
<div class="bg-white rounded-2xl p-4 shadow-sm">
<div class="text-[13px] font-medium text-[#8E8E93] mb-1">备注信息</div>
<p class="text-[15px] text-gray-800 leading-snug">去年夏天买的,领口略松</p>
</div>
<!-- 底部删除按钮 -->
<div class="pt-3 pb-6 flex justify-center">
<button class="text-[#FF3B30] text-[15px] font-normal active:opacity-50 transition py-2 px-4 rounded-lg">
删除这件衣物
</button>
</div>
</div>
</div>
<!-- 底部 Home Indicator 占位 -->
<div class="h-5 w-full bg-[#F2F2F7] flex items-center justify-center pb-1">
<div class="w-32 h-1 bg-black/20 rounded-full"></div>
</div>
</div>
</div>
<!-- ==================== 2. 编辑态画板 ==================== -->
<div class="flex flex-col items-center">
<div class="mb-2 text-xs font-semibold text-[#007AFF] bg-blue-50 px-3 py-1 rounded-full border border-blue-200">
状态 B:正在编辑态 (Edit Mode)
</div>
<!-- 375 x 812 pt 手机外框 -->
<div class="w-[375px] h-[812px] bg-[#F2F2F7] rounded-[44px] shadow-2xl overflow-hidden flex flex-col relative border-[7px] border-white ring-1 ring-black/10">
<!-- 微信原生顶部状态栏 + 导航栏 -->
<div class="sticky top-0 z-30 bg-[#F2F2F7]/90 backdrop-blur-md hairline-b">
<!-- 状态栏 44pt -->
<div class="h-11 px-6 flex items-center justify-between text-black text-[13px] font-semibold pt-2">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-black">
<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>
<!-- 微信导航条 44pt -->
<div class="h-11 px-4 flex items-center justify-between relative">
<button class="flex items-center text-[#8E8E93] active:opacity-60 transition text-[15px]">
取消
</button>
<!-- 居中标题 -->
<span class="absolute left-1/2 -translate-x-1/2 text-[17px] font-semibold text-black tracking-tight">编辑衣物</span>
<!-- 右侧:胶囊按钮 -->
<div class="wechat-capsule">
<div class="flex items-center space-x-1">
<span class="w-1 h-1 bg-black rounded-full"></span>
<span class="w-1 h-1 bg-black rounded-full"></span>
<span class="w-1 h-1 bg-black rounded-full"></span>
</div>
<div class="w-[0.5px] h-4 bg-black/15"></div>
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black flex items-center justify-center">
<div class="w-1 h-1 bg-black rounded-full"></div>
</div>
</div>
</div>
</div>
<!-- 主内容滚动区 -->
<div class="flex-1 overflow-y-auto no-scrollbar pb-10">
<!-- 大图区 (带更换图片引导) -->
<div class="w-full h-[240px] bg-[#F2F2F7] relative flex items-center justify-center p-4">
<div class="w-full h-full rounded-2xl bg-white/80 border border-dashed border-[#007AFF]/40 flex flex-col items-center justify-center relative overflow-hidden">
<svg width="110" height="110" viewBox="0 0 100 100" fill="none" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M30 20 C36 28 64 28 70 20 L86 36 L75 47 L68 40 L68 84 L32 84 L32 40 L25 47 L14 36 Z" fill="#F8FAFC" />
<path d="M38 20 C42 27 58 27 62 20" stroke="#007AFF" stroke-width="1.6" fill="none" />
</svg>
<!-- 悬浮更换图片指示徽标 -->
<div class="absolute bottom-3 bg-black/60 backdrop-blur-sm text-white px-3 py-1 rounded-full text-[11px] font-medium flex items-center gap-1.5 shadow-sm">
<i class="fa-solid fa-camera text-[10px]"></i>
<span>点击重新拍照/上传</span>
</div>
</div>
</div>
<!-- 编辑表单区域 -->
<div class="px-4 space-y-3">
<!-- 名称输入框 + 保存按钮行 -->
<div class="bg-white rounded-2xl p-3 shadow-sm flex items-center gap-2 border border-[#007AFF]/30">
<div class="flex-1 flex items-center bg-[#F2F2F7] rounded-xl px-3 py-2">
<input type="text" value="白色纯棉T恤" class="w-full bg-transparent text-[16px] font-medium text-black focus:outline-none" />
<i class="fa-solid fa-circle-xmark text-[#C7C7CC] text-[13px] ml-1"></i>
</div>
<button class="px-4 py-2 bg-[#007AFF] text-white rounded-xl text-[14px] font-semibold active:opacity-80 transition shadow-sm">
保存
</button>
</div>
<!-- 可编辑属性列表 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-sm">
<div class="px-4 py-2 text-[12px] font-semibold text-[#8E8E93] bg-gray-50/50 hairline-b flex justify-between">
<span>属性微调 (点击弹起选择器)</span>
<span class="text-[#007AFF] text-[11px]">AI推导准确率 96%</span>
</div>
<!-- 大类选择行 (点击模拟激活态) -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b bg-blue-50/40">
<span class="pl-4 text-[15px] text-[#000000] font-medium">大类</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#007AFF] font-medium">上装</span>
<i class="fa-solid fa-angle-down text-[12px] text-[#007AFF]"></i>
</div>
</div>
<!-- 主色修改行 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">主色</span>
<div class="flex items-center gap-2">
<span class="text-[15px] text-gray-700">白色</span>
<span class="w-4 h-4 rounded-full border border-gray-300 bg-white"></span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 版型修改行 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">版型</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-gray-700">宽松</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 正式程度滑块/点选 -->
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
<span class="pl-4 text-[15px] text-[#000000]">正式程度</span>
<div class="flex items-center gap-1.5">
<div class="flex items-center gap-1">
<span class="w-3.5 h-2 rounded-full bg-[#007AFF]"></span>
<span class="w-3.5 h-2 rounded-full bg-[#007AFF]"></span>
<span class="w-3.5 h-2 rounded-full bg-[#007AFF]"></span>
<span class="w-3.5 h-2 rounded-full bg-gray-200"></span>
<span class="w-3.5 h-2 rounded-full bg-gray-200"></span>
</div>
<span class="text-[13px] font-mono text-[#007AFF] font-medium ml-1">3/5</span>
</div>
</div>
<!-- 适用场合编辑 -->
<div class="h-11 flex items-center justify-between pr-4 relative">
<span class="pl-4 text-[15px] text-[#000000]">适用场合</span>
<div class="flex items-center gap-1">
<span class="px-2 py-0.5 rounded bg-blue-100 text-[#007AFF] text-[12px] font-medium">休闲 ×</span>
<span class="px-2 py-0.5 rounded bg-blue-100 text-[#007AFF] text-[12px] font-medium">通勤 ×</span>
<span class="w-5 h-5 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 text-xs">+</span>
</div>
</div>
</div>
<!-- 备注编辑框 -->
<div class="bg-white rounded-2xl p-4 shadow-sm border border-transparent focus-within:border-[#007AFF]/40">
<div class="text-[12px] font-semibold text-[#8E8E93] mb-1.5">备注说明</div>
<textarea rows="2" class="w-full bg-[#F2F2F7] rounded-xl p-2.5 text-[14px] text-black focus:outline-none resize-none">去年夏天买的,领口略松</textarea>
</div>
<!-- 模拟底部弹起的选择器 (Picker Sheet) 演示 -->
<div class="bg-white/95 backdrop-blur-md rounded-2xl p-3 border border-blue-100 shadow-md">
<div class="flex justify-between items-center mb-2 px-1">
<span class="text-[12px] font-semibold text-gray-700">底部选择面板示例(大类)</span>
<span class="text-[11px] text-[#007AFF]">完成</span>
</div>
<div class="flex gap-1.5 flex-wrap">
<span class="px-3 py-1 rounded-lg bg-[#007AFF] text-white text-[13px] font-medium">上装</span>
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">下装</span>
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">连衣裙</span>
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">外套</span>
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">鞋</span>
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">配饰</span>
</div>
</div>
</div>
</div>
<!-- 底部 Home Indicator 占位 -->
<div class="h-5 w-full bg-[#F2F2F7] flex items-center justify-center pb-1">
<div class="w-32 h-1 bg-black/20 rounded-full"></div>
</div>
</div>
</div>
</div>
<!-- ==================== 伴生交互规范:删除二次确认 Alert 弹窗规范 ==================== -->
<div class="w-full max-w-[840px] mt-8 bg-white rounded-2xl p-5 shadow-sm border border-gray-200">
<div class="flex items-center gap-2 mb-3">
<i class="fa-solid fa-circle-exclamation text-[#FF3B30] text-sm"></i>
<h3 class="text-sm font-bold text-gray-900">伴生交互弹窗规范(iOS Alert & 额度回退规则)</h3>
<span class="text-[11px] text-[#8E8E93]">符合 Apple HIG 居中确认框与业务逻辑</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- 弹窗场景 1:成功/处理中状态下删除 (退还 1 次额度) -->
<div class="bg-[#F2F2F7] p-4 rounded-xl flex flex-col items-center">
<div class="text-[12px] font-medium text-gray-500 mb-2">场景 1:处理中 / 已成功衣物(回退额度)</div>
<!-- 仿 iOS Alert 控件 (270pt 宽) -->
<div class="w-[270px] bg-white/80 backdrop-blur-xl rounded-[14px] overflow-hidden shadow-lg border border-black/5 text-center">
<div class="p-4 pt-5">
<h4 class="text-[17px] font-semibold text-black tracking-tight">删除这件衣物?</h4>
<p class="text-[13px] text-gray-600 mt-1 leading-normal">删除后将退回 1 次上传额度,确认删除?</p>
</div>
<div class="grid grid-cols-2 border-t border-[#3C3C43]/15">
<button class="h-11 flex items-center justify-center text-[17px] text-[#007AFF] font-normal border-r border-[#3C3C43]/15 active:bg-black/5 transition">
取消
</button>
<button class="h-11 flex items-center justify-center text-[17px] text-[#FF3B30] font-semibold active:bg-black/5 transition">
确认删除
</button>
</div>
</div>
<span class="text-[11px] text-[#34C759] mt-2 flex items-center gap-1">
<i class="fa-solid fa-check text-[10px]"></i> 额度池同步 +1
</span>
</div>
<!-- 弹窗场景 2:识别失败状态下删除 (不提返还,失败时已自动返还) -->
<div class="bg-[#F2F2F7] p-4 rounded-xl flex flex-col items-center">
<div class="text-[12px] font-medium text-gray-500 mb-2">场景 2:识别失败的衣物(失败时已自动退回)</div>
<!-- 仿 iOS Alert 控件 (270pt 宽) -->
<div class="w-[270px] bg-white/80 backdrop-blur-xl rounded-[14px] overflow-hidden shadow-lg border border-black/5 text-center">
<div class="p-4 pt-5">
<h4 class="text-[17px] font-semibold text-black tracking-tight">确认删除?</h4>
<p class="text-[13px] text-gray-600 mt-1 leading-normal">该衣物识别失败时额度已返还,删除后将彻底移除记录。</p>
</div>
<div class="grid grid-cols-2 border-t border-[#3C3C43]/15">
<button class="h-11 flex items-center justify-center text-[17px] text-[#007AFF] font-normal border-r border-[#3C3C43]/15 active:bg-black/5 transition">
取消
</button>
<button class="h-11 flex items-center justify-center text-[17px] text-[#FF3B30] font-semibold active:bg-black/5 transition">
确认删除
</button>
</div>
</div>
<span class="text-[11px] text-[#8E8E93] mt-2 flex items-center gap-1">
<i class="fa-solid fa-info-circle text-[10px]"></i> 避免文案误导用户二次退回
</span>
</div>
</div>
</div>
</body>
</html>