Browse Source

美化聊天输入区域并调整输入框与发送按钮比例为5:1

pull/1/head
徐飞洋 2 months ago
parent
commit
f61ea0e270
  1. 6
      pages/chat-detail/index.wxml
  2. 12
      pages/chat-detail/index.wxss

6
pages/chat-detail/index.wxml

@ -1,14 +1,8 @@
<view class="chat-page-container"> <view class="chat-page-container">
<view class="chat-header"> <view class="chat-header">
<view class="header-back" bindtap="onBack">
<text>←</text>
</view>
<view class="header-info"> <view class="header-info">
<text class="header-name">{{chatTitle}}</text> <text class="header-name">{{chatTitle}}</text>
</view> </view>
<view class="header-more">
<text>⋮</text>
</view>
</view> </view>
<scroll-view <scroll-view

12
pages/chat-detail/index.wxss

@ -202,7 +202,7 @@
} }
.message-input { .message-input {
flex: 1; flex: 5;
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 28rpx; border-radius: 28rpx;
padding: 16rpx 24rpx; padding: 16rpx 24rpx;
@ -214,17 +214,21 @@
} }
.send-button { .send-button {
flex: 1;
background-color: #FF6B81; background-color: #FF6B81;
color: #fff; color: #fff;
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
padding: 16rpx 32rpx; padding: 16rpx 24rpx;
border-radius: 28rpx; border-radius: 28rpx;
border: none; border: none;
min-width: 120rpx; max-width: 160rpx;
text-align: center; text-align: center;
line-height: normal; line-height: normal;
height: auto; height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
} }
.send-button:hover { .send-button:hover {

Loading…
Cancel
Save