peanut
e511b366cc
设计内容:
- 添加渐变背景 linear-gradient(135deg, #9333EA 0%, #7C3AED 100%)
- 文字居中使用 flex + align-items/justify-content
- 圆角调整为 32rpx（与原型 rounded-2xl 一致）
- 保持高度 96rpx
解决 issues: 小程序"创造未来"页面生成按钮文字不居中，
缺少渐变背景，与原型图不一致
119 lines
3.1 KiB
Markdown
119 lines
3.1 KiB
Markdown
---
|
||
author: Peanut
|
||
created_at: 2026-04-07
|
||
purpose: 优化"创造未来"页面生成按钮样式，与原型图完全一致
|
||
---
|
||
|
||
# 小程序"生成平行人生剧本"按钮样式优化设计
|
||
|
||
## 问题背景
|
||
|
||
当前 ScriptView.vue 中的"生成平行人生剧本"按钮存在以下问题：
|
||
1. 文字没有垂直居中，视觉上偏上或偏下
|
||
2. 缺少渐变背景，使用纯色而非原版的渐变效果
|
||
3. 圆角与原型不一致
|
||
4. 整体视觉效果与原型有较大差异
|
||
|
||
## 原型参考
|
||
|
||
**原型代码**（mini-program-prototype/components.js）：
|
||
```html
|
||
<button id="gen-script" class="w-full py-4 mt-2 bg-gradient-to-r from-purple-500 to-violet-500 text-white rounded-2xl font-bold text-sm shadow-[0_8px_20px_rgba(168,85,247,0.3)] flex items-center justify-center gap-2 active:scale-95 transition-all">
|
||
生成平行人生剧本
|
||
</button>
|
||
```
|
||
|
||
**原型样式解析**：
|
||
| 属性 | 原型值 | 换算为 rpx |
|
||
|------|--------|-----------|
|
||
| 宽度 | w-full | 100% |
|
||
| 高度 | py-4 (3rem) | ≈ 96rpx |
|
||
| 背景 | bg-gradient-to-r from-purple-500 to-violet-500 | 渐变 |
|
||
| 圆角 | rounded-2xl (1rem) | ≈ 32rpx |
|
||
| 字号 | text-sm (0.875rem) | ≈ 28rpx |
|
||
| 阴影 | shadow-[0_8px_20px_rgba(168,85,247,0.3)] | 保持一致 |
|
||
| 文字对齐 | flex items-center justify-center | 居中对齐 |
|
||
|
||
## 设计方案
|
||
|
||
### 当前代码问题
|
||
|
||
```css
|
||
/* 当前样式 - 缺少关键属性 */
|
||
.generate-btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
border-radius: 40rpx; /* 问题：圆角过大 */
|
||
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
||
margin-top: 24rpx;
|
||
/* 缺失：渐变背景、文字居中 */
|
||
}
|
||
```
|
||
|
||
### 修改后样式
|
||
|
||
```css
|
||
.generate-btn {
|
||
/* 尺寸 */
|
||
width: 100%;
|
||
height: 96rpx;
|
||
|
||
/* 背景渐变 - 与原型一致 */
|
||
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
||
|
||
/* 圆角 - 与原型 rounded-2xl 一致 */
|
||
border-radius: 32rpx;
|
||
|
||
/* 阴影 */
|
||
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
||
|
||
/* 外边距 */
|
||
margin-top: 24rpx;
|
||
|
||
/* 文字居中 - 核心修复 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
/* 文字样式 */
|
||
color: #ffffff !important;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
|
||
/* 过渡动画 */
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.generate-btn:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.generate-btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
```
|
||
|
||
### 修改文件
|
||
|
||
| 文件 | 修改内容 |
|
||
|------|----------|
|
||
| `mini-program/src/pages/main/ScriptView.vue` | 更新 `.generate-btn` 样式 |
|
||
| `mini-program/src/App.vue` | 检查并更新 `.btn-primary` 全局样式（如有需要） |
|
||
|
||
### 验收标准
|
||
|
||
- [x] 按钮文字在按钮内垂直和水平居中
|
||
- [x] 按钮背景为紫色渐变（#9333EA → #7C3AED）
|
||
- [x] 圆角为 32rpx
|
||
- [x] 高度保持 96rpx
|
||
- [x] 点击时有缩放反馈效果（scale 0.98）
|
||
- [x] 禁用状态有透明度降低效果
|
||
|
||
## 注意事项
|
||
|
||
1. **不要破坏现有功能**：保持按钮的 loading、disabled 状态逻辑
|
||
2. **保持代码一致性**：使用现有的 CSS 变量和命名约定
|
||
3. **小程序兼容性**：确保样式在微信小程序和 H5 都能正常显示
|