43 lines
1.5 KiB
Markdown
43 lines
1.5 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
cd mini-program
|
|
npm run build:mp-weixin
|
|
```
|
|
|
|
Expected result: build succeeds with no new errors.
|