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

583 lines
35 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第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>