Files

T

peanut 8a2001af3d docs: Chat 视图发送按钮等高修复设计文档

2026-07-19 21:04:04 +08:00

1.9 KiB

Raw Blame History

author, created_at, purpose

author	created_at	purpose
AI Assistant	2026-07-19	修复 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

.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`

.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 无报错

1.9 KiB Raw Blame History Unescape Escape