Browse Source

style(im_chat_info): 优化消息列表样式

- 调整了消息列表中左右消息框的样式
- 统一了消息类型为文本时的背景颜色- 优化了代码结构,提高了可读性
master
liutong 10 months ago
parent
commit
904b1aa83a
  1. 5
      pages/common/im_chat_info.vue

5
pages/common/im_chat_info.vue

@ -15,7 +15,7 @@
<view class="time_section" v-if="v.created_at">{{v.created_at}}</view>
<view class="li" v-if="v.direction == `left`">
<view class="item left_item" :style="v.message_type == 'text' ? { backgroundColor: '#f4f6f9' } : {}">
<view class="item left_item" :style="{ backgroundColor: v.message_type === 'text' ? '#f4f6f9' : '' }">
<!--文本内容-->
<view class="text_box" v-if="v.message_type == 'text'">{{v.content}}</view>
<!-- 图片内容 -->
@ -28,7 +28,7 @@
<view class="li" v-if="v.direction == `right`">
<view class="item"></view>
<view class="item right_item" :style="v.message_type == 'text' ? { backgroundColor: '#1684fc' } : {}">
<view class="item right_item" :style="{ backgroundColor: v.message_type === 'text' ? '#1684fc' : '' }">
<view class="text_box" v-if="v.message_type == 'text'">{{v.content}}</view>
<!-- 图片内容 -->
<view class="img_box" v-if="v.message_type == 'img'" @click="previewImage(v.content)">
@ -40,6 +40,7 @@
</view>
</scroll-view>
</view>
<view class="input_section">
<view class="left_box">
<input class="input" v-model="formData.content" type="text" placeholder="请输入">

Loading…
Cancel
Save