js实现对话展示

Posted on | In

js实现一套对话内容的展示，构想是分两个speaker来进行展示。

一、背景

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

二、预览

三、实现

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!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>
------ 本文结束 感谢阅读 ------
0%