31 lines
1.5 KiB
Markdown
31 lines
1.5 KiB
Markdown
# 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.
|