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
+719
View File
@@ -0,0 +1,719 @@
<!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>
Binary file not shown.

After

Width:  |  Height:  |  Size: 394 KiB