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

466 lines
27 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>第 5 屏 穿搭(tabBar)</title>
<script src="https://cdn.tailwindcss.com"></script>
<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", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
background-color: #E5E9F0;
-webkit-font-smoothing: antialiased;
user-select: none;
}
.iphone-canvas {
width: 375px;
height: 812px;
position: relative;
background-color: #F2F2F7;
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.15), 0 0 1px 1px rgba(0,0,0,0.06);
border-radius: 44px;
overflow: hidden;
flex-shrink: 0;
}
.frosted-bar {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background-color: rgba(249, 249, 249, 0.88);
border-bottom: 0.5px solid rgba(60, 60, 67, 0.2);
}
.frosted-tabbar {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background-color: rgba(249, 249, 249, 0.88);
border-top: 0.5px solid rgba(60, 60, 67, 0.2);
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.tabular-num {
font-variant-numeric: tabular-nums;
}
</style>
</head>
<body class="p-8 flex flex-col items-center justify-center min-h-screen gap-8">
<!-- 顶部面包屑与画板规范标 -->
<div class="flex items-center justify-between w-full max-w-[1020px] text-xs font-medium text-slate-500">
<div class="flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>
<span class="font-semibold text-slate-800 text-sm">第 5 屏 | 穿搭 (tabBar)</span>
<span class="text-slate-400">iPhone 375 × 812 pt · 微信小程序规范</span>
</div>
<div class="flex gap-2">
<span class="px-2.5 py-0.5 rounded-full bg-blue-50 text-[#007AFF] text-[11px] font-semibold">我的穿搭 / 已收藏分段流</span>
<span class="px-2.5 py-0.5 rounded-full bg-slate-100 text-slate-600 text-[11px]">拼图式衣物封面</span>
<span class="px-2.5 py-0.5 rounded-full bg-slate-100 text-slate-600 text-[11px]">伴生双态空状态</span>
</div>
</div>
<!-- 主画板展示区域:包含主视图 (iPhone 375x812) + 右侧/下方伴生空态规格 -->
<div class="flex flex-col lg:flex-row items-start gap-8">
<!-- 主画板:穿搭主屏 (tabBar 选中态) -->
<div class="iphone-canvas flex flex-col border-[6px] border-[#1C1C1E]">
<!-- 微信小程序原生顶部状态栏与胶囊栏 -->
<div class="frosted-bar pt-3 pb-2.5 px-4 sticky top-0 z-30 flex-shrink-0">
<!-- iOS 顶部状态栏 -->
<div class="flex justify-between items-center text-[12px] font-semibold text-black mb-2 px-1 tracking-tight">
<span>9:41</span>
<div class="flex items-center gap-1.5">
<!-- 信号 -->
<svg class="w-3.5 h-2.5" viewBox="0 0 18 12" fill="currentColor">
<rect x="0" y="8" width="3" height="4" rx="0.5"/>
<rect x="4.5" y="5.5" width="3" height="6.5" rx="0.5"/>
<rect x="9" y="3" width="3" height="9" rx="0.5"/>
<rect x="13.5" y="0" width="3" height="12" rx="0.5"/>
</svg>
<!-- 5G / Wifi -->
<svg class="w-3.5 h-3" viewBox="0 0 16 12" fill="currentColor">
<path d="M8 3.5C5.2 3.5 2.7 4.7 1 6.6L8 12L15 6.6C13.3 4.7 10.8 3.5 8 3.5Z"/>
</svg>
<!-- 电池 -->
<div class="w-5 h-2.5 border border-black rounded-[3px] p-0.5 flex items-center">
<div class="w-full h-full bg-black rounded-[1px]"></div>
</div>
</div>
</div>
<!-- 微信小程序导航栏:居中页面标题 + 右侧微信胶囊 -->
<div class="relative h-10 flex items-center justify-center">
<span class="text-[17px] font-semibold text-black tracking-tight">穿搭</span>
<!-- 微信原生胶囊按钮 (固定右上角) -->
<div class="absolute right-0 h-8 px-2.5 rounded-full border border-black/15 bg-white/70 backdrop-blur-md flex items-center gap-2 shadow-sm">
<span class="flex items-center gap-0.5 text-black">
<span class="w-1 h-1 rounded-full bg-black"></span>
<span class="w-1.5 h-1.5 rounded-full bg-black"></span>
<span class="w-1 h-1 rounded-full bg-black"></span>
</span>
<div class="w-[0.5px] h-3.5 bg-black/20"></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 rounded-full bg-black"></div>
</div>
</div>
</div>
</div>
<!-- 页面核心内容滚动区域 -->
<div class="flex-1 overflow-y-auto hide-scrollbar px-4 pt-3 pb-24 space-y-3.5">
<!-- 1. 分段控件 (Segmented Control):我的穿搭 / 已收藏 -->
<div class="p-0.5 bg-[#767680]/12 rounded-[9px] flex items-center relative text-[13px] font-medium">
<!-- 选中滑块 (我的穿搭) -->
<button class="flex-1 py-1.5 text-center font-semibold text-[#007AFF] bg-white rounded-[7px] shadow-sm transition-all flex items-center justify-center gap-1">
<span>我的穿搭</span>
<span class="text-[11px] text-[#007AFF]/80 font-normal tabular-num">(12)</span>
</button>
<button class="flex-1 py-1.5 text-center text-[#8E8E93] hover:text-black transition-all flex items-center justify-center gap-1">
<span>已收藏</span>
<span class="text-[11px] text-[#8E8E93] tabular-num">(5)</span>
</button>
</div>
<!-- 2. 功能操作入口条:+ 创建穿搭 与 AI 推荐 -->
<div class="flex items-center justify-between pt-0.5 pb-1">
<div class="text-[11px] text-[#8E8E93]">
共 12 套穿搭组合
</div>
<div class="flex items-center gap-2">
<!-- 描边小按钮:+ 创建穿搭 -->
<button class="h-7 px-2.5 rounded-full border border-[#007AFF] text-[#007AFF] text-[12px] font-medium flex items-center gap-1 bg-white active:bg-blue-50">
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
<span>创建穿搭</span>
</button>
<!-- 系统蓝小按钮:AI 推荐 -->
<button class="h-7 px-3 rounded-full bg-[#007AFF] text-white text-[12px] font-medium flex items-center gap-1.5 shadow-sm active:opacity-80">
<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/>
</svg>
<span>AI 推荐</span>
</button>
</div>
</div>
<!-- 3. 纵向穿搭卡片流 -->
<!-- 卡片 1:初秋通勤三件套 (4件衣物拼图,状态:AI 推荐,已公开/已收藏态展示) -->
<div class="bg-white rounded-[16px] overflow-hidden p-3.5 shadow-sm border border-black/5 active:scale-[0.99] transition-transform">
<!-- 拼图式封面横图 (4件衣物抠图错落摆放) -->
<div class="w-full h-44 bg-[#F2F2F7] rounded-[12px] p-2 relative overflow-hidden flex items-center justify-around">
<!-- 柔和浅影或底色衬托 -->
<div class="absolute inset-0 bg-gradient-to-b from-white/40 to-transparent pointer-events-none"></div>
<!-- 衣物 1: 白色纯棉T恤 -->
<div class="w-20 h-28 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform -rotate-3 hover:rotate-0 transition-transform">
<svg class="w-12 h-14 text-[#007AFF]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
<path d="M30 20 C40 30 60 30 70 20 L88 32 L78 48 L68 42 L68 85 L32 85 L32 42 L22 48 L12 32 Z" fill="#F8FAFC"/>
<rect x="54" y="44" width="10" height="12" rx="1.5" stroke-width="4"/>
</svg>
<span class="text-[9px] text-slate-500 mt-1 font-medium scale-90">纯棉短T</span>
</div>
<!-- 衣物 2: 复古高腰牛仔裤 (错落重叠) -->
<div class="w-20 h-32 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform translate-y-1 rotate-2">
<svg class="w-12 h-18 text-[#007AFF]" viewBox="0 0 100 120" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
<path d="M25 15 L75 15 L72 105 L52 105 L50 48 L48 105 L28 105 Z" fill="#F8FAFC"/>
<line x1="25" y1="28" x2="75" y2="28" stroke-width="3"/>
<path d="M42 15 L42 34 L58 34 L58 15" stroke-width="3"/>
</svg>
<span class="text-[9px] text-slate-500 mt-0.5 font-medium scale-90">牛仔裤</span>
</div>
<!-- 衣物 3: 燕麦色针织开衫 (外套) -->
<div class="w-20 h-28 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform -rotate-2">
<svg class="w-12 h-14 text-[#007AFF]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
<path d="M32 20 L50 36 L68 20 L88 30 L80 82 L66 78 L66 40 L66 85 L34 85 L34 40 L34 78 L20 82 L12 30 Z" fill="#F8FAFC"/>
<circle cx="50" cy="50" r="2" fill="currentColor"/>
<circle cx="50" cy="65" r="2" fill="currentColor"/>
</svg>
<span class="text-[9px] text-slate-500 mt-1 font-medium scale-90">针织开衫</span>
</div>
<!-- 衣物 4: 乐福鞋 / 简约配饰 -->
<div class="w-16 h-22 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform translate-y-3 rotate-4">
<svg class="w-10 h-10 text-[#007AFF]" viewBox="0 0 100 80" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 50 C25 25 65 30 85 45 C90 58 75 62 60 62 L20 62 C15 62 12 56 15 50 Z" fill="#F8FAFC"/>
<line x1="20" y1="62" x2="28" y2="70" stroke-width="6"/>
<line x1="55" y1="62" x2="62" y2="70" stroke-width="6"/>
</svg>
<span class="text-[9px] text-slate-500 mt-0.5 font-medium scale-90">乐福鞋</span>
</div>
<!-- 右下角衣物数量小角标 -->
<div class="absolute bottom-2 right-2 px-1.5 py-0.5 rounded-md bg-black/40 backdrop-blur-sm text-white text-[10px] font-medium">
4 件组合
</div>
</div>
<!-- 卡片信息区 -->
<div class="mt-3 space-y-1.5">
<!-- 第一行:穿搭名 + 状态标签 -->
<div class="flex items-center justify-between">
<h3 class="text-[16px] font-bold text-black tracking-tight">初秋通勤三件套</h3>
<div class="flex items-center gap-1.5">
<!-- AI 推荐状态标签 (系统靛蓝 #5856D6) -->
<span class="px-2 py-0.5 rounded-[5px] bg-[#5856D6]/10 text-[#5856D6] text-[11px] font-medium flex items-center gap-1">
<span class="w-1 h-1 rounded-full bg-[#5856D6]"></span>
AI 推荐
</span>
<!-- 已公开 (系统蓝) -->
<span class="px-2 py-0.5 rounded-[5px] bg-[#007AFF]/10 text-[#007AFF] text-[11px] font-medium">已公开</span>
</div>
</div>
<!-- 第二行:穿搭描述 (两行截断) -->
<p class="text-[13px] text-[#3C3C43]/90 leading-snug line-clamp-2">
白T配直筒牛仔裤,清爽干净,外搭浅燕麦开衫保暖又有层次,适合初秋通勤与日常出行。
</p>
<!-- 第三行:场景标签 + 灰色小字「4 件衣物」 与 底部互动栏 (点赞与收藏) -->
<div class="flex items-center justify-between pt-1.5 border-t border-[#E5E5EA]/60 mt-2">
<div class="flex items-center gap-2">
<span class="px-2 py-0.5 rounded-[4px] bg-[#F2F2F7] text-[#000000] text-[11px] font-medium">通勤</span>
<span class="px-2 py-0.5 rounded-[4px] bg-[#F2F2F7] text-[#000000] text-[11px] font-medium">休闲</span>
<span class="text-[12px] text-[#8E8E93]">4 件衣物</span>
</div>
<!-- 右侧互动操作:点赞 (128) + 收藏 (已收藏为系统蓝实心) -->
<div class="flex items-center gap-3.5">
<!-- 点赞 (心形) -->
<div class="flex items-center gap-1 text-[#8E8E93] hover:text-[#FF2D55] transition-colors">
<svg class="w-4 h-4 text-[#FF2D55] fill-[#FF2D55]" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span class="text-[12px] text-[#3C3C43] font-medium tabular-num">128</span>
</div>
<!-- 收藏 (已收藏为系统蓝实心 star) -->
<div class="flex items-center text-[#007AFF]">
<svg class="w-4 h-4 fill-[#007AFF]" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- 卡片 2:周末法式漫步装 (状态:仅自己可见,未收藏线框) -->
<div class="bg-white rounded-[16px] overflow-hidden p-3.5 shadow-sm border border-black/5 active:scale-[0.99] transition-transform">
<!-- 拼图封面 (3件衣物) -->
<div class="w-full h-44 bg-[#F2F2F7] rounded-[12px] p-2 relative overflow-hidden flex items-center justify-around">
<!-- 连衣裙 -->
<div class="w-24 h-34 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform -rotate-1">
<svg class="w-14 h-22 text-[#007AFF]" viewBox="0 0 100 120" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
<path d="M38 18 C44 24 56 24 62 18 L76 26 L68 44 L58 40 L72 108 L28 108 L42 40 L32 44 L24 26 Z" fill="#F8FAFC"/>
<line x1="42" y1="44" x2="58" y2="44" stroke-width="3"/>
</svg>
<span class="text-[9px] text-slate-500 mt-1 font-medium scale-90">碎花茶歇裙</span>
</div>
<!-- 草编斜挎包与小皮鞋 -->
<div class="flex flex-col gap-2">
<div class="w-18 h-16 bg-white/90 rounded-[8px] shadow-sm flex flex-col items-center justify-center p-1">
<svg class="w-8 h-8 text-[#007AFF]" viewBox="0 0 80 80" fill="none" stroke="currentColor" stroke-width="5">
<rect x="20" y="32" width="40" height="36" rx="4" fill="#F8FAFC"/>
<path d="M28 32 C28 18 52 18 52 32"/>
</svg>
<span class="text-[8px] text-slate-500 font-medium scale-80">斜挎包</span>
</div>
<div class="w-18 h-14 bg-white/90 rounded-[8px] shadow-sm flex flex-col items-center justify-center p-1">
<svg class="w-8 h-6 text-[#007AFF]" viewBox="0 0 80 60" fill="none" stroke="currentColor" stroke-width="5">
<path d="M12 40 C22 20 58 24 72 36 C76 46 64 50 50 50 L18 50 Z" fill="#F8FAFC"/>
</svg>
<span class="text-[8px] text-slate-500 font-medium scale-80">玛丽珍</span>
</div>
</div>
<div class="absolute bottom-2 right-2 px-1.5 py-0.5 rounded-md bg-black/40 backdrop-blur-sm text-white text-[10px] font-medium">
3 件组合
</div>
</div>
<!-- 卡片信息区 -->
<div class="mt-3 space-y-1.5">
<div class="flex items-center justify-between">
<h3 class="text-[16px] font-bold text-black tracking-tight">周末法式漫步装</h3>
<!-- 状态标签:仅自己可见 (系统灰) -->
<span class="px-2 py-0.5 rounded-[5px] bg-[#8E8E93]/10 text-[#8E8E93] text-[11px] font-medium">仅自己可见</span>
</div>
<p class="text-[13px] text-[#3C3C43]/90 leading-snug line-clamp-2">
法式碎花中长裙搭配复古玛丽珍鞋与浅色手袋,轻盈惬意,适合周末野餐、画展或咖啡约会。
</p>
<div class="flex items-center justify-between pt-1.5 border-t border-[#E5E5EA]/60 mt-2">
<div class="flex items-center gap-2">
<span class="px-2 py-0.5 rounded-[4px] bg-[#F2F2F7] text-[#000000] text-[11px] font-medium">约会</span>
<span class="px-2 py-0.5 rounded-[4px] bg-[#F2F2F7] text-[#000000] text-[11px] font-medium">假日</span>
<span class="text-[12px] text-[#8E8E93]">3 件衣物</span>
</div>
<!-- 互动操作:点赞 + 收藏 (未收藏为线框) -->
<div class="flex items-center gap-3.5">
<div class="flex items-center gap-1 text-[#8E8E93]">
<svg class="w-4 h-4 text-[#8E8E93]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/>
</svg>
<span class="text-[12px] text-[#8E8E93] font-medium tabular-num">14</span>
</div>
<!-- 未收藏态 (线框 star) -->
<div class="flex items-center text-[#8E8E93] hover:text-[#007AFF]">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- 触底轻提示 -->
<div class="text-center py-2 text-[11px] text-[#C7C7CC]">
已经到底了 · 点击右上角可生成更多穿搭
</div>
</div>
<!-- 微信小程序标准 5-tabBar (穿搭当前为系统蓝选中态) -->
<div class="frosted-tabbar absolute bottom-0 inset-x-0 h-[64px] pb-3 pt-1.5 px-4 flex justify-between items-center z-30">
<!-- 1. 衣橱 -->
<div class="flex flex-col items-center justify-center flex-1 text-[#8E8E93] active:opacity-70">
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4a2 2 0 00-2 2c0 .738.404 1.376 1 1.723V9H4.25A2.25 2.25 0 002 11.25v.75a2 2 0 002 2h16a2 2 0 002-2v-.75A2.25 2.25 0 0019.75 9H13V7.723A2.002 2.002 0 0014 6a2 2 0 00-2-2z"/>
</svg>
<span class="text-[10px] font-medium mt-0.5">衣橱</span>
</div>
<!-- 2. 穿搭 (选中态: #007AFF) -->
<div class="flex flex-col items-center justify-center flex-1 text-[#007AFF]">
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M7 3l4 3 4-3 5 4-3 4-2-1v10H9V10L7 11 4 7l3-4z"/>
</svg>
<span class="text-[10px] font-semibold mt-0.5">穿搭</span>
</div>
<!-- 3. 运势 -->
<div class="flex flex-col items-center justify-center flex-1 text-[#8E8E93]">
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M12 3v18M3 12h18M5.5 5.5l13 13M18.5 5.5l-13 13"/>
</svg>
<span class="text-[10px] font-medium mt-0.5">运势</span>
</div>
<!-- 4. 通知 -->
<div class="flex flex-col items-center justify-center flex-1 text-[#8E8E93] relative">
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"/>
</svg>
<span class="text-[10px] font-medium mt-0.5">通知</span>
</div>
<!-- 5. 我的 -->
<div class="flex flex-col items-center justify-center flex-1 text-[#8E8E93]">
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
<span class="text-[10px] font-medium mt-0.5">我的</span>
</div>
</div>
<!-- 底部 Home Indicator -->
<div class="absolute bottom-1 inset-x-0 flex justify-center pointer-events-none z-40">
<div class="w-32 h-1 bg-black/40 rounded-full"></div>
</div>
</div>
<!-- 右侧伴生设计规范:包含空态规范(我的穿搭空态 / 收藏空态)与拼图封面规则 -->
<div class="w-full max-w-[480px] space-y-5">
<!-- 规范说明卡片 -->
<div class="bg-white rounded-[20px] p-5 shadow-sm border border-slate-200/80">
<div class="flex items-center gap-2 mb-3">
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
<h4 class="text-sm font-bold text-slate-800 tracking-tight">伴生状态规范(严格遵循全局与微信小程序约定)</h4>
</div>
<p class="text-xs text-slate-500 leading-relaxed mb-4">
穿搭页承担用户核心审美与搭配沉淀。支持「我的穿搭」与「已收藏」双分段切换。卡片统一为白底 <code class="text-[#007AFF] bg-blue-50 px-1 py-0.5 rounded text-[11px]">16pt</code> 圆角,内嵌多件衣物抠图错落拼图封面(最多10件)。
</p>
<!-- 伴生空态 1:我的穿搭空态 -->
<div class="border border-slate-100 bg-[#F2F2F7]/70 rounded-[16px] p-5 text-center flex flex-col items-center justify-center mb-4">
<div class="w-10 h-10 rounded-full bg-blue-100/70 text-[#007AFF] flex items-center justify-center mb-2.5">
<!-- 线性穿搭组合图标 -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M7 3l4 3 4-3 5 4-3 4-2-1v10H9V10L7 11 4 7l3-4z"/>
</svg>
</div>
<div class="text-[15px] font-bold text-[#000000] mb-1">还没有穿搭</div>
<div class="text-[12px] text-[#8E8E93] mb-3">从衣橱挑几件,搭一套吧</div>
<button class="h-8 px-4 rounded-[8px] bg-[#007AFF] text-white text-[12px] font-semibold flex items-center gap-1.5 shadow-sm">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
<span>创建穿搭</span>
</button>
<div class="text-[10px] text-slate-400 mt-2 font-mono">「我的穿搭」Tab 空状态</div>
</div>
<!-- 伴生空态 2:已收藏 Tab 空态 -->
<div class="border border-slate-100 bg-[#F2F2F7]/70 rounded-[16px] p-4 text-center flex flex-col items-center justify-center">
<div class="w-9 h-9 rounded-full bg-slate-200/60 text-[#8E8E93] flex items-center justify-center mb-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
</svg>
</div>
<div class="text-[14px] font-semibold text-[#000000] mb-0.5">还没有收藏的穿搭</div>
<div class="text-[11px] text-[#8E8E93]">在社区或AI推荐中点亮小星星,喜欢的穿搭会出现在这里</div>
<div class="text-[10px] text-slate-400 mt-2 font-mono">「已收藏」Tab 空状态</div>
</div>
</div>
<!-- 视觉规范自查清单 -->
<div class="bg-white rounded-[20px] p-4 shadow-sm border border-slate-200/80 text-xs space-y-2.5 text-slate-600">
<div class="font-semibold text-slate-900 text-xs">📐 规范落地核查表</div>
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span><b>分段控件</b>:iOS 标配微滑块,未选中态字色 #8E8E93</span>
</div>
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span><b>两项操作入口</b>:描边「+ 创建穿搭」+ 实心系统蓝「AI 推荐」</span>
</div>
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span><b>拼图封面</b>:浅灰圆角底 + 单件抠图微旋转错落排布,右下角标数量</span>
</div>
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span><b>三态标签</b>:仅自己可见(灰)、已公开(蓝)、AI推荐(#5856D6 靛蓝)</span>
</div>
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span><b>交互图标</b>:点赞(heart)+ 收藏(star,未收藏线框 / 已收藏实心蓝)</span>
</div>
</div>
</div>
</div>
</body>
</html>