|
|
@@ -658,6 +658,29 @@
|
|
|
flex-shrink: 0;
|
|
|
// border-top: 1px solid #f3f4f6;
|
|
|
margin-top: auto;
|
|
|
+ // 确保按钮区域布局稳定
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // 移动端优化
|
|
|
+ @media only screen and (max-width: 600px) {
|
|
|
+ justify-content: flex-start;
|
|
|
+ gap: 8px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ // 左侧选项区域
|
|
|
+ > div:first-child {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 右侧按钮区域（包含上传和发送按钮）
|
|
|
+ > div:last-child {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.left-options {
|
|
|
display: flex;
|
|
|
@@ -764,4 +787,82 @@
|
|
|
.chat-input-send {
|
|
|
bottom: 30px;
|
|
|
}
|
|
|
+
|
|
|
+ // 移动端输入框底部按钮区域优化
|
|
|
+ .chat-input-bottom-bar {
|
|
|
+ padding: 6px 12px 12px 12px;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ .left-options {
|
|
|
+ gap: 6px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .option-item {
|
|
|
+ margin-right: 6px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-actions {
|
|
|
+ gap: 6px;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .action-icon {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移动端输入框内部优化
|
|
|
+ .chat-input-panel-inner {
|
|
|
+ min-height: 100px;
|
|
|
+ max-height: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移动端按钮样式优化
|
|
|
+ .chat-input-bottom-bar > div {
|
|
|
+ &:last-child {
|
|
|
+ // 确保发送按钮在最右侧且不被挤压
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移动端发送按钮和上传按钮优化
|
|
|
+ .chat-input-bottom-bar > div:last-child > div {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ // 触摸反馈
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 发送按钮特殊样式
|
|
|
+ &:last-child {
|
|
|
+ background: #4357d2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #3a4bc7;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #2f3da8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移动端输入框优化
|
|
|
+ .chat-input2 {
|
|
|
+ font-size: 16px; // 防止iOS缩放
|
|
|
+ line-height: 1.4;
|
|
|
+ padding: 12px 16px;
|
|
|
+ }
|
|
|
}
|
