细节微调

subPage/chat/index.js

@@ -6,6 +6,7 @@ Page({
    */
   data: {
     eventType:'input',// 底部事件类型 input 键盘输入，voice 语音输入
+    sendText:'',// 发送的输入框内容 
     list:[
       {
         id:-1,
@@ -152,7 +153,12 @@ Page({
     let that = this;
     that.animate();
   },
-
+  handleInput(e){
+    let that = this;
+    that.setData({
+      sendText:e.detail.value
+    });
+  },
 
   animate($type='light') {
     wx.vibrateShort({

subPage/chat/index.wxml

@@ -74,7 +74,11 @@
       <!-- 中 -->
       <view class="g_flex_1 g_flex_column_center">
         <view class="input-box" wx:if="{{eventType == 'input'}}">
-          <input type="text" placeholder="请输入内容" style="width: 100%;" />
+          <input type="text" 
+                 placeholder="请输入内容" 
+                 style="width: 100%;"
+                 bindinput="handleInput" 
+           />
         </view>
         <view class="voice-box" wx:if="{{eventType == 'voice'}}">
           按住 说话
@@ -82,7 +86,7 @@
       </view>
       <!-- 右 -->
       <view class="g_flex_none g_flex_column_center right-box g_text_l">
-        <i class="iconfont icon-fasong1 icon"></i>
+        <i class="iconfont icon-fasong1 icon {{sendText ? 'icon-active' : ''}} "></i>
       </view>
     </view>
   </view>

subPage/chat/index.wxss

@@ -203,7 +203,12 @@ textarea {
 
 .chat-card{
   padding: 0 10px;
-  margin-bottom: 10px;
+}
+.chat-card:nth-child(2n+1){
+  margin-bottom: 2px;
+}
+.chat-card:nth-child(2n){
+  margin-bottom: 12px;
 }
 .chat-card:last-child{
   margin-bottom: 24px;
@@ -233,13 +238,13 @@ textarea {
   margin-right: 12px;
 }
 .icon-active{
-  color: #3578f6;
+  color: #3578f6 !important;
 }
 .g_w_all{
   width: 100%;
 }
 .min80{
-  min-width: 80vw;
+  min-width: calc(100vw - 44px);
 }
 .max80{
   max-width: 80vw;