|
|
@@ -11,17 +11,29 @@
|
|
|
page {
|
|
|
background: linear-gradient(180deg, #E8F4FC 0%, #F5F9FC 100%);
|
|
|
height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.chat-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- height: calc(100vh - 88px);
|
|
|
box-sizing: border-box;
|
|
|
+ padding-top: 88px;
|
|
|
}
|
|
|
|
|
|
+/* 聊天滚动区域 - 固定定位,不随键盘变化 */
|
|
|
.chat-scroll {
|
|
|
- flex: 1;
|
|
|
+ position: fixed;
|
|
|
+ top: 88px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 120rpx;
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
@@ -264,10 +276,16 @@ page {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
-/* 输入区域 - 参考蓝湖 box_10 */
|
|
|
+/* 输入区域 - 固定在底部,跟随键盘移动 */
|
|
|
.input-area {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
padding: 20rpx 24rpx;
|
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
+ background: linear-gradient(180deg, rgba(245, 249, 252, 0.9) 0%, rgba(232, 244, 252, 0.95) 100%);
|
|
|
+ z-index: 100;
|
|
|
}
|
|
|
|
|
|
.input-container {
|
|
|
@@ -281,8 +299,10 @@ page {
|
|
|
align-items: center;
|
|
|
background-color: #FFFFFF;
|
|
|
border-radius: 86rpx;
|
|
|
- padding: 12rpx 24rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ height: 96rpx;
|
|
|
border: 2rpx solid rgba(255, 255, 255, 1);
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.voice-btn {
|
|
|
@@ -307,7 +327,8 @@ page {
|
|
|
|
|
|
.chat-input {
|
|
|
flex: 1;
|
|
|
- height: 48rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
font-size: 30rpx;
|
|
|
color: rgba(19, 20, 21, 1);
|
|
|
background: transparent;
|
|
|
@@ -318,26 +339,22 @@ page {
|
|
|
font-size: 30rpx;
|
|
|
}
|
|
|
|
|
|
-/* 发送按钮 - 参考蓝湖 image-wrapper_2 */
|
|
|
-.image-btn {
|
|
|
- width: 96rpx;
|
|
|
+/* 发送按钮 */
|
|
|
+.send-btn {
|
|
|
+ width: 120rpx;
|
|
|
height: 96rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- background-color: #FFFFFF;
|
|
|
+ background: linear-gradient(135deg, #42A5F5 0%, #2196F3 100%);
|
|
|
border-radius: 86rpx;
|
|
|
margin-left: 12rpx;
|
|
|
}
|
|
|
|
|
|
-.image-icon {
|
|
|
- font-size: 48rpx;
|
|
|
- color: #666;
|
|
|
-}
|
|
|
-
|
|
|
-.image-icon-img {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
+.send-btn-text {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
/* 加载中状态 */
|