效果图
HTML:
<template>
<view class="chat">
<view class="chat_room">
<scroll-view scroll-y="true" class="chat_scroll">
<div class="lang_for">
<!-- 消息通知 -->
<div class="chat_message">
<div class="c_time">2021-12-28 16:50:00</div>
<div class="c_txt">XXX处理了这条工单</div>
</div>
<!-- 左边 -->
<!-- <div class="chat_left"></div> -->
<!-- 右边 -->
<!-- <div class="chat_right"></div> -->
</div>
<div class="lang_for">
<div class="chat_con chat_left">
<image src="../../static/logo.png">
<div class="message">
<div class="m_time">2021-12-28 16:50:00</div>
<div class="m_con">这是一条留言，一条好长的留言。这是一条留言，一条好长的留言。这是一条留言，一条好长的留言。这是一条留言，一条好长的留言。</div>
</div>
</div>
</div>
<div class="lang_for">
<div class="chat_con chat_right">
<image src="../../static/logo.png">
<div class="message">
<div class="m_time">2021-12-28 16:50:00</div>
<div class="m_con">这是一条留言，一条好长的留言。可以用if来判断图片文件并且展示</div>
</div>
</div>
</div>
</scroll-view>
</view>
<view class="chat_send">
<input type="text">
<button>发送</button>
</view>
</view>
</template>
style:
<style lang="scss" scoped>
.chat{
.chat_room{
border-top: 1px solid #CCCCCC;
padding: 0 32rpx 10rpx;
.chat_scroll{
height:calc(100vh - 352rpx - var(--window-bottom)); //自己看着来减少
}
.lang_for{
.chat_message{
width:100%;
text-align: center;
font-size: 24rpx;
font-weight: 500;
color: #aaa;
padding: 32rpx;
box-sizing: border-box;
}
.chat_con{
display: flex;
image{
width:96rpx;
height:96rpx;
border: 1px solid #707070;
box-sizing: border-box;
border-radius: 50%;
}
.message{
margin-left:16rpx;
.m_time{
font-size: 24rpx;
color: #333333;
line-height:44rpx;
}
.m_con{
max-width: 540rpx;
min-height: 80rpx;
line-height:40rpx;
background: #FFFFFF;
border-radius: 0px 8rpx 8rpx 8rpx;
font-size:28rpx;
color: #111111;
padding:20rpx;
box-sizing: border-box;
}
}
}
.chat_left{
}
.chat_right{
flex-direction: row-reverse;
.message{
margin-right:16rpx;
.m_time{
text-align: right;
}
.m_con{
background: #9EEA6A ;
border-radius: 8rpx 0px 8rpx 8rpx;
}
}
}
}
.lang_for+.lang_for{
margin-top:10px;
}
}
.chat_send{
display: flex;
padding:48rpx 32rpx;
background:#fff;
input{
width: 520rpx;
height: 60rpx;
background: #F5F5F5;
border-radius: 8rpx;
padding:0 16rpx;
}
button{
width: 104rpx;
height: 60rpx;
line-height: 60rpx;
margin-left:32rpx;
color:#FFFFFF;
font-weight: bold;
background: #D60011;
border-radius: 8rpx;
border:none;
font-size:24rpx;
padding:0;
}
}
}
</style>
