1.5 KiB
Mini Program Script Home Cosmic Background Design
Goal
Polish the mini-program script generation home page so the headline is centered with comfortable spacing, and the page background gains subtle cosmic motion that matches the current purple/gold style.
Approved Approach
Use option A: a restrained cosmic background.
Behavior
- Center the headline
今天有什么心愿想实现. - Keep the headline on one line.
- Add a slightly larger gap between the headline and the inspiration section.
- Add background-only cosmic elements:
- a distant planet near the upper-right edge,
- a faint smaller planet near the lower-left edge,
- a few animated meteors moving diagonally,
- subtle star speckles.
- Background elements must stay behind page content and must not affect tapping inputs, inspiration cards, buttons, or the microphone.
Implementation Notes
Only mini-program/src/pages/main/ScriptView.vue needs to change.
Add a cosmic-background layer as the first child of .script-view. Set it to position: absolute, inset: 0, pointer-events: none, and a lower z-index.
Set .script-view to position: relative and overflow: hidden. Set .wish-home, .generation-view, and .result-view to position: relative; z-index: 1;.
Use CSS-only animation for meteors and slow planet drift. Keep opacity low so content remains readable.
Validation
Run:
cd mini-program
npm run build:mp-weixin
Expected result: build succeeds with no new errors.