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

639 lines
32 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>第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>