一、背景

针对客服的电话语音内容，进行了转换文字的操作，输出是对话类型的语音文字，然后页面需要进行呈现，效果类似微信的聊天框。

二、预览

三、实现

其实没啥技术含量，对话框的布局使用了 flex，UI 设计的配色看着挺舒服的。
直接贴代码了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    </title>
    <style>
        .jetSendL {
            position: relative;
            margin-bottom: 10px;
            min-height:35px;
            display: flex;
            justify-content:flex-start;
        }

        .jetSendR {
            position: relative;
            margin-bottom: 10px;
            min-height:35px;
            display: flex;
            justify-content:flex-end;
        }

        .jetSendL .jetArrow {
            position:absolute;
            top:8px;
            left:-16px;
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:#f2f2f2 #FFFFFF #f2f2f2 #f2f2f2;
        }
        .jetSendR .jetArrow {
            position:absolute;
            top:8px;
            right:-16px;
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:#f2f2f2 #f2f2f2 #f2f2f2 #91cef5;
        }

        .jetSendL .jetText {
            max-width: 90%;
            background-color: #FFFFFF;
            border-radius: 5px;
            padding: 5px;
            display: block;
            word-wrap:break-word;
        }

        .jetSendR .jetText {
            max-width: 90%;
            background-color: #91cef5;
            border-radius: 5px;
            padding: 5px;
            display: block;
            word-wrap:break-word;
        }

    </style>

</head>
<body>
    
    <div style="background-color: #f2f2f2; width: 500px">
        <div style="margin: 0 10px 0 10px" class="dialogDiv">
            <div class="jetSendL">
                <div class="jetArrow"></div>
                <span class="jetText">喂</span>
            </div>
            <div class="jetSendR">
                <div class="jetArrow"></div>
                <span class="jetText">嗯你好，请问是陈先生吗？</span>
            </div>
            <div class="jetSendL">
                <div class="jetArrow"></div>
                <span class="jetText">恩，是的</span>
            </div>
            <div class="jetSendR">
                <div class="jetArrow"></div>
                <span class="jetText">请问你博客地址是不是http://www.jetchen.cn</span>
            </div>
            <div class="jetSendR">
                <div class="jetArrow"></div>
                <span class="jetText">昵称是不是GoldenJet</span>
            </div>
            <div class="jetSendL">
                <div class="jetArrow"></div>
                <span class="jetText">恩，是的</span>
            </div>
        </div>
    </div>

</body>
</html>