<!-- 錄音對話 -->
<div class="dialogue">
<!-- 客戶 -->
<div class="client">
<!-- 頭像缚忧、姓名 -->
<div><img :src="client" class="leftDetailsImg2" /> <span>客戶</span></div>
<div style="width:65%;">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</div>
<!-- 置業(yè)顧問 -->
<div class="counselor">
<!-- 頭像崭别、姓名 -->
<div><span>張三</span><img :src="counselor" class="leftDetailsImg2" /></div>
<div style="width:65%;">
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
</div>
</div>
</div>
// 對話樣式
.dialogue {
padding-left: 10px;
font-size: 12px;
border: 1px solid red;
//第一步
display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
}
.leftDetailsImg2{
width: 20px;
height: 20px;
vertical-align: middle;
}
// 置業(yè)顧問(自己)對話容器
.counselor{
//第二步
display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;
}
// 客戶(他人)對話容器
.client{
//第三步
display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.leftDetailsImg2{
width: 20px;
height: 20px;
vertical-align: middle;
}
效果圖
Snipaste_2022-02-14_14-53-42.png
