聊天详情页面样式

This commit is contained in:
2022-02-18 10:16:13 +08:00
parent 08971f256d
commit 6c0feb9cb6
2 changed files with 27 additions and 37 deletions

View File

@@ -1,9 +1,8 @@
<template>
<view class="group--chat">
<list class="body" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-system" v-if="item.senderUserId === '__system__'"> <text
class="text">{{ item.content.message }}</text> </view>
<scroll-view class="body" :show-scrollbar="false">
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
<view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
:src="contact(item.senderUserId).portraitUrl" />
@@ -16,9 +15,9 @@
:msg="item.content" :name="contact(item.senderUserId).name" />
</view>
</view>
</cell>
<cell class="cell-footer" ref="chatBottom" />
</list>
</view>
<view class="cell-footer" ref="chatBottom"></view>
</scroll-view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view>
</template>
@@ -168,26 +167,24 @@
<style lang="scss" scoped>
.group--chat {
background: $window-color;
height: 100vh;
display: flex;
height: 100vh;
display: flex;
flex-direction: column;
.body {
.body {
overflow: scroll;
flex: 1;
.cell {
padding: 10rpx 30rpx;
.cell-system {
align-items: center;
.text {
font-size: 24rpx;
color: $text-gray-m;
}
text-align: center;
}
.cell-item {
display: flex;
flex-direction: row;
width: 690rpx;
justify-content: flex-start;
align-items: flex-start;