前端VUE聊天框样式
简单记录一下项目中聊天框样式,方便以后直接复用,仅供参考~~~~先看一下我要实现的样式吧<!-- recordContent 聊天记录数组--><div v-for="(itemc, indexc) in recordContent" :key="indexc"><!-- 对方 --><div class="word" v-if="itemc.id ==
·
简单记录一下项目中聊天框样式,方便以后直接复用,仅供参考~~~~
先看一下我要实现的样式吧
下面这个是效果图
上面这个是效果图
<!-- recordContent 聊天记录数组-->
<div v-for="(itemc, indexc) in recordContent" :key="indexc">
<!-- 对方 -->
<div class="word" v-if="itemc.id == 2">
<!-- <img :src="itemc.headUrl" /> -->
<div class="info">
<!-- <p class="time">
{{ itemc.nickName }}
</p> -->
<div class="info-content">{{ itemc.contactText }}</div>
<div class="message_time">
{{ itemc.time }}
</div>
</div>
</div>
<!-- 我的 -->
<div class="word-my" v-else>
<div class="info">
<div class="info-content">{{ itemc.contactText }}</div>
<div class="Sender_time">
{{ itemc.Sender }}
</div>
</div>
<!-- <img :src="itemc.headUrl" /> -->
</div>
</div>
css样式
.chat-content {
margin-top: 10px;
width: 100%;
padding: 20px;
// background: darkorange;
height: 350px;
overflow: auto;
.word {
display: flex;
margin-bottom: 60px;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.info {
width: 47%;
margin-left: 10px;
.message_time {
font-size: 12px;
color: rgba(51, 51, 51, 0.8);
margin: 0;
height: 20px;
line-height: 20px;
margin-top: -5px;
margin-top: 5px;
}
.info-content {
word-break: break-all;
// max-width: 45%;
display: inline-block;
padding: 10px;
font-size: 14px;
background: #fff;
position: relative;
margin-top: 8px;
background: #dbdbdb;
border-radius: 4px;
}
//小三角形
.info-content::before {
position: absolute;
left: -8px;
top: 8px;
content: "";
border-right: 10px solid #dbdbdb;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
}
}
.word-my {
display: flex;
justify-content: flex-end;
margin-bottom: 60px;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.info {
width: 90%;
// margin-left: 10px;
text-align: right;
// position: relative;
display: flex;
align-items: flex-end;
flex-wrap: wrap;
flex-direction: column;
.info-content {
word-break: break-all;
max-width: 45%;
padding: 10px;
font-size: 14px;
// float: right;
margin-right: 10px;
position: relative;
margin-top: 8px;
background: #a3c3f6;
text-align: left;
border-radius: 4px;
}
.Sender_time {
padding-right: 12px;
padding-top: 5px;
font-size: 12px;
color: rgba(51, 51, 51, 0.8);
margin: 0;
height: 20px;
}
//小三角形
.info-content::after {
position: absolute;
right: -8px;
top: 8px;
content: "";
border-left: 10px solid #a3c3f6;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
}
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)