first commit
This commit is contained in:
@@ -0,0 +1,465 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
Reference in New Issue
Block a user