first commit

This commit is contained in:
2026-09-11 01:45:04 +08:00
commit 0a8d60d87f
145 changed files with 40978 additions and 0 deletions
+549
View File
@@ -0,0 +1,549 @@
<!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>