first commit

This commit is contained in:
2026-09-11 01:45:04 +08:00
commit 0a8d60d87f
145 changed files with 40978 additions and 0 deletions
+582
View File
@@ -0,0 +1,582 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第6屏 穿搭详情(全状态画板)</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, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background-color: #E5E5EA;
color: #1C1C1E;
-webkit-font-smoothing: antialiased;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="p-8 min-h-screen flex flex-col items-center justify-start">
<!-- 画板顶部规范标题条 -->
<header class="w-full max-w-[1240px] bg-white rounded-2xl p-6 mb-8 shadow-sm border border-[#E5E5EA]">
<div class="flex flex-wrap items-center justify-between 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-2xl font-bold tracking-tight text-[#1C1C1E]">第 6 屏 | 穿搭详情(全状态高保真画板)</h1>
<span class="px-2.5 py-0.5 text-xs font-semibold text-[#007AFF] bg-[#E5F2FF] rounded-full">二级页面 · 微信小程序规范</span>
<span class="text-xs text-[#8E8E93]">375 × 812 pt</span>
</div>
<div class="flex items-center space-x-6 text-xs text-[#636366]">
<div class="flex items-center space-x-1.5"><span class="w-3 h-3 rounded-full bg-[#007AFF]"></span><span>主色 #007AFF</span></div>
<div class="flex items-center space-x-1.5"><span class="w-3 h-3 rounded-full bg-[#FF2D55]"></span><span>情感粉 #FF2D55</span></div>
<div class="flex items-center space-x-1.5"><span class="w-3 h-3 rounded-full bg-[#5856D6]"></span><span>辅助靛蓝 #5856D6</span></div>
<div class="flex items-center space-x-1.5"><span class="w-3 h-3 rounded-full border border-[#D1D1D6] bg-[#F2F2F7]"></span><span>底色 #F2F2F7</span></div>
</div>
</div>
<p class="text-xs text-[#8E8E93] mt-2">涵盖:属主视角(私密与公开控制/更多面板)、他人浏览视角(纯净互动)、公开到社区二次确认弹窗,以及右上角更多动作面板(iOS ActionSheet 规范)。</p>
</header>
<!-- 主画板展示容器:并排展示三个手机模型 -->
<main class="w-full max-w-[1240px] grid grid-cols-1 md:grid-cols-3 gap-8 justify-items-center">
<!-- ==================== 状态 1:属主视角 (已公开/支持取消公开 & 更多面板) ==================== -->
<section class="flex flex-col items-center">
<div class="text-center mb-3">
<div class="inline-flex items-center px-3 py-1 bg-white border border-[#E5E5EA] rounded-full text-xs font-semibold text-[#1C1C1E] shadow-sm">
<span class="w-2 h-2 rounded-full bg-[#007AFF] mr-2"></span>视角 1 · 属主管理视角(已公开态)
</div>
<p class="text-[11px] text-[#8E8E93] mt-1">右上更多面板呼起 · 底部支持「取消公开 / 分享」</p>
</div>
<!-- 手机外框 375 * 812 pt -->
<div class="w-[375px] h-[812px] bg-[#F2F2F7] rounded-[48px] shadow-2xl border-[8px] border-[#1C1C1E] relative overflow-hidden flex flex-col select-none">
<!-- 顶部 iOS 状态栏 -->
<div class="w-full h-11 pt-3 px-6 flex justify-between items-center text-[14px] font-semibold text-black z-30 bg-white">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-wifi text-[11px]"></i>
<i class="fa-solid fa-battery-full text-sm"></i>
</div>
</div>
<!-- 微信小程序原生二级导航栏 -->
<div class="w-full h-11 px-4 bg-white border-b border-[#E5E5EA] flex items-center justify-between z-30 relative">
<div class="flex items-center space-x-1 cursor-pointer">
<i class="fa-solid fa-chevron-left text-[#007AFF] text-base"></i>
<span class="text-[#007AFF] text-[16px]">返回</span>
</div>
<span class="text-[17px] font-semibold text-[#1C1C1E] truncate max-w-[140px]">晴日轻复古通勤</span>
<!-- 微信小程序右上胶囊 -->
<div class="w-[84px] h-[30px] rounded-full border border-[#E5E5EA] bg-white flex items-center justify-evenly px-1">
<i class="fa-solid fa-ellipsis text-xs text-[#1C1C1E]"></i>
<div class="w-[1px] h-3 bg-[#E5E5EA]"></div>
<i class="fa-regular fa-circle-dot text-xs text-[#1C1C1E]"></i>
</div>
</div>
<!-- 可滚动内容区 -->
<div class="flex-1 overflow-y-auto pb-[90px] hide-scrollbar">
<!-- 顶部拼图封面(白底圆角,多件衣物横排错落) -->
<div class="p-3">
<div class="bg-white rounded-2xl p-4 border border-[#E5E5EA] shadow-sm relative overflow-hidden">
<div class="absolute top-3 left-3 flex items-center space-x-1.5 bg-[#F2F2F7]/90 backdrop-blur-md px-2.5 py-1 rounded-full text-[11px] font-medium text-[#48484A]">
<i class="fa-solid fa-wand-magic-sparkles text-[#5856D6] text-[10px]"></i>
<span>拼图大片 · 4 件组合</span>
</div>
<!-- 更多入口图标 (属主专属快捷入口) -->
<button class="absolute top-3 right-3 w-7 h-7 rounded-full bg-[#F2F2F7] flex items-center justify-center text-[#48484A]">
<i class="fa-solid fa-ellipsis text-xs"></i>
</button>
<!-- 4件衣物拼图陈列 -->
<div class="mt-7 grid grid-cols-3 gap-2.5 items-center">
<!-- 左侧大单品 -->
<div class="col-span-2 aspect-[4/3] bg-[#F2F2F7] rounded-xl flex flex-col items-center justify-center p-3 relative border border-[#E5E5EA]/60">
<svg class="w-20 h-20 text-[#8E8E93]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M25 25 L40 18 C46 25 54 25 60 18 L75 25 L88 38 L76 46 L70 38 L70 82 L30 82 L30 38 L24 46 L12 38 Z" stroke-linejoin="round"/>
<line x1="50" y1="23" x2="50" y2="82" stroke-dasharray="3 3"/>
</svg>
<span class="text-[10px] text-[#8E8E93] mt-1 font-medium">米白针织开衫 (主装)</span>
</div>
<!-- 右侧两件副单品 -->
<div class="col-span-1 flex flex-col gap-2.5">
<div class="aspect-square bg-[#F2F2F7] rounded-xl flex flex-col items-center justify-center p-1 border border-[#E5E5EA]/60">
<svg class="w-9 h-9 text-[#8E8E93]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M28 20 L38 20 C42 24 58 24 62 20 L72 20 L82 32 L72 38 L68 32 L68 75 L32 75 L32 32 L28 38 L18 32 Z"/>
</svg>
<span class="text-[9px] text-[#8E8E93]">白色纯棉T</span>
</div>
<div class="aspect-square bg-[#F2F2F7] rounded-xl flex flex-col items-center justify-center p-1 border border-[#E5E5EA]/60">
<svg class="w-9 h-9 text-[#8E8E93]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M28 15 L72 15 L78 85 L54 85 L50 40 L46 85 L22 85 Z"/>
</svg>
<span class="text-[9px] text-[#8E8E93]">直筒牛仔裤</span>
</div>
</div>
</div>
<!-- 底部鞋配小格 -->
<div class="mt-2.5 flex items-center justify-between px-3 py-2 bg-[#F9F9FA] rounded-xl border border-[#E5E5EA]/50">
<div class="flex items-center space-x-2">
<div class="w-6 h-6 rounded-lg bg-[#E5E5EA] flex items-center justify-center text-[10px] text-[#636366]">
<i class="fa-solid fa-shoe-prints"></i>
</div>
<span class="text-xs font-medium text-[#1C1C1E]">配饰鞋品</span>
</div>
<span class="text-xs text-[#8E8E93]">经典黑色皮质乐福鞋</span>
</div>
</div>
</div>
<!-- 穿搭基本属性与文案卡片 -->
<div class="px-3 mb-3">
<div class="bg-white rounded-2xl p-4 border border-[#E5E5EA] shadow-sm">
<div class="flex items-start justify-between">
<div>
<h2 class="text-[18px] font-bold text-[#1C1C1E] leading-snug">晴日轻复古通勤</h2>
<div class="flex flex-wrap items-center gap-1.5 mt-2">
<!-- 场景标签「通勤」 -->
<span class="px-2 py-0.5 text-[11px] font-semibold text-[#007AFF] bg-[#E5F2FF] rounded-md">
通勤
</span>
<!-- 来源标签 -->
<span class="px-2 py-0.5 text-[11px] font-medium text-[#5856D6] bg-[#ECEBFF] rounded-md flex items-center space-x-1">
<i class="fa-solid fa-sparkles text-[9px]"></i>
<span>AI 推荐</span>
</span>
<!-- 公开状态标签 -->
<span class="px-2 py-0.5 text-[11px] font-medium text-[#34C759] bg-[#EBF9EE] rounded-md flex items-center space-x-1">
<i class="fa-solid fa-globe text-[9px]"></i>
<span>已公开至社区</span>
</span>
</div>
</div>
<!-- 属主专属:右上更多按钮触发面板 -->
<button class="w-8 h-8 rounded-full bg-[#F2F2F7] flex items-center justify-center text-[#48484A] active:bg-[#E5E5EA]">
<i class="fa-solid fa-ellipsis text-sm"></i>
</button>
</div>
<!-- 描述文案 -->
<p class="text-[13px] text-[#48484A] mt-3 leading-relaxed">
今日综合运势 4 星。以温暖质感的米白粗棒针织开衫中和修身T恤,搭配高腰直筒原色牛仔裤与皮质乐福鞋,兼顾早晚通勤温差与室内舒适度。
</p>
<!-- 创建时间与指标 -->
<div class="mt-3 pt-3 border-t border-[#E5E5EA] flex items-center justify-between text-[11px] text-[#8E8E93]">
<span>生成时间:今天 09:41 · 白羊座运势定制</span>
<span>创建于 我的衣橱</span>
</div>
</div>
</div>
<!-- 「包含衣物」横向滚动小卡列表 -->
<div class="px-3 mb-4">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-bold text-[#1C1C1E] tracking-tight">包含衣物 (4)</span>
<span class="text-[11px] text-[#8E8E93]">点击卡片查看单品详情</span>
</div>
<div class="flex space-x-2.5 overflow-x-auto hide-scrollbar pb-1">
<!-- 单品1 -->
<div class="min-w-[105px] bg-white rounded-xl p-2 border border-[#E5E5EA] shadow-sm flex flex-col items-center flex-shrink-0 cursor-pointer active:scale-95 transition-transform">
<div class="w-full aspect-square bg-[#F2F2F7] rounded-lg flex items-center justify-center mb-1.5">
<svg class="w-10 h-10 text-[#636366]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M25 25 L40 18 C46 25 54 25 60 18 L75 25 L88 38 L76 46 L70 38 L70 82 L30 82 L30 38 L24 46 L12 38 Z"/>
</svg>
</div>
<span class="text-xs font-semibold text-[#1C1C1E] text-center truncate w-full">米白针织开衫</span>
<span class="text-[10px] text-[#8E8E93] mt-0.5">上装 · 针织</span>
</div>
<!-- 单品2 -->
<div class="min-w-[105px] bg-white rounded-xl p-2 border border-[#E5E5EA] shadow-sm flex flex-col items-center flex-shrink-0 cursor-pointer active:scale-95 transition-transform">
<div class="w-full aspect-square bg-[#F2F2F7] rounded-lg flex items-center justify-center mb-1.5">
<svg class="w-10 h-10 text-[#636366]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M28 20 L38 20 C42 24 58 24 62 20 L72 20 L82 32 L72 38 L68 32 L68 75 L32 75 L32 32 L28 38 L18 32 Z"/>
</svg>
</div>
<span class="text-xs font-semibold text-[#1C1C1E] text-center truncate w-full">白色纯棉T恤</span>
<span class="text-[10px] text-[#8E8E93] mt-0.5">上装 · 基础</span>
</div>
<!-- 单品3 -->
<div class="min-w-[105px] bg-white rounded-xl p-2 border border-[#E5E5EA] shadow-sm flex flex-col items-center flex-shrink-0 cursor-pointer active:scale-95 transition-transform">
<div class="w-full aspect-square bg-[#F2F2F7] rounded-lg flex items-center justify-center mb-1.5">
<svg class="w-10 h-10 text-[#636366]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M28 15 L72 15 L78 85 L54 85 L50 40 L46 85 L22 85 Z"/>
</svg>
</div>
<span class="text-xs font-semibold text-[#1C1C1E] text-center truncate w-full">直筒牛仔裤</span>
<span class="text-[10px] text-[#8E8E93] mt-0.5">下装 · 牛仔</span>
</div>
<!-- 单品4 -->
<div class="min-w-[105px] bg-white rounded-xl p-2 border border-[#E5E5EA] shadow-sm flex flex-col items-center flex-shrink-0 cursor-pointer active:scale-95 transition-transform">
<div class="w-full aspect-square bg-[#F2F2F7] rounded-lg flex items-center justify-center mb-1.5">
<i class="fa-solid fa-shoe-prints text-2xl text-[#636366]"></i>
</div>
<span class="text-xs font-semibold text-[#1C1C1E] text-center truncate w-full">皮质乐福鞋</span>
<span class="text-[10px] text-[#8E8E93] mt-0.5">鞋履 · 休闲</span>
</div>
</div>
</div>
</div>
<!-- 属主视角:底部固定操作栏(位于安全区上方:白底 + 上分割线) -->
<div class="absolute bottom-0 left-0 right-0 bg-white border-t border-[#E5E5EA] px-4 pt-2.5 pb-6 flex items-center justify-between z-30">
<div class="flex items-center space-x-3">
<!-- 点赞 (heart) -->
<button class="flex items-center space-x-1 text-[#FF2D55] px-1 py-1">
<i class="fa-solid fa-heart text-base"></i>
<span class="text-xs font-semibold text-[#1C1C1E]">28</span>
</button>
<!-- 收藏 (star) -->
<button class="flex items-center space-x-1 text-[#FF9500] px-1 py-1">
<i class="fa-solid fa-star text-base"></i>
<span class="text-xs font-semibold text-[#1C1C1E]">12</span>
</button>
</div>
<!-- 右侧操作组:属主已公开时显示描边按钮「取消公开」+ 分享 -->
<div class="flex items-center space-x-2">
<button class="h-9 px-3.5 rounded-full border border-[#FF3B30] text-[#FF3B30] text-xs font-medium bg-white active:bg-red-50">
取消公开
</button>
<button class="w-9 h-9 rounded-full bg-[#F2F2F7] flex items-center justify-center text-[#1C1C1E] active:bg-[#E5E5EA]">
<i class="fa-solid fa-arrow-up-from-bracket text-xs"></i>
</button>
</div>
</div>
<!-- 模拟:属主点击右上「更多」呼出的 iOS ActionSheet 面板(浮层展示) -->
<div class="absolute inset-0 bg-black/40 backdrop-blur-[2px] z-40 flex flex-col justify-end p-3 animate-fade-in">
<div class="w-full bg-white/95 backdrop-blur-md rounded-2xl overflow-hidden shadow-2xl mb-2">
<div class="py-2.5 px-4 text-center border-b border-[#E5E5EA]">
<div class="w-9 h-1 bg-[#C7C7CC] rounded-full mx-auto mb-2"></div>
<span class="text-xs text-[#8E8E93]">穿搭管理与维护</span>
</div>
<!-- 编辑穿搭 -->
<button class="w-full py-3.5 text-center text-[#007AFF] text-[17px] font-medium border-b border-[#E5E5EA] active:bg-[#F2F2F7]">
编辑穿搭
</button>
<!-- 删除穿搭(警示红) -->
<button class="w-full py-3.5 text-center text-[#FF3B30] text-[17px] font-medium active:bg-[#F2F2F7]">
删除穿搭
</button>
</div>
<!-- 取消按钮独立成组 -->
<button class="w-full py-3.5 bg-white rounded-2xl text-center text-[#007AFF] text-[17px] font-semibold shadow-lg active:bg-[#F2F2F7]">
取消
</button>
</div>
<!-- iOS 底部指示条 -->
<div class="absolute bottom-1 left-1/2 -translate-x-1/2 w-[134px] h-[5px] bg-[#1C1C1E] rounded-full z-50"></div>
</div>
</section>
<!-- ==================== 状态 2:属主视角 (未公开态 + 公开二次确认弹窗) ==================== -->
<section class="flex flex-col items-center">
<div class="text-center mb-3">
<div class="inline-flex items-center px-3 py-1 bg-white border border-[#E5E5EA] rounded-full text-xs font-semibold text-[#1C1C1E] shadow-sm">
<span class="w-2 h-2 rounded-full bg-[#34C759] mr-2"></span>交互 2 · 公开到社区确认弹窗
</div>
<p class="text-[11px] text-[#8E8E93] mt-1">「公开到社区」系统蓝主按钮 · 额度扣减警示</p>
</div>
<!-- 手机外框 -->
<div class="w-[375px] h-[812px] bg-[#F2F2F7] rounded-[48px] shadow-2xl border-[8px] border-[#1C1C1E] relative overflow-hidden flex flex-col select-none">
<!-- 顶部 iOS 状态栏 -->
<div class="w-full h-11 pt-3 px-6 flex justify-between items-center text-[14px] font-semibold text-black z-30 bg-white">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-wifi text-[11px]"></i>
<i class="fa-solid fa-battery-full text-sm"></i>
</div>
</div>
<!-- 微信小程序原生二级导航栏 -->
<div class="w-full h-11 px-4 bg-white border-b border-[#E5E5EA] flex items-center justify-between z-30">
<div class="flex items-center space-x-1">
<i class="fa-solid fa-chevron-left text-[#007AFF] text-base"></i>
<span class="text-[#007AFF] text-[16px]">返回</span>
</div>
<span class="text-[17px] font-semibold text-[#1C1C1E]">山系周末露营搭</span>
<div class="w-[84px] h-[30px] rounded-full border border-[#E5E5EA] bg-white flex items-center justify-evenly px-1">
<i class="fa-solid fa-ellipsis text-xs text-[#1C1C1E]"></i>
<div class="w-[1px] h-3 bg-[#E5E5EA]"></div>
<i class="fa-regular fa-circle-dot text-xs text-[#1C1C1E]"></i>
</div>
</div>
<!-- 背景穿搭页面 (未公开态) -->
<div class="flex-1 overflow-y-auto pb-[90px] hide-scrollbar opacity-90">
<!-- 封面拼图 -->
<div class="p-3">
<div class="bg-white rounded-2xl p-4 border border-[#E5E5EA] shadow-sm">
<div class="aspect-[16/10] bg-[#F2F2F7] rounded-xl flex items-center justify-center relative">
<div class="flex items-center space-x-4">
<svg class="w-16 h-16 text-[#8E8E93]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M25 25 L40 18 C46 25 54 25 60 18 L75 25 L88 38 L76 46 L70 38 L70 82 L30 82 L30 38 L24 46 L12 38 Z"/>
</svg>
<svg class="w-14 h-14 text-[#8E8E93]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M28 15 L72 15 L78 85 L54 85 L50 40 L46 85 L22 85 Z"/>
</svg>
</div>
<div class="absolute top-2 left-2 bg-black/60 text-white text-[10px] px-2 py-0.5 rounded-md">自建穿搭</div>
</div>
</div>
</div>
<!-- 卡片说明 -->
<div class="px-3 mb-3">
<div class="bg-white rounded-2xl p-4 border border-[#E5E5EA]">
<h2 class="text-[18px] font-bold text-[#1C1C1E]">山系周末露营搭</h2>
<div class="flex items-center gap-1.5 mt-2">
<span class="px-2 py-0.5 text-[11px] font-semibold text-[#34C759] bg-[#EBF9EE] rounded-md">休闲/户外</span>
<span class="px-2 py-0.5 text-[11px] font-medium text-[#FF9500] bg-[#FFF8E6] rounded-md">自建</span>
<!-- 未公开标签 -->
<span class="px-2 py-0.5 text-[11px] font-medium text-[#8E8E93] bg-[#F2F2F7] rounded-md flex items-center space-x-1">
<i class="fa-solid fa-lock text-[9px]"></i>
<span>仅自己可见</span>
</span>
</div>
<p class="text-[13px] text-[#48484A] mt-2.5">防风机能工装外搭与耐磨工装裤,满足轻度徒步与营地露营需求。</p>
</div>
</div>
</div>
<!-- 未公开态底部操作栏 (底层被蒙层压住) -->
<div class="absolute bottom-0 left-0 right-0 bg-white border-t border-[#E5E5EA] px-4 pt-2.5 pb-6 flex items-center justify-between z-10">
<div class="flex items-center space-x-3">
<button class="flex items-center space-x-1 text-[#8E8E93]"><i class="fa-regular fa-heart text-base"></i><span class="text-xs">0</span></button>
<button class="flex items-center space-x-1 text-[#8E8E93]"><i class="fa-regular fa-star text-base"></i><span class="text-xs">0</span></button>
</div>
<div class="flex items-center space-x-2">
<button class="h-9 px-4 rounded-full bg-[#007AFF] text-white text-xs font-semibold">
公开到社区
</button>
<button class="w-9 h-9 rounded-full bg-[#F2F2F7] flex items-center justify-center text-[#1C1C1E]">
<i class="fa-solid fa-arrow-up-from-bracket text-xs"></i>
</button>
</div>
</div>
<!-- ==================== 核心:公开确认弹窗(iOS Alert 规范 270pt) ==================== -->
<div class="absolute inset-0 bg-black/45 backdrop-blur-[3px] z-40 flex items-center justify-center p-6 animate-fade-in">
<div class="w-[270px] bg-white/95 backdrop-blur-xl rounded-[18px] text-center overflow-hidden shadow-2xl border border-white/40">
<div class="p-5">
<div class="w-10 h-10 rounded-full bg-[#E5F2FF] text-[#007AFF] flex items-center justify-center mx-auto mb-3 text-lg">
<i class="fa-solid fa-share-nodes"></i>
</div>
<h3 class="text-[17px] font-bold text-[#1C1C1E] leading-snug">公开穿搭到社区?</h3>
<p class="text-[13px] text-[#3A3A3C] mt-2.5 leading-relaxed">
公开后将展示在社区供他人点赞收藏,并消耗 <span class="text-[#007AFF] font-semibold">1 次</span> 社区分享额度。
</p>
<div class="mt-2 inline-block px-2 py-0.5 rounded bg-[#F2F2F7] text-[10px] text-[#8E8E93]">
当前剩余分享额度:5 次
</div>
</div>
<!-- iOS 标准双按钮 -->
<div class="grid grid-cols-2 border-t border-[#E5E5EA]">
<button class="py-3 text-[17px] font-normal text-[#007AFF] border-r border-[#E5E5EA] active:bg-[#F2F2F7]">
取消
</button>
<button class="py-3 text-[17px] font-semibold text-[#007AFF] active:bg-[#F2F2F7]">
确认公开
</button>
</div>
</div>
</div>
<!-- iOS 底部指示条 -->
<div class="absolute bottom-1 left-1/2 -translate-x-1/2 w-[134px] h-[5px] bg-[#1C1C1E] rounded-full z-50"></div>
</div>
</section>
<!-- ==================== 状态 3:他人浏览视角 (纯净浏览/点赞收藏/无管理入口) ==================== -->
<section class="flex flex-col items-center">
<div class="text-center mb-3">
<div class="inline-flex items-center px-3 py-1 bg-white border border-[#E5E5EA] rounded-full text-xs font-semibold text-[#1C1C1E] shadow-sm">
<span class="w-2 h-2 rounded-full bg-[#5856D6] mr-2"></span>视角 3 · 他人浏览视角(社区公开展现)
</div>
<p class="text-[11px] text-[#8E8E93] mt-1">右上无更多管理 · 底部操作栏仅保留点赞与收藏</p>
</div>
<!-- 手机外框 -->
<div class="w-[375px] h-[812px] bg-[#F2F2F7] rounded-[48px] shadow-2xl border-[8px] border-[#1C1C1E] relative overflow-hidden flex flex-col select-none">
<!-- 顶部 iOS 状态栏 -->
<div class="w-full h-11 pt-3 px-6 flex justify-between items-center text-[14px] font-semibold text-black z-30 bg-white">
<span>9:41</span>
<div class="flex items-center space-x-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-wifi text-[11px]"></i>
<i class="fa-solid fa-battery-full text-sm"></i>
</div>
</div>
<!-- 微信小程序原生二级导航栏(他人视角:无管理更多按钮) -->
<div class="w-full h-11 px-4 bg-white border-b border-[#E5E5EA] flex items-center justify-between z-30">
<div class="flex items-center space-x-1 cursor-pointer">
<i class="fa-solid fa-chevron-left text-[#007AFF] text-base"></i>
<span class="text-[#007AFF] text-[16px]">发现</span>
</div>
<span class="text-[17px] font-semibold text-[#1C1C1E] truncate max-w-[150px]">法式慵懒周末搭</span>
<div class="w-[84px] h-[30px] rounded-full border border-[#E5E5EA] bg-white flex items-center justify-evenly px-1">
<i class="fa-solid fa-ellipsis text-xs text-[#1C1C1E]"></i>
<div class="w-[1px] h-3 bg-[#E5E5EA]"></div>
<i class="fa-regular fa-circle-dot text-xs text-[#1C1C1E]"></i>
</div>
</div>
<!-- 可滚动内容区 -->
<div class="flex-1 overflow-y-auto pb-[90px] hide-scrollbar">
<!-- 创作者信息浮条(他人视角专属规范,增强社区归属感) -->
<div class="mx-3 mt-3 px-3.5 py-2 bg-white rounded-xl border border-[#E5E5EA] flex items-center justify-between shadow-sm">
<div class="flex items-center space-x-2.5">
<div class="w-8 h-8 rounded-full bg-[#5856D6]/10 text-[#5856D6] flex items-center justify-center font-bold text-xs border border-[#5856D6]/20">
L
</div>
<div>
<div class="text-xs font-semibold text-[#1C1C1E]">林小鹿的衣橱</div>
<div class="text-[10px] text-[#8E8E93]">已收录 94 件单品 · 搭配博主</div>
</div>
</div>
<button class="px-2.5 py-1 rounded-full bg-[#E5F2FF] text-[#007AFF] text-[11px] font-semibold">
+ 关注
</button>
</div>
<!-- 顶部拼图封面 -->
<div class="p-3">
<div class="bg-white rounded-2xl p-4 border border-[#E5E5EA] shadow-sm relative overflow-hidden">
<div class="absolute top-3 left-3 bg-[#F2F2F7] px-2 py-0.5 rounded-full text-[10px] font-medium text-[#636366]">
3 件单品搭配
</div>
<div class="mt-5 grid grid-cols-2 gap-2">
<div class="aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center p-2 border border-[#E5E5EA]/60">
<svg class="w-14 h-14 text-[#8E8E93]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M25 25 L40 18 C46 25 54 25 60 18 L75 25 L88 38 L76 46 L70 38 L70 82 L30 82 L30 38 L24 46 L12 38 Z"/>
</svg>
</div>
<div class="aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center p-2 border border-[#E5E5EA]/60">
<svg class="w-14 h-14 text-[#8E8E93]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M28 15 L72 15 L78 85 L54 85 L50 40 L46 85 L22 85 Z"/>
</svg>
</div>
</div>
</div>
</div>
<!-- 穿搭详情卡片 -->
<div class="px-3 mb-3">
<div class="bg-white rounded-2xl p-4 border border-[#E5E5EA] shadow-sm">
<h2 class="text-[18px] font-bold text-[#1C1C1E]">法式慵懒周末搭</h2>
<div class="flex items-center gap-1.5 mt-2">
<span class="px-2 py-0.5 text-[11px] font-semibold text-[#FF2D55] bg-[#FFF0F3] rounded-md">
约会/逛街
</span>
<span class="px-2 py-0.5 text-[11px] font-medium text-[#5856D6] bg-[#ECEBFF] rounded-md">
AI 灵感推荐
</span>
<span class="px-2 py-0.5 text-[11px] font-medium text-[#34C759] bg-[#EBF9EE] rounded-md">
公开精选
</span>
</div>
<p class="text-[13px] text-[#48484A] mt-3 leading-relaxed">
经典条纹海魂衫搭配高腰阔腿西装裤,随性自在。配搭珍珠小耳钉与法式帆布托特包,自带巴黎左岸假日悠闲氛围。
</p>
</div>
</div>
<!-- 包含衣物小列表 -->
<div class="px-3 mb-4">
<span class="text-xs font-bold text-[#1C1C1E] tracking-tight block mb-2">穿搭所含衣物 (3)</span>
<div class="grid grid-cols-3 gap-2">
<div class="bg-white p-2 rounded-xl border border-[#E5E5EA] flex flex-col items-center">
<div class="w-full aspect-square bg-[#F2F2F7] rounded-lg flex items-center justify-center mb-1">
<svg class="w-8 h-8 text-[#8E8E93]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2">
<path d="M28 20 L38 20 C42 24 58 24 62 20 L72 20 L82 32 L72 38 L68 32 L68 75 L32 75 L32 32 L28 38 L18 32 Z"/>
</svg>
</div>
<span class="text-[11px] font-medium text-[#1C1C1E] truncate w-full text-center">条纹海魂衫</span>
</div>
<div class="bg-white p-2 rounded-xl border border-[#E5E5EA] flex flex-col items-center">
<div class="w-full aspect-square bg-[#F2F2F7] rounded-lg flex items-center justify-center mb-1">
<svg class="w-8 h-8 text-[#8E8E93]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2">
<path d="M28 15 L72 15 L78 85 L54 85 L50 40 L46 85 L22 85 Z"/>
</svg>
</div>
<span class="text-[11px] font-medium text-[#1C1C1E] truncate w-full text-center">高腰阔腿裤</span>
</div>
<div class="bg-white p-2 rounded-xl border border-[#E5E5EA] flex flex-col items-center">
<div class="w-full aspect-square bg-[#F2F2F7] rounded-lg flex items-center justify-center mb-1">
<i class="fa-solid fa-bag-shopping text-base text-[#8E8E93]"></i>
</div>
<span class="text-[11px] font-medium text-[#1C1C1E] truncate w-full text-center">法式帆布包</span>
</div>
</div>
</div>
</div>
<!-- 他人视角:底部固定操作栏(严格遵循需求:只保留点赞与收藏) -->
<div class="absolute bottom-0 left-0 right-0 bg-white border-t border-[#E5E5EA] px-6 pt-2.5 pb-6 flex items-center justify-around z-30">
<!-- 点赞按钮 (更大热区、交互动感) -->
<button class="flex items-center justify-center space-x-2 flex-1 py-2 mx-1 rounded-xl bg-[#FFF0F3] text-[#FF2D55] font-semibold text-sm active:scale-95 transition-transform">
<i class="fa-solid fa-heart text-lg"></i>
<span>点赞 142</span>
</button>
<!-- 收藏按钮 (大胶囊) -->
<button class="flex items-center justify-center space-x-2 flex-1 py-2 mx-1 rounded-xl bg-[#FFF8E6] text-[#FF9500] font-semibold text-sm active:scale-95 transition-transform">
<i class="fa-solid fa-star text-lg"></i>
<span>收藏 86</span>
</button>
</div>
<!-- iOS 底部指示条 -->
<div class="absolute bottom-1 left-1/2 -translate-x-1/2 w-[134px] h-[5px] bg-[#1C1C1E] rounded-full z-50"></div>
</div>
</section>
</main>
<!-- 底部设计规范与业务逻辑校验表 -->
<footer class="w-full max-w-[1240px] mt-8 bg-white rounded-2xl p-6 border border-[#E5E5EA] shadow-sm">
<div class="flex items-center space-x-2 mb-4">
<span class="w-3 h-3 rounded-full bg-[#FF9500]"></span>
<h2 class="text-base font-bold text-[#1C1C1E]">第 6 屏 穿搭详情设计核查表与权限映射</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-xs text-[#48484A]">
<div class="space-y-2">
<p><strong class="text-[#1C1C1E]">1. 视角权限与右上更多面板:</strong> 属主视角右上角配备更多操作,点击呼起遵循 iOS ActionSheet 规范的面板(编辑穿搭、高亮警示红的删除穿搭);他人浏览视角则严格移除编辑/删除/公开等敏感入口。</p>
<p><strong class="text-[#1C1C1E]">2. 拼图封面与包含衣物清单:</strong> 顶部大幅拼图组合多件衣物,下方设有横向横滑包含衣物卡片,单品标注大类与小类,支持点击无缝进入第 4 屏衣物详情。</p>
</div>
<div class="space-y-2">
<p><strong class="text-[#1C1C1E]">3. 底部操作栏状态联动:</strong> 属主未公开时显示「公开到社区」(系统蓝高亮),已公开时转为描边按钮「取消公开」;他人视角仅保留纯粹的双主互动按钮(点赞与收藏),杜绝非属主误触管理。</p>
<p><strong class="text-[#1C1C1E]">4. 公开到社区二次确认弹窗:</strong> 采用 iOS 标准 270pt 居中毛玻璃 Alert,文案严谨提示「公开后将展示在社区供他人点赞收藏,并消耗 1 次社区分享额度」,防止额度误扣。</p>
</div>
</div>
</footer>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 515 KiB