旅行日志

创建一个移动旅行应用 UI mockup，显示在逼真的 iPhone-style phone frame 内，并居中置于白色网页上。技术栈：React + TypeScript、Tailwind CSS、Lucide React icons、Vite。字体：Google Fonts “Inter”（字重 300-900）。

---

**页面容器：**

全视口（`h-screen w-screen`），纯白背景，使用 flexbox 居中，隐藏溢出内容。

---

**手机边框：**

- 尺寸：375px x 780px
- 背景：`#0a0a0c`
- Border-radius：52px
- 溢出：hidden
- Box-shadow（分层边框效果）：
  ```
  inset 0 0 0 2px rgba(255, 255, 255, 0.08),
  0 0 0 1px rgba(0, 0, 0, 0.6),
  0 0 0 10px #1a1a1e,
  0 0 0 11px rgba(255, 255, 255, 0.06),
  0 0 60px rgba(0, 0, 0, 0.5)
  ```

**Dynamic Island 刘海：** Absolute，top-0，水平居中，宽 120px，高 28px，纯黑色，`rounded-b-2xl`，z-50。

---

**顶部标题栏（absolute，top）：**

- Z-index：30
- `backdrop-filter: blur(12px)`，搭配 `background-color: rgba(10, 10, 12, 0.75)`
- 内边距：`px-6 pt-14 pb-4`
- 左侧：带“亚洲”文字（text-lg、font-semibold、白色）和 ChevronDown icon（size 18、text-white/70）的按钮
- 右侧：Calendar icon 按钮（size 22、text-white/70）

---

**可滚动内容：**

- `overflow-y-auto`，隐藏滚动条
- 内边距：`px-6 pt-28 pb-24`
- 垂直间距：`space-y-4`（间距 16px）

---

**目的地卡片（共 4 张）：**

每张卡片：
- 全宽，高 200px，rounded-2xl，隐藏溢出内容，position relative
- 满幅背景图（`absolute inset-0, object-cover`）
- 渐变遮罩：`bg-gradient-to-t from-black/20 to-transparent`
- **左上角：** liquid-glass 胶囊（`rounded-full px-3 py-1`），带“{N} 个瞬间”文字（text-white/90、text-xs、font-normal）
- **右上角：** liquid-glass 圆形（w-8 h-8、rounded-full），带 MoreHorizontal icon（size 16、text-white/80）
- **底部：** 目的地名称使用 96px 粗体，水平居中，裁切在高 80px 且设置 `overflow: hidden` 的容器中。颜色：`rgba(255, 255, 255, 0.55)`，tracking-tight，leading-none，顶部外边距 2px

**卡片数据及准确图片 URL：**

1. **东京** - 23 个瞬间
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_101902_e8f0f37b-18b7-4c14-bb5c-99f0724d2646.png&w=1280&q=85`

2. **首尔** - 18 个瞬间
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_101935_4b17f250-8ddb-4ff2-b63d-dfd3497d4428.png&w=1280&q=85`

3. **巴厘岛** - 29 个瞬间
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_101958_7116d6bf-fd6f-496f-b3cf-007688cd5123.png&w=1280&q=85`

4. **罗马** - 15 个瞬间
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143008_72ee7299-04a8-474c-ae73-220d45b24a20.png&w=1280&q=85`

---

**悬浮底部导航栏：**

- Absolute，bottom-6，水平居中，z-30
- liquid-glass 胶囊（`rounded-full, flex, gap-6, px-6 py-2`）
- 3 个导航项（flex-col、items-center、gap-0.5）：
  - “动态” + Home icon（size 20）-- 未激活（`text-white/50`）
  - “账户” + User icon（size 20）-- 未激活（`text-white/50`）
  - “旅程” + FileText icon（size 20）-- 已激活（`text-white`）
- 标签样式：`text-[10px] font-medium`

---

**LIQUID-GLASS CSS：**

```css
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
```

---

**错落入场动画：**

每张卡片初始状态为 `opacity: 0` 和 `transform: translateY(24px)`。组件挂载时，由 `setTimeout` 触发状态变化，过渡到 `opacity: 1` 和 `translateY(0)`。过渡：`transition-all duration-700 ease-out`。错开延迟：第一张卡片为 150ms，此后每张增加 120ms（150、270、390、510ms）。使用 React `useState` + `useEffect` 实现。

---

**隐藏滚动条：**

```css
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
```

---

**全局：**

```css
* { font-family: 'Inter', sans-serif; }
```

在 HTML head 中加载：
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
```