fix(mobile): precise centering in ask page switch and composer
Replace line-height centering with flex + fixed heights, and swap
emoji/unicode glyphs (+ × ⌨ 🎤) for uni-icons vector icons so
alignment and rendering are consistent across platforms.
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
|
||||
<view class="composer-bar">
|
||||
<button class="composer-icon" :disabled="disabled || recording" aria-label="更多功能" @click="panelOpen = !panelOpen">
|
||||
<text class="composer-icon-text">{{ panelOpen ? '×' : '+' }}</text>
|
||||
<uni-icons :type="panelOpen ? 'close' : 'plus'" size="20" color="#3a4350" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -55,7 +55,7 @@
|
||||
:aria-label="voiceMode ? '切换键盘输入' : '切换语音输入'"
|
||||
@click="toggleVoiceMode"
|
||||
>
|
||||
<text class="composer-icon-text">{{ voiceMode ? '⌨' : '🎤' }}</text>
|
||||
<uni-icons :type="voiceMode ? 'compose' : 'mic'" size="19" color="#3a4350" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -309,16 +309,19 @@ defineExpose({ teardown, setDraft });
|
||||
}
|
||||
|
||||
.media-chip-remove {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
background: #eef0f3;
|
||||
color: #6b7480;
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.composer-bar {
|
||||
@@ -328,32 +331,35 @@ defineExpose({ teardown, setDraft });
|
||||
}
|
||||
|
||||
.composer-icon {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid #dfe3e8;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.composer-icon-text {
|
||||
color: #3a4350;
|
||||
font-size: 19px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hold-talk {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 38px;
|
||||
height: 38px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid #dfe3e8;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
color: #232a33;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
@@ -379,8 +385,11 @@ defineExpose({ teardown, setDraft });
|
||||
}
|
||||
|
||||
.composer-send {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
min-height: 38px;
|
||||
height: 38px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0 16px;
|
||||
border-radius: 10px;
|
||||
@@ -388,6 +397,7 @@ defineExpose({ teardown, setDraft });
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.composer-panel {
|
||||
|
||||
@@ -2013,15 +2013,20 @@ onUnload(() => {
|
||||
}
|
||||
|
||||
.chat-source-switch .source-option {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: #5a6270;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.chat-source-switch .source-option.active {
|
||||
@@ -2403,7 +2408,7 @@ onUnload(() => {
|
||||
}
|
||||
|
||||
.chat-source-switch .source-option {
|
||||
padding: 5px 0;
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user