fix: 输入框与旁边的按钮行高度对不齐
<textarea class="q-input"> 没设 rows 属性,浏览器按默认 2 行的最小 内容高度处理,字体度量四舍五入后比显式 height:96px 略高几像素, 把整个输入框撑高,导致跟同高度的语音/拍照按钮顶边对不齐(底边因为 input-bar 是 align-items:flex-end 对齐所以没发现,只有顶边露馅)。 加 rows="1" 让最小内容高度不再跟显式高度打架,同时加 min-height:0 防御 UA 默认样式。 用像素网格量过真机截图确认:这是 textarea 本来就有的问题,不是这次 加拍照按钮引入的,只是三个按钮排一起后更显眼。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
ec634c4133
commit
a78c88c86a
@ -677,6 +677,7 @@ onUnmounted(() => {
|
||||
<textarea
|
||||
v-model="question"
|
||||
class="q-input"
|
||||
rows="1"
|
||||
:disabled="batchRunning"
|
||||
:placeholder="pendingImage ? '针对这张照片提问,留空则默认描述图片…' : '输入问题,Enter 发送,Shift+Enter 换行…'"
|
||||
@keydown="handleEnter"
|
||||
@ -868,7 +869,7 @@ onUnmounted(() => {
|
||||
|
||||
.q-input {
|
||||
width: 100%; box-sizing: border-box;
|
||||
height: 96px;
|
||||
height: 96px; min-height: 0;
|
||||
border: 2px solid var(--line-2); border-radius: var(--radius);
|
||||
padding: 16px 20px; font-family: inherit;
|
||||
font-size: 20px; line-height: 1.5; resize: none;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user