2025.10.17

pages/finance/service.vue

@@ -68,9 +68,15 @@
 				<!-- 输入框模式 -->
 				<view class="input-mode" v-if="isInputMode">
 					<view class="input-container">
+						<!-- 左侧切换按钮 -->
+						<view class="switch-icon" @click="toggleInputMode">
+							<u-icon name="keyboard" color="#458CF9" size="40"></u-icon>
+						</view>
+						
+						<!-- 中间输入框 -->
 						<u-input
 							v-model="inputText"
-							placeholder="请在这里输入文字"
+							placeholder="点击输入文字"
 							:border="false"
 							:clearable="false"
 							class="custom-input"
@@ -79,29 +85,31 @@
 								borderRadius: '44rpx',
 								padding: '0 30rpx',
 								height: '88rpx',
-								fontSize: '28rpx'
+								fontSize: '28rpx',
+								flex: 1,
+								margin: '0 20rpx',
+								textAlign: 'center'
 							}"
 						></u-input>
-						<view class="switch-icon" @click="toggleInputMode">
-							<u-icon name="chat" color="#458CF9" size="40"></u-icon>
-						</view>
+						
+						<!-- 右侧发送按钮 -->
+						<u-button 
+							class="send-btn"
+							@click="handleSendMessage"
+							:custom-style="{
+								background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
+								color: '#fff',
+								border: 'none',
+								height: '88rpx',
+								width: '140rpx',
+								borderRadius: '44rpx',
+								fontSize: '28rpx',
+								fontWeight: '500'
+							}"
+						>
+							发送
+						</u-button>
 					</view>
-					<u-button 
-						class="send-btn"
-						@click="handleSendMessage"
-						:custom-style="{
-							background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
-							color: '#fff',
-							border: 'none',
-							height: '60rpx',
-							borderRadius: '30rpx',
-							fontSize: '26rpx',
-							fontWeight: '500',
-							marginTop: '20rpx'
-						}"
-					>
-						发送
-					</u-button>
 				</view>
 
 				<!-- 按钮模式 -->
@@ -506,12 +514,7 @@ const handleHumanService = () => {
 			.input-container {
 				display: flex;
 				align-items: center;
-				gap: 20rpx;
-				
-				.custom-input {
-					flex: 1;
-					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-				}
+				justify-content: space-between;
 				
 				.switch-icon {
 					width: 80rpx;
@@ -523,16 +526,27 @@ const handleHumanService = () => {
 					justify-content: center;
 					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 					transition: all 0.3s;
+					flex-shrink: 0;
 					
 					&:active {
 						transform: scale(0.95);
 					}
 				}
-			}
-			
-			.send-btn {
-				width: 200rpx;
-				align-self: flex-end;
+				
+				.custom-input {
+					flex: 1;
+					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+					margin: 0 20rpx;
+				}
+				
+				.send-btn {
+					flex-shrink: 0;
+					transition: all 0.3s;
+					
+					&:active {
+						transform: scale(0.98);
+					}
+				}
 			}
 		}
 		
@@ -540,7 +554,6 @@ const handleHumanService = () => {
 		.button-mode {
 			display: flex;
 			align-items: center;
-			gap: 20rpx;
 			
 			.switch-icon {
 				width: 80rpx;
@@ -552,6 +565,7 @@ const handleHumanService = () => {
 				justify-content: center;
 				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 				transition: all 0.3s;
+				flex-shrink: 0;
 				
 				&:active {
 					transform: scale(0.95);
@@ -559,6 +573,9 @@ const handleHumanService = () => {
 			}
 			
 			.consult-btn {
+				flex: 1;
+				margin-left: 20rpx;
+				
 				.btn-icon {
 					margin-right: 15rpx;
 				}
@@ -583,5 +600,17 @@ const handleHumanService = () => {
 		grid-template-columns: repeat(4, 1fr);
 		gap: 10rpx;
 	}
+	
+	.human-service .input-mode .input-container {
+		gap: 10rpx;
+		
+		.custom-input {
+			margin: 0 10rpx;
+		}
+		
+		.send-btn {
+			width: 120rpx;
+		}
+	}
 }
 </style>