feat: 支持游客免登录浏览核心页面
未登录用户可先浏览衣橱、穿搭、运势、分享等内容，登录改为用户主动选择，并在登录页增加协议勾选确认与暂不登录入口。
This commit is contained in:
@@ -0,0 +1,210 @@
|
||||
---
|
||||
name: wx-review-compliance-fix
|
||||
overview: 整改微信小程序两项审核驳回：① 登录页改为默认不勾选的《用户协议》《隐私政策》勾选框，未勾选不得登录（点击登录弹窗确认）；② 将衣橱页设为启动首页，未登录用户以「游客态 + 本地示例内容」浏览各 tab 页，仅在主动使用受限功能时才引导登录。
|
||||
design:
|
||||
styleKeywords:
|
||||
- 墨色极简
|
||||
- 细描边
|
||||
- 玻璃弹层
|
||||
- 示例角标
|
||||
- 无侵入引导
|
||||
fontSystem:
|
||||
fontFamily: PingFang-SC
|
||||
heading:
|
||||
size: 60rpx
|
||||
weight: 500
|
||||
subheading:
|
||||
size: 30rpx
|
||||
weight: 500
|
||||
body:
|
||||
size: 26rpx
|
||||
weight: 400
|
||||
colorSystem:
|
||||
primary:
|
||||
- "#0A0A0A"
|
||||
- "#1C1C1E"
|
||||
background:
|
||||
- "#FFFFFF"
|
||||
- "#F7F7F5"
|
||||
text:
|
||||
- "#0A0A0A"
|
||||
- "#6E6E73"
|
||||
- "#AEAEB2"
|
||||
functional:
|
||||
- "#0A0A0A"
|
||||
- "#C9C9CE"
|
||||
- "#6E6E73"
|
||||
todos:
|
||||
- id: entry-guest-utils
|
||||
content: 调整 app.json 启动页为衣橱页，新增 utils/guest.ts 提供示例数据与 goLogin 登录引导
|
||||
status: completed
|
||||
- id: wardrobe-guest
|
||||
content: 衣橱页实现游客态示例浏览、分类本地筛选与登录引导，受限操作改走 goLogin
|
||||
status: completed
|
||||
dependencies:
|
||||
- entry-guest-utils
|
||||
- id: login-consent
|
||||
content: 登录页新增默认不勾选协议勾选框、未勾选弹窗确认与「先逛逛」返回浏览入口
|
||||
status: completed
|
||||
dependencies:
|
||||
- entry-guest-utils
|
||||
- id: other-tabs-guest
|
||||
content: 穿搭/运势/分享/我的页增加游客态示例或引导，移除未登录强制跳登录
|
||||
status: completed
|
||||
dependencies:
|
||||
- entry-guest-utils
|
||||
- id: verify-compliance
|
||||
content: 用 [skill:lsp-code-analysis] 核查登录守卫调用点，自测游客浏览、主动登录与 401 兜底全链路
|
||||
status: completed
|
||||
dependencies:
|
||||
- wardrobe-guest
|
||||
- login-consent
|
||||
- other-tabs-guest
|
||||
---
|
||||
|
||||
## 背景与目标
|
||||
|
||||
小程序提审被驳回两条：一是隐私政策不合规，默认自动同意《用户协议》《隐私政策》，须由用户自主阅读后自行选择是否同意；二是打开小程序一进入首页即要求授权登录，须先浏览体验功能服务，再由用户自行选择是否授权登录。本次整改解决这两项合规问题，使小程序可通过重新提审。
|
||||
|
||||
## 核心功能
|
||||
|
||||
1. 「衣橱」改为启动首页：打开小程序不再直达登录页，未登录用户以游客身份直接进入并可浏览页面。
|
||||
2. 游客态浏览体验：衣橱展示本地示例衣物网格（可切换分类即时筛选），穿搭展示示例搭配，运势展示示例运势内容，均带「示例」标注，并附低调的登录引导；不发起任何需要授权的请求，不打断浏览。
|
||||
3. 登录仅在用户主动选择时发生：未登录用户点击上传衣物、AI 推荐、创建分享、编辑资料、通知、订单等需登录的功能时，才进入登录页；登录页提供「暂不登录，先逛逛」入口，可随时返回继续浏览。
|
||||
4. 协议同意整改：登录按钮下方提供默认未勾选的勾选框，文案为「我已阅读并同意《用户协议》和《隐私政策》」，两份协议均可点击查看；未勾选直接点击登录时弹出确认弹窗，选择「同意并继续」才继续登录，选择「不同意」则关闭弹窗并停留在当前页。
|
||||
5. 分享、我的两个页面在未登录时呈现引导状态：分享页提示登录后可创建与查看分享，我的页显示未登录资料卡与「点击登录」，其中协议、关于等只读入口在未登录时仍可访问。
|
||||
6. 登录成功后的原有流程保持：新用户礼包、生日完善引导、回到衣橱或回跳来源页，均与现状一致。
|
||||
|
||||
## 视觉与交互效果
|
||||
|
||||
- 延续现有黑白墨色极简风格：直角卡片、细描边、线稿图标、玻璃弹层，不引入新的色彩与控件体系。
|
||||
- 游客态顶部为一条细描边浏览提示条，示例内容统一带「示例」胶囊角标，受限操作点击后进入登录页，不做强制打断。
|
||||
- 勾选框为墨色方框：未选为空心细描边，选中为黑色实底加白色对勾；未勾选点击登录时的确认弹窗沿用现有毛玻璃居中卡片与双按钮样式。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- 微信小程序原生开发（WXML/WXSS/TypeScript，`miniprogram` 目录，无 npm 构建步骤），类型依赖 `miniprogram-api-typings`。
|
||||
- 复用现有资产，零新增依赖、零后端改动：自定义组件 `v2-overlay`（玻璃弹层，`login.json` 已注册）、`empty-state`、`navigation-bar`、`clothes-card`；设计令牌 CSS 变量（`--ink`/`--ink-2`/`--ink-3`/`--paper`/`--hairline`/`--fill`）与线稿图标库 `styles/icons.wxss`（含 `icon-check`）；工具层沿用 `utils/logger` 统一日志与 `utils/auth.isLoggedIn()` 判据。
|
||||
|
||||
## 实现思路与关键决策
|
||||
|
||||
1. 入口调整：`app.json` 的 `pages` 首位改为 `pages/wardrobe/wardrobe`（游客可浏览的首页），`pages/login/login` 保留在页面列表中作为按需页；tabBar 结构与顺序不变。
|
||||
2. 新增 `utils/guest.ts` 收敛游客态：本地示例数据（示例衣物/搭配/运势文案）+ `goLogin({ redirect? })` 统一登录引导入口（防抖、已在登录页则跳过、`wx.navigateTo` 到登录页，支持登录后回跳）。此方式避免使用 `reLaunch` 直达登录页带来的「清栈式强推登录」观感。
|
||||
3. 页面游客分支：5 个 tab 页 `onShow` 中把 `!isLoggedIn()` 分支从「强制 `redirectToLogin()`」改为「渲染本地示例/引导并 return」，游客态零网络请求；已登录用户走原有 `refresh()` 逻辑不变。受限动作（上传、AI 入口、创建分享、编辑资料、额度/订单、通知等）在游客态统一走 `goLogin()`，深链页（upload/notification/mall/order/ai-*）内部逻辑保持不变，因入口已被拦截。
|
||||
4. 协议合规交互：`login.wxml` 删除「登录即代表同意」默认强制文案，替换为自绘墨色勾选行 + 可点击的协议链接（链接用 `catchtap` 阻止冒泡，避免误触勾选）；未勾选点击登录时用 `v2-overlay` modal 二次确认（「不同意」/「同意并继续」），确认后置 `agreed=true` 并继续原登录流程。登录链路仍仅使用 `wx.login`，不新增任何手机号/头像/昵称授权接口。
|
||||
5. 状态同步与回跳：`goLogin` 的 `redirect` 参数复用 `login.ts` 既有 `goAfterLogin()` 回跳能力；登录成功回到衣橱时 `onShow` 自然切到已登录分支拉取真实数据，并保留 `firstShown` 首帧延迟刷新以规避 webview 首帧 setData 冲突。
|
||||
|
||||
## 架构与流程
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[启动小程序] --> B[衣橱首页]
|
||||
B -->|未登录| C[游客态: 本地示例与浏览提示]
|
||||
C -->|点击受限功能| D[登录页]
|
||||
D -->|未勾选协议点登录| E[确认弹窗: 不同意 / 同意并继续]
|
||||
E -->|不同意| C
|
||||
E -->|同意并继续| F[wx.login 换取登录态]
|
||||
D -->|勾选后点登录| F
|
||||
D -->|先逛逛| C
|
||||
F --> B
|
||||
B -->|已登录| G[真实数据: 衣物列表与上传额度]
|
||||
G -->|401 登录失效| H[redirectToLogin 幂等跳转]
|
||||
H --> D
|
||||
```
|
||||
|
||||
## 性能与可靠性
|
||||
|
||||
- 游客态零请求、零存储写入；示例数据为模块级常量，仅本地 filter（O(n)，n≤8），无渲染放大与内存残留。
|
||||
- 不改动 `utils/request.ts` 的 401 → 刷新 token → `redirectToLogin` 幂等链路，也不改 `app.ts` 的清态 handler；游客态不发送鉴权请求，因此不会触发 `reLaunch` 打断路由。
|
||||
- 回退方案：若审核对自绘勾选控件存疑，可仅替换为原生 `checkbox`（`color="#0A0A0A"`），数据字段 `agreed` 与交互分支无需改动。
|
||||
|
||||
## 目录结构（仅列新增/修改文件）
|
||||
|
||||
```
|
||||
miniprogram/
|
||||
├── app.json # [MODIFY] pages 首位改为 pages/wardrobe/wardrobe，login 保留为按需页
|
||||
├── app.wxss # [MODIFY] 新增游客态通用样式：浏览提示条、示例角标、登录引导按钮（复用 --ink/--hairline/--fill 令牌）
|
||||
├── utils/
|
||||
│ └── guest.ts # [NEW] 游客态唯一数据源与登录引导：示例衣物/搭配/运势数据 + goLogin({redirect})（防抖、已在登录页跳过、navigateTo 登录页）
|
||||
├── pages/
|
||||
│ ├── wardrobe/
|
||||
│ │ ├── wardrobe.ts # [MODIFY] onShow 增加游客分支：不发请求、渲染示例数据；分类本地筛选；onUpload/onClothesTap/onRefresh 游客态走 goLogin；resolvePending 仅登录态执行
|
||||
│ │ ├── wardrobe.wxml # [MODIFY] 游客态渲染示例网格（示例角标）、浏览提示条与登录引导；加载/空态/正常三分支保持不变
|
||||
│ │ └── wardrobe.wxss # [MODIFY] 示例卡片等游客态局部样式
|
||||
│ ├── login/
|
||||
│ │ ├── login.ts # [MODIFY] 新增 agreed/consentVisible 状态、onToggleAgree、未勾选点击登录的弹窗分支、onBrowse（先逛逛 → switchTab 衣橱）；wx.login/礼包/生日引导/回跳逻辑保持不变
|
||||
│ │ ├── login.wxml # [MODIFY] 删除「登录即代表同意」文案；新增自绘勾选行与协议链接（catchtap 防冒泡）、「暂不登录，先逛逛」、协议确认 v2-overlay
|
||||
│ │ ├── login.wxss # [MODIFY] 勾选行与「先逛逛」样式，沿用 --ink 系列令牌
|
||||
│ │ └── login.json # [不变] 已注册 v2-overlay，无需改动
|
||||
│ ├── outfit/
|
||||
│ │ ├── outfit.ts # [MODIFY] onShow 游客分支（本地示例、零请求）；tab 切换与收藏入口在游客态走 goLogin
|
||||
│ │ ├── outfit.wxml # [MODIFY] 游客态示例搭配列表 + 登录引导
|
||||
│ │ └── outfit.wxss # [MODIFY] 游客态局部样式（如有必要）
|
||||
│ ├── horoscope/
|
||||
│ │ ├── horoscope.ts # [MODIFY] 游客分支返回本地静态示例运势，不请求；「去设置生日」/重试在游客态走 goLogin
|
||||
│ │ └── horoscope.wxml # [MODIFY] 游客态示例运势卡 + 登录引导（复用 hs-* 样式）
|
||||
│ ├── closet-share/
|
||||
│ │ ├── closet-share.ts # [MODIFY] 游客分支：不发请求，渲染引导态；创建分享入口走 goLogin
|
||||
│ │ └── closet-share.wxml # [MODIFY] 游客态 empty-state 引导（登录后可创建与查看分享）
|
||||
│ └── profile/
|
||||
│ ├── profile.ts # [MODIFY] onShow 游客分支：不请求 fetchUser；编辑资料/额度/订单/通知等入口走 goLogin
|
||||
│ ├── profile.wxml # [MODIFY] 游客资料卡（icon-user 占位 + 点击登录），保留协议/关于等可浏览入口
|
||||
│ └── profile.wxss # [MODIFY] 游客资料卡样式
|
||||
```
|
||||
|
||||
## 保持不变（回归重点）
|
||||
|
||||
- `utils/request.ts`、`utils/auth.ts`、`app.ts`：401 → 刷新 → `redirectToLogin` 幂等链路与清态 handler 不动。
|
||||
- `pages/notification`、`pages/upload`、`pages/mall`、`pages/order`、`pages/ai-*` 等深链页：入口已在游客态被 `goLogin` 拦截，页面内部逻辑与未登录兜底提示维持现状。
|
||||
- `custom-tab-bar/index.ts` 未登录时红点静默置 0，无需改动；`pages/agreement` 与 `utils/legal.ts` 已满足「未登录可访问」，不再改动。
|
||||
|
||||
## 关键接口（guest.ts）
|
||||
|
||||
```ts
|
||||
export interface GuestClothes {
|
||||
key: string // 本地唯一 key（wx:key 用）
|
||||
name: string
|
||||
category: string // 与衣橱分类条 value 对齐：上装/下装/连衣裙/外套/鞋/配饰
|
||||
icon: string // icons.wxss 线稿图标类名，如 'icon-shirt'
|
||||
}
|
||||
export interface GuestOutfit { key: string; name: string; icons: string[]; tags: string[] }
|
||||
export const GUEST_WARDROBE: GuestClothes[]
|
||||
export const GUEST_OUTFITS: GuestOutfit[]
|
||||
export const GUEST_HOROSCOPE: { zodiac: string; score: number; lines: string[] }
|
||||
export function goLogin(options?: { redirect?: string }): void
|
||||
```
|
||||
|
||||
## 设计风格
|
||||
|
||||
延续 v2 墨色极简体系：零彩色灰阶、发丝线分隔、衬线大标题、线稿图标、毛玻璃弹层，仅在既有版式内追加「游客态」视觉层，整改前后观感一致，不引入新组件库与彩色。
|
||||
|
||||
## 首页（衣橱）游客态
|
||||
|
||||
- 页头保留杂志式大标题「我的衣橱」，统计行改为「浏览模式 · 登录后上传你的衣物」。
|
||||
- 分类条保持可点，对本地示例数据即时筛选，提供可操作、可体验的浏览感。
|
||||
- 主体为两列直角示例卡：细描边 + 线稿图标占位，右上角「示例」胶囊角标（浅填充底 + 灰色字）。
|
||||
- 顶部一条细描边提示条说明当前为浏览模式；右下角保留上传悬浮按钮，点击进入登录页。
|
||||
|
||||
## 其他页面游客态
|
||||
|
||||
- 穿搭、运势直接呈现本地示例内容（示例搭配、示例运势卡），统一带「示例」角标，底部一行低调的「登录后查看你的专属内容」引导。
|
||||
- 分享、我的使用现成空态与资料卡：用户线稿占位头像 + 「点击登录」，协议与关于等只读入口保持可点。
|
||||
|
||||
## 登录页
|
||||
|
||||
- 勾选行位于登录按钮下方：小号灰字 + 自绘方框（未选为细描边空心，选中为墨色实底加白色对勾，120ms 缓动），协议链接保留下划线。
|
||||
- 「暂不登录，先逛逛」为居中细描边文字按钮，与主按钮形成清晰主次。
|
||||
- 未勾选点击登录的确认弹窗复用 v2-overlay 毛玻璃居中卡，按钮为「不同意」（描边）与「同意并继续」（墨色实底主按钮）。
|
||||
|
||||
## 交互与响应式
|
||||
|
||||
- 新增控件热区不小于 88rpx，反馈使用 hover-class 或 120ms 透明度过渡，不使用弹跳动画；过渡遵循既有 --ease 缓动。
|
||||
- 底部间距沿用安全区适配；示例网格按屏幕宽度两列自适应，游客态切换为登录态时列表淡入，避免闪跳。
|
||||
|
||||
## Agent Extensions
|
||||
|
||||
### Skill
|
||||
|
||||
- **lsp-code-analysis**
|
||||
- Purpose: 在整改中做调用点核查与影响分析，检索并确认全部 `auth.isLoggedIn` 强制跳转分支、`redirectToLogin` 既有调用点与新增 `goLogin` 调用点，避免遗漏或误改登录守卫链路。
|
||||
- Expected outcome: 输出完整的引用清单与改动覆盖确认，确保游客态零请求、登录态原逻辑无回归。
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/login/login",
|
||||
"pages/wardrobe/wardrobe",
|
||||
"pages/login/login",
|
||||
"pages/outfit/outfit",
|
||||
"pages/horoscope/horoscope",
|
||||
"pages/notification/notification",
|
||||
|
||||
@@ -841,3 +841,73 @@ swiper-item {
|
||||
.modal-act:active { background: var(--fill); }
|
||||
.modal-act + .modal-act { border-left: 1rpx solid var(--hairline); }
|
||||
.modal-act--main { color: var(--ink); font-weight: 600; }
|
||||
|
||||
/* ============================================================================
|
||||
§18 游客浏览态（未登录）
|
||||
合规要求：打开小程序可先浏览体验功能，登录仅由用户主动选择。
|
||||
样式只在既有版式内追加一层：细描边提示条 + 示例角标 + 低调登录引导。
|
||||
========================================================================== */
|
||||
.guest-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
margin: 26rpx var(--pad) 0;
|
||||
padding: 20rpx 24rpx;
|
||||
border: 1rpx solid var(--hairline-2);
|
||||
border-radius: var(--r-ctrl);
|
||||
background: var(--paper-2);
|
||||
transition: background .18s var(--ease);
|
||||
}
|
||||
.guest-bar:active { background: var(--fill); }
|
||||
.guest-bar .icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
color: var(--ink-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.guest-bar .gb-t {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.45;
|
||||
color: var(--ink-2);
|
||||
letter-spacing: .01em;
|
||||
}
|
||||
.guest-bar .gb-a {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 示例内容角标：浅填充底 + 灰字，弱于业务状态胶囊 */
|
||||
.guest-flag {
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
left: 14rpx;
|
||||
height: 38rpx;
|
||||
padding: 0 14rpx;
|
||||
border-radius: 20rpx;
|
||||
background: var(--fill-2);
|
||||
font-size: 19rpx;
|
||||
font-weight: 500;
|
||||
line-height: 38rpx;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
/* 游客态底部一行登录引导 */
|
||||
.guest-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
padding: 52rpx var(--pad) 0;
|
||||
font-size: 23rpx;
|
||||
color: var(--ink-3);
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
.guest-foot .gf-a {
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 7rpx;
|
||||
text-decoration-thickness: 1rpx;
|
||||
text-decoration-color: var(--ink-4);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { request, redirectToLogin } from '../../utils/request'
|
||||
import { request } from '../../utils/request'
|
||||
import * as auth from '../../utils/auth'
|
||||
import { PagedResult, ClosetShareItem, OutfitShareItem } from '../../types/models'
|
||||
import { ShareStatus, ShareType } from '../../utils/config'
|
||||
import { normalizePaged } from '../../utils/paged'
|
||||
import { setTabBarSelected } from '../../utils/tabbar'
|
||||
import { navScroll } from '../../utils/nav'
|
||||
import { GUEST_SHARES, goLogin } from '../../utils/guest'
|
||||
import { logger } from '../../utils/logger'
|
||||
|
||||
// 日志模块名
|
||||
@@ -25,6 +26,20 @@ interface ShareListItem {
|
||||
_invalid: boolean
|
||||
}
|
||||
|
||||
// 游客态示例列表：与真实列表同构，复用同一套模板渲染，仅补「示例」标注
|
||||
function guestShareList(): ShareListItem[] {
|
||||
return GUEST_SHARES.map((it) => ({
|
||||
kind: it.kind,
|
||||
share_uuid: it.key,
|
||||
title: it.title,
|
||||
typeText: it.typeText,
|
||||
expireText: it.expireText,
|
||||
status: ShareStatus.NORMAL,
|
||||
created_at: 0,
|
||||
_invalid: false,
|
||||
}))
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
tabs: [
|
||||
@@ -40,16 +55,36 @@ Page({
|
||||
hasMore: true,
|
||||
// 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
|
||||
navScrolled: false,
|
||||
// 游客态（未登录）：展示本地示例分享，不发需要授权的请求
|
||||
guest: false,
|
||||
},
|
||||
|
||||
// scroll-view 滚动 → 导航收缩为玻璃小标题
|
||||
onNavScroll: navScroll,
|
||||
|
||||
onLoad() {
|
||||
// 首帧渲染前判定游客态：未登录直接渲染示例列表，避免首帧 setData 冲突
|
||||
if (!auth.isLoggedIn()) {
|
||||
this.setData({ guest: true, list: guestShareList(), loading: false, hasMore: false })
|
||||
logger.info(LOG, '未登录进入分享页，渲染游客态示例内容')
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.syncTabBar()
|
||||
// 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求
|
||||
// 未登录：游客态浏览，零请求，不再强制跳登录（微信审核合规要求）
|
||||
if (!auth.isLoggedIn()) {
|
||||
redirectToLogin()
|
||||
if (!this.data.guest) {
|
||||
this.setData({ guest: true, list: guestShareList(), loading: false, hasMore: false })
|
||||
}
|
||||
return
|
||||
}
|
||||
// 登录成功回到本页：清掉示例数据，切回真实列表
|
||||
if (this.data.guest) {
|
||||
logger.info(LOG, '检测到登录态，从游客态切回真实分享列表')
|
||||
;(this as any).firstShown = true
|
||||
this.setData({ guest: false, list: [], loading: true, hasMore: true })
|
||||
this.refresh()
|
||||
return
|
||||
}
|
||||
// 首帧渲染未结束就 setData 会触发「Expected updated data but get first rendering data」，
|
||||
@@ -69,16 +104,28 @@ Page({
|
||||
onTabTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const index = Number(e.currentTarget.dataset.index)
|
||||
if (index === this.data.activeTab) return
|
||||
// 游客态：分段仍可切换，示例内容用于体验浏览，不发请求
|
||||
if (this.data.guest) {
|
||||
this.setData({ activeTab: index })
|
||||
return
|
||||
}
|
||||
this.setData({ activeTab: index, list: [], loading: true })
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
// 游客态点击示例分享 / 受限入口：统一进入登录页，由用户自行选择是否登录
|
||||
onGuestLogin() {
|
||||
logger.debug(LOG, '游客态点击受限入口，引导登录')
|
||||
goLogin()
|
||||
},
|
||||
|
||||
refresh() {
|
||||
this.setData({ page: 1, hasMore: true, loading: this.data.list.length === 0 })
|
||||
this.fetchList(1)
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.data.guest) return
|
||||
if (!this.data.hasMore || this.data.loading || this.data.loadingMore) return
|
||||
this.fetchList(this.data.page + 1)
|
||||
},
|
||||
@@ -216,6 +263,11 @@ Page({
|
||||
},
|
||||
|
||||
onCreate() {
|
||||
// 新建分享需登录：游客态先引导登录，不直接进入创建页
|
||||
if (this.data.guest) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/closet-share-create/closet-share-create',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo 创建分享失败, err=', e && e.errMsg),
|
||||
@@ -223,6 +275,10 @@ Page({
|
||||
},
|
||||
|
||||
onItemTap(e: WechatMiniprogram.TouchEvent) {
|
||||
if (this.data.guest) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
const uuid = e.currentTarget.dataset.uuid as string
|
||||
const kind = e.currentTarget.dataset.kind as string
|
||||
logger.debug(LOG, '点击分享项, kind=', kind, 'uuid=', uuid)
|
||||
|
||||
@@ -10,6 +10,14 @@
|
||||
<view class="display">分享</view>
|
||||
</view>
|
||||
|
||||
<!-- 游客态提示条：未登录也可先浏览，登录由用户自行选择 -->
|
||||
<view wx:if="{{guest}}" class="guest-bar" bindtap="onGuestLogin">
|
||||
<view class="icon icon-lock"></view>
|
||||
<text class="gb-t">浏览模式 · 以下为示例分享</text>
|
||||
<text class="gb-a">登录</text>
|
||||
<view class="icon icon-chevron-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 下划线式文字分段 -->
|
||||
<view class="segbar">
|
||||
<view class="seg">
|
||||
@@ -24,7 +32,7 @@
|
||||
</view>
|
||||
|
||||
<empty-state
|
||||
wx:if="{{!loading && !list.length}}"
|
||||
wx:if="{{!guest && !loading && !list.length}}"
|
||||
icon="icon-share"
|
||||
title="{{activeTab === 0 ? '还没有分享' : '还没有收到分享'}}"
|
||||
desc="{{activeTab === 0 ? '把衣橱、精选衣物或穿搭分享给好友' : '好友分享给你的衣橱或穿搭会出现在这里'}}"
|
||||
@@ -65,6 +73,7 @@
|
||||
</view>
|
||||
<view class="cs-t">{{item.title}}</view>
|
||||
<view class="cs-tags">
|
||||
<text wx:if="{{guest}}" class="pill">示例</text>
|
||||
<text class="pill">{{item.typeText}}</text>
|
||||
<text wx:if="{{item._invalid}}" class="pill pill--line">{{item.expireText}}</text>
|
||||
<text wx:else class="cs-exp">{{item.expireText}}</text>
|
||||
@@ -73,7 +82,11 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
||||
<view wx:if="{{!guest && list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
||||
<view wx:if="{{guest}}" class="guest-foot" bindtap="onGuestLogin">
|
||||
<text>登录后可创建分享，并查看好友分享给你的内容</text>
|
||||
<text class="gf-a">去登录</text>
|
||||
</view>
|
||||
<view class="gap-64"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { request, redirectToLogin } from '../../utils/request'
|
||||
import { request } from '../../utils/request'
|
||||
import * as auth from '../../utils/auth'
|
||||
import { HoroscopeData } from '../../types/models'
|
||||
import { setTabBarSelected } from '../../utils/tabbar'
|
||||
import { navScroll } from '../../utils/nav'
|
||||
import { guestHoroscope, goLogin } from '../../utils/guest'
|
||||
import { logger } from '../../utils/logger'
|
||||
import { STORAGE_KEYS } from '../../utils/config'
|
||||
|
||||
@@ -41,16 +42,52 @@ Page({
|
||||
errorText: '',
|
||||
// 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
|
||||
navScrolled: false,
|
||||
// 游客态（未登录）：展示本地示例运势，不发需要授权的请求
|
||||
guest: false,
|
||||
},
|
||||
|
||||
// scroll-view 滚动 → 导航收缩为玻璃小标题
|
||||
onNavScroll: navScroll,
|
||||
|
||||
onLoad() {
|
||||
// 首帧渲染前判定游客态：未登录直接用本地示例运势渲染，避免首帧 setData 冲突
|
||||
if (!auth.isLoggedIn()) {
|
||||
const demo = guestHoroscope()
|
||||
this.setData({
|
||||
guest: true,
|
||||
horoscope: demo,
|
||||
statDate: this.formatStatDate(demo.stat_date),
|
||||
luckyColorHex: COLOR_MAP[demo.lucky_color] || '#AEAEB2',
|
||||
loading: false,
|
||||
})
|
||||
logger.info(LOG, '未登录进入运势页，渲染游客态示例运势')
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.syncTabBar()
|
||||
// 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求
|
||||
// 未登录：游客态浏览，零请求，不再强制跳登录（微信审核合规要求）
|
||||
if (!auth.isLoggedIn()) {
|
||||
redirectToLogin()
|
||||
if (!this.data.guest) {
|
||||
const demo = guestHoroscope()
|
||||
this.setData({
|
||||
guest: true,
|
||||
horoscope: demo,
|
||||
statDate: this.formatStatDate(demo.stat_date),
|
||||
luckyColorHex: COLOR_MAP[demo.lucky_color] || '#AEAEB2',
|
||||
loading: false,
|
||||
noBirth: false,
|
||||
error: false,
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
// 登录成功回到本页：清掉示例运势，拉取真实数据
|
||||
if (this.data.guest) {
|
||||
logger.info(LOG, '检测到登录态，从游客态切回真实运势')
|
||||
;(this as any).firstShown = true
|
||||
this.setData({ guest: false, horoscope: null, loading: true })
|
||||
this.fetchHoroscope(0)
|
||||
return
|
||||
}
|
||||
// 首帧渲染未结束就 setData 会触发「Expected updated data but get first rendering data」，
|
||||
@@ -116,15 +153,30 @@ Page({
|
||||
},
|
||||
|
||||
onRetry() {
|
||||
if (this.data.guest) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
this.fetchHoroscope(0)
|
||||
},
|
||||
|
||||
// 游客态点击受限入口（设置生日 / 生成穿搭）：统一进入登录页
|
||||
onGuestLogin() {
|
||||
logger.debug(LOG, '游客态点击受限入口，引导登录')
|
||||
goLogin()
|
||||
},
|
||||
|
||||
formatStatDate(d: number): string {
|
||||
const s = String(d)
|
||||
return `${s.slice(0, 4)}.${s.slice(4, 6)}.${s.slice(6, 8)}`
|
||||
},
|
||||
|
||||
onGoProfile() {
|
||||
// 设置生日需登录：游客态先引导登录，不做强制跳转
|
||||
if (!auth.isLoggedIn()) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
// switchTab 不支持 query 传参，用 storage 标记让「我的」页 onShow 自动弹出编辑弹窗
|
||||
wx.setStorageSync(STORAGE_KEYS.OPEN_PROFILE_EDIT, 1)
|
||||
wx.switchTab({
|
||||
@@ -138,6 +190,10 @@ Page({
|
||||
},
|
||||
|
||||
onGenerate() {
|
||||
if (this.data.guest) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/ai-recommend/ai-recommend',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo AI 推荐失败, err=', e && e.errMsg),
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<view class="page page-flex">
|
||||
<navigation-bar title="每日运势" back="{{false}}" scrolled="{{navScrolled}}">
|
||||
<view slot="right" class="nav-action" bindtap="onGoProfile">去设置生日</view>
|
||||
<view wx:if="{{guest}}" slot="right" class="nav-action" bindtap="onGuestLogin">登录</view>
|
||||
<view wx:else slot="right" class="nav-action" bindtap="onGoProfile">去设置生日</view>
|
||||
</navigation-bar>
|
||||
|
||||
<scroll-view scroll-y class="scroll-body pb-tab" bindscroll="onNavScroll">
|
||||
@@ -10,6 +11,14 @@
|
||||
<view class="display">每日运势</view>
|
||||
</view>
|
||||
|
||||
<!-- 游客态提示条：未登录也可先浏览，登录由用户自行选择 -->
|
||||
<view wx:if="{{guest}}" class="guest-bar" bindtap="onGuestLogin">
|
||||
<view class="icon icon-lock"></view>
|
||||
<text class="gb-t">浏览模式 · 以下为示例运势</text>
|
||||
<text class="gb-a">登录</text>
|
||||
<view class="icon icon-chevron-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 骨架屏 -->
|
||||
<view wx:if="{{loading}}" class="hs-skel">
|
||||
<view class="sk sk-ln" style="width: 38%; height: 28rpx;"></view>
|
||||
@@ -46,6 +55,7 @@
|
||||
<view class="hs-zodiac">
|
||||
<view class="icon icon-sparkles"></view>
|
||||
<text class="t-xl">{{horoscope.zodiac}}</text>
|
||||
<text wx:if="{{guest}}" class="pill">示例</text>
|
||||
</view>
|
||||
<text class="hs-date num">{{statDate}}</text>
|
||||
</view>
|
||||
@@ -136,6 +146,11 @@
|
||||
<view class="hs-foot">
|
||||
<view class="btn btn--ghost btn--block" bindtap="onGenerate">生成今日推荐穿搭</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{guest}}" class="guest-foot" bindtap="onGuestLogin">
|
||||
<text>登录并设置生日，查看你的专属运势</text>
|
||||
<text class="gf-a">去登录</text>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="gap-64"></view>
|
||||
|
||||
@@ -27,11 +27,27 @@ Page({
|
||||
{ text: '稍后再说', value: '' },
|
||||
{ text: '去完善', value: 'ok', type: 'main' },
|
||||
],
|
||||
// 协议同意：默认不勾选，由用户自主阅读后自行选择（微信审核合规要求）
|
||||
agreed: false,
|
||||
consentVisible: false,
|
||||
consentButtons: [
|
||||
{ text: '不同意', value: '' },
|
||||
{ text: '同意并继续', value: 'ok', type: 'main' },
|
||||
],
|
||||
},
|
||||
|
||||
onLoad(query: Record<string, string>) {
|
||||
logger.debug(LOG, 'onLoad, query=', JSON.stringify(query), 'isLoggedIn=', auth.isLoggedIn())
|
||||
if (query.redirect) this.setData({ redirect: query.redirect })
|
||||
if (query.redirect) {
|
||||
// goLogin 侧对 redirect 做了 encodeURIComponent，这里解码还原（decode 失败时用原值兜底）
|
||||
let redirect = query.redirect
|
||||
try {
|
||||
redirect = decodeURIComponent(redirect)
|
||||
} catch (e) {
|
||||
logger.warn(LOG, 'redirect 解码失败，使用原值, err=', e)
|
||||
}
|
||||
this.setData({ redirect })
|
||||
}
|
||||
if (auth.isLoggedIn()) {
|
||||
this.goAfterLogin()
|
||||
}
|
||||
@@ -57,11 +73,54 @@ Page({
|
||||
})
|
||||
},
|
||||
|
||||
// 勾选 / 取消勾选协议：完全由用户操作驱动，不存在默认勾选
|
||||
onToggleAgree() {
|
||||
const agreed = !this.data.agreed
|
||||
logger.debug(LOG, '协议勾选状态切换, agreed=', agreed)
|
||||
this.setData({ agreed })
|
||||
},
|
||||
|
||||
// 未勾选协议点击登录：弹窗二次确认，由用户主动选择是否同意
|
||||
onLogin() {
|
||||
if (this.data.loading) {
|
||||
logger.debug(LOG, '登录中，忽略重复点击')
|
||||
return
|
||||
}
|
||||
if (!this.data.agreed) {
|
||||
logger.info(LOG, '未勾选协议，弹出确认弹窗')
|
||||
this.setData({ consentVisible: true })
|
||||
return
|
||||
}
|
||||
this.doLogin()
|
||||
},
|
||||
|
||||
onConsentCancel() {
|
||||
logger.debug(LOG, '用户未同意协议，停留在登录页')
|
||||
this.setData({ consentVisible: false })
|
||||
},
|
||||
|
||||
onConsentConfirm(e: WechatMiniprogram.CustomEvent) {
|
||||
this.setData({ consentVisible: false })
|
||||
// 弹窗主按钮才代表同意；其余分支（不同意）只关闭弹窗，用户仍可浏览
|
||||
if (e.detail.value !== 'ok') {
|
||||
logger.info(LOG, '用户选择不同意协议')
|
||||
return
|
||||
}
|
||||
logger.info(LOG, '用户同意协议，继续登录')
|
||||
this.setData({ agreed: true })
|
||||
this.doLogin()
|
||||
},
|
||||
|
||||
// 暂不登录：回到衣橱首页继续浏览（游客态），不产生任何授权请求
|
||||
onBrowse() {
|
||||
logger.info(LOG, '用户选择先逛逛，返回衣橱继续浏览')
|
||||
wx.switchTab({
|
||||
url: '/pages/wardrobe/wardrobe',
|
||||
fail: (e) => logger.warn(LOG, 'switchTab 衣橱失败, err=', e && e.errMsg),
|
||||
})
|
||||
},
|
||||
|
||||
doLogin() {
|
||||
logger.debug(LOG, '点击登录, redirect=', this.data.redirect)
|
||||
this.setData({ loading: true })
|
||||
|
||||
|
||||
@@ -23,12 +23,22 @@
|
||||
<view class="wechat-icon"></view>
|
||||
<text>{{loading ? '登录中…' : '微信一键登录'}}</text>
|
||||
</view>
|
||||
<view class="lg-terms">
|
||||
<text>登录即代表同意</text>
|
||||
<text class="link" data-type="user" bindtap="openAgreement">《用户协议》</text>
|
||||
<text>和</text>
|
||||
<text class="link" data-type="privacy" bindtap="openAgreement">《隐私政策》</text>
|
||||
|
||||
<!-- 协议同意：默认不勾选，由用户阅读后自行选择是否同意 -->
|
||||
<view class="lg-consent">
|
||||
<view class="lg-check {{agreed ? 'is-on' : ''}}" bindtap="onToggleAgree">
|
||||
<view class="icon icon-check"></view>
|
||||
</view>
|
||||
<view class="lg-consent-t" bindtap="onToggleAgree">
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="link" data-type="user" catchtap="openAgreement">《用户协议》</text>
|
||||
<text>和</text>
|
||||
<text class="link" data-type="privacy" catchtap="openAgreement">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 暂不登录：返回衣橱继续浏览，不做任何授权 -->
|
||||
<view class="lg-browse" bindtap="onBrowse">暂不登录，先逛逛</view>
|
||||
</view>
|
||||
|
||||
<!-- 新手礼包：居中玻璃卡 -->
|
||||
@@ -65,4 +75,15 @@
|
||||
bind:confirm="onBirthConfirm"
|
||||
bind:cancel="onBirthCancel"
|
||||
/>
|
||||
|
||||
<!-- 未勾选协议的二次确认：是否同意由用户自行选择 -->
|
||||
<v2-overlay
|
||||
visible="{{consentVisible}}"
|
||||
type="modal"
|
||||
title="请先阅读并同意协议"
|
||||
content="登录前请阅读《用户协议》和《隐私政策》，同意后我们才会为你创建账号并保存衣橱数据。"
|
||||
buttons="{{consentButtons}}"
|
||||
bind:confirm="onConsentConfirm"
|
||||
bind:cancel="onConsentCancel"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@@ -81,15 +81,48 @@
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.5 3C5.36 3 2 5.69 2 9c0 1.87 1.03 3.54 2.62 4.65L4 16.5l3.27-1.72c.73.2 1.47.3 2.23.3h.5A6.2 6.2 0 0 1 9 12c0-3.3 3.36-6 7.5-6h.5A5.7 5.7 0 0 0 9.5 3z'/%3E%3Cpath d='M22 12c0-2.76-2.69-5-6-5s-6 2.24-6 5 2.69 5 6 5c.72 0 1.42-.1 2.06-.28L20.5 18l-.42-2.6c1.17-.88 1.92-2.06 1.92-3.4z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
|
||||
}
|
||||
|
||||
.lg-terms {
|
||||
margin-top: 28rpx;
|
||||
text-align: center;
|
||||
/* 协议同意行：默认未勾选（空心细描边），勾选后为墨色实底 + 白色对勾 */
|
||||
.lg-consent {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
|
||||
.lg-check {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-top: 5rpx;
|
||||
flex-shrink: 0;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: inset 0 0 0 1rpx var(--ink-4);
|
||||
color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
|
||||
}
|
||||
|
||||
.lg-check .icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.lg-check.is-on {
|
||||
background: var(--ink);
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lg-consent-t {
|
||||
flex: 1;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.75;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.lg-terms .link {
|
||||
.lg-consent-t .link {
|
||||
color: var(--ink-2);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 6rpx;
|
||||
@@ -97,6 +130,23 @@
|
||||
text-decoration-color: var(--ink-4);
|
||||
}
|
||||
|
||||
/* 暂不登录：细描边文字按钮，与主按钮形成主次 */
|
||||
.lg-browse {
|
||||
margin-top: 28rpx;
|
||||
height: 84rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: var(--ink-2);
|
||||
letter-spacing: .02em;
|
||||
transition: opacity .18s var(--ease);
|
||||
}
|
||||
|
||||
.lg-browse:active {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* 新手礼包 */
|
||||
.lg-gift-ic {
|
||||
width: 88rpx;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { request, redirectToLogin } from '../../utils/request'
|
||||
import { request } from '../../utils/request'
|
||||
import * as auth from '../../utils/auth'
|
||||
import { PagedResult, OutfitItem, CommunityOutfitItem } from '../../types/models'
|
||||
import { OutfitSource, STORAGE_KEYS } from '../../utils/config'
|
||||
@@ -8,6 +8,7 @@ import { OutfitStatusPill, isPendingSave, outfitStatusPill } from '../../utils/o
|
||||
import { setTabBarSelected } from '../../utils/tabbar'
|
||||
import { formatRelativeTime } from '../../utils/format'
|
||||
import { navScroll } from '../../utils/nav'
|
||||
import { GUEST_OUTFITS, goLogin } from '../../utils/guest'
|
||||
import { logger } from '../../utils/logger'
|
||||
|
||||
// 日志模块名
|
||||
@@ -44,16 +45,36 @@ Page({
|
||||
pendingCount: 0,
|
||||
// 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
|
||||
navScrolled: false,
|
||||
// 游客态（未登录）：展示本地示例穿搭，不发需要授权的请求
|
||||
guest: false,
|
||||
guestList: GUEST_OUTFITS,
|
||||
},
|
||||
|
||||
// scroll-view 滚动 → 导航收缩为玻璃小标题
|
||||
onNavScroll: navScroll,
|
||||
|
||||
onLoad() {
|
||||
// 首帧渲染前判定游客态，避免首帧 setData 冲突
|
||||
if (!auth.isLoggedIn()) {
|
||||
this.setData({ guest: true, loading: false })
|
||||
logger.info(LOG, '未登录进入穿搭页，渲染游客态示例内容')
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.syncTabBar()
|
||||
// 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求
|
||||
// 未登录：游客态浏览，零请求，不再强制跳登录（微信审核合规要求）
|
||||
if (!auth.isLoggedIn()) {
|
||||
redirectToLogin()
|
||||
if (!this.data.guest) this.setData({ guest: true, list: [], loading: false })
|
||||
return
|
||||
}
|
||||
// 登录成功回到本页：清空示例数据，切回真实列表
|
||||
if (this.data.guest) {
|
||||
logger.info(LOG, '检测到登录态，从游客态切换为真实穿搭列表')
|
||||
;(this as any).firstShown = true
|
||||
this.setData({ guest: false, guestList: [], list: [], loading: true })
|
||||
this.refresh()
|
||||
this.fetchPendingCount()
|
||||
return
|
||||
}
|
||||
const openCollect = wx.getStorageSync(STORAGE_KEYS.OPEN_COLLECT)
|
||||
@@ -86,16 +107,32 @@ Page({
|
||||
onTabChange(e: WechatMiniprogram.TouchEvent) {
|
||||
const index = Number(e.currentTarget.dataset.index)
|
||||
if (index === this.data.activeTab) return
|
||||
// 游客态：分段仍可切换，示例内容用于体验浏览，不发请求
|
||||
if (this.data.guest) {
|
||||
this.setData({ activeTab: index })
|
||||
return
|
||||
}
|
||||
this.setData({ activeTab: index, list: [], loading: true })
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
// 游客态点击示例穿搭 / 受限入口：统一进入登录页，由用户自行选择是否登录
|
||||
onGuestLogin() {
|
||||
logger.debug(LOG, '游客态点击受限入口，引导登录')
|
||||
goLogin()
|
||||
},
|
||||
|
||||
refresh() {
|
||||
this.setData({ page: 1, hasMore: true, loading: this.data.list.length === 0 })
|
||||
this.fetchList(1)
|
||||
},
|
||||
|
||||
onRefresh() {
|
||||
// 游客态没有服务端数据可刷新，直接收起下拉动画
|
||||
if (this.data.guest) {
|
||||
this.setData({ refreshing: false })
|
||||
return
|
||||
}
|
||||
this.setData({ refreshing: true })
|
||||
Promise.all([this.fetchList(1), this.fetchPendingCount()]).finally(() =>
|
||||
this.setData({ refreshing: false })
|
||||
@@ -103,6 +140,7 @@ Page({
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.data.guest) return
|
||||
if (!this.data.hasMore || this.data.loading || this.data.loadingMore) return
|
||||
this.fetchList(this.data.page + 1)
|
||||
},
|
||||
@@ -192,6 +230,10 @@ Page({
|
||||
},
|
||||
|
||||
onCreate() {
|
||||
if (this.data.guest) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/outfit-edit/outfit-edit',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo 新建穿搭失败, err=', e && e.errMsg),
|
||||
@@ -199,6 +241,10 @@ Page({
|
||||
},
|
||||
|
||||
onAiRecommend() {
|
||||
if (this.data.guest) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/ai-recommend/ai-recommend',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo AI 推荐失败, err=', e && e.errMsg),
|
||||
@@ -207,6 +253,10 @@ Page({
|
||||
|
||||
// 进入 AI 穿搭页：AI 生成结果的统一管理入口（待保存 / 已保存）
|
||||
onAiPending() {
|
||||
if (this.data.guest) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/ai-pending/ai-pending',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo AI 穿搭失败, err=', e && e.errMsg),
|
||||
@@ -214,6 +264,10 @@ Page({
|
||||
},
|
||||
|
||||
onOutfitTap(e: WechatMiniprogram.TouchEvent) {
|
||||
if (this.data.guest) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
const uuid = e.currentTarget.dataset.uuid as string
|
||||
const owner = this.data.activeTab === 0 ? '1' : '0'
|
||||
logger.debug(LOG, '点击穿搭, uuid=', uuid, 'owner=', owner)
|
||||
|
||||
@@ -16,6 +16,14 @@
|
||||
<view class="display">穿搭</view>
|
||||
</view>
|
||||
|
||||
<!-- 游客态提示条：未登录也可先浏览，登录由用户自行选择 -->
|
||||
<view wx:if="{{guest}}" class="guest-bar" bindtap="onGuestLogin">
|
||||
<view class="icon icon-lock"></view>
|
||||
<text class="gb-t">浏览模式 · 以下为示例穿搭</text>
|
||||
<text class="gb-a">登录</text>
|
||||
<view class="icon icon-chevron-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 下划线式文字分段 -->
|
||||
<view class="segbar">
|
||||
<view class="seg">
|
||||
@@ -32,12 +40,12 @@
|
||||
<view class="ae-t">AI 穿搭</view>
|
||||
<view class="ae-s">AI 生成的搭配在这里保存与管理</view>
|
||||
</view>
|
||||
<text wx:if="{{pendingCount > 0}}" class="pill pill--ink">{{pendingCount}} 套待保存</text>
|
||||
<text wx:if="{{!guest && pendingCount > 0}}" class="pill pill--ink">{{pendingCount}} 套待保存</text>
|
||||
<view class="icon icon-chevron-right ae-ch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 骨架屏 -->
|
||||
<view wx:if="{{loading}}" class="of-skel">
|
||||
<view wx:if="{{!guest && loading}}" class="of-skel">
|
||||
<view class="of-skel-item" wx:for="{{[1, 2]}}" wx:key="*this">
|
||||
<view class="sk sk-img sk-cover"></view>
|
||||
<view class="sk sk-ln" style="width: 44%;"></view>
|
||||
@@ -47,7 +55,7 @@
|
||||
|
||||
<!-- 空态 -->
|
||||
<empty-state
|
||||
wx:elif="{{!list.length}}"
|
||||
wx:elif="{{!guest && !list.length}}"
|
||||
icon="icon-shirt"
|
||||
title="{{activeTab === 0 ? '还没有穿搭' : activeTab === 1 ? '还没有收藏的穿搭' : '还没有公开的穿搭'}}"
|
||||
desc="{{activeTab === 0 ? '从衣橱挑几件，搭一套吧' : activeTab === 1 ? '在社区或 AI 推荐中点亮小星星，喜欢的穿搭会出现在这里' : '把喜欢的穿搭公开到社区，让大家看到你的搭配'}}"
|
||||
@@ -55,6 +63,31 @@
|
||||
bind:action="onCreate"
|
||||
/>
|
||||
|
||||
<!-- 游客态：本地示例穿搭（点击任一示例进入登录页） -->
|
||||
<view wx:elif="{{guest}}" class="of-list">
|
||||
<view class="of-card" wx:for="{{guestList}}" wx:key="key" bindtap="onGuestLogin">
|
||||
<view class="collage collage--{{item.icons.length}}">
|
||||
<view class="cg" wx:for="{{item.icons}}" wx:for-item="ic" wx:key="*this">
|
||||
<view class="ph icon {{ic}}"></view>
|
||||
</view>
|
||||
<view class="guest-flag">示例</view>
|
||||
</view>
|
||||
<view class="of-trow">
|
||||
<text class="of-title">{{item.name}}</text>
|
||||
<text class="pill pill--line">{{item.scene}}</text>
|
||||
</view>
|
||||
<view class="of-desc">{{item.desc}}</view>
|
||||
<view class="of-meta">
|
||||
<text class="of-m">{{item.icons.length}} 件衣物</text>
|
||||
<view class="spacer"></view>
|
||||
<view class="of-m">
|
||||
<view class="icon icon-heart"></view>
|
||||
<text class="num">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 卡片流 -->
|
||||
<view wx:else class="of-list">
|
||||
<view
|
||||
@@ -105,7 +138,11 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
||||
<view wx:if="{{!guest && list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
||||
<view wx:if="{{guest}}" class="guest-foot" bindtap="onGuestLogin">
|
||||
<text>登录后查看你的专属穿搭与收藏</text>
|
||||
<text class="gf-a">去登录</text>
|
||||
</view>
|
||||
<view class="gap-64"></view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { request, uploadFile, redirectToLogin } from '../../utils/request'
|
||||
import { request, uploadFile } from '../../utils/request'
|
||||
import * as auth from '../../utils/auth'
|
||||
import { UserInfo, QuotaItem } from '../../types/models'
|
||||
import { QuotaType, QUOTA_NAMES, VIP_TYPE_NAMES, STORAGE_KEYS } from '../../utils/config'
|
||||
import { formatDate } from '../../utils/format'
|
||||
import { setTabBarSelected, setTabBarUnread, setTabBarHidden } from '../../utils/tabbar'
|
||||
import { navScroll } from '../../utils/nav'
|
||||
import { goLogin } from '../../utils/guest'
|
||||
import { logger } from '../../utils/logger'
|
||||
|
||||
// 日志模块名
|
||||
@@ -51,6 +52,8 @@ Page({
|
||||
quotaStats: [] as Array<{ key: number; label: string; remain: number; total: number }>,
|
||||
// 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
|
||||
navScrolled: false,
|
||||
// 游客态（未登录）：展示资料引导卡，只读入口仍可访问，不发请求
|
||||
guest: false,
|
||||
},
|
||||
|
||||
// scroll-view 滚动 → 导航收缩为玻璃小标题
|
||||
@@ -58,6 +61,11 @@ Page({
|
||||
|
||||
onLoad() {
|
||||
this.setToday()
|
||||
// 首帧渲染前判定游客态，避免首帧 setData 冲突
|
||||
if (!auth.isLoggedIn()) {
|
||||
this.setData({ guest: true })
|
||||
logger.info(LOG, '未登录进入我的页，渲染游客态资料卡')
|
||||
}
|
||||
},
|
||||
|
||||
// 跨零点后回到本页时，生日选择器上限需重算，不能停留在昨天
|
||||
@@ -72,17 +80,46 @@ Page({
|
||||
this.setToday()
|
||||
// 回到本页时按抽屉状态校准标签栏，防止切前后台/切 tab 后残留隐藏
|
||||
setTabBarHidden(!!this.data.editVisible)
|
||||
// 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求
|
||||
// 未登录：游客态展示引导卡，零请求，不再强制跳登录（微信审核合规要求）
|
||||
if (!auth.isLoggedIn()) {
|
||||
redirectToLogin()
|
||||
if (!this.data.guest) {
|
||||
// 退出登录后回到本页时清掉残留资料，避免展示上一账号信息
|
||||
this.setData({
|
||||
guest: true,
|
||||
userInfo: {} as UserInfo,
|
||||
vipLabel: '',
|
||||
zodiac: '',
|
||||
quotaStats: [],
|
||||
uploadRemain: 0,
|
||||
unread: 0,
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
// 登录成功回到本页：清掉游客态，拉取真实资料
|
||||
if (this.data.guest) {
|
||||
logger.info(LOG, '检测到登录态，从游客态切回真实资料')
|
||||
this.setData({ guest: false })
|
||||
}
|
||||
this.consumeOpenEditMark()
|
||||
this.fetchUser()
|
||||
this.fetchQuota()
|
||||
this.fetchUnread()
|
||||
},
|
||||
|
||||
// 未登录时的统一拦截：进入登录页，由用户自行选择是否登录
|
||||
needLogin(): boolean {
|
||||
if (auth.isLoggedIn()) return false
|
||||
logger.debug(LOG, '游客态点击受限入口，引导登录')
|
||||
goLogin()
|
||||
return true
|
||||
},
|
||||
|
||||
// 游客态点击资料卡 / 登录引导
|
||||
onGuestLogin() {
|
||||
this.needLogin()
|
||||
},
|
||||
|
||||
// 离开本页时恢复标签栏：此时抽屉不再可见，标签栏不能残留隐藏
|
||||
onHide() {
|
||||
setTabBarHidden(false)
|
||||
@@ -172,6 +209,7 @@ Page({
|
||||
},
|
||||
|
||||
onEdit() {
|
||||
if (this.needLogin()) return
|
||||
const u = this.data.userInfo
|
||||
// 抽屉打开期间隐藏悬浮标签栏：tabBar 由框架渲染在页面之上，否则会压住抽屉底部按钮
|
||||
setTabBarHidden(true)
|
||||
@@ -284,24 +322,28 @@ Page({
|
||||
},
|
||||
|
||||
onTapMall() {
|
||||
if (this.needLogin()) return
|
||||
wx.navigateTo({
|
||||
url: '/pages/mall/mall',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo 商城失败, err=', e && e.errMsg),
|
||||
})
|
||||
},
|
||||
onTapOrder() {
|
||||
if (this.needLogin()) return
|
||||
wx.navigateTo({
|
||||
url: '/pages/order/order',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo 订单失败, err=', e && e.errMsg),
|
||||
})
|
||||
},
|
||||
onTapNotification() {
|
||||
if (this.needLogin()) return
|
||||
wx.navigateTo({
|
||||
url: '/pages/notification/notification',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo 通知失败, err=', e && e.errMsg),
|
||||
})
|
||||
},
|
||||
onTapCollect() {
|
||||
if (this.needLogin()) return
|
||||
wx.setStorageSync(STORAGE_KEYS.OPEN_COLLECT, 1)
|
||||
wx.switchTab({
|
||||
url: '/pages/outfit/outfit',
|
||||
@@ -309,6 +351,7 @@ Page({
|
||||
})
|
||||
},
|
||||
onTapFlow() {
|
||||
if (this.needLogin()) return
|
||||
wx.navigateTo({
|
||||
url: '/pages/mall/mall?tab=flow',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo 流水失败, err=', e && e.errMsg),
|
||||
|
||||
@@ -7,8 +7,25 @@
|
||||
<view class="eyebrow">Profile</view>
|
||||
</view>
|
||||
|
||||
<!-- 游客态资料卡：点击进入登录页，登录与否由用户自行选择 -->
|
||||
<view wx:if="{{guest}}" class="pf-hero" bindtap="onGuestLogin">
|
||||
<view class="pf-av">
|
||||
<view class="icon icon-user"></view>
|
||||
</view>
|
||||
<view class="pf-info">
|
||||
<view class="pf-name">未登录</view>
|
||||
<view class="pf-sub">
|
||||
<text class="pill pill--line">浏览模式</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pf-edit">
|
||||
点击登录
|
||||
<view class="icon icon-chevron-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 资料区：大号头像 + 衬线昵称 + 胶囊标签 -->
|
||||
<view class="pf-hero">
|
||||
<view wx:else class="pf-hero">
|
||||
<view class="pf-av">
|
||||
<image wx:if="{{userInfo.avatar}}" class="pf-av-img" src="{{userInfo.avatar}}" mode="aspectFill" />
|
||||
<view wx:else class="icon icon-user"></view>
|
||||
@@ -36,8 +53,8 @@
|
||||
<view class="icon icon-chevron-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 我的额度：四栏发丝线数字条 -->
|
||||
<view class="pf-quota" bindtap="onTapMall">
|
||||
<!-- 我的额度：四栏发丝线数字条（游客态不展示，避免 0/0 误导） -->
|
||||
<view wx:if="{{!guest}}" class="pf-quota" bindtap="onTapMall">
|
||||
<view class="pf-quota-hd">
|
||||
<text class="eyebrow">Quota</text>
|
||||
<text class="qk">我的额度</text>
|
||||
@@ -113,6 +130,10 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{guest}}" class="guest-foot" bindtap="onGuestLogin">
|
||||
<text>登录后同步你的衣橱、穿搭与额度</text>
|
||||
<text class="gf-a">去登录</text>
|
||||
</view>
|
||||
<view class="pf-ver">v1.0.0</view>
|
||||
<view class="gap-64"></view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { request, redirectToLogin } from '../../utils/request'
|
||||
import { request } from '../../utils/request'
|
||||
import * as auth from '../../utils/auth'
|
||||
import { PagedResult, ClothesItem, QuotaItem } from '../../types/models'
|
||||
import { QuotaType } from '../../utils/config'
|
||||
@@ -7,6 +7,7 @@ import { clothesStatusFlag } from '../../utils/clothes-status'
|
||||
import { resolvePendingClothes } from '../../utils/pending-clothes'
|
||||
import { setTabBarSelected } from '../../utils/tabbar'
|
||||
import { navScroll } from '../../utils/nav'
|
||||
import { GUEST_WARDROBE, GuestClothes, goLogin } from '../../utils/guest'
|
||||
import { logger } from '../../utils/logger'
|
||||
|
||||
// 日志模块名
|
||||
@@ -22,6 +23,12 @@ const CATEGORIES = [
|
||||
{ name: '配饰', value: '配饰' },
|
||||
]
|
||||
|
||||
// 游客态分类筛选：与分类条 value 对齐，「全部」返回完整示例
|
||||
function filterGuestClothes(index: number): GuestClothes[] {
|
||||
const cat = CATEGORIES[index] ? CATEGORIES[index].value : ''
|
||||
return cat ? GUEST_WARDROBE.filter((it) => it.category === cat) : GUEST_WARDROBE
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
categories: CATEGORIES,
|
||||
@@ -45,16 +52,37 @@ Page({
|
||||
{ text: '知道了', value: '' },
|
||||
{ text: '查看衣物', value: 'ok', type: 'main' },
|
||||
],
|
||||
// 游客态（未登录）：展示本地示例内容，不发任何需要授权的请求
|
||||
guest: false,
|
||||
guestList: GUEST_WARDROBE,
|
||||
},
|
||||
|
||||
// scroll-view 滚动 → 导航收缩为玻璃小标题
|
||||
onNavScroll: navScroll,
|
||||
|
||||
onLoad() {
|
||||
// 首帧渲染前判定游客态：未登录直接渲染本地示例，避免首帧 setData 冲突
|
||||
if (!auth.isLoggedIn()) {
|
||||
this.setData({ guest: true, loading: false })
|
||||
logger.info(LOG, '未登录进入首页，渲染游客态示例内容')
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.syncTabBar()
|
||||
// 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求
|
||||
// 未登录：游客态浏览，零请求，不再强制跳登录（微信审核合规要求：
|
||||
// 用户可先浏览体验功能服务，登录与否由用户自行选择）
|
||||
if (!auth.isLoggedIn()) {
|
||||
redirectToLogin()
|
||||
if (!this.data.guest) this.setData({ guest: true, list: [], loading: false })
|
||||
return
|
||||
}
|
||||
// 登录成功回到首页：清空示例数据，切回真实衣橱
|
||||
if (this.data.guest) {
|
||||
logger.info(LOG, '检测到登录态，从游客态切换为真实衣橱')
|
||||
;(this as any).firstShown = true
|
||||
this.setData({ guest: false, guestList: [], list: [], total: 0, uploadRemain: 0, loading: true })
|
||||
this.resolvePending()
|
||||
this.refresh()
|
||||
return
|
||||
}
|
||||
// 核对「上传后退出小程序」的衣物最终处理结果（pending 为空时零请求）
|
||||
@@ -82,6 +110,11 @@ Page({
|
||||
},
|
||||
|
||||
onRefresh() {
|
||||
// 游客态没有服务端数据可刷新，直接收起下拉动画
|
||||
if (this.data.guest) {
|
||||
this.setData({ refreshing: false })
|
||||
return
|
||||
}
|
||||
this.setData({ refreshing: true })
|
||||
Promise.all([this.fetchList(1), this.fetchQuota()]).finally(() => {
|
||||
this.setData({ refreshing: false })
|
||||
@@ -89,6 +122,7 @@ Page({
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.data.guest) return
|
||||
if (!this.data.hasMore || this.data.loading || this.data.loadingMore) return
|
||||
this.fetchList(this.data.page + 1)
|
||||
},
|
||||
@@ -186,11 +220,27 @@ Page({
|
||||
onCategoryTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const index = Number(e.currentTarget.dataset.index)
|
||||
if (index === this.data.activeCategory) return
|
||||
this.setData({ activeCategory: index, list: [], loading: true })
|
||||
this.setData({ activeCategory: index })
|
||||
// 游客态：本地示例数据即时筛选，提供可操作的浏览体验，不发请求
|
||||
if (this.data.guest) {
|
||||
this.setData({ guestList: filterGuestClothes(index) })
|
||||
return
|
||||
}
|
||||
this.setData({ list: [], loading: true })
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
// 游客态点击示例内容 / 受限入口：统一进入登录页，由用户自行选择是否登录
|
||||
onGuestLogin() {
|
||||
logger.debug(LOG, '游客态点击受限入口，引导登录')
|
||||
goLogin()
|
||||
},
|
||||
|
||||
onClothesTap(e: WechatMiniprogram.CustomEvent) {
|
||||
if (this.data.guest) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
const item = e.detail.item as ClothesItem
|
||||
logger.debug(LOG, '点击衣物, uuid=', item && item.clothes_uuid)
|
||||
wx.navigateTo({
|
||||
@@ -200,6 +250,11 @@ Page({
|
||||
},
|
||||
|
||||
onUpload() {
|
||||
// 上传需登录：游客态先引导登录，不直接进入上传页
|
||||
if (!auth.isLoggedIn()) {
|
||||
this.onGuestLogin()
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/upload/upload',
|
||||
fail: (e) => logger.warn(LOG, 'navigateTo 上传页失败, err=', e && e.errMsg),
|
||||
|
||||
@@ -14,7 +14,16 @@
|
||||
<view class="head">
|
||||
<view class="eyebrow">Wardrobe</view>
|
||||
<view class="display">我的衣橱</view>
|
||||
<view class="wd-stat num">共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次</view>
|
||||
<view wx:if="{{guest}}" class="wd-stat">浏览模式 · 以下为功能示例，登录后同步你的衣物</view>
|
||||
<view wx:else class="wd-stat num">共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次</view>
|
||||
</view>
|
||||
|
||||
<!-- 游客态提示条：未登录也可先浏览，登录由用户自行选择 -->
|
||||
<view wx:if="{{guest}}" class="guest-bar" bindtap="onGuestLogin">
|
||||
<view class="icon icon-lock"></view>
|
||||
<text class="gb-t">浏览模式 · 示例内容仅供体验</text>
|
||||
<text class="gb-a">登录</text>
|
||||
<view class="icon icon-chevron-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 下划线式极简分类条 -->
|
||||
@@ -33,7 +42,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 骨架屏 -->
|
||||
<view wx:if="{{loading}}" class="wd-grid">
|
||||
<view wx:if="{{!guest && loading}}" class="wd-grid">
|
||||
<view class="wd-skel" wx:for="{{[1, 2, 3, 4, 5, 6]}}" wx:key="*this">
|
||||
<view class="sk sk-img"></view>
|
||||
<view class="sk sk-ln" style="width: 70%;"></view>
|
||||
@@ -43,7 +52,7 @@
|
||||
|
||||
<!-- 空态 -->
|
||||
<empty-state
|
||||
wx:elif="{{!list.length}}"
|
||||
wx:elif="{{!guest && !list.length}}"
|
||||
icon="icon-hanger"
|
||||
title="衣橱还空着"
|
||||
desc="拍照上传第一件衣物，AI 自动抠图并识别属性"
|
||||
@@ -51,6 +60,19 @@
|
||||
bind:action="onUpload"
|
||||
/>
|
||||
|
||||
<!-- 游客态：本地示例衣物网格（可切换分类即时筛选） -->
|
||||
<view wx:elif="{{guest}}" class="wd-grid">
|
||||
<view class="wd-tile" wx:for="{{guestList}}" wx:key="key" bindtap="onGuestLogin">
|
||||
<view class="gd-img">
|
||||
<view class="icon {{item.icon}} gd-ph"></view>
|
||||
<view class="guest-flag">示例</view>
|
||||
</view>
|
||||
<view class="tile-name">{{item.name}}</view>
|
||||
<view class="tile-sub">{{item.category}} · {{item.color}}色</view>
|
||||
</view>
|
||||
<view wx:if="{{!guestList.length}}" class="gd-none">该分类暂无示例内容</view>
|
||||
</view>
|
||||
|
||||
<!-- 衣物网格 -->
|
||||
<view wx:else class="wd-grid">
|
||||
<view class="wd-tile" wx:for="{{list}}" wx:key="clothes_uuid">
|
||||
@@ -63,7 +85,11 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
||||
<view wx:if="{{!guest && list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
||||
<view wx:if="{{guest}}" class="guest-foot" bindtap="onGuestLogin">
|
||||
<text>登录后上传你的衣物，AI 自动抠图与识别</text>
|
||||
<text class="gf-a">去登录</text>
|
||||
</view>
|
||||
<view class="gap-64"></view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
@@ -52,3 +52,32 @@
|
||||
.wd-tile:active {
|
||||
transform: scale(.975);
|
||||
}
|
||||
|
||||
/* ===== 游客态：示例衣物瓦片（线稿占位 + 示例角标） ===== */
|
||||
.gd-img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--paper-2);
|
||||
border-radius: var(--r-img);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gd-img .gd-ph {
|
||||
width: 56%;
|
||||
height: 56%;
|
||||
color: var(--art);
|
||||
}
|
||||
|
||||
/* 分类下无示例时的整行占位 */
|
||||
.gd-none {
|
||||
grid-column: 1 / -1;
|
||||
padding: 72rpx 0;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: var(--ink-3);
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
import { HoroscopeData } from '../types/models'
|
||||
import { logger } from './logger'
|
||||
|
||||
// 日志模块名
|
||||
const LOG = 'guest'
|
||||
|
||||
/**
|
||||
* 游客态唯一数据源：未登录浏览时展示的本地示例内容 + 统一登录引导。
|
||||
*
|
||||
* 合规背景（微信审核驳回整改）：
|
||||
* 1. 打开小程序不得直接要求授权登录，用户应能先浏览体验功能服务；
|
||||
* 2. 仅在用户主动点击受限功能时，才由用户自行选择是否登录。
|
||||
*
|
||||
* 本模块不发起任何网络请求、不改动登录态，只提供静态示例数据与登录跳转入口。
|
||||
*/
|
||||
|
||||
// 衣物示例：icon 取 styles/icons.wxss 的线稿图标类名
|
||||
export interface GuestClothes {
|
||||
key: string
|
||||
name: string
|
||||
category: string // 与衣橱分类条 value 对齐
|
||||
color: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
// 穿搭示例：icons 为拼图封面里的线稿占位图标
|
||||
export interface GuestOutfit {
|
||||
key: string
|
||||
name: string
|
||||
scene: string
|
||||
desc: string
|
||||
icons: string[]
|
||||
}
|
||||
|
||||
// 分享示例
|
||||
export interface GuestShare {
|
||||
key: string
|
||||
kind: 'closet' | 'outfit'
|
||||
title: string
|
||||
typeText: string
|
||||
expireText: string
|
||||
}
|
||||
|
||||
export const GUEST_WARDROBE: GuestClothes[] = [
|
||||
{ key: 'g1', name: '白衬衫', category: '上装', color: '白', icon: 'icon-shirt' },
|
||||
{ key: 'g2', name: '直筒牛仔裤', category: '下装', color: '蓝', icon: 'icon-hanger' },
|
||||
{ key: 'g3', name: '针织开衫', category: '外套', color: '灰', icon: 'icon-shirt' },
|
||||
{ key: 'g4', name: '黑色连衣裙', category: '连衣裙', color: '黑', icon: 'icon-hanger' },
|
||||
{ key: 'g5', name: '小白鞋', category: '鞋', color: '白', icon: 'icon-image' },
|
||||
{ key: 'g6', name: '丝巾', category: '配饰', color: '米', icon: 'icon-sparkles' },
|
||||
{ key: 'g7', name: '风衣', category: '外套', color: '卡其', icon: 'icon-shirt' },
|
||||
{ key: 'g8', name: '半身裙', category: '下装', color: '棕', icon: 'icon-hanger' },
|
||||
]
|
||||
|
||||
export const GUEST_OUTFITS: GuestOutfit[] = [
|
||||
{
|
||||
key: 'go1',
|
||||
name: '通勤的干净线条',
|
||||
scene: '通勤',
|
||||
desc: '衬衫配直筒裤，外搭一件风衣',
|
||||
icons: ['icon-shirt', 'icon-hanger', 'icon-image'],
|
||||
},
|
||||
{
|
||||
key: 'go2',
|
||||
name: '周末的松弛感',
|
||||
scene: '周末',
|
||||
desc: '针织开衫配半身裙，鞋选小白鞋',
|
||||
icons: ['icon-shirt', 'icon-hanger'],
|
||||
},
|
||||
{
|
||||
key: 'go3',
|
||||
name: '晚间约会的黑色',
|
||||
scene: '约会',
|
||||
desc: '黑色连衣裙加一条丝巾点亮',
|
||||
icons: ['icon-hanger', 'icon-sparkles'],
|
||||
},
|
||||
]
|
||||
|
||||
export const GUEST_SHARES: GuestShare[] = [
|
||||
{ key: 'gs1', kind: 'closet', title: '衣柜分享 · 12 件', typeText: '全量衣橱', expireText: '示例内容' },
|
||||
{ key: 'gs2', kind: 'outfit', title: '通勤的干净线条', typeText: '穿搭分享 · 3 件', expireText: '示例内容' },
|
||||
]
|
||||
|
||||
// 运势示例：日期取当天，保证页头日期不出现过去时间
|
||||
export function guestHoroscope(): HoroscopeData {
|
||||
const d = new Date()
|
||||
const pad = (n: number) => (n < 10 ? `0${n}` : String(n))
|
||||
return {
|
||||
stat_date: Number(`${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}`),
|
||||
zodiac: '天秤座',
|
||||
overall_score: 4,
|
||||
love_score: 4,
|
||||
career_score: 3,
|
||||
wealth_score: 3,
|
||||
daily_text:
|
||||
'适合整理衣橱的一天：把常穿的几件放在最容易拿到的位置，出门前的犹豫会少很多。新的配色值得记录，晚间适合与朋友聊聊近况。',
|
||||
lucky_color: '蓝色',
|
||||
lucky_number: '7',
|
||||
}
|
||||
}
|
||||
|
||||
// 登录跳转防抖：连续点击多个受限入口时只跳一次
|
||||
let lastNavAt = 0
|
||||
|
||||
/**
|
||||
* 统一登录引导入口（游客态所有受限操作都走这里）。
|
||||
*
|
||||
* 与 utils/request.ts 的 redirectToLogin 的区别：
|
||||
* - redirectToLogin 用于「登录态失效」的被动兜底，reLaunch 清栈；
|
||||
* - goLogin 用于用户主动点击受限功能的场景，navigateTo 保留返回路径，
|
||||
* 用户可随时返回继续浏览，不会被强制清栈。
|
||||
*/
|
||||
export function goLogin(options: { redirect?: string } = {}): void {
|
||||
const pages = typeof getCurrentPages === 'function' ? getCurrentPages() : []
|
||||
const current = pages[pages.length - 1]
|
||||
if (current && current.route === 'pages/login/login') {
|
||||
logger.debug(LOG, '已在登录页，忽略本次登录引导')
|
||||
return
|
||||
}
|
||||
const now = Date.now()
|
||||
if (now - lastNavAt < 800) {
|
||||
logger.debug(LOG, '登录引导防抖，忽略重复点击')
|
||||
return
|
||||
}
|
||||
lastNavAt = now
|
||||
|
||||
const query = options.redirect ? `?redirect=${encodeURIComponent(options.redirect)}` : ''
|
||||
logger.info(LOG, '引导进入登录页, redirect=', options.redirect || '')
|
||||
wx.navigateTo({
|
||||
url: `/pages/login/login${query}`,
|
||||
fail: (e) => {
|
||||
// 页面栈过深或跳转被占用时降级 redirectTo，保证受限操作一定有出口
|
||||
logger.warn(LOG, 'navigateTo 登录页失败，降级 redirectTo, err=', e && e.errMsg)
|
||||
wx.redirectTo({
|
||||
url: `/pages/login/login${query}`,
|
||||
fail: (err) => logger.warn(LOG, 'redirectTo 登录页失败, err=', err && err.errMsg),
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,378 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>微信授权登录 - 纸条AI衣橱</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #F2F2F7;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
min-height: 100vh;
|
||||
padding: 24px 0 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.device-screen {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background: #FFFFFF;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 微信小程序原生胶囊 */
|
||||
.wechat-capsule {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 12px;
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
z-index: 50;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.capsule-divider {
|
||||
width: 0.5px;
|
||||
height: 18px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.capsule-dots {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
}
|
||||
.capsule-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.capsule-circle {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
border: 1.8px solid #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.capsule-inner-dot {
|
||||
width: 3.5px;
|
||||
height: 3.5px;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 状态栏时间 */
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
padding: 10px 24px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
letter-spacing: -0.2px;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
/* 底部安全区横条 */
|
||||
.home-indicator {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 134px;
|
||||
height: 5px;
|
||||
background-color: #000000;
|
||||
border-radius: 100px;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
/* 顶部淡蓝视觉区 */
|
||||
.hero-art-area {
|
||||
height: 320px;
|
||||
background: linear-gradient(180deg, #E8F2FF 0%, #F5F9FF 75%, #FFFFFF 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-deco-circle-1 {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: -20px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: rgba(232, 242, 255, 0.8);
|
||||
filter: blur(20px);
|
||||
}
|
||||
.hero-deco-circle-2 {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: -20px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: rgba(88, 86, 214, 0.08);
|
||||
filter: blur(25px);
|
||||
}
|
||||
|
||||
/* 按钮交互 */
|
||||
.btn-login {
|
||||
background-color: #007AFF;
|
||||
color: #FFFFFF;
|
||||
transition: opacity 0.15s ease, transform 0.1s ease;
|
||||
}
|
||||
.btn-login:active {
|
||||
opacity: 0.82;
|
||||
transform: scale(0.99);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 画板标题标注 -->
|
||||
<div class="mb-4 flex items-center justify-between w-[375px] px-2 text-xs font-semibold text-[#8E8E93] tracking-wide">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-block w-2 h-2 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="text-[#000000] font-medium text-sm">第 1 屏｜微信授权登录</span>
|
||||
</div>
|
||||
<span>375 × 812 pt</span>
|
||||
</div>
|
||||
|
||||
<!-- 主画布 -->
|
||||
<div class="device-screen">
|
||||
|
||||
<!-- iOS 顶部状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-1.5 text-xs">
|
||||
<svg class="w-4 h-3.5" viewBox="0 0 16 12" fill="currentColor">
|
||||
<path d="M1 9h2v2H1V9zm4-3h2v5H5V6zm4-3h2v8H9V3zm4-3h2v11h-2V0z"/>
|
||||
</svg>
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M8 3.5c2.6 0 5 1.1 6.7 2.8l-1.4 1.4C11.9 6.3 10 5.5 8 5.5s-3.9.8-5.3 2.2L1.3 6.3C3 4.6 5.4 3.5 8 3.5zm0 4c1.5 0 2.9.6 3.9 1.6l-1.4 1.4c-.6-.6-1.5-1-2.5-1s-1.9.4-2.5 1L4.1 9.1C5.1 8.1 6.5 7.5 8 7.5zm0 4c.8 0 1.5.7 1.5 1.5S8.8 14.5 8 14.5 6.5 13.8 6.5 13 7.2 11.5 8 11.5z"/>
|
||||
</svg>
|
||||
<div class="w-5 h-2.5 border border-black rounded-sm p-0.5 flex items-center">
|
||||
<div class="h-full w-3 bg-black rounded-2xs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信原生胶囊按钮（规范保留区域） -->
|
||||
<div class="wechat-capsule">
|
||||
<div class="capsule-dots">
|
||||
<div class="capsule-dot"></div>
|
||||
<div class="capsule-dot"></div>
|
||||
<div class="capsule-dot"></div>
|
||||
</div>
|
||||
<div class="capsule-divider"></div>
|
||||
<div class="capsule-circle">
|
||||
<div class="capsule-inner-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部 1/3：淡蓝 #E8F2FF 块面 + 轻盈线稿插画 -->
|
||||
<div class="hero-art-area">
|
||||
<div class="hero-deco-circle-1"></div>
|
||||
<div class="hero-deco-circle-2"></div>
|
||||
|
||||
<!-- 线稿插画：衣架、连衣裙、T恤、鞋子错落摆放，线条 #007AFF，块面 #E8F2FF 与 #5856D6 -->
|
||||
<svg class="w-[310px] h-[220px] relative z-10" viewBox="0 0 310 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 柔和阴影水彩底斑 -->
|
||||
<ellipse cx="155" cy="195" rx="120" ry="12" fill="#E8F2FF" />
|
||||
|
||||
<!-- 装饰小闪光/星芒 (AI 意象) -->
|
||||
<path d="M50 48L52 42L54 48L60 50L54 52L52 58L50 52L44 50L50 48Z" fill="#5856D6" fill-opacity="0.45"/>
|
||||
<path d="M260 70L261.5 65L263 70L268 71.5L263 73L261.5 78L260 73L255 71.5L260 70Z" fill="#007AFF" fill-opacity="0.5"/>
|
||||
<circle cx="280" cy="110" r="3" fill="#5856D6" fill-opacity="0.25"/>
|
||||
<circle cx="35" cy="130" r="2.5" fill="#007AFF" fill-opacity="0.3"/>
|
||||
|
||||
<!-- 1. 悬挂的主衣架 (中央顶部) -->
|
||||
<g stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- 挂钩 -->
|
||||
<path d="M155 30C155 24 161 22 163 27C165 32 155 36 155 42" />
|
||||
<!-- 架身 -->
|
||||
<path d="M155 42L112 66C108 68 109 72 113 72H197C201 72 202 68 198 66L155 42Z" fill="#FFFFFF" />
|
||||
<!-- 横杆 -->
|
||||
<line x1="114" y1="72" x2="196" y2="72" />
|
||||
</g>
|
||||
|
||||
<!-- 2. 连衣裙 (左侧主体) -->
|
||||
<g>
|
||||
<!-- 连衣裙衣架 -->
|
||||
<path d="M85 52C85 47 90 45 92 49C94 53 85 56 85 61" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<path d="M85 61L58 75H112L85 61Z" stroke="#007AFF" stroke-width="1.8" fill="#FFFFFF" stroke-linejoin="round"/>
|
||||
<!-- 裙身块面填充 -->
|
||||
<path d="M68 76L64 105C64 105 72 110 85 110C98 110 106 105 106 105L102 76H68Z" fill="#E8F2FF"/>
|
||||
<path d="M64 105L48 168C48 168 70 176 85 176C100 176 122 168 122 168L106 105C106 105 98 110 85 110C72 110 64 105 64 105Z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||||
<!-- 裙身腰带点缀色 #5856D6 -->
|
||||
<path d="M63 103C63 103 72 108 85 108C98 108 107 103 107 103L106 108C106 108 98 113 85 113C72 113 64 108 64 108L63 103Z" fill="#5856D6" fill-opacity="0.85"/>
|
||||
<!-- 裙身主描边 -->
|
||||
<path d="M68 76L63 104L47 170C58 174 72 176 85 176C98 176 112 174 123 170L107 104L102 76" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 领口线 -->
|
||||
<path d="M75 76C75 82 95 82 95 76" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<!-- 裙褶细节 -->
|
||||
<path d="M85 113V175" stroke="#007AFF" stroke-width="1.4" stroke-dasharray="2 3" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- 3. 短袖 T 恤 (右侧中层) -->
|
||||
<g>
|
||||
<!-- T恤衣架 -->
|
||||
<path d="M215 56C215 51 220 49 222 53C224 57 215 60 215 65" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<path d="M215 65L185 78H245L215 65Z" stroke="#007AFF" stroke-width="1.8" fill="#FFFFFF" stroke-linejoin="round"/>
|
||||
<!-- T恤块面 -->
|
||||
<path d="M192 79L170 94L180 110L190 105V152H240V105L250 110L260 94L238 79H192Z" fill="#E8F2FF"/>
|
||||
<!-- T恤口袋细节 #5856D6 块面 -->
|
||||
<rect x="218" y="98" width="14" height="15" rx="3" fill="#5856D6" fill-opacity="0.18" stroke="#5856D6" stroke-width="1.4"/>
|
||||
<!-- T恤描边 -->
|
||||
<path d="M192 79L169 94L180 110L190 105V152C190 154 192 155 194 155H236C238 155 240 154 240 152V105L250 110L261 94L238 79" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 圆领 -->
|
||||
<path d="M202 79C202 87 228 87 228 79" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- 4. 单鞋 / 优雅高跟与乐福鞋 (底部右侧错落摆放) -->
|
||||
<g>
|
||||
<!-- 鞋子底块面 -->
|
||||
<path d="M215 192C205 192 200 188 203 182C206 177 218 174 235 174C252 174 262 181 260 188C258 192 245 192 215 192Z" fill="#E8F2FF"/>
|
||||
<!-- 鞋子轮廓描边 -->
|
||||
<path d="M202 184C208 177 222 173 236 173C248 173 258 177 263 183C265 185 264 189 260 190C252 192 225 192 212 192C204 192 200 188 202 184Z" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M212 180C220 180 230 182 238 185" stroke="#5856D6" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<!-- 小鞋跟/鞋底线 -->
|
||||
<line x1="254" y1="187" x2="259" y2="194" stroke="#007AFF" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- 5. 飘带与标签小纸条 (呼应产品「纸条」意向) -->
|
||||
<g>
|
||||
<rect x="135" y="125" width="28" height="38" rx="4" fill="#FFFFFF" stroke="#007AFF" stroke-width="1.8"/>
|
||||
<!-- 纸条小孔与挂绳 -->
|
||||
<circle cx="149" cy="132" r="2" fill="#5856D6"/>
|
||||
<path d="M149 130C149 122 153 118 153 112" stroke="#5856D6" stroke-width="1.4" stroke-linecap="round" stroke-dasharray="2 2"/>
|
||||
<!-- 纸条上的条纹 -->
|
||||
<line x1="141" y1="142" x2="157" y2="142" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="141" y1="148" x2="153" y2="148" stroke="#8E8E93" stroke-width="1.4" stroke-linecap="round"/>
|
||||
<line x1="141" y1="154" x2="150" y2="154" stroke="#8E8E93" stroke-width="1.4" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 中部：Logo、产品名与 Slogan -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-6 -mt-2">
|
||||
|
||||
<!-- 线性衣架组成的 Logo 图标 -->
|
||||
<div class="w-18 h-18 w-[72px] h-[72px] rounded-2xl bg-[#F2F2F7] flex items-center justify-center mb-5 shadow-xs">
|
||||
<svg class="w-10 h-10 text-[#007AFF]" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- 钩子 -->
|
||||
<path d="M20 10C20 6.5 23.5 5 25 8C26.5 11 20 13.5 20 17" stroke-width="2.2"/>
|
||||
<!-- 极简 Apple 风格线性衣架 -->
|
||||
<path d="M20 17L7 25.5C5.8 26.3 6.2 28 7.8 28H32.2C33.8 28 34.2 26.3 33 25.5L20 17Z" stroke-width="2.2" fill="#FFFFFF"/>
|
||||
<line x1="7.8" y1="28" x2="32.2" y2="28" stroke-width="2.2"/>
|
||||
<!-- 衣架中心 AI 闪烁小星点 -->
|
||||
<path d="M20 21.5L20.8 23.2L22.5 24L20.8 24.8L20 26.5L19.2 24.8L17.5 24L19.2 23.2L20 21.5Z" fill="#5856D6" stroke="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 产品名 -->
|
||||
<h1 class="text-[26px] font-bold text-[#000000] tracking-tight mb-2">
|
||||
纸条AI衣橱
|
||||
</h1>
|
||||
|
||||
<!-- Slogan -->
|
||||
<p class="text-[15px] text-[#8E8E93] font-normal tracking-normal text-center">
|
||||
把你的衣橱，交给 AI 打理
|
||||
</p>
|
||||
|
||||
<!-- 特性小胶囊标签（轻量克制呈现核心价值） -->
|
||||
<div class="flex items-center gap-2 mt-5">
|
||||
<span class="px-2.5 py-1 rounded-full bg-[#E8F2FF] text-[#007AFF] text-[11px] font-medium">
|
||||
智能抠图
|
||||
</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-[#E8F2FF] text-[#007AFF] text-[11px] font-medium">
|
||||
15维属性识别
|
||||
</span>
|
||||
<span class="px-2.5 py-1 rounded-full bg-[#E8F2FF] text-[#007AFF] text-[11px] font-medium">
|
||||
星座运势穿搭
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部操作区（安全区上方） -->
|
||||
<div class="px-4 pb-10 w-full flex flex-col items-center">
|
||||
|
||||
<!-- 微信一键登录按钮 (高 48pt，圆角 14pt，整宽左右留 16pt，系统蓝填充) -->
|
||||
<button class="btn-login w-full h-[48px] rounded-[14px] flex items-center justify-center gap-2.5 shadow-sm font-medium text-[16px] tracking-normal cursor-pointer select-none">
|
||||
<!-- 微信官方图标 (纯白) -->
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
|
||||
<path d="M8.691 2.188C3.891 2.188 0 5.477 0 9.531c0 2.211 1.156 4.195 2.969 5.531l-.75 2.25 2.656-1.344c1.188.375 2.453.563 3.816.563.348 0 .695-.016 1.039-.043-.223-.629-.34-1.305-.34-2.008 0-4.047 3.891-7.336 8.691-7.336.563 0 1.109.047 1.641.137C18.602 4.316 14.078 2.188 8.691 2.188zm-2.25 4.344c.625 0 1.125.5 1.125 1.125s-.5 1.125-1.125 1.125-1.125-.5-1.125-1.125.5-1.125 1.125-1.125zm4.875 0c.625 0 1.125.5 1.125 1.125s-.5 1.125-1.125 1.125-1.125-.5-1.125-1.125.5-1.125 1.125-1.125zm4.063 4.172c-4.125 0-7.5 2.813-7.5 6.281 0 1.898.992 3.594 2.547 4.742l-.641 1.922 2.277-1.148c1.02.32 2.109.484 3.316.484 4.125 0 7.5-2.813 7.5-6.281s-3.375-6.281-7.5-6.281zm-2.25 3.719c.531 0 .969.438.969.969s-.438.969-.969.969-.969-.438-.969-.969.438-.969.969-.969zm4.188 0c.531 0 .969.438.969.969s-.438.969-.969.969-.969-.438-.969-.969.438-.969.969-.969z"/>
|
||||
</svg>
|
||||
<span>微信一键登录</span>
|
||||
</button>
|
||||
|
||||
<!-- 协议条款说明 -->
|
||||
<div class="mt-3.5 text-[11px] text-[#8E8E93] text-center tracking-tight flex items-center justify-center flex-wrap">
|
||||
<span>登录即代表同意</span>
|
||||
<a href="javascript:void(0)" class="text-[#007AFF] hover:underline mx-0.5">《用户协议》</a>
|
||||
<span>和</span>
|
||||
<a href="javascript:void(0)" class="text-[#007AFF] hover:underline mx-0.5">《隐私政策》</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- iOS 底部指示条 -->
|
||||
<div class="home-indicator"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 规范要求的同画板附带状态展示（异常态/空态） -->
|
||||
<div class="w-[375px] mt-6 px-1 flex flex-col gap-3">
|
||||
<div class="text-xs font-semibold text-[#8E8E93] flex items-center gap-1">
|
||||
<span>伴生交互状态原型说明</span>
|
||||
</div>
|
||||
|
||||
<!-- iOS 风格 轻提示 / 错误提示示例 (白色 80% 毛玻璃浮层，圆角 12pt) -->
|
||||
<div class="bg-white/90 backdrop-blur-md rounded-[14px] p-3.5 border border-[#E5E5EA] shadow-sm flex items-center justify-between">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-7 h-7 rounded-full bg-[#FF3B30]/10 flex items-center justify-center text-[#FF3B30]">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="8" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[13px] font-semibold text-[#000000]">微信授权取消或失败</span>
|
||||
<span class="text-[11px] text-[#8E8E93]">网络波动或用户未授权，提示「授权登录未完成，请重试」</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[11px] font-medium px-2 py-0.5 rounded-full bg-[#F2F2F7] text-[#8E8E93]">Toast 异常态</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 159 KiB |
@@ -1,549 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第10屏 通知（tabBar全状态画板）</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=Inter:wght@400;500;600;700&display=swap');
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
background-color: #EBF0F5;
|
||||
color: #1C1C1E;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.mockup-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
min-width: 375px;
|
||||
min-height: 812px;
|
||||
border-radius: 44px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #F2F2F7;
|
||||
box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.18), 0 0 0 10px #1E232A, 0 0 0 12px #2C323B;
|
||||
}
|
||||
/* 微信胶囊按钮 */
|
||||
.capsule-btn {
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="p-8 lg:p-12 min-h-screen">
|
||||
|
||||
<!-- 顶部设计规范与画板说明卡片 -->
|
||||
<div class="max-w-[1300px] mx-auto bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-[#E5E5EA] mb-10">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-[#E5E5EA] pb-5 mb-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-[#007AFF] ring-4 ring-[#007AFF]/20"></span>
|
||||
<h1 class="text-2xl font-bold text-[#1C1C1E] tracking-tight">第 10 屏 ｜ 通知（ tabBar 核心页 · 全状态画板 ）</h1>
|
||||
<span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-[#007AFF]/10 text-[#007AFF] border border-[#007AFF]/20">微信小程序 tabBar页 · 375 × 812 pt</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-xs font-medium text-[#8E8E93]">
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-palette text-[#007AFF]"></i> 系统蓝 #007AFF</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-circle text-[#FF3B30]"></i> 系统红 #FF3B30</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-layer-group text-slate-400"></i> 分组底色 #F2F2F7</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-bell text-[#007AFF]"></i> 5 Tab 架构已激活「通知」</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-[#636366] leading-relaxed flex flex-wrap items-center gap-y-2 gap-x-6">
|
||||
<span class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-500"></i> 严格遵循业务约束：不展示发送者头像，不提供「全部已读」入口</span>
|
||||
<span class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-500"></i> 未读标识：标题左侧 6pt 系统蓝小圆点 + 左边缘极浅系统蓝边线</span>
|
||||
<span class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-500"></i> tabBar 通知 Tab 携带红色未读徽标「7」</span>
|
||||
<span class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-500"></i> 包含：列表正常态、通知详情二级页面、空态界面</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主画板展示区域：3个状态画板横向排布 -->
|
||||
<div class="max-w-[1300px] mx-auto flex flex-wrap justify-center items-start gap-10">
|
||||
|
||||
<!-- ==================== 1. 状态一：通知列表正常展示态（tabBar选中态） ==================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-4 flex items-center gap-2 text-sm font-bold text-[#1C1C1E]">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>
|
||||
<span>状态 1 · 通知列表正常态 ( tabBar 选中 + 未读数「7」)</span>
|
||||
</div>
|
||||
|
||||
<div class="mockup-frame flex flex-col justify-between select-none">
|
||||
<!-- 顶部安全区与微信原生Header -->
|
||||
<div class="bg-white/95 backdrop-blur-md z-30 pt-3 pb-2 border-b border-[#E5E5EA]/80 shrink-0">
|
||||
<!-- 状态栏 -->
|
||||
<div class="px-6 flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<span class="text-[10px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 微信导航条 -->
|
||||
<div class="px-4 h-10 flex items-center justify-between relative">
|
||||
<div class="w-16"></div>
|
||||
<span class="text-[17px] font-bold text-[#1C1C1E] tracking-tight">通知</span>
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="w-[0.5px] h-4 bg-black/15"></div>
|
||||
<i class="fa-regular fa-circle-dot text-xs text-black/70"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类筛选标签栏 (无全部已读按钮，专注文档约束) -->
|
||||
<div class="px-4 pt-2.5 pb-1 flex items-center gap-2">
|
||||
<div class="px-3.5 py-1.5 rounded-full text-xs font-bold bg-[#007AFF] text-white shadow-sm shadow-[#007AFF]/25">
|
||||
全部
|
||||
</div>
|
||||
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366] hover:bg-[#E5E5EA] transition">
|
||||
点赞
|
||||
</div>
|
||||
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366] hover:bg-[#E5E5EA] transition">
|
||||
订单
|
||||
</div>
|
||||
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366] hover:bg-[#E5E5EA] transition">
|
||||
系统
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表内容滚动区 -->
|
||||
<div class="flex-1 overflow-y-auto px-4 py-3 space-y-2.5 hide-scrollbar">
|
||||
|
||||
<!-- 列表项 1：未读 · 点赞通知 -->
|
||||
<div class="bg-white rounded-2xl p-3.5 shadow-sm border border-[#E5E5EA]/70 relative overflow-hidden flex gap-3 cursor-pointer hover:bg-slate-50/50 transition">
|
||||
<!-- 未读项极浅系统蓝左边线 -->
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3.5px] bg-[#007AFF]"></div>
|
||||
|
||||
<!-- 左侧 40pt 圆形线性图标 (点赞：浅粉底 #FFE8EC 红字 #FF3B30) -->
|
||||
<div class="w-10 h-10 rounded-full bg-[#FFE8EC] flex items-center justify-center shrink-0 text-[#FF3B30]">
|
||||
<i class="fa-regular fa-heart text-lg"></i>
|
||||
</div>
|
||||
|
||||
<!-- 右侧主体内容 -->
|
||||
<div class="flex-1 min-w-0 pr-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<!-- 未读 6pt 系统蓝小圆点 -->
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] shrink-0"></span>
|
||||
<span class="text-sm font-bold text-[#1C1C1E] tracking-tight truncate">收到新的点赞</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-[#8E8E93] font-normal shrink-0">2小时前</span>
|
||||
</div>
|
||||
<p class="text-xs text-[#3A3A3C] leading-relaxed line-clamp-2">
|
||||
你的穿搭「周末休闲通勤套」收到了一个赞
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表项 2：未读 · 点赞通知 -->
|
||||
<div class="bg-white rounded-2xl p-3.5 shadow-sm border border-[#E5E5EA]/70 relative overflow-hidden flex gap-3 cursor-pointer hover:bg-slate-50/50 transition">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3.5px] bg-[#007AFF]"></div>
|
||||
<div class="w-10 h-10 rounded-full bg-[#FFE8EC] flex items-center justify-center shrink-0 text-[#FF3B30]">
|
||||
<i class="fa-regular fa-heart text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pr-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] shrink-0"></span>
|
||||
<span class="text-sm font-bold text-[#1C1C1E] tracking-tight truncate">收到新的点赞</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-[#8E8E93] font-normal shrink-0">4小时前</span>
|
||||
</div>
|
||||
<p class="text-xs text-[#3A3A3C] leading-relaxed line-clamp-2">
|
||||
你的穿搭「法式复古碎花裙搭配」收到了 3 个新点赞
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表项 3：未读 · 订单通知 (淡蓝底 #E8F2FF 系统蓝 #007AFF) -->
|
||||
<div class="bg-white rounded-2xl p-3.5 shadow-sm border border-[#E5E5EA]/70 relative overflow-hidden flex gap-3 cursor-pointer hover:bg-slate-50/50 transition">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3.5px] bg-[#007AFF]"></div>
|
||||
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center shrink-0 text-[#007AFF]">
|
||||
<i class="fa-solid fa-receipt text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pr-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] shrink-0"></span>
|
||||
<span class="text-sm font-bold text-[#1C1C1E] tracking-tight truncate">额度包购买成功</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-[#8E8E93] font-normal shrink-0">昨天 16:40</span>
|
||||
</div>
|
||||
<p class="text-xs text-[#3A3A3C] leading-relaxed line-clamp-2">
|
||||
你已成功购买「AI 抠图识别 20 次额度包」，现已发放至您的账户，可在衣物上传中直接使用。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表项 4：未读 · 系统通知 (浅灰底 #F2F2F7 灰字 #8E8E93) -->
|
||||
<div class="bg-white rounded-2xl p-3.5 shadow-sm border border-[#E5E5EA]/70 relative overflow-hidden flex gap-3 cursor-pointer hover:bg-slate-50/50 transition">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3.5px] bg-[#007AFF]"></div>
|
||||
<div class="w-10 h-10 rounded-full bg-[#F2F2F7] flex items-center justify-center shrink-0 text-[#636366]">
|
||||
<i class="fa-regular fa-bell text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pr-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] shrink-0"></span>
|
||||
<span class="text-sm font-bold text-[#1C1C1E] tracking-tight truncate">系统版本更新通知</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-[#8E8E93] font-normal shrink-0">昨天 10:15</span>
|
||||
</div>
|
||||
<p class="text-xs text-[#3A3A3C] leading-relaxed line-clamp-2">
|
||||
「纸条AI衣橱」v2.4.0 全新上线：支持穿搭社区多维度标签筛选及衣柜加密分享。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表项 5：已读 · 点赞通知 (无蓝点无边线，整体偏灰) -->
|
||||
<div class="bg-white/80 rounded-2xl p-3.5 shadow-none border border-[#E5E5EA]/50 relative overflow-hidden flex gap-3 cursor-pointer">
|
||||
<div class="w-10 h-10 rounded-full bg-[#FFE8EC]/60 flex items-center justify-center shrink-0 text-[#FF3B30]/70">
|
||||
<i class="fa-regular fa-heart text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pr-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm font-medium text-[#636366] tracking-tight truncate">收到新的点赞</span>
|
||||
<span class="text-[11px] text-[#AEAEB2] font-normal shrink-0">3天前</span>
|
||||
</div>
|
||||
<p class="text-xs text-[#8E8E93] leading-relaxed line-clamp-2">
|
||||
你的穿搭「初春干练西装通勤风」收到了 5 个赞
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表项 6：已读 · 系统通知 -->
|
||||
<div class="bg-white/80 rounded-2xl p-3.5 shadow-none border border-[#E5E5EA]/50 relative overflow-hidden flex gap-3 cursor-pointer">
|
||||
<div class="w-10 h-10 rounded-full bg-[#F2F2F7]/80 flex items-center justify-center shrink-0 text-[#8E8E93]">
|
||||
<i class="fa-regular fa-bell text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pr-1">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm font-medium text-[#636366] tracking-tight truncate">衣柜分享到期提醒</span>
|
||||
<span class="text-[11px] text-[#AEAEB2] font-normal shrink-0">5天前</span>
|
||||
</div>
|
||||
<p class="text-xs text-[#8E8E93] leading-relaxed line-clamp-2">
|
||||
你于 2025.04.08 创建的「春夏全量衣橱」公开快照已到期失效。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表底部触底状态 -->
|
||||
<div class="pt-2 pb-1 text-center">
|
||||
<span class="text-[11px] text-[#AEAEB2]">已加载全部通知</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部 5 项 tabBar (通知为激活选中态 + 红色未读数徽标「7」) -->
|
||||
<div class="bg-white/95 backdrop-blur-md border-t border-[#E5E5EA] pt-2 pb-6 px-3 z-30 shrink-0">
|
||||
<div class="grid grid-cols-5 text-center">
|
||||
<!-- 1. 发现 -->
|
||||
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
|
||||
<i class="fa-regular fa-compass text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">发现</span>
|
||||
</div>
|
||||
<!-- 2. 衣橱 -->
|
||||
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
|
||||
<i class="fa-solid fa-shirt text-[18px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">衣橱</span>
|
||||
</div>
|
||||
<!-- 3. 穿搭 -->
|
||||
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
|
||||
<i class="fa-regular fa-bookmark text-[18px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">穿搭</span>
|
||||
</div>
|
||||
<!-- 4. 通知 (选中态 #007AFF + 铃铛图标 + 红色徽标「7」) -->
|
||||
<div class="flex flex-col items-center justify-center text-[#007AFF] relative">
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-bell text-[19px] mb-1"></i>
|
||||
<!-- 红色未读徽标「7」 -->
|
||||
<span class="absolute -top-1.5 -right-3.5 min-w-[17px] h-[17px] px-1 bg-[#FF3B30] text-white text-[10px] font-bold rounded-full flex items-center justify-center border-2 border-white shadow-xs">
|
||||
7
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold">通知</span>
|
||||
</div>
|
||||
<!-- 5. 我的 -->
|
||||
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
|
||||
<i class="fa-regular fa-user text-[18px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 Home Bar -->
|
||||
<div class="w-32 h-1 bg-black/80 rounded-full mx-auto mt-3"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 2. 状态二：点击进入二级页面「通知详情」 ==================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-4 flex items-center gap-2 text-sm font-bold text-[#1C1C1E]">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
|
||||
<span>二级页面 · 通知详情 (点击后自动标为已读)</span>
|
||||
</div>
|
||||
|
||||
<div class="mockup-frame flex flex-col justify-between select-none">
|
||||
<!-- 顶部二级页面原生导航 -->
|
||||
<div class="bg-white/95 backdrop-blur-md z-30 pt-3 pb-2 border-b border-[#E5E5EA]/80 shrink-0">
|
||||
<div class="px-6 flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<span class="text-[10px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 二级页面带返回箭头 -->
|
||||
<div class="px-4 h-10 flex items-center justify-between relative">
|
||||
<button class="flex items-center text-[#007AFF] text-sm font-medium gap-1 active:opacity-60 transition">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<span class="text-[17px] font-bold text-[#1C1C1E] tracking-tight">通知详情</span>
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="w-[0.5px] h-4 bg-black/15"></div>
|
||||
<i class="fa-regular fa-circle-dot text-xs text-black/70"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情内容卡片 -->
|
||||
<div class="flex-1 overflow-y-auto p-4 hide-scrollbar">
|
||||
|
||||
<div class="bg-white rounded-3xl p-6 shadow-sm border border-[#E5E5EA] flex flex-col items-center text-center">
|
||||
|
||||
<!-- 顶部类型圆形图标 (点赞：浅粉底 #FFE8EC 红字 #FF3B30) -->
|
||||
<div class="w-16 h-16 rounded-full bg-[#FFE8EC] flex items-center justify-center text-[#FF3B30] mb-4 shadow-sm">
|
||||
<i class="fa-solid fa-heart text-2xl"></i>
|
||||
</div>
|
||||
|
||||
<!-- 加粗标题 -->
|
||||
<h2 class="text-lg font-bold text-[#1C1C1E] mb-2">收到新的点赞</h2>
|
||||
|
||||
<!-- 灰色精确时间 -->
|
||||
<span class="text-xs text-[#8E8E93] mb-6 font-mono">2025-04-15 14:32</span>
|
||||
|
||||
<!-- 分割虚线 -->
|
||||
<div class="w-full border-t border-dashed border-[#E5E5EA] mb-6"></div>
|
||||
|
||||
<!-- 完整内容正文 -->
|
||||
<div class="w-full bg-[#F2F2F7] rounded-2xl p-4 text-left mb-6">
|
||||
<p class="text-sm text-[#1C1C1E] leading-relaxed font-normal">
|
||||
你的穿搭<span class="font-bold text-[#007AFF]">「周末休闲通勤套」</span>收到了一个赞。
|
||||
</p>
|
||||
<p class="text-xs text-[#8E8E93] mt-2">
|
||||
提示：持续在社区分享高分穿搭，可获得更多穿搭达人推荐与曝光！
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 关联穿搭卡片快捷入口 (引导跳转第6屏) -->
|
||||
<div class="w-full border border-[#E5E5EA] rounded-2xl p-3 flex items-center justify-between hover:bg-slate-50 transition cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-[#8E8E93] border border-[#E5E5EA]">
|
||||
<i class="fa-solid fa-shirt text-lg text-[#007AFF]"></i>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-xs font-bold text-[#1C1C1E]">周末休闲通勤套</div>
|
||||
<div class="text-[11px] text-[#8E8E93]">包含 3 件单品 · AI 推荐</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-[#007AFF] font-medium flex items-center gap-1">
|
||||
<span>查看穿搭</span>
|
||||
<i class="fa-solid fa-chevron-right text-[10px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 已读状态提示条 -->
|
||||
<div class="mt-4 px-4 py-3 rounded-2xl bg-white/70 border border-[#E5E5EA] flex items-center gap-2.5 text-xs text-[#636366]">
|
||||
<i class="fa-solid fa-circle-check text-emerald-500 text-sm"></i>
|
||||
<span>该条通知已自动标记为已读，返回列表后小蓝点将消失</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 二级页面底部安全区垫高 -->
|
||||
<div class="p-4 bg-white/50 backdrop-blur-xs border-t border-[#E5E5EA]/50 shrink-0">
|
||||
<div class="w-32 h-1 bg-black/80 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 3. 状态三：空态界面 (无消息) ==================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-4 flex items-center gap-2 text-sm font-bold text-[#1C1C1E]">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-400"></span>
|
||||
<span>状态 3 · 空态界面 (暂无通知消息)</span>
|
||||
</div>
|
||||
|
||||
<div class="mockup-frame flex flex-col justify-between select-none">
|
||||
<!-- 顶部微信原生Header -->
|
||||
<div class="bg-white/95 backdrop-blur-md z-30 pt-3 pb-2 border-b border-[#E5E5EA]/80 shrink-0">
|
||||
<div class="px-6 flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<span class="text-[10px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 h-10 flex items-center justify-between relative">
|
||||
<div class="w-16"></div>
|
||||
<span class="text-[17px] font-bold text-[#1C1C1E] tracking-tight">通知</span>
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="w-[0.5px] h-4 bg-black/15"></div>
|
||||
<i class="fa-regular fa-circle-dot text-xs text-black/70"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类筛选标签栏 -->
|
||||
<div class="px-4 pt-2.5 pb-1 flex items-center gap-2">
|
||||
<div class="px-3.5 py-1.5 rounded-full text-xs font-bold bg-[#007AFF] text-white shadow-sm shadow-[#007AFF]/25">
|
||||
全部
|
||||
</div>
|
||||
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366]">
|
||||
点赞
|
||||
</div>
|
||||
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366]">
|
||||
订单
|
||||
</div>
|
||||
<div class="px-3.5 py-1.5 rounded-full text-xs font-medium bg-[#F2F2F7] text-[#636366]">
|
||||
系统
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空态居中展示区 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 text-center">
|
||||
|
||||
<!-- 铃铛线稿插画 (SF Symbols 线性风格) -->
|
||||
<div class="w-24 h-24 rounded-full bg-[#E5E5EA]/60 flex items-center justify-center mb-6 relative">
|
||||
<div class="w-16 h-16 rounded-full bg-white flex items-center justify-center shadow-xs border border-[#E5E5EA]">
|
||||
<i class="fa-regular fa-bell-slash text-3xl text-[#8E8E93]"></i>
|
||||
</div>
|
||||
<!-- 装饰微光点 -->
|
||||
<span class="absolute top-3 right-4 w-2.5 h-2.5 rounded-full bg-[#007AFF]/20 border border-[#007AFF]/40"></span>
|
||||
<span class="absolute bottom-4 left-3 w-2 h-2 rounded-full bg-[#8E8E93]/30"></span>
|
||||
</div>
|
||||
|
||||
<!-- 文案规范对齐 -->
|
||||
<h3 class="text-base font-bold text-[#1C1C1E] mb-2 tracking-tight">还没有消息</h3>
|
||||
<p class="text-xs text-[#8E8E93] leading-relaxed max-w-[220px]">
|
||||
穿搭被点赞、订单动态都会出现在这里
|
||||
</p>
|
||||
|
||||
<!-- 空态引导去发现/穿搭 -->
|
||||
<button class="mt-8 px-6 py-2.5 rounded-full bg-[#007AFF] text-white text-xs font-semibold shadow-sm shadow-[#007AFF]/30 active:opacity-80 transition">
|
||||
去逛逛穿搭社区
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部 5 项 tabBar (空态下无徽标) -->
|
||||
<div class="bg-white/95 backdrop-blur-md border-t border-[#E5E5EA] pt-2 pb-6 px-3 z-30 shrink-0">
|
||||
<div class="grid grid-cols-5 text-center">
|
||||
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
|
||||
<i class="fa-regular fa-compass text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
|
||||
<i class="fa-solid fa-shirt text-[18px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">衣橱</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
|
||||
<i class="fa-regular fa-bookmark text-[18px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">穿搭</span>
|
||||
</div>
|
||||
<!-- 空态时通知 Tab 选中，但徽标隐藏 -->
|
||||
<div class="flex flex-col items-center justify-center text-[#007AFF]">
|
||||
<i class="fa-solid fa-bell text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-bold">通知</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#8E8E93]">
|
||||
<i class="fa-regular fa-user text-[18px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-32 h-1 bg-black/80 rounded-full mx-auto mt-3"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部设计核查规范表 -->
|
||||
<div class="max-w-[1300px] mx-auto bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-[#E5E5EA] mt-12">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></span>
|
||||
<h2 class="text-base font-bold text-[#1C1C1E]">第 10 屏 通知规范设计核查表与交互约束</h2>
|
||||
<span class="text-xs text-[#8E8E93]">（严格遵守产品约束与微信小程序规范）</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-xs">
|
||||
<div class="bg-[#F2F2F7] rounded-2xl p-4 border border-[#E5E5EA]">
|
||||
<div class="font-bold text-[#1C1C1E] mb-1.5 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-ban text-[#FF3B30]"></i> 1. 明确负向约束恪守
|
||||
</div>
|
||||
<p class="text-[#636366] leading-relaxed">
|
||||
界面中<strong>绝不展示发送者头像</strong>（仅保留左侧分类圆形图标），且<strong>不提供「全部已读」入口</strong>，分类栏仅提供「全部、点赞、订单、系统」四项轻量切换。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#F2F2F7] rounded-2xl p-4 border border-[#E5E5EA]">
|
||||
<div class="font-bold text-[#1C1C1E] mb-1.5 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-circle text-[#007AFF]"></i> 2. 未读与已读强弱对比
|
||||
</div>
|
||||
<p class="text-[#636366] leading-relaxed">
|
||||
未读项在标题左侧配置 <strong>6pt 系统蓝小圆点</strong>，卡片左边缘有一条 3.5px 极浅系统蓝高亮线；已读项移除圆点及边线，文字与图标整体转为柔和灰阶，层级分明。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#F2F2F7] rounded-2xl p-4 border border-[#E5E5EA]">
|
||||
<div class="font-bold text-[#1C1C1E] mb-1.5 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-icons text-[#FF2D55]"></i> 3. 40pt 类型图标配色体系
|
||||
</div>
|
||||
<p class="text-[#636366] leading-relaxed">
|
||||
点赞为心形（浅粉底 <code class="text-[#FF3B30] font-mono">#FFE8EC</code> 红字 <code class="text-[#FF3B30] font-mono">#FF3B30</code>）、订单为票据（淡蓝底 <code class="text-[#007AFF] font-mono">#E8F2FF</code> 系统蓝）、系统为铃铛（浅灰底 <code class="text-[#8E8E93] font-mono">#F2F2F7</code> 灰字）。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#F2F2F7] rounded-2xl p-4 border border-[#E5E5EA]">
|
||||
<div class="font-bold text-[#1C1C1E] mb-1.5 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-bell text-[#007AFF]"></i> 4. tabBar 联动与二级页面
|
||||
</div>
|
||||
<p class="text-[#636366] leading-relaxed">
|
||||
tabBar 通知图标右上角显示红色未读数徽标「7」；点击单条可平滑推入「通知详情」二级页面，进入即刻完成状态回写标记为已读。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 237 KiB |
@@ -1,610 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第11屏 额度与会员商城</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&family=SF+Pro+Text:wght@400;500;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
|
||||
background-color: #F8F9FA;
|
||||
color: #1C1C1E;
|
||||
margin: 0;
|
||||
padding: 32px 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.phone-container {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
border-radius: 44px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #F2F2F7;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 10px #1C1C1E, 0 0 0 12px #2C2C2E;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 微信胶囊占位 */
|
||||
.capsule {
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.capsule-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.capsule-line {
|
||||
width: 0.5px;
|
||||
height: 14px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.capsule-ring {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1.5px solid #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.border-hairline {
|
||||
border: 0.5px solid #E5E5EA;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col items-center">
|
||||
|
||||
<!-- 画板主标题与设计规范概要 Header -->
|
||||
<div class="w-full max-w-5xl mb-8 bg-white p-6 rounded-2xl border-hairline shadow-sm">
|
||||
<div class="flex items-center justify-between flex-wrap 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-xl font-bold text-gray-900 tracking-tight">第 11 屏 ｜ 额度与会员商城（全状态画板）</h1>
|
||||
<span class="text-xs px-2.5 py-0.5 rounded-full bg-blue-50 text-[#007AFF] font-medium border border-blue-200">微信小程序二级页 · 375 × 812 pt</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4 text-xs text-gray-500 font-mono">
|
||||
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>系统蓝 #007AFF</span>
|
||||
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></span>警示橙 #FF9500</span>
|
||||
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-[#E8F2FF]"></span>淡蓝卡 #E8F2FF</span>
|
||||
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-[#F2F2F7]"></span>底色 #F2F2F7</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-3 border-t border-gray-100 text-xs text-gray-600 flex flex-wrap items-center gap-y-2 gap-x-6">
|
||||
<span class="flex items-center gap-1"><i class="fa-solid fa-check text-emerald-500"></i> 严格负向约束：商品绝不展示图片与标签，只呈现名称、描述、售价与原价</span>
|
||||
<span class="flex items-center gap-1"><i class="fa-solid fa-check text-emerald-500"></i> SF Symbols 线性风格图标体系（皇冠/相机/星星/衣柜/衣架）</span>
|
||||
<span class="flex items-center gap-1"><i class="fa-solid fa-check text-emerald-500"></i> 包含：商城全量服务、2×2额度网格预警、以及「订单确认」收银级二级子页面</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原型画板容器：主页 + 订单确认子页 -->
|
||||
<div class="flex flex-wrap justify-center gap-10 items-start">
|
||||
|
||||
<!-- ① 画板 1：额度与会员主页（已开通会员状态 + 低额度预警 + 完整商品库） -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-xs font-semibold text-gray-500 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
|
||||
<span>状态 1 · 额度与会员商城首页（二级页 · 375×812）</span>
|
||||
</div>
|
||||
|
||||
<div class="phone-container">
|
||||
<!-- iOS 顶部状态栏 -->
|
||||
<div class="h-11 px-6 flex justify-between items-end pb-1.5 text-black text-xs font-semibold select-none">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-xs">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<span class="text-[10px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信小程序原生导航条 (含返回键与胶囊) -->
|
||||
<div class="h-11 px-4 flex items-center justify-between border-b border-[#E5E5EA]/40 bg-[#F2F2F7]">
|
||||
<div class="flex items-center space-x-1 text-[#007AFF] active:opacity-60 cursor-pointer">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
<span class="text-[15px] font-normal tracking-tight">我的</span>
|
||||
</div>
|
||||
<span class="text-[17px] font-semibold text-gray-900 pr-2">额度与会员</span>
|
||||
<!-- 右上胶囊占位 -->
|
||||
<div class="capsule">
|
||||
<div class="capsule-dot"></div>
|
||||
<div class="capsule-line"></div>
|
||||
<div class="capsule-ring"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容滚动区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar px-4 pt-3 pb-8 space-y-4">
|
||||
|
||||
<!-- 1. 顶部会员卡（淡蓝 #E8F2FF 底、系统蓝文字圆角大卡 16pt） -->
|
||||
<div class="bg-[#E8F2FF] rounded-[16px] p-4 border border-[#BBD7FF] flex items-center justify-between shadow-sm">
|
||||
<div class="flex items-center space-x-3.5">
|
||||
<!-- 皇冠线性图标 -->
|
||||
<div class="w-11 h-11 rounded-full bg-white flex items-center justify-center text-[#007AFF] shadow-sm">
|
||||
<i class="fa-solid fa-crown text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<h2 class="text-[17px] font-bold text-[#007AFF]">月度会员</h2>
|
||||
<span class="text-[10px] px-1.5 py-0.2 bg-[#007AFF] text-white rounded font-medium">VIP</span>
|
||||
</div>
|
||||
<p class="text-[12px] text-[#8E8E93] mt-0.5">有效期至 2025-05-15</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 立即续费 描边按钮 -->
|
||||
<button class="px-3.5 py-1.5 rounded-full border border-[#007AFF] text-[#007AFF] text-[13px] font-medium bg-white/70 active:bg-blue-50">
|
||||
立即续费
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 2. 「我的额度」2×2 网格 -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2 px-1">
|
||||
<span class="text-[14px] font-semibold text-gray-800">我的额度</span>
|
||||
<span class="text-[11px] text-[#8E8E93]">剩余 < 20% 时高亮预警</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2.5">
|
||||
|
||||
<!-- 小卡 1: 上传额度 (剩余 13/20，正常比例) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex flex-col justify-between">
|
||||
<div>
|
||||
<span class="text-[12px] text-[#8E8E93] font-medium">上传额度</span>
|
||||
<div class="mt-1 flex items-baseline gap-1">
|
||||
<span class="text-[24px] font-bold tracking-tight text-gray-900 font-mono">13</span>
|
||||
<span class="text-[13px] text-[#8E8E93] font-mono">/ 20</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 细进度条 (已用比例，系统蓝) -->
|
||||
<div class="mt-3">
|
||||
<div class="w-full bg-[#E5E5EA] h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-[#007AFF] h-full rounded-full" style="width: 65%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小卡 2: AI 推荐额度 (剩余 18/50) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex flex-col justify-between">
|
||||
<div>
|
||||
<span class="text-[12px] text-[#8E8E93] font-medium">AI 推荐额度</span>
|
||||
<div class="mt-1 flex items-baseline gap-1">
|
||||
<span class="text-[24px] font-bold tracking-tight text-gray-900 font-mono">18</span>
|
||||
<span class="text-[13px] text-[#8E8E93] font-mono">/ 50</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 细进度条 (系统蓝) -->
|
||||
<div class="mt-3">
|
||||
<div class="w-full bg-[#E5E5EA] h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-[#007AFF] h-full rounded-full" style="width: 36%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小卡 3: 社区分享额度 (低额度：剩余 2/20，低于 20% 转警示橙 #FF9500) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex flex-col justify-between relative overflow-hidden">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-[12px] text-[#8E8E93] font-medium">社区分享额度</span>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#FF9500]"></span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-baseline gap-1">
|
||||
<span class="text-[24px] font-bold tracking-tight text-[#FF9500] font-mono">2</span>
|
||||
<span class="text-[13px] text-[#8E8E93] font-mono">/ 20</span>
|
||||
</div>
|
||||
<!-- 警示橙进度条 -->
|
||||
<div class="mt-3">
|
||||
<div class="w-full bg-[#E5E5EA] h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-[#FF9500] h-full rounded-full" style="width: 10%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小卡 4: 衣柜分享额度 (剩余 4/10) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex flex-col justify-between">
|
||||
<div>
|
||||
<span class="text-[12px] text-[#8E8E93] font-medium">衣柜分享额度</span>
|
||||
<div class="mt-1 flex items-baseline gap-1">
|
||||
<span class="text-[24px] font-bold tracking-tight text-gray-900 font-mono">4</span>
|
||||
<span class="text-[13px] text-[#8E8E93] font-mono">/ 10</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 细进度条 (系统蓝) -->
|
||||
<div class="mt-3">
|
||||
<div class="w-full bg-[#E5E5EA] h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-[#007AFF] h-full rounded-full" style="width: 40%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 「额度明细」入口行（右侧箭头，进入流水明细） -->
|
||||
<div class="bg-white rounded-[16px] px-4 py-3.5 border-hairline shadow-sm flex items-center justify-between cursor-pointer active:bg-gray-50">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<i class="fa-regular fa-file-lines text-[#007AFF] text-base"></i>
|
||||
<span class="text-[14px] font-medium text-gray-900">额度明细</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1.5 text-[#8E8E93]">
|
||||
<span class="text-[12px]">近30天消耗流水</span>
|
||||
<i class="fa-solid fa-chevron-right text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. 「额度与会员充值」商品区 -->
|
||||
<div class="space-y-3 pt-1">
|
||||
<span class="text-[14px] font-semibold text-gray-800 px-1">额度与会员充值</span>
|
||||
|
||||
<!-- 分类筛选横滑标签条 -->
|
||||
<div class="flex space-x-2 overflow-x-auto no-scrollbar pb-1">
|
||||
<button class="px-3.5 py-1.5 rounded-full bg-[#007AFF] text-white text-[12px] font-medium shrink-0 shadow-sm">全部</button>
|
||||
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">会员包</button>
|
||||
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">上传包</button>
|
||||
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">AI 推荐包</button>
|
||||
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">衣柜分享包</button>
|
||||
<button class="px-3 py-1.5 rounded-full bg-white text-gray-600 border-hairline text-[12px] font-medium shrink-0">搭配分享包</button>
|
||||
</div>
|
||||
|
||||
<!-- 商品列表：白底圆角卡片，严格不展示图片与标签，只呈现名称、描述、售价、原价与购买按钮 -->
|
||||
<div class="space-y-2.5">
|
||||
|
||||
<!-- 商品 1: 会员 (皇冠 crown) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<!-- 类型图标：会员 = 皇冠 -->
|
||||
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
|
||||
<i class="fa-solid fa-crown text-[15px]"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">月度会员</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5">开通后 30 天内无限使用 AI 推荐</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end shrink-0 pl-2">
|
||||
<div class="flex items-baseline space-x-1">
|
||||
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥19.00</span>
|
||||
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥29.00</span>
|
||||
</div>
|
||||
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
|
||||
购买
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品 2: 上传包 (相机 camera) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<!-- 类型图标：上传 = 相机 -->
|
||||
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
|
||||
<i class="fa-solid fa-camera text-[15px]"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">AI识图上传 20次包</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5">智能精准抠图与属性标签解析</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end shrink-0 pl-2">
|
||||
<div class="flex items-baseline space-x-1">
|
||||
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥6.00</span>
|
||||
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥10.00</span>
|
||||
</div>
|
||||
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
|
||||
购买
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品 3: AI推荐包 (星星 sparkles) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<!-- 类型图标：AI = 星星 sparkles -->
|
||||
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-[15px]"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">AI 穿搭推荐 30次包</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5">根据天气与场景一键定制穿搭方案</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end shrink-0 pl-2">
|
||||
<div class="flex items-baseline space-x-1">
|
||||
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥9.90</span>
|
||||
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥15.00</span>
|
||||
</div>
|
||||
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
|
||||
购买
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品 4: 衣柜分享包 (衣柜 warehouse/box) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<!-- 类型图标：衣柜分享 = 衣柜 -->
|
||||
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
|
||||
<i class="fa-solid fa-door-closed text-[15px]"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">衣柜分享额度 5次包</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5">支持生成整橱与精选快照给好友</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end shrink-0 pl-2">
|
||||
<div class="flex items-baseline space-x-1">
|
||||
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥3.00</span>
|
||||
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥5.00</span>
|
||||
</div>
|
||||
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
|
||||
购买
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品 5: 搭配分享包 (衣架 hanger) -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 border-hairline shadow-sm flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<!-- 类型图标：搭配分享 = 衣架 hanger -->
|
||||
<div class="w-10 h-10 rounded-full bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0">
|
||||
<i class="fa-solid fa-shirt text-[15px]"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-[15px] font-semibold text-gray-900 leading-tight">社区搭配分享 10次包</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5">将个人穿搭方案公开发布至社区展示</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end shrink-0 pl-2">
|
||||
<div class="flex items-baseline space-x-1">
|
||||
<span class="text-[15px] font-bold text-[#007AFF] font-mono leading-none">¥4.50</span>
|
||||
<span class="text-[11px] text-[#8E8E93] line-through font-mono">¥8.00</span>
|
||||
</div>
|
||||
<button class="mt-1.5 px-3 py-1 bg-[#007AFF] text-white text-[11px] font-medium rounded-full active:opacity-80">
|
||||
购买
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部 Home Indicator -->
|
||||
<div class="h-6 w-full flex justify-center items-center bg-[#F2F2F7]">
|
||||
<div class="w-32 h-1 bg-black/25 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ② 画板 2：订单确认子页面（点击购买后进入） -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-xs font-semibold text-gray-500 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-[#34C759]"></span>
|
||||
<span>状态 2 · 二级子页面：订单确认（375×812）</span>
|
||||
</div>
|
||||
|
||||
<div class="phone-container">
|
||||
<!-- iOS 状态栏 -->
|
||||
<div class="h-11 px-6 flex justify-between items-end pb-1.5 text-black text-xs font-semibold select-none">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-xs">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<span class="text-[10px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信小程序原生导航栏 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between border-b border-[#E5E5EA]/40 bg-[#F2F2F7]">
|
||||
<div class="flex items-center space-x-1 text-[#007AFF] active:opacity-60 cursor-pointer">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
<span class="text-[15px] font-normal tracking-tight">额度与会员</span>
|
||||
</div>
|
||||
<span class="text-[17px] font-semibold text-gray-900 pr-2">订单确认</span>
|
||||
<!-- 右上胶囊 -->
|
||||
<div class="capsule">
|
||||
<div class="capsule-dot"></div>
|
||||
<div class="capsule-line"></div>
|
||||
<div class="capsule-ring"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar px-4 pt-4 pb-6 space-y-4">
|
||||
|
||||
<!-- 支付金额展示核心区 -->
|
||||
<div class="bg-white rounded-[16px] p-5 border-hairline shadow-sm text-center">
|
||||
<span class="text-xs text-[#8E8E93] font-medium">实付金额</span>
|
||||
<div class="text-[34px] font-bold text-gray-900 font-mono tracking-tight mt-1">
|
||||
<span class="text-[22px] font-sans mr-0.5">¥</span>19.00
|
||||
</div>
|
||||
<div class="inline-flex items-center gap-1.5 mt-2 px-2.5 py-1 bg-emerald-50 text-[#34C759] text-[11px] rounded-full border border-emerald-100">
|
||||
<i class="fa-solid fa-shield-halved text-[10px]"></i>
|
||||
<span>微信支付官方安全环境</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品摘要卡（名称 + 权益说明） -->
|
||||
<div class="bg-white rounded-[16px] p-4 border-hairline shadow-sm">
|
||||
<div class="flex items-center justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-[13px] font-semibold text-gray-900">购买商品明细</span>
|
||||
<span class="text-[11px] text-[#8E8E93] font-mono">单号: ZT202504159821</span>
|
||||
</div>
|
||||
|
||||
<!-- 商品名与金额 -->
|
||||
<div class="pt-3.5 flex items-start justify-between">
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-[#E8F2FF] flex items-center justify-center text-[#007AFF] shrink-0 mt-0.5">
|
||||
<i class="fa-solid fa-crown text-base"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-[15px] font-semibold text-gray-900">月度会员服务</h4>
|
||||
<p class="text-[12px] text-[#8E8E93] mt-0.5">服务期限：30天（支付成功后即时生效）</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-[15px] font-bold text-gray-900 font-mono">¥19.00</div>
|
||||
<div class="text-[11px] text-[#8E8E93] line-through font-mono">¥29.00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 权益说明模块 -->
|
||||
<div class="mt-4 p-3 bg-[#F2F2F7] rounded-[12px] text-[12px] text-gray-700 space-y-1.5">
|
||||
<div class="text-[12px] font-semibold text-gray-900 mb-1">包含尊享会员权益：</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa-solid fa-circle-check text-[#007AFF] text-xs"></i>
|
||||
<span>无限次使用 AI 智能穿搭推荐</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa-solid fa-circle-check text-[#007AFF] text-xs"></i>
|
||||
<span>每月额外赠送 50 次高清抠图上传额度</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa-solid fa-circle-check text-[#007AFF] text-xs"></i>
|
||||
<span>专属会员身份标识与好友衣橱全量快照权限</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付方式与费用明细 -->
|
||||
<div class="bg-white rounded-[16px] p-4 border-hairline shadow-sm space-y-3">
|
||||
<div class="flex justify-between items-center text-[13px]">
|
||||
<span class="text-gray-500">商品总价</span>
|
||||
<span class="text-gray-900 font-mono">¥29.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-[13px]">
|
||||
<span class="text-gray-500">限时立减优惠</span>
|
||||
<span class="text-[#FF3B30] font-mono">-¥10.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-[13px] pt-2 border-t border-gray-100">
|
||||
<span class="text-gray-900 font-medium">支付方式</span>
|
||||
<div class="flex items-center space-x-1.5 text-gray-800">
|
||||
<i class="fa-brands fa-weixin text-[#07C160] text-base"></i>
|
||||
<span class="font-medium">微信支付</span>
|
||||
<i class="fa-solid fa-circle-check text-[#007AFF] text-xs ml-1"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购买须知提示 -->
|
||||
<p class="text-[11px] text-[#8E8E93] text-center px-4 leading-relaxed">
|
||||
点击「微信支付」即代表你同意《会员增值服务协议》。充值额度与会员服务为虚拟数字化商品，开通后不支持退款。
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部固定栏（安全区上方）：金额与微信支付按钮 -->
|
||||
<div class="p-4 bg-white border-t border-[#E5E5EA] shadow-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-xs text-gray-500">实付应结：</span>
|
||||
<div class="text-[17px] font-bold text-[#007AFF] font-mono">
|
||||
实付 <span class="text-[20px]">¥19.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full h-12 bg-[#007AFF] hover:bg-blue-600 active:scale-[0.99] transition-all rounded-[14px] text-white font-semibold text-[16px] flex items-center justify-center space-x-2 shadow-sm">
|
||||
<i class="fa-brands fa-weixin text-lg"></i>
|
||||
<span>微信支付</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Home Indicator -->
|
||||
<div class="h-6 w-full flex justify-center items-center bg-white">
|
||||
<div class="w-32 h-1 bg-black/25 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ③ 附带状态卡：非会员状态下的顶部会员卡设计（状态对比） -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-xs font-semibold text-gray-500 mb-3 flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-gray-400"></span>
|
||||
<span>状态 3 · 状态对比：非会员用户视角的顶部会员卡</span>
|
||||
</div>
|
||||
|
||||
<div class="w-[375px] bg-white p-5 rounded-[20px] border-hairline shadow-sm space-y-4">
|
||||
<div class="text-[12px] text-gray-500 font-medium">若当前用户为普通未付费用户，顶部展示状态如下：</div>
|
||||
|
||||
<!-- 非会员展示卡 -->
|
||||
<div class="bg-gradient-to-r from-gray-50 to-blue-50/40 rounded-[16px] p-4 border border-dashed border-[#BBD7FF] flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3.5">
|
||||
<div class="w-11 h-11 rounded-full bg-gray-100 flex items-center justify-center text-gray-400">
|
||||
<i class="fa-solid fa-crown text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-[15px] font-bold text-gray-800">开通会员</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5">解锁更多 AI 与上传权益</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 立即开通 系统蓝按钮 -->
|
||||
<button class="px-3.5 py-1.5 rounded-full bg-[#007AFF] text-white text-[13px] font-medium active:opacity-80 shadow-sm">
|
||||
立即开通
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#F2F2F7] rounded-xl p-3 text-[11px] text-gray-600 space-y-1">
|
||||
<div class="font-semibold text-gray-800">业务映射机制：</div>
|
||||
<div>• 点击「立即开通」后将平滑呼起右侧「订单确认」页面完成支付。</div>
|
||||
<div>• 支付完成后，卡片切换为淡蓝 #E8F2FF 底，并展示有效期至 30 天后。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 设计核查表与业务规范落实 Footer -->
|
||||
<div class="w-full max-w-5xl mt-12 bg-white p-6 rounded-2xl border-hairline shadow-sm">
|
||||
<div class="text-sm font-bold text-gray-900 mb-3 flex items-center gap-2">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></span>
|
||||
<span>第 11 屏 额度与会员商城设计核查表与规则映射</span>
|
||||
<span class="text-xs font-normal text-gray-500">（严格遵守产品约束与微信小程序 HIG）</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-xs text-gray-600">
|
||||
<div class="p-3 bg-[#F2F2F7] rounded-xl">
|
||||
<div class="font-semibold text-gray-800 mb-1 text-[#FF3B30] flex items-center gap-1">
|
||||
<i class="fa-solid fa-ban"></i> 1. 明确负向约束恪守
|
||||
</div>
|
||||
商品卡彻底移除任何形式的商品展示图片与标签，仅展示名称、精简描述、加粗系统蓝售价「¥ + 两位小数」与灰色删除线原价。
|
||||
</div>
|
||||
<div class="p-3 bg-[#F2F2F7] rounded-xl">
|
||||
<div class="font-semibold text-gray-800 mb-1 text-[#007AFF] flex items-center gap-1">
|
||||
<i class="fa-solid fa-shapes"></i> 2. 2×2 额度网格与预警
|
||||
</div>
|
||||
上传、AI推荐、社区分享、衣柜分享 4 卡。展示「剩余/总量」等宽大字；进度条默认系统蓝，剩余低于 20% 时自动转为警示橙 #FF9500。
|
||||
</div>
|
||||
<div class="p-3 bg-[#F2F2F7] rounded-xl">
|
||||
<div class="font-semibold text-gray-800 mb-1 text-gray-800 flex items-center gap-1">
|
||||
<i class="fa-solid fa-icons"></i> 3. SF Symbols 线性映射
|
||||
</div>
|
||||
严格对齐：会员=皇冠（crown）、上传=相机（camera）、AI=星星（sparkles）、衣柜分享=衣柜（closet）、搭配分享=衣架（hanger）。
|
||||
</div>
|
||||
<div class="p-3 bg-[#F2F2F7] rounded-xl">
|
||||
<div class="font-semibold text-gray-800 mb-1 text-[#34C759] flex items-center gap-1">
|
||||
<i class="fa-solid fa-credit-card"></i> 4. 订单确认二级链路
|
||||
</div>
|
||||
包含单号、商品摘要卡、权益清单、优惠核销、实付金额与固定底部「微信支付」主操作，形成真实完整的变现转化漏斗。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 489 KiB |
@@ -1,547 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第12屏 订单（全状态画板）</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+Display:wght@400;500;600;700&family=SF+Pro+Text:wght@400;500;600&display=swap');
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #0d1117;
|
||||
color: #1c1c1e;
|
||||
margin: 0;
|
||||
padding: 40px 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.mono-num {
|
||||
font-family: -apple-system, "SF Pro Display", "SF Pro Text", monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.device-shell {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
border-radius: 44px;
|
||||
box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45), 0 0 0 10px #1c1c1e, 0 0 0 12px #2c2c2e;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #F2F2F7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.capsule-pill {
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.18);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.hairline-b {
|
||||
border-bottom: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.hairline-t {
|
||||
border-top: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.hairline-all {
|
||||
border: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.safe-bottom {
|
||||
padding-bottom: 34px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col items-center">
|
||||
|
||||
<!-- 顶部设计规范标头 -->
|
||||
<header class="w-full max-w-[1580px] mb-8 bg-[#161b22] border border-[#30363d] rounded-2xl p-6 text-white shadow-xl">
|
||||
<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] inline-block ring-4 ring-[#007AFF]/20"></span>
|
||||
<h1 class="text-xl font-semibold tracking-tight text-white">第 12 屏 ｜ 我的订单（全状态高保真画板）</h1>
|
||||
<span class="bg-[#007AFF]/20 text-[#007AFF] text-xs font-semibold px-2.5 py-1 rounded-full border border-[#007AFF]/30">微信小程序二级页 · 375 × 812 pt</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-400 font-mono">
|
||||
<span class="flex items-center gap-1.5"><i class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></i> 警示橙 #FF9500 (待支付)</span>
|
||||
<span class="flex items-center gap-1.5"><i class="w-2.5 h-2.5 rounded-full bg-[#34C759]"></i> 成功绿 #34C759 (已支付)</span>
|
||||
<span class="flex items-center gap-1.5"><i class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></i> 系统蓝 #007AFF (已退款)</span>
|
||||
<span class="flex items-center gap-1.5"><i class="w-2.5 h-2.5 rounded-full bg-[#8E8E93]"></i> 系统灰 #8E8E93 (已过期/取消)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-[#30363d]/70 text-xs text-gray-300 flex flex-wrap gap-x-8 gap-y-2">
|
||||
<div class="flex items-center gap-2"><i class="fa-solid fa-check text-green-400"></i> SF Symbols线性图标体系（订单：doc.text）</div>
|
||||
<div class="flex items-center gap-2"><i class="fa-solid fa-check text-green-400"></i> 金额展示等宽数字「¥ + 两位小数」</div>
|
||||
<div class="flex items-center gap-2"><i class="fa-solid fa-check text-green-400"></i> 6种订单全状态（待支付、已支付、已取消、已过期、已退款、退款中）</div>
|
||||
<div class="flex items-center gap-2"><i class="fa-solid fa-check text-green-400"></i> 完整映射：主列表 + 微信支付半屏 + 申请退款半屏 + 优雅空态</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 4联画板展示区 -->
|
||||
<main class="w-full max-w-[1580px] flex flex-wrap justify-center gap-8 items-start">
|
||||
|
||||
<!-- 画板 1: 订单列表主页（包含各种状态与交互按钮） -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="text-sm font-semibold text-gray-300">状态 1 · 订单列表主页（多态混排）</span>
|
||||
</div>
|
||||
|
||||
<div class="device-shell flex flex-col justify-between">
|
||||
<!-- 顶部固定区域：状态栏 + 原生导航栏 + 筛选标签 -->
|
||||
<div class="bg-white/95 backdrop-blur-md z-20 hairline-b shrink-0">
|
||||
<!-- 状态栏 -->
|
||||
<div class="h-11 px-6 flex justify-between items-end pb-1.5 select-none">
|
||||
<span class="text-[14px] font-semibold tracking-tight text-black">9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-black text-[12px]">
|
||||
<i class="fa-solid fa-signal text-[11px]"></i>
|
||||
<span class="text-[10px] font-bold">5G</span>
|
||||
<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">
|
||||
<div class="flex items-center text-[#007AFF] text-[16px] active:opacity-60 cursor-pointer">
|
||||
<i class="fa-solid fa-chevron-left text-[15px] mr-1"></i>
|
||||
<span class="text-[15px]">我的</span>
|
||||
</div>
|
||||
<div class="absolute left-1/2 -translate-x-1/2 font-semibold text-[17px] text-black tracking-tight">
|
||||
我的订单
|
||||
</div>
|
||||
<!-- 右上角微信小程序胶囊 -->
|
||||
<div class="capsule-pill w-[87px] h-[32px] rounded-full flex items-center justify-evenly px-1">
|
||||
<div class="w-4 h-4 flex items-center justify-center cursor-pointer">
|
||||
<span class="w-1 h-1 rounded-full bg-black"></span>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-black mx-0.5"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-black"></span>
|
||||
</div>
|
||||
<div class="w-[1px] h-4 bg-gray-300"></div>
|
||||
<div class="w-4 h-4 flex items-center justify-center cursor-pointer">
|
||||
<span class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态筛选标签栏 (横滑) -->
|
||||
<div class="px-3 pt-2 pb-2.5 flex items-center space-x-2 overflow-x-auto no-scrollbar">
|
||||
<button class="px-3.5 py-1.5 rounded-full bg-[#007AFF] text-white text-[13px] font-medium shrink-0 shadow-sm">全部</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0 relative">
|
||||
待支付
|
||||
<span class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-[#FF9500] rounded-full ring-2 ring-white"></span>
|
||||
</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已支付</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已退款</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已取消</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已过期</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单列表滚动容器 -->
|
||||
<div class="flex-1 overflow-y-auto px-4 py-3 space-y-3.5 no-scrollbar safe-bottom">
|
||||
|
||||
<!-- 1. 待支付订单卡片 -->
|
||||
<div class="bg-white rounded-[16px] p-4 shadow-sm hairline-all">
|
||||
<!-- 头部：订单尾号 + 状态徽标 -->
|
||||
<div class="flex items-center justify-between hairline-b pb-2.5 mb-3">
|
||||
<div class="flex items-center space-x-1.5 text-[#8E8E93] text-[12px]">
|
||||
<i class="fa-regular fa-file-lines text-[13px]"></i>
|
||||
<span class="mono-num">订单号 …8b29</span>
|
||||
</div>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-[#FF9500]/10 text-[#FF9500] border border-[#FF9500]/25">
|
||||
待支付
|
||||
</span>
|
||||
</div>
|
||||
<!-- 商品行 -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-[16px] font-semibold text-[#1C1C1E]">月度会员</h4>
|
||||
<p class="text-[12px] text-[#8E8E93] mt-0.5">30 天无限使用 AI 推荐与尊享权益</p>
|
||||
</div>
|
||||
<span class="text-[12px] text-[#8E8E93] mono-num">x 1</span>
|
||||
</div>
|
||||
<!-- 金额与按钮行 -->
|
||||
<div class="mt-3.5 pt-3 hairline-t flex items-center justify-between">
|
||||
<div class="text-[13px] text-[#1C1C1E] font-medium">
|
||||
实付 <span class="mono-num text-[17px] font-bold text-[#1C1C1E]">¥19.00</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-[11px] text-[#8E8E93] mono-num">剩余 14:32</span>
|
||||
<button class="px-2.5 py-1 rounded-[8px] border border-[#E5E5EA] text-[#8E8E93] text-[12px] font-medium active:bg-gray-100">取消订单</button>
|
||||
<button class="px-3.5 py-1 rounded-[8px] bg-[#007AFF] text-white text-[12px] font-semibold shadow-sm active:bg-[#0062cc]">去支付</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 已支付订单卡片（带申请退款按钮） -->
|
||||
<div class="bg-white rounded-[16px] p-4 shadow-sm hairline-all">
|
||||
<!-- 头部 -->
|
||||
<div class="flex items-center justify-between hairline-b pb-2.5 mb-3">
|
||||
<div class="flex items-center space-x-1.5 text-[#8E8E93] text-[12px]">
|
||||
<i class="fa-regular fa-file-lines text-[13px]"></i>
|
||||
<span class="mono-num">订单号 …9c41</span>
|
||||
</div>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-[#34C759]/10 text-[#34C759] border border-[#34C759]/25">
|
||||
已支付
|
||||
</span>
|
||||
</div>
|
||||
<!-- 商品行 -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-[16px] font-semibold text-[#1C1C1E]">AI识图上传 20次包</h4>
|
||||
<p class="text-[12px] text-[#8E8E93] mt-0.5">永久有效 · 支持高清智能抠图属性识别</p>
|
||||
</div>
|
||||
<span class="text-[12px] text-[#8E8E93] mono-num">x 1</span>
|
||||
</div>
|
||||
<!-- 金额与按钮行 -->
|
||||
<div class="mt-3.5 pt-3 hairline-t flex items-center justify-between">
|
||||
<div class="text-[13px] text-[#1C1C1E] font-medium">
|
||||
实付 <span class="mono-num text-[17px] font-bold text-[#1C1C1E]">¥6.00</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="px-3 py-1 rounded-[8px] border border-[#E5E5EA] text-[#1C1C1E] text-[12px] font-medium active:bg-gray-100">申请退款</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 已退款订单卡片（无按钮） -->
|
||||
<div class="bg-white rounded-[16px] p-4 shadow-sm hairline-all">
|
||||
<!-- 头部 -->
|
||||
<div class="flex items-center justify-between hairline-b pb-2.5 mb-3">
|
||||
<div class="flex items-center space-x-1.5 text-[#8E8E93] text-[12px]">
|
||||
<i class="fa-regular fa-file-lines text-[13px]"></i>
|
||||
<span class="mono-num">订单号 …7a10</span>
|
||||
</div>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-[#007AFF]/10 text-[#007AFF] border border-[#007AFF]/25">
|
||||
已退款
|
||||
</span>
|
||||
</div>
|
||||
<!-- 商品行 -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-[16px] font-semibold text-[#1C1C1E]">AI 推荐额度 50次包</h4>
|
||||
<p class="text-[12px] text-[#8E8E93] mt-0.5">退款金额原路退回至微信零钱账户</p>
|
||||
</div>
|
||||
<span class="text-[12px] text-[#8E8E93] mono-num">x 1</span>
|
||||
</div>
|
||||
<!-- 金额与按钮行（无按钮） -->
|
||||
<div class="mt-3.5 pt-3 hairline-t flex items-center justify-between">
|
||||
<div class="text-[13px] text-[#1C1C1E] font-medium">
|
||||
实付 <span class="mono-num text-[17px] font-bold text-[#1C1C1E]">¥12.00</span>
|
||||
</div>
|
||||
<span class="text-[12px] text-[#8E8E93]">已全额原路返还</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. 已取消订单卡片（无按钮） -->
|
||||
<div class="bg-white rounded-[16px] p-4 shadow-sm hairline-all opacity-85">
|
||||
<div class="flex items-center justify-between hairline-b pb-2.5 mb-3">
|
||||
<div class="flex items-center space-x-1.5 text-[#8E8E93] text-[12px]">
|
||||
<i class="fa-regular fa-file-lines text-[13px]"></i>
|
||||
<span class="mono-num">订单号 …3f92</span>
|
||||
</div>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-[#E5E5EA] text-[#8E8E93]">
|
||||
已取消
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-[16px] font-semibold text-[#1C1C1E]">衣柜分享 10次包</h4>
|
||||
<p class="text-[12px] text-[#8E8E93] mt-0.5">用户手动取消订单</p>
|
||||
</div>
|
||||
<span class="text-[12px] text-[#8E8E93] mono-num">x 1</span>
|
||||
</div>
|
||||
<div class="mt-3.5 pt-3 hairline-t flex items-center justify-between">
|
||||
<div class="text-[13px] text-[#8E8E93] font-medium">
|
||||
实付 <span class="mono-num text-[16px] font-bold text-[#8E8E93]">¥4.00</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-[#8E8E93]">交易已关闭</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<div class="text-center py-2 text-[11px] text-[#8E8E93]">
|
||||
仅展示近 1 年内生成的有效订单
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 画板 2: 点击「去支付」底部呼起微信支付面板 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-[#34C759]"></span>
|
||||
<span class="text-sm font-semibold text-gray-300">状态 2 · 底部呼起「微信支付面板」</span>
|
||||
</div>
|
||||
|
||||
<div class="device-shell flex flex-col justify-between">
|
||||
<!-- 背景层（带遮罩模糊） -->
|
||||
<div class="absolute inset-0 bg-black/45 z-10 backdrop-blur-[2px] transition-all"></div>
|
||||
|
||||
<!-- 底层透出的模糊原页面头部 -->
|
||||
<div class="bg-white/95 backdrop-blur-md z-0 hairline-b shrink-0 filter blur-[1px]">
|
||||
<div class="h-11 px-6 flex justify-between items-end pb-1.5 select-none">
|
||||
<span class="text-[14px] font-semibold text-black">9:41</span>
|
||||
<div class="flex items-center space-x-1 text-black text-[12px]">
|
||||
<i class="fa-solid fa-signal text-[11px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-11 px-4 flex items-center justify-between">
|
||||
<span class="text-[#007AFF] text-[15px]">< 我的</span>
|
||||
<span class="font-semibold text-[17px] text-black">我的订单</span>
|
||||
<div class="capsule-pill w-[87px] h-[32px] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 真实微信支付底栏面板 (原生底部浮层 ActionSheet) -->
|
||||
<div class="absolute bottom-0 inset-x-0 bg-white rounded-t-[24px] z-30 shadow-2xl safe-bottom overflow-hidden animate-slide-up">
|
||||
<!-- 微信支付顶栏 -->
|
||||
<div class="h-14 px-5 flex items-center justify-between hairline-b">
|
||||
<button class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:bg-gray-100">
|
||||
<i class="fa-solid fa-xmark text-lg"></i>
|
||||
</button>
|
||||
<div class="flex items-center space-x-1 text-[16px] font-semibold text-black">
|
||||
<i class="fa-brands fa-weixin text-[#07C160] text-[19px]"></i>
|
||||
<span>微信支付</span>
|
||||
</div>
|
||||
<button class="text-xs text-gray-400 font-normal">使用帮助</button>
|
||||
</div>
|
||||
|
||||
<!-- 金额与核心商品信息 -->
|
||||
<div class="px-6 pt-7 pb-5 text-center">
|
||||
<p class="text-[13px] text-[#8E8E93] mb-1">纸条AI衣橱 · 月度会员服务</p>
|
||||
<div class="flex items-baseline justify-center text-[#1C1C1E]">
|
||||
<span class="text-[26px] font-semibold mr-1">¥</span>
|
||||
<span class="mono-num text-[44px] font-bold tracking-tight">19.00</span>
|
||||
</div>
|
||||
<div class="inline-flex items-center gap-1 mt-2 px-2.5 py-0.5 rounded-full bg-[#F2F2F7] text-[11px] text-[#8E8E93]">
|
||||
<i class="fa-solid fa-shield-halved text-[#07C160] text-[10px]"></i> 官方安全支付环境
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付通道选择行 -->
|
||||
<div class="px-5 py-3 mx-4 rounded-xl bg-[#F9F9FB] hairline-all flex items-center justify-between text-[13px] mb-5">
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa-solid fa-credit-card text-[#007AFF] text-[15px]"></i>
|
||||
<span class="font-medium text-[#1C1C1E]">招商银行储蓄卡(8920)</span>
|
||||
</div>
|
||||
<i class="fa-solid fa-chevron-right text-gray-400 text-xs"></i>
|
||||
</div>
|
||||
|
||||
<!-- 绿色微信支付核心按钮 -->
|
||||
<div class="px-5 mb-2">
|
||||
<button class="w-full h-[48px] bg-[#07C160] active:bg-[#06ad56] text-white font-semibold text-[16px] rounded-[12px] flex items-center justify-center space-x-1.5 shadow-md shadow-green-500/20">
|
||||
<i class="fa-solid fa-fingerprint text-[18px]"></i>
|
||||
<span>确认支付 ¥19.00</span>
|
||||
</button>
|
||||
<p class="text-center text-[11px] text-[#8E8E93] mt-2.5">
|
||||
点击确认即授权微信支付扣款协议
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 画板 3: 点击「申请退款」弹出退款原因面板与审核轻提示 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-[#FF9500]"></span>
|
||||
<span class="text-sm font-semibold text-gray-300">状态 3 · 弹出「申请退款面板」与轻提示</span>
|
||||
</div>
|
||||
|
||||
<div class="device-shell flex flex-col justify-between">
|
||||
<!-- 遮罩层 -->
|
||||
<div class="absolute inset-0 bg-black/45 z-10 backdrop-blur-[1px]"></div>
|
||||
|
||||
<!-- 顶部轻提示 Toast (浮动在上层，模拟提交后的即时反馈) -->
|
||||
<div class="absolute top-16 inset-x-6 z-40 flex justify-center">
|
||||
<div class="bg-[#1C1C1E]/90 backdrop-blur-md text-white px-4 py-2.5 rounded-full shadow-2xl flex items-center space-x-2 border border-white/10 animate-fade-in">
|
||||
<i class="fa-solid fa-circle-check text-[#34C759] text-[15px]"></i>
|
||||
<span class="text-[13px] font-medium">退款申请已提交，等待审核</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 背景模糊的原生层 -->
|
||||
<div class="bg-white/95 backdrop-blur-md z-0 hairline-b shrink-0 filter blur-[1px]">
|
||||
<div class="h-11 px-6 flex justify-between items-end pb-1.5 select-none">
|
||||
<span class="text-[14px] font-semibold text-black">9:41</span>
|
||||
<div class="flex items-center space-x-1 text-black text-[12px]">
|
||||
<i class="fa-solid fa-battery-full text-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-11 px-4 flex items-center justify-between">
|
||||
<span class="text-[#007AFF] text-[15px]">< 我的</span>
|
||||
<span class="font-semibold text-[17px] text-black">我的订单</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请退款弹窗面板 (Bottom Sheet) -->
|
||||
<div class="absolute bottom-0 inset-x-0 bg-white rounded-t-[24px] z-30 shadow-2xl safe-bottom overflow-hidden">
|
||||
<!-- 面板顶栏 -->
|
||||
<div class="h-13 px-5 pt-3 pb-2 flex items-center justify-between hairline-b">
|
||||
<h3 class="text-[17px] font-semibold text-[#1C1C1E]">申请退款</h3>
|
||||
<button class="w-8 h-8 rounded-full flex items-center justify-center text-[#8E8E93] hover:bg-gray-100">
|
||||
<i class="fa-solid fa-xmark text-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 退款表单内容 -->
|
||||
<div class="p-5 space-y-4">
|
||||
<!-- 订单概览卡 -->
|
||||
<div class="p-3 bg-[#F2F2F7] rounded-[12px] flex items-center justify-between text-[13px]">
|
||||
<div>
|
||||
<p class="font-medium text-[#1C1C1E]">AI识图上传 20次包</p>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5">订单号：202504159821</p>
|
||||
</div>
|
||||
<span class="mono-num text-[16px] font-bold text-[#1C1C1E]">¥6.00</span>
|
||||
</div>
|
||||
|
||||
<!-- 退款原因多行输入框 (上限 200 字) -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<label class="text-[13px] font-medium text-[#1C1C1E]">退款原因说明</label>
|
||||
<span class="text-[11px] text-[#8E8E93] mono-num">34 / 200字</span>
|
||||
</div>
|
||||
<div class="relative bg-[#F9F9FB] rounded-[12px] p-3 hairline-all focus-within:border-[#007AFF] transition-colors">
|
||||
<textarea rows="3" class="w-full bg-transparent text-[13px] text-[#1C1C1E] placeholder:text-[#C7C7CC] outline-none resize-none leading-relaxed" placeholder="请填写退款原因，工作人员将在1-3个工作日内完成审核与退款...">买错了规格，原计划购买月度会员服务，希望撤销并重新购买会员包。</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 规则提示 -->
|
||||
<div class="flex items-start space-x-2 text-[11px] text-[#8E8E93] leading-tight">
|
||||
<i class="fa-solid fa-circle-info text-[#FF9500] text-xs mt-0.5 shrink-0"></i>
|
||||
<span>未使用的额度与服务在购买7日内支持极速退款，已消耗额度将扣除对应成本。</span>
|
||||
</div>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<div class="pt-2">
|
||||
<button class="w-full h-[46px] bg-[#007AFF] active:bg-[#0062cc] text-white font-semibold text-[15px] rounded-[12px] shadow-md shadow-blue-500/20 flex items-center justify-center">
|
||||
提交退款申请
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 画板 4: 空态页面（当无订单或全部被清空时） -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-gray-400"></span>
|
||||
<span class="text-sm font-semibold text-gray-300">状态 4 · 缺省空态（还没有订单）</span>
|
||||
</div>
|
||||
|
||||
<div class="device-shell flex flex-col justify-between">
|
||||
<!-- 原生导航栏 -->
|
||||
<div class="bg-white/95 backdrop-blur-md z-20 hairline-b shrink-0">
|
||||
<div class="h-11 px-6 flex justify-between items-end pb-1.5 select-none">
|
||||
<span class="text-[14px] font-semibold text-black">9:41</span>
|
||||
<div class="flex items-center space-x-1 text-black text-[12px]">
|
||||
<i class="fa-solid fa-battery-full text-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-11 px-4 flex items-center justify-between relative">
|
||||
<div class="flex items-center text-[#007AFF] text-[16px] cursor-pointer">
|
||||
<i class="fa-solid fa-chevron-left text-[15px] mr-1"></i>
|
||||
<span class="text-[15px]">我的</span>
|
||||
</div>
|
||||
<div class="absolute left-1/2 -translate-x-1/2 font-semibold text-[17px] text-black">
|
||||
我的订单
|
||||
</div>
|
||||
<div class="capsule-pill w-[87px] h-[32px] rounded-full flex items-center justify-evenly px-1">
|
||||
<div class="w-4 h-4 flex items-center justify-center"><span class="w-1.5 h-1.5 rounded-full bg-black"></span></div>
|
||||
<div class="w-[1px] h-4 bg-gray-300"></div>
|
||||
<div class="w-4 h-4 flex items-center justify-center"><span class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 筛选栏 (空态下依然保留结构稳定) -->
|
||||
<div class="px-3 pt-2 pb-2.5 flex items-center space-x-2 overflow-x-auto no-scrollbar opacity-60">
|
||||
<span class="px-3.5 py-1.5 rounded-full bg-[#007AFF] text-white text-[13px] font-medium shrink-0">全部</span>
|
||||
<span class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">待支付</span>
|
||||
<span class="px-3.5 py-1.5 rounded-full bg-[#E5E5EA]/60 text-[#1C1C1E] text-[13px] font-medium shrink-0">已支付</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空态居中展示区 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 text-center pb-20">
|
||||
<!-- 票据线稿插画 (规范要求：票据线稿插画) -->
|
||||
<div class="w-24 h-24 rounded-full bg-[#E5E5EA]/40 flex items-center justify-center mb-5 text-[#8E8E93] relative">
|
||||
<!-- 票据主卡片 -->
|
||||
<div class="w-12 h-16 border-2 border-[#8E8E93] rounded-[6px] bg-white flex flex-col justify-between p-1.5 shadow-sm">
|
||||
<div class="space-y-1">
|
||||
<div class="w-6 h-1 bg-[#8E8E93] rounded-full"></div>
|
||||
<div class="w-8 h-1 bg-[#E5E5EA] rounded-full"></div>
|
||||
<div class="w-5 h-1 bg-[#E5E5EA] rounded-full"></div>
|
||||
</div>
|
||||
<div class="hairline-t pt-1 flex justify-between items-center">
|
||||
<span class="text-[8px] font-bold text-[#8E8E93]">¥</span>
|
||||
<div class="w-3 h-1 bg-[#8E8E93] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小浮标星星 -->
|
||||
<i class="fa-solid fa-sparkles text-[#007AFF] text-xs absolute -top-1 -right-1"></i>
|
||||
</div>
|
||||
|
||||
<h3 class="text-[17px] font-semibold text-[#1C1C1E] mb-1.5">还没有订单</h3>
|
||||
<p class="text-[13px] text-[#8E8E93] leading-relaxed max-w-[240px] mb-6">
|
||||
您还没有产生任何购买记录，开通会员或购买额度包即可畅享智能穿搭
|
||||
</p>
|
||||
|
||||
<!-- 描边按钮「去看看额度包」 -->
|
||||
<button class="px-6 py-2.5 rounded-full border border-[#007AFF] text-[#007AFF] active:bg-[#007AFF]/5 text-[14px] font-medium transition-colors shadow-sm">
|
||||
去看看额度包
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部空白占位保证视觉对齐 -->
|
||||
<div class="h-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 底部业务逻辑与核查规范说明 -->
|
||||
<footer class="w-full max-w-[1580px] mt-8 bg-[#161b22] border border-[#30363d] rounded-2xl p-6 text-white text-xs">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-white mb-2 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-list-check text-[#007AFF]"></i> 状态徽标与色彩对齐
|
||||
</h4>
|
||||
<p class="text-gray-400 leading-relaxed">
|
||||
待支付采用警示橙 <span class="text-[#FF9500]">#FF9500</span> 并配倒计时；已支付采用成功绿 <span class="text-[#34C759]">#34C759</span>；已退款为系统蓝 <span class="text-[#007AFF]">#007AFF</span>；已取消/已过期为系统灰 <span class="text-[#8E8E93]">#8E8E93</span>。
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-white mb-2 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-wallet text-[#34C759]"></i> 微信支付呼起交互
|
||||
</h4>
|
||||
<p class="text-gray-400 leading-relaxed">
|
||||
点击待支付卡片的「去支付」，底部滑出标准微信收银台，醒目呈现 <span class="text-white">¥19.00</span> 等宽大字、支付方式选择及原生绿色 <span class="text-[#07C160]">#07C160</span>「确认支付」按钮。
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-white mb-2 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-arrow-rotate-left text-[#FF9500]"></i> 申请退款与审核流
|
||||
</h4>
|
||||
<p class="text-gray-400 leading-relaxed">
|
||||
已支付订单提供「申请退款」入口，呼起具备 200 字限制的多行输入框；提交后伴随 iOS 样式深色 Toast「退款申请已提交，等待审核」，状态自动进入「退款中」。
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-white mb-2 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-file-invoice text-[#8E8E93]"></i> 票据线稿空态与引导
|
||||
</h4>
|
||||
<p class="text-gray-400 leading-relaxed">
|
||||
缺省时通过极简票据线稿插画 + 灰色文案「还没有订单」承接，并通过描边按钮「去看看额度包」平滑引导用户回流至商城（第 11 屏）。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 290 KiB |
@@ -1,719 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第13屏 我的（tabBar全状态画板）</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;
|
||||
background-color: #0c0d0e;
|
||||
color: #1c1c1e;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.screen-container {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
position: relative;
|
||||
border-radius: 44px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 60px -15px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
|
||||
background-color: #F2F2F7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ios-status-bar {
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 22px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
z-index: 30;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wx-nav-bar {
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
z-index: 30;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.wx-capsule {
|
||||
height: 32px;
|
||||
width: 87px;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.hairline-b {
|
||||
border-bottom: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.hairline-indent {
|
||||
position: relative;
|
||||
}
|
||||
.hairline-indent::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 52px;
|
||||
right: 0;
|
||||
height: 0.5px;
|
||||
background-color: #E5E5EA;
|
||||
}
|
||||
.tabbar {
|
||||
height: 83px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 0.5px solid #E5E5EA;
|
||||
display: flex;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 24px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 40;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="p-8 flex flex-col items-center">
|
||||
|
||||
<!-- 顶部画板标题与设计规格元信息 -->
|
||||
<header class="w-full max-w-[1240px] mb-8 flex flex-col gap-3 text-white">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-3 h-3 rounded-full bg-[#007AFF]"></span>
|
||||
<h1 class="text-2xl font-bold tracking-tight">第 13 屏 ｜ 我的（tabBar 全状态高保真画板）</h1>
|
||||
<span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-[#007AFF]/20 text-[#007AFF] border border-[#007AFF]/30">微信小程序 5 个核心 tabBar 之一</span>
|
||||
<span class="text-xs text-neutral-400 font-mono">iPhone 375 × 812 pt</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4 text-xs text-neutral-400 border-t border-neutral-800 pt-3">
|
||||
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>系统强调蓝 #007AFF</div>
|
||||
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#FF9500]"></span>警示橙 #FF9500 (低额度预警)</div>
|
||||
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#34C759]"></span>健康状态绿 #34C759</div>
|
||||
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#F2F2F7]"></span>iOS 分组灰底 #F2F2F7</div>
|
||||
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#E5E5EA]"></span>发丝分割线 0.5px #E5E5EA (左缩进16pt)</div>
|
||||
<div class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-neutral-400"></span>SF Symbols 线性图标系</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 3 个典型场景画板平铺展示 -->
|
||||
<main class="w-full max-w-[1240px] flex flex-wrap justify-center gap-10">
|
||||
|
||||
<!-- 状态 1：tabBar 主页面（常规正常态） -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-xs font-medium text-neutral-300 flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
|
||||
<span>状态 1 · 我的（常规状态 · tabBar 第5项选中）</span>
|
||||
</div>
|
||||
|
||||
<div class="screen-container">
|
||||
<!-- 状态栏 -->
|
||||
<div class="ios-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="text-[11px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信小程序导航栏 -->
|
||||
<div class="wx-nav-bar">
|
||||
<div class="w-12"></div>
|
||||
<div class="text-[17px] font-semibold text-black tracking-tight">我的</div>
|
||||
<div class="wx-capsule">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-neutral-800"></i>
|
||||
<div class="h-3.5 w-[0.5px] bg-neutral-300"></div>
|
||||
<i class="fa-regular fa-circle-dot text-xs text-neutral-800"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto hide-scrollbar px-4 pt-2 pb-24 space-y-4">
|
||||
|
||||
<!-- 个人信息白卡 (圆角 16pt) -->
|
||||
<div class="bg-white rounded-[16px] p-4 shadow-sm border border-[#E5E5EA]/60 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3.5">
|
||||
<!-- 头像 64pt -->
|
||||
<div class="w-16 h-16 rounded-full bg-gradient-to-tr from-[#DCE8FE] to-[#F2F5FF] border-[1.5px] border-[#007AFF]/20 flex items-center justify-center relative overflow-hidden shadow-inner flex-shrink-0">
|
||||
<i class="fa-solid fa-user text-2xl text-[#007AFF]/70"></i>
|
||||
<div class="absolute bottom-0 right-0 w-4 h-4 bg-[#34C759] border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[18px] font-bold text-neutral-900 tracking-tight">小雨</span>
|
||||
<span class="w-4 h-4 rounded-full bg-[#FF2D55]/10 text-[#FF2D55] flex items-center justify-center text-[10px]">
|
||||
<i class="fa-solid fa-venus"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<!-- 会员标签 -->
|
||||
<div class="px-2 py-0.5 rounded-[6px] bg-[#007AFF]/10 text-[#007AFF] text-[11px] font-medium flex items-center gap-1">
|
||||
<i class="fa-solid fa-crown text-[10px]"></i>
|
||||
<span>月度会员 · 05-15 到期</span>
|
||||
</div>
|
||||
<!-- 星座标签 -->
|
||||
<div class="px-2 py-0.5 rounded-[6px] bg-[#8E8E93]/10 text-neutral-600 text-[11px] font-medium flex items-center gap-1">
|
||||
<span>白羊座</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑资料按钮 -->
|
||||
<button class="flex items-center text-xs font-medium text-[#8E8E93] hover:text-[#007AFF] transition-colors pl-1">
|
||||
<span>编辑资料</span>
|
||||
<i class="fa-solid fa-chevron-right text-[10px] ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 第一组功能列表 (Inset Grouped) -->
|
||||
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
|
||||
<!-- 我的额度 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-solid fa-bolt text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">我的额度</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[13px] text-[#8E8E93]">上传额度剩 13</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的订单 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-file-lines text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">我的订单</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的分享 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-solid fa-arrow-up-from-bracket text-[15px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">我的分享</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的收藏 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-bookmark text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">我的收藏</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 额度明细 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-solid fa-clock-rotate-left text-[15px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">额度明细</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二组功能列表 (Inset Grouped) -->
|
||||
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
|
||||
<!-- 编辑资料 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-user text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">编辑资料</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设置生日 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-calendar-days text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">设置生日</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[13px] text-[#8E8E93]">03月28日</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客服与反馈 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-comments text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">客服与反馈</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关于纸条AI衣橱 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-solid fa-circle-info text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">关于纸条AI衣橱</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 版本号标注 -->
|
||||
<div class="text-center pt-2 pb-1">
|
||||
<span class="text-[12px] text-[#8E8E93] tracking-wide font-mono">纸条AI衣橱 v1.0.0</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 5 个核心 tabBar（本页为选中态） -->
|
||||
<div class="tabbar">
|
||||
<!-- 1. 衣橱 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
|
||||
<i class="fa-solid fa-shirt text-[18px]"></i>
|
||||
<span class="text-[10px] font-medium leading-none">衣橱</span>
|
||||
</div>
|
||||
<!-- 2. 穿搭 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
|
||||
<i class="fa-solid fa-vest-patches text-[18px]"></i>
|
||||
<span class="text-[10px] font-medium leading-none">穿搭</span>
|
||||
</div>
|
||||
<!-- 3. 运势 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
|
||||
<i class="fa-regular fa-compass text-[18px]"></i>
|
||||
<span class="text-[10px] font-medium leading-none">运势</span>
|
||||
</div>
|
||||
<!-- 4. 通知 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93] relative">
|
||||
<i class="fa-regular fa-bell text-[18px]"></i>
|
||||
<span class="text-[10px] font-medium leading-none">通知</span>
|
||||
</div>
|
||||
<!-- 5. 我的 (选中态) -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#007AFF]">
|
||||
<i class="fa-solid fa-user text-[18px]"></i>
|
||||
<span class="text-[10px] font-semibold leading-none">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态 2：带「额度不足提示条」与未完善信息态 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-xs font-medium text-neutral-300 flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-[#FF9500]"></span>
|
||||
<span>状态 2 · 顶部浅橙额度提示条 + 未设置生日</span>
|
||||
</div>
|
||||
|
||||
<div class="screen-container">
|
||||
<!-- 状态栏 -->
|
||||
<div class="ios-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="text-[11px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信小程序导航栏 -->
|
||||
<div class="wx-nav-bar">
|
||||
<div class="w-12"></div>
|
||||
<div class="text-[17px] font-semibold text-black tracking-tight">我的</div>
|
||||
<div class="wx-capsule">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-neutral-800"></i>
|
||||
<div class="h-3.5 w-[0.5px] bg-neutral-300"></div>
|
||||
<i class="fa-regular fa-circle-dot text-xs text-neutral-800"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部浅橙提示条（规范要求） -->
|
||||
<div class="bg-[#FFF4E5] border-y border-[#FF9500]/20 px-4 py-2.5 flex items-center justify-between text-xs text-[#D97706] transition-all">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fa-solid fa-circle-exclamation text-[#FF9500] text-sm"></i>
|
||||
<span class="font-medium text-[#B45309]">你的上传额度仅剩 2 次，点击购买额度包</span>
|
||||
</div>
|
||||
<i class="fa-solid fa-chevron-right text-[10px] text-[#FF9500]"></i>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto hide-scrollbar px-4 pt-3 pb-24 space-y-4">
|
||||
|
||||
<!-- 个人信息白卡 (未设置生日状态) -->
|
||||
<div class="bg-white rounded-[16px] p-4 shadow-sm border border-[#E5E5EA]/60 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3.5">
|
||||
<!-- 头像 64pt (灰色人像占位) -->
|
||||
<div class="w-16 h-16 rounded-full bg-[#E5E5EA] border-[1.5px] border-white flex items-center justify-center flex-shrink-0 shadow-inner">
|
||||
<i class="fa-solid fa-user text-2xl text-[#8E8E93]"></i>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[18px] font-bold text-neutral-900 tracking-tight">微信用户_928</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<!-- 会员标签 -->
|
||||
<div class="px-2 py-0.5 rounded-[6px] bg-neutral-100 text-neutral-500 text-[11px] font-medium flex items-center gap-1">
|
||||
<span>普通用户</span>
|
||||
</div>
|
||||
<!-- 未设置生日可点击标签 -->
|
||||
<div class="px-2 py-0.5 rounded-[6px] bg-[#007AFF]/10 text-[#007AFF] text-[11px] font-medium flex items-center gap-1 cursor-pointer">
|
||||
<i class="fa-solid fa-plus text-[9px]"></i>
|
||||
<span>设置生日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑资料按钮 -->
|
||||
<button class="flex items-center text-xs font-medium text-[#8E8E93] hover:text-[#007AFF] transition-colors pl-1">
|
||||
<span>编辑资料</span>
|
||||
<i class="fa-solid fa-chevron-right text-[10px] ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 第一组功能列表 (带低额度警示红字) -->
|
||||
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
|
||||
<!-- 我的额度 (警示橙强调) -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#FF9500]">
|
||||
<i class="fa-solid fa-bolt text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">我的额度</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[13px] font-medium text-[#FF9500]">上传额度仅剩 2</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的订单 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-file-lines text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">我的订单</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-[#FF9500]"></span>
|
||||
<span class="text-[12px] text-[#FF9500] font-medium">1 笔待支付</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的分享 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-solid fa-arrow-up-from-bracket text-[15px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">我的分享</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的收藏 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-bookmark text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">我的收藏</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 额度明细 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-solid fa-clock-rotate-left text-[15px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">额度明细</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二组功能列表 -->
|
||||
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
|
||||
<!-- 编辑资料 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-user text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">编辑资料</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设置生日 (未完善) -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-calendar-days text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">设置生日</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[13px] text-[#007AFF]">去完善</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客服与反馈 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-regular fa-comments text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">客服与反馈</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关于纸条AI衣橱 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between active:bg-neutral-50 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 text-center text-[#007AFF]">
|
||||
<i class="fa-solid fa-circle-info text-[16px]"></i>
|
||||
</div>
|
||||
<span class="text-[15px] font-normal text-neutral-900">关于纸条AI衣橱</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 版本号标注 -->
|
||||
<div class="text-center pt-2 pb-1">
|
||||
<span class="text-[12px] text-[#8E8E93] tracking-wide font-mono">纸条AI衣橱 v1.0.0</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 5 个核心 tabBar -->
|
||||
<div class="tabbar">
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
|
||||
<i class="fa-solid fa-shirt text-[18px]"></i>
|
||||
<span class="text-[10px] font-medium leading-none">衣橱</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
|
||||
<i class="fa-solid fa-vest-patches text-[18px]"></i>
|
||||
<span class="text-[10px] font-medium leading-none">穿搭</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
|
||||
<i class="fa-regular fa-compass text-[18px]"></i>
|
||||
<span class="text-[10px] font-medium leading-none">运势</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#8E8E93]">
|
||||
<i class="fa-regular fa-bell text-[18px]"></i>
|
||||
<span class="text-[10px] font-medium leading-none">通知</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-1 text-[#007AFF]">
|
||||
<i class="fa-solid fa-user text-[18px]"></i>
|
||||
<span class="text-[10px] font-semibold leading-none">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态 3：二级子页面「编辑资料」（表单规范） -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-xs font-medium text-neutral-300 flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-[#34C759]"></span>
|
||||
<span>状态 3 · 子页面「编辑资料」（二级表单 + 原生保存）</span>
|
||||
</div>
|
||||
|
||||
<div class="screen-container">
|
||||
<!-- 状态栏 -->
|
||||
<div class="ios-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="text-[11px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级页面原生导航栏 (左上角返回 + 标题 + 胶囊) -->
|
||||
<div class="wx-nav-bar bg-white/80 backdrop-blur hairline-b">
|
||||
<button class="flex items-center text-[#007AFF] text-[16px] font-normal -ml-1">
|
||||
<i class="fa-solid fa-chevron-left text-[15px] mr-1"></i>
|
||||
<span>我的</span>
|
||||
</button>
|
||||
<div class="text-[17px] font-semibold text-black tracking-tight">编辑资料</div>
|
||||
<div class="wx-capsule">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-neutral-800"></i>
|
||||
<div class="h-3.5 w-[0.5px] bg-neutral-300"></div>
|
||||
<i class="fa-regular fa-circle-dot text-xs text-neutral-800"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单内容区 -->
|
||||
<div class="flex-1 overflow-y-auto hide-scrollbar px-4 pt-5 pb-24 space-y-5">
|
||||
|
||||
<!-- 头像更换卡片 -->
|
||||
<div class="flex flex-col items-center justify-center py-2">
|
||||
<div class="relative group cursor-pointer">
|
||||
<div class="w-20 h-20 rounded-full bg-[#DCE8FE] border-2 border-white shadow flex items-center justify-center overflow-hidden">
|
||||
<i class="fa-solid fa-user text-3xl text-[#007AFF]"></i>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 w-6 h-6 rounded-full bg-[#007AFF] text-white flex items-center justify-center shadow-md border-2 border-white text-[11px]">
|
||||
<i class="fa-solid fa-camera"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[12px] text-[#8E8E93] mt-2 font-medium">点击更换头像</span>
|
||||
</div>
|
||||
|
||||
<!-- 表单分组白卡 (圆角 16pt，行高 44pt，发丝线左缩进) -->
|
||||
<div class="bg-white rounded-[16px] overflow-hidden shadow-sm border border-[#E5E5EA]/60">
|
||||
<!-- 昵称 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent">
|
||||
<span class="text-[15px] text-neutral-900 w-20 flex-shrink-0">昵称</span>
|
||||
<input type="text" value="小雨" maxlength="32" class="flex-1 text-right text-[15px] text-neutral-800 focus:outline-none placeholder-[#C7C7CC]" placeholder="输入昵称（≤32字）" />
|
||||
</div>
|
||||
|
||||
<!-- 性别 (男 / 女 单选) -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent">
|
||||
<span class="text-[15px] text-neutral-900 w-20 flex-shrink-0">性别</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-[14px] text-neutral-500">
|
||||
<span class="w-4 h-4 rounded-full border border-[#C7C7CC] flex items-center justify-center"></span>
|
||||
<span>男</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-[14px] text-[#007AFF] font-medium">
|
||||
<span 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>
|
||||
</span>
|
||||
<span>女</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生日 (日期选择器，不可晚于今天) -->
|
||||
<div class="h-11 px-4 flex items-center justify-between hairline-indent cursor-pointer active:bg-neutral-50">
|
||||
<span class="text-[15px] text-neutral-900 w-20 flex-shrink-0">生日</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-neutral-800 font-normal">1998-03-28</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#C7C7CC]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手机号 (只读展示) -->
|
||||
<div class="h-11 px-4 flex items-center justify-between">
|
||||
<span class="text-[15px] text-neutral-900 w-20 flex-shrink-0">手机号</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[15px] text-[#8E8E93] font-mono">138 **** 8920</span>
|
||||
<span class="text-[11px] text-[#8E8E93] px-1.5 py-0.5 rounded bg-neutral-100">微信绑定</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明注释 -->
|
||||
<div class="px-2">
|
||||
<p class="text-[12px] text-[#8E8E93] leading-relaxed">
|
||||
* 生日用于每日穿搭运势算法计算，不可选择晚于今天的日期；手机号与微信直接绑定，如需修改请解绑微信手机号。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部固定栏（系统蓝保存按钮） -->
|
||||
<div class="p-4 bg-white/95 backdrop-blur border-t border-[#E5E5EA] absolute bottom-0 left-0 right-0 z-40 pb-7">
|
||||
<button class="w-full h-11 bg-[#007AFF] text-white font-semibold rounded-[12px] text-[16px] shadow hover:bg-[#0062cc] active:scale-[0.99] transition-all flex items-center justify-center">
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 底部设计规范总结栏 -->
|
||||
<footer class="w-full max-w-[1240px] mt-10 p-5 rounded-[20px] bg-neutral-900/90 border border-neutral-800 text-neutral-300 text-xs flex flex-col md:flex-row justify-between gap-4">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex items-center gap-2 font-semibold text-white">
|
||||
<i class="fa-solid fa-circle-check text-[#34C759]"></i>
|
||||
<span>设计规范落地总结（微信小程序 + iOS Human Interface Guidelines）</span>
|
||||
</div>
|
||||
<p class="text-neutral-400">
|
||||
1. 严格对齐 375×812pt 原生栅格与 44pt 状态栏；SF Symbols 线性图标系统；发丝线 0.5px #E5E5EA 并严格左缩进 16pt 与正文标签精准对齐。<br>
|
||||
2. 全面支持个人中心全状态切换：正常个人资料态、额度不足浅橙预警条态（仅剩2次）、以及「编辑资料」二级子页面。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-shrink-0 self-start md:self-center">
|
||||
<span class="px-3 py-1.5 rounded-lg bg-white/10 text-white font-mono">纸条AI衣橱 · 全套14屏设计闭环</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 394 KiB |
@@ -1,400 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第2屏 衣橱（tabBar）</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
background-color: #E5E5EA;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.device-shell {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #F2F2F7;
|
||||
border-radius: 44px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hairline-b {
|
||||
border-bottom: 0.5px solid #E5E5EA;
|
||||
}
|
||||
|
||||
.hairline-t {
|
||||
border-top: 0.5px solid rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* Hide scrollbars */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.45; }
|
||||
}
|
||||
.skeleton-pulse {
|
||||
animation: pulse-slow 1.6s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="flex flex-col gap-6 items-center">
|
||||
<!-- 标头指示 -->
|
||||
<div class="flex items-center justify-between w-[375px] px-2 text-xs font-semibold text-neutral-500">
|
||||
<span class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
|
||||
第 2 屏 ｜ 我的衣橱 (tabBar)
|
||||
</span>
|
||||
<span class="text-neutral-400 font-normal">375 × 812 pt</span>
|
||||
</div>
|
||||
|
||||
<!-- iPhone 模拟画板 -->
|
||||
<div class="device-shell">
|
||||
<!-- 微信小程序原生顶部状态栏与胶囊导航栏 (高度约 88pt: 44pt状态栏 + 44pt导航条) -->
|
||||
<div class="sticky top-0 z-30 bg-[#F2F2F7]/90 backdrop-blur-md hairline-b">
|
||||
<!-- iOS 状态栏 -->
|
||||
<div class="h-11 px-7 flex items-center justify-between text-[14px] font-semibold text-black tracking-tight">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<!-- 信号 -->
|
||||
<svg class="w-4 h-3 fill-black" viewBox="0 0 16 12">
|
||||
<rect x="0" y="8" width="2.5" height="4" rx="0.5"/>
|
||||
<rect x="4.5" y="5.5" width="2.5" height="6.5" rx="0.5"/>
|
||||
<rect x="9" y="3" width="2.5" height="9" rx="0.5"/>
|
||||
<rect x="13.5" y="0" width="2.5" height="12" rx="0.5"/>
|
||||
</svg>
|
||||
<!-- Wi-Fi -->
|
||||
<svg class="w-3.5 h-3 fill-black" viewBox="0 0 16 12">
|
||||
<path d="M8 9.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-4.24-3.24a6 6 0 0 1 8.48 0 .75.75 0 0 1-1.06 1.06 4.5 4.5 0 0 0-6.36 0 .75.75 0 0 1-1.06-1.06zm-2.83-2.83a10 10 0 0 1 14.14 0 .75.75 0 1 1-1.06 1.06 8.5 8.5 0 0 0-12.02 0 .75.75 0 0 1-1.06-1.06z"/>
|
||||
</svg>
|
||||
<!-- 电池 -->
|
||||
<div class="w-5 h-2.5 rounded-[3px] border border-black p-[1px] flex items-center">
|
||||
<div class="w-full h-full bg-black rounded-[1.5px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信原生导航栏 -->
|
||||
<div class="h-11 px-4 flex items-center justify-between relative">
|
||||
<div class="w-20"></div> <!-- 左侧留白占位 -->
|
||||
<!-- 居中标题 -->
|
||||
<h1 class="text-[17px] font-semibold text-[#000000] tracking-tight">我的衣橱</h1>
|
||||
|
||||
<!-- 微信右上角原生胶囊按钮 (固定尺寸 87×32 pt, 圆角 16pt) -->
|
||||
<div class="flex items-center w-[87px] h-8 bg-white/70 backdrop-blur-md rounded-full border border-black/10 px-2.5 justify-between shadow-sm">
|
||||
<!-- 更多 ··· -->
|
||||
<svg class="w-4 h-4 text-black/80" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="5" cy="12" r="2"/>
|
||||
<circle cx="12" cy="12" r="2"/>
|
||||
<circle cx="19" cy="12" r="2"/>
|
||||
</svg>
|
||||
<div class="w-[0.5px] h-3.5 bg-black/15"></div>
|
||||
<!-- 小程序圆环 ⊙ -->
|
||||
<svg class="w-4 h-4 text-black/80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="7"/>
|
||||
<circle cx="12" cy="12" r="2.5" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选分类与统计 -->
|
||||
<div class="pt-2 pb-2.5">
|
||||
<!-- 横向滑动分类筛选标签 -->
|
||||
<div class="flex items-center gap-2 px-4 overflow-x-auto no-scrollbar py-0.5">
|
||||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-[#007AFF] text-white shadow-sm flex-shrink-0 transition">全部</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">上装</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">下装</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">连衣裙</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">外套</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">鞋</button>
|
||||
<button class="px-3.5 py-1.5 rounded-full text-[13px] font-medium bg-white text-[#8E8E93] border border-black/5 flex-shrink-0 hover:text-black transition">配饰</button>
|
||||
</div>
|
||||
|
||||
<!-- 统计说明行 -->
|
||||
<div class="px-4 mt-2 flex items-center justify-between text-[11px] text-[#8E8E93] tracking-tight">
|
||||
<span>共 128 件 · 上传额度剩余 13 次</span>
|
||||
<span class="flex items-center gap-1 text-[#8E8E93]/80">
|
||||
<svg class="w-3 h-3 text-[#34C759]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="12" cy="12" r="5"/>
|
||||
</svg>
|
||||
云端同步就绪
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面主体内容：滚动区域 -->
|
||||
<div class="flex-1 overflow-y-auto px-4 pt-3 pb-24 no-scrollbar relative">
|
||||
<!-- 微信小程序标准下拉刷新提示（视觉表达） -->
|
||||
<div class="flex items-center justify-center gap-1.5 py-1.5 mb-1 opacity-40">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-[#8E8E93]"></div>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-[#8E8E93]"></div>
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-[#8E8E93]"></div>
|
||||
</div>
|
||||
|
||||
<!-- 两列衣物网格 (列间距与行间距均为 12pt, 卡片圆角 16pt) -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
|
||||
<!-- 卡片 1: 白色纯棉T恤 (正常态) -->
|
||||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||||
<!-- 1:1 图片区 -->
|
||||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||||
<!-- 衣物简笔线稿插图 -->
|
||||
<svg class="w-20 h-20 text-[#007AFF]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 14c2 3 6 4 10 4s8-1 10-4l12 6-3 10-7-2v24H20V28l-7 2-3-10 12-6z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||||
<path d="M22 14c2 3 6 4 10 4s8-1 10-4"/>
|
||||
<path d="M38 30h-8v8h8v-8z" stroke-dasharray="2 2" stroke-width="1.2"/>
|
||||
</svg>
|
||||
<!-- 状态徽标: 已完成分类（无角标或微标） -->
|
||||
</div>
|
||||
<div class="pt-2 pb-1 px-1">
|
||||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">白色纯棉T恤</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">上装 · T恤 · 白色</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 2: 浅蓝高腰阔腿牛仔裤 (AI 抠图中 - 系统蓝) -->
|
||||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||||
<svg class="w-20 h-20 text-[#007AFF]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 16h24l4 36-9 1-7-23-7 23-9-1 4-36z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||||
<line x1="32" y1="16" x2="32" y2="28"/>
|
||||
</svg>
|
||||
<!-- 状态徽标: AI 抠图中 (系统蓝 10% 浅底 + 系统蓝字) -->
|
||||
<div class="absolute top-1.5 right-1.5 bg-[#007AFF]/10 px-2 py-0.5 rounded-full flex items-center gap-1 border border-[#007AFF]/20">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] animate-pulse"></span>
|
||||
<span class="text-[10px] font-medium text-[#007AFF]">AI 抠图中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2 pb-1 px-1">
|
||||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">复古高腰牛仔裤</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">下装 · 牛仔裤 · 浅蓝</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 3: 法式碎花茶歇裙 (智能分类中 - 系统蓝) -->
|
||||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||||
<svg class="w-20 h-20 text-[#007AFF]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M25 15l-5 8 6 3 6-5 6 5 6-3-5-8H25z" fill="#E8F2FF"/>
|
||||
<path d="M26 26l-8 26h28l-8-26H26z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||||
</svg>
|
||||
<!-- 状态徽标: 智能分类中 (系统蓝) -->
|
||||
<div class="absolute top-1.5 right-1.5 bg-[#007AFF]/10 px-2 py-0.5 rounded-full flex items-center gap-1 border border-[#007AFF]/20">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] animate-pulse"></span>
|
||||
<span class="text-[10px] font-medium text-[#007AFF]">智能分类中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2 pb-1 px-1">
|
||||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">法式碎花茶歇裙</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">连衣裙 · 中长款 · 碎花</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 4: 燕麦色羊绒开衫 (排队中 - 系统灰) -->
|
||||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||||
<svg class="w-20 h-20 text-[#8E8E93]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 16l-10 6 4 16 6-2V50h20V36l6 2 4-16-10-6-10 4-10-4z" fill="#F2F2F7"/>
|
||||
<line x1="32" y1="20" x2="32" y2="50"/>
|
||||
</svg>
|
||||
<!-- 状态徽标: 排队中 (系统灰 10% 浅底 + 灰字) -->
|
||||
<div class="absolute top-1.5 right-1.5 bg-[#8E8E93]/15 px-2 py-0.5 rounded-full flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#8E8E93]"></span>
|
||||
<span class="text-[10px] font-medium text-[#8E8E93]">排队中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2 pb-1 px-1">
|
||||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">燕麦色羊绒开衫</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">外套 · 针织开衫 · 米色</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 5: 经典黑色西装外套 (识别失败 - 系统红 点击可重试) -->
|
||||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||||
<svg class="w-20 h-20 text-[#FF3B30]/60" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 16l-8 6 4 18 6-2v14h20V38l6 2 4-18-8-6-10 5-10-5z" fill="#FFF2F2"/>
|
||||
<path d="M28 21l4 12 4-12"/>
|
||||
</svg>
|
||||
<!-- 状态徽标: 识别失败 (系统红 10% 浅底 + 红字，带重试提示) -->
|
||||
<div class="absolute top-1.5 right-1.5 bg-[#FF3B30]/10 px-2 py-0.5 rounded-full flex items-center gap-1 border border-[#FF3B30]/20">
|
||||
<svg class="w-2.5 h-2.5 text-[#FF3B30]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M1 4v6h6M23 20v-6h-6"/>
|
||||
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium text-[#FF3B30]">失败 · 重试</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2 pb-1 px-1">
|
||||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">廓形西装外套</h3>
|
||||
<p class="text-[11px] text-[#FF3B30] mt-0.5 truncate">光线过暗，点击重新识别</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 6: 复古乐福鞋 (正常态) -->
|
||||
<div class="bg-white rounded-[16px] p-2 flex flex-col shadow-sm border border-black/[0.03]">
|
||||
<div class="w-full aspect-square bg-[#F8F8FA] rounded-[12px] relative flex items-center justify-center overflow-hidden">
|
||||
<svg class="w-20 h-20 text-[#007AFF]" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 36c4-8 12-10 20-8 6 1 12 6 16 6v10H14v-8z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||||
<circle cx="28" cy="34" r="3" fill="#007AFF" fill-opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="pt-2 pb-1 px-1">
|
||||
<h3 class="text-[14px] font-semibold text-[#000000] truncate">马衔扣乐福鞋</h3>
|
||||
<p class="text-[11px] text-[#8E8E93] mt-0.5 truncate">鞋 · 平底鞋 · 棕色</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部上拉加载更多指示器 -->
|
||||
<div class="mt-4 mb-2 flex items-center justify-center gap-1 text-[12px] text-[#8E8E93]">
|
||||
<span>正在加载更多衣物...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右下角悬浮圆形系统蓝按钮 (上传衣物) -->
|
||||
<!-- 距离底部 tabBar 约 16pt，距右侧 16pt -->
|
||||
<div class="absolute right-4 bottom-[74px] z-30">
|
||||
<button class="w-14 h-14 rounded-full bg-[#007AFF] text-white flex items-center justify-center shadow-lg shadow-[#007AFF]/35 active:scale-95 transition">
|
||||
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 微信小程序标准底部 tabBar (高度 50pt + 底部安全区 34pt = 84pt) -->
|
||||
<!-- 半透明毛玻璃底 + 顶部 0.5px 发丝分隔线 -->
|
||||
<div class="sticky bottom-0 z-40 bg-[#F2F2F7]/85 backdrop-blur-xl hairline-t">
|
||||
<div class="h-[50px] px-3 flex items-center justify-around">
|
||||
|
||||
<!-- Tab 1: 衣橱 (选中态: #007AFF) -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||||
<!-- hanger 衣架图标 -->
|
||||
<svg class="w-6 h-6 text-[#007AFF]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2a3 3 0 0 0-3 3c0 .8.3 1.5.8 2.1L2 15a2 2 0 0 0 1.6 3H20.4A2 2 0 0 0 22 15L14.2 7.1c.5-.6.8-1.3.8-2.1a3 3 0 0 0-3-3z"/>
|
||||
<line x1="2" y1="18" x2="22" y2="18"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-semibold text-[#007AFF] mt-0.5">衣橱</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: 穿搭 (未选中: #8E8E93) -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||||
<!-- t-shirt / squares 图标 -->
|
||||
<svg class="w-6 h-6 text-[#8E8E93]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20.38 3.46L16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium text-[#8E8E93] mt-0.5">穿搭</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: 运势 (未选中: #8E8E93, sparkles) -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||||
<svg class="w-6 h-6 text-[#8E8E93]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4L12 2z"/>
|
||||
<path d="M19 16l1.2 2.8L23 20l-2.8 1.2L19 24l-1.2-2.8L15 20l2.8-1.2L19 16z"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium text-[#8E8E93] mt-0.5">运势</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab 4: 通知 (未选中: #8E8E93, bell) -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||||
<svg class="w-6 h-6 text-[#8E8E93]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium text-[#8E8E93] mt-0.5">通知</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab 5: 我的 (未选中: #8E8E93, person.crop.circle) -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 py-1 cursor-pointer">
|
||||
<svg class="w-6 h-6 text-[#8E8E93]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
<path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium text-[#8E8E93] mt-0.5">我的</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 底部 Home Indicator 安全区 (34pt) -->
|
||||
<div class="h-[34px] flex items-center justify-center">
|
||||
<div class="w-[134px] h-[5px] bg-black/25 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 伴生状态说明画板（空态与骨架屏加载态） -->
|
||||
<div class="w-[375px] flex flex-col gap-4">
|
||||
<div class="text-xs font-semibold text-neutral-500 px-1">伴生交互状态说明（规范要求）</div>
|
||||
|
||||
<!-- 空态卡片 -->
|
||||
<div class="bg-white rounded-[20px] p-5 shadow-sm border border-black/5 flex flex-col items-center text-center">
|
||||
<div class="flex items-center justify-between w-full mb-3 text-[11px] text-[#8E8E93]">
|
||||
<span class="font-semibold text-black">衣橱空状态</span>
|
||||
<span class="bg-[#F2F2F7] px-2 py-0.5 rounded text-[10px]">Empty State</span>
|
||||
</div>
|
||||
|
||||
<!-- 中央衣架线稿插画 -->
|
||||
<div class="w-20 h-20 rounded-full bg-[#E8F2FF] flex items-center justify-center mb-3 text-[#007AFF]">
|
||||
<svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2a3 3 0 0 0-3 3c0 .8.3 1.5.8 2.1L2 15a2 2 0 0 0 1.6 3H20.4A2 2 0 0 0 22 15L14.2 7.1c.5-.6.8-1.3.8-2.1a3 3 0 0 0-3-3z"/>
|
||||
<line x1="2" y1="18" x2="22" y2="18"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h4 class="text-[17px] font-bold text-black mb-1">衣橱还空着</h4>
|
||||
<p class="text-[13px] text-[#8E8E93] max-w-[240px] leading-relaxed mb-4">拍照上传第一件衣物，AI 自动抠图并识别属性</p>
|
||||
|
||||
<button class="h-[44px] px-6 rounded-[12px] bg-[#007AFF] text-white text-[15px] font-medium shadow-sm active:opacity-80">
|
||||
上传衣物
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 骨架屏加载态 -->
|
||||
<div class="bg-white rounded-[20px] p-4 shadow-sm border border-black/5">
|
||||
<div class="flex items-center justify-between mb-3 text-[11px] text-[#8E8E93]">
|
||||
<span class="font-semibold text-black">首屏骨架加载态</span>
|
||||
<span class="bg-[#F2F2F7] px-2 py-0.5 rounded text-[10px]">Skeleton Screen</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 skeleton-pulse">
|
||||
<div class="bg-[#F2F2F7] rounded-[16px] p-2 flex flex-col gap-2">
|
||||
<div class="w-full aspect-square bg-[#E5E5EA] rounded-[12px]"></div>
|
||||
<div class="w-3/4 h-3.5 bg-[#E5E5EA] rounded"></div>
|
||||
<div class="w-1/2 h-2.5 bg-[#E5E5EA] rounded"></div>
|
||||
</div>
|
||||
<div class="bg-[#F2F2F7] rounded-[16px] p-2 flex flex-col gap-2">
|
||||
<div class="w-full aspect-square bg-[#E5E5EA] rounded-[12px]"></div>
|
||||
<div class="w-3/4 h-3.5 bg-[#E5E5EA] rounded"></div>
|
||||
<div class="w-1/2 h-2.5 bg-[#E5E5EA] rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
@@ -1,560 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第3屏 衣物上传（全状态画板）</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">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
ios: {
|
||||
blue: '#007AFF',
|
||||
red: '#FF3B30',
|
||||
bg: '#F2F2F7',
|
||||
card: '#FFFFFF',
|
||||
border: '#E5E5EA',
|
||||
gray: '#8E8E93',
|
||||
subtext: '#C7C7CC',
|
||||
darktext: '#1C1C1E',
|
||||
darkgray: '#3A3A3C'
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['-apple-system', 'BlinkMacSystemFont', '"SF Pro Text"', '"SF Pro Display"', '"PingFang SC"', '"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #E5E5EA;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.phone-mockup {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
position: relative;
|
||||
background-color: #F2F2F7;
|
||||
border-radius: 44px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 微信胶囊占位 */
|
||||
.wx-capsule {
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
border: 0.5px solid rgba(0,0,0,0.15);
|
||||
background: rgba(255,255,255,0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.wx-capsule-divider {
|
||||
width: 0.5px;
|
||||
height: 16px;
|
||||
background: rgba(0,0,0,0.15);
|
||||
}
|
||||
/* iOS 底部黑条 Home Indicator */
|
||||
.home-indicator {
|
||||
width: 134px;
|
||||
height: 5px;
|
||||
background-color: #000000;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 50;
|
||||
}
|
||||
/* 虚线上传区 */
|
||||
.dashed-box {
|
||||
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23C7C7CC' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
|
||||
border-radius: 20px;
|
||||
}
|
||||
/* 呼吸脉冲动效 */
|
||||
@keyframes pulse-ring {
|
||||
0% { transform: scale(0.95); opacity: 0.8; }
|
||||
50% { transform: scale(1.05); opacity: 0.3; }
|
||||
100% { transform: scale(0.95); opacity: 0.8; }
|
||||
}
|
||||
.pulse-ring {
|
||||
animation: pulse-ring 2.5s infinite ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="p-6 md:p-12 min-h-screen">
|
||||
|
||||
<!-- 页面主画板 Header 规范标注 -->
|
||||
<div class="max-w-[1600px] mx-auto mb-8 bg-white/80 backdrop-blur-md rounded-2xl p-6 border border-black/5 shadow-sm flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 rounded-full bg-[#007AFF]"></div>
|
||||
<h1 class="text-xl font-bold text-gray-900 tracking-tight">第 3 屏 ｜ 衣物上传（全状态画板）</h1>
|
||||
<span class="text-xs px-2.5 py-1 bg-blue-50 text-[#007AFF] font-medium rounded-full border border-blue-100">微信小程序二级规范 · 375 × 812 pt</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6 text-xs text-gray-500 font-mono">
|
||||
<span class="flex items-center"><span class="w-2.5 h-2.5 rounded-full bg-[#007AFF] mr-1.5"></span>主色: #007AFF</span>
|
||||
<span class="flex items-center"><span class="w-2.5 h-2.5 rounded-full bg-[#FF3B30] mr-1.5"></span>失败色: #FF3B30</span>
|
||||
<span class="flex items-center"><span class="w-2.5 h-2.5 rounded-full bg-[#F2F2F7] border border-gray-300 mr-1.5"></span>背景: #F2F2F7</span>
|
||||
<span class="text-gray-400">| 全状态交付：初始态、动作面板、处理中、失败态、额度不足</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主视图网格容器 -->
|
||||
<div class="max-w-[1600px] mx-auto">
|
||||
<!-- 第一行：三大主要屏幕流程（初始态+Sheet、处理中、失败态） -->
|
||||
<div class="flex flex-wrap lg:flex-nowrap justify-center gap-8 mb-12">
|
||||
|
||||
<!-- ====================== 1. 初始态 + 动作面板 ====================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold px-3 py-1 bg-gray-200 text-gray-700 rounded-full">状态 1 · 初始态与 iOS ActionSheet</span>
|
||||
<p class="text-[11px] text-gray-500 mt-1">40% 虚线上传区 + 底部原生 ActionSheet 面板</p>
|
||||
</div>
|
||||
|
||||
<div class="phone-mockup relative">
|
||||
<!-- 状态栏 44pt -->
|
||||
<div class="h-11 px-7 pt-3 flex justify-between items-center text-xs font-semibold tracking-tight text-black select-none z-30 relative">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-[12px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信原生导航栏 44pt -->
|
||||
<div class="h-11 px-4 flex items-center justify-between relative z-30">
|
||||
<div class="flex items-center space-x-1 text-[#007AFF] cursor-pointer active:opacity-70">
|
||||
<i class="fa-solid fa-chevron-left text-sm font-bold"></i>
|
||||
<span class="text-sm font-medium">衣橱</span>
|
||||
</div>
|
||||
<div class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">
|
||||
上传衣物
|
||||
</div>
|
||||
<!-- 微信右上角胶囊 -->
|
||||
<div class="wx-capsule">
|
||||
<div class="w-4 h-4 flex items-center justify-center">
|
||||
<span class="flex space-x-0.5">
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wx-capsule-divider"></div>
|
||||
<div class="w-4 h-4 flex items-center justify-center">
|
||||
<span class="w-2.5 h-2.5 border border-gray-900 rounded-full flex items-center justify-center">
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 背景主内容（虚化变暗，因 ActionSheet 展开） -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- 占屏约 40% 虚线上传卡片 (高约 310pt) -->
|
||||
<div class="w-full h-[310px] bg-white rounded-2xl p-6 flex flex-col items-center justify-center text-center dashed-box shadow-sm relative overflow-hidden group">
|
||||
<!-- 相机大图标 -->
|
||||
<div class="w-20 h-20 rounded-full bg-blue-50/80 flex items-center justify-center mb-4 text-[#007AFF]">
|
||||
<i class="fa-solid fa-camera text-3xl"></i>
|
||||
</div>
|
||||
<div class="text-[17px] font-semibold text-gray-900 mb-2">拍照或从相册选择</div>
|
||||
<div class="text-[12px] text-[#8E8E93] leading-relaxed max-w-[240px]">
|
||||
支持 JPG / PNG，单张不超过 20MB<br>上传消耗 1 次上传额度
|
||||
</div>
|
||||
<!-- 快捷状态角标 -->
|
||||
<div class="absolute top-3 right-3 text-[11px] px-2 py-0.5 bg-blue-50 text-[#007AFF] rounded-md font-medium">
|
||||
剩余 13 次
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下方说明文字 -->
|
||||
<div class="text-center text-[12px] text-[#8E8E93] flex items-center justify-center space-x-1.5 py-1">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-[#007AFF] text-xs"></i>
|
||||
<span>AI 将自动抠图并识别 15 项属性</span>
|
||||
</div>
|
||||
|
||||
<!-- 上传指引小卡片 -->
|
||||
<div class="bg-white rounded-2xl p-4 border border-[#E5E5EA]/60 shadow-sm space-y-2">
|
||||
<div class="text-xs font-semibold text-gray-800">📸 拍照建议以获得最佳效果：</div>
|
||||
<div class="grid grid-cols-2 gap-2 pt-1 text-[11px] text-gray-500">
|
||||
<div class="flex items-center space-x-1.5 bg-[#F2F2F7] px-2.5 py-2 rounded-xl">
|
||||
<i class="fa-solid fa-check text-green-500"></i>
|
||||
<span>平铺或悬挂单件</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1.5 bg-[#F2F2F7] px-2.5 py-2 rounded-xl">
|
||||
<i class="fa-solid fa-check text-green-500"></i>
|
||||
<span>光线充足背景整洁</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 半透明黑色蒙层 (ActionSheet Mask) -->
|
||||
<div class="absolute inset-0 bg-black/40 z-40 backdrop-blur-[1.5px] transition-all"></div>
|
||||
|
||||
<!-- 底部弹起半屏动作面板 (iOS ActionSheet) -->
|
||||
<div class="absolute bottom-0 inset-x-0 z-50 px-3 pb-8 flex flex-col items-center">
|
||||
<!-- 上层组：拍照、相册选择 (圆角 14pt) -->
|
||||
<div class="w-full bg-white/95 backdrop-blur-xl rounded-2xl overflow-hidden shadow-2xl border border-black/5">
|
||||
<!-- Grabber 提手 36×5pt -->
|
||||
<div class="pt-2.5 pb-1 flex justify-center">
|
||||
<div class="w-[36px] h-[5px] bg-[#C7C7CC] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- 面板标题/说明 -->
|
||||
<div class="py-2 text-center text-[12px] text-[#8E8E93] border-b border-[#E5E5EA]">
|
||||
选择上传方式（消耗 1 次额度）
|
||||
</div>
|
||||
|
||||
<!-- 选项 1：拍照 -->
|
||||
<button class="w-full h-14 flex items-center justify-center text-[19px] text-[#007AFF] font-medium active:bg-gray-100 transition border-b border-[#E5E5EA]">
|
||||
<i class="fa-solid fa-camera mr-2 text-base"></i>
|
||||
拍照
|
||||
</button>
|
||||
|
||||
<!-- 选项 2：从相册选择 -->
|
||||
<button class="w-full h-14 flex items-center justify-center text-[19px] text-[#007AFF] font-medium active:bg-gray-100 transition">
|
||||
<i class="fa-regular fa-image mr-2 text-base"></i>
|
||||
从相册选择
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 取消项单独成组，间隔 8pt -->
|
||||
<div class="w-full mt-2">
|
||||
<button class="w-full h-14 bg-white/95 backdrop-blur-xl rounded-2xl text-[19px] text-[#007AFF] font-semibold active:bg-gray-100 transition shadow-lg flex items-center justify-center border border-black/5">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================== 2. 处理中状态 (三步横向进度条) ====================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold px-3 py-1 bg-blue-100 text-[#007AFF] rounded-full">状态 2 · 处理中（Processing）</span>
|
||||
<p class="text-[11px] text-gray-500 mt-1">所选缩略图 + 三步横向步骤条 + 呼吸动效</p>
|
||||
</div>
|
||||
|
||||
<div class="phone-mockup relative flex flex-col justify-between">
|
||||
<div>
|
||||
<!-- 状态栏 44pt -->
|
||||
<div class="h-11 px-7 pt-3 flex justify-between items-center text-xs font-semibold tracking-tight text-black select-none">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-[12px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信原生导航栏 44pt -->
|
||||
<div class="h-11 px-4 flex items-center justify-between relative">
|
||||
<div class="flex items-center space-x-1 text-gray-400 cursor-not-allowed opacity-50">
|
||||
<i class="fa-solid fa-chevron-left text-sm font-bold"></i>
|
||||
<span class="text-sm font-medium">返回</span>
|
||||
</div>
|
||||
<div class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">
|
||||
正在处理
|
||||
</div>
|
||||
<div class="wx-capsule">
|
||||
<div class="w-4 h-4 flex items-center justify-center">
|
||||
<span class="flex space-x-0.5">
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wx-capsule-divider"></div>
|
||||
<div class="w-4 h-4 flex items-center justify-center">
|
||||
<span class="w-2.5 h-2.5 border border-gray-900 rounded-full flex items-center justify-center">
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="p-4 flex flex-col items-center">
|
||||
<!-- 顶部所选图片缩略（圆角 16pt，1:1 纯净呈现） -->
|
||||
<div class="w-44 h-44 bg-white rounded-2xl shadow-sm border border-[#E5E5EA] p-3 flex items-center justify-center relative overflow-hidden mt-2">
|
||||
<!-- 衣服简约线稿 -->
|
||||
<svg class="w-28 h-28 text-[#007AFF]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M30 20 L40 28 C45 32 55 32 60 28 L70 20 L88 32 L78 46 L70 42 L70 85 L30 85 L30 42 L22 46 L12 32 Z" />
|
||||
<path d="M40 28 C45 32 55 32 60 28" />
|
||||
<rect x="58" y="44" width="10" height="12" rx="1.5" stroke-dasharray="2 2" />
|
||||
</svg>
|
||||
<!-- 扫描光线动效示意 -->
|
||||
<div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-transparent via-[#007AFF] to-transparent animate-pulse"></div>
|
||||
<!-- 正在处理呼吸标签 -->
|
||||
<div class="absolute bottom-2.5 px-2 py-0.5 bg-black/60 backdrop-blur-md rounded-full text-[10px] text-white flex items-center space-x-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-[#007AFF] animate-ping"></span>
|
||||
<span>分析中...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中部卡片：三步横向步骤条 -->
|
||||
<div class="w-full bg-white rounded-2xl p-5 mt-6 shadow-sm border border-[#E5E5EA]">
|
||||
<div class="text-xs font-semibold text-gray-500 mb-4 text-center">AI 识别流水线</div>
|
||||
|
||||
<!-- 步骤进度条容器 -->
|
||||
<div class="relative flex items-center justify-between px-3">
|
||||
<!-- 步骤连接线 -->
|
||||
<div class="absolute top-[13px] left-8 right-8 h-[2px] bg-[#E5E5EA] -z-0">
|
||||
<!-- 已完成阶段连线（前段蓝线高亮） -->
|
||||
<div class="h-full bg-[#007AFF] w-1/2"></div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤 1：排队中（已完成 -> 绿/蓝勾） -->
|
||||
<div class="flex flex-col items-center relative z-10">
|
||||
<div class="w-7 h-7 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-xs font-bold shadow-sm">
|
||||
<i class="fa-solid fa-check text-[11px]"></i>
|
||||
</div>
|
||||
<span class="text-[12px] font-medium text-gray-800 mt-2">排队中</span>
|
||||
<span class="text-[10px] text-gray-400">已就绪</span>
|
||||
</div>
|
||||
|
||||
<!-- 步骤 2：AI 抠图（当前进行中 -> 蓝实心 + 脉冲呼吸圈） -->
|
||||
<div class="flex flex-col items-center relative z-10">
|
||||
<div class="relative flex items-center justify-center">
|
||||
<div class="w-7 h-7 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-xs font-bold shadow-md">
|
||||
<span class="w-2.5 h-2.5 bg-white rounded-full"></span>
|
||||
</div>
|
||||
<div class="absolute -inset-1 rounded-full bg-[#007AFF]/30 pulse-ring -z-10"></div>
|
||||
</div>
|
||||
<span class="text-[12px] font-bold text-[#007AFF] mt-2">AI 抠图</span>
|
||||
<span class="text-[10px] text-[#007AFF] font-medium">进行中</span>
|
||||
</div>
|
||||
|
||||
<!-- 步骤 3：智能分类（未开始 -> 浅灰圆点） -->
|
||||
<div class="flex flex-col items-center relative z-10">
|
||||
<div class="w-7 h-7 rounded-full bg-[#E5E5EA] text-[#8E8E93] flex items-center justify-center text-xs font-bold">
|
||||
<span class="w-2 h-2 bg-[#8E8E93] rounded-full"></span>
|
||||
</div>
|
||||
<span class="text-[12px] font-medium text-[#8E8E93] mt-2">智能分类</span>
|
||||
<span class="text-[10px] text-gray-400">等待中</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文案说明与等待情绪缓和 -->
|
||||
<div class="text-center mt-6 space-y-1.5">
|
||||
<div class="text-[17px] font-bold text-gray-900 tracking-tight">
|
||||
AI 正在识别你的衣物…
|
||||
</div>
|
||||
<div class="text-[13px] text-[#8E8E93]">
|
||||
通常需要 10 秒左右，请稍候
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提示小贴士 -->
|
||||
<div class="mt-8 bg-blue-50/70 border border-blue-100 rounded-xl p-3.5 max-w-[280px] flex items-start space-x-2 text-left">
|
||||
<i class="fa-solid fa-circle-info text-[#007AFF] text-xs mt-0.5"></i>
|
||||
<div class="text-[11px] text-gray-600 leading-relaxed">
|
||||
处理完成后将自动跳转至衣物详情页，您可微调 15 维智能识别属性。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部占位 -->
|
||||
<div class="p-4 mb-3 text-center">
|
||||
<span class="text-[11px] text-gray-400">支持切换至后台运行，识别成功后通知推送</span>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================== 3. 失败态 (识别失败：图片抠图失败) ====================== -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold px-3 py-1 bg-red-100 text-[#FF3B30] rounded-full">状态 3 · 失败态（Error Fallback）</span>
|
||||
<p class="text-[11px] text-gray-500 mt-1">红感叹号 + 额度回退声明 + 双操作分支</p>
|
||||
</div>
|
||||
|
||||
<div class="phone-mockup relative flex flex-col justify-between">
|
||||
<div>
|
||||
<!-- 状态栏 44pt -->
|
||||
<div class="h-11 px-7 pt-3 flex justify-between items-center text-xs font-semibold tracking-tight text-black select-none">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-[12px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信原生导航栏 44pt -->
|
||||
<div class="h-11 px-4 flex items-center justify-between relative">
|
||||
<div class="flex items-center space-x-1 text-[#007AFF] cursor-pointer active:opacity-70">
|
||||
<i class="fa-solid fa-chevron-left text-sm font-bold"></i>
|
||||
<span class="text-sm font-medium">衣橱</span>
|
||||
</div>
|
||||
<div class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">
|
||||
上传结果
|
||||
</div>
|
||||
<div class="wx-capsule">
|
||||
<div class="w-4 h-4 flex items-center justify-center">
|
||||
<span class="flex space-x-0.5">
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wx-capsule-divider"></div>
|
||||
<div class="w-4 h-4 flex items-center justify-center">
|
||||
<span class="w-2.5 h-2.5 border border-gray-900 rounded-full flex items-center justify-center">
|
||||
<span class="w-1 h-1 bg-gray-900 rounded-full"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 核心失败内容展示 -->
|
||||
<div class="p-6 flex flex-col items-center text-center mt-6">
|
||||
<!-- 红色大感叹号圆环图标 -->
|
||||
<div class="w-20 h-20 rounded-full bg-red-50 border border-red-100 flex items-center justify-center mb-5 text-[#FF3B30] shadow-sm">
|
||||
<i class="fa-solid fa-circle-exclamation text-4xl"></i>
|
||||
</div>
|
||||
|
||||
<!-- 主错误文案 -->
|
||||
<div class="text-[19px] font-bold text-gray-900 mb-2">
|
||||
识别失败：图片抠图失败
|
||||
</div>
|
||||
|
||||
<!-- 额度退回核心安全感说明 -->
|
||||
<div class="inline-flex items-center space-x-1.5 px-3 py-1.5 bg-green-50 border border-green-200/80 rounded-full text-green-700 text-xs font-medium mb-3">
|
||||
<i class="fa-solid fa-shield-check text-[11px]"></i>
|
||||
<span>本次上传额度已自动退回</span>
|
||||
</div>
|
||||
|
||||
<div class="text-[13px] text-[#8E8E93] leading-relaxed max-w-[260px]">
|
||||
可能是衣物轮廓不够清晰、背景与衣服颜色过于接近，或光线过暗导致。
|
||||
</div>
|
||||
|
||||
<!-- 建议排查卡片 -->
|
||||
<div class="w-full bg-white rounded-2xl p-4 mt-6 border border-[#E5E5EA] text-left space-y-2 text-xs">
|
||||
<div class="font-semibold text-gray-800 flex items-center space-x-1">
|
||||
<i class="fa-solid fa-lightbulb text-amber-500"></i>
|
||||
<span>建议尝试：</span>
|
||||
</div>
|
||||
<ul class="list-disc list-inside text-gray-500 space-y-1 text-[11px]">
|
||||
<li>将衣物平铺在纯色（如纯白/木质地板）背景上</li>
|
||||
<li>避免画面中同时出现多件杂物</li>
|
||||
<li>开启室内照明或闪光灯重新拍摄</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部双操作按钮 -->
|
||||
<div class="p-4 pb-8 space-y-3 bg-white border-t border-[#E5E5EA]">
|
||||
<!-- 重新上传主按钮 -->
|
||||
<button class="w-full h-12 rounded-xl bg-[#007AFF] text-white font-semibold text-[16px] shadow-md shadow-blue-500/20 active:opacity-80 flex items-center justify-center space-x-2">
|
||||
<i class="fa-solid fa-arrow-rotate-right text-sm"></i>
|
||||
<span>重新上传</span>
|
||||
</button>
|
||||
|
||||
<!-- 手动填写信息描边按钮 -->
|
||||
<button class="w-full h-12 rounded-xl bg-white border border-[#E5E5EA] text-gray-800 font-semibold text-[16px] active:bg-gray-50 flex items-center justify-center space-x-2">
|
||||
<i class="fa-regular fa-pen-to-square text-sm text-[#007AFF]"></i>
|
||||
<span>手动填写信息</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ====================== 第二行：异常拦截规范与业务对照 ====================== -->
|
||||
<div class="bg-white rounded-3xl p-6 md:p-8 border border-black/5 shadow-sm">
|
||||
<div class="flex items-center space-x-2 mb-6">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
|
||||
<h2 class="text-base font-bold text-gray-900">第 3 屏 异常拦截规范与设计核查表</h2>
|
||||
<span class="text-xs text-gray-400 font-normal">（遵循 iOS HIG Alert 对话框规范与小程序异步额度防重机制）</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
|
||||
<!-- 弹窗 1：上传额度不足 Alert 弹窗高保真 -->
|
||||
<div class="bg-[#F2F2F7] p-6 rounded-2xl border border-[#E5E5EA] flex flex-col items-center">
|
||||
<div class="text-xs font-semibold text-gray-500 mb-3">场景：上传前额度为 0 拦截（iOS Alert 规范）</div>
|
||||
|
||||
<!-- 经典 iOS 居中弹窗卡片 270pt 宽 -->
|
||||
<div class="w-[270px] bg-white/90 backdrop-blur-2xl rounded-[14px] overflow-hidden shadow-2xl text-center border border-black/10">
|
||||
<div class="pt-5 px-4 pb-4">
|
||||
<div class="w-10 h-10 rounded-full bg-red-50 text-[#FF3B30] flex items-center justify-center mx-auto mb-2.5">
|
||||
<i class="fa-solid fa-ticket text-lg"></i>
|
||||
</div>
|
||||
<div class="text-[17px] font-bold text-gray-900 tracking-tight">上传额度不足</div>
|
||||
<div class="text-[13px] text-gray-600 mt-1.5 leading-relaxed">
|
||||
当前剩余 0 次，购买额度包后可继续上传
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分割线与按钮组（iOS 双键并排规范） -->
|
||||
<div class="border-t border-[#3C3C43]/20 flex divide-x divide-[#3C3C43]/20 h-[44px]">
|
||||
<button class="flex-1 text-[17px] text-[#007AFF] font-normal flex items-center justify-center active:bg-black/5 transition">
|
||||
取消
|
||||
</button>
|
||||
<button class="flex-1 text-[17px] text-[#007AFF] font-bold flex items-center justify-center active:bg-black/5 transition">
|
||||
去购买
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-[11px] text-gray-400 mt-4 text-center">
|
||||
符合微信小程序与 iOS 居中 Alert 标准，点击「去购买」直接吊起轻量充值半屏。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 规范核查与交互说明 -->
|
||||
<div class="space-y-4">
|
||||
<div class="bg-[#F2F2F7] p-5 rounded-2xl border border-[#E5E5EA] space-y-3">
|
||||
<div class="text-xs font-bold text-gray-800 flex items-center space-x-1.5">
|
||||
<i class="fa-solid fa-list-check text-[#007AFF]"></i>
|
||||
<span>关键设计与业务逻辑核对</span>
|
||||
</div>
|
||||
<ul class="text-[12px] text-gray-600 space-y-2.5">
|
||||
<li class="flex items-start space-x-2">
|
||||
<span class="text-[#007AFF] font-bold">1.</span>
|
||||
<span><strong>占屏约 40% 虚线框</strong>：精确控制在 310pt 高度，居中布局大相机图标、规格说明（JPG/PNG、20MB 内）与额度提示。</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<span class="text-[#007AFF] font-bold">2.</span>
|
||||
<span><strong>iOS ActionSheet 标准规格</strong>：顶部附带 36×5pt 胶囊 Grabber，选项间配备 0.5px 发丝线；取消项独立成组并与上方保留严格 8pt 间距。</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<span class="text-[#007AFF] font-bold">3.</span>
|
||||
<span><strong>三步横向步骤条</strong>：清晰划分「排队中（对勾）→ AI 抠图（实心蓝+呼吸动效进行中）→ 智能分类（浅灰圆点等待中）」，并标注文案「AI 正在识别你的衣物… 通常需要 10 秒左右」。</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<span class="text-[#007AFF] font-bold">4.</span>
|
||||
<span><strong>识别失败与额度返还</strong>：明确提示「识别失败：图片抠图失败」并突出强调「本次上传额度已自动退回」，同时提供「重新上传」与「手动填写信息」双兜底通道。</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<span class="text-[#007AFF] font-bold">5.</span>
|
||||
<span><strong>额度不足前置拦截</strong>：当剩余上传额度为 0 时，用户点击上传区域或入口即刻弹出 270pt iOS Alert 居中弹窗，避免无谓触发相机权限。</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 417 KiB |
@@ -1,571 +0,0 @@
|
||||
<!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.
|
Before Width: | Height: | Size: 276 KiB |
@@ -1,465 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第 5 屏 穿搭（tabBar）</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=PingFang+SC:wght@400;500;600;700&display=swap');
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #E5E9F0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
}
|
||||
.iphone-canvas {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
position: relative;
|
||||
background-color: #F2F2F7;
|
||||
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.15), 0 0 1px 1px rgba(0,0,0,0.06);
|
||||
border-radius: 44px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.frosted-bar {
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background-color: rgba(249, 249, 249, 0.88);
|
||||
border-bottom: 0.5px solid rgba(60, 60, 67, 0.2);
|
||||
}
|
||||
.frosted-tabbar {
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background-color: rgba(249, 249, 249, 0.88);
|
||||
border-top: 0.5px solid rgba(60, 60, 67, 0.2);
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.tabular-num {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="p-8 flex flex-col items-center justify-center min-h-screen gap-8">
|
||||
|
||||
<!-- 顶部面包屑与画板规范标 -->
|
||||
<div class="flex items-center justify-between w-full max-w-[1020px] text-xs font-medium text-slate-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>
|
||||
<span class="font-semibold text-slate-800 text-sm">第 5 屏 ｜ 穿搭 (tabBar)</span>
|
||||
<span class="text-slate-400">iPhone 375 × 812 pt · 微信小程序规范</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2.5 py-0.5 rounded-full bg-blue-50 text-[#007AFF] text-[11px] font-semibold">我的穿搭 / 已收藏分段流</span>
|
||||
<span class="px-2.5 py-0.5 rounded-full bg-slate-100 text-slate-600 text-[11px]">拼图式衣物封面</span>
|
||||
<span class="px-2.5 py-0.5 rounded-full bg-slate-100 text-slate-600 text-[11px]">伴生双态空状态</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主画板展示区域：包含主视图 (iPhone 375x812) + 右侧/下方伴生空态规格 -->
|
||||
<div class="flex flex-col lg:flex-row items-start gap-8">
|
||||
|
||||
<!-- 主画板：穿搭主屏 (tabBar 选中态) -->
|
||||
<div class="iphone-canvas flex flex-col border-[6px] border-[#1C1C1E]">
|
||||
|
||||
<!-- 微信小程序原生顶部状态栏与胶囊栏 -->
|
||||
<div class="frosted-bar pt-3 pb-2.5 px-4 sticky top-0 z-30 flex-shrink-0">
|
||||
<!-- iOS 顶部状态栏 -->
|
||||
<div class="flex justify-between items-center text-[12px] font-semibold text-black mb-2 px-1 tracking-tight">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<!-- 信号 -->
|
||||
<svg class="w-3.5 h-2.5" viewBox="0 0 18 12" fill="currentColor">
|
||||
<rect x="0" y="8" width="3" height="4" rx="0.5"/>
|
||||
<rect x="4.5" y="5.5" width="3" height="6.5" rx="0.5"/>
|
||||
<rect x="9" y="3" width="3" height="9" rx="0.5"/>
|
||||
<rect x="13.5" y="0" width="3" height="12" rx="0.5"/>
|
||||
</svg>
|
||||
<!-- 5G / Wifi -->
|
||||
<svg class="w-3.5 h-3" viewBox="0 0 16 12" fill="currentColor">
|
||||
<path d="M8 3.5C5.2 3.5 2.7 4.7 1 6.6L8 12L15 6.6C13.3 4.7 10.8 3.5 8 3.5Z"/>
|
||||
</svg>
|
||||
<!-- 电池 -->
|
||||
<div class="w-5 h-2.5 border border-black rounded-[3px] p-0.5 flex items-center">
|
||||
<div class="w-full h-full bg-black rounded-[1px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信小程序导航栏：居中页面标题 + 右侧微信胶囊 -->
|
||||
<div class="relative h-10 flex items-center justify-center">
|
||||
<span class="text-[17px] font-semibold text-black tracking-tight">穿搭</span>
|
||||
|
||||
<!-- 微信原生胶囊按钮 (固定右上角) -->
|
||||
<div class="absolute right-0 h-8 px-2.5 rounded-full border border-black/15 bg-white/70 backdrop-blur-md flex items-center gap-2 shadow-sm">
|
||||
<span class="flex items-center gap-0.5 text-black">
|
||||
<span class="w-1 h-1 rounded-full bg-black"></span>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-black"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-black"></span>
|
||||
</span>
|
||||
<div class="w-[0.5px] h-3.5 bg-black/20"></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 rounded-full bg-black"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面核心内容滚动区域 -->
|
||||
<div class="flex-1 overflow-y-auto hide-scrollbar px-4 pt-3 pb-24 space-y-3.5">
|
||||
|
||||
<!-- 1. 分段控件 (Segmented Control)：我的穿搭 / 已收藏 -->
|
||||
<div class="p-0.5 bg-[#767680]/12 rounded-[9px] flex items-center relative text-[13px] font-medium">
|
||||
<!-- 选中滑块 (我的穿搭) -->
|
||||
<button class="flex-1 py-1.5 text-center font-semibold text-[#007AFF] bg-white rounded-[7px] shadow-sm transition-all flex items-center justify-center gap-1">
|
||||
<span>我的穿搭</span>
|
||||
<span class="text-[11px] text-[#007AFF]/80 font-normal tabular-num">(12)</span>
|
||||
</button>
|
||||
<button class="flex-1 py-1.5 text-center text-[#8E8E93] hover:text-black transition-all flex items-center justify-center gap-1">
|
||||
<span>已收藏</span>
|
||||
<span class="text-[11px] text-[#8E8E93] tabular-num">(5)</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 2. 功能操作入口条：+ 创建穿搭 与 AI 推荐 -->
|
||||
<div class="flex items-center justify-between pt-0.5 pb-1">
|
||||
<div class="text-[11px] text-[#8E8E93]">
|
||||
共 12 套穿搭组合
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- 描边小按钮：+ 创建穿搭 -->
|
||||
<button class="h-7 px-2.5 rounded-full border border-[#007AFF] text-[#007AFF] text-[12px] font-medium flex items-center gap-1 bg-white active:bg-blue-50">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
||||
</svg>
|
||||
<span>创建穿搭</span>
|
||||
</button>
|
||||
<!-- 系统蓝小按钮：AI 推荐 -->
|
||||
<button class="h-7 px-3 rounded-full bg-[#007AFF] text-white text-[12px] font-medium flex items-center gap-1.5 shadow-sm active:opacity-80">
|
||||
<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/>
|
||||
</svg>
|
||||
<span>AI 推荐</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 纵向穿搭卡片流 -->
|
||||
|
||||
<!-- 卡片 1：初秋通勤三件套 (4件衣物拼图，状态：AI 推荐，已公开/已收藏态展示) -->
|
||||
<div class="bg-white rounded-[16px] overflow-hidden p-3.5 shadow-sm border border-black/5 active:scale-[0.99] transition-transform">
|
||||
<!-- 拼图式封面横图 (4件衣物抠图错落摆放) -->
|
||||
<div class="w-full h-44 bg-[#F2F2F7] rounded-[12px] p-2 relative overflow-hidden flex items-center justify-around">
|
||||
<!-- 柔和浅影或底色衬托 -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-white/40 to-transparent pointer-events-none"></div>
|
||||
|
||||
<!-- 衣物 1: 白色纯棉T恤 -->
|
||||
<div class="w-20 h-28 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform -rotate-3 hover:rotate-0 transition-transform">
|
||||
<svg class="w-12 h-14 text-[#007AFF]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M30 20 C40 30 60 30 70 20 L88 32 L78 48 L68 42 L68 85 L32 85 L32 42 L22 48 L12 32 Z" fill="#F8FAFC"/>
|
||||
<rect x="54" y="44" width="10" height="12" rx="1.5" stroke-width="4"/>
|
||||
</svg>
|
||||
<span class="text-[9px] text-slate-500 mt-1 font-medium scale-90">纯棉短T</span>
|
||||
</div>
|
||||
|
||||
<!-- 衣物 2: 复古高腰牛仔裤 (错落重叠) -->
|
||||
<div class="w-20 h-32 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform translate-y-1 rotate-2">
|
||||
<svg class="w-12 h-18 text-[#007AFF]" viewBox="0 0 100 120" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M25 15 L75 15 L72 105 L52 105 L50 48 L48 105 L28 105 Z" fill="#F8FAFC"/>
|
||||
<line x1="25" y1="28" x2="75" y2="28" stroke-width="3"/>
|
||||
<path d="M42 15 L42 34 L58 34 L58 15" stroke-width="3"/>
|
||||
</svg>
|
||||
<span class="text-[9px] text-slate-500 mt-0.5 font-medium scale-90">牛仔裤</span>
|
||||
</div>
|
||||
|
||||
<!-- 衣物 3: 燕麦色针织开衫 (外套) -->
|
||||
<div class="w-20 h-28 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform -rotate-2">
|
||||
<svg class="w-12 h-14 text-[#007AFF]" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M32 20 L50 36 L68 20 L88 30 L80 82 L66 78 L66 40 L66 85 L34 85 L34 40 L34 78 L20 82 L12 30 Z" fill="#F8FAFC"/>
|
||||
<circle cx="50" cy="50" r="2" fill="currentColor"/>
|
||||
<circle cx="50" cy="65" r="2" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="text-[9px] text-slate-500 mt-1 font-medium scale-90">针织开衫</span>
|
||||
</div>
|
||||
|
||||
<!-- 衣物 4: 乐福鞋 / 简约配饰 -->
|
||||
<div class="w-16 h-22 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform translate-y-3 rotate-4">
|
||||
<svg class="w-10 h-10 text-[#007AFF]" viewBox="0 0 100 80" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 50 C25 25 65 30 85 45 C90 58 75 62 60 62 L20 62 C15 62 12 56 15 50 Z" fill="#F8FAFC"/>
|
||||
<line x1="20" y1="62" x2="28" y2="70" stroke-width="6"/>
|
||||
<line x1="55" y1="62" x2="62" y2="70" stroke-width="6"/>
|
||||
</svg>
|
||||
<span class="text-[9px] text-slate-500 mt-0.5 font-medium scale-90">乐福鞋</span>
|
||||
</div>
|
||||
|
||||
<!-- 右下角衣物数量小角标 -->
|
||||
<div class="absolute bottom-2 right-2 px-1.5 py-0.5 rounded-md bg-black/40 backdrop-blur-sm text-white text-[10px] font-medium">
|
||||
4 件组合
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片信息区 -->
|
||||
<div class="mt-3 space-y-1.5">
|
||||
<!-- 第一行：穿搭名 + 状态标签 -->
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-[16px] font-bold text-black tracking-tight">初秋通勤三件套</h3>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<!-- AI 推荐状态标签 (系统靛蓝 #5856D6) -->
|
||||
<span class="px-2 py-0.5 rounded-[5px] bg-[#5856D6]/10 text-[#5856D6] text-[11px] font-medium flex items-center gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-[#5856D6]"></span>
|
||||
AI 推荐
|
||||
</span>
|
||||
<!-- 已公开 (系统蓝) -->
|
||||
<span class="px-2 py-0.5 rounded-[5px] bg-[#007AFF]/10 text-[#007AFF] text-[11px] font-medium">已公开</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：穿搭描述 (两行截断) -->
|
||||
<p class="text-[13px] text-[#3C3C43]/90 leading-snug line-clamp-2">
|
||||
白T配直筒牛仔裤，清爽干净，外搭浅燕麦开衫保暖又有层次，适合初秋通勤与日常出行。
|
||||
</p>
|
||||
|
||||
<!-- 第三行：场景标签 + 灰色小字「4 件衣物」 与 底部互动栏 (点赞与收藏) -->
|
||||
<div class="flex items-center justify-between pt-1.5 border-t border-[#E5E5EA]/60 mt-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-0.5 rounded-[4px] bg-[#F2F2F7] text-[#000000] text-[11px] font-medium">通勤</span>
|
||||
<span class="px-2 py-0.5 rounded-[4px] bg-[#F2F2F7] text-[#000000] text-[11px] font-medium">休闲</span>
|
||||
<span class="text-[12px] text-[#8E8E93]">4 件衣物</span>
|
||||
</div>
|
||||
|
||||
<!-- 右侧互动操作：点赞 (128) + 收藏 (已收藏为系统蓝实心) -->
|
||||
<div class="flex items-center gap-3.5">
|
||||
<!-- 点赞 (心形) -->
|
||||
<div class="flex items-center gap-1 text-[#8E8E93] hover:text-[#FF2D55] transition-colors">
|
||||
<svg class="w-4 h-4 text-[#FF2D55] fill-[#FF2D55]" viewBox="0 0 24 24">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||||
</svg>
|
||||
<span class="text-[12px] text-[#3C3C43] font-medium tabular-num">128</span>
|
||||
</div>
|
||||
|
||||
<!-- 收藏 (已收藏为系统蓝实心 star) -->
|
||||
<div class="flex items-center text-[#007AFF]">
|
||||
<svg class="w-4 h-4 fill-[#007AFF]" viewBox="0 0 24 24">
|
||||
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 2：周末法式漫步装 (状态：仅自己可见，未收藏线框) -->
|
||||
<div class="bg-white rounded-[16px] overflow-hidden p-3.5 shadow-sm border border-black/5 active:scale-[0.99] transition-transform">
|
||||
<!-- 拼图封面 (3件衣物) -->
|
||||
<div class="w-full h-44 bg-[#F2F2F7] rounded-[12px] p-2 relative overflow-hidden flex items-center justify-around">
|
||||
<!-- 连衣裙 -->
|
||||
<div class="w-24 h-34 bg-white/90 rounded-[10px] shadow-sm flex flex-col items-center justify-center p-1 relative transform -rotate-1">
|
||||
<svg class="w-14 h-22 text-[#007AFF]" viewBox="0 0 100 120" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M38 18 C44 24 56 24 62 18 L76 26 L68 44 L58 40 L72 108 L28 108 L42 40 L32 44 L24 26 Z" fill="#F8FAFC"/>
|
||||
<line x1="42" y1="44" x2="58" y2="44" stroke-width="3"/>
|
||||
</svg>
|
||||
<span class="text-[9px] text-slate-500 mt-1 font-medium scale-90">碎花茶歇裙</span>
|
||||
</div>
|
||||
|
||||
<!-- 草编斜挎包与小皮鞋 -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="w-18 h-16 bg-white/90 rounded-[8px] shadow-sm flex flex-col items-center justify-center p-1">
|
||||
<svg class="w-8 h-8 text-[#007AFF]" viewBox="0 0 80 80" fill="none" stroke="currentColor" stroke-width="5">
|
||||
<rect x="20" y="32" width="40" height="36" rx="4" fill="#F8FAFC"/>
|
||||
<path d="M28 32 C28 18 52 18 52 32"/>
|
||||
</svg>
|
||||
<span class="text-[8px] text-slate-500 font-medium scale-80">斜挎包</span>
|
||||
</div>
|
||||
<div class="w-18 h-14 bg-white/90 rounded-[8px] shadow-sm flex flex-col items-center justify-center p-1">
|
||||
<svg class="w-8 h-6 text-[#007AFF]" viewBox="0 0 80 60" fill="none" stroke="currentColor" stroke-width="5">
|
||||
<path d="M12 40 C22 20 58 24 72 36 C76 46 64 50 50 50 L18 50 Z" fill="#F8FAFC"/>
|
||||
</svg>
|
||||
<span class="text-[8px] text-slate-500 font-medium scale-80">玛丽珍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-2 right-2 px-1.5 py-0.5 rounded-md bg-black/40 backdrop-blur-sm text-white text-[10px] font-medium">
|
||||
3 件组合
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片信息区 -->
|
||||
<div class="mt-3 space-y-1.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-[16px] font-bold text-black tracking-tight">周末法式漫步装</h3>
|
||||
<!-- 状态标签：仅自己可见 (系统灰) -->
|
||||
<span class="px-2 py-0.5 rounded-[5px] bg-[#8E8E93]/10 text-[#8E8E93] text-[11px] font-medium">仅自己可见</span>
|
||||
</div>
|
||||
|
||||
<p class="text-[13px] text-[#3C3C43]/90 leading-snug line-clamp-2">
|
||||
法式碎花中长裙搭配复古玛丽珍鞋与浅色手袋，轻盈惬意，适合周末野餐、画展或咖啡约会。
|
||||
</p>
|
||||
|
||||
<div class="flex items-center justify-between pt-1.5 border-t border-[#E5E5EA]/60 mt-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-0.5 rounded-[4px] bg-[#F2F2F7] text-[#000000] text-[11px] font-medium">约会</span>
|
||||
<span class="px-2 py-0.5 rounded-[4px] bg-[#F2F2F7] text-[#000000] text-[11px] font-medium">假日</span>
|
||||
<span class="text-[12px] text-[#8E8E93]">3 件衣物</span>
|
||||
</div>
|
||||
|
||||
<!-- 互动操作：点赞 + 收藏 (未收藏为线框) -->
|
||||
<div class="flex items-center gap-3.5">
|
||||
<div class="flex items-center gap-1 text-[#8E8E93]">
|
||||
<svg class="w-4 h-4 text-[#8E8E93]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/>
|
||||
</svg>
|
||||
<span class="text-[12px] text-[#8E8E93] font-medium tabular-num">14</span>
|
||||
</div>
|
||||
|
||||
<!-- 未收藏态 (线框 star) -->
|
||||
<div class="flex items-center text-[#8E8E93] hover:text-[#007AFF]">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 触底轻提示 -->
|
||||
<div class="text-center py-2 text-[11px] text-[#C7C7CC]">
|
||||
已经到底了 · 点击右上角可生成更多穿搭
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 微信小程序标准 5-tabBar (穿搭当前为系统蓝选中态) -->
|
||||
<div class="frosted-tabbar absolute bottom-0 inset-x-0 h-[64px] pb-3 pt-1.5 px-4 flex justify-between items-center z-30">
|
||||
<!-- 1. 衣橱 -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 text-[#8E8E93] active:opacity-70">
|
||||
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4a2 2 0 00-2 2c0 .738.404 1.376 1 1.723V9H4.25A2.25 2.25 0 002 11.25v.75a2 2 0 002 2h16a2 2 0 002-2v-.75A2.25 2.25 0 0019.75 9H13V7.723A2.002 2.002 0 0014 6a2 2 0 00-2-2z"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium mt-0.5">衣橱</span>
|
||||
</div>
|
||||
|
||||
<!-- 2. 穿搭 (选中态: #007AFF) -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 text-[#007AFF]">
|
||||
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
|
||||
<path d="M7 3l4 3 4-3 5 4-3 4-2-1v10H9V10L7 11 4 7l3-4z"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-semibold mt-0.5">穿搭</span>
|
||||
</div>
|
||||
|
||||
<!-- 3. 运势 -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 text-[#8E8E93]">
|
||||
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
|
||||
<path d="M12 3v18M3 12h18M5.5 5.5l13 13M18.5 5.5l-13 13"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium mt-0.5">运势</span>
|
||||
</div>
|
||||
|
||||
<!-- 4. 通知 -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 text-[#8E8E93] relative">
|
||||
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
|
||||
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium mt-0.5">通知</span>
|
||||
</div>
|
||||
|
||||
<!-- 5. 我的 -->
|
||||
<div class="flex flex-col items-center justify-center flex-1 text-[#8E8E93]">
|
||||
<svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium mt-0.5">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Home Indicator -->
|
||||
<div class="absolute bottom-1 inset-x-0 flex justify-center pointer-events-none z-40">
|
||||
<div class="w-32 h-1 bg-black/40 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 右侧伴生设计规范：包含空态规范（我的穿搭空态 / 收藏空态）与拼图封面规则 -->
|
||||
<div class="w-full max-w-[480px] space-y-5">
|
||||
|
||||
<!-- 规范说明卡片 -->
|
||||
<div class="bg-white rounded-[20px] p-5 shadow-sm border border-slate-200/80">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-[#007AFF]"></span>
|
||||
<h4 class="text-sm font-bold text-slate-800 tracking-tight">伴生状态规范（严格遵循全局与微信小程序约定）</h4>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500 leading-relaxed mb-4">
|
||||
穿搭页承担用户核心审美与搭配沉淀。支持「我的穿搭」与「已收藏」双分段切换。卡片统一为白底 <code class="text-[#007AFF] bg-blue-50 px-1 py-0.5 rounded text-[11px]">16pt</code> 圆角，内嵌多件衣物抠图错落拼图封面（最多10件）。
|
||||
</p>
|
||||
|
||||
<!-- 伴生空态 1：我的穿搭空态 -->
|
||||
<div class="border border-slate-100 bg-[#F2F2F7]/70 rounded-[16px] p-5 text-center flex flex-col items-center justify-center mb-4">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100/70 text-[#007AFF] flex items-center justify-center mb-2.5">
|
||||
<!-- 线性穿搭组合图标 -->
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
|
||||
<path d="M7 3l4 3 4-3 5 4-3 4-2-1v10H9V10L7 11 4 7l3-4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-[15px] font-bold text-[#000000] mb-1">还没有穿搭</div>
|
||||
<div class="text-[12px] text-[#8E8E93] mb-3">从衣橱挑几件，搭一套吧</div>
|
||||
<button class="h-8 px-4 rounded-[8px] bg-[#007AFF] text-white text-[12px] font-semibold flex items-center gap-1.5 shadow-sm">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
||||
</svg>
|
||||
<span>创建穿搭</span>
|
||||
</button>
|
||||
<div class="text-[10px] text-slate-400 mt-2 font-mono">「我的穿搭」Tab 空状态</div>
|
||||
</div>
|
||||
|
||||
<!-- 伴生空态 2：已收藏 Tab 空态 -->
|
||||
<div class="border border-slate-100 bg-[#F2F2F7]/70 rounded-[16px] p-4 text-center flex flex-col items-center justify-center">
|
||||
<div class="w-9 h-9 rounded-full bg-slate-200/60 text-[#8E8E93] flex items-center justify-center mb-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-[14px] font-semibold text-[#000000] mb-0.5">还没有收藏的穿搭</div>
|
||||
<div class="text-[11px] text-[#8E8E93]">在社区或AI推荐中点亮小星星，喜欢的穿搭会出现在这里</div>
|
||||
<div class="text-[10px] text-slate-400 mt-2 font-mono">「已收藏」Tab 空状态</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视觉规范自查清单 -->
|
||||
<div class="bg-white rounded-[20px] p-4 shadow-sm border border-slate-200/80 text-xs space-y-2.5 text-slate-600">
|
||||
<div class="font-semibold text-slate-900 text-xs">📐 规范落地核查表</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span><b>分段控件</b>：iOS 标配微滑块，未选中态字色 #8E8E93</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span><b>两项操作入口</b>：描边「+ 创建穿搭」+ 实心系统蓝「AI 推荐」</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span><b>拼图封面</b>：浅灰圆角底 + 单件抠图微旋转错落排布，右下角标数量</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span><b>三态标签</b>：仅自己可见（灰）、已公开（蓝）、AI推荐（#5856D6 靛蓝）</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span><b>交互图标</b>：点赞（heart）+ 收藏（star，未收藏线框 / 已收藏实心蓝）</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 285 KiB |
@@ -1,582 +0,0 @@
|
||||
<!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.
|
Before Width: | Height: | Size: 515 KiB |
@@ -1,626 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第 7 屏 ｜ AI 穿搭推荐 - 纸条AI衣橱</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=PingFang+SC:wght@400;500;600;700&display=swap');
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #ECEEF2;
|
||||
color: #1C1C1E;
|
||||
margin: 0;
|
||||
padding: 32px 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.device-shell {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #F2F2F7;
|
||||
border-radius: 44px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.16), 0 0 0 10px #1C1C1E, 0 0 0 12px #2C2C2E;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
padding: 12px 20px 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
z-index: 50;
|
||||
}
|
||||
.capsule {
|
||||
height: 32px;
|
||||
width: 87px;
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.18);
|
||||
border-radius: 16px;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.capsule-divider {
|
||||
width: 0.5px;
|
||||
height: 18px;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.nav-header {
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
.safe-bottom {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.hairline-b {
|
||||
border-bottom: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.hairline-t {
|
||||
border-top: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.ios-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.pulse-glow {
|
||||
animation: pulseGlow 2.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulseGlow {
|
||||
0%, 100% { transform: scale(1); opacity: 0.85; }
|
||||
50% { transform: scale(1.04); opacity: 1; filter: drop-shadow(0 8px 16px rgba(0, 122, 255, 0.25)); }
|
||||
}
|
||||
.spin-slow {
|
||||
animation: spin 9s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col items-center justify-start gap-8">
|
||||
|
||||
<!-- 页面主画板 Header 标头信息 -->
|
||||
<header class="w-full max-w-[1580px] flex items-center justify-between px-2 pt-2">
|
||||
<div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-[#007AFF] inline-block shadow-sm"></span>
|
||||
<h1 class="text-2xl font-bold text-gray-900 tracking-tight">第 7 屏 ｜ AI 穿搭推荐</h1>
|
||||
<span class="text-xs px-2 py-0.5 rounded-md bg-blue-50 text-[#007AFF] font-medium border border-blue-100">二级页面 · 规范级高保真</span>
|
||||
<span class="text-xs text-gray-500 font-mono">iPhone 375 × 812 pt · 微信小程序规范</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">从穿搭页进入，涵盖场景选择半屏弹窗、生成中全屏动效、AI推荐结果页及伴生三态异常与180秒频率保护机制。</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="text-xs font-semibold px-2.5 py-1 bg-white text-gray-700 rounded-full border border-gray-200 shadow-sm">主色：#007AFF</span>
|
||||
<span class="text-xs font-semibold px-2.5 py-1 bg-white text-[#5856D6] rounded-full border border-gray-200 shadow-sm">辅助：#5856D6 靛蓝</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 原型展板主视口：三屏主要阶段横排 (弹窗态 / 生成中 / 推荐结果页) -->
|
||||
<main class="w-full max-w-[1580px] flex flex-wrap gap-8 justify-center items-start">
|
||||
|
||||
<!-- 阶段 1：场景选择半屏弹窗 -->
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-bold px-2.5 py-1 rounded-full bg-white text-gray-800 shadow-sm border border-gray-200">
|
||||
阶段 1 · 场景选择半屏弹窗 (可跳过)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar text-gray-900">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-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-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面底层毛玻璃蒙层 (底层穿搭页背景虚化) -->
|
||||
<div class="relative flex-1 flex flex-col justify-between overflow-hidden">
|
||||
<!-- 背景虚化展示已进入AI推荐底页 -->
|
||||
<div class="p-4 opacity-40 filter blur-[2px] pointer-events-none">
|
||||
<div class="h-10 flex items-center justify-between mb-4">
|
||||
<span class="text-lg font-bold">AI 推荐</span>
|
||||
<div class="capsule scale-90"></div>
|
||||
</div>
|
||||
<div class="w-full h-64 bg-white rounded-2xl mb-4 border border-gray-200"></div>
|
||||
<div class="w-full h-32 bg-white rounded-2xl border border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- 半透明遮罩蒙层 -->
|
||||
<div class="absolute inset-0 bg-black/45 backdrop-blur-[1px] transition-all"></div>
|
||||
|
||||
<!-- 半屏 ActionSheet 弹窗本体 (微信/iOS 规范圆角与手柄) -->
|
||||
<div class="absolute bottom-0 inset-x-0 bg-white rounded-t-[24px] shadow-2xl z-20 flex flex-col pt-3 pb-8 px-5">
|
||||
<!-- 顶部滑动指示条 -->
|
||||
<div class="w-9 h-1 bg-[#D1D1D6] rounded-full mx-auto mb-3"></div>
|
||||
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-gray-900">选择推荐场景</h3>
|
||||
<p class="text-[12px] text-gray-500 mt-0.5">结合你的衣橱 128 件衣物精准匹配</p>
|
||||
</div>
|
||||
<button class="text-[13px] text-[#8E8E93] hover:text-gray-900 px-2 py-1">跳过</button>
|
||||
</div>
|
||||
|
||||
<!-- 两个大卡片单选 -->
|
||||
<div class="space-y-3 my-2">
|
||||
<!-- 卡片 1：每日推荐 (默认选中) -->
|
||||
<div class="p-3.5 rounded-2xl border-2 border-[#007AFF] bg-[#F5F9FF] relative flex items-start justify-between transition-all">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-100/80 flex items-center justify-center text-[#007AFF] text-lg mt-0.5">
|
||||
<i class="fa-solid fa-sparkles"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-semibold text-gray-950 text-[15px]">每日推荐</span>
|
||||
<span class="text-[10px] px-1.5 py-0.5 rounded bg-[#007AFF] text-white font-medium">默认</span>
|
||||
</div>
|
||||
<p class="text-[12px] text-gray-600 mt-1 leading-relaxed">
|
||||
按今日白羊座运势、天气与衣橱自动搭配
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-5 h-5 rounded-full bg-[#007AFF] flex items-center justify-center text-white text-[11px] shadow-sm">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 2：自定义场景 -->
|
||||
<div class="p-3.5 rounded-2xl border border-[#E5E5EA] bg-white relative flex flex-col gap-2.5">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-gray-600 text-lg">
|
||||
<i class="fa-regular fa-compass"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-gray-900 text-[15px]">自定义场景</span>
|
||||
<p class="text-[12px] text-gray-500 mt-0.5">为特定活动或出行场合量身打造</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-5 h-5 rounded-full border border-gray-300 bg-transparent"></div>
|
||||
</div>
|
||||
|
||||
<!-- 自定义场景输入框 -->
|
||||
<div class="mt-1">
|
||||
<div class="relative flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="例如：海边度假、周一例会、初次约会"
|
||||
class="w-full h-10 rounded-xl bg-[#F2F2F7] px-3.5 text-[13px] text-gray-900 placeholder:text-[#8E8E93] focus:outline-none focus:ring-1 focus:ring-[#007AFF] border border-transparent"
|
||||
/>
|
||||
<span class="absolute right-3 text-xs text-gray-400"><i class="fa-solid fa-pen-nib"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提示与额度说明 -->
|
||||
<div class="flex items-center justify-between px-1 my-2">
|
||||
<span class="text-[11px] text-gray-500">
|
||||
<i class="fa-regular fa-clock-rotate-left mr-1"></i>剩余 AI 推荐额度：<strong class="text-gray-800">5 次</strong>
|
||||
</span>
|
||||
<span class="text-[11px] text-blue-600 font-medium">额度说明</span>
|
||||
</div>
|
||||
|
||||
<!-- 底部系统蓝操作主按钮 -->
|
||||
<button class="w-full h-12 bg-[#007AFF] active:bg-blue-600 text-white font-semibold text-[15px] rounded-[14px] shadow-sm flex items-center justify-center gap-2 mt-1">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-sm"></i>
|
||||
开始生成 (消耗 1 次推荐额度)
|
||||
</button>
|
||||
|
||||
<!-- 底部安全区横条 -->
|
||||
<div class="w-32 h-1 bg-black rounded-full mx-auto mt-5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 text-center max-w-[340px]">半屏 Sheet 规范：375pt 贴合底边，支持点击遮罩/跳过直接按每日推荐生成。</p>
|
||||
</div>
|
||||
|
||||
<!-- 阶段 2：生成中全屏动效状态页 -->
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-bold px-2.5 py-1 rounded-full bg-white text-[#5856D6] shadow-sm border border-purple-100">
|
||||
阶段 2 · 生成中全屏动效页
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="device-shell bg-gradient-to-b from-[#F0F5FF] via-[#F8F9FD] to-[#F2F2F7]">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar text-gray-900">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-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-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部导航条 -->
|
||||
<div class="nav-header">
|
||||
<button class="text-[#007AFF] text-base flex items-center gap-1">
|
||||
<i class="fa-solid fa-chevron-left text-sm"></i>
|
||||
<span class="text-sm">返回</span>
|
||||
</button>
|
||||
<span class="font-semibold text-[17px] text-gray-900">AI 正在搭配</span>
|
||||
<div class="capsule">
|
||||
<span class="text-xs tracking-wider text-gray-800 font-bold">···</span>
|
||||
<div class="capsule-divider"></div>
|
||||
<i class="fa-regular fa-circle-dot text-[11px] text-gray-800"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 动效主体中央容器 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-6 relative">
|
||||
<!-- 装饰性星座星图光环粒子 -->
|
||||
<div class="absolute w-72 h-72 rounded-full border border-blue-200/60 spin-slow pointer-events-none">
|
||||
<span class="absolute -top-1.5 left-1/2 w-3 h-3 rounded-full bg-[#007AFF]/40"></span>
|
||||
<span class="absolute bottom-6 right-6 w-2 h-2 rounded-full bg-[#5856D6]/50"></span>
|
||||
<span class="absolute top-16 left-4 w-2 h-2 rounded-full bg-blue-300"></span>
|
||||
</div>
|
||||
|
||||
<!-- 中央衣物线稿轮播与光晕 -->
|
||||
<div class="relative w-44 h-44 rounded-3xl bg-white shadow-xl flex items-center justify-center p-6 border border-blue-100 pulse-glow">
|
||||
<!-- 轮播线稿模拟：开衫、T恤、牛仔裤交错层叠 -->
|
||||
<svg class="w-24 h-24 stroke-[#007AFF] stroke-[1.8] fill-none" viewBox="0 0 100 100">
|
||||
<!-- 线条衣架与上装轮廓 -->
|
||||
<path d="M 50 15 Q 50 10 46 8 A 5 5 0 0 0 42 16 L 50 22 L 78 35 L 70 48 L 62 44 L 62 82 L 38 82 L 38 44 L 30 48 L 22 35 Z" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<line x1="50" y1="22" x2="50" y2="82" stroke-dasharray="3 3" stroke="#8E8E93" />
|
||||
<!-- 星芒小图标 -->
|
||||
<circle cx="76" cy="20" r="2.5" fill="#5856D6" stroke="none"/>
|
||||
<path d="M 76 14 L 77.5 18.5 L 82 20 L 77.5 21.5 L 76 26 L 74.5 21.5 L 70 20 L 74.5 18.5 Z" fill="#5856D6" stroke="none"/>
|
||||
</svg>
|
||||
|
||||
<!-- 悬浮小气泡标签 -->
|
||||
<span class="absolute -bottom-3 bg-gradient-to-r from-[#007AFF] to-[#5856D6] text-white text-[11px] font-medium px-3 py-1 rounded-full shadow-md">
|
||||
<i class="fa-solid fa-sparkles mr-1 text-[10px]"></i>智能匹配中
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 引导提示文字 -->
|
||||
<div class="text-center mt-8 space-y-2">
|
||||
<h3 class="text-xl font-bold text-gray-900 tracking-tight">AI 正在为你搭配…</h3>
|
||||
<p class="text-[13px] text-gray-500 max-w-[260px] leading-relaxed">
|
||||
结合今日<span class="text-[#007AFF] font-medium">白羊座</span>运势与你的 <span class="font-semibold text-gray-800">128</span> 件衣物
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 进度呼吸小点 -->
|
||||
<div class="flex items-center gap-1.5 mt-6">
|
||||
<span class="w-2 h-2 rounded-full bg-[#007AFF] animate-ping"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-[#007AFF]/60"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-[#007AFF]/30"></span>
|
||||
</div>
|
||||
|
||||
<!-- 耗时温和说明 -->
|
||||
<div class="mt-8 bg-white/70 backdrop-blur-sm border border-gray-200/80 px-4 py-2 rounded-full flex items-center gap-2">
|
||||
<i class="fa-regular fa-clock text-xs text-gray-400"></i>
|
||||
<span class="text-[11px] text-gray-500">预计耗时 2~3 秒，正在分析色彩和谐度</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区 -->
|
||||
<div class="safe-bottom flex justify-center">
|
||||
<div class="w-32 h-1 bg-black/80 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 text-center max-w-[340px]">生成中全屏态：中央矢量线稿交替，融合星座运势文案，增强感知价值。</p>
|
||||
</div>
|
||||
|
||||
<!-- 阶段 3：推荐完成结果页 (标准态) -->
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-bold px-2.5 py-1 rounded-full bg-[#007AFF] text-white shadow-sm">
|
||||
阶段 3 · AI 推荐结果页 (核心态)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar text-gray-900">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-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-[13px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部二级导航栏 -->
|
||||
<div class="nav-header hairline-b bg-white/80 backdrop-blur-md">
|
||||
<button class="text-[#007AFF] text-base flex items-center gap-1">
|
||||
<i class="fa-solid fa-chevron-left text-sm"></i>
|
||||
<span class="text-sm font-normal">返回</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-semibold text-[17px] text-gray-900">AI 穿搭推荐</span>
|
||||
<!-- 待保存标签 -->
|
||||
<span class="text-[10px] bg-amber-50 text-amber-700 font-medium px-1.5 py-0.5 rounded border border-amber-200">
|
||||
待保存
|
||||
</span>
|
||||
</div>
|
||||
<div class="capsule">
|
||||
<span class="text-xs tracking-wider text-gray-800 font-bold">···</span>
|
||||
<div class="capsule-divider"></div>
|
||||
<i class="fa-regular fa-circle-dot text-[11px] text-gray-800"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto ios-scroll pb-24">
|
||||
<!-- 1. 顶部推荐组合大幅拼图 (4~6 件衣物拼贴) -->
|
||||
<div class="p-4">
|
||||
<div class="w-full h-56 bg-white rounded-2xl border border-gray-200/80 shadow-sm relative overflow-hidden p-3 flex flex-col justify-between">
|
||||
<!-- 顶部角标：AI推荐徽标与星座标签 -->
|
||||
<div class="flex items-center justify-between z-10">
|
||||
<span class="text-[11px] px-2.5 py-1 rounded-full bg-[#5856D6]/10 text-[#5856D6] font-semibold flex items-center gap-1">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-[10px]"></i>AI 专属运势匹配
|
||||
</span>
|
||||
<span class="text-[11px] text-gray-500 font-mono bg-gray-100/90 px-2 py-0.5 rounded-md">
|
||||
4 件单品组合
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 拼图式线稿排列 (4件代表：米白针织开衫、白T、直筒牛仔裤、乐福鞋) -->
|
||||
<div class="grid grid-cols-4 gap-2 items-center my-auto px-1">
|
||||
<!-- 单品 1：米白针织开衫 -->
|
||||
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5 transform hover:-translate-y-0.5 transition-all">
|
||||
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
|
||||
<path d="M14 18 L24 12 L40 12 L50 18 L58 32 L48 36 L44 26 L44 54 L20 54 L20 26 L16 36 L6 32 Z" stroke-linejoin="round"/>
|
||||
<line x1="32" y1="12" x2="32" y2="54" stroke="#8E8E93" stroke-width="1.2"/>
|
||||
</svg>
|
||||
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">米白开衫</span>
|
||||
</div>
|
||||
|
||||
<!-- 单品 2：基础纯棉T恤 -->
|
||||
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5">
|
||||
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
|
||||
<path d="M16 16 L24 12 Q32 18 40 12 L48 16 L56 28 L46 32 L42 24 L42 54 L22 54 L22 24 L18 32 L8 28 Z" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">白色纯棉T</span>
|
||||
</div>
|
||||
|
||||
<!-- 单品 3：直筒牛仔裤 -->
|
||||
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5">
|
||||
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
|
||||
<path d="M18 10 L46 10 L48 54 L36 54 L32 26 L28 54 L16 54 Z" stroke-linejoin="round"/>
|
||||
<line x1="32" y1="10" x2="32" y2="22" stroke="#8E8E93" stroke-width="1.2"/>
|
||||
</svg>
|
||||
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">直筒牛仔裤</span>
|
||||
</div>
|
||||
|
||||
<!-- 单品 4：乐福鞋 -->
|
||||
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5">
|
||||
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
|
||||
<ellipse cx="32" cy="38" rx="20" ry="10" stroke-linejoin="round"/>
|
||||
<path d="M14 38 Q22 24 38 28 Q48 30 50 38" />
|
||||
</svg>
|
||||
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">皮质乐福鞋</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部浅灰标签 -->
|
||||
<div class="text-right">
|
||||
<span class="text-[10px] text-gray-400">点击单品可查看衣物详情</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. AI 生成的标题与搭配说明卡片 -->
|
||||
<div class="px-4 mb-3">
|
||||
<div class="bg-white rounded-2xl p-4 border border-gray-200/80 shadow-sm space-y-2.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-bold text-gray-950 tracking-tight">晴日轻复古通勤组合</h2>
|
||||
<span class="text-xs px-2.5 py-0.5 rounded-full bg-blue-50 text-[#007AFF] font-medium border border-blue-100">
|
||||
通勤
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 运势与搭配建议正文 -->
|
||||
<div class="bg-[#F9F9FB] rounded-xl p-3 border border-gray-100 text-[13px] leading-relaxed text-gray-700">
|
||||
<div class="flex items-center gap-1.5 text-amber-500 text-xs font-semibold mb-1">
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-regular fa-star text-gray-300"></i>
|
||||
<span class="text-gray-700 font-medium ml-1">今日综合运势 4 星</span>
|
||||
</div>
|
||||
<p>适合以<strong class="text-gray-900 font-medium">米白针织开衫</strong>搭配<strong class="text-gray-900 font-medium">直筒牛仔裤</strong>，清爽又有层次，兼顾室内空调温度与户外舒适度。</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-[11px] text-gray-400 pt-1">
|
||||
<span>生成时间：今日 09:41</span>
|
||||
<span>风格：法式轻复古 · 简约</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 「推荐单品」横向滚动列表 -->
|
||||
<div class="px-4 mb-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-[13px] font-bold text-gray-800">推荐单品清单 (4)</span>
|
||||
<span class="text-[11px] text-gray-400">向右滑动查看</span>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2.5 overflow-x-auto ios-scroll pb-1">
|
||||
<!-- 单品卡 1 -->
|
||||
<div class="flex-shrink-0 w-36 bg-white rounded-xl p-2.5 border border-gray-200 shadow-sm flex items-center gap-2.5">
|
||||
<div class="w-11 h-11 rounded-lg bg-[#F2F2F7] flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa-solid fa-vest text-lg text-[#007AFF]"></i>
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-[12px] font-bold text-gray-900 truncate">米白针织开衫</p>
|
||||
<p class="text-[10px] text-gray-500 truncate">上装 · 针织</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 单品卡 2 -->
|
||||
<div class="flex-shrink-0 w-36 bg-white rounded-xl p-2.5 border border-gray-200 shadow-sm flex items-center gap-2.5">
|
||||
<div class="w-11 h-11 rounded-lg bg-[#F2F2F7] flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa-solid fa-shirt text-lg text-[#007AFF]"></i>
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-[12px] font-bold text-gray-900 truncate">白色纯棉T恤</p>
|
||||
<p class="text-[10px] text-gray-500 truncate">上装 · T恤</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 单品卡 3 -->
|
||||
<div class="flex-shrink-0 w-36 bg-white rounded-xl p-2.5 border border-gray-200 shadow-sm flex items-center gap-2.5">
|
||||
<div class="w-11 h-11 rounded-lg bg-[#F2F2F7] flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa-solid fa-socks text-lg text-[#007AFF]"></i>
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-[12px] font-bold text-gray-900 truncate">复古高腰牛仔</p>
|
||||
<p class="text-[10px] text-gray-500 truncate">下装 · 牛仔裤</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定操作栏 (安全区上方，白底 + hairline-t) -->
|
||||
<div class="absolute bottom-0 inset-x-0 bg-white hairline-t px-4 pt-2.5 pb-7 z-30 shadow-[0_-4px_16px_rgba(0,0,0,0.04)]">
|
||||
<div class="flex gap-2.5">
|
||||
<!-- 次按钮：换一套 -->
|
||||
<button class="flex-1 h-11 rounded-xl border border-[#007AFF] bg-white text-[#007AFF] font-semibold text-[14px] active:bg-blue-50 flex items-center justify-center gap-1.5 transition-all">
|
||||
<i class="fa-solid fa-rotate text-xs"></i>
|
||||
换一套
|
||||
</button>
|
||||
<!-- 主按钮：保存到我的穿搭 -->
|
||||
<button class="flex-[1.6] h-11 rounded-xl bg-[#007AFF] text-white font-semibold text-[14px] active:bg-blue-600 flex items-center justify-center gap-1.5 shadow-sm">
|
||||
<i class="fa-solid fa-bookmark text-xs"></i>
|
||||
保存到我的穿搭
|
||||
</button>
|
||||
</div>
|
||||
<!-- 额度与180秒频控说明小字 -->
|
||||
<p class="text-center text-[10px] text-[#8E8E93] mt-2 font-mono">
|
||||
换一套将再消耗 1 次推荐额度 · 受 180 秒频控保护
|
||||
</p>
|
||||
<div class="w-32 h-1 bg-black rounded-full mx-auto mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 text-center max-w-[340px]">结果页：顶部大拼图 + 4星运势推荐语 + 单品横滑 + 底部固定双操作栏。</p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 规范与异常态配套画板 (三种异常态 + 业务规则说明) -->
|
||||
<section class="w-full max-w-[1580px] bg-white rounded-3xl p-6 shadow-sm border border-gray-200 mt-4">
|
||||
<div class="flex items-center justify-between mb-5 border-b border-gray-100 pb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
|
||||
<h2 class="text-lg font-bold text-gray-900">第 7 屏伴生交互状态与三种异常态规范</h2>
|
||||
</div>
|
||||
<span class="text-xs text-gray-400">微信小程序异常设计规范 (Empty States & Alerts)</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<!-- 异常态 1：衣橱为空或无可用衣物 -->
|
||||
<div class="bg-[#F9F9FB] rounded-2xl p-5 border border-gray-200 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-bold text-gray-700 bg-white px-2 py-0.5 rounded border border-gray-200">异常态 1 · 缺少素材</span>
|
||||
<span class="text-[11px] text-amber-600 font-medium">前置校验拦截</span>
|
||||
</div>
|
||||
|
||||
<!-- 插画与空态内容 -->
|
||||
<div class="text-center py-6">
|
||||
<div class="w-16 h-16 rounded-full bg-blue-50 text-[#007AFF] flex items-center justify-center mx-auto mb-3 text-2xl">
|
||||
<i class="fa-light fa-shirt"></i>
|
||||
</div>
|
||||
<h4 class="text-base font-bold text-gray-900">还没有可用衣物</h4>
|
||||
<p class="text-xs text-gray-500 mt-1 max-w-[220px] mx-auto leading-relaxed">
|
||||
先上传几件处理成功的衣物吧，AI 至少需要 2~3 件单品才能为您搭配
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full h-10 bg-[#007AFF] text-white text-xs font-semibold rounded-xl active:bg-blue-600 shadow-sm flex items-center justify-center gap-1.5">
|
||||
<i class="fa-solid fa-plus text-xs"></i>
|
||||
去上传衣物
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 异常态 2：额度不足 -->
|
||||
<div class="bg-[#F9F9FB] rounded-2xl p-5 border border-gray-200 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-bold text-gray-700 bg-white px-2 py-0.5 rounded border border-gray-200">异常态 2 · 商业化额度</span>
|
||||
<span class="text-[11px] text-rose-500 font-medium">弹窗 Alert 态</span>
|
||||
</div>
|
||||
|
||||
<!-- 模拟 iOS Alert 居中弹窗卡片 -->
|
||||
<div class="bg-white rounded-2xl p-4 border border-gray-200 shadow-md text-center my-3">
|
||||
<div class="w-10 h-10 rounded-full bg-rose-50 text-rose-500 flex items-center justify-center mx-auto mb-2 text-lg">
|
||||
<i class="fa-solid fa-gem"></i>
|
||||
</div>
|
||||
<h5 class="text-sm font-bold text-gray-900">AI 推荐额度不足</h5>
|
||||
<p class="text-[11px] text-gray-500 mt-1">
|
||||
本月免费推荐额度已用完。开通会员或购买加油包，解锁无限次 AI 专属穿搭灵感。
|
||||
</p>
|
||||
<div class="flex gap-2 mt-4">
|
||||
<button class="flex-1 h-8 rounded-lg bg-gray-100 text-gray-700 text-xs font-medium">取消</button>
|
||||
<button class="flex-1 h-8 rounded-lg bg-[#007AFF] text-white text-xs font-medium">去购买</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-[11px] text-gray-400 text-center">符合 Apple IAP / 微信小程序虚拟支付合规指引</p>
|
||||
</div>
|
||||
|
||||
<!-- 异常态 3：请求过于频繁 (180秒并发频控) -->
|
||||
<div class="bg-[#F9F9FB] rounded-2xl p-5 border border-gray-200 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-bold text-gray-700 bg-white px-2 py-0.5 rounded border border-gray-200">异常态 3 · 180秒频控保护</span>
|
||||
<span class="text-[11px] text-blue-600 font-medium">防抖 & HTTP 429</span>
|
||||
</div>
|
||||
|
||||
<!-- 模拟 Toast 轻提示与按钮禁用态 -->
|
||||
<div class="my-4 space-y-3">
|
||||
<!-- iOS Toast 浮层 -->
|
||||
<div class="bg-black/80 text-white rounded-full px-4 py-2 flex items-center gap-2 shadow-lg mx-auto w-fit">
|
||||
<i class="fa-solid fa-hourglass-half text-amber-400 text-xs"></i>
|
||||
<span class="text-xs">正在生成中，请稍候 (倒计时 142s)</span>
|
||||
</div>
|
||||
|
||||
<!-- 禁用按钮样式展示 -->
|
||||
<div class="space-y-1.5 pt-2">
|
||||
<button disabled class="w-full h-10 rounded-xl bg-gray-100 text-gray-400 text-xs font-medium cursor-not-allowed border border-gray-200 flex items-center justify-center gap-1.5">
|
||||
<i class="fa-solid fa-lock text-[10px]"></i>
|
||||
换一套 (冷冻期中)
|
||||
</button>
|
||||
<p class="text-[10px] text-gray-400 text-center">上一套生成后 180s 内点击不向后端发起请求，仅轻提示</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50/70 rounded-xl p-2.5 border border-blue-100 text-[11px] text-blue-800">
|
||||
<strong>保存交互规范：</strong>点击「保存到我的穿搭」后弹出轻提示「已保存到我的穿搭」，并平滑跳转至穿搭详情，标签由「待保存」变为「已保存」。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 467 KiB |
@@ -1,638 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第8屏 运势（tabBar 全状态画板）</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+Display:wght@400;500;600;700&family=SF+Pro+Text:wght@400;500;600&family=SF+Mono:wght@400;600&display=swap');
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #ECEEF2;
|
||||
color: #1C1C1E;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.font-mono-num {
|
||||
font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
|
||||
font-feature-settings: "tnum" 1;
|
||||
}
|
||||
|
||||
.device-screen {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
position: relative;
|
||||
background-color: #F2F2F7;
|
||||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 46px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hairline-border {
|
||||
border: 0.5px solid #E5E5EA;
|
||||
}
|
||||
|
||||
.hairline-t {
|
||||
border-top: 0.5px solid #E5E5EA;
|
||||
}
|
||||
|
||||
.hairline-b {
|
||||
border-bottom: 0.5px solid #E5E5EA;
|
||||
}
|
||||
|
||||
/* 微信小程序顶部胶囊规范 */
|
||||
.wechat-capsule {
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* 骨架屏动画 */
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.95; }
|
||||
50% { opacity: 0.45; }
|
||||
}
|
||||
.skeleton-box {
|
||||
background-color: #E2E8F0;
|
||||
animation: pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="p-8 lg:p-12 min-h-screen flex flex-col items-center">
|
||||
|
||||
<!-- 顶部画板总标题区 -->
|
||||
<div class="w-full max-w-[1300px] mb-8 bg-white rounded-2xl p-6 shadow-sm border border-[#E5E5EA]">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="inline-block w-3.5 h-3.5 rounded-full bg-[#007AFF]"></span>
|
||||
<h1 class="text-2xl font-bold text-gray-900 tracking-tight">第 8 屏 ｜ 运势（ tabBar 全状态高保真画板 ）</h1>
|
||||
<span class="px-2.5 py-0.5 text-xs font-semibold bg-blue-50 text-[#007AFF] rounded-md border border-blue-200">微信小程序 tabBar 核心页 · 375 × 812 pt</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-2">
|
||||
规范约束：主色 #007AFF · 浅蓝块面 #E8F2FF · 背景底色 #F2F2F7 · 纯白卡片圆角 16pt · 0.5px 发丝分割线。严格遵循用户生日推算运势机制（不设切换星座），仅设「去设置生日」入口；四项标准维度（综合/爱情/工作/财富）及幸运色与数字。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-xs font-medium text-gray-600">
|
||||
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#007AFF]"></span>系统蓝 #007AFF</div>
|
||||
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#E8F2FF] border border-blue-200"></span>淡蓝块面 #E8F2FF</div>
|
||||
<div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-[#F2F2F7] border border-gray-300"></span>底色 #F2F2F7</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 三个核心状态机画板容器 -->
|
||||
<div class="w-full max-w-[1300px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center mb-12">
|
||||
|
||||
<!-- ============================================== -->
|
||||
<!-- 状态 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>
|
||||
<span class="text-sm font-bold text-gray-800">状态 1 · 每日运势正常展示态（tabBar 选中）</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 mb-4">淡蓝圆角大卡 · 四项等宽数字评分 · 幸运色彩与快捷推荐穿搭</span>
|
||||
|
||||
<div class="device-screen">
|
||||
<!-- 微信小程序标准顶部状态栏与标题栏 -->
|
||||
<div class="pt-3 px-5 pb-2 bg-white hairline-b z-20 flex-shrink-0">
|
||||
<!-- iOS 状态栏 -->
|
||||
<div class="flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2.5 px-0.5">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<span class="text-[10px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 微信原生导航条 -->
|
||||
<div class="h-10 flex items-center justify-between relative">
|
||||
<div class="w-16"></div>
|
||||
<span class="text-[17px] font-semibold text-gray-900 tracking-tight">每日运势</span>
|
||||
<!-- 微信右上角胶囊按钮 -->
|
||||
<div class="wechat-capsule">
|
||||
<i class="fa-solid fa-ellipsis text-gray-800 text-xs"></i>
|
||||
<span class="w-[0.5px] h-3.5 bg-gray-300"></span>
|
||||
<i class="fa-regular fa-circle-dot text-gray-800 text-[11px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面主滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto px-4 py-3.5 space-y-3.5 pb-24">
|
||||
|
||||
<!-- 核心淡蓝大卡 (#E8F2FF，不要浓烈渐变，圆角 16pt / 20px) -->
|
||||
<div class="bg-[#E8F2FF] rounded-[20px] p-4 border border-[#D5E6FC] relative overflow-hidden shadow-sm">
|
||||
<!-- 顶部行：左侧星座图标与名称，右侧日期与「去设置生日」 -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- 星座线性图标 (白羊座羊角象征与星芒) -->
|
||||
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-[#007AFF] shadow-sm">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 21a9 9 0 0 0 9-9 9 9 0 0 0-9-9 9 9 0 0 0-9 9 9 9 0 0 0 9 9Z" stroke-opacity="0.15"/>
|
||||
<path d="M12 20V8"/>
|
||||
<path d="M6 7c0-2 2-3 4-2 2 1 2 3 2 3s0-2 2-3c2-1 4 0 4 2 0 3-4 5-6 8-2-3-6-5-6-8Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[16px] font-bold text-gray-900 tracking-tight">白羊座</span>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-blue-100/70 text-[#007AFF] font-medium rounded">火象星座</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[12px] font-mono-num text-gray-500 font-medium">2025.04.15</span>
|
||||
<span class="text-gray-300 text-xs">|</span>
|
||||
<button class="text-[12px] font-semibold text-[#007AFF] flex items-center hover:opacity-80 active:opacity-60 transition">
|
||||
去设置生日
|
||||
<i class="fa-solid fa-chevron-right text-[9px] ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中部综合运势评分区 -->
|
||||
<div class="mt-4 pt-3.5 border-t border-[#D9E9FD] flex items-end justify-between">
|
||||
<div>
|
||||
<div class="text-[11px] font-medium text-gray-600 tracking-wide uppercase mb-1">综合运势</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-[40px] font-bold text-gray-900 font-mono-num leading-none tracking-tight">4.0</span>
|
||||
<span class="text-xs font-medium text-gray-500">/ 5.0</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 5 颗星（4 颗实心系统蓝，1 颗浅灰线框） -->
|
||||
<div class="flex items-center gap-1 mb-1">
|
||||
<i class="fa-solid fa-star text-[#007AFF] text-base"></i>
|
||||
<i class="fa-solid fa-star text-[#007AFF] text-base"></i>
|
||||
<i class="fa-solid fa-star text-[#007AFF] text-base"></i>
|
||||
<i class="fa-solid fa-star text-[#007AFF] text-base"></i>
|
||||
<i class="fa-regular fa-star text-[#BAC7D5] text-base"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下方三项评分行（爱情 3/5、工作 5/5、财富 4/5） -->
|
||||
<div class="mt-4 pt-3 border-t border-[#D9E9FD] space-y-2.5">
|
||||
|
||||
<!-- 爱情运势 3/5 -->
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="w-16 text-gray-600 font-medium">爱情运势</div>
|
||||
<div class="flex-1 max-w-[150px] flex items-center gap-1 mx-2">
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#D5E1F0]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#D5E1F0]"></span>
|
||||
</div>
|
||||
<div class="w-10 text-right font-mono-num font-semibold text-gray-800">3/5</div>
|
||||
</div>
|
||||
|
||||
<!-- 工作运势 5/5 -->
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="w-16 text-gray-600 font-medium">工作运势</div>
|
||||
<div class="flex-1 max-w-[150px] flex items-center gap-1 mx-2">
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
</div>
|
||||
<div class="w-10 text-right font-mono-num font-semibold text-[#007AFF]">5/5</div>
|
||||
</div>
|
||||
|
||||
<!-- 财富运势 4/5 -->
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="w-16 text-gray-600 font-medium">财富运势</div>
|
||||
<div class="flex-1 max-w-[150px] flex items-center gap-1 mx-2">
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#007AFF]"></span>
|
||||
<span class="h-2 flex-1 rounded-sm bg-[#D5E1F0]"></span>
|
||||
</div>
|
||||
<div class="w-10 text-right font-mono-num font-semibold text-gray-800">4/5</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 白色小卡：今日运势解读文案 -->
|
||||
<div class="bg-white rounded-[16px] p-4 hairline-border shadow-[0_1px_2px_rgba(0,0,0,0.02)]">
|
||||
<div class="flex items-center gap-1.5 mb-2">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-[#007AFF] text-xs"></i>
|
||||
<span class="text-xs font-bold text-gray-900">今日运势解读</span>
|
||||
</div>
|
||||
<p class="text-[13px] leading-relaxed text-gray-700 font-normal">
|
||||
今天适合主动出击，贵人运旺，适合尝试新的穿搭风格。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 底部并排两张小卡：幸运色与幸运数字 -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<!-- 幸运色小卡 -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 hairline-border shadow-[0_1px_2px_rgba(0,0,0,0.02)] flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-[11px] font-medium text-gray-400 block mb-1">幸运色</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-[#FF3B30] shadow-sm inline-block"></span>
|
||||
<span class="text-[15px] font-bold text-gray-900">红色</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-[#FF3B30]">
|
||||
<i class="fa-solid fa-palette text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 幸运数字小卡 -->
|
||||
<div class="bg-white rounded-[16px] p-3.5 hairline-border shadow-[0_1px_2px_rgba(0,0,0,0.02)] flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-[11px] font-medium text-gray-400 block mb-1">幸运数字</span>
|
||||
<span class="text-[18px] font-bold text-gray-900 font-mono-num">6</span>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center text-[#007AFF]">
|
||||
<i class="fa-solid fa-dice text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面底部描边操作按钮：跳转 AI 推荐 -->
|
||||
<div class="pt-1">
|
||||
<button class="w-full h-11 rounded-[12px] bg-white border border-[#007AFF] text-[#007AFF] text-[14px] font-semibold flex items-center justify-center gap-2 active:bg-blue-50 transition shadow-sm">
|
||||
<i class="fa-solid fa-sparkles text-xs"></i>
|
||||
<span>生成今日推荐穿搭</span>
|
||||
<i class="fa-solid fa-arrow-right text-xs ml-0.5"></i>
|
||||
</button>
|
||||
<p class="text-center text-[10px] text-gray-400 mt-2">将结合今日综合 4 星运势与衣橱自动搭配</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部标准微信小程序 5-Tab tabBar（运势处于选中态） -->
|
||||
<div class="h-20 bg-white/95 backdrop-blur hairline-t flex items-start justify-around pt-2 px-2 absolute bottom-0 inset-x-0 z-30">
|
||||
<!-- 1. 首页 (登录/授权或主页) -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-regular fa-compass text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">发现</span>
|
||||
</div>
|
||||
|
||||
<!-- 2. 衣橱 -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-solid fa-shirt text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">衣橱</span>
|
||||
</div>
|
||||
|
||||
<!-- 3. 穿搭 -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-regular fa-bookmark text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">穿搭</span>
|
||||
</div>
|
||||
|
||||
<!-- 4. 运势（本页选中态：系统蓝高亮 + 线性星芒） -->
|
||||
<div class="flex flex-col items-center justify-center text-[#007AFF] w-14">
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-sparkles text-[20px] mb-1"></i>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold">运势</span>
|
||||
</div>
|
||||
|
||||
<!-- 5. 我的 -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-regular fa-user text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- iOS 底部指示线 (Home Indicator) -->
|
||||
<div class="absolute bottom-1.5 inset-x-0 flex justify-center z-40 pointer-events-none">
|
||||
<div class="w-32 h-1 bg-black/80 rounded-full"></div>
|
||||
</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-[#FF9500]"></span>
|
||||
<span class="text-sm font-bold text-gray-800">状态 2 · 异常态（用户未设置生日）</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 mb-4">插画空态 · 友好引导提示 · 系统蓝「去完善资料」按钮</span>
|
||||
|
||||
<div class="device-screen">
|
||||
<!-- 微信小程序标准顶部状态栏与标题栏 -->
|
||||
<div class="pt-3 px-5 pb-2 bg-white hairline-b z-20 flex-shrink-0">
|
||||
<div class="flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2.5 px-0.5">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<span class="text-[10px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-10 flex items-center justify-between relative">
|
||||
<div class="w-16"></div>
|
||||
<span class="text-[17px] font-semibold text-gray-900 tracking-tight">每日运势</span>
|
||||
<div class="wechat-capsule">
|
||||
<i class="fa-solid fa-ellipsis text-gray-800 text-xs"></i>
|
||||
<span class="w-[0.5px] h-3.5 bg-gray-300"></span>
|
||||
<i class="fa-regular fa-circle-dot text-gray-800 text-[11px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空态居中容器 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-6 pb-24 text-center">
|
||||
|
||||
<!-- 极简线性天象星盘插画 -->
|
||||
<div class="w-24 h-24 rounded-full bg-[#E8F2FF] flex items-center justify-center mb-6 relative">
|
||||
<!-- 环形星轨虚线 -->
|
||||
<svg class="absolute inset-0 w-full h-full text-[#007AFF]/25 animate-spin-slow" viewBox="0 0 100 100" style="animation: spin 20s linear infinite;">
|
||||
<circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 4" />
|
||||
<circle cx="85" cy="50" r="3" fill="#007AFF" />
|
||||
<circle cx="20" cy="30" r="2" fill="#5856D6" />
|
||||
</svg>
|
||||
<!-- 线性生日蛋糕与星座星辰 -->
|
||||
<div class="w-12 h-12 rounded-2xl bg-white shadow-sm flex items-center justify-center text-[#007AFF]">
|
||||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" />
|
||||
<path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1" />
|
||||
<path d="M2 21h20" />
|
||||
<path d="M7 8v3" />
|
||||
<path d="M12 8v3" />
|
||||
<path d="M17 8v3" />
|
||||
<path d="M7 4h.01" />
|
||||
<path d="M12 4h.01" />
|
||||
<path d="M17 4h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文案要求：严格复现 -->
|
||||
<h3 class="text-[17px] font-bold text-gray-900 tracking-tight mb-2">还没有设置生日</h3>
|
||||
<p class="text-[13px] text-gray-500 max-w-[240px] leading-relaxed mb-7">
|
||||
设置生日后即可查看你的专属星座运势与每日穿搭指南
|
||||
</p>
|
||||
|
||||
<!-- 系统蓝主按钮 -->
|
||||
<button class="w-full max-w-[220px] h-11 bg-[#007AFF] text-white rounded-[12px] font-semibold text-[14px] shadow-sm hover:bg-blue-600 active:opacity-90 transition flex items-center justify-center gap-2">
|
||||
<i class="fa-regular fa-calendar-check text-sm"></i>
|
||||
<span>去完善资料</span>
|
||||
</button>
|
||||
|
||||
<span class="text-[11px] text-gray-400 mt-4">隐私提示：生日仅用于推算星座，不作公开</span>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部标准 tabBar -->
|
||||
<div class="h-20 bg-white/95 backdrop-blur hairline-t flex items-start justify-around pt-2 px-2 absolute bottom-0 inset-x-0 z-30">
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-regular fa-compass text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-solid fa-shirt text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">衣橱</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-regular fa-bookmark text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">穿搭</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#007AFF] w-14">
|
||||
<i class="fa-solid fa-sparkles text-[20px] mb-1"></i>
|
||||
<span class="text-[10px] font-bold">运势</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-regular fa-user text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- iOS 底部指示线 -->
|
||||
<div class="absolute bottom-1.5 inset-x-0 flex justify-center z-40 pointer-events-none">
|
||||
<div class="w-32 h-1 bg-black/80 rounded-full"></div>
|
||||
</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-[#5856D6]"></span>
|
||||
<span class="text-sm font-bold text-gray-800">状态 3 · 加载态与「运势生成中」提示</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 mb-4">骨架屏呼吸微动效 · iOS Toast 轻提示 · 3~5秒自动重试机制</span>
|
||||
|
||||
<div class="device-screen">
|
||||
<!-- 微信小程序标准顶部状态栏与标题栏 -->
|
||||
<div class="pt-3 px-5 pb-2 bg-white hairline-b z-20 flex-shrink-0">
|
||||
<div class="flex justify-between items-center text-xs font-semibold text-black tracking-tight mb-2.5 px-0.5">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<span class="text-[10px] font-bold">5G</span>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-10 flex items-center justify-between relative">
|
||||
<div class="w-16"></div>
|
||||
<span class="text-[17px] font-semibold text-gray-900 tracking-tight">每日运势</span>
|
||||
<div class="wechat-capsule">
|
||||
<i class="fa-solid fa-ellipsis text-gray-800 text-xs"></i>
|
||||
<span class="w-[0.5px] h-3.5 bg-gray-300"></span>
|
||||
<i class="fa-regular fa-circle-dot text-gray-800 text-[11px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 骨架屏结构内容区 -->
|
||||
<div class="flex-1 overflow-y-auto px-4 py-3.5 space-y-3.5 pb-24 relative">
|
||||
|
||||
<!-- 顶部居中浮出的 iOS Toast 轻提示（首次无缓存异步生成触发） -->
|
||||
<div class="absolute top-6 inset-x-6 z-30 flex justify-center">
|
||||
<div class="bg-gray-900/90 backdrop-blur-md text-white px-4 py-2.5 rounded-full shadow-lg flex items-center gap-2.5 border border-white/10">
|
||||
<i class="fa-solid fa-circle-notch fa-spin text-xs text-[#007AFF]"></i>
|
||||
<span class="text-[12px] font-medium tracking-tight">运势生成中，请稍后重试</span>
|
||||
<span class="text-[10px] text-gray-400 font-mono-num pl-1 border-l border-gray-700">3s后重试</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 骨架大卡片 -->
|
||||
<div class="bg-white rounded-[20px] p-4 hairline-border shadow-sm space-y-4">
|
||||
<!-- 头部 -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full skeleton-box"></div>
|
||||
<div class="w-20 h-4 rounded skeleton-box"></div>
|
||||
</div>
|
||||
<div class="w-24 h-4 rounded skeleton-box"></div>
|
||||
</div>
|
||||
|
||||
<!-- 综合评分骨架 -->
|
||||
<div class="pt-3 border-t border-gray-100 flex items-end justify-between">
|
||||
<div>
|
||||
<div class="w-12 h-3 rounded skeleton-box mb-2"></div>
|
||||
<div class="w-20 h-9 rounded skeleton-box"></div>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
|
||||
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
|
||||
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
|
||||
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
|
||||
<div class="w-4 h-4 rounded-sm skeleton-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 三条进度条骨架 -->
|
||||
<div class="pt-3 border-t border-gray-100 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="w-14 h-3 rounded skeleton-box"></div>
|
||||
<div class="w-32 h-2 rounded skeleton-box"></div>
|
||||
<div class="w-6 h-3 rounded skeleton-box"></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="w-14 h-3 rounded skeleton-box"></div>
|
||||
<div class="w-32 h-2 rounded skeleton-box"></div>
|
||||
<div class="w-6 h-3 rounded skeleton-box"></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="w-14 h-3 rounded skeleton-box"></div>
|
||||
<div class="w-32 h-2 rounded skeleton-box"></div>
|
||||
<div class="w-6 h-3 rounded skeleton-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 解读卡片骨架 -->
|
||||
<div class="bg-white rounded-[16px] p-4 hairline-border shadow-sm space-y-2.5">
|
||||
<div class="w-20 h-3.5 rounded skeleton-box"></div>
|
||||
<div class="w-full h-3 rounded skeleton-box"></div>
|
||||
<div class="w-3/4 h-3 rounded skeleton-box"></div>
|
||||
</div>
|
||||
|
||||
<!-- 双卡骨架 -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="bg-white rounded-[16px] p-4 hairline-border shadow-sm h-16 flex items-center justify-between">
|
||||
<div class="space-y-1.5">
|
||||
<div class="w-10 h-2.5 rounded skeleton-box"></div>
|
||||
<div class="w-12 h-4 rounded skeleton-box"></div>
|
||||
</div>
|
||||
<div class="w-7 h-7 rounded-full skeleton-box"></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-[16px] p-4 hairline-border shadow-sm h-16 flex items-center justify-between">
|
||||
<div class="space-y-1.5">
|
||||
<div class="w-10 h-2.5 rounded skeleton-box"></div>
|
||||
<div class="w-8 h-4 rounded skeleton-box"></div>
|
||||
</div>
|
||||
<div class="w-7 h-7 rounded-full skeleton-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮骨架 -->
|
||||
<div class="pt-1">
|
||||
<div class="w-full h-11 rounded-[12px] skeleton-box"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部标准 tabBar -->
|
||||
<div class="h-20 bg-white/95 backdrop-blur hairline-t flex items-start justify-around pt-2 px-2 absolute bottom-0 inset-x-0 z-30">
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-regular fa-compass text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-solid fa-shirt text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">衣橱</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-regular fa-bookmark text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">穿搭</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#007AFF] w-14">
|
||||
<i class="fa-solid fa-sparkles text-[20px] mb-1"></i>
|
||||
<span class="text-[10px] font-bold">运势</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-gray-400 w-14">
|
||||
<i class="fa-regular fa-user text-[19px] mb-1"></i>
|
||||
<span class="text-[10px] font-medium">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- iOS 底部指示线 -->
|
||||
<div class="absolute bottom-1.5 inset-x-0 flex justify-center z-40 pointer-events-none">
|
||||
<div class="w-32 h-1 bg-black/80 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部设计核查表与逻辑映射备忘卡片 -->
|
||||
<div class="w-full max-w-[1300px] bg-white rounded-2xl p-6 shadow-sm border border-[#E5E5EA]">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-[#FF9500]"></span>
|
||||
<h2 class="text-base font-bold text-gray-950">第 8 屏 运势规范设计核查表与状态机映射</h2>
|
||||
<span class="text-xs text-gray-400 font-mono">（严格恪守产品与交互逻辑约束）</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-xs text-gray-600">
|
||||
<div class="p-3.5 rounded-xl bg-gray-50 border border-gray-100">
|
||||
<div class="font-bold text-gray-900 mb-1.5 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-ban text-red-500"></i>
|
||||
1. 星座推算与修改边界
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
严格不提供用户自由「切换星座」的选择器能力，杜绝数据失真；仅通过生日推算。右上角只放「去设置生日」文字按钮，跳转「编辑资料」页面更改生日。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-3.5 rounded-xl bg-gray-50 border border-gray-100">
|
||||
<div class="font-bold text-gray-900 mb-1.5 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-list-check text-blue-500"></i>
|
||||
2. 四维评分与等宽数字
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
仅有综合（4.0）、爱情（3/5）、工作（5/5）、财富（4/5）四项，不臆造健康、社交等未定义维度；数字统一采用 <code class="bg-gray-200 px-1 py-0.5 rounded text-[11px]">SF Mono</code> 等宽字体。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-3.5 rounded-xl bg-gray-50 border border-gray-100">
|
||||
<div class="font-bold text-gray-900 mb-1.5 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-link text-indigo-500"></i>
|
||||
3. 业务闭环联动
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
底部提供「生成今日推荐穿搭」描边按钮，直接作为第 7 屏「AI 穿搭推荐」的快捷触发源，携带今日运势评分与幸运色彩参数进入。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-3.5 rounded-xl bg-gray-50 border border-gray-100">
|
||||
<div class="font-bold text-gray-900 mb-1.5 flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-clock-rotate-left text-green-500"></i>
|
||||
4. 首次异步加载与容错
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
首次无缓存时异步计算，展示整卡骨架屏并弹出 iOS 原生轻提示 Toast「运势生成中，请稍后重试」，前端定时器 3~5 秒后静默自动轮询重试一次。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 412 KiB |
@@ -1,668 +0,0 @@
|
||||
<!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.
|
Before Width: | Height: | Size: 261 KiB |
@@ -1,673 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>补充页 创建 / 编辑穿搭（全状态画板）</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=PingFang+SC:wght@400;500;600;700&display=swap');
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #0F172A;
|
||||
color: #000000;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin: 0;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.device-shell {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #F2F2F7;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
|
||||
border: 8px solid #1E293B;
|
||||
border-radius: 44px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.capsule-btn {
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0 6px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.thin-border {
|
||||
border-bottom: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.thin-border-t {
|
||||
border-top: 0.5px solid #E5E5EA;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.toast-pill {
|
||||
background: rgba(30, 30, 30, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen">
|
||||
|
||||
<!-- 页面主说明卡片 -->
|
||||
<header class="max-w-7xl mx-auto mb-8 px-4 text-white">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-slate-700/80 pb-5">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/20 text-blue-400 text-xs font-semibold mb-2">
|
||||
<span>微信小程序</span>
|
||||
<span>•</span>
|
||||
<span>补充页原型规范</span>
|
||||
</div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold tracking-tight text-white">创建 / 编辑穿搭 · 全场景状态画板</h1>
|
||||
<p class="text-sm text-slate-400 mt-1">严格遵循 375×812pt 原生小程序规范、iOS 设计语言与交互反馈体系</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs bg-slate-800/80 border border-slate-700 px-4 py-2 rounded-xl text-slate-300">
|
||||
<div><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#007AFF] mr-1.5"></span>系统强调色 #007AFF</div>
|
||||
<div><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#FF3B30] mr-1.5"></span>删除危险色 #FF3B30</div>
|
||||
<div><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#F2F2F7] border border-slate-600 mr-1.5"></span>底色 #F2F2F7</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 画板容器：横向排列 4 个核心状态屏幕 -->
|
||||
<main class="max-w-[1640px] mx-auto overflow-x-auto pb-12 pt-2 px-4 no-scrollbar">
|
||||
<div class="inline-flex gap-10 items-start">
|
||||
|
||||
<!-- ================= 屏幕 1：创建穿搭（初始 / 未选衣物空态） ================= -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-blue-400 bg-blue-950/60 px-2.5 py-1 rounded-md border border-blue-800/60">State 01</span>
|
||||
<h2 class="text-base font-medium text-slate-200 mt-1">创建穿搭 · 初始空态</h2>
|
||||
<p class="text-xs text-slate-400">无衣物预览占位、保存按钮置灰禁用</p>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 微信状态栏 -->
|
||||
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生导航栏 -->
|
||||
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
|
||||
<div class="flex items-center w-16">
|
||||
<button class="w-8 h-8 flex items-center justify-center text-black active:opacity-60">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="font-semibold text-[17px] text-[#000000]">创建穿搭</div>
|
||||
<!-- 右上角胶囊 -->
|
||||
<div class="w-20 flex justify-end">
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="h-3 w-[0.5px] bg-black/20"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-black/70"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容滚动区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar p-4 space-y-3 pb-24">
|
||||
<!-- 拼图预览区（空态） -->
|
||||
<div class="bg-white rounded-2xl p-4 flex flex-col items-center justify-center h-44 border border-dashed border-[#C7C7CC] relative overflow-hidden group">
|
||||
<div class="w-12 h-12 rounded-full bg-[#F2F2F7] flex items-center justify-center text-[#8E8E93] mb-2">
|
||||
<i class="fa-solid fa-shirt text-xl text-[#8E8E93]"></i>
|
||||
</div>
|
||||
<p class="text-[13px] text-[#8E8E93]">还没有选择衣物</p>
|
||||
<span class="text-[11px] text-[#C7C7CC] mt-0.5">点击下方「选择衣物」添加你的单品</span>
|
||||
</div>
|
||||
|
||||
<!-- 表单卡片 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm space-y-3">
|
||||
<!-- 穿搭名称 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">
|
||||
穿搭名称 <span class="text-[#FF3B30]">*</span>
|
||||
</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">0/32</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="给这套穿搭起个名字"
|
||||
class="w-full h-11 px-3.5 bg-[#F2F2F7] rounded-[10px] text-[14px] placeholder-[#C7C7CC] outline-none border border-transparent focus:border-[#007AFF]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 穿搭描述 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">穿搭描述</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">0/500</span>
|
||||
</div>
|
||||
<textarea
|
||||
rows="3"
|
||||
placeholder="简单描述这套穿搭的灵感或亮点"
|
||||
class="w-full p-3 bg-[#F2F2F7] rounded-[10px] text-[14px] placeholder-[#C7C7CC] outline-none resize-none border border-transparent focus:border-[#007AFF]"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 适合场景 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">适合场景</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">最多3个</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 pt-0.5">
|
||||
<button class="h-7 px-3 rounded-full border border-dashed border-[#007AFF] text-[#007AFF] text-xs font-medium flex items-center gap-1 bg-[#007AFF]/5">
|
||||
<i class="fa-solid fa-plus text-[10px]"></i> 添加场景
|
||||
</button>
|
||||
<span class="text-xs text-[#8E8E93] self-center">如：通勤、约会、旅行</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择衣物分组入口卡片 -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm flex items-center justify-between active:bg-[#F2F2F7] transition cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-[#007AFF]/10 text-[#007AFF] flex items-center justify-center">
|
||||
<i class="fa-solid fa-vest-patches text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[14px] font-semibold text-[#1C1C1E]">选择衣橱单品</div>
|
||||
<div class="text-[12px] text-[#8E8E93]">选择 1~10 件衣物合成画报</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-[#8E8E93] text-[13px]">
|
||||
<span>未选择</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定栏（安全区上方） -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md thin-border-t px-4 pt-3 pb-8 z-30">
|
||||
<button disabled class="w-full h-11 rounded-full bg-[#007AFF]/40 text-white font-semibold text-[15px] cursor-not-allowed">
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ================= 屏幕 2：编辑穿搭（预填已有信息 + 拼图预览 + 删除） ================= -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-emerald-400 bg-emerald-950/60 px-2.5 py-1 rounded-md border border-emerald-800/60">State 02</span>
|
||||
<h2 class="text-base font-medium text-slate-200 mt-1">编辑穿搭 · 预填状态</h2>
|
||||
<p class="text-xs text-slate-400">顶部多图抠图拼贴错落摆放、含删除红色按钮</p>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 微信状态栏 -->
|
||||
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生导航栏 -->
|
||||
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
|
||||
<div class="flex items-center w-16">
|
||||
<button class="w-8 h-8 flex items-center justify-center text-black active:opacity-60">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="font-semibold text-[17px] text-[#000000]">编辑穿搭</div>
|
||||
<div class="w-20 flex justify-end">
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="h-3 w-[0.5px] bg-black/20"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-black/70"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容滚动区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar p-4 space-y-3 pb-36">
|
||||
<!-- 顶部拼图预览区（错落抠图展示） -->
|
||||
<div class="bg-white rounded-2xl p-3 shadow-sm relative overflow-hidden">
|
||||
<div class="flex justify-between items-center mb-2 px-1">
|
||||
<span class="text-[12px] font-semibold text-[#8E8E93]">穿搭画报拼图</span>
|
||||
<span class="text-[11px] text-[#007AFF] bg-[#007AFF]/10 px-2 py-0.5 rounded-full font-medium">已组合 4 件单品</span>
|
||||
</div>
|
||||
<!-- 错落布局画板 -->
|
||||
<div class="h-36 bg-[#F8F8FA] rounded-xl flex items-center justify-center gap-2 p-2 relative overflow-hidden border border-[#E5E5EA]">
|
||||
<!-- 单品 1: 西装外套 -->
|
||||
<div class="w-20 h-28 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform -rotate-2">
|
||||
<div class="w-12 h-14 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
|
||||
<i class="fa-solid fa-shirt text-xl text-[#3A3A3C]"></i>
|
||||
</div>
|
||||
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">羊毛西装</span>
|
||||
<span class="text-[8px] text-[#8E8E93]">外套</span>
|
||||
</div>
|
||||
<!-- 单品 2: 针织内搭 -->
|
||||
<div class="w-18 h-26 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform translate-y-1">
|
||||
<div class="w-11 h-12 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
|
||||
<i class="fa-solid fa-vest text-lg text-[#007AFF]"></i>
|
||||
</div>
|
||||
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">高领打底</span>
|
||||
<span class="text-[8px] text-[#8E8E93]">上装</span>
|
||||
</div>
|
||||
<!-- 单品 3: 直筒裤 -->
|
||||
<div class="w-18 h-28 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform rotate-1">
|
||||
<div class="w-10 h-14 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
|
||||
<i class="fa-solid fa-socks text-lg text-[#48484A]"></i>
|
||||
</div>
|
||||
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">垂坠阔腿裤</span>
|
||||
<span class="text-[8px] text-[#8E8E93]">下装</span>
|
||||
</div>
|
||||
<!-- 单品 4: 乐福鞋 -->
|
||||
<div class="w-16 h-22 bg-white rounded-lg shadow-sm border border-[#E5E5EA] p-1.5 flex flex-col items-center justify-center transform rotate-3">
|
||||
<div class="w-10 h-10 bg-[#F2F2F7] rounded flex items-center justify-center text-slate-400">
|
||||
<i class="fa-solid fa-shoe-prints text-base text-[#8E8E93]"></i>
|
||||
</div>
|
||||
<span class="text-[9px] font-medium text-[#1C1C1E] mt-1 truncate w-full text-center">复古乐福</span>
|
||||
<span class="text-[8px] text-[#8E8E93]">鞋履</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单卡片（已预填） -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm space-y-3.5">
|
||||
<!-- 穿搭名称 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">
|
||||
穿搭名称 <span class="text-[#FF3B30]">*</span>
|
||||
</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">7/32</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value="初秋通勤三件套"
|
||||
class="w-full h-11 px-3.5 bg-[#F2F2F7] rounded-[10px] text-[14px] text-[#1C1C1E] font-medium outline-none border border-transparent focus:border-[#007AFF]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 穿搭描述 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">穿搭描述</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">28/500</span>
|
||||
</div>
|
||||
<textarea
|
||||
rows="3"
|
||||
class="w-full p-3 bg-[#F2F2F7] rounded-[10px] text-[14px] text-[#1C1C1E] outline-none resize-none border border-transparent focus:border-[#007AFF]"
|
||||
>微凉秋日的干练职场风格，以深灰廓形羊毛西装搭配高腰阔腿裤，兼具气场与舒适度。</textarea>
|
||||
</div>
|
||||
|
||||
<!-- 适合场景 -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<label class="text-[13px] font-semibold text-[#1C1C1E]">适合场景</label>
|
||||
<span class="text-[11px] text-[#8E8E93]">已选 2 个</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 pt-0.5">
|
||||
<span class="h-7 px-3 rounded-full bg-[#007AFF]/10 text-[#007AFF] text-xs font-medium flex items-center gap-1.5">
|
||||
通勤
|
||||
<i class="fa-solid fa-xmark text-[10px] text-[#007AFF]/60 cursor-pointer"></i>
|
||||
</span>
|
||||
<span class="h-7 px-3 rounded-full bg-[#007AFF]/10 text-[#007AFF] text-xs font-medium flex items-center gap-1.5">
|
||||
商务会谈
|
||||
<i class="fa-solid fa-xmark text-[10px] text-[#007AFF]/60 cursor-pointer"></i>
|
||||
</span>
|
||||
<button class="h-7 px-2.5 rounded-full border border-dashed border-[#C7C7CC] text-[#8E8E93] text-xs flex items-center gap-1 hover:border-[#007AFF] hover:text-[#007AFF]">
|
||||
<i class="fa-solid fa-plus text-[10px]"></i> 添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择衣物分组入口（已选 4 件） -->
|
||||
<div class="bg-white rounded-2xl p-4 shadow-sm flex items-center justify-between active:bg-[#F2F2F7] transition cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-[#007AFF]/10 text-[#007AFF] flex items-center justify-center">
|
||||
<i class="fa-solid fa-vest-patches text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[14px] font-semibold text-[#1C1C1E]">选择衣橱单品</div>
|
||||
<div class="text-[12px] text-[#8E8E93]">点击调整当前穿搭包含的衣物</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[13px] text-[#007AFF] font-medium">已选 4 件</span>
|
||||
<i class="fa-solid fa-chevron-right text-[11px] text-[#8E8E93]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定操作栏（保存 + 删除穿搭） -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md thin-border-t px-4 pt-2 pb-7 z-30 space-y-2">
|
||||
<!-- 删除穿搭入口（红色文字按钮） -->
|
||||
<div class="text-center pt-1">
|
||||
<button class="text-[14px] text-[#FF3B30] font-medium py-1 px-4 active:opacity-60">
|
||||
删除穿搭
|
||||
</button>
|
||||
</div>
|
||||
<!-- 保存主按钮 -->
|
||||
<button class="w-full h-11 rounded-full bg-[#007AFF] text-white font-semibold text-[15px] shadow-sm active:bg-[#0062CC]">
|
||||
保存修改
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ================= 屏幕 3：衣橱多选网格选择页（二级半屏或多选网格） ================= -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-purple-400 bg-purple-950/60 px-2.5 py-1 rounded-md border border-purple-800/60">State 03</span>
|
||||
<h2 class="text-base font-medium text-slate-200 mt-1">衣橱多选网格</h2>
|
||||
<p class="text-xs text-slate-400">两列卡片、系统蓝选中描边、右上蓝对勾、最多10件</p>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 微信状态栏 -->
|
||||
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生导航栏 -->
|
||||
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
|
||||
<div class="flex items-center w-16">
|
||||
<button class="w-8 h-8 flex items-center justify-center text-black active:opacity-60">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="font-semibold text-[17px] text-[#000000]">选择衣橱单品</div>
|
||||
<div class="w-20 flex justify-end">
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="h-3 w-[0.5px] bg-black/20"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-black/70"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类筛选横滑栏 -->
|
||||
<div class="bg-white px-3 py-2 thin-border flex gap-2 overflow-x-auto no-scrollbar text-xs font-medium">
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#007AFF] text-white flex-shrink-0">全部 (18)</button>
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">外套 (5)</button>
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">上装 (7)</button>
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">下装 (4)</button>
|
||||
<button class="px-3.5 py-1 rounded-full bg-[#F2F2F7] text-[#3C3C43] flex-shrink-0">鞋履 (2)</button>
|
||||
</div>
|
||||
|
||||
<!-- 两列衣物网格（复用第2屏规范） -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar p-3.5 pb-24">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<!-- 卡片 1 (已勾选) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-shirt text-3xl text-slate-700"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">黑色双排扣西装</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>外套 · 秋冬</span>
|
||||
<span class="text-[#007AFF] font-medium">羊毛</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 2 (已勾选) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-vest text-3xl text-blue-500"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">米白高领羊绒衫</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>上装 · 秋冬</span>
|
||||
<span class="text-[#007AFF] font-medium">羊绒</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 3 (已勾选) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-socks text-3xl text-slate-600"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">垂感高腰阔腿西裤</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>下装 · 四季</span>
|
||||
<span class="text-[#007AFF] font-medium">西装面料</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 4 (已勾选) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border-2 border-[#007AFF] shadow-sm">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[11px] shadow-sm z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-shoe-prints text-3xl text-stone-500"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">复古厚底乐福鞋</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>鞋履 · 四季</span>
|
||||
<span class="text-[#007AFF] font-medium">牛皮</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 5 (未勾选态) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border border-[#E5E5EA] active:scale-[0.98] transition cursor-pointer">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full border border-[#C7C7CC] bg-white flex items-center justify-center text-[10px] text-transparent z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-glasses text-3xl text-slate-400"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">金属细框墨镜</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>配饰 · 夏季</span>
|
||||
<span>合金</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 6 (未勾选态) -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden p-2.5 relative border border-[#E5E5EA] active:scale-[0.98] transition cursor-pointer">
|
||||
<div class="absolute top-2 right-2 w-5 h-5 rounded-full border border-[#C7C7CC] bg-white flex items-center justify-center text-[10px] text-transparent z-10">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</div>
|
||||
<div class="w-full aspect-square bg-[#F2F2F7] rounded-xl flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-bag-shopping text-3xl text-amber-700/60"></i>
|
||||
</div>
|
||||
<div class="font-medium text-[13px] text-[#1C1C1E] truncate">焦糖色托特手袋</div>
|
||||
<div class="flex justify-between items-center text-[11px] text-[#8E8E93] mt-0.5">
|
||||
<span>包袋 · 四季</span>
|
||||
<span>植鞣皮</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定栏（已选数量 + 确定按钮） -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md thin-border-t px-4 pt-3 pb-8 z-30 flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-[15px] font-semibold text-[#1C1C1E]">
|
||||
已选 <span class="text-[#007AFF]">4</span> 件
|
||||
</div>
|
||||
<div class="text-[11px] text-[#8E8E93]">最多可选择 10 件单品</div>
|
||||
</div>
|
||||
<button class="h-10 px-7 rounded-full bg-[#007AFF] text-white font-semibold text-[14px] shadow-sm active:bg-[#0062CC]">
|
||||
确定
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ================= 屏幕 4：异常态反馈与确认弹窗画板 ================= -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-3 text-center">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-rose-400 bg-rose-950/60 px-2.5 py-1 rounded-md border border-rose-800/60">State 04</span>
|
||||
<h2 class="text-base font-medium text-slate-200 mt-1">异常提示 & 确认删除</h2>
|
||||
<p class="text-xs text-slate-400">毛玻璃轻提示浮层、iOS 原生系统级确认对话框</p>
|
||||
</div>
|
||||
|
||||
<div class="device-shell">
|
||||
<!-- 微信状态栏 -->
|
||||
<div class="h-11 pt-3 px-6 flex justify-between items-center text-xs font-semibold text-black bg-white z-20">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center space-x-1.5 text-[11px]">
|
||||
<i class="fa-solid fa-signal text-[10px]"></i>
|
||||
<i class="fa-solid fa-wifi text-[10px]"></i>
|
||||
<i class="fa-solid fa-battery-full text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生导航栏 -->
|
||||
<div class="h-11 px-3 flex items-center justify-between bg-white thin-border z-20">
|
||||
<div class="flex items-center w-16">
|
||||
<button class="w-8 h-8 flex items-center justify-center text-black">
|
||||
<i class="fa-solid fa-chevron-left text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="font-semibold text-[17px] text-[#000000]">编辑穿搭</div>
|
||||
<div class="w-20 flex justify-end">
|
||||
<div class="capsule-btn">
|
||||
<i class="fa-solid fa-ellipsis text-xs text-black/70"></i>
|
||||
<div class="h-3 w-[0.5px] bg-black/20"></div>
|
||||
<div class="w-3.5 h-3.5 rounded-full border-[1.5px] border-black/70 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模拟半透明遮罩与浮层展示 -->
|
||||
<div class="flex-1 p-4 flex flex-col justify-around relative">
|
||||
|
||||
<!-- 异常轻提示浮层 1: 未选衣物 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">未选衣物点击保存触发：</div>
|
||||
<div class="toast-pill text-white px-4 py-2.5 rounded-2xl flex items-center gap-2.5 text-[13px] font-medium animate-pulse">
|
||||
<div class="w-5 h-5 rounded-full bg-[#FF9500] flex items-center justify-center text-[10px] text-white">
|
||||
<i class="fa-solid fa-exclamation"></i>
|
||||
</div>
|
||||
<span>至少选择 1 件衣物</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 异常轻提示浮层 2: 名称为空 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">名称为空触发：</div>
|
||||
<div class="toast-pill text-white px-4 py-2.5 rounded-2xl flex items-center gap-2.5 text-[13px] font-medium">
|
||||
<div class="w-5 h-5 rounded-full bg-[#FF3B30] flex items-center justify-center text-[10px] text-white">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
</div>
|
||||
<span>请填写穿搭名称</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 异常轻提示浮层 3: 超出10件 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">多选超过10件触发：</div>
|
||||
<div class="toast-pill text-white px-4 py-2.5 rounded-2xl flex items-center gap-2.5 text-[13px] font-medium">
|
||||
<div class="w-5 h-5 rounded-full bg-[#FF9500] flex items-center justify-center text-[10px] text-white">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
</div>
|
||||
<span>最多选择 10 件衣物</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成功轻提示: 保存成功 -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="text-[11px] text-slate-500 mb-1.5 font-medium">保存成功反馈：</div>
|
||||
<div class="toast-pill text-white px-5 py-3 rounded-2xl flex flex-col items-center gap-1.5 text-[13px] font-medium">
|
||||
<i class="fa-solid fa-circle-check text-2xl text-[#34C759]"></i>
|
||||
<span>已保存</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原生 iOS 确认弹窗：确认删除这套穿搭？ -->
|
||||
<div class="mt-2 bg-white/95 backdrop-blur-xl rounded-[14px] overflow-hidden border border-[#E5E5EA] shadow-xl mx-2">
|
||||
<div class="p-4 text-center">
|
||||
<div class="font-semibold text-[17px] text-[#000000]">确认删除这套穿搭？</div>
|
||||
<div class="text-[13px] text-[#8E8E93] mt-1 leading-snug">删除后不可恢复，但不会影响衣橱内的单品。</div>
|
||||
</div>
|
||||
<div class="border-t border-[#E5E5EA] grid grid-cols-2">
|
||||
<button class="h-11 text-[17px] text-[#007AFF] font-normal border-r border-[#E5E5EA] active:bg-[#F2F2F7]">
|
||||
取消
|
||||
</button>
|
||||
<button class="h-11 text-[17px] text-[#FF3B30] font-semibold active:bg-[#F2F2F7]">
|
||||
确认删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区占位 -->
|
||||
<div class="h-8 bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部规格对照与交付说明 -->
|
||||
<footer class="max-w-7xl mx-auto mt-6 px-4">
|
||||
<div class="bg-slate-800/80 border border-slate-700/80 rounded-2xl p-6 text-slate-300">
|
||||
<h3 class="text-white font-semibold text-base mb-3 flex items-center gap-2">
|
||||
<i class="fa-solid fa-clipboard-check text-blue-400"></i>
|
||||
补充页设计规范落地检查清单
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs leading-relaxed text-slate-400">
|
||||
<div class="bg-slate-900/60 p-3.5 rounded-xl border border-slate-700/50">
|
||||
<div class="font-medium text-slate-200 mb-1 text-[13px]">1. 视图与拼图引擎</div>
|
||||
<p>顶部预览区在未选衣物时展示 <code class="text-blue-400">#F2F2F7</code> 占位与线性衣架；已选时自适应渲染错落层次抠图卡片，并标注已选件数。</p>
|
||||
</div>
|
||||
<div class="bg-slate-900/60 p-3.5 rounded-xl border border-slate-700/50">
|
||||
<div class="font-medium text-slate-200 mb-1 text-[13px]">2. 完整表单与交互约束</div>
|
||||
<p>名称必填（上限32字）、描述多行（上限500字含字数计数器）、场景快捷标签，底部保存按钮未就绪时降低透明度置灰禁用。</p>
|
||||
</div>
|
||||
<div class="bg-slate-900/60 p-3.5 rounded-xl border border-slate-700/50">
|
||||
<div class="font-medium text-slate-200 mb-1 text-[13px]">3. 编辑状态与异常防御</div>
|
||||
<p>编辑态顶部为预填数据与独立红色「删除穿搭」入口，弹窗带二次确认；集成 1~10 件衣物阈值校验与毛玻璃 Toast 轻提示。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 447 KiB |
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user