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

720 lines
34 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>第13屏 我的(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+Text:wght@400;500;600;700&display=swap');
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background-color: #0c0d0e;
color: #1c1c1e;
-webkit-font-smoothing: antialiased;
}
.screen-container {
width: 375px;
height: 812px;
position: relative;
border-radius: 44px;
overflow: hidden;
box-shadow: 0 25px 60px -15px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
background-color: #F2F2F7;
display: flex;
flex-direction: column;
}
.ios-status-bar {
height: 44px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 22px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.2px;
z-index: 30;
flex-shrink: 0;
}
.wx-nav-bar {
height: 44px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
z-index: 30;
flex-shrink: 0;
position: relative;
}
.wx-capsule {
height: 32px;
width: 87px;
background: rgba(255, 255, 255, 0.65);
border: 0.5px solid rgba(0, 0, 0, 0.12);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-evenly;
backdrop-filter: blur(10px);
}
.hairline-b {
border-bottom: 0.5px solid #E5E5EA;
}
.hairline-indent {
position: relative;
}
.hairline-indent::after {
content: '';
position: absolute;
bottom: 0;
left: 52px;
right: 0;
height: 0.5px;
background-color: #E5E5EA;
}
.tabbar {
height: 83px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
border-top: 0.5px solid #E5E5EA;
display: flex;
padding-top: 6px;
padding-bottom: 24px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 40;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="p-8 flex flex-col items-center">
<!-- 顶部画板标题与设计规格元信息 -->
<header class="w-full max-w-[1240px] mb-8 flex flex-col gap-3 text-white">
<div class="flex items-center gap-3">
<span class="w-3 h-3 rounded-full bg-[#007AFF]"></span>
<h1 class="text-2xl font-bold tracking-tight">第 13 屏 | 我的(tabBar 全状态高保真画板)</h1>
<span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-[#007AFF]/20 text-[#007AFF] border border-[#007AFF]/30">微信小程序 5 个核心 tabBar 之一</span>
<span class="text-xs text-neutral-400 font-mono">iPhone 375 × 812 pt</span>
</div>
<div class="flex flex-wrap items-center gap-4 text-xs text-neutral-400 border-t border-neutral-800 pt-3">
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>系统强调蓝 #007AFF</div>
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#FF9500]"></span>警示橙 #FF9500 (低额度预警)</div>
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#34C759]"></span>健康状态绿 #34C759</div>
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#F2F2F7]"></span>iOS 分组灰底 #F2F2F7</div>
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#E5E5EA]"></span>发丝分割线 0.5px #E5E5EA (左缩进16pt)</div>
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-neutral-400"></span>SF Symbols 线性图标系</div>
</div>
</header>
<!-- 3 个典型场景画板平铺展示 -->
<main class="w-full max-w-[1240px] flex flex-wrap justify-center gap-10">
<!-- 状态 1:tabBar 主页面(常规正常态) -->
<div class="flex flex-col items-center">
<div class="mb-3 text-xs font-medium text-neutral-300 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
<span>状态 1 · 我的(常规状态 · tabBar 第5项选中)</span>
</div>
<div class="screen-container">
<!-- 状态栏 -->
<div class="ios-status-bar">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<span class="text-[11px] font-bold">5G</span>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 微信小程序导航栏 -->
<div class="wx-nav-bar">
<div class="w-12"></div>
<div class="text-[17px] font-semibold text-black tracking-tight">我的</div>
<div class="wx-capsule">
<i class="fa-solid fa-ellipsis text-xs text-neutral-800"></i>
<div class="h-3.5 w-[0.5px] bg-neutral-300"></div>
<i class="fa-regular fa-circle-dot text-xs text-neutral-800"></i>
</div>
</div>
<!-- 滚动内容区 -->
<div class="flex-1 overflow-y-auto hide-scrollbar px-4 pt-2 pb-24 space-y-4">
<!-- 个人信息白卡 (圆角 16pt) -->
<div class="bg-white rounded-[16px] p-4 shadow-sm border border-[#E5E5EA]/60 flex items-center justify-between">
<div class="flex items-center gap-3.5">
<!-- 头像 64pt -->
<div class="w-16 h-16 rounded-full bg-gradient-to-tr from-[#DCE8FE] to-[#F2F5FF] border-[1.5px] border-[#007AFF]/20 flex items-center justify-center relative overflow-hidden shadow-inner flex-shrink-0">
<i class="fa-solid fa-user text-2xl text-[#007AFF]/70"></i>
<div class="absolute bottom-0 right-0 w-4 h-4 bg-[#34C759] border-2 border-white rounded-full"></div>
</div>
<div class="space-y-1.5">
<div class="flex items-center gap-1.5">
<span class="text-[18px] font-bold text-neutral-900 tracking-tight">小雨</span>
<span class="w-4 h-4 rounded-full bg-[#FF2D55]/10 text-[#FF2D55] flex items-center justify-center text-[10px]">
<i class="fa-solid fa-venus"></i>
</span>
</div>
<div class="flex items-center gap-1.5">
<!-- 会员标签 -->
<div class="px-2 py-0.5 rounded-[6px] bg-[#007AFF]/10 text-[#007AFF] text-[11px] font-medium flex items-center gap-1">
<i class="fa-solid fa-crown text-[10px]"></i>
<span>月度会员 · 05-15 到期</span>
</div>
<!-- 星座标签 -->
<div class="px-2 py-0.5 rounded-[6px] bg-[#8E8E93]/10 text-neutral-600 text-[11px] font-medium flex items-center gap-1">
<span>白羊座</span>
</div>
</div>
</div>
</div>
<!-- 编辑资料按钮 -->
<button class="flex items-center text-xs font-medium text-[#8E8E93] hover:text-[#007AFF] transition-colors pl-1">
<span>编辑资料</span>
<i class="fa-solid fa-chevron-right text-[10px] ml-1"></i>
</button>
</div>
<!-- 第一组功能列表 (Inset Grouped) -->
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
<!-- 我的额度 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-solid fa-bolt text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">我的额度</span>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[13px] text-[#8E8E93]">上传额度剩 13</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 我的订单 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-file-lines text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">我的订单</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 我的分享 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-solid fa-arrow-up-from-bracket text-[15px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">我的分享</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 我的收藏 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-bookmark text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">我的收藏</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 额度明细 -->
<div class="h-11 px-4 flex items-center justify-between active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-solid fa-clock-rotate-left text-[15px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">额度明细</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
</div>
<!-- 第二组功能列表 (Inset Grouped) -->
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
<!-- 编辑资料 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-user text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">编辑资料</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 设置生日 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-calendar-days text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">设置生日</span>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[13px] text-[#8E8E93]">03月28日</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 客服与反馈 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-comments text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">客服与反馈</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 关于纸条AI衣橱 -->
<div class="h-11 px-4 flex items-center justify-between active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-solid fa-circle-info text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">关于纸条AI衣橱</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
</div>
<!-- 版本号标注 -->
<div class="text-center pt-2 pb-1">
<span class="text-[12px] text-[#8E8E93] tracking-wide font-mono">纸条AI衣橱 v1.0.0</span>
</div>
</div>
<!-- 5 个核心 tabBar(本页为选中态) -->
<div class="tabbar">
<!-- 1. 衣橱 -->
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
<i class="fa-solid fa-shirt text-[18px]"></i>
<span class="text-[10px] font-medium leading-none">衣橱</span>
</div>
<!-- 2. 穿搭 -->
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
<i class="fa-solid fa-vest-patches text-[18px]"></i>
<span class="text-[10px] font-medium leading-none">穿搭</span>
</div>
<!-- 3. 运势 -->
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
<i class="fa-regular fa-compass text-[18px]"></i>
<span class="text-[10px] font-medium leading-none">运势</span>
</div>
<!-- 4. 通知 -->
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93] relative">
<i class="fa-regular fa-bell text-[18px]"></i>
<span class="text-[10px] font-medium leading-none">通知</span>
</div>
<!-- 5. 我的 (选中态) -->
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#007AFF]">
<i class="fa-solid fa-user text-[18px]"></i>
<span class="text-[10px] font-semibold leading-none">我的</span>
</div>
</div>
</div>
</div>
<!-- 状态 2:带「额度不足提示条」与未完善信息态 -->
<div class="flex flex-col items-center">
<div class="mb-3 text-xs font-medium text-neutral-300 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-[#FF9500]"></span>
<span>状态 2 · 顶部浅橙额度提示条 + 未设置生日</span>
</div>
<div class="screen-container">
<!-- 状态栏 -->
<div class="ios-status-bar">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<span class="text-[11px] font-bold">5G</span>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 微信小程序导航栏 -->
<div class="wx-nav-bar">
<div class="w-12"></div>
<div class="text-[17px] font-semibold text-black tracking-tight">我的</div>
<div class="wx-capsule">
<i class="fa-solid fa-ellipsis text-xs text-neutral-800"></i>
<div class="h-3.5 w-[0.5px] bg-neutral-300"></div>
<i class="fa-regular fa-circle-dot text-xs text-neutral-800"></i>
</div>
</div>
<!-- 顶部浅橙提示条(规范要求) -->
<div class="bg-[#FFF4E5] border-y border-[#FF9500]/20 px-4 py-2.5 flex items-center justify-between text-xs text-[#D97706] transition-all">
<div class="flex items-center gap-2">
<i class="fa-solid fa-circle-exclamation text-[#FF9500] text-sm"></i>
<span class="font-medium text-[#B45309]">你的上传额度仅剩 2 次,点击购买额度包</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-[#FF9500]"></i>
</div>
<!-- 滚动内容区 -->
<div class="flex-1 overflow-y-auto hide-scrollbar px-4 pt-3 pb-24 space-y-4">
<!-- 个人信息白卡 (未设置生日状态) -->
<div class="bg-white rounded-[16px] p-4 shadow-sm border border-[#E5E5EA]/60 flex items-center justify-between">
<div class="flex items-center gap-3.5">
<!-- 头像 64pt (灰色人像占位) -->
<div class="w-16 h-16 rounded-full bg-[#E5E5EA] border-[1.5px] border-white flex items-center justify-center flex-shrink-0 shadow-inner">
<i class="fa-solid fa-user text-2xl text-[#8E8E93]"></i>
</div>
<div class="space-y-1.5">
<div class="flex items-center gap-1.5">
<span class="text-[18px] font-bold text-neutral-900 tracking-tight">微信用户_928</span>
</div>
<div class="flex items-center gap-1.5">
<!-- 会员标签 -->
<div class="px-2 py-0.5 rounded-[6px] bg-neutral-100 text-neutral-500 text-[11px] font-medium flex items-center gap-1">
<span>普通用户</span>
</div>
<!-- 未设置生日可点击标签 -->
<div class="px-2 py-0.5 rounded-[6px] bg-[#007AFF]/10 text-[#007AFF] text-[11px] font-medium flex items-center gap-1 cursor-pointer">
<i class="fa-solid fa-plus text-[9px]"></i>
<span>设置生日</span>
</div>
</div>
</div>
</div>
<!-- 编辑资料按钮 -->
<button class="flex items-center text-xs font-medium text-[#8E8E93] hover:text-[#007AFF] transition-colors pl-1">
<span>编辑资料</span>
<i class="fa-solid fa-chevron-right text-[10px] ml-1"></i>
</button>
</div>
<!-- 第一组功能列表 (带低额度警示红字) -->
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
<!-- 我的额度 (警示橙强调) -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#FF9500]">
<i class="fa-solid fa-bolt text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">我的额度</span>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[13px] font-medium text-[#FF9500]">上传额度仅剩 2</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 我的订单 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-file-lines text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">我的订单</span>
</div>
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-[#FF9500]"></span>
<span class="text-[12px] text-[#FF9500] font-medium">1 笔待支付</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 我的分享 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-solid fa-arrow-up-from-bracket text-[15px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">我的分享</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 我的收藏 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-bookmark text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">我的收藏</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 额度明细 -->
<div class="h-11 px-4 flex items-center justify-between active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-solid fa-clock-rotate-left text-[15px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">额度明细</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
</div>
<!-- 第二组功能列表 -->
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
<!-- 编辑资料 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-user text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">编辑资料</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 设置生日 (未完善) -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-calendar-days text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">设置生日</span>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[13px] text-[#007AFF]">去完善</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 客服与反馈 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-regular fa-comments text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">客服与反馈</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 关于纸条AI衣橱 -->
<div class="h-11 px-4 flex items-center justify-between active:bg-neutral-50 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 text-center text-[#007AFF]">
<i class="fa-solid fa-circle-info text-[16px]"></i>
</div>
<span class="text-[15px] font-normal text-neutral-900">关于纸条AI衣橱</span>
</div>
<div class="flex items-center gap-1.5">
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
</div>
<!-- 版本号标注 -->
<div class="text-center pt-2 pb-1">
<span class="text-[12px] text-[#8E8E93] tracking-wide font-mono">纸条AI衣橱 v1.0.0</span>
</div>
</div>
<!-- 5 个核心 tabBar -->
<div class="tabbar">
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
<i class="fa-solid fa-shirt text-[18px]"></i>
<span class="text-[10px] font-medium leading-none">衣橱</span>
</div>
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
<i class="fa-solid fa-vest-patches text-[18px]"></i>
<span class="text-[10px] font-medium leading-none">穿搭</span>
</div>
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
<i class="fa-regular fa-compass text-[18px]"></i>
<span class="text-[10px] font-medium leading-none">运势</span>
</div>
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
<i class="fa-regular fa-bell text-[18px]"></i>
<span class="text-[10px] font-medium leading-none">通知</span>
</div>
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#007AFF]">
<i class="fa-solid fa-user text-[18px]"></i>
<span class="text-[10px] font-semibold leading-none">我的</span>
</div>
</div>
</div>
</div>
<!-- 状态 3:二级子页面「编辑资料」(表单规范) -->
<div class="flex flex-col items-center">
<div class="mb-3 text-xs font-medium text-neutral-300 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-[#34C759]"></span>
<span>状态 3 · 子页面「编辑资料」(二级表单 + 原生保存)</span>
</div>
<div class="screen-container">
<!-- 状态栏 -->
<div class="ios-status-bar">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<span class="text-[11px] font-bold">5G</span>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 二级页面原生导航栏 (左上角返回 + 标题 + 胶囊) -->
<div class="wx-nav-bar bg-white/80 backdrop-blur hairline-b">
<button class="flex items-center text-[#007AFF] text-[16px] font-normal -ml-1">
<i class="fa-solid fa-chevron-left text-[15px] mr-1"></i>
<span>我的</span>
</button>
<div class="text-[17px] font-semibold text-black tracking-tight">编辑资料</div>
<div class="wx-capsule">
<i class="fa-solid fa-ellipsis text-xs text-neutral-800"></i>
<div class="h-3.5 w-[0.5px] bg-neutral-300"></div>
<i class="fa-regular fa-circle-dot text-xs text-neutral-800"></i>
</div>
</div>
<!-- 表单内容区 -->
<div class="flex-1 overflow-y-auto hide-scrollbar px-4 pt-5 pb-24 space-y-5">
<!-- 头像更换卡片 -->
<div class="flex flex-col items-center justify-center py-2">
<div class="relative group cursor-pointer">
<div class="w-20 h-20 rounded-full bg-[#DCE8FE] border-2 border-white shadow flex items-center justify-center overflow-hidden">
<i class="fa-solid fa-user text-3xl text-[#007AFF]"></i>
</div>
<div class="absolute bottom-0 right-0 w-6 h-6 rounded-full bg-[#007AFF] text-white flex items-center justify-center shadow-md border-2 border-white text-[11px]">
<i class="fa-solid fa-camera"></i>
</div>
</div>
<span class="text-[12px] text-[#8E8E93] mt-2 font-medium">点击更换头像</span>
</div>
<!-- 表单分组白卡 (圆角 16pt,行高 44pt,发丝线左缩进) -->
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
<!-- 昵称 -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent">
<span class="text-[15px] text-neutral-900 w-20 flex-shrink-0">昵称</span>
<input type="text" value="小雨" maxlength="32" class="flex-1 text-right text-[15px] text-neutral-800 focus:outline-none placeholder-[#C7C7CC]" placeholder="输入昵称(≤32字)" />
</div>
<!-- 性别 (男 / 女 单选) -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent">
<span class="text-[15px] text-neutral-900 w-20 flex-shrink-0">性别</span>
<div class="flex items-center gap-3">
<label class="flex items-center gap-1.5 cursor-pointer text-[14px] text-neutral-500">
<span class="w-4 h-4 rounded-full border border-[#C7C7CC] flex items-center justify-center"></span>
<span>男</span>
</label>
<label class="flex items-center gap-1.5 cursor-pointer text-[14px] text-[#007AFF] font-medium">
<span class="w-4 h-4 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[9px]">
<i class="fa-solid fa-check"></i>
</span>
<span>女</span>
</label>
</div>
</div>
<!-- 生日 (日期选择器,不可晚于今天) -->
<div class="h-11 px-4 flex items-center justify-between hairline-indent cursor-pointer active:bg-neutral-50">
<span class="text-[15px] text-neutral-900 w-20 flex-shrink-0">生日</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-neutral-800 font-normal">1998-03-28</span>
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
</div>
</div>
<!-- 手机号 (只读展示) -->
<div class="h-11 px-4 flex items-center justify-between">
<span class="text-[15px] text-neutral-900 w-20 flex-shrink-0">手机号</span>
<div class="flex items-center gap-1.5">
<span class="text-[15px] text-[#8E8E93] font-mono">138 **** 8920</span>
<span class="text-[11px] text-[#8E8E93] px-1.5 py-0.5 rounded bg-neutral-100">微信绑定</span>
</div>
</div>
</div>
<!-- 说明注释 -->
<div class="px-2">
<p class="text-[12px] text-[#8E8E93] leading-relaxed">
* 生日用于每日穿搭运势算法计算,不可选择晚于今天的日期;手机号与微信直接绑定,如需修改请解绑微信手机号。
</p>
</div>
</div>
<!-- 底部固定栏(系统蓝保存按钮) -->
<div class="p-4 bg-white/95 backdrop-blur border-t border-[#E5E5EA] absolute bottom-0 left-0 right-0 z-40 pb-7">
<button class="w-full h-11 bg-[#007AFF] text-white font-semibold rounded-[12px] text-[16px] shadow hover:bg-[#0062cc] active:scale-[0.99] transition-all flex items-center justify-center">
保存
</button>
</div>
</div>
</div>
</main>
<!-- 底部设计规范总结栏 -->
<footer class="w-full max-w-[1240px] mt-10 p-5 rounded-[20px] bg-neutral-900/90 border border-neutral-800 text-neutral-300 text-xs flex flex-col md:flex-row justify-between gap-4">
<div class="flex flex-col gap-1.5">
<div class="flex items-center gap-2 font-semibold text-white">
<i class="fa-solid fa-circle-check text-[#34C759]"></i>
<span>设计规范落地总结(微信小程序 + iOS Human Interface Guidelines)</span>
</div>
<p class="text-neutral-400">
1. 严格对齐 375×812pt 原生栅格与 44pt 状态栏;SF Symbols 线性图标系统;发丝线 0.5px #E5E5EA 并严格左缩进 16pt 与正文标签精准对齐。<br>
2. 全面支持个人中心全状态切换:正常个人资料态、额度不足浅橙预警条态(仅剩2次)、以及「编辑资料」二级子页面。
</p>
</div>
<div class="flex items-center gap-2 flex-shrink-0 self-start md:self-center">
<span class="px-3 py-1.5 rounded-lg bg-white/10 text-white font-mono">纸条AI衣橱 · 全套14屏设计闭环</span>
</div>
</footer>
</body>
</html>