js实现对话展示

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%