input 输入框样式调整11

This commit is contained in:
wangdongbo 2026-02-05 14:02:35 +08:00
parent f0def89961
commit 620a7b8f7e
3 changed files with 55 additions and 28 deletions

View File

@ -62,17 +62,29 @@
}}</view>
</view>
<view class="content">{{ i.taskContent || "暂无内容" }}</view>
<view v-if="i.sendContent || (i.fileList && i.fileList.length > 0)" class="send-content-wrapper">
<view
v-if="i.sendContent || (i.fileList && i.fileList.length > 0)"
class="send-content-wrapper"
>
<view class="send-content-section">
<view class="send-content-label">发送内容:</view>
<view class="send-content-body">
<view v-if="i.sendContent" class="send-text">{{ i.sendContent }}</view>
<view v-if="i.fileList && i.fileList.length > 0" class="file-list">
<view v-for="(file, idx) in i.fileList" :key="idx" class="file-item" :class="`file-type-${file.type}`">
<view v-if="file.type === 'image'" class="file-icon">🖼</view>
<view v-else-if="file.type === 'article'" class="file-icon">📄</view>
<view v-else-if="file.type === 'questionnaire'" class="file-icon">📋</view>
<view class="file-name">{{ file.file?.name || file.name }}</view>
<view v-if="i.sendContent" class="send-text">{{
i.sendContent
}}</view>
<view
v-if="i.fileList && i.fileList.length > 0"
class="file-list"
>
<view
v-for="(file, idx) in i.fileList"
:key="idx"
class="file-item"
:class="`file-type-${file.type}`"
>
<view class="file-name">{{
file.file?.name || file.name
}}</view>
</view>
</view>
</view>
@ -516,6 +528,7 @@ async function sendFollowUp(todo) {
}
// 2.
debugger;
if (Array.isArray(todo.fileList)) {
for (const file of todo.fileList) {
if (file.type === "image" && file.URL) {

View File

@ -10,7 +10,7 @@ $primary-color: #0877F1;
top: 0;
left: 0;
right: 0;
bottom: 20rpx;
bottom: 0;
display: flex;
flex-direction: column;
background-color: #f5f5f5;
@ -357,30 +357,35 @@ $primary-color: #0877F1;
background: #fff;
border-top: 1rpx solid #e0e0e0;
position: relative;
z-index: 200; // 确保输入区域在评价卡片之上但在弹窗之下
// padding: 32rpx 16rpx 28rpx 16rpx;
z-index: 200;
padding-bottom: env(safe-area-inset-bottom);
}
.input-toolbar {
display: flex;
align-items: center;
padding: 28rpx 0 28rpx 0;
padding: 16rpx 20rpx;
gap: 12rpx;
}
.voice-toggle-btn{
.voice-toggle-btn {
width: 56rpx;
height: 56rpx;
display: flex;
align-items: center;
flex: none;
padding-left: 20rpx;
justify-content: center;
flex-shrink: 0;
padding: 0;
}
.plus-btn {
width: 56rpx;
height: 56rpx;
display: flex;
align-items: center;
flex: none;
padding-right: 20rpx;
justify-content: center;
flex-shrink: 0;
padding: 0;
}
.send-btn {
@ -390,16 +395,16 @@ $primary-color: #0877F1;
font-weight: 600;
border: none;
border-radius: 40rpx;
height: 64rpx;
height: 56rpx;
min-width: 112rpx;
padding: 0 32rpx;
margin-left: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(56, 118, 246, 0.08);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
flex: none;
flex-shrink: 0;
white-space: nowrap;
}
.send-btn:active {
@ -418,10 +423,9 @@ $primary-color: #0877F1;
.text-input,
.voice-input-btn {
flex: 1;
padding: 16rpx 46rpx;
padding: 16rpx;
background-color: #f3f5fa;
border-radius: 20rpx;
margin: 0 16rpx;
border-radius: 10rpx;
font-size: 28rpx;
min-height: 80rpx;
max-height: 200rpx;
@ -436,9 +440,10 @@ $primary-color: #0877F1;
}
.text-input {
padding: 16rpx 46rpx;
padding: 20rpx;
display: block;
line-height: 1.5;
height: 80rpx;
}
.voice-input-btn {

View File

@ -8,7 +8,7 @@
<view class="input-area">
<textarea v-if="!showVoiceInput" class="text-input" v-model="inputText" placeholder="我来说两句..."
@confirm="sendTextMessage" @focus="handleInputFocus" @input="handleInput"
:auto-height="true" :show-confirm-bar="false" :adjust-position="true"
:auto-height="true" :show-confirm-bar="false" :adjust-position="true" :cursor-spacing="40"
/>
<input v-else class="voice-input-btn" :class="{ recording: isRecording }" @touchstart="startRecord"
@touchmove="onRecordTouchMove" @touchend="stopRecord" @touchcancel="cancelRecord" :placeholder="isRecording ? '松开发送' : '按住说话'" disabled>
@ -82,7 +82,12 @@ const props = defineProps({
});
// Emits
const emit = defineEmits(["messageSent", "scrollToBottom", "endConsult", "openConsult"]);
const emit = defineEmits([
"messageSent",
"scrollToBottom",
"endConsult",
"openConsult",
]);
//
const inputText = ref("");
@ -425,7 +430,11 @@ const handleOpenConsult = () => {
const morePanelButtons = computed(() => {
const buttons = [
{ text: "照片", icon: "/static/icon/zhaopian.png", action: showImagePicker },
{
text: "照片",
icon: "/static/icon/zhaopian.png",
action: showImagePicker,
},
{
text: "回访任务",
icon: "/static/icon/huifangrenwu.png",