first commit
This commit is contained in:
@@ -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 |
Reference in New Issue
Block a user