1.5 KiB
1.5 KiB
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.