first commit
This commit is contained in:
@@ -0,0 +1,571 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第4屏 衣物详情与编辑</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=SF+Pro+Text: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;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #E5E7EB;
|
||||
}
|
||||
|
||||
/* 微信胶囊样式 */
|
||||
.wechat-capsule {
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* iOS 细分割线 */
|
||||
.hairline-b {
|
||||
border-bottom: 0.5px solid #E5E5EA;
|
||||
}
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="p-6 flex flex-col items-center justify-start min-h-screen">
|
||||
|
||||
<!-- 画板标题与提示 -->
|
||||
<div class="w-full max-w-[840px] mb-4 flex items-center justify-between text-xs text-gray-500 font-medium px-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="font-bold text-gray-800 text-sm">第 4 屏 | 衣物详情与编辑</span>
|
||||
<span class="text-gray-400">iPhone 375 × 812 pt 规范 · 微信小程序</span>
|
||||
</div>
|
||||
<span class="bg-blue-50 text-[#007AFF] px-2 py-0.5 rounded text-[11px] font-medium">浏览态 / 编辑态 / 伴生删除弹窗规范</span>
|
||||
</div>
|
||||
|
||||
<!-- 两态对比画板容器 (横向并列或网格排布) -->
|
||||
<div class="flex flex-wrap items-start justify-center gap-8 w-full max-w-[840px]">
|
||||
|
||||
<!-- ==================== 1. 浏览态画板 ==================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-2 text-xs font-semibold text-gray-600 bg-white/80 px-3 py-1 rounded-full border border-gray-200">
|
||||
状态 A:标准浏览态 (View State)
|
||||
</div>
|
||||
|
||||
<!-- 375 x 812 pt 手机外框 -->
|
||||
<div class="w-[375px] h-[812px] bg-[#F2F2F7] rounded-[44px] shadow-2xl overflow-hidden flex flex-col relative border-[7px] border-white ring-1 ring-black/10">
|
||||
|
||||
<!-- 微信原生顶部状态栏 + 导航栏 -->
|
||||
<div class="sticky top-0 z-30 bg-[#F2F2F7]/90 backdrop-blur-md hairline-b">
|
||||
<!-- 状态栏 44pt -->
|
||||
<div class="h-11 px-6 flex items-center justify-between text-black text-[13px] font-semibold pt-2">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-black">
|
||||
<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-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信导航条 44pt -->
|
||||
<div class="h-11 px-4 flex items-center justify-between relative">
|
||||
<!-- 左上角原生返回图标 -->
|
||||
<button class="flex items-center text-[#007AFF] active:opacity-60 transition">
|
||||
<i class="fa-solid fa-chevron-left text-[17px] font-semibold"></i>
|
||||
<span class="text-[15px] ml-1 font-normal">衣橱</span>
|
||||
</button>
|
||||
|
||||
<!-- 居中标题 -->
|
||||
<span class="absolute left-1/2 -translate-x-1/2 text-[17px] font-semibold text-black tracking-tight">衣物详情</span>
|
||||
|
||||
<!-- 右侧:微信胶囊按钮 -->
|
||||
<div class="wechat-capsule">
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="w-1 h-1 bg-black rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-black rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-black rounded-full"></span>
|
||||
</div>
|
||||
<div class="w-[0.5px] h-4 bg-black/15"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black flex items-center justify-center">
|
||||
<div class="w-1 h-1 bg-black rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容滚动区 (无底 tabBar) -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-10">
|
||||
|
||||
<!-- 顶部浅灰大图区:占屏约 45% (高 ~320pt) -->
|
||||
<div class="w-full h-[320px] bg-[#F2F2F7] relative flex items-center justify-center p-6">
|
||||
<!-- 占位白底/透明底衣物展示框 -->
|
||||
<div class="w-full h-full rounded-2xl bg-white/70 border border-black/5 flex flex-col items-center justify-center relative overflow-hidden shadow-sm">
|
||||
<!-- 精致矢量线稿:白色纯棉T恤 -->
|
||||
<svg width="180" height="180" viewBox="0 0 100 100" fill="none" stroke="#007AFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- T恤轮廓 -->
|
||||
<path d="M30 20 C36 28 64 28 70 20 L86 36 L75 47 L68 40 L68 84 L32 84 L32 40 L25 47 L14 36 Z" fill="#F8FAFC" />
|
||||
<!-- 领口细线 -->
|
||||
<path d="M38 20 C42 27 58 27 62 20" stroke="#007AFF" stroke-width="1.8" fill="none" />
|
||||
<!-- 胸前小口袋 -->
|
||||
<rect x="52" y="38" width="10" height="12" rx="1.5" stroke="#5856D6" stroke-width="1.2" fill="#E8F2FF" />
|
||||
</svg>
|
||||
<!-- 状态胶囊标签:已完成 -->
|
||||
<div class="absolute top-3 left-3 bg-white/90 backdrop-blur px-2.5 py-0.5 rounded-full text-[11px] font-medium text-[#34C759] flex items-center gap-1 border border-green-100 shadow-sm">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#34C759]"></span>
|
||||
<span>AI已识别</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容卡片容器 (左右 16pt) -->
|
||||
<div class="px-4 -mt-3 relative z-10 space-y-3">
|
||||
|
||||
<!-- 标题与编辑按钮行 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-[20px] font-bold text-black tracking-tight">白色纯棉T恤</h1>
|
||||
<p class="text-[12px] text-[#8E8E93] mt-0.5">识别耗时 1.8s · 15维属性完整</p>
|
||||
</div>
|
||||
<button class="px-3.5 py-1.5 bg-[#F2F2F7] rounded-full text-[14px] font-medium text-[#007AFF] active:opacity-60 transition flex items-center gap-1">
|
||||
<i class="fa-solid fa-pencil text-[12px]"></i>
|
||||
<span>编辑</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Inset 分组列表 1:基础分类与风格 -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="px-4 py-2 text-[12px] font-semibold text-[#8E8E93] bg-gray-50/50 hairline-b">基础属性</div>
|
||||
|
||||
<!-- 大类 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">大类</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">上装</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小类 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">小类</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">T恤</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 风格 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">风格</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">简约</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主色 (附带色块) -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">主色</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[15px] text-[#8E8E93]">白色</span>
|
||||
<span class="w-3.5 h-3.5 rounded-full border border-gray-300 bg-white shadow-xs"></span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 副色 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">副色</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#C7C7CC]">—</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inset 分组列表 2:版型与材质细节 -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="px-4 py-2 text-[12px] font-semibold text-[#8E8E93] bg-gray-50/50 hairline-b">版型与材质</div>
|
||||
|
||||
<!-- 厚度 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">厚度</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">薄</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 版型 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">版型</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">宽松</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 材质 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">材质</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">纯棉</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 花纹 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">花纹</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">纯色</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 袖型 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">袖型</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">短袖</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 衣长 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">衣长</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">常规</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 领型 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">领型</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93]">圆领</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inset 分组列表 3:量化评分与场合 -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="px-4 py-2 text-[12px] font-semibold text-[#8E8E93] bg-gray-50/50 hairline-b">智能量化评估</div>
|
||||
|
||||
<!-- 正式程度 (5段进度条 3/5) -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">正式程度</span>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#E5E5EA]"></span>
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#E5E5EA]"></span>
|
||||
</div>
|
||||
<span class="text-[13px] font-mono text-[#8E8E93] w-6 text-right">3/5</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 适用场合 (标签形式) -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">适用场合</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="px-2 py-0.5 rounded-md bg-[#F2F2F7] text-[#007AFF] text-[12px] font-medium">休闲</span>
|
||||
<span class="px-2 py-0.5 rounded-md bg-[#F2F2F7] text-[#007AFF] text-[12px] font-medium">通勤</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视觉冲击力 (5段进度条 4/5) -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">视觉冲击力</span>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#5856D6]"></span>
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#5856D6]"></span>
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#5856D6]"></span>
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#5856D6]"></span>
|
||||
<span class="w-3.5 h-1.5 rounded-full bg-[#E5E5EA]"></span>
|
||||
</div>
|
||||
<span class="text-[13px] font-mono text-[#8E8E93] w-6 text-right">4/5</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注区 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm">
|
||||
<div class="text-[13px] font-medium text-[#8E8E93] mb-1">备注信息</div>
|
||||
<p class="text-[15px] text-gray-800 leading-snug">去年夏天买的,领口略松</p>
|
||||
</div>
|
||||
|
||||
<!-- 底部删除按钮 -->
|
||||
<div class="pt-3 pb-6 flex justify-center">
|
||||
<button class="text-[#FF3B30] text-[15px] font-normal active:opacity-50 transition py-2 px-4 rounded-lg">
|
||||
删除这件衣物
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Home Indicator 占位 -->
|
||||
<div class="h-5 w-full bg-[#F2F2F7] flex items-center justify-center pb-1">
|
||||
<div class="w-32 h-1 bg-black/20 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ==================== 2. 编辑态画板 ==================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-2 text-xs font-semibold text-[#007AFF] bg-blue-50 px-3 py-1 rounded-full border border-blue-200">
|
||||
状态 B:正在编辑态 (Edit Mode)
|
||||
</div>
|
||||
|
||||
<!-- 375 x 812 pt 手机外框 -->
|
||||
<div class="w-[375px] h-[812px] bg-[#F2F2F7] rounded-[44px] shadow-2xl overflow-hidden flex flex-col relative border-[7px] border-white ring-1 ring-black/10">
|
||||
|
||||
<!-- 微信原生顶部状态栏 + 导航栏 -->
|
||||
<div class="sticky top-0 z-30 bg-[#F2F2F7]/90 backdrop-blur-md hairline-b">
|
||||
<!-- 状态栏 44pt -->
|
||||
<div class="h-11 px-6 flex items-center justify-between text-black text-[13px] font-semibold pt-2">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-black">
|
||||
<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-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信导航条 44pt -->
|
||||
<div class="h-11 px-4 flex items-center justify-between relative">
|
||||
<button class="flex items-center text-[#8E8E93] active:opacity-60 transition text-[15px]">
|
||||
取消
|
||||
</button>
|
||||
|
||||
<!-- 居中标题 -->
|
||||
<span class="absolute left-1/2 -translate-x-1/2 text-[17px] font-semibold text-black tracking-tight">编辑衣物</span>
|
||||
|
||||
<!-- 右侧:胶囊按钮 -->
|
||||
<div class="wechat-capsule">
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="w-1 h-1 bg-black rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-black rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-black rounded-full"></span>
|
||||
</div>
|
||||
<div class="w-[0.5px] h-4 bg-black/15"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black flex items-center justify-center">
|
||||
<div class="w-1 h-1 bg-black rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容滚动区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-10">
|
||||
|
||||
<!-- 大图区 (带更换图片引导) -->
|
||||
<div class="w-full h-[240px] bg-[#F2F2F7] relative flex items-center justify-center p-4">
|
||||
<div class="w-full h-full rounded-2xl bg-white/80 border border-dashed border-[#007AFF]/40 flex flex-col items-center justify-center relative overflow-hidden">
|
||||
<svg width="110" height="110" viewBox="0 0 100 100" fill="none" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M30 20 C36 28 64 28 70 20 L86 36 L75 47 L68 40 L68 84 L32 84 L32 40 L25 47 L14 36 Z" fill="#F8FAFC" />
|
||||
<path d="M38 20 C42 27 58 27 62 20" stroke="#007AFF" stroke-width="1.6" fill="none" />
|
||||
</svg>
|
||||
<!-- 悬浮更换图片指示徽标 -->
|
||||
<div class="absolute bottom-3 bg-black/60 backdrop-blur-sm text-white px-3 py-1 rounded-full text-[11px] font-medium flex items-center gap-1.5 shadow-sm">
|
||||
<i class="fa-solid fa-camera text-[10px]"></i>
|
||||
<span>点击重新拍照/上传</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑表单区域 -->
|
||||
<div class="px-4 space-y-3">
|
||||
|
||||
<!-- 名称输入框 + 保存按钮行 -->
|
||||
<div class="bg-white rounded-2xl p-3 shadow-sm flex items-center gap-2 border border-[#007AFF]/30">
|
||||
<div class="flex-1 flex items-center bg-[#F2F2F7] rounded-xl px-3 py-2">
|
||||
<input type="text" value="白色纯棉T恤" class="w-full bg-transparent text-[16px] font-medium text-black focus:outline-none" />
|
||||
<i class="fa-solid fa-circle-xmark text-[#C7C7CC] text-[13px] ml-1"></i>
|
||||
</div>
|
||||
<button class="px-4 py-2 bg-[#007AFF] text-white rounded-xl text-[14px] font-semibold active:opacity-80 transition shadow-sm">
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 可编辑属性列表 -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden shadow-sm">
|
||||
<div class="px-4 py-2 text-[12px] font-semibold text-[#8E8E93] bg-gray-50/50 hairline-b flex justify-between">
|
||||
<span>属性微调 (点击弹起选择器)</span>
|
||||
<span class="text-[#007AFF] text-[11px]">AI推导准确率 96%</span>
|
||||
</div>
|
||||
|
||||
<!-- 大类选择行 (点击模拟激活态) -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b bg-blue-50/40">
|
||||
<span class="pl-4 text-[15px] text-[#000000] font-medium">大类</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#007AFF] font-medium">上装</span>
|
||||
<i class="fa-solid fa-angle-down text-[12px] text-[#007AFF]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主色修改行 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">主色</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[15px] text-gray-700">白色</span>
|
||||
<span class="w-4 h-4 rounded-full border border-gray-300 bg-white"></span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 版型修改行 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">版型</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-gray-700">宽松</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 正式程度滑块/点选 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative hairline-b">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">正式程度</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-3.5 h-2 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="w-3.5 h-2 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="w-3.5 h-2 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="w-3.5 h-2 rounded-full bg-gray-200"></span>
|
||||
<span class="w-3.5 h-2 rounded-full bg-gray-200"></span>
|
||||
</div>
|
||||
<span class="text-[13px] font-mono text-[#007AFF] font-medium ml-1">3/5</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 适用场合编辑 -->
|
||||
<div class="h-11 flex items-center justify-between pr-4 relative">
|
||||
<span class="pl-4 text-[15px] text-[#000000]">适用场合</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="px-2 py-0.5 rounded bg-blue-100 text-[#007AFF] text-[12px] font-medium">休闲 ×</span>
|
||||
<span class="px-2 py-0.5 rounded bg-blue-100 text-[#007AFF] text-[12px] font-medium">通勤 ×</span>
|
||||
<span class="w-5 h-5 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 text-xs">+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注编辑框 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm border border-transparent focus-within:border-[#007AFF]/40">
|
||||
<div class="text-[12px] font-semibold text-[#8E8E93] mb-1.5">备注说明</div>
|
||||
<textarea rows="2" class="w-full bg-[#F2F2F7] rounded-xl p-2.5 text-[14px] text-black focus:outline-none resize-none">去年夏天买的,领口略松</textarea>
|
||||
</div>
|
||||
|
||||
<!-- 模拟底部弹起的选择器 (Picker Sheet) 演示 -->
|
||||
<div class="bg-white/95 backdrop-blur-md rounded-2xl p-3 border border-blue-100 shadow-md">
|
||||
<div class="flex justify-between items-center mb-2 px-1">
|
||||
<span class="text-[12px] font-semibold text-gray-700">底部选择面板示例(大类)</span>
|
||||
<span class="text-[11px] text-[#007AFF]">完成</span>
|
||||
</div>
|
||||
<div class="flex gap-1.5 flex-wrap">
|
||||
<span class="px-3 py-1 rounded-lg bg-[#007AFF] text-white text-[13px] font-medium">上装</span>
|
||||
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">下装</span>
|
||||
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">连衣裙</span>
|
||||
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">外套</span>
|
||||
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">鞋</span>
|
||||
<span class="px-3 py-1 rounded-lg bg-[#F2F2F7] text-gray-700 text-[13px]">配饰</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Home Indicator 占位 -->
|
||||
<div class="h-5 w-full bg-[#F2F2F7] flex items-center justify-center pb-1">
|
||||
<div class="w-32 h-1 bg-black/20 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ==================== 伴生交互规范:删除二次确认 Alert 弹窗规范 ==================== -->
|
||||
<div class="w-full max-w-[840px] mt-8 bg-white rounded-2xl p-5 shadow-sm border border-gray-200">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<i class="fa-solid fa-circle-exclamation text-[#FF3B30] text-sm"></i>
|
||||
<h3 class="text-sm font-bold text-gray-900">伴生交互弹窗规范(iOS Alert & 额度回退规则)</h3>
|
||||
<span class="text-[11px] text-[#8E8E93]">符合 Apple HIG 居中确认框与业务逻辑</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
||||
<!-- 弹窗场景 1:成功/处理中状态下删除 (退还 1 次额度) -->
|
||||
<div class="bg-[#F2F2F7] p-4 rounded-xl flex flex-col items-center">
|
||||
<div class="text-[12px] font-medium text-gray-500 mb-2">场景 1:处理中 / 已成功衣物(回退额度)</div>
|
||||
|
||||
<!-- 仿 iOS Alert 控件 (270pt 宽) -->
|
||||
<div class="w-[270px] bg-white/80 backdrop-blur-xl rounded-[14px] overflow-hidden shadow-lg border border-black/5 text-center">
|
||||
<div class="p-4 pt-5">
|
||||
<h4 class="text-[17px] font-semibold text-black tracking-tight">删除这件衣物?</h4>
|
||||
<p class="text-[13px] text-gray-600 mt-1 leading-normal">删除后将退回 1 次上传额度,确认删除?</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 border-t border-[#3C3C43]/15">
|
||||
<button class="h-11 flex items-center justify-center text-[17px] text-[#007AFF] font-normal border-r border-[#3C3C43]/15 active:bg-black/5 transition">
|
||||
取消
|
||||
</button>
|
||||
<button class="h-11 flex items-center justify-center text-[17px] text-[#FF3B30] font-semibold active:bg-black/5 transition">
|
||||
确认删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[11px] text-[#34C759] mt-2 flex items-center gap-1">
|
||||
<i class="fa-solid fa-check text-[10px]"></i> 额度池同步 +1
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗场景 2:识别失败状态下删除 (不提返还,失败时已自动返还) -->
|
||||
<div class="bg-[#F2F2F7] p-4 rounded-xl flex flex-col items-center">
|
||||
<div class="text-[12px] font-medium text-gray-500 mb-2">场景 2:识别失败的衣物(失败时已自动退回)</div>
|
||||
|
||||
<!-- 仿 iOS Alert 控件 (270pt 宽) -->
|
||||
<div class="w-[270px] bg-white/80 backdrop-blur-xl rounded-[14px] overflow-hidden shadow-lg border border-black/5 text-center">
|
||||
<div class="p-4 pt-5">
|
||||
<h4 class="text-[17px] font-semibold text-black tracking-tight">确认删除?</h4>
|
||||
<p class="text-[13px] text-gray-600 mt-1 leading-normal">该衣物识别失败时额度已返还,删除后将彻底移除记录。</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 border-t border-[#3C3C43]/15">
|
||||
<button class="h-11 flex items-center justify-center text-[17px] text-[#007AFF] font-normal border-r border-[#3C3C43]/15 active:bg-black/5 transition">
|
||||
取消
|
||||
</button>
|
||||
<button class="h-11 flex items-center justify-center text-[17px] text-[#FF3B30] font-semibold active:bg-black/5 transition">
|
||||
确认删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[11px] text-[#8E8E93] mt-2 flex items-center gap-1">
|
||||
<i class="fa-solid fa-info-circle text-[10px]"></i> 避免文案误导用户二次退回
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
Reference in New Issue
Block a user