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

611 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>第11屏 额度与会员商城</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=PingFang+SC:wght@400;500;600;700&family=SF+Pro+Display:wght@400;500;600;700&family=SF+Pro+Text:wght@400;500;600&display=swap');
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
background-color: #F8F9FA;
color: #1C1C1E;
margin: 0;
padding: 32px 24px;
-webkit-font-smoothing: antialiased;
}
.phone-container {
width: 375px;
height: 812px;
border-radius: 44px;
overflow: hidden;
position: relative;
background-color: #F2F2F7;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 10px #1C1C1E, 0 0 0 12px #2C2C2E;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
/* 微信胶囊占位 */
.capsule {
width: 87px;
height: 32px;
background: rgba(255, 255, 255, 0.75);
border: 0.5px solid rgba(0, 0, 0, 0.1);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-evenly;
backdrop-filter: blur(8px);
}
.capsule-dot {
width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
}
.capsule-line {
width: 0.5px;
height: 14px;
background: rgba(0, 0, 0, 0.2);
}
.capsule-ring {
width: 14px;
height: 14px;
border: 1.5px solid #000;
border-radius: 50%;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.border-hairline {
border: 0.5px solid #E5E5EA;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center">
<!-- 画板主标题与设计规范概要 Header -->
<div class="w-full max-w-5xl mb-8 bg-white p-6 rounded-2xl border-hairline shadow-sm">
<div class="flex items-center justify-between flex-wrap gap-4">
<div class="flex items-center space-x-3">
<span class="w-3.5 h-3.5 rounded-full bg-[#007AFF]"></span>
<h1 class="text-xl font-bold text-gray-900 tracking-tight">第 11 屏 | 额度与会员商城(全状态画板)</h1>
<span class="text-xs px-2.5 py-0.5 rounded-full bg-blue-50 text-[#007AFF] font-medium border border-blue-200">微信小程序二级页 · 375 × 812 pt</span>
</div>
<div class="flex items-center space-x-4 text-xs text-gray-500 font-mono">
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>系统蓝 #007AFF</span>
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></span>警示橙 #FF9500</span>
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-[#E8F2FF]"></span>淡蓝卡 #E8F2FF</span>
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-[#F2F2F7]"></span>底色 #F2F2F7</span>
</div>
</div>
<div class="mt-4 pt-3 border-t border-gray-100 text-xs text-gray-600 flex flex-wrap items-center gap-y-2 gap-x-6">
<span class="flex items-center gap-1"><i class="fa-solid fa-check text-emerald-500"></i> 严格负向约束:商品绝不展示图片与标签,只呈现名称、描述、售价与原价</span>
<span class="flex items-center gap-1"><i class="fa-solid fa-check text-emerald-500"></i> SF Symbols 线性风格图标体系(皇冠/相机/星星/衣柜/衣架)</span>
<span class="flex items-center gap-1"><i class="fa-solid fa-check text-emerald-500"></i> 包含:商城全量服务、2×2额度网格预警、以及「订单确认」收银级二级子页面</span>
</div>
</div>
<!-- 原型画板容器:主页 + 订单确认子页 -->
<div class="flex flex-wrap justify-center gap-10 items-start">
<!-- ① 画板 1:额度与会员主页(已开通会员状态 + 低额度预警 + 完整商品库) -->
<div class="flex flex-col items-center">
<div class="text-xs font-semibold text-gray-500 mb-3 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
<span>状态 1 · 额度与会员商城首页(二级页 · 375×812)</span>
</div>
<div class="phone-container">
<!-- iOS 顶部状态栏 -->
<div class="h-11 px-6 flex justify-between items-end pb-1.5 text-black text-xs font-semibold select-none">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-xs">
<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-11 px-4 flex items-center justify-between border-b border-[#E5E5EA]/40 bg-[#F2F2F7]">
<div class="flex items-center space-x-1 text-[#007AFF] active:opacity-60 cursor-pointer">
<i class="fa-solid fa-chevron-left text-base"></i>
<span class="text-[15px] font-normal tracking-tight">我的</span>
</div>
<span class="text-[17px] font-semibold text-gray-900 pr-2">额度与会员</span>
<!-- 右上胶囊占位 -->
<div class="capsule">
<div class="capsule-dot"></div>
<div class="capsule-line"></div>
<div class="capsule-ring"></div>
</div>
</div>
<!-- 主内容滚动区 -->
<div class="flex-1 overflow-y-auto no-scrollbar px-4 pt-3 pb-8 space-y-4">
<!-- 1. 顶部会员卡(淡蓝 #E8F2FF 底、系统蓝文字圆角大卡 16pt) -->
<div class="bg-[#E8F2FF] rounded-[16px] p-4 border border-[#BBD7FF] flex items-center justify-between shadow-sm">
<div class="flex items-center space-x-3.5">
<!-- 皇冠线性图标 -->
<div class="w-11 h-11 rounded-full bg-white flex items-center justify-center text-[#007AFF] shadow-sm">
<i class="fa-solid fa-crown text-lg"></i>
</div>
<div>
<div class="flex items-center gap-1.5">
<h2 class="text-[17px] font-bold text-[#007AFF]">月度会员</h2>
<span class="text-[10px] px-1.5 py-0.2 bg-[#007AFF] text-white rounded font-medium">VIP</span>
</div>
<p class="text-[12px] text-[#8E8E93] mt-0.5">有效期至 2025-05-15</p>
</div>
</div>
<!-- 立即续费 描边按钮 -->
<button class="px-3.5 py-1.5 rounded-full border border-[#007AFF] text-[#007AFF] text-[13px] font-medium bg-white/70 active:bg-blue-50">
立即续费
</button>
</div>
<!-- 2. 「我的额度」2×2 网格 -->
<div>
<div class="flex items-center justify-between mb-2 px-1">
<span class="text-[14px] font-semibold text-gray-800">我的额度</span>
<span class="text-[11px] text-[#8E8E93]">剩余 &lt; 20% 时高亮预警</span>
</div>
<div class="grid grid-cols-2 gap-2.5">
<!-- 小卡 1: 上传额度 (剩余 13/20,正常比例) -->
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex flex-col justify-between">
<div>
<span class="text-[12px] text-[#8E8E93] font-medium">上传额度</span>
<div class="mt-1 flex items-baseline gap-1">
<span class="text-[24px] font-bold tracking-tight text-gray-900 font-mono">13</span>
<span class="text-[13px] text-[#8E8E93] font-mono">/ 20</span>
</div>
</div>
<!-- 细进度条 (已用比例,系统蓝) -->
<div class="mt-3">
<div class="w-full bg-[#E5E5EA] h-1.5 rounded-full overflow-hidden">
<div class="bg-[#007AFF] h-full rounded-full" style="width: 65%;"></div>
</div>
</div>
</div>
<!-- 小卡 2: AI 推荐额度 (剩余 18/50) -->
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex flex-col justify-between">
<div>
<span class="text-[12px] text-[#8E8E93] font-medium">AI 推荐额度</span>
<div class="mt-1 flex items-baseline gap-1">
<span class="text-[24px] font-bold tracking-tight text-gray-900 font-mono">18</span>
<span class="text-[13px] text-[#8E8E93] font-mono">/ 50</span>
</div>
</div>
<!-- 细进度条 (系统蓝) -->
<div class="mt-3">
<div class="w-full bg-[#E5E5EA] h-1.5 rounded-full overflow-hidden">
<div class="bg-[#007AFF] h-full rounded-full" style="width: 36%;"></div>
</div>
</div>
</div>
<!-- 小卡 3: 社区分享额度 (低额度:剩余 2/20,低于 20% 转警示橙 #FF9500) -->
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex flex-col justify-between relative overflow-hidden">
<div class="flex justify-between items-start">
<span class="text-[12px] text-[#8E8E93] font-medium">社区分享额度</span>
<span class="w-1.5 h-1.5 rounded-full bg-[#FF9500]"></span>
</div>
<div class="mt-1 flex items-baseline gap-1">
<span class="text-[24px] font-bold tracking-tight text-[#FF9500] font-mono">2</span>
<span class="text-[13px] text-[#8E8E93] font-mono">/ 20</span>
</div>
<!-- 警示橙进度条 -->
<div class="mt-3">
<div class="w-full bg-[#E5E5EA] h-1.5 rounded-full overflow-hidden">
<div class="bg-[#FF9500] h-full rounded-full" style="width: 10%;"></div>
</div>
</div>
</div>
<!-- 小卡 4: 衣柜分享额度 (剩余 4/10) -->
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex flex-col justify-between">
<div>
<span class="text-[12px] text-[#8E8E93] font-medium">衣柜分享额度</span>
<div class="mt-1 flex items-baseline gap-1">
<span class="text-[24px] font-bold tracking-tight text-gray-900 font-mono">4</span>
<span class="text-[13px] text-[#8E8E93] font-mono">/ 10</span>
</div>
</div>
<!-- 细进度条 (系统蓝) -->
<div class="mt-3">
<div class="w-full bg-[#E5E5EA] h-1.5 rounded-full overflow-hidden">
<div class="bg-[#007AFF] h-full rounded-full" style="width: 40%;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 3. 「额度明细」入口行(右侧箭头,进入流水明细) -->
<div class="bg-white rounded-[16px] px-4 py-3.5 border-hairline shadow-sm flex items-center justify-between cursor-pointer active:bg-gray-50">
<div class="flex items-center space-x-2.5">
<i class="fa-regular fa-file-lines text-[#007AFF] text-base"></i>
<span class="text-[14px] font-medium text-gray-900">额度明细</span>
</div>
<div class="flex items-center space-x-1.5 text-[#8E8E93]">
<span class="text-[12px]">近30天消耗流水</span>
<i class="fa-solid fa-chevron-right text-xs"></i>
</div>
</div>
<!-- 4. 「额度与会员充值」商品区 -->
<div class="space-y-3 pt-1">
<span class="text-[14px] font-semibold text-gray-800 px-1">额度与会员充值</span>
<!-- 分类筛选横滑标签条 -->
<div class="flex space-x-2 overflow-x-auto no-scrollbar pb-1">
<button class="px-3.5 py-1.5 rounded-full bg-[#007AFF] text-white text-[12px] font-medium shrink-0 shadow-sm">全部</button>
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">会员包</button>
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">上传包</button>
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">AI 推荐包</button>
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">衣柜分享包</button>
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">搭配分享包</button>
</div>
<!-- 商品列表:白底圆角卡片,严格不展示图片与标签,只呈现名称、描述、售价、原价与购买按钮 -->
<div class="space-y-2.5">
<!-- 商品 1: 会员 (皇冠 crown) -->
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
<div class="flex items-center space-x-3">
<!-- 类型图标:会员 = 皇冠 -->
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
<i class="fa-solid fa-crown text-[15px]"></i>
</div>
<div>
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">月度会员</h3>
<p class="text-[11px] text-[#8E8E93] mt-0.5">开通后 30 天内无限使用 AI 推荐</p>
</div>
</div>
<div class="text-right flex flex-col items-end shrink-0 pl-2">
<div class="flex items-baseline space-x-1">
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥19.00</span>
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥29.00</span>
</div>
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
购买
</button>
</div>
</div>
<!-- 商品 2: 上传包 (相机 camera) -->
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
<div class="flex items-center space-x-3">
<!-- 类型图标:上传 = 相机 -->
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
<i class="fa-solid fa-camera text-[15px]"></i>
</div>
<div>
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">AI识图上传 20次包</h3>
<p class="text-[11px] text-[#8E8E93] mt-0.5">智能精准抠图与属性标签解析</p>
</div>
</div>
<div class="text-right flex flex-col items-end shrink-0 pl-2">
<div class="flex items-baseline space-x-1">
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥6.00</span>
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥10.00</span>
</div>
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
购买
</button>
</div>
</div>
<!-- 商品 3: AI推荐包 (星星 sparkles) -->
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
<div class="flex items-center space-x-3">
<!-- 类型图标:AI = 星星 sparkles -->
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
<i class="fa-solid fa-wand-magic-sparkles text-[15px]"></i>
</div>
<div>
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">AI 穿搭推荐 30次包</h3>
<p class="text-[11px] text-[#8E8E93] mt-0.5">根据天气与场景一键定制穿搭方案</p>
</div>
</div>
<div class="text-right flex flex-col items-end shrink-0 pl-2">
<div class="flex items-baseline space-x-1">
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥9.90</span>
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥15.00</span>
</div>
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
购买
</button>
</div>
</div>
<!-- 商品 4: 衣柜分享包 (衣柜 warehouse/box) -->
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
<div class="flex items-center space-x-3">
<!-- 类型图标:衣柜分享 = 衣柜 -->
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
<i class="fa-solid fa-door-closed text-[15px]"></i>
</div>
<div>
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">衣柜分享额度 5次包</h3>
<p class="text-[11px] text-[#8E8E93] mt-0.5">支持生成整橱与精选快照给好友</p>
</div>
</div>
<div class="text-right flex flex-col items-end shrink-0 pl-2">
<div class="flex items-baseline space-x-1">
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥3.00</span>
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥5.00</span>
</div>
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
购买
</button>
</div>
</div>
<!-- 商品 5: 搭配分享包 (衣架 hanger) -->
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
<div class="flex items-center space-x-3">
<!-- 类型图标:搭配分享 = 衣架 hanger -->
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
<i class="fa-solid fa-shirt text-[15px]"></i>
</div>
<div>
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">社区搭配分享 10次包</h3>
<p class="text-[11px] text-[#8E8E93] mt-0.5">将个人穿搭方案公开发布至社区展示</p>
</div>
</div>
<div class="text-right flex flex-col items-end shrink-0 pl-2">
<div class="flex items-baseline space-x-1">
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥4.50</span>
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥8.00</span>
</div>
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
购买
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 Home Indicator -->
<div class="h-6 w-full flex justify-center items-center bg-[#F2F2F7]">
<div class="w-32 h-1 bg-black/25 rounded-full"></div>
</div>
</div>
</div>
<!-- ② 画板 2:订单确认子页面(点击购买后进入) -->
<div class="flex flex-col items-center">
<div class="text-xs font-semibold text-gray-500 mb-3 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-[#34C759]"></span>
<span>状态 2 · 二级子页面:订单确认(375×812)</span>
</div>
<div class="phone-container">
<!-- iOS 状态栏 -->
<div class="h-11 px-6 flex justify-between items-end pb-1.5 text-black text-xs font-semibold select-none">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-xs">
<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-11 px-4 flex items-center justify-between border-b border-[#E5E5EA]/40 bg-[#F2F2F7]">
<div class="flex items-center space-x-1 text-[#007AFF] active:opacity-60 cursor-pointer">
<i class="fa-solid fa-chevron-left text-base"></i>
<span class="text-[15px] font-normal tracking-tight">额度与会员</span>
</div>
<span class="text-[17px] font-semibold text-gray-900 pr-2">订单确认</span>
<!-- 右上胶囊 -->
<div class="capsule">
<div class="capsule-dot"></div>
<div class="capsule-line"></div>
<div class="capsule-ring"></div>
</div>
</div>
<!-- 主内容区 -->
<div class="flex-1 overflow-y-auto no-scrollbar px-4 pt-4 pb-6 space-y-4">
<!-- 支付金额展示核心区 -->
<div class="bg-white rounded-[16px] p-5 border-hairline shadow-sm text-center">
<span class="text-xs text-[#8E8E93] font-medium">实付金额</span>
<div class="text-[34px] font-bold text-gray-900 font-mono tracking-tight mt-1">
<span class="text-[22px] font-sans mr-0.5">¥</span>19.00
</div>
<div class="inline-flex items-center gap-1.5 mt-2 px-2.5 py-1 bg-emerald-50 text-[#34C759] text-[11px] rounded-full border border-emerald-100">
<i class="fa-solid fa-shield-halved text-[10px]"></i>
<span>微信支付官方安全环境</span>
</div>
</div>
<!-- 商品摘要卡(名称 + 权益说明) -->
<div class="bg-white rounded-[16px] p-4 border-hairline shadow-sm">
<div class="flex items-center justify-between pb-3 border-b border-gray-100">
<span class="text-[13px] font-semibold text-gray-900">购买商品明细</span>
<span class="text-[11px] text-[#8E8E93] font-mono">单号: ZT202504159821</span>
</div>
<!-- 商品名与金额 -->
<div class="pt-3.5 flex items-start justify-between">
<div class="flex items-start space-x-3">
<div class="w-10 h-10 rounded-xl bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0 mt-0.5">
<i class="fa-solid fa-crown text-base"></i>
</div>
<div>
<h4 class="text-[15px] font-semibold text-gray-900">月度会员服务</h4>
<p class="text-[12px] text-[#8E8E93] mt-0.5">服务期限:30天(支付成功后即时生效)</p>
</div>
</div>
<div class="text-right">
<div class="text-[15px] font-bold text-gray-900 font-mono">¥19.00</div>
<div class="text-[11px] text-[#8E8E93] line-through font-mono">¥29.00</div>
</div>
</div>
<!-- 权益说明模块 -->
<div class="mt-4 p-3 bg-[#F2F2F7] rounded-[12px] text-[12px] text-gray-700 space-y-1.5">
<div class="text-[12px] font-semibold text-gray-900 mb-1">包含尊享会员权益:</div>
<div class="flex items-center space-x-2">
<i class="fa-solid fa-circle-check text-[#007AFF] text-xs"></i>
<span>无限次使用 AI 智能穿搭推荐</span>
</div>
<div class="flex items-center space-x-2">
<i class="fa-solid fa-circle-check text-[#007AFF] text-xs"></i>
<span>每月额外赠送 50 次高清抠图上传额度</span>
</div>
<div class="flex items-center space-x-2">
<i class="fa-solid fa-circle-check text-[#007AFF] text-xs"></i>
<span>专属会员身份标识与好友衣橱全量快照权限</span>
</div>
</div>
</div>
<!-- 支付方式与费用明细 -->
<div class="bg-white rounded-[16px] p-4 border-hairline shadow-sm space-y-3">
<div class="flex justify-between items-center text-[13px]">
<span class="text-gray-500">商品总价</span>
<span class="text-gray-900 font-mono">¥29.00</span>
</div>
<div class="flex justify-between items-center text-[13px]">
<span class="text-gray-500">限时立减优惠</span>
<span class="text-[#FF3B30] font-mono">-¥10.00</span>
</div>
<div class="flex justify-between items-center text-[13px] pt-2 border-t border-gray-100">
<span class="text-gray-900 font-medium">支付方式</span>
<div class="flex items-center space-x-1.5 text-gray-800">
<i class="fa-brands fa-weixin text-[#07C160] text-base"></i>
<span class="font-medium">微信支付</span>
<i class="fa-solid fa-circle-check text-[#007AFF] text-xs ml-1"></i>
</div>
</div>
</div>
<!-- 购买须知提示 -->
<p class="text-[11px] text-[#8E8E93] text-center px-4 leading-relaxed">
点击「微信支付」即代表你同意《会员增值服务协议》。充值额度与会员服务为虚拟数字化商品,开通后不支持退款。
</p>
</div>
<!-- 底部固定栏(安全区上方):金额与微信支付按钮 -->
<div class="p-4 bg-white border-t border-[#E5E5EA] shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-gray-500">实付应结:</span>
<div class="text-[17px] font-bold text-[#007AFF] font-mono">
实付 <span class="text-[20px]">¥19.00</span>
</div>
</div>
<button class="w-full h-12 bg-[#007AFF] hover:bg-blue-600 active:scale-[0.99] transition-all rounded-[14px] text-white font-semibold text-[16px] flex items-center justify-center space-x-2 shadow-sm">
<i class="fa-brands fa-weixin text-lg"></i>
<span>微信支付</span>
</button>
</div>
<!-- 底部 Home Indicator -->
<div class="h-6 w-full flex justify-center items-center bg-white">
<div class="w-32 h-1 bg-black/25 rounded-full"></div>
</div>
</div>
</div>
<!-- ③ 附带状态卡:非会员状态下的顶部会员卡设计(状态对比) -->
<div class="flex flex-col items-center">
<div class="text-xs font-semibold text-gray-500 mb-3 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-gray-400"></span>
<span>状态 3 · 状态对比:非会员用户视角的顶部会员卡</span>
</div>
<div class="w-[375px] bg-white p-5 rounded-[20px] border-hairline shadow-sm space-y-4">
<div class="text-[12px] text-gray-500 font-medium">若当前用户为普通未付费用户,顶部展示状态如下:</div>
<!-- 非会员展示卡 -->
<div class="bg-gradient-to-r from-gray-50 to-blue-50/40 rounded-[16px] p-4 border border-dashed border-[#BBD7FF] flex items-center justify-between">
<div class="flex items-center space-x-3.5">
<div class="w-11 h-11 rounded-full bg-gray-100 flex items-center justify-center text-gray-400">
<i class="fa-solid fa-crown text-lg"></i>
</div>
<div>
<h3 class="text-[15px] font-bold text-gray-800">开通会员</h3>
<p class="text-[11px] text-[#8E8E93] mt-0.5">解锁更多 AI 与上传权益</p>
</div>
</div>
<!-- 立即开通 系统蓝按钮 -->
<button class="px-3.5 py-1.5 rounded-full bg-[#007AFF] text-white text-[13px] font-medium active:opacity-80 shadow-sm">
立即开通
</button>
</div>
<div class="bg-[#F2F2F7] rounded-xl p-3 text-[11px] text-gray-600 space-y-1">
<div class="font-semibold text-gray-800">业务映射机制:</div>
<div>• 点击「立即开通」后将平滑呼起右侧「订单确认」页面完成支付。</div>
<div>• 支付完成后,卡片切换为淡蓝 #E8F2FF 底,并展示有效期至 30 天后。</div>
</div>
</div>
</div>
</div>
<!-- 设计核查表与业务规范落实 Footer -->
<div class="w-full max-w-5xl mt-12 bg-white p-6 rounded-2xl border-hairline shadow-sm">
<div class="text-sm font-bold text-gray-900 mb-3 flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></span>
<span>第 11 屏 额度与会员商城设计核查表与规则映射</span>
<span class="text-xs font-normal text-gray-500">(严格遵守产品约束与微信小程序 HIG)</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-xs text-gray-600">
<div class="p-3 bg-[#F2F2F7] rounded-xl">
<div class="font-semibold text-gray-800 mb-1 text-[#FF3B30] flex items-center gap-1">
<i class="fa-solid fa-ban"></i> 1. 明确负向约束恪守
</div>
商品卡彻底移除任何形式的商品展示图片与标签,仅展示名称、精简描述、加粗系统蓝售价「¥ + 两位小数」与灰色删除线原价。
</div>
<div class="p-3 bg-[#F2F2F7] rounded-xl">
<div class="font-semibold text-gray-800 mb-1 text-[#007AFF] flex items-center gap-1">
<i class="fa-solid fa-shapes"></i> 2. 2×2 额度网格与预警
</div>
上传、AI推荐、社区分享、衣柜分享 4 卡。展示「剩余/总量」等宽大字;进度条默认系统蓝,剩余低于 20% 时自动转为警示橙 #FF9500。
</div>
<div class="p-3 bg-[#F2F2F7] rounded-xl">
<div class="font-semibold text-gray-800 mb-1 text-gray-800 flex items-center gap-1">
<i class="fa-solid fa-icons"></i> 3. SF Symbols 线性映射
</div>
严格对齐:会员=皇冠(crown)、上传=相机(camera)、AI=星星(sparkles)、衣柜分享=衣柜(closet)、搭配分享=衣架(hanger)。
</div>
<div class="p-3 bg-[#F2F2F7] rounded-xl">
<div class="font-semibold text-gray-800 mb-1 text-[#34C759] flex items-center gap-1">
<i class="fa-solid fa-credit-card"></i> 4. 订单确认二级链路
</div>
包含单号、商品摘要卡、权益清单、优惠核销、实付金额与固定底部「微信支付」主操作,形成真实完整的变现转化漏斗。
</div>
</div>
</div>
</body>
</html>