401 lines
22 KiB
HTML
401 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>第2屏 衣橱（tabBar）</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
background-color: #E5E5EA;
|
||
margin: 0;
|
||
padding: 24px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.device-shell {
|
||
width: 375px;
|
||
height: 812px;
|
||
background-color: #F2F2F7;
|
||
border-radius: 44px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.hairline-b {
|
||
border-bottom: 0.5px solid #E5E5EA;
|
||
}
|
||
|
||
.hairline-t {
|
||
border-top: 0.5px solid rgba(0,0,0,0.12);
|
||
}
|
||
|
||
/* Hide scrollbars */
|
||
.no-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.no-scrollbar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
@keyframes pulse-slow {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.45; }
|
||
}
|
||
.skeleton-pulse {
|
||
animation: pulse-slow 1.6s ease-in-out infinite;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="flex flex-col gap-6 items-center">
|
||
<!-- 标头指示 -->
|
||
<div class="flex items-center justify-between w-[375px] px-2 text-xs font-semibold text-neutral-500">
|
||
<span class="flex items-center gap-1.5">
|
||
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
|
||
第 2 屏 ｜ 我的衣橱 (tabBar)
|
||
</span>
|
||
<span class="text-neutral-400 font-normal">375 × 812 pt</span>
|
||
</div>
|
||
|
||
<!-- iPhone 模拟画板 -->
|
||
<div class="device-shell">
|
||
<!-- 微信小程序原生顶部状态栏与胶囊导航栏 (高度约 88pt: 44pt状态栏 + 44pt导航条) -->
|
||
<div class="sticky top-0 z-30 bg-[#F2F2F7]/90 backdrop-blur-md hairline-b">
|
||
<!-- iOS 状态栏 -->
|
||
<div class="h-11 px-7 flex items-center justify-between text-[14px] font-semibold text-black tracking-tight">
|
||
<span>9:41</span>
|
||
<div class="flex items-center gap-1.5">
|
||
<!-- 信号 -->
|
||
<svg class="w-4 h-3 fill-black" viewBox="0 0 16 12">
|
||
<rect x="0" y="8" width="2.5" height="4" rx="0.5"/>
|
||
<rect x="4.5" y="5.5" width="2.5" height="6.5" rx="0.5"/>
|
||
<rect x="9" y="3" width="2.5" height="9" rx="0.5"/>
|
||
<rect x="13.5" y="0" width="2.5" height="12" rx="0.5"/>
|
||
</svg>
|
||
<!-- Wi-Fi -->
|
||
<svg class="w-3.5 h-3 fill-black" viewBox="0 0 16 12">
|
||
<path d="M8 9.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-4.24-3.24a6 6 0 0 1 8.48 0 .75.75 0 0 1-1.06 1.06 4.5 4.5 0 0 0-6.36 0 .75.75 0 0 1-1.06-1.06zm-2.83-2.83a10 10 0 0 1 14.14 0 .75.75 0 1 1-1.06 1.06 8.5 8.5 0 0 0-12.02 0 .75.75 0 0 1-1.06-1.06z"/>
|
||
</svg>
|
||
<!-- 电池 -->
|
||
<div class="w-5 h-2.5 rounded-[3px] border border-black p-[1px] flex items-center">
|
||
<div class="w-full h-full bg-black rounded-[1.5px]"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 微信原生导航栏 -->
|
||
<div class="h-11 px-4 flex items-center justify-between relative">
|
||
<div class="w-20"></div> <!-- 左侧留白占位 -->
|
||
<!-- 居中标题 -->
|
||
<h1 class="text-[17px] font-semibold text-[#000000] tracking-tight">我的衣橱</h1>
|
||
|
||
<!-- 微信右上角原生胶囊按钮 (固定尺寸 87×32 pt, 圆角 16pt) -->
|
||
<div class="flex items-center w-[87px] h-8 bg-white/70 backdrop-blur-md rounded-full border border-black/10 px-2.5 justify-between shadow-sm">
|
||
<!-- 更多 ··· -->
|
||
<svg class="w-4 h-4 text-black/80" viewBox="0 0 24 24" fill="currentColor">
|
||
<circle cx="5" cy="12" r="2"/>
|
||
<circle cx="12" cy="12" r="2"/>
|
||
<circle cx="19" cy="12" r="2"/>
|
||
</svg>
|
||
<div class="w-[0.5px] h-3.5 bg-black/15"></div>
|
||
<!-- 小程序圆环 ⊙ -->
|
||
<svg class="w-4 h-4 text-black/80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="7"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="currentColor"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 筛选分类与统计 -->
|
||
<div class="pt-2 pb-2.5">
|
||
<!-- 横向滑动分类筛选标签 -->
|
||
<div class="flex items-center gap-2 px-4 overflow-x-auto no-scrollbar py-0.5">
|
||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-[#007AFF] text-white shadow-sm flex-shrink-0 transition">全部</button>
|
||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">上装</button>
|
||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">下装</button>
|
||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">连衣裙</button>
|
||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">外套</button>
|
||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">鞋</button>
|
||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">配饰</button>
|
||
</div>
|
||
|
||
<!-- 统计说明行 -->
|
||
<div class="px-4 mt-2 flex items-center justify-between text-[11px] text-[#8E8E93] tracking-tight">
|
||
<span>共 128 件 · 上传额度剩余 13 次</span>
|
||
<span class="flex items-center gap-1 text-[#8E8E93]/80">
|
||
<svg class="w-3 h-3 text-[#34C759]" viewBox="0 0 24 24" fill="currentColor">
|
||
<circle cx="12" cy="12" r="5"/>
|
||
</svg>
|
||
云端同步就绪
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页面主体内容：滚动区域 -->
|
||
<div class="flex-1 overflow-y-auto px-4 pt-3 pb-24 no-scrollbar relative">
|
||
<!-- 微信小程序标准下拉刷新提示（视觉表达） -->
|
||
<div class="flex items-center justify-center gap-1.5 py-1.5 mb-1 opacity-40">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-[#8E8E93]"></div>
|
||
<div class="w-1.5 h-1.5 rounded-full bg-[#8E8E93]"></div>
|
||
<div class="w-1.5 h-1.5 rounded-full bg-[#8E8E93]"></div>
|
||
</div>
|
||
|
||
<!-- 两列衣物网格 (列间距与行间距均为 12pt, 卡片圆角 16pt) -->
|
||
<div class="grid grid-cols-2 gap-3">
|
||
|
||
<!-- 卡片 1: 白色纯棉T恤 (正常态) -->
|
||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||
<!-- 1:1 图片区 -->
|
||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||
<!-- 衣物简笔线稿插图 -->
|
||
<svg class="w-20 h-20 text-[#007AFF]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M22 14c2 3 6 4 10 4s8-1 10-4l12 6-3 10-7-2v24H20V28l-7 2-3-10 12-6z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||
<path d="M22 14c2 3 6 4 10 4s8-1 10-4"/>
|
||
<path d="M38 30h-8v8h8v-8z" stroke-dasharray="2 2" stroke-width="1.2"/>
|
||
</svg>
|
||
<!-- 状态徽标: 已完成分类（无角标或微标） -->
|
||
</div>
|
||
<div class="pt-2 pb-1 px-1">
|
||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">白色纯棉T恤</h3>
|
||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">上装 · T恤 · 白色</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 2: 浅蓝高腰阔腿牛仔裤 (AI 抠图中 - 系统蓝) -->
|
||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||
<svg class="w-20 h-20 text-[#007AFF]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 16h24l4 36-9 1-7-23-7 23-9-1 4-36z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||
<line x1="32" y1="16" x2="32" y2="28"/>
|
||
</svg>
|
||
<!-- 状态徽标: AI 抠图中 (系统蓝 10% 浅底 + 系统蓝字) -->
|
||
<div class="absolute top-1.5 right-1.5 bg-[#007AFF]/10 px-2 py-0.5 rounded-full flex items-center gap-1 border border-[#007AFF]/20">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] animate-pulse"></span>
|
||
<span class="text-[10px] font-medium text-[#007AFF]">AI 抠图中</span>
|
||
</div>
|
||
</div>
|
||
<div class="pt-2 pb-1 px-1">
|
||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">复古高腰牛仔裤</h3>
|
||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">下装 · 牛仔裤 · 浅蓝</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 3: 法式碎花茶歇裙 (智能分类中 - 系统蓝) -->
|
||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||
<svg class="w-20 h-20 text-[#007AFF]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M25 15l-5 8 6 3 6-5 6 5 6-3-5-8H25z" fill="#E8F2FF"/>
|
||
<path d="M26 26l-8 26h28l-8-26H26z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||
</svg>
|
||
<!-- 状态徽标: 智能分类中 (系统蓝) -->
|
||
<div class="absolute top-1.5 right-1.5 bg-[#007AFF]/10 px-2 py-0.5 rounded-full flex items-center gap-1 border border-[#007AFF]/20">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] animate-pulse"></span>
|
||
<span class="text-[10px] font-medium text-[#007AFF]">智能分类中</span>
|
||
</div>
|
||
</div>
|
||
<div class="pt-2 pb-1 px-1">
|
||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">法式碎花茶歇裙</h3>
|
||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">连衣裙 · 中长款 · 碎花</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 4: 燕麦色羊绒开衫 (排队中 - 系统灰) -->
|
||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||
<svg class="w-20 h-20 text-[#8E8E93]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M22 16l-10 6 4 16 6-2V50h20V36l6 2 4-16-10-6-10 4-10-4z" fill="#F2F2F7"/>
|
||
<line x1="32" y1="20" x2="32" y2="50"/>
|
||
</svg>
|
||
<!-- 状态徽标: 排队中 (系统灰 10% 浅底 + 灰字) -->
|
||
<div class="absolute top-1.5 right-1.5 bg-[#8E8E93]/15 px-2 py-0.5 rounded-full flex items-center gap-1">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-[#8E8E93]"></span>
|
||
<span class="text-[10px] font-medium text-[#8E8E93]">排队中</span>
|
||
</div>
|
||
</div>
|
||
<div class="pt-2 pb-1 px-1">
|
||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">燕麦色羊绒开衫</h3>
|
||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">外套 · 针织开衫 · 米色</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 5: 经典黑色西装外套 (识别失败 - 系统红 点击可重试) -->
|
||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||
<svg class="w-20 h-20 text-[#FF3B30]/60" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 16l-8 6 4 18 6-2v14h20V38l6 2 4-18-8-6-10 5-10-5z" fill="#FFF2F2"/>
|
||
<path d="M28 21l4 12 4-12"/>
|
||
</svg>
|
||
<!-- 状态徽标: 识别失败 (系统红 10% 浅底 + 红字，带重试提示) -->
|
||
<div class="absolute top-1.5 right-1.5 bg-[#FF3B30]/10 px-2 py-0.5 rounded-full flex items-center gap-1 border border-[#FF3B30]/20">
|
||
<svg class="w-2.5 h-2.5 text-[#FF3B30]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<path d="M1 4v6h6M23 20v-6h-6"/>
|
||
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
|
||
</svg>
|
||
<span class="text-[10px] font-medium text-[#FF3B30]">失败 · 重试</span>
|
||
</div>
|
||
</div>
|
||
<div class="pt-2 pb-1 px-1">
|
||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">廓形西装外套</h3>
|
||
<p class="text-[11px] text-[#FF3B30] mt-0.5 truncate">光线过暗，点击重新识别</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 6: 复古乐福鞋 (正常态) -->
|
||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||
<svg class="w-20 h-20 text-[#007AFF]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M14 36c4-8 12-10 20-8 6 1 12 6 16 6v10H14v-8z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||
<circle cx="28" cy="34" r="3" fill="#007AFF" fill-opacity="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<div class="pt-2 pb-1 px-1">
|
||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">马衔扣乐福鞋</h3>
|
||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">鞋 · 平底鞋 · 棕色</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 底部上拉加载更多指示器 -->
|
||
<div class="mt-4 mb-2 flex items-center justify-center gap-1 text-[12px] text-[#8E8E93]">
|
||
<span>正在加载更多衣物...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右下角悬浮圆形系统蓝按钮 (上传衣物) -->
|
||
<!-- 距离底部 tabBar 约 16pt，距右侧 16pt -->
|
||
<div class="absolute right-4 bottom-[74px] z-30">
|
||
<button class="w-14 h-14 rounded-full bg-[#007AFF] text-white flex items-center justify-center shadow-lg shadow-[#007AFF]/35 active:scale-95 transition">
|
||
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 微信小程序标准底部 tabBar (高度 50pt + 底部安全区 34pt = 84pt) -->
|
||
<!-- 半透明毛玻璃底 + 顶部 0.5px 发丝分隔线 -->
|
||
<div class="sticky bottom-0 z-40 bg-[#F2F2F7]/85 backdrop-blur-xl hairline-t">
|
||
<div class="h-[50px] px-3 flex items-center justify-around">
|
||
|
||
<!-- Tab 1: 衣橱 (选中态: #007AFF) -->
|
||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||
<!-- hanger 衣架图标 -->
|
||
<svg class="w-6 h-6 text-[#007AFF]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 2a3 3 0 0 0-3 3c0 .8.3 1.5.8 2.1L2 15a2 2 0 0 0 1.6 3H20.4A2 2 0 0 0 22 15L14.2 7.1c.5-.6.8-1.3.8-2.1a3 3 0 0 0-3-3z"/>
|
||
<line x1="2" y1="18" x2="22" y2="18"/>
|
||
</svg>
|
||
<span class="text-[10px] font-semibold text-[#007AFF] mt-0.5">衣橱</span>
|
||
</div>
|
||
|
||
<!-- Tab 2: 穿搭 (未选中: #8E8E93) -->
|
||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||
<!-- t-shirt / squares 图标 -->
|
||
<svg class="w-6 h-6 text-[#8E8E93]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20.38 3.46L16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/>
|
||
</svg>
|
||
<span class="text-[10px] font-medium text-[#8E8E93] mt-0.5">穿搭</span>
|
||
</div>
|
||
|
||
<!-- Tab 3: 运势 (未选中: #8E8E93, sparkles) -->
|
||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||
<svg class="w-6 h-6 text-[#8E8E93]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4L12 2z"/>
|
||
<path d="M19 16l1.2 2.8L23 20l-2.8 1.2L19 24l-1.2-2.8L15 20l2.8-1.2L19 16z"/>
|
||
</svg>
|
||
<span class="text-[10px] font-medium text-[#8E8E93] mt-0.5">运势</span>
|
||
</div>
|
||
|
||
<!-- Tab 4: 通知 (未选中: #8E8E93, bell) -->
|
||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||
<svg class="w-6 h-6 text-[#8E8E93]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
|
||
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||
</svg>
|
||
<span class="text-[10px] font-medium text-[#8E8E93] mt-0.5">通知</span>
|
||
</div>
|
||
|
||
<!-- Tab 5: 我的 (未选中: #8E8E93, person.crop.circle) -->
|
||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||
<svg class="w-6 h-6 text-[#8E8E93]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<circle cx="12" cy="10" r="3"/>
|
||
<path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/>
|
||
</svg>
|
||
<span class="text-[10px] font-medium text-[#8E8E93] mt-0.5">我的</span>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 底部 Home Indicator 安全区 (34pt) -->
|
||
<div class="h-[34px] flex items-center justify-center">
|
||
<div class="w-[134px] h-[5px] bg-black/25 rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 伴生状态说明画板（空态与骨架屏加载态） -->
|
||
<div class="w-[375px] flex flex-col gap-4">
|
||
<div class="text-xs font-semibold text-neutral-500 px-1">伴生交互状态说明（规范要求）</div>
|
||
|
||
<!-- 空态卡片 -->
|
||
<div class="bg-white rounded-[20px] p-5 shadow-sm border border-black/5 flex flex-col items-center text-center">
|
||
<div class="flex items-center justify-between w-full mb-3 text-[11px] text-[#8E8E93]">
|
||
<span class="font-semibold text-black">衣橱空状态</span>
|
||
<span class="bg-[#F2F2F7] px-2 py-0.5 rounded text-[10px]">Empty State</span>
|
||
</div>
|
||
|
||
<!-- 中央衣架线稿插画 -->
|
||
<div class="w-20 h-20 rounded-full bg-[#E8F2FF] flex items-center justify-center mb-3 text-[#007AFF]">
|
||
<svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 2a3 3 0 0 0-3 3c0 .8.3 1.5.8 2.1L2 15a2 2 0 0 0 1.6 3H20.4A2 2 0 0 0 22 15L14.2 7.1c.5-.6.8-1.3.8-2.1a3 3 0 0 0-3-3z"/>
|
||
<line x1="2" y1="18" x2="22" y2="18"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<h4 class="text-[17px] font-bold text-black mb-1">衣橱还空着</h4>
|
||
<p class="text-[13px] text-[#8E8E93] max-w-[240px] leading-relaxed mb-4">拍照上传第一件衣物，AI 自动抠图并识别属性</p>
|
||
|
||
<button class="h-[44px] px-6 rounded-[12px] bg-[#007AFF] text-white text-[15px] font-medium shadow-sm active:opacity-80">
|
||
上传衣物
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 骨架屏加载态 -->
|
||
<div class="bg-white rounded-[20px] p-4 shadow-sm border border-black/5">
|
||
<div class="flex items-center justify-between mb-3 text-[11px] text-[#8E8E93]">
|
||
<span class="font-semibold text-black">首屏骨架加载态</span>
|
||
<span class="bg-[#F2F2F7] px-2 py-0.5 rounded text-[10px]">Skeleton Screen</span>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-3 skeleton-pulse">
|
||
<div class="bg-[#F2F2F7] rounded-[16px] p-2 flex flex-col gap-2">
|
||
<div class="w-full aspect-square bg-[#E5E5EA] rounded-[12px]"></div>
|
||
<div class="w-3/4 h-3.5 bg-[#E5E5EA] rounded"></div>
|
||
<div class="w-1/2 h-2.5 bg-[#E5E5EA] rounded"></div>
|
||
</div>
|
||
<div class="bg-[#F2F2F7] rounded-[16px] p-2 flex flex-col gap-2">
|
||
<div class="w-full aspect-square bg-[#E5E5EA] rounded-[12px]"></div>
|
||
<div class="w-3/4 h-3.5 bg-[#E5E5EA] rounded"></div>
|
||
<div class="w-1/2 h-2.5 bg-[#E5E5EA] rounded"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|