简单记录一下项目中聊天框样式，方便以后直接复用，仅供参考~~~~

先看一下我要实现的样式吧
下面这个是效果图

上面这个是效果图

 <!-- 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;}}}}