first commit
This commit is contained in:
@@ -0,0 +1,673 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>补充页 创建 / 编辑穿搭(全状态画板)</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&display=swap');
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #0F172A;
|
||||
color: #000000;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin: 0;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.device-shell {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #F2F2F7;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
|
||||
border: 8px solid #1E293B;
|
||||
border-radius: 44px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.capsule-btn {
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0 6px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.thin-border {
|
||||
border-bottom: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.thin-border-t {
|
||||
border-top: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.toast-pill {
|
||||
background: rgba(30, 30, 30, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen">
|
||||
|
||||
<!-- 页面主说明卡片 -->
|
||||
<header class="max-w-7xl mx-auto mb-8 px-4 text-white">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-slate-700/80 pb-5">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/20 text-blue-400 text-xs font-semibold mb-2">
|
||||
<span>微信小程序</span>
|
||||
<span>•</span>
|
||||
<span>补充页原型规范</span>
|
||||
</div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold tracking-tight text-white">创建 / 编辑穿搭 · 全场景状态画板</h1>
|
||||
<p class="text-sm text-slate-400 mt-1">严格遵循 375×812pt 原生小程序规范、iOS 设计语言与交互反馈体系</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs bg-slate-800/80 border border-slate-700 px-4 py-2 rounded-xl text-slate-300">
|
||||
<div><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#007AFF] mr-1.5"></span>系统强调色 #007AFF</div>
|
||||
<div><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#FF3B30] mr-1.5"></span>删除危险色 #FF3B30</div>
|
||||
<div><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#F2F2F7] border border-slate-600 mr-1.5"></span>底色 #F2F2F7</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 画板容器:横向排列 4 个核心状态屏幕 -->
|
||||
<main class="max-w-[1640px] mx-auto overflow-x-auto pb-12 pt-2 px-4 no-scrollbar">
|
||||
<div class="inline-flex gap-10 items-start">
|
||||
|
||||
<!-- ================= 屏幕 1:创建穿搭(初始 / 未选衣物空态) ================= -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-blue-400 bg-blue-950/60 px-2.5 py-1 rounded-md border border-blue-800/60">State 01</span>
|
||||
<h2 class="text-base font-medium text-slate-200 mt-1">创建穿搭 · 初始空态</h2>
|
||||
<p class="text-xs text-slate-400">无衣物预览占位、保存按钮置灰禁用</p>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 微信状态栏 -->
|
||||
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生导航栏 -->
|
||||
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
|
||||
<div class="flex items-center w-16">
|
||||
<button class="w-8 h-8 flex items-center justify-center text-black active:opacity-60">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="font-semibold text-[17px] text-[#000000]">创建穿搭</div>
|
||||
<!-- 右上角胶囊 -->
|
||||
<div class="w-20 flex justify-end">
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="h-3 w-[0.5px] bg-black/20"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-black/70"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容滚动区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar p-4 space-y-3 pb-24">
|
||||
<!-- 拼图预览区(空态) -->
|
||||
<div class="bg-white rounded-2xl p-4 flex flex-col items-center justify-center h-44 border border-dashed border-[#C7C7CC] relative overflow-hidden group">
|
||||
<div class="w-12 h-12 rounded-full bg-[#F2F2F7] flex items-center justify-center text-[#8E8E93] mb-2">
|
||||
<i class="fa-solid fa-shirt text-xl text-[#8E8E93]"></i>
|
||||
</div>
|
||||
<p class="text-[13px] text-[#8E8E93]">还没有选择衣物</p>
|
||||
<span class="text-[11px] text-[#C7C7CC] mt-0.5">点击下方「选择衣物」添加你的单品</span>
|
||||
</div>
|
||||
|
||||
<!-- 表单卡片 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm space-y-3">
|
||||
<!-- 穿搭名称 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">
|
||||
穿搭名称 <span class="text-[#FF3B30]">*</span>
|
||||
</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">0/32</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="给这套穿搭起个名字"
|
||||
class="w-full h-11 px-3.5 bg-[#F2F2F7] rounded-[10px] text-[14px] placeholder-[#C7C7CC] outline-none border border-transparent focus:border-[#007AFF]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 穿搭描述 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">穿搭描述</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">0/500</span>
|
||||
</div>
|
||||
<textarea
|
||||
rows="3"
|
||||
placeholder="简单描述这套穿搭的灵感或亮点"
|
||||
class="w-full p-3 bg-[#F2F2F7] rounded-[10px] text-[14px] placeholder-[#C7C7CC] outline-none resize-none border border-transparent focus:border-[#007AFF]"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 适合场景 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">适合场景</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">最多3个</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 pt-0.5">
|
||||
<button class="h-7 px-3 rounded-full border border-dashed border-[#007AFF] text-[#007AFF] text-xs font-medium flex items-center gap-1 bg-[#007AFF]/5">
|
||||
<i class="fa-solid fa-plus text-[10px]"></i> 添加场景
|
||||
</button>
|
||||
<span class="text-xs text-[#8E8E93] self-center">如:通勤、约会、旅行</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择衣物分组入口卡片 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm flex items-center justify-between active:bg-[#F2F2F7] transition cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-[#007AFF]/10 text-[#007AFF] flex items-center justify-center">
|
||||
<i class="fa-solid fa-vest-patches text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[14px] font-semibold text-[#1C1C1E]">选择衣橱单品</div>
|
||||
<div class="text-[12px] text-[#8E8E93]">选择 1~10 件衣物合成画报</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-[#8E8E93] text-[13px]">
|
||||
<span>未选择</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定栏(安全区上方) -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md thin-border-t px-4 pt-3 pb-8 z-30">
|
||||
<button disabled class="w-full h-11 rounded-full bg-[#007AFF]/40 text-white font-semibold text-[15px] cursor-not-allowed">
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ================= 屏幕 2:编辑穿搭(预填已有信息 + 拼图预览 + 删除) ================= -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-emerald-400 bg-emerald-950/60 px-2.5 py-1 rounded-md border border-emerald-800/60">State 02</span>
|
||||
<h2 class="text-base font-medium text-slate-200 mt-1">编辑穿搭 · 预填状态</h2>
|
||||
<p class="text-xs text-slate-400">顶部多图抠图拼贴错落摆放、含删除红色按钮</p>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 微信状态栏 -->
|
||||
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生导航栏 -->
|
||||
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
|
||||
<div class="flex items-center w-16">
|
||||
<button class="w-8 h-8 flex items-center justify-center text-black active:opacity-60">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="font-semibold text-[17px] text-[#000000]">编辑穿搭</div>
|
||||
<div class="w-20 flex justify-end">
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="h-3 w-[0.5px] bg-black/20"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-black/70"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容滚动区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar p-4 space-y-3 pb-36">
|
||||
<!-- 顶部拼图预览区(错落抠图展示) -->
|
||||
<div class="bg-white rounded-2xl p-3 shadow-sm relative overflow-hidden">
|
||||
<div class="flex justify-between items-center mb-2 px-1">
|
||||
<span class="text-[12px] font-semibold text-[#8E8E93]">穿搭画报拼图</span>
|
||||
<span class="text-[11px] text-[#007AFF] bg-[#007AFF]/10 px-2 py-0.5 rounded-full font-medium">已组合 4 件单品</span>
|
||||
</div>
|
||||
<!-- 错落布局画板 -->
|
||||
<div class="h-36 bg-[#F8F8FA] rounded-xl flex items-center justify-center gap-2 p-2 relative overflow-hidden border border-[#E5E5EA]">
|
||||
<!-- 单品 1: 西装外套 -->
|
||||
<div class="w-20 h-28 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform -rotate-2">
|
||||
<div class="w-12 h-14 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
|
||||
<i class="fa-solid fa-shirt text-xl text-[#3A3A3C]"></i>
|
||||
</div>
|
||||
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">羊毛西装</span>
|
||||
<span class="text-[8px] text-[#8E8E93]">外套</span>
|
||||
</div>
|
||||
<!-- 单品 2: 针织内搭 -->
|
||||
<div class="w-18 h-26 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform translate-y-1">
|
||||
<div class="w-11 h-12 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
|
||||
<i class="fa-solid fa-vest text-lg text-[#007AFF]"></i>
|
||||
</div>
|
||||
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">高领打底</span>
|
||||
<span class="text-[8px] text-[#8E8E93]">上装</span>
|
||||
</div>
|
||||
<!-- 单品 3: 直筒裤 -->
|
||||
<div class="w-18 h-28 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform rotate-1">
|
||||
<div class="w-10 h-14 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
|
||||
<i class="fa-solid fa-socks text-lg text-[#48484A]"></i>
|
||||
</div>
|
||||
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">垂坠阔腿裤</span>
|
||||
<span class="text-[8px] text-[#8E8E93]">下装</span>
|
||||
</div>
|
||||
<!-- 单品 4: 乐福鞋 -->
|
||||
<div class="w-16 h-22 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform rotate-3">
|
||||
<div class="w-10 h-10 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
|
||||
<i class="fa-solid fa-shoe-prints text-base text-[#8E8E93]"></i>
|
||||
</div>
|
||||
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">复古乐福</span>
|
||||
<span class="text-[8px] text-[#8E8E93]">鞋履</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单卡片(已预填) -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm space-y-3.5">
|
||||
<!-- 穿搭名称 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">
|
||||
穿搭名称 <span class="text-[#FF3B30]">*</span>
|
||||
</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">7/32</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value="初秋通勤三件套"
|
||||
class="w-full h-11 px-3.5 bg-[#F2F2F7] rounded-[10px] text-[14px] text-[#1C1C1E] font-medium outline-none border border-transparent focus:border-[#007AFF]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 穿搭描述 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">穿搭描述</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">28/500</span>
|
||||
</div>
|
||||
<textarea
|
||||
rows="3"
|
||||
class="w-full p-3 bg-[#F2F2F7] rounded-[10px] text-[14px] text-[#1C1C1E] outline-none resize-none border border-transparent focus:border-[#007AFF]"
|
||||
>微凉秋日的干练职场风格,以深灰廓形羊毛西装搭配高腰阔腿裤,兼具气场与舒适度。</textarea>
|
||||
</div>
|
||||
|
||||
<!-- 适合场景 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">适合场景</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">已选 2 个</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 pt-0.5">
|
||||
<span class="h-7 px-3 rounded-full bg-[#007AFF]/10 text-[#007AFF] text-xs font-medium flex items-center gap-1.5">
|
||||
通勤
|
||||
<i class="fa-solid fa-xmark text-[10px] text-[#007AFF]/60 cursor-pointer"></i>
|
||||
</span>
|
||||
<span class="h-7 px-3 rounded-full bg-[#007AFF]/10 text-[#007AFF] text-xs font-medium flex items-center gap-1.5">
|
||||
商务会谈
|
||||
<i class="fa-solid fa-xmark text-[10px] text-[#007AFF]/60 cursor-pointer"></i>
|
||||
</span>
|
||||
<button class="h-7 px-2.5 rounded-full border border-dashed border-[#C7C7CC] text-[#8E8E93] text-xs flex items-center gap-1 hover:border-[#007AFF] hover:text-[#007AFF]">
|
||||
<i class="fa-solid fa-plus text-[10px]"></i> 添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择衣物分组入口(已选 4 件) -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm flex items-center justify-between active:bg-[#F2F2F7] transition cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-[#007AFF]/10 text-[#007AFF] flex items-center justify-center">
|
||||
<i class="fa-solid fa-vest-patches text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[14px] font-semibold text-[#1C1C1E]">选择衣橱单品</div>
|
||||
<div class="text-[12px] text-[#8E8E93]">点击调整当前穿搭包含的衣物</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[13px] text-[#007AFF] font-medium">已选 4 件</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#8E8E93]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定操作栏(保存 + 删除穿搭) -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md thin-border-t px-4 pt-2 pb-7 z-30 space-y-2">
|
||||
<!-- 删除穿搭入口(红色文字按钮) -->
|
||||
<div class="text-center pt-1">
|
||||
<button class="text-[14px] text-[#FF3B30] font-medium py-1 px-4 active:opacity-60">
|
||||
删除穿搭
|
||||
</button>
|
||||
</div>
|
||||
<!-- 保存主按钮 -->
|
||||
<button class="w-full h-11 rounded-full bg-[#007AFF] text-white font-semibold text-[15px] shadow-sm active:bg-[#0062CC]">
|
||||
保存修改
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ================= 屏幕 3:衣橱多选网格选择页(二级半屏或多选网格) ================= -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-purple-400 bg-purple-950/60 px-2.5 py-1 rounded-md border border-purple-800/60">State 03</span>
|
||||
<h2 class="text-base font-medium text-slate-200 mt-1">衣橱多选网格</h2>
|
||||
<p class="text-xs text-slate-400">两列卡片、系统蓝选中描边、右上蓝对勾、最多10件</p>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 微信状态栏 -->
|
||||
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生导航栏 -->
|
||||
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
|
||||
<div class="flex items-center w-16">
|
||||
<button class="w-8 h-8 flex items-center justify-center text-black active:opacity-60">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="font-semibold text-[17px] text-[#000000]">选择衣橱单品</div>
|
||||
<div class="w-20 flex justify-end">
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="h-3 w-[0.5px] bg-black/20"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-black/70"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类筛选横滑栏 -->
|
||||
<div class="bg-white px-3 py-2 thin-border flex gap-2 overflow-x-auto no-scrollbar text-xs font-medium">
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#007AFF] text-white flex-shrink-0">全部 (18)</button>
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">外套 (5)</button>
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">上装 (7)</button>
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">下装 (4)</button>
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">鞋履 (2)</button>
|
||||
</div>
|
||||
|
||||
<!-- 两列衣物网格(复用第2屏规范) -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar p-3.5 pb-24">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<!-- 卡片 1 (已勾选) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-shirt text-3xl text-slate-700"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">黑色双排扣西装</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>外套 · 秋冬</span>
|
||||
<span class="text-[#007AFF] font-medium">羊毛</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 2 (已勾选) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-vest text-3xl text-blue-500"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">米白高领羊绒衫</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>上装 · 秋冬</span>
|
||||
<span class="text-[#007AFF] font-medium">羊绒</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 3 (已勾选) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-socks text-3xl text-slate-600"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">垂感高腰阔腿西裤</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>下装 · 四季</span>
|
||||
<span class="text-[#007AFF] font-medium">西装面料</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 4 (已勾选) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-shoe-prints text-3xl text-stone-500"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">复古厚底乐福鞋</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>鞋履 · 四季</span>
|
||||
<span class="text-[#007AFF] font-medium">牛皮</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 5 (未勾选态) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border border-[#E5E5EA] active:scale-[0.98] transition cursor-pointer">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full border border-[#C7C7CC] bg-white flex items-center justify-center text-[10px] text-transparent z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-glasses text-3xl text-slate-400"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">金属细框墨镜</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>配饰 · 夏季</span>
|
||||
<span>合金</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 6 (未勾选态) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border border-[#E5E5EA] active:scale-[0.98] transition cursor-pointer">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full border border-[#C7C7CC] bg-white flex items-center justify-center text-[10px] text-transparent z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-bag-shopping text-3xl text-amber-700/60"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">焦糖色托特手袋</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>包袋 · 四季</span>
|
||||
<span>植鞣皮</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定栏(已选数量 + 确定按钮) -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md thin-border-t px-4 pt-3 pb-8 z-30 flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-[15px] font-semibold text-[#1C1C1E]">
|
||||
已选 <span class="text-[#007AFF]">4</span> 件
|
||||
</div>
|
||||
<div class="text-[11px] text-[#8E8E93]">最多可选择 10 件单品</div>
|
||||
</div>
|
||||
<button class="h-10 px-7 rounded-full bg-[#007AFF] text-white font-semibold text-[14px] shadow-sm active:bg-[#0062CC]">
|
||||
确定
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ================= 屏幕 4:异常态反馈与确认弹窗画板 ================= -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-rose-400 bg-rose-950/60 px-2.5 py-1 rounded-md border border-rose-800/60">State 04</span>
|
||||
<h2 class="text-base font-medium text-slate-200 mt-1">异常提示 & 确认删除</h2>
|
||||
<p class="text-xs text-slate-400">毛玻璃轻提示浮层、iOS 原生系统级确认对话框</p>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 微信状态栏 -->
|
||||
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生导航栏 -->
|
||||
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
|
||||
<div class="flex items-center w-16">
|
||||
<button class="w-8 h-8 flex items-center justify-center text-black">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="font-semibold text-[17px] text-[#000000]">编辑穿搭</div>
|
||||
<div class="w-20 flex justify-end">
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="h-3 w-[0.5px] bg-black/20"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模拟半透明遮罩与浮层展示 -->
|
||||
<div class="flex-1 p-4 flex flex-col justify-around relative">
|
||||
|
||||
<!-- 异常轻提示浮层 1: 未选衣物 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">未选衣物点击保存触发:</div>
|
||||
<div class="toast-pill text-white px-4 py-2.5 rounded-2xl flex items-center gap-2.5 text-[13px] font-medium animate-pulse">
|
||||
<div class="w-5 h-5 rounded-full bg-[#FF9500] flex items-center justify-center text-[10px] text-white">
|
||||
<i class="fa-solid fa-exclamation"></i>
|
||||
</div>
|
||||
<span>至少选择 1 件衣物</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 异常轻提示浮层 2: 名称为空 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">名称为空触发:</div>
|
||||
<div class="toast-pill text-white px-4 py-2.5 rounded-2xl flex items-center gap-2.5 text-[13px] font-medium">
|
||||
<div class="w-5 h-5 rounded-full bg-[#FF3B30] flex items-center justify-center text-[10px] text-white">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
</div>
|
||||
<span>请填写穿搭名称</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 异常轻提示浮层 3: 超出10件 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">多选超过10件触发:</div>
|
||||
<div class="toast-pill text-white px-4 py-2.5 rounded-2xl flex items-center gap-2.5 text-[13px] font-medium">
|
||||
<div class="w-5 h-5 rounded-full bg-[#FF9500] flex items-center justify-center text-[10px] text-white">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</div>
|
||||
<span>最多选择 10 件衣物</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成功轻提示: 保存成功 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">保存成功反馈:</div>
|
||||
<div class="toast-pill text-white px-5 py-3 rounded-2xl flex flex-col items-center gap-1.5 text-[13px] font-medium">
|
||||
<i class="fa-solid fa-circle-check text-2xl text-[#34C759]"></i>
|
||||
<span>已保存</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生 iOS 确认弹窗:确认删除这套穿搭? -->
|
||||
<div class="mt-2 bg-white/95 backdrop-blur-xl rounded-[14px] overflow-hidden border border-[#E5E5EA] shadow-xl mx-2">
|
||||
<div class="p-4 text-center">
|
||||
<div class="font-semibold text-[17px] text-[#000000]">确认删除这套穿搭?</div>
|
||||
<div class="text-[13px] text-[#8E8E93] mt-1 leading-snug">删除后不可恢复,但不会影响衣橱内的单品。</div>
|
||||
</div>
|
||||
<div class="border-t border-[#E5E5EA] grid grid-cols-2">
|
||||
<button class="h-11 text-[17px] text-[#007AFF] font-normal border-r border-[#E5E5EA] active:bg-[#F2F2F7]">
|
||||
取消
|
||||
</button>
|
||||
<button class="h-11 text-[17px] text-[#FF3B30] font-semibold active:bg-[#F2F2F7]">
|
||||
确认删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区占位 -->
|
||||
<div class="h-8 bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部规格对照与交付说明 -->
|
||||
<footer class="max-w-7xl mx-auto mt-6 px-4">
|
||||
<div class="bg-slate-800/80 border border-slate-700/80 rounded-2xl p-6 text-slate-300">
|
||||
<h3 class="text-white font-semibold text-base mb-3 flex items-center gap-2">
|
||||
<i class="fa-solid fa-clipboard-check text-blue-400"></i>
|
||||
补充页设计规范落地检查清单
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs leading-relaxed text-slate-400">
|
||||
<div class="bg-slate-900/60 p-3.5 rounded-xl border border-slate-700/50">
|
||||
<div class="font-medium text-slate-200 mb-1 text-[13px]">1. 视图与拼图引擎</div>
|
||||
<p>顶部预览区在未选衣物时展示 <code class="text-blue-400">#F2F2F7</code> 占位与线性衣架;已选时自适应渲染错落层次抠图卡片,并标注已选件数。</p>
|
||||
</div>
|
||||
<div class="bg-slate-900/60 p-3.5 rounded-xl border border-slate-700/50">
|
||||
<div class="font-medium text-slate-200 mb-1 text-[13px]">2. 完整表单与交互约束</div>
|
||||
<p>名称必填(上限32字)、描述多行(上限500字含字数计数器)、场景快捷标签,底部保存按钮未就绪时降低透明度置灰禁用。</p>
|
||||
</div>
|
||||
<div class="bg-slate-900/60 p-3.5 rounded-xl border border-slate-700/50">
|
||||
<div class="font-medium text-slate-200 mb-1 text-[13px]">3. 编辑状态与异常防御</div>
|
||||
<p>编辑态顶部为预填数据与独立红色「删除穿搭」入口,弹窗带二次确认;集成 1~10 件衣物阈值校验与毛玻璃 Toast 轻提示。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user