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

550 lines
29 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>第10屏 通知(tabBar全状态画板)</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=Inter:wght@400;500;600;700&display=swap');
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background-color: #EBF0F5;
color: #1C1C1E;
-webkit-font-smoothing: antialiased;
}
.mockup-frame {
width: 375px;
height: 812px;
min-width: 375px;
min-height: 812px;
border-radius: 44px;
overflow: hidden;
position: relative;
background-color: #F2F2F7;
box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.18), 0 0 0 10px #1E232A, 0 0 0 12px #2C323B;
}
/* 微信胶囊按钮 */
.capsule-btn {
width: 87px;
height: 32px;
background: rgba(255, 255, 255, 0.7);
border: 0.5px solid rgba(0, 0, 0, 0.15);
border-radius: 16px;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body class="p-8 lg:p-12 min-h-screen">
<!-- 顶部设计规范与画板说明卡片 -->
<div class="max-w-[1300px] mx-auto bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-[#E5E5EA] mb-10">
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-[#E5E5EA] pb-5 mb-5">
<div class="flex items-center gap-3">
<span class="w-3.5 h-3.5 rounded-full bg-[#007AFF] ring-4 ring-[#007AFF]/20"></span>
<h1 class="text-2xl font-bold text-[#1C1C1E] tracking-tight">第 10 屏 | 通知( tabBar 核心页 · 全状态画板 )</h1>
<span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-[#007AFF]/10 text-[#007AFF] border border-[#007AFF]/20">微信小程序 tabBar页 · 375 × 812 pt</span>
</div>
<div class="flex items-center gap-4 text-xs font-medium text-[#8E8E93]">
<span class="flex items-center gap-1.5"><i class="fa-solid fa-palette text-[#007AFF]"></i> 系统蓝 #007AFF</span>
<span class="flex items-center gap-1.5"><i class="fa-solid fa-circle text-[#FF3B30]"></i> 系统红 #FF3B30</span>
<span class="flex items-center gap-1.5"><i class="fa-solid fa-layer-group text-slate-400"></i> 分组底色 #F2F2F7</span>
<span class="flex items-center gap-1.5"><i class="fa-solid fa-bell text-[#007AFF]"></i> 5 Tab 架构已激活「通知」</span>
</div>
</div>
<div class="text-sm text-[#636366] leading-relaxed flex flex-wrap items-center gap-y-2 gap-x-6">
<span class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-500"></i> 严格遵循业务约束:不展示发送者头像,不提供「全部已读」入口</span>
<span class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-500"></i> 未读标识:标题左侧 6pt 系统蓝小圆点 + 左边缘极浅系统蓝边线</span>
<span class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-500"></i> tabBar 通知 Tab 携带红色未读徽标「7」</span>
<span class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-500"></i> 包含:列表正常态、通知详情二级页面、空态界面</span>
</div>
</div>
<!-- 主画板展示区域:3个状态画板横向排布 -->
<div class="max-w-[1300px] mx-auto flex flex-wrap justify-center items-start gap-10">
<!-- ==================== 1. 状态一:通知列表正常展示态(tabBar选中态) ==================== -->
<div class="flex flex-col items-center">
<div class="mb-4 flex items-center gap-2 text-sm font-bold text-[#1C1C1E]">
<span class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>
<span>状态 1 · 通知列表正常态 ( tabBar 选中 + 未读数「7」)</span>
</div>
<div class="mockup-frame flex flex-col justify-between select-none">
<!-- 顶部安全区与微信原生Header -->
<div class="bg-white/95 backdrop-blur-md z-30 pt-3 pb-2 border-b border-[#E5E5EA]/80 shrink-0">
<!-- 状态栏 -->
<div class="px-6 flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2">
<span>9:41</span>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-signal text-[10px]"></i>
<span class="text-[10px] font-bold">5G</span>
<i class="fa-solid fa-battery-full text-xs"></i>
</div>
</div>
<!-- 微信导航条 -->
<div class="px-4 h-10 flex items-center justify-between relative">
<div class="w-16"></div>
<span class="text-[17px] font-bold text-[#1C1C1E] tracking-tight">通知</span>
<div class="capsule-btn">
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
<div class="w-[0.5px] h-4 bg-black/15"></div>
<i class="fa-regular fa-circle-dot text-xs text-black/70"></i>
</div>
</div>
<!-- 分类筛选标签栏 (无全部已读按钮,专注文档约束) -->
<div class="px-4 pt-2.5 pb-1 flex items-center gap-2">
<div class="px-3.5 py-1.5 rounded-full text-xs font-bold bg-[#007AFF] text-white shadow-sm shadow-[#007AFF]/25">
全部
</div>
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366] hover:bg-[#E5E5EA] transition">
点赞
</div>
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366] hover:bg-[#E5E5EA] transition">
订单
</div>
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366] hover:bg-[#E5E5EA] transition">
系统
</div>
</div>
</div>
<!-- 列表内容滚动区 -->
<div class="flex-1 overflow-y-auto px-4 py-3 space-y-2.5 hide-scrollbar">
<!-- 列表项 1:未读 · 点赞通知 -->
<div class="bg-white rounded-2xl p-3.5 shadow-sm border border-[#E5E5EA]/70 relative overflow-hidden flex gap-3 cursor-pointer hover:bg-slate-50/50 transition">
<!-- 未读项极浅系统蓝左边线 -->
<div class="absolute left-0 top-0 bottom-0 w-[3.5px] bg-[#007AFF]"></div>
<!-- 左侧 40pt 圆形线性图标 (点赞:浅粉底 #FFE8EC 红字 #FF3B30) -->
<div class="w-10 h-10 rounded-full bg-[#FFE8EC] flex items-center justify-center shrink-0 text-[#FF3B30]">
<i class="fa-regular fa-heart text-lg"></i>
</div>
<!-- 右侧主体内容 -->
<div class="flex-1 min-w-0 pr-1">
<div class="flex items-center justify-between mb-1">
<div class="flex items-center gap-1.5">
<!-- 未读 6pt 系统蓝小圆点 -->
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] shrink-0"></span>
<span class="text-sm font-bold text-[#1C1C1E] tracking-tight truncate">收到新的点赞</span>
</div>
<span class="text-[11px] text-[#8E8E93] font-normal shrink-0">2小时前</span>
</div>
<p class="text-xs text-[#3A3A3C] leading-relaxed line-clamp-2">
你的穿搭「周末休闲通勤套」收到了一个赞
</p>
</div>
</div>
<!-- 列表项 2:未读 · 点赞通知 -->
<div class="bg-white rounded-2xl p-3.5 shadow-sm border border-[#E5E5EA]/70 relative overflow-hidden flex gap-3 cursor-pointer hover:bg-slate-50/50 transition">
<div class="absolute left-0 top-0 bottom-0 w-[3.5px] bg-[#007AFF]"></div>
<div class="w-10 h-10 rounded-full bg-[#FFE8EC] flex items-center justify-center shrink-0 text-[#FF3B30]">
<i class="fa-regular fa-heart text-lg"></i>
</div>
<div class="flex-1 min-w-0 pr-1">
<div class="flex items-center justify-between mb-1">
<div class="flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] shrink-0"></span>
<span class="text-sm font-bold text-[#1C1C1E] tracking-tight truncate">收到新的点赞</span>
</div>
<span class="text-[11px] text-[#8E8E93] font-normal shrink-0">4小时前</span>
</div>
<p class="text-xs text-[#3A3A3C] leading-relaxed line-clamp-2">
你的穿搭「法式复古碎花裙搭配」收到了 3 个新点赞
</p>
</div>
</div>
<!-- 列表项 3:未读 · 订单通知 (淡蓝底 #E8F2FF 系统蓝 #007AFF) -->
<div class="bg-white rounded-2xl p-3.5 shadow-sm border border-[#E5E5EA]/70 relative overflow-hidden flex gap-3 cursor-pointer hover:bg-slate-50/50 transition">
<div class="absolute left-0 top-0 bottom-0 w-[3.5px] bg-[#007AFF]"></div>
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center shrink-0 text-[#007AFF]">
<i class="fa-solid fa-receipt text-lg"></i>
</div>
<div class="flex-1 min-w-0 pr-1">
<div class="flex items-center justify-between mb-1">
<div class="flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] shrink-0"></span>
<span class="text-sm font-bold text-[#1C1C1E] tracking-tight truncate">额度包购买成功</span>
</div>
<span class="text-[11px] text-[#8E8E93] font-normal shrink-0">昨天 16:40</span>
</div>
<p class="text-xs text-[#3A3A3C] leading-relaxed line-clamp-2">
你已成功购买「AI 抠图识别 20 次额度包」,现已发放至您的账户,可在衣物上传中直接使用。
</p>
</div>
</div>
<!-- 列表项 4:未读 · 系统通知 (浅灰底 #F2F2F7 灰字 #8E8E93) -->
<div class="bg-white rounded-2xl p-3.5 shadow-sm border border-[#E5E5EA]/70 relative overflow-hidden flex gap-3 cursor-pointer hover:bg-slate-50/50 transition">
<div class="absolute left-0 top-0 bottom-0 w-[3.5px] bg-[#007AFF]"></div>
<div class="w-10 h-10 rounded-full bg-[#F2F2F7] flex items-center justify-center shrink-0 text-[#636366]">
<i class="fa-regular fa-bell text-lg"></i>
</div>
<div class="flex-1 min-w-0 pr-1">
<div class="flex items-center justify-between mb-1">
<div class="flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] shrink-0"></span>
<span class="text-sm font-bold text-[#1C1C1E] tracking-tight truncate">系统版本更新通知</span>
</div>
<span class="text-[11px] text-[#8E8E93] font-normal shrink-0">昨天 10:15</span>
</div>
<p class="text-xs text-[#3A3A3C] leading-relaxed line-clamp-2">
「纸条AI衣橱」v2.4.0 全新上线:支持穿搭社区多维度标签筛选及衣柜加密分享。
</p>
</div>
</div>
<!-- 列表项 5:已读 · 点赞通知 (无蓝点无边线,整体偏灰) -->
<div class="bg-white/80 rounded-2xl p-3.5 shadow-none border border-[#E5E5EA]/50 relative overflow-hidden flex gap-3 cursor-pointer">
<div class="w-10 h-10 rounded-full bg-[#FFE8EC]/60 flex items-center justify-center shrink-0 text-[#FF3B30]/70">
<i class="fa-regular fa-heart text-lg"></i>
</div>
<div class="flex-1 min-w-0 pr-1">
<div class="flex items-center justify-between mb-1">
<span class="text-sm font-medium text-[#636366] tracking-tight truncate">收到新的点赞</span>
<span class="text-[11px] text-[#AEAEB2] font-normal shrink-0">3天前</span>
</div>
<p class="text-xs text-[#8E8E93] leading-relaxed line-clamp-2">
你的穿搭「初春干练西装通勤风」收到了 5 个赞
</p>
</div>
</div>
<!-- 列表项 6:已读 · 系统通知 -->
<div class="bg-white/80 rounded-2xl p-3.5 shadow-none border border-[#E5E5EA]/50 relative overflow-hidden flex gap-3 cursor-pointer">
<div class="w-10 h-10 rounded-full bg-[#F2F2F7]/80 flex items-center justify-center shrink-0 text-[#8E8E93]">
<i class="fa-regular fa-bell text-lg"></i>
</div>
<div class="flex-1 min-w-0 pr-1">
<div class="flex items-center justify-between mb-1">
<span class="text-sm font-medium text-[#636366] tracking-tight truncate">衣柜分享到期提醒</span>
<span class="text-[11px] text-[#AEAEB2] font-normal shrink-0">5天前</span>
</div>
<p class="text-xs text-[#8E8E93] leading-relaxed line-clamp-2">
你于 2025.04.08 创建的「春夏全量衣橱」公开快照已到期失效。
</p>
</div>
</div>
<!-- 列表底部触底状态 -->
<div class="pt-2 pb-1 text-center">
<span class="text-[11px] text-[#AEAEB2]">已加载全部通知</span>
</div>
</div>
<!-- 底部 5 项 tabBar (通知为激活选中态 + 红色未读数徽标「7」) -->
<div class="bg-white/95 backdrop-blur-md border-t border-[#E5E5EA] pt-2 pb-6 px-3 z-30 shrink-0">
<div class="grid grid-cols-5 text-center">
<!-- 1. 发现 -->
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
<i class="fa-regular fa-compass text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">发现</span>
</div>
<!-- 2. 衣橱 -->
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
<i class="fa-solid fa-shirt text-[18px] mb-1"></i>
<span class="text-[10px] font-medium">衣橱</span>
</div>
<!-- 3. 穿搭 -->
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
<i class="fa-regular fa-bookmark text-[18px] mb-1"></i>
<span class="text-[10px] font-medium">穿搭</span>
</div>
<!-- 4. 通知 (选中态 #007AFF + 铃铛图标 + 红色徽标「7」) -->
<div class="flex flex-col items-center justify-center text-[#007AFF] relative">
<div class="relative">
<i class="fa-solid fa-bell text-[19px] mb-1"></i>
<!-- 红色未读徽标「7」 -->
<span class="absolute -top-1.5 -right-3.5 min-w-[17px] h-[17px] px-1 bg-[#FF3B30] text-white text-[10px] font-bold rounded-full flex items-center justify-center border-2 border-white shadow-xs">
7
</span>
</div>
<span class="text-[10px] font-bold">通知</span>
</div>
<!-- 5. 我的 -->
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
<i class="fa-regular fa-user text-[18px] mb-1"></i>
<span class="text-[10px] font-medium">我的</span>
</div>
</div>
<!-- 底部 Home Bar -->
<div class="w-32 h-1 bg-black/80 rounded-full mx-auto mt-3"></div>
</div>
</div>
</div>
<!-- ==================== 2. 状态二:点击进入二级页面「通知详情」 ==================== -->
<div class="flex flex-col items-center">
<div class="mb-4 flex items-center gap-2 text-sm font-bold text-[#1C1C1E]">
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
<span>二级页面 · 通知详情 (点击后自动标为已读)</span>
</div>
<div class="mockup-frame flex flex-col justify-between select-none">
<!-- 顶部二级页面原生导航 -->
<div class="bg-white/95 backdrop-blur-md z-30 pt-3 pb-2 border-b border-[#E5E5EA]/80 shrink-0">
<div class="px-6 flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2">
<span>9:41</span>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-signal text-[10px]"></i>
<span class="text-[10px] font-bold">5G</span>
<i class="fa-solid fa-battery-full text-xs"></i>
</div>
</div>
<!-- 二级页面带返回箭头 -->
<div class="px-4 h-10 flex items-center justify-between relative">
<button class="flex items-center text-[#007AFF] text-sm font-medium gap-1 active:opacity-60 transition">
<i class="fa-solid fa-chevron-left text-base"></i>
<span>返回</span>
</button>
<span class="text-[17px] font-bold text-[#1C1C1E] tracking-tight">通知详情</span>
<div class="capsule-btn">
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
<div class="w-[0.5px] h-4 bg-black/15"></div>
<i class="fa-regular fa-circle-dot text-xs text-black/70"></i>
</div>
</div>
</div>
<!-- 详情内容卡片 -->
<div class="flex-1 overflow-y-auto p-4 hide-scrollbar">
<div class="bg-white rounded-3xl p-6 shadow-sm border border-[#E5E5EA] flex flex-col items-center text-center">
<!-- 顶部类型圆形图标 (点赞:浅粉底 #FFE8EC 红字 #FF3B30) -->
<div class="w-16 h-16 rounded-full bg-[#FFE8EC] flex items-center justify-center text-[#FF3B30] mb-4 shadow-sm">
<i class="fa-solid fa-heart text-2xl"></i>
</div>
<!-- 加粗标题 -->
<h2 class="text-lg font-bold text-[#1C1C1E] mb-2">收到新的点赞</h2>
<!-- 灰色精确时间 -->
<span class="text-xs text-[#8E8E93] mb-6 font-mono">2025-04-15 14:32</span>
<!-- 分割虚线 -->
<div class="w-full border-t border-dashed border-[#E5E5EA] mb-6"></div>
<!-- 完整内容正文 -->
<div class="w-full bg-[#F2F2F7] rounded-2xl p-4 text-left mb-6">
<p class="text-sm text-[#1C1C1E] leading-relaxed font-normal">
你的穿搭<span class="font-bold text-[#007AFF]">「周末休闲通勤套」</span>收到了一个赞。
</p>
<p class="text-xs text-[#8E8E93] mt-2">
提示:持续在社区分享高分穿搭,可获得更多穿搭达人推荐与曝光!
</p>
</div>
<!-- 关联穿搭卡片快捷入口 (引导跳转第6屏) -->
<div class="w-full border border-[#E5E5EA] rounded-2xl p-3 flex items-center justify-between hover:bg-slate-50 transition cursor-pointer">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-[#8E8E93] border border-[#E5E5EA]">
<i class="fa-solid fa-shirt text-lg text-[#007AFF]"></i>
</div>
<div class="text-left">
<div class="text-xs font-bold text-[#1C1C1E]">周末休闲通勤套</div>
<div class="text-[11px] text-[#8E8E93]">包含 3 件单品 · AI 推荐</div>
</div>
</div>
<div class="text-xs text-[#007AFF] font-medium flex items-center gap-1">
<span>查看穿搭</span>
<i class="fa-solid fa-chevron-right text-[10px]"></i>
</div>
</div>
</div>
<!-- 已读状态提示条 -->
<div class="mt-4 px-4 py-3 rounded-2xl bg-white/70 border border-[#E5E5EA] flex items-center gap-2.5 text-xs text-[#636366]">
<i class="fa-solid fa-circle-check text-emerald-500 text-sm"></i>
<span>该条通知已自动标记为已读,返回列表后小蓝点将消失</span>
</div>
</div>
<!-- 二级页面底部安全区垫高 -->
<div class="p-4 bg-white/50 backdrop-blur-xs border-t border-[#E5E5EA]/50 shrink-0">
<div class="w-32 h-1 bg-black/80 rounded-full mx-auto"></div>
</div>
</div>
</div>
<!-- ==================== 3. 状态三:空态界面 (无消息) ==================== -->
<div class="flex flex-col items-center">
<div class="mb-4 flex items-center gap-2 text-sm font-bold text-[#1C1C1E]">
<span class="w-2.5 h-2.5 rounded-full bg-slate-400"></span>
<span>状态 3 · 空态界面 (暂无通知消息)</span>
</div>
<div class="mockup-frame flex flex-col justify-between select-none">
<!-- 顶部微信原生Header -->
<div class="bg-white/95 backdrop-blur-md z-30 pt-3 pb-2 border-b border-[#E5E5EA]/80 shrink-0">
<div class="px-6 flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2">
<span>9:41</span>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-signal text-[10px]"></i>
<span class="text-[10px] font-bold">5G</span>
<i class="fa-solid fa-battery-full text-xs"></i>
</div>
</div>
<div class="px-4 h-10 flex items-center justify-between relative">
<div class="w-16"></div>
<span class="text-[17px] font-bold text-[#1C1C1E] tracking-tight">通知</span>
<div class="capsule-btn">
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
<div class="w-[0.5px] h-4 bg-black/15"></div>
<i class="fa-regular fa-circle-dot text-xs text-black/70"></i>
</div>
</div>
<!-- 分类筛选标签栏 -->
<div class="px-4 pt-2.5 pb-1 flex items-center gap-2">
<div class="px-3.5 py-1.5 rounded-full text-xs font-bold bg-[#007AFF] text-white shadow-sm shadow-[#007AFF]/25">
全部
</div>
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366]">
点赞
</div>
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366]">
订单
</div>
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366]">
系统
</div>
</div>
</div>
<!-- 空态居中展示区 -->
<div class="flex-1 flex flex-col items-center justify-center px-8 text-center">
<!-- 铃铛线稿插画 (SF Symbols 线性风格) -->
<div class="w-24 h-24 rounded-full bg-[#E5E5EA]/60 flex items-center justify-center mb-6 relative">
<div class="w-16 h-16 rounded-full bg-white flex items-center justify-center shadow-xs border border-[#E5E5EA]">
<i class="fa-regular fa-bell-slash text-3xl text-[#8E8E93]"></i>
</div>
<!-- 装饰微光点 -->
<span class="absolute top-3 right-4 w-2.5 h-2.5 rounded-full bg-[#007AFF]/20 border border-[#007AFF]/40"></span>
<span class="absolute bottom-4 left-3 w-2 h-2 rounded-full bg-[#8E8E93]/30"></span>
</div>
<!-- 文案规范对齐 -->
<h3 class="text-base font-bold text-[#1C1C1E] mb-2 tracking-tight">还没有消息</h3>
<p class="text-xs text-[#8E8E93] leading-relaxed max-w-[220px]">
穿搭被点赞、订单动态都会出现在这里
</p>
<!-- 空态引导去发现/穿搭 -->
<button class="mt-8 px-6 py-2.5 rounded-full bg-[#007AFF] text-white text-xs font-semibold shadow-sm shadow-[#007AFF]/30 active:opacity-80 transition">
去逛逛穿搭社区
</button>
</div>
<!-- 底部 5 项 tabBar (空态下无徽标) -->
<div class="bg-white/95 backdrop-blur-md border-t border-[#E5E5EA] pt-2 pb-6 px-3 z-30 shrink-0">
<div class="grid grid-cols-5 text-center">
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
<i class="fa-regular fa-compass text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">发现</span>
</div>
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
<i class="fa-solid fa-shirt text-[18px] mb-1"></i>
<span class="text-[10px] font-medium">衣橱</span>
</div>
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
<i class="fa-regular fa-bookmark text-[18px] mb-1"></i>
<span class="text-[10px] font-medium">穿搭</span>
</div>
<!-- 空态时通知 Tab 选中,但徽标隐藏 -->
<div class="flex flex-col items-center justify-center text-[#007AFF]">
<i class="fa-solid fa-bell text-[19px] mb-1"></i>
<span class="text-[10px] font-bold">通知</span>
</div>
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
<i class="fa-regular fa-user text-[18px] mb-1"></i>
<span class="text-[10px] font-medium">我的</span>
</div>
</div>
<div class="w-32 h-1 bg-black/80 rounded-full mx-auto mt-3"></div>
</div>
</div>
</div>
</div>
<!-- 底部设计核查规范表 -->
<div class="max-w-[1300px] mx-auto bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-[#E5E5EA] mt-12">
<div class="flex items-center gap-2 mb-4">
<span class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></span>
<h2 class="text-base font-bold text-[#1C1C1E]">第 10 屏 通知规范设计核查表与交互约束</h2>
<span class="text-xs text-[#8E8E93]">(严格遵守产品约束与微信小程序规范)</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-xs">
<div class="bg-[#F2F2F7] rounded-2xl p-4 border border-[#E5E5EA]">
<div class="font-bold text-[#1C1C1E] mb-1.5 flex items-center gap-1.5">
<i class="fa-solid fa-ban text-[#FF3B30]"></i> 1. 明确负向约束恪守
</div>
<p class="text-[#636366] leading-relaxed">
界面中<strong>绝不展示发送者头像</strong>(仅保留左侧分类圆形图标),且<strong>不提供「全部已读」入口</strong>,分类栏仅提供「全部、点赞、订单、系统」四项轻量切换。
</p>
</div>
<div class="bg-[#F2F2F7] rounded-2xl p-4 border border-[#E5E5EA]">
<div class="font-bold text-[#1C1C1E] mb-1.5 flex items-center gap-1.5">
<i class="fa-solid fa-circle text-[#007AFF]"></i> 2. 未读与已读强弱对比
</div>
<p class="text-[#636366] leading-relaxed">
未读项在标题左侧配置 <strong>6pt 系统蓝小圆点</strong>,卡片左边缘有一条 3.5px 极浅系统蓝高亮线;已读项移除圆点及边线,文字与图标整体转为柔和灰阶,层级分明。
</p>
</div>
<div class="bg-[#F2F2F7] rounded-2xl p-4 border border-[#E5E5EA]">
<div class="font-bold text-[#1C1C1E] mb-1.5 flex items-center gap-1.5">
<i class="fa-solid fa-icons text-[#FF2D55]"></i> 3. 40pt 类型图标配色体系
</div>
<p class="text-[#636366] leading-relaxed">
点赞为心形(浅粉底 <code class="text-[#FF3B30] font-mono">#FFE8EC</code> 红字 <code class="text-[#FF3B30] font-mono">#FF3B30</code>)、订单为票据(淡蓝底 <code class="text-[#007AFF] font-mono">#E8F2FF</code> 系统蓝)、系统为铃铛(浅灰底 <code class="text-[#8E8E93] font-mono">#F2F2F7</code> 灰字)。
</p>
</div>
<div class="bg-[#F2F2F7] rounded-2xl p-4 border border-[#E5E5EA]">
<div class="font-bold text-[#1C1C1E] mb-1.5 flex items-center gap-1.5">
<i class="fa-solid fa-bell text-[#007AFF]"></i> 4. tabBar 联动与二级页面
</div>
<p class="text-[#636366] leading-relaxed">
tabBar 通知图标右上角显示红色未读数徽标「7」;点击单条可平滑推入「通知详情」二级页面,进入即刻完成状态回写标记为已读。
</p>
</div>
</div>
</div>
</body>
</html>