first commit
This commit is contained in:
@@ -0,0 +1,610 @@
|
||||
<!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]">剩余 < 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>
|
||||
Reference in New Issue
Block a user