# H5 Page Optimization Design

## Goal

Improve the existing hotel business H5 pages as a high-frequency mobile operations tool, keeping the current Vue 3, Vant, and green verification-oriented brand language.

## Direction

Use a practical business-tool polish rather than a marketing redesign. The UI should feel clearer, steadier, and more tactile for staff who repeatedly check orders, scan verification codes, and review events.

## Scope

- Keep the existing route structure, APIs, Vant components, icons, and data flow.
- Upgrade global design tokens while preserving existing variable names for compatibility.
- Improve common surfaces: page shell, panels, list cards, buttons, tabs, search, forms, empty states, and fixed actions.
- Polish key pages: home, order list/detail, event list/create, verify scan/confirm/result, mine, and login.
- Avoid new dependencies and framework migration.

## Visual System

- Primary tone remains green, with more precise neutrals and status colors.
- Cards use tighter radius, clearer borders, subtle tinted shadows, and pressed feedback.
- Typography gains a clearer scale and tabular numeric rendering for order IDs, amounts, and counts.
- Loading and empty states should use composed surfaces rather than isolated spinners.
- Mobile constraints target narrow phones first, then the existing 560px page max width.

## Verification

- Run TypeScript/build verification.
- Start the local dev server and inspect representative pages in a mobile viewport.