550 lines
29 KiB
HTML
550 lines
29 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>第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>
|