67 lines
1.9 KiB
Markdown
67 lines
1.9 KiB
Markdown
---
|
||
author: AI Assistant
|
||
created_at: 2026-07-19
|
||
purpose: 修复 chat 视图底部发送按钮过高过大、与输入框不等高的问题
|
||
---
|
||
|
||
# Chat 视图发送按钮等高修复设计
|
||
|
||
## 概述
|
||
|
||
chat 视图底部 `.chat-input-bar` 中"发送"按钮（`.chat-send-btn`）的 `padding: 16rpx 32rpx` 撑大了按钮高度，与文本输入框 `.result-chat-input`（`min-height: 60rpx`）不等高，视觉上按钮比输入框大。
|
||
|
||
## 问题
|
||
|
||
- `.chat-send-btn { padding: 16rpx 32rpx; }` — 上下各 16rpx padding 撑大按钮
|
||
- `.result-chat-input { min-height: 60rpx; }` — 输入框有 min-height，但实际渲染高度随内容变化
|
||
- `.chat-input-bar { align-items: flex-end; }` — 底部对齐进一步放大不等高视觉差异
|
||
|
||
## 修复方案
|
||
|
||
### 改动文件
|
||
|
||
- `mini-program/src/pages/main/ScriptView.vue`（样式部分）
|
||
|
||
### 改动 1：`.chat-send-btn` 改 padding + 设 height
|
||
|
||
```css
|
||
.chat-send-btn {
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 32rpx;
|
||
background: #087e8b;
|
||
border-radius: 32rpx;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
}
|
||
```
|
||
|
||
**关键变化**：
|
||
- 新增 `height: 60rpx`：与 `.result-chat-input` 的 `min-height: 60rpx` 保持一致
|
||
- `padding: 16rpx 32rpx` → `padding: 0 32rpx`：去掉上下 padding，靠 height+flex 居中文字
|
||
- 新增 `display: flex; align-items: center; justify-content: center;`：文字垂直居中
|
||
|
||
### 改动 2：`.chat-input-bar` 改 `align-items`
|
||
|
||
```css
|
||
.chat-input-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
padding: 16rpx 24rpx;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-top: 2rpx solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
```
|
||
|
||
**关键变化**：
|
||
- `align-items: flex-end` → `align-items: center`：按钮和输入框垂直居中对齐
|
||
|
||
## 验收标准
|
||
|
||
- [ ] 发送按钮与文本输入框等高
|
||
- [ ] 按钮文字垂直居中
|
||
- [ ] mp-weixin 编译通过
|
||
- [ ] H5 浏览器 Console 无报错 |