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
+638
View File
@@ -0,0 +1,638 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第8屏 运势(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=SF+Pro+Display:wght@400;500;600;700&family=SF+Pro+Text:wght@400;500;600&family=SF+Mono:wght@400;600&display=swap');
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
background-color: #ECEEF2;
color: #1C1C1E;
-webkit-font-smoothing: antialiased;
}
.font-mono-num {
font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
font-feature-settings: "tnum" 1;
}
.device-screen {
width: 375px;
height: 812px;
position: relative;
background-color: #F2F2F7;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 0 1px 1px rgba(0, 0, 0, 0.05);
border-radius: 46px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.hairline-border {
border: 0.5px solid #E5E5EA;
}
.hairline-t {
border-top: 0.5px solid #E5E5EA;
}
.hairline-b {
border-bottom: 0.5px solid #E5E5EA;
}
/* 微信小程序顶部胶囊规范 */
.wechat-capsule {
width: 87px;
height: 32px;
background: rgba(255, 255, 255, 0.85);
border: 0.5px solid rgba(0, 0, 0, 0.12);
border-radius: 16px;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-evenly;
}
/* 骨架屏动画 */
@keyframes pulse {
0%, 100% { opacity: 0.95; }
50% { opacity: 0.45; }
}
.skeleton-box {
background-color: #E2E8F0;
animation: pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
</head>
<body class="p-8 lg:p-12 min-h-screen flex flex-col items-center">
<!-- 顶部画板总标题区 -->
<div class="w-full max-w-[1300px] mb-8 bg-white rounded-2xl p-6 shadow-sm border border-[#E5E5EA]">
<div class="flex flex-wrap items-center justify-between gap-4">
<div>
<div class="flex items-center gap-3">
<span class="inline-block w-3.5 h-3.5 rounded-full bg-[#007AFF]"></span>
<h1 class="text-2xl font-bold text-gray-900 tracking-tight">第 8 屏 | 运势( tabBar 全状态高保真画板 )</h1>
<span class="px-2.5 py-0.5 text-xs font-semibold bg-blue-50 text-[#007AFF] rounded-md border border-blue-200">微信小程序 tabBar 核心页 · 375 × 812 pt</span>
</div>
<p class="text-sm text-gray-500 mt-2">
规范约束:主色 #007AFF · 浅蓝块面 #E8F2FF · 背景底色 #F2F2F7 · 纯白卡片圆角 16pt · 0.5px 发丝分割线。严格遵循用户生日推算运势机制(不设切换星座),仅设「去设置生日」入口;四项标准维度(综合/爱情/工作/财富)及幸运色与数字。
</p>
</div>
<div class="flex items-center gap-4 text-xs font-medium text-gray-600">
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#007AFF]"></span>系统蓝 #007AFF</div>
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#E8F2FF] border border-blue-200"></span>淡蓝块面 #E8F2FF</div>
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#F2F2F7] border border-gray-300"></span>底色 #F2F2F7</div>
</div>
</div>
</div>
<!-- 三个核心状态机画板容器 -->
<div class="w-full max-w-[1300px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center mb-12">
<!-- ============================================== -->
<!-- 状态 1:正常数据态(主态 - 白羊座运势) -->
<!-- ============================================== -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>
<span class="text-sm font-bold text-gray-800">状态 1 · 每日运势正常展示态(tabBar 选中)</span>
</div>
<span class="text-xs text-gray-500 mb-4">淡蓝圆角大卡 · 四项等宽数字评分 · 幸运色彩与快捷推荐穿搭</span>
<div class="device-screen">
<!-- 微信小程序标准顶部状态栏与标题栏 -->
<div class="pt-3 px-5 pb-2 bg-white hairline-b z-20 flex-shrink-0">
<!-- iOS 状态栏 -->
<div class="flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2.5 px-0.5">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-[11px]">
<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="h-10 flex items-center justify-between relative">
<div class="w-16"></div>
<span class="text-[17px] font-semibold text-gray-900 tracking-tight">每日运势</span>
<!-- 微信右上角胶囊按钮 -->
<div class="wechat-capsule">
<i class="fa-solid fa-ellipsis text-gray-800 text-xs"></i>
<span class="w-[0.5px] h-3.5 bg-gray-300"></span>
<i class="fa-regular fa-circle-dot text-gray-800 text-[11px]"></i>
</div>
</div>
</div>
<!-- 页面主滚动内容区 -->
<div class="flex-1 overflow-y-auto px-4 py-3.5 space-y-3.5 pb-24">
<!-- 核心淡蓝大卡 (#E8F2FF,不要浓烈渐变,圆角 16pt / 20px) -->
<div class="bg-[#E8F2FF] rounded-[20px] p-4 border border-[#D5E6FC] relative overflow-hidden shadow-sm">
<!-- 顶部行:左侧星座图标与名称,右侧日期与「去设置生日」 -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<!-- 星座线性图标 (白羊座羊角象征与星芒) -->
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-[#007AFF] shadow-sm">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 21a9 9 0 0 0 9-9 9 9 0 0 0-9-9 9 9 0 0 0-9 9 9 9 0 0 0 9 9Z" stroke-opacity="0.15"/>
<path d="M12 20V8"/>
<path d="M6 7c0-2 2-3 4-2 2 1 2 3 2 3s0-2 2-3c2-1 4 0 4 2 0 3-4 5-6 8-2-3-6-5-6-8Z"/>
</svg>
</div>
<div>
<div class="flex items-center gap-1.5">
<span class="text-[16px] font-bold text-gray-900 tracking-tight">白羊座</span>
<span class="text-[10px] px-1.5 py-0.5 bg-blue-100/70 text-[#007AFF] font-medium rounded">火象星座</span>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<span class="text-[12px] font-mono-num text-gray-500 font-medium">2025.04.15</span>
<span class="text-gray-300 text-xs">|</span>
<button class="text-[12px] font-semibold text-[#007AFF] flex items-center hover:opacity-80 active:opacity-60 transition">
去设置生日
<i class="fa-solid fa-chevron-right text-[9px] ml-1"></i>
</button>
</div>
</div>
<!-- 中部综合运势评分区 -->
<div class="mt-4 pt-3.5 border-t border-[#D9E9FD] flex items-end justify-between">
<div>
<div class="text-[11px] font-medium text-gray-600 tracking-wide uppercase mb-1">综合运势</div>
<div class="flex items-baseline gap-2">
<span class="text-[40px] font-bold text-gray-900 font-mono-num leading-none tracking-tight">4.0</span>
<span class="text-xs font-medium text-gray-500">/ 5.0</span>
</div>
</div>
<!-- 5 颗星(4 颗实心系统蓝,1 颗浅灰线框) -->
<div class="flex items-center gap-1 mb-1">
<i class="fa-solid fa-star text-[#007AFF] text-base"></i>
<i class="fa-solid fa-star text-[#007AFF] text-base"></i>
<i class="fa-solid fa-star text-[#007AFF] text-base"></i>
<i class="fa-solid fa-star text-[#007AFF] text-base"></i>
<i class="fa-regular fa-star text-[#BAC7D5] text-base"></i>
</div>
</div>
<!-- 下方三项评分行(爱情 3/5、工作 5/5、财富 4/5) -->
<div class="mt-4 pt-3 border-t border-[#D9E9FD] space-y-2.5">
<!-- 爱情运势 3/5 -->
<div class="flex items-center justify-between text-xs">
<div class="w-16 text-gray-600 font-medium">爱情运势</div>
<div class="flex-1 max-w-[150px] flex items-center gap-1 mx-2">
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#D5E1F0]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#D5E1F0]"></span>
</div>
<div class="w-10 text-right font-mono-num font-semibold text-gray-800">3/5</div>
</div>
<!-- 工作运势 5/5 -->
<div class="flex items-center justify-between text-xs">
<div class="w-16 text-gray-600 font-medium">工作运势</div>
<div class="flex-1 max-w-[150px] flex items-center gap-1 mx-2">
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
</div>
<div class="w-10 text-right font-mono-num font-semibold text-[#007AFF]">5/5</div>
</div>
<!-- 财富运势 4/5 -->
<div class="flex items-center justify-between text-xs">
<div class="w-16 text-gray-600 font-medium">财富运势</div>
<div class="flex-1 max-w-[150px] flex items-center gap-1 mx-2">
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
<span class="h-2 flex-1 rounded-sm bg-[#D5E1F0]"></span>
</div>
<div class="w-10 text-right font-mono-num font-semibold text-gray-800">4/5</div>
</div>
</div>
</div>
<!-- 白色小卡:今日运势解读文案 -->
<div class="bg-white rounded-[16px] p-4 hairline-border shadow-[0_1px_2px_rgba(0,0,0,0.02)]">
<div class="flex items-center gap-1.5 mb-2">
<i class="fa-solid fa-wand-magic-sparkles text-[#007AFF] text-xs"></i>
<span class="text-xs font-bold text-gray-900">今日运势解读</span>
</div>
<p class="text-[13px] leading-relaxed text-gray-700 font-normal">
今天适合主动出击,贵人运旺,适合尝试新的穿搭风格。
</p>
</div>
<!-- 底部并排两张小卡:幸运色与幸运数字 -->
<div class="grid grid-cols-2 gap-3">
<!-- 幸运色小卡 -->
<div class="bg-white rounded-[16px] p-3.5 hairline-border shadow-[0_1px_2px_rgba(0,0,0,0.02)] flex items-center justify-between">
<div>
<span class="text-[11px] font-medium text-gray-400 block mb-1">幸运色</span>
<div class="flex items-center gap-2">
<span class="w-3.5 h-3.5 rounded-full bg-[#FF3B30] shadow-sm inline-block"></span>
<span class="text-[15px] font-bold text-gray-900">红色</span>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-[#FF3B30]">
<i class="fa-solid fa-palette text-xs"></i>
</div>
</div>
<!-- 幸运数字小卡 -->
<div class="bg-white rounded-[16px] p-3.5 hairline-border shadow-[0_1px_2px_rgba(0,0,0,0.02)] flex items-center justify-between">
<div>
<span class="text-[11px] font-medium text-gray-400 block mb-1">幸运数字</span>
<span class="text-[18px] font-bold text-gray-900 font-mono-num">6</span>
</div>
<div class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center text-[#007AFF]">
<i class="fa-solid fa-dice text-xs"></i>
</div>
</div>
</div>
<!-- 页面底部描边操作按钮:跳转 AI 推荐 -->
<div class="pt-1">
<button class="w-full h-11 rounded-[12px] bg-white border border-[#007AFF] text-[#007AFF] text-[14px] font-semibold flex items-center justify-center gap-2 active:bg-blue-50 transition shadow-sm">
<i class="fa-solid fa-sparkles text-xs"></i>
<span>生成今日推荐穿搭</span>
<i class="fa-solid fa-arrow-right text-xs ml-0.5"></i>
</button>
<p class="text-center text-[10px] text-gray-400 mt-2">将结合今日综合 4 星运势与衣橱自动搭配</p>
</div>
</div>
<!-- 底部标准微信小程序 5-Tab tabBar(运势处于选中态) -->
<div class="h-20 bg-white/95 backdrop-blur hairline-t flex items-start justify-around pt-2 px-2 absolute bottom-0 inset-x-0 z-30">
<!-- 1. 首页 (登录/授权或主页) -->
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
<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-gray-400 w-14">
<i class="fa-solid fa-shirt text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">衣橱</span>
</div>
<!-- 3. 穿搭 -->
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
<i class="fa-regular fa-bookmark text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">穿搭</span>
</div>
<!-- 4. 运势(本页选中态:系统蓝高亮 + 线性星芒) -->
<div class="flex flex-col items-center justify-center text-[#007AFF] w-14">
<div class="relative">
<i class="fa-solid fa-sparkles text-[20px] mb-1"></i>
</div>
<span class="text-[10px] font-bold">运势</span>
</div>
<!-- 5. 我的 -->
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
<i class="fa-regular fa-user text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">我的</span>
</div>
</div>
<!-- iOS 底部指示线 (Home Indicator) -->
<div class="absolute bottom-1.5 inset-x-0 flex justify-center z-40 pointer-events-none">
<div class="w-32 h-1 bg-black/80 rounded-full"></div>
</div>
</div>
</div>
<!-- ============================================== -->
<!-- 状态 2:异常态(用户未设置生日) -->
<!-- ============================================== -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></span>
<span class="text-sm font-bold text-gray-800">状态 2 · 异常态(用户未设置生日)</span>
</div>
<span class="text-xs text-gray-500 mb-4">插画空态 · 友好引导提示 · 系统蓝「去完善资料」按钮</span>
<div class="device-screen">
<!-- 微信小程序标准顶部状态栏与标题栏 -->
<div class="pt-3 px-5 pb-2 bg-white hairline-b z-20 flex-shrink-0">
<div class="flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2.5 px-0.5">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-[11px]">
<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="h-10 flex items-center justify-between relative">
<div class="w-16"></div>
<span class="text-[17px] font-semibold text-gray-900 tracking-tight">每日运势</span>
<div class="wechat-capsule">
<i class="fa-solid fa-ellipsis text-gray-800 text-xs"></i>
<span class="w-[0.5px] h-3.5 bg-gray-300"></span>
<i class="fa-regular fa-circle-dot text-gray-800 text-[11px]"></i>
</div>
</div>
</div>
<!-- 空态居中容器 -->
<div class="flex-1 flex flex-col items-center justify-center px-6 pb-24 text-center">
<!-- 极简线性天象星盘插画 -->
<div class="w-24 h-24 rounded-full bg-[#E8F2FF] flex items-center justify-center mb-6 relative">
<!-- 环形星轨虚线 -->
<svg class="absolute inset-0 w-full h-full text-[#007AFF]/25 animate-spin-slow" viewBox="0 0 100 100" style="animation: spin 20s linear infinite;">
<circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 4" />
<circle cx="85" cy="50" r="3" fill="#007AFF" />
<circle cx="20" cy="30" r="2" fill="#5856D6" />
</svg>
<!-- 线性生日蛋糕与星座星辰 -->
<div class="w-12 h-12 rounded-2xl bg-white shadow-sm flex items-center justify-center text-[#007AFF]">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" />
<path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1" />
<path d="M2 21h20" />
<path d="M7 8v3" />
<path d="M12 8v3" />
<path d="M17 8v3" />
<path d="M7 4h.01" />
<path d="M12 4h.01" />
<path d="M17 4h.01" />
</svg>
</div>
</div>
<!-- 文案要求:严格复现 -->
<h3 class="text-[17px] font-bold text-gray-900 tracking-tight mb-2">还没有设置生日</h3>
<p class="text-[13px] text-gray-500 max-w-[240px] leading-relaxed mb-7">
设置生日后即可查看你的专属星座运势与每日穿搭指南
</p>
<!-- 系统蓝主按钮 -->
<button class="w-full max-w-[220px] h-11 bg-[#007AFF] text-white rounded-[12px] font-semibold text-[14px] shadow-sm hover:bg-blue-600 active:opacity-90 transition flex items-center justify-center gap-2">
<i class="fa-regular fa-calendar-check text-sm"></i>
<span>去完善资料</span>
</button>
<span class="text-[11px] text-gray-400 mt-4">隐私提示:生日仅用于推算星座,不作公开</span>
</div>
<!-- 底部标准 tabBar -->
<div class="h-20 bg-white/95 backdrop-blur hairline-t flex items-start justify-around pt-2 px-2 absolute bottom-0 inset-x-0 z-30">
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
<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-gray-400 w-14">
<i class="fa-solid fa-shirt text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">衣橱</span>
</div>
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
<i class="fa-regular fa-bookmark text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">穿搭</span>
</div>
<div class="flex flex-col items-center justify-center text-[#007AFF] w-14">
<i class="fa-solid fa-sparkles text-[20px] mb-1"></i>
<span class="text-[10px] font-bold">运势</span>
</div>
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
<i class="fa-regular fa-user text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">我的</span>
</div>
</div>
<!-- iOS 底部指示线 -->
<div class="absolute bottom-1.5 inset-x-0 flex justify-center z-40 pointer-events-none">
<div class="w-32 h-1 bg-black/80 rounded-full"></div>
</div>
</div>
</div>
<!-- ============================================== -->
<!-- 状态 3:加载态与异步生成中提示(首次无缓存) -->
<!-- ============================================== -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-[#5856D6]"></span>
<span class="text-sm font-bold text-gray-800">状态 3 · 加载态与「运势生成中」提示</span>
</div>
<span class="text-xs text-gray-500 mb-4">骨架屏呼吸微动效 · iOS Toast 轻提示 · 3~5秒自动重试机制</span>
<div class="device-screen">
<!-- 微信小程序标准顶部状态栏与标题栏 -->
<div class="pt-3 px-5 pb-2 bg-white hairline-b z-20 flex-shrink-0">
<div class="flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2.5 px-0.5">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-[11px]">
<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="h-10 flex items-center justify-between relative">
<div class="w-16"></div>
<span class="text-[17px] font-semibold text-gray-900 tracking-tight">每日运势</span>
<div class="wechat-capsule">
<i class="fa-solid fa-ellipsis text-gray-800 text-xs"></i>
<span class="w-[0.5px] h-3.5 bg-gray-300"></span>
<i class="fa-regular fa-circle-dot text-gray-800 text-[11px]"></i>
</div>
</div>
</div>
<!-- 骨架屏结构内容区 -->
<div class="flex-1 overflow-y-auto px-4 py-3.5 space-y-3.5 pb-24 relative">
<!-- 顶部居中浮出的 iOS Toast 轻提示(首次无缓存异步生成触发) -->
<div class="absolute top-6 inset-x-6 z-30 flex justify-center">
<div class="bg-gray-900/90 backdrop-blur-md text-white px-4 py-2.5 rounded-full shadow-lg flex items-center gap-2.5 border border-white/10">
<i class="fa-solid fa-circle-notch fa-spin text-xs text-[#007AFF]"></i>
<span class="text-[12px] font-medium tracking-tight">运势生成中,请稍后重试</span>
<span class="text-[10px] text-gray-400 font-mono-num pl-1 border-l border-gray-700">3s后重试</span>
</div>
</div>
<!-- 骨架大卡片 -->
<div class="bg-white rounded-[20px] p-4 hairline-border shadow-sm space-y-4">
<!-- 头部 -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2.5">
<div class="w-8 h-8 rounded-full skeleton-box"></div>
<div class="w-20 h-4 rounded skeleton-box"></div>
</div>
<div class="w-24 h-4 rounded skeleton-box"></div>
</div>
<!-- 综合评分骨架 -->
<div class="pt-3 border-t border-gray-100 flex items-end justify-between">
<div>
<div class="w-12 h-3 rounded skeleton-box mb-2"></div>
<div class="w-20 h-9 rounded skeleton-box"></div>
</div>
<div class="flex gap-1">
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
</div>
</div>
<!-- 三条进度条骨架 -->
<div class="pt-3 border-t border-gray-100 space-y-3">
<div class="flex items-center justify-between">
<div class="w-14 h-3 rounded skeleton-box"></div>
<div class="w-32 h-2 rounded skeleton-box"></div>
<div class="w-6 h-3 rounded skeleton-box"></div>
</div>
<div class="flex items-center justify-between">
<div class="w-14 h-3 rounded skeleton-box"></div>
<div class="w-32 h-2 rounded skeleton-box"></div>
<div class="w-6 h-3 rounded skeleton-box"></div>
</div>
<div class="flex items-center justify-between">
<div class="w-14 h-3 rounded skeleton-box"></div>
<div class="w-32 h-2 rounded skeleton-box"></div>
<div class="w-6 h-3 rounded skeleton-box"></div>
</div>
</div>
</div>
<!-- 解读卡片骨架 -->
<div class="bg-white rounded-[16px] p-4 hairline-border shadow-sm space-y-2.5">
<div class="w-20 h-3.5 rounded skeleton-box"></div>
<div class="w-full h-3 rounded skeleton-box"></div>
<div class="w-3/4 h-3 rounded skeleton-box"></div>
</div>
<!-- 双卡骨架 -->
<div class="grid grid-cols-2 gap-3">
<div class="bg-white rounded-[16px] p-4 hairline-border shadow-sm h-16 flex items-center justify-between">
<div class="space-y-1.5">
<div class="w-10 h-2.5 rounded skeleton-box"></div>
<div class="w-12 h-4 rounded skeleton-box"></div>
</div>
<div class="w-7 h-7 rounded-full skeleton-box"></div>
</div>
<div class="bg-white rounded-[16px] p-4 hairline-border shadow-sm h-16 flex items-center justify-between">
<div class="space-y-1.5">
<div class="w-10 h-2.5 rounded skeleton-box"></div>
<div class="w-8 h-4 rounded skeleton-box"></div>
</div>
<div class="w-7 h-7 rounded-full skeleton-box"></div>
</div>
</div>
<!-- 底部按钮骨架 -->
<div class="pt-1">
<div class="w-full h-11 rounded-[12px] skeleton-box"></div>
</div>
</div>
<!-- 底部标准 tabBar -->
<div class="h-20 bg-white/95 backdrop-blur hairline-t flex items-start justify-around pt-2 px-2 absolute bottom-0 inset-x-0 z-30">
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
<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-gray-400 w-14">
<i class="fa-solid fa-shirt text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">衣橱</span>
</div>
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
<i class="fa-regular fa-bookmark text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">穿搭</span>
</div>
<div class="flex flex-col items-center justify-center text-[#007AFF] w-14">
<i class="fa-solid fa-sparkles text-[20px] mb-1"></i>
<span class="text-[10px] font-bold">运势</span>
</div>
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
<i class="fa-regular fa-user text-[19px] mb-1"></i>
<span class="text-[10px] font-medium">我的</span>
</div>
</div>
<!-- iOS 底部指示线 -->
<div class="absolute bottom-1.5 inset-x-0 flex justify-center z-40 pointer-events-none">
<div class="w-32 h-1 bg-black/80 rounded-full"></div>
</div>
</div>
</div>
</div>
<!-- 底部设计核查表与逻辑映射备忘卡片 -->
<div class="w-full max-w-[1300px] bg-white rounded-2xl p-6 shadow-sm border border-[#E5E5EA]">
<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-gray-950">第 8 屏 运势规范设计核查表与状态机映射</h2>
<span class="text-xs text-gray-400 font-mono">(严格恪守产品与交互逻辑约束)</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-xs text-gray-600">
<div class="p-3.5 rounded-xl bg-gray-50 border border-gray-100">
<div class="font-bold text-gray-900 mb-1.5 flex items-center gap-1.5">
<i class="fa-solid fa-ban text-red-500"></i>
1. 星座推算与修改边界
</div>
<p class="leading-relaxed">
严格不提供用户自由「切换星座」的选择器能力,杜绝数据失真;仅通过生日推算。右上角只放「去设置生日」文字按钮,跳转「编辑资料」页面更改生日。
</p>
</div>
<div class="p-3.5 rounded-xl bg-gray-50 border border-gray-100">
<div class="font-bold text-gray-900 mb-1.5 flex items-center gap-1.5">
<i class="fa-solid fa-list-check text-blue-500"></i>
2. 四维评分与等宽数字
</div>
<p class="leading-relaxed">
仅有综合(4.0)、爱情(3/5)、工作(5/5)、财富(4/5)四项,不臆造健康、社交等未定义维度;数字统一采用 <code class="bg-gray-200 px-1 py-0.5 rounded text-[11px]">SF Mono</code> 等宽字体。
</p>
</div>
<div class="p-3.5 rounded-xl bg-gray-50 border border-gray-100">
<div class="font-bold text-gray-900 mb-1.5 flex items-center gap-1.5">
<i class="fa-solid fa-link text-indigo-500"></i>
3. 业务闭环联动
</div>
<p class="leading-relaxed">
底部提供「生成今日推荐穿搭」描边按钮,直接作为第 7 屏「AI 穿搭推荐」的快捷触发源,携带今日运势评分与幸运色彩参数进入。
</p>
</div>
<div class="p-3.5 rounded-xl bg-gray-50 border border-gray-100">
<div class="font-bold text-gray-900 mb-1.5 flex items-center gap-1.5">
<i class="fa-solid fa-clock-rotate-left text-green-500"></i>
4. 首次异步加载与容错
</div>
<p class="leading-relaxed">
首次无缓存时异步计算,展示整卡骨架屏并弹出 iOS 原生轻提示 Toast「运势生成中,请稍后重试」,前端定时器 3~5 秒后静默自动轮询重试一次。
</p>
</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 412 KiB