![](https://img2020.cnblogs.com/blog/1711031/202010/1711031-20201028101608581-1729468549.png)
<ul class="chat_ul"> <template v-for="(item, index) in chat_logArr"> <li class="textLeft" :key="index" v-if="item.create_time"> <div class="textLeft_box"> <div style="width: 35px; height: 35px; margin-right: 15px"> <img style="width: 35px; height: 35px" src="https://placeimg.com/640/480/any" alt="" /> </div> <div> <p>{{ item.content }}</p> <p>{{ item.chat_time }}</p> </div> </div> </li> <li class="textRight" :key="index" v-if="item.replay_time"> <div class="textRight_box clearfix"> <div style="margin-right: 15px; display: flex; margin-right: auto; float: right"> <div style="margin-right: 15px"> <p>{{ item.content }}</p> <p>{{ item.chat_time }}</p> </div> <div> <img style="width: 35px; height: 35px" src="https://placeimg.com/640/480/any" alt="" /> </div> </div> </div> </li> </template> </ul>
<style scoped> .chat_ul { height: 300px; overflow: auto; } .setBox { display: flex; margin-bottom: 10px; } .setBox_d { width: 60px; text-align: right; margin-right: 25px; } body { font-size: 14px; } .triangle { margin: 100px auto; width: 300px; background-color: #ebebe9; } .triangle ul { padding: 10px; } .triangle li { padding: 5px; margin-bottom: 10px; } .triangle li span { position: relative; border-radius: 7px; background-color: #a6e860; padding: 6px 10px 8px 10px; z-index: 1; } .triangle .textLeft span { background-color: white; } .triangle li.textLeft:before { content: url('https://placeimg.com/640/480/any'); box-sizing: border-box; position: relative; left: -10px; top: 9px; } .triangle li.textLeft span:before { content: ''; display: block; width: 0; height: 0; border: 8px solid transparent; border-right: 8px solid white; position: absolute; top: 8px; left: -16px; } .triangle li.textRight:after { content: url('https://placeimg.com/640/480/any'); box-sizing: border-box; position: relative; right: -10px; top: 9px; } .triangle li.textRight span:after { content: ''; display: block; width: 0; height: 0; border: 8px solid transparent; border-left: 8px solid #a6e860; position: absolute; top: 8px; right: -16px; } li { list-style: none; } .textRight { text-align: right; width: 100% !important; } .textLeft_box { display: flex; } /* .textRight_box { display: flex; } */ </style>