first commit
This commit is contained in:
@@ -0,0 +1,668 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第9屏 衣柜分享(全流程画板)</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&display=swap');
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #ECEEF2;
|
||||
color: #1C1C1E;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.mock-screen {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #F2F2F7;
|
||||
border-radius: 44px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.12), 0 0 0 10px #1E1E1E, 0 0 0 11px #D1D5DB;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
z-index: 50;
|
||||
}
|
||||
.wechat-nav {
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
background: #F2F2F7;
|
||||
}
|
||||
.nav-capsule {
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.home-indicator {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 134px;
|
||||
height: 5px;
|
||||
background-color: #1C1C1E;
|
||||
border-radius: 100px;
|
||||
z-index: 50;
|
||||
}
|
||||
.hairline-b {
|
||||
border-bottom: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.hairline-t {
|
||||
border-top: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.cloth-grid-item {
|
||||
aspect-ratio: 1/1;
|
||||
background-color: #F2F2F7;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.badge-corner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #8E8E93;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="p-8 md:p-12 flex flex-col items-center">
|
||||
|
||||
<!-- Header / Meta Bar -->
|
||||
<header class="w-full max-w-[1280px] bg-white rounded-3xl p-7 mb-10 shadow-sm border border-slate-200/80">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-[#007AFF] inline-block shadow-sm shadow-blue-400"></span>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-gray-900">第 9 屏 | 衣柜分享( 3 个全状态核心画板 )</h1>
|
||||
<span class="bg-blue-50 text-[#007AFF] text-xs font-semibold px-2.5 py-1 rounded-full border border-blue-100">微信小程序二级页面 · 375 × 812 pt</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2 leading-relaxed">
|
||||
规范约束:主色 <span class="font-mono text-gray-700 font-semibold">#007AFF</span> · 背景底色 <span class="font-mono text-gray-700 font-semibold">#F2F2F7</span> · 纯白卡片圆角 16pt · 0.5px 发丝分割线 · 严格区分属主与访客权限 · 包含有效期面板、分享预览与失效态。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs font-medium text-gray-600 bg-gray-50 p-2.5 rounded-2xl border border-gray-100">
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-layer-group text-[#007AFF]"></i> 3 核心画板</span>
|
||||
<span class="text-gray-300">|</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-clock text-amber-500"></i> 有效期面板</span>
|
||||
<span class="text-gray-300">|</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-share-nodes text-emerald-500"></i> 小程序分享卡</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Screens Container -->
|
||||
<main class="w-full max-w-[1280px] flex flex-row flex-wrap justify-center gap-10">
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- ① 画板 1: 「衣柜分享 - 我的分享」列表页 -->
|
||||
<!-- ========================================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>
|
||||
<h2 class="text-sm font-bold text-gray-800">① 衣柜分享 - 我的分享</h2>
|
||||
<span class="text-xs text-gray-400 font-medium">列表管理 · 正常/过期/取消全态</span>
|
||||
</div>
|
||||
|
||||
<div class="mock-screen flex flex-col">
|
||||
<!-- iOS Status Bar -->
|
||||
<div class="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="font-mono text-[10px]">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WeChat Navigation Bar -->
|
||||
<div class="wechat-nav hairline-b">
|
||||
<div class="flex items-center gap-1 text-[#007AFF] text-[15px] font-medium active:opacity-60 cursor-pointer">
|
||||
<i class="fa-solid fa-chevron-left text-[14px]"></i>
|
||||
<span>我的</span>
|
||||
</div>
|
||||
<span class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">衣柜分享</span>
|
||||
<div class="nav-capsule">
|
||||
<span class="text-[11px] text-gray-700"><i class="fa-solid fa-ellipsis"></i></span>
|
||||
<span class="w-[0.5px] h-3 bg-gray-300"></span>
|
||||
<span class="w-2.5 h-2.5 rounded-full border-[1.5px] border-gray-700"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Screen Content Scroll Area -->
|
||||
<div class="flex-1 overflow-y-auto px-4 pt-3 pb-20">
|
||||
|
||||
<!-- Top Action / Quota Banner -->
|
||||
<div class="flex items-center justify-between mb-3 bg-white p-3 rounded-2xl border border-gray-100 shadow-sm">
|
||||
<div>
|
||||
<div class="text-[12px] font-semibold text-gray-800">衣柜分享额度</div>
|
||||
<div class="text-[10px] text-gray-400 mt-0.5">当前剩余 <span class="text-[#007AFF] font-bold font-mono">4</span> 次分享</div>
|
||||
</div>
|
||||
<button class="px-3 py-1.5 border border-[#007AFF] text-[#007AFF] rounded-full text-[12px] font-semibold flex items-center gap-1 hover:bg-blue-50 active:scale-95 transition-all">
|
||||
<i class="fa-solid fa-plus text-[10px]"></i>
|
||||
<span>新建分享</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-[12px] font-semibold text-gray-500 mb-2 px-1">分享记录 (3)</div>
|
||||
|
||||
<!-- List Item 1: 正常进行中态 -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 mb-3 border border-gray-100 shadow-sm relative overflow-hidden">
|
||||
<div class="flex gap-3">
|
||||
<!-- Left 2x2 Preview Grid -->
|
||||
<div class="w-[76px] h-[76px] rounded-xl bg-[#F2F2F7] grid grid-cols-2 gap-1 p-1 flex-shrink-0">
|
||||
<div class="bg-white rounded-md flex items-center justify-center text-gray-300 text-[10px]">
|
||||
<i class="fa-solid fa-shirt"></i>
|
||||
</div>
|
||||
<div class="bg-white rounded-md flex items-center justify-center text-gray-300 text-[10px]">
|
||||
<i class="fa-solid fa-vest"></i>
|
||||
</div>
|
||||
<div class="bg-white rounded-md flex items-center justify-center text-gray-300 text-[10px]">
|
||||
<i class="fa-solid fa-socks"></i>
|
||||
</div>
|
||||
<div class="bg-white rounded-md flex items-center justify-center text-gray-300 text-[10px]">
|
||||
<i class="fa-solid fa-mitten"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Meta -->
|
||||
<div class="flex-1 flex flex-col justify-between py-0.5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-[14px] font-bold text-gray-900">衣柜分享 · 12 件</h3>
|
||||
<span class="text-[#34C759] text-[10px] font-medium bg-green-50 px-1.5 py-0.5 rounded border border-green-100">有效中</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 mt-1">
|
||||
<span class="text-[10px] text-[#007AFF] bg-blue-50 px-1.5 py-0.5 rounded font-medium">部分衣物</span>
|
||||
<span class="text-[10px] text-gray-400">已浏览 28 次</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] text-gray-400 mt-2">
|
||||
<span class="flex items-center gap-1 font-mono text-[#FF9500] font-medium">
|
||||
<i class="fa-regular fa-clock text-[10px]"></i> 3 天后过期
|
||||
</span>
|
||||
<span class="text-[#007AFF] text-[11px] font-medium flex items-center">
|
||||
管理 <i class="fa-solid fa-chevron-right text-[9px] ml-0.5"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List Item 2: 全量衣橱 & 长期有效 -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 mb-3 border border-gray-100 shadow-sm relative overflow-hidden">
|
||||
<div class="flex gap-3">
|
||||
<!-- Left 2x2 Preview Grid -->
|
||||
<div class="w-[76px] h-[76px] rounded-xl bg-blue-50/60 grid grid-cols-2 gap-1 p-1 flex-shrink-0">
|
||||
<div class="bg-white rounded-md flex items-center justify-center text-blue-300 text-[10px]">
|
||||
<i class="fa-solid fa-vest-patches"></i>
|
||||
</div>
|
||||
<div class="bg-white rounded-md flex items-center justify-center text-blue-300 text-[10px]">
|
||||
<i class="fa-solid fa-hat-wizard"></i>
|
||||
</div>
|
||||
<div class="bg-white rounded-md flex items-center justify-center text-blue-300 text-[10px]">
|
||||
<i class="fa-solid fa-glasses"></i>
|
||||
</div>
|
||||
<div class="bg-white rounded-md flex items-center justify-center text-blue-400 font-bold text-[9px] font-mono">
|
||||
+48
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Meta -->
|
||||
<div class="flex-1 flex flex-col justify-between py-0.5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-[14px] font-bold text-gray-900">春夏季全量衣橱 · 52 件</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 mt-1">
|
||||
<span class="text-[10px] text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded font-medium">全量衣橱</span>
|
||||
<span class="text-[10px] text-gray-400">已浏览 142 次</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] text-gray-400 mt-2">
|
||||
<span class="text-gray-500 font-medium">长期有效</span>
|
||||
<span class="text-[#007AFF] text-[11px] font-medium flex items-center">
|
||||
管理 <i class="fa-solid fa-chevron-right text-[9px] ml-0.5"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List Item 3: 已过期态 (透明度降低 + 右上角灰色角标) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 mb-3 border border-gray-100 shadow-sm relative overflow-hidden opacity-60">
|
||||
<span class="badge-corner">已过期</span>
|
||||
<div class="flex gap-3">
|
||||
<div class="w-[76px] h-[76px] rounded-xl bg-[#F2F2F7] grid grid-cols-2 gap-1 p-1 flex-shrink-0">
|
||||
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-shirt"></i></div>
|
||||
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-shoe-prints"></i></div>
|
||||
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-hat-cowboy"></i></div>
|
||||
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-bag-shopping"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between py-0.5">
|
||||
<div>
|
||||
<h3 class="text-[14px] font-bold text-gray-600">复古通勤胶囊 · 6 件</h3>
|
||||
<div class="flex items-center gap-1.5 mt-1">
|
||||
<span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">部分衣物</span>
|
||||
<span class="text-[10px] text-gray-400">2025.04.01 过期</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[11px] text-gray-400 mt-2">
|
||||
已失效(不可再查看)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List Item 4: 已取消态 -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 mb-3 border border-gray-100 shadow-sm relative overflow-hidden opacity-60">
|
||||
<span class="badge-corner bg-gray-400">已取消</span>
|
||||
<div class="flex gap-3">
|
||||
<div class="w-[76px] h-[76px] rounded-xl bg-[#F2F2F7] grid grid-cols-2 gap-1 p-1 flex-shrink-0">
|
||||
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-shirt"></i></div>
|
||||
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-vest"></i></div>
|
||||
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-socks"></i></div>
|
||||
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-mitten"></i></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between py-0.5">
|
||||
<div>
|
||||
<h3 class="text-[14px] font-bold text-gray-600">周末休闲风 · 4 件</h3>
|
||||
<div class="flex items-center gap-1.5 mt-1">
|
||||
<span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">部分衣物</span>
|
||||
<span class="text-[10px] text-gray-400">属主手动撤销</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[11px] text-gray-400 mt-2">
|
||||
已手动取消公开分享
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Safe Area Home Bar -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- ② 画板 2: 「衣柜分享 - 创建分享」含有效期面板与卡片预览 -->
|
||||
<!-- ========================================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-indigo-500"></span>
|
||||
<h2 class="text-sm font-bold text-gray-800">② 衣柜分享 - 创建分享</h2>
|
||||
<span class="text-xs text-gray-400 font-medium">多选网格 + 底部有效期面板 + 微信卡片预览</span>
|
||||
</div>
|
||||
|
||||
<div class="mock-screen flex flex-col">
|
||||
<!-- iOS Status Bar -->
|
||||
<div class="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="font-mono text-[10px]">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WeChat Navigation Bar -->
|
||||
<div class="wechat-nav hairline-b">
|
||||
<div class="flex items-center gap-1 text-[#007AFF] text-[15px] font-medium cursor-pointer">
|
||||
<i class="fa-solid fa-chevron-left text-[14px]"></i>
|
||||
<span>取消</span>
|
||||
</div>
|
||||
<span class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">创建衣柜分享</span>
|
||||
<div class="nav-capsule">
|
||||
<span class="text-[11px] text-gray-700"><i class="fa-solid fa-ellipsis"></i></span>
|
||||
<span class="w-[0.5px] h-3 bg-gray-300"></span>
|
||||
<span class="w-2.5 h-2.5 rounded-full border-[1.5px] border-gray-700"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Underlying Page Content (Slightly dimmed behind action sheet) -->
|
||||
<div class="flex-1 overflow-y-auto px-4 pt-3 pb-24">
|
||||
<!-- Step 1: Two Big Selection Cards -->
|
||||
<div class="text-[12px] font-semibold text-gray-500 mb-2 px-1">第 1 步:选择分享模式</div>
|
||||
<div class="grid grid-cols-2 gap-2.5 mb-3">
|
||||
<!-- Mode 1: 部分衣物 (Selected) -->
|
||||
<div class="bg-blue-50/50 border-2 border-[#007AFF] rounded-[16px] p-3 relative cursor-pointer shadow-sm">
|
||||
<div class="w-4 h-4 bg-[#007AFF] text-white rounded-full flex items-center justify-center text-[9px] absolute top-2.5 right-2.5">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-7 h-7 rounded-lg bg-blue-100 text-[#007AFF] flex items-center justify-center text-xs mb-2">
|
||||
<i class="fa-solid fa-check-double"></i>
|
||||
</div>
|
||||
<div class="text-[13px] font-bold text-gray-900">部分衣物</div>
|
||||
<p class="text-[10px] text-gray-500 mt-1 leading-snug">挑选几件衣物分享给好友</p>
|
||||
</div>
|
||||
|
||||
<!-- Mode 2: 全量快照 -->
|
||||
<div class="bg-white border border-gray-200 rounded-[16px] p-3 relative cursor-pointer hover:border-gray-300">
|
||||
<div class="w-7 h-7 rounded-lg bg-gray-100 text-gray-600 flex items-center justify-center text-xs mb-2">
|
||||
<i class="fa-solid fa-boxes-stacked"></i>
|
||||
</div>
|
||||
<div class="text-[13px] font-bold text-gray-900">全量快照</div>
|
||||
<p class="text-[10px] text-gray-500 mt-1 leading-snug">分享当前衣橱的全部衣物</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Multi-select Grid (两列网格,间距 12pt,圆角 16pt,1:1图片区) -->
|
||||
<div class="flex items-center justify-between mb-2 px-1">
|
||||
<span class="text-[12px] font-semibold text-gray-500">挑选衣物 (已勾选 6 件)</span>
|
||||
<span class="text-[11px] text-[#007AFF] font-medium">全选</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<!-- Item 1 (Checked) -->
|
||||
<div class="bg-white rounded-[16px] p-2 border-2 border-[#007AFF] shadow-sm relative">
|
||||
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
|
||||
<i class="fa-solid fa-shirt text-2xl text-slate-300"></i>
|
||||
<div class="w-5 h-5 bg-[#007AFF] text-white rounded-full flex items-center justify-center text-[10px] absolute top-1.5 right-1.5 shadow-sm">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-[12px] font-medium text-gray-800 truncate">经典条纹海魂衫</div>
|
||||
<div class="text-[10px] text-gray-400">上装 · T恤</div>
|
||||
</div>
|
||||
|
||||
<!-- Item 2 (Checked) -->
|
||||
<div class="bg-white rounded-[16px] p-2 border-2 border-[#007AFF] shadow-sm relative">
|
||||
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
|
||||
<i class="fa-solid fa-vest text-2xl text-slate-300"></i>
|
||||
<div class="w-5 h-5 bg-[#007AFF] text-white rounded-full flex items-center justify-center text-[10px] absolute top-1.5 right-1.5 shadow-sm">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-[12px] font-medium text-gray-800 truncate">米白针织马甲</div>
|
||||
<div class="text-[10px] text-gray-400">上装 · 针织</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dim Backdrop for Modal ActionSheet -->
|
||||
<div class="absolute inset-0 bg-black/40 z-40"></div>
|
||||
|
||||
<!-- Bottom Modal: 有效期面板 & 确认分享 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-[24px] z-50 p-4 pb-8 shadow-2xl animate-fade-in-up">
|
||||
<!-- Grabber -->
|
||||
<div class="w-10 h-1 bg-gray-300 rounded-full mx-auto mb-3"></div>
|
||||
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div>
|
||||
<h4 class="text-[15px] font-bold text-gray-900">设置分享有效期</h4>
|
||||
<p class="text-[11px] text-gray-400">已选 6 件衣物 · 到期后自动转为失效态</p>
|
||||
</div>
|
||||
<button class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Radio List: 1天 / 7天 / 30天 / 长期有效 -->
|
||||
<div class="space-y-1.5 mb-4">
|
||||
<div class="flex items-center justify-between p-2.5 rounded-xl hover:bg-gray-50 cursor-pointer">
|
||||
<span class="text-[13px] text-gray-700">1 天(临时私密分享)</span>
|
||||
<span class="w-4 h-4 rounded-full border border-gray-300"></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2.5 rounded-xl bg-blue-50/60 border border-blue-100 cursor-pointer">
|
||||
<span class="text-[13px] font-semibold text-[#007AFF]">7 天(推荐常用)</span>
|
||||
<div 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2.5 rounded-xl hover:bg-gray-50 cursor-pointer">
|
||||
<span class="text-[13px] text-gray-700">30 天(整月搭配参考)</span>
|
||||
<span class="w-4 h-4 rounded-full border border-gray-300"></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2.5 rounded-xl hover:bg-gray-50 cursor-pointer">
|
||||
<span class="text-[13px] text-gray-700">长期有效(随时可手动取消)</span>
|
||||
<span class="w-4 h-4 rounded-full border border-gray-300"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mini WeChat Share Card Preview (分享成功后的卡片式样) -->
|
||||
<div class="bg-[#F2F2F7] rounded-xl p-2.5 mb-4 border border-gray-200/80">
|
||||
<div class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5 flex items-center justify-between">
|
||||
<span><i class="fa-brands fa-weixin text-emerald-500 mr-1"></i>分享给微信好友卡片样式预览</span>
|
||||
<span class="text-blue-500 font-normal">7天有效</span>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-2.5 border border-gray-200 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-6 h-6 rounded-full bg-blue-100 text-[#007AFF] font-bold text-[10px] flex items-center justify-center">雨</div>
|
||||
<div class="text-[12px] font-medium text-gray-800">
|
||||
<span class="font-bold">小雨</span> 向你分享了 6 件精选衣物
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-12 bg-gray-50 rounded-md border border-dashed border-gray-200 flex items-center justify-center gap-2 text-gray-400 text-xs">
|
||||
<i class="fa-solid fa-shirt"></i>
|
||||
<i class="fa-solid fa-vest"></i>
|
||||
<i class="fa-solid fa-socks"></i>
|
||||
<span class="text-[10px] text-gray-400 font-mono">+3 件</span>
|
||||
</div>
|
||||
<div class="mt-2 pt-1.5 border-t border-gray-100 flex items-center justify-between text-[10px] text-gray-400">
|
||||
<span>纸条AI衣橱 · 衣柜快照</span>
|
||||
<span class="text-[#007AFF] font-medium">查看衣橱 ></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<button class="w-full h-11 bg-[#007AFF] text-white font-semibold text-[14px] rounded-xl shadow-md shadow-blue-500/20 active:scale-[0.99] transition-all flex items-center justify-center gap-1.5">
|
||||
<i class="fa-solid fa-arrow-up-from-bracket text-xs"></i>
|
||||
<span>确认分享(消耗 1 次衣柜分享额度)</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Safe Area Home Bar -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- ③ 画板 3: 「衣柜分享 - 分享详情」(属主与失效态画板) -->
|
||||
<!-- ========================================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
|
||||
<h2 class="text-sm font-bold text-gray-800">③ 衣柜分享 - 分享详情</h2>
|
||||
<span class="text-xs text-gray-400 font-medium">属主管理态(含取消操作)+ 失效态浮层</span>
|
||||
</div>
|
||||
|
||||
<div class="mock-screen flex flex-col">
|
||||
<!-- iOS Status Bar -->
|
||||
<div class="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="font-mono text-[10px]">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WeChat Navigation Bar -->
|
||||
<div class="wechat-nav hairline-b">
|
||||
<div class="flex items-center gap-1 text-[#007AFF] text-[15px] font-medium cursor-pointer">
|
||||
<i class="fa-solid fa-chevron-left text-[14px]"></i>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<span class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">衣橱快照详情</span>
|
||||
<div class="nav-capsule">
|
||||
<span class="text-[11px] text-gray-700"><i class="fa-solid fa-ellipsis"></i></span>
|
||||
<span class="w-[0.5px] h-3 bg-gray-300"></span>
|
||||
<span class="w-2.5 h-2.5 rounded-full border-[1.5px] border-gray-700"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable Detail Body -->
|
||||
<div class="flex-1 overflow-y-auto px-4 pt-3 pb-24">
|
||||
|
||||
<!-- Sharing Header Card (Sharer Avatar + Nickname + Expiry) -->
|
||||
<div class="bg-white rounded-[16px] p-4 mb-3.5 border border-gray-100 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-11 h-11 rounded-full bg-blue-50 border border-blue-100 text-[#007AFF] font-bold text-base flex items-center justify-center">
|
||||
雨
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] font-bold text-gray-900">小雨</span>
|
||||
<span class="text-[10px] text-[#007AFF] bg-blue-50 px-1.5 py-0.5 rounded font-semibold">属主视角</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-gray-500 mt-0.5">分享了 12 件衣橱单品</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[10px] text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full font-mono font-medium border border-amber-200">
|
||||
<i class="fa-regular fa-clock text-[9px] mr-0.5"></i> 3 天后过期
|
||||
</span>
|
||||
<div class="text-[10px] text-gray-400 mt-1">访客仅可只读浏览</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-[11px] text-gray-500">
|
||||
<span>已获 28 次浏览 · 4 次好友收藏</span>
|
||||
<button class="text-[#007AFF] font-medium flex items-center gap-1">
|
||||
<i class="fa-regular fa-share-from-square text-[10px]"></i> 再次转发
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Read-only Clothes Grid (两列网格,间距 12pt,圆角 16pt,图片区 1:1) -->
|
||||
<div class="flex items-center justify-between mb-2 px-1">
|
||||
<span class="text-[12px] font-semibold text-gray-500">包含衣物清单 (12)</span>
|
||||
<span class="text-[11px] text-gray-400">只读不可编辑</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-white rounded-[16px] p-2 border border-gray-100 shadow-sm">
|
||||
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
|
||||
<i class="fa-solid fa-shirt text-2xl text-slate-300"></i>
|
||||
</div>
|
||||
<div class="mt-2 text-[12px] font-bold text-gray-800 truncate">经典条纹海魂衫</div>
|
||||
<div class="text-[10px] text-gray-400">上装 · 棉质</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-white rounded-[16px] p-2 border border-gray-100 shadow-sm">
|
||||
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
|
||||
<i class="fa-solid fa-vest text-2xl text-slate-300"></i>
|
||||
</div>
|
||||
<div class="mt-2 text-[12px] font-bold text-gray-800 truncate">米白针织开衫</div>
|
||||
<div class="text-[10px] text-gray-400">上装 · 羊毛混纺</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-white rounded-[16px] p-2 border border-gray-100 shadow-sm">
|
||||
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
|
||||
<i class="fa-solid fa-person-walking text-2xl text-slate-300"></i>
|
||||
</div>
|
||||
<div class="mt-2 text-[12px] font-bold text-gray-800 truncate">高腰阔腿西装裤</div>
|
||||
<div class="text-[10px] text-gray-400">下装 · 垂坠面料</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="bg-white rounded-[16px] p-2 border border-gray-100 shadow-sm">
|
||||
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
|
||||
<i class="fa-solid fa-bag-shopping text-2xl text-slate-300"></i>
|
||||
</div>
|
||||
<div class="mt-2 text-[12px] font-bold text-gray-800 truncate">法式帆布托特包</div>
|
||||
<div class="text-[10px] text-gray-400">配饰 · 帆布/皮</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 属主视角底部固定操作栏(安全区上方,白底 + 上分割线) -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur hairline-t px-4 pt-2.5 pb-7 flex items-center justify-between z-30">
|
||||
<div class="text-[11px] text-gray-400">
|
||||
属主管理视角(访客无此栏)
|
||||
</div>
|
||||
<button class="px-4 py-2 text-[#FF3B30] font-semibold text-[13px] bg-red-50 hover:bg-red-100 rounded-xl active:scale-95 transition-all flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-ban text-[11px]"></i>
|
||||
<span>取消分享</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Spec: 失效态说明悬浮卡(展示访客访问失效链接时的界面) -->
|
||||
<div class="absolute inset-x-3 bottom-14 bg-gray-900/90 text-white backdrop-blur-md rounded-2xl p-3.5 z-40 border border-white/10 shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-[11px] font-bold text-amber-400 flex items-center gap-1">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i> 伴随状态:失效态展示说明
|
||||
</span>
|
||||
<span class="text-[10px] text-gray-400">过期或撤回即触发</span>
|
||||
</div>
|
||||
<div class="bg-white/10 rounded-xl p-3 flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-gray-400 flex-shrink-0">
|
||||
<i class="fa-regular fa-face-meh text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-[12px] font-semibold text-white">该分享已过期或已被取消</div>
|
||||
<div class="text-[10px] text-gray-300 mt-0.5">属主已关闭查看权限,点击下方即可返回首页</div>
|
||||
</div>
|
||||
<button class="px-2.5 py-1 text-[11px] bg-white/20 text-white rounded-lg border border-white/20 whitespace-nowrap">
|
||||
返回首页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Safe Area Home Bar -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Bottom Spec Checklist Footer -->
|
||||
<footer class="w-full max-w-[1280px] bg-white rounded-3xl p-6 mt-10 border border-slate-200/80 shadow-sm">
|
||||
<h3 class="text-sm font-bold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
|
||||
第 9 屏 衣柜分享规范设计核查表与权限映射
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-xs text-gray-600">
|
||||
<div class="bg-gray-50 p-3 rounded-xl border border-gray-100">
|
||||
<div class="font-bold text-gray-900 mb-1">1. ①「我的分享」全态列表</div>
|
||||
<p>支持 2×2 衣物小图缩略、类型标签(部分/全量)、有效期计算。已取消或已过期卡片统一下降透明度并在右上角加盖灰色胶囊角标「已取消」「已过期」。</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-xl border border-gray-100">
|
||||
<div class="font-bold text-gray-900 mb-1">2. ② 创建分享与模式单选</div>
|
||||
<p>「部分衣物」与「全量快照」大卡片单选;选部分进入双列勾选网格(蓝描边 + 对勾);底部操作栏呼起 1/7/30/长期 4 档单选面板与额度消耗提示。</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-xl border border-gray-100">
|
||||
<div class="font-bold text-gray-900 mb-1">3. ③ 分享卡片预览契约</div>
|
||||
<p>微信原生卡片样式:展示分享者头像与昵称「小雨 向你分享了 6 件精选衣物」、横排衣物缩略图与「查看衣橱」跳转入口,符合社交传播心理。</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-xl border border-gray-100">
|
||||
<div class="font-bold text-gray-900 mb-1">4. ④ 属主权限与失效态兜底</div>
|
||||
<p>属主底部固定栏专属「取消分享」高危按钮;访客视角纯净无操作栏;失效态整页呈现灰色插画 +「该分享已过期或已被取消」+「返回首页」。</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
Reference in New Issue
Block a user