askbot-dragon 0.6.17 → 0.6.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +27 -27
  2. package/babel.config.js +5 -5
  3. package/dragon.iml +7 -7
  4. package/package.json +54 -52
  5. package/public/index.html +27 -26
  6. package/src/App.vue +31 -31
  7. package/src/api/index.js +1 -1
  8. package/src/api/mock.http +2 -2
  9. package/src/api/requestUrl.js +185 -185
  10. package/src/assets/less/common.css +6760 -6760
  11. package/src/assets/less/converSationContainer/common.less +4751 -4751
  12. package/src/assets/less/converSationContainer/converSatonContainer.less +492 -492
  13. package/src/assets/less/ticketMessage.less +319 -319
  14. package/src/components/ActionAlertIframe.vue +117 -117
  15. package/src/components/AskIFrame.vue +15 -15
  16. package/src/components/ConversationContainer.vue +1388 -1388
  17. package/src/components/FileType.vue +88 -88
  18. package/src/components/Message.vue +27 -27
  19. package/src/components/ask-components/DissatisfactionOptions.vue +57 -57
  20. package/src/components/ask-components/Msgloading.vue +37 -37
  21. package/src/components/ask-components/SatisfactionV2.vue +15 -15
  22. package/src/components/chatContent.vue +512 -512
  23. package/src/components/feedBack.vue +133 -133
  24. package/src/components/file/AliyunOssComponents.vue +109 -109
  25. package/src/components/formTemplate.vue +1898 -2039
  26. package/src/components/message/ActionAlertIframe.vue +116 -116
  27. package/src/components/message/ShopMessage.vue +168 -168
  28. package/src/components/message/TextMessage.vue +895 -895
  29. package/src/components/message/TicketMessage.vue +173 -173
  30. package/src/components/message/swiper/index.js +4 -4
  31. package/src/components/message/swiper/ticketSwiper.vue +530 -530
  32. package/src/components/message/swiper/ticketSwiperItem.vue +61 -61
  33. package/src/components/selector/hOption.vue +20 -20
  34. package/src/components/selector/hSelector.vue +199 -199
  35. package/src/components/selector/hWrapper.vue +216 -216
  36. package/src/components/source/BotMessage.vue +24 -24
  37. package/src/components/source/CustomMessage.vue +24 -24
  38. package/src/components/test.vue +260 -260
  39. package/src/components/utils/AliyunIssUtil.js +72 -72
  40. package/src/components/utils/ckeditor.js +124 -0
  41. package/src/components/utils/format_date.js +18 -18
  42. package/src/components/utils/index.js +6 -6
  43. package/src/components/utils/math_utils.js +15 -15
  44. package/src/main.js +44 -43
  45. package/vue.config.js +34 -28
package/src/assets/less/converSationContainer/converSatonContainer.less CHANGED
@@ -1,493 +1,493 @@
1
- @import "../converSationContainer/common";
2
- .video-player{
3
- width: 260px!important;
4
- }
5
- // .video-js .vjs-big-play-button{
6
- // top: 50px!important;
7
- // left: 90px!important;
8
- // }
9
- .el-cascader-node__label{
10
- padding: 0;
11
- }
12
- .el-cascader-node__postfix{
13
- right: 5px;
14
- }
15
- .el-cascader-node{
16
- height: 24px;
17
- line-height: 24px;
18
- padding: 0 20px 0 5px;
19
- }
20
- .el-radio{
21
- width: 100%;
22
- margin: 5px 0px;
23
- }
24
- .conversation-container{
25
- width: 400px;
26
- z-index: 999;
27
- .conversation-container-d {
28
- //background-color: rgba(0, 0, 0, 0) !important;
29
- // height: 0 !important;
30
- height: 100vh;
31
- }
32
- .test-box {
33
- height: 100vh;
34
- background-color:#323232;
35
- display: flex;
36
- flex-direction: column;
37
- justify-content: flex-start;
38
- .gr-header{
39
- padding: 16px;
40
- height: 16px;
41
- flex: none;
42
- border-bottom: solid 2px #424247;
43
- display: flex;
44
- justify-content: flex-start;
45
- font-size: 16px;
46
- .bot-name{
47
- flex: auto;
48
- text-align: left;
49
- color: #ffffff;
50
- i{
51
- margin-left: 10px;
52
- cursor: pointer;
53
- font-weight: bolder;
54
- }
55
- }
56
- .el-icon-refresh{
57
- flex: none;
58
- width: 24px;
59
- /*color: @system_fontcolor_red;*/
60
- color: #409EFF;
61
- font-weight: bolder;
62
- cursor: pointer;
63
- }
64
- .el-icon-close{
65
- flex: none;
66
- width: 24px;
67
- color: #409EFF;
68
- font-weight: bolder;
69
- cursor: pointer;
70
- }
71
- }
72
- .mod-loading{
73
- flex: none;
74
- padding: 5px;
75
- background: #fff;
76
- font-size: 14px;
77
- color: #5857579c;
78
- em {
79
- font-size: 16px;
80
- position: relative;
81
- top: 1px;
82
- font-weight: bolder;
83
- margin-left: 5px;
84
- }
85
- }
86
- .fade-enter-active, .fade-leave-active {
87
- transition: opacity .5s
88
- }
89
- .fade-enter, .fade-leave-active {
90
- opacity: 0
91
- }
92
- .gr-content {
93
- flex: auto;
94
- overflow: auto;
95
- padding: 8px;
96
- ul{
97
- padding: 8px 0;
98
- .via-bot-outer{
99
- display: flex;
100
- justify-content: flex-start;
101
- .chat-content{
102
- border-radius: 0 8px 8px 8px;
103
- a {
104
- color: royalblue !important;
105
- }
106
- a:link{
107
- text-decoration: underline !important;
108
- }
109
- table{
110
- color: red !important;
111
- border: solid 1px red !important;
112
- }
113
- }
114
- }
115
- .via-user-outer{
116
- display: flex;
117
- justify-content: flex-end;
118
- .chat-content{
119
- border-radius:8px 0 8px 8px;
120
- background-color: @system_fontcolor_red;
121
- color: white;
122
- }
123
- }
124
- li{
125
- margin: 8px;
126
- .via{
127
- flex: none;
128
- height: 30px;
129
- width: 30px;
130
- border-radius: 0 15px 15px 15px;
131
- font-size: 28px;
132
-
133
- }
134
- .via-bot {
135
- border: solid 1px @system_fontcolor_sub;
136
- margin-right: 8px;
137
- em {
138
- color: @system_fontcolor_sub;
139
- }
140
-
141
- }
142
- .via-user {
143
- border: solid 1px @system_fontcolor_red;
144
- margin-left: 8px;
145
- em {
146
- color:@system_fontcolor_red;
147
- }
148
- }
149
- .chat-content{
150
- background-color: white;
151
- line-height: 26px;
152
- padding: 8px;
153
- max-width: 300px;
154
- font-size: 14px;
155
- text-align: left;
156
- word-wrap: break-word;
157
-
158
-
159
- .link-list-outer{
160
- font-size: 14px;
161
- .link-cell{
162
- line-height: 16px;
163
- display: block;
164
- color: @system_fontcolor_red;
165
- }
166
- }
167
- }
168
- }
169
- }
170
- }
171
- .gr-footer{
172
- height: 32px;
173
- padding: 8px;
174
- flex: none;
175
- .el-input{
176
- .el-button{
177
- color: white;
178
- background-color: @system_fontcolor_red;
179
- }
180
- }
181
- }
182
- }
183
-
184
- }
185
- .dialog{
186
- width: 51%;
187
- margin: 0 auto;
188
- background-color: #ffffff;
189
- .list-paddingleft-2 {
190
- padding-left: 16px !important;
191
- color: hotpink;
192
- }
193
-
194
- ul,
195
- ol,
196
- li {
197
- list-style-type: none;
198
- }
199
-
200
- ul, ul li {
201
- list-style-type: disc !important;
202
- }
203
-
204
- ol, ol li{
205
- list-style-type: decimal !important;
206
- }
207
-
208
- table,table tr th, table tr td {
209
- border:1px solid #DDD !important;
210
- }
211
- table {
212
- width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse !important;
213
- }
214
- .headerName{
215
- padding: 20px;
216
- text-align: center;
217
- }
218
- .dialogContent{
219
- background-color: rgb(245, 245, 245);
220
- height: calc(100vh - 170px);
221
- display: flex;
222
- flex-direction: column;
223
- padding: 10px;
224
- overflow-x: hidden;
225
- overflow-y: auto;
226
- .message-notice{
227
- display: inline-block;
228
- text-align: center;
229
- margin-bottom: 20px;
230
- width: 100%;
231
- background-color: transparent !important;
232
- }
233
- .notice-content{
234
- display: inline-block;
235
- padding: 5px 10px;
236
- border-radius: 5px;
237
- background-color: #e8eaec;
238
- color: #666666;
239
- font-size: 12px;
240
- }
241
- .notice-content-day{
242
- display: inline-block;
243
- padding: 5px 10px;
244
- .line-left{
245
- display:inline-block;
246
- width:100px;
247
- height:1px;
248
- margin-bottom: 5px;
249
- margin-right: 5px;
250
- //background:#dcdcdc;
251
- background: -webkit-linear-gradient(left, #fff -4%,#666666 50%);
252
-
253
- }
254
- .line-text{
255
- color: #666666;
256
- font-size: 12px;
257
- }
258
- .line-right{
259
- display:inline-block;
260
- width:100px;
261
- height:1px;
262
- margin-bottom: 5px;
263
- margin-left: 5px;
264
- //background:#dcdcdc;
265
- background: -webkit-linear-gradient(left,#666666 50%,#fff 100%);
266
- }
267
- }
268
- //messages
269
- .message{
270
- display: flex;
271
- margin-bottom: 20px;
272
- justify-content:flex-start;
273
- .user-detail{
274
- display: flex;
275
- align-items: flex-start;
276
- .media-body{
277
- //max-width: calc(100vw - 800px);
278
- background-color: white;
279
- // border: 1px solid #e4e3e3;
280
- word-break: break-word;
281
- flex: 1;
282
- min-height: 25px;
283
- line-height: 25px;
284
- border-radius: 15px;
285
- border-top-left-radius: 0px;
286
- padding: 10px 10px 0 15px;
287
- text-align: left;
288
-
289
- h2{
290
- font-size: 18px;
291
- }
292
- p{
293
- margin-bottom: 5px;
294
- font-size: 14px;
295
- word-wrap:break-word;
296
- word-break:break-all;
297
- overflow: hidden;
298
- }
299
- .voicemessage{
300
- width: 200px;
301
- height: 35px;
302
- line-height: 35px;
303
- background-color: #e8eaec;
304
- border-radius: 10px;
305
- .icon-vioce{
306
- font-size: 24px;
307
- float: left;
308
- margin-left: 20px;
309
- margin-right: 20px;
310
- }
311
- .time{
312
- font-size: 14px;
313
- margin-left: 20px;
314
- }
315
- }
316
- span{
317
- margin-bottom: 5px;
318
- font-size: 12px;
319
- color: #a3a4a5;
320
- float: left;
321
- }
322
- .botname{
323
- margin-left: 10px;
324
- float: right;
325
- }
326
- .mb-0{
327
- margin-bottom: 0 !important;
328
- text-align: left;
329
- line-height: 1.3;
330
- margin-top: 0;
331
- font-size: 12px;
332
- }
333
- }
334
- .media-body-ps{
335
- //max-width: calc(100vw - 800px);
336
- background-color: #f8f8f8;
337
- border: 1px solid #e4e3e3;
338
- word-break: break-word;
339
- flex: 1;
340
- min-height: 25px;
341
- line-height: 25px;
342
- border-radius: 25px;
343
- border-top-left-radius: 0px;
344
- text-align: left;
345
- h2{
346
- font-size: 18px;
347
- }
348
- .other{
349
- margin-bottom: 5px;
350
- font-size: 14px;
351
- word-wrap:break-word;
352
- word-break:break-all;
353
- overflow: hidden;
354
- padding: 10px 10px 0 15px;
355
- }
356
- .ps{
357
- padding: 5px 10px 5px 15px;
358
- height: 25px;
359
- line-height: 25px;
360
- border-top: 1px solid #e4e3e3;
361
- background-color: #ffffff;
362
- color: #409eff;
363
- cursor:pointer;
364
- }
365
- .end{
366
- border-bottom-left-radius: 25px !important;
367
- border-bottom-right-radius: 25px !important;
368
- }
369
- .voicemessage{
370
- width: 200px;
371
- height: 35px;
372
- line-height: 35px;
373
- background-color: #e8eaec;
374
- border-radius: 10px;
375
- .icon-vioce{
376
- font-size: 24px;
377
- float: left;
378
- margin-left: 20px;
379
- margin-right: 20px;
380
- }
381
- .time{
382
- font-size: 14px;
383
- margin-left: 20px;
384
- }
385
- }
386
- span{
387
- margin-bottom: 5px;
388
- font-size: 12px;
389
- color: #a3a4a5;
390
- float: left;
391
- }
392
- .botname{
393
- margin-left: 10px;
394
- float: right;
395
- }
396
- .mb-0{
397
- margin-bottom: 0 !important;
398
- text-align: left;
399
- line-height: 1.3;
400
- margin-top: 0;
401
- font-size: 12px;
402
- }
403
- }
404
- }
405
- .video-player ,.video-js .vjs-icon-placeholder {
406
- width: 300px;
407
- height: 172px;
408
- display: block;
409
- }
410
- .el-image{
411
- float:right;
412
- width: 300px !important;
413
- height: auto !important;
414
- }
415
- }
416
- .message-kf{
417
- display: flex;
418
- margin-bottom: 20px;
419
- justify-content:flex-end;
420
- .user-detail{
421
- display: flex;
422
- align-items: flex-start;
423
- .media-body{
424
- //max-width: calc(100vw - 800px);
425
- border: 1px solid #c1e5ff !important;
426
- background-color: #c1e5ff !important;
427
- word-break: break-word;
428
- flex: 1;
429
- min-height: 25px;
430
- line-height: 25px;
431
- border-radius: 15px;
432
- border-top-right-radius: 0px;
433
- padding: 10px 10px 0 10px;
434
- text-align: left;
435
- h2{
436
- font-size: 18px;
437
- }
438
- p{
439
- margin-bottom: 5px;
440
- font-size: 14px;
441
- word-wrap:break-word;
442
- word-break:break-all;
443
- overflow: hidden;
444
- }
445
- .voicemessage{
446
- width: 200px;
447
- height: 35px;
448
- line-height: 35px;
449
- background-color: #e8eaec;
450
- border-radius: 10px;
451
- .icon-vioce{
452
- font-size: 24px;
453
- float: left;
454
- margin-left: 20px;
455
- margin-right: 20px;
456
- }
457
- .time{
458
- font-size: 14px;
459
- margin-left: 20px;
460
- }
461
- }
462
- span{
463
- margin-bottom: 5px;
464
- font-size: 12px;
465
- color: #a3a4a5;
466
- float: right;
467
- }
468
- .botname{
469
- margin-left: 10px;
470
- float: right;
471
- }
472
- .mb-0{
473
- margin-bottom: 0 !important;
474
- text-align: left;
475
- line-height: 1.3;
476
- margin-top: 0;
477
- font-size: 12px;
478
- }
479
- }
480
- }
481
- .video-player ,.video-js .vjs-icon-placeholder {
482
- width: 300px;
483
- height: 172px;
484
- display: block;
485
- }
486
- .el-image{
487
- float:right;
488
- width: 300px !important;
489
- height: auto !important;
490
- }
491
- }
492
- }
1
+ @import "../converSationContainer/common";
2
+ .video-player{
3
+ width: 260px!important;
4
+ }
5
+ // .video-js .vjs-big-play-button{
6
+ // top: 50px!important;
7
+ // left: 90px!important;
8
+ // }
9
+ .el-cascader-node__label{
10
+ padding: 0;
11
+ }
12
+ .el-cascader-node__postfix{
13
+ right: 5px;
14
+ }
15
+ .el-cascader-node{
16
+ height: 24px;
17
+ line-height: 24px;
18
+ padding: 0 20px 0 5px;
19
+ }
20
+ .el-radio{
21
+ width: 100%;
22
+ margin: 5px 0px;
23
+ }
24
+ .conversation-container{
25
+ width: 400px;
26
+ z-index: 999;
27
+ .conversation-container-d {
28
+ //background-color: rgba(0, 0, 0, 0) !important;
29
+ // height: 0 !important;
30
+ height: 100vh;
31
+ }
32
+ .test-box {
33
+ height: 100vh;
34
+ background-color:#323232;
35
+ display: flex;
36
+ flex-direction: column;
37
+ justify-content: flex-start;
38
+ .gr-header{
39
+ padding: 16px;
40
+ height: 16px;
41
+ flex: none;
42
+ border-bottom: solid 2px #424247;
43
+ display: flex;
44
+ justify-content: flex-start;
45
+ font-size: 16px;
46
+ .bot-name{
47
+ flex: auto;
48
+ text-align: left;
49
+ color: #ffffff;
50
+ i{
51
+ margin-left: 10px;
52
+ cursor: pointer;
53
+ font-weight: bolder;
54
+ }
55
+ }
56
+ .el-icon-refresh{
57
+ flex: none;
58
+ width: 24px;
59
+ /*color: @system_fontcolor_red;*/
60
+ color: #409EFF;
61
+ font-weight: bolder;
62
+ cursor: pointer;
63
+ }
64
+ .el-icon-close{
65
+ flex: none;
66
+ width: 24px;
67
+ color: #409EFF;
68
+ font-weight: bolder;
69
+ cursor: pointer;
70
+ }
71
+ }
72
+ .mod-loading{
73
+ flex: none;
74
+ padding: 5px;
75
+ background: #fff;
76
+ font-size: 14px;
77
+ color: #5857579c;
78
+ em {
79
+ font-size: 16px;
80
+ position: relative;
81
+ top: 1px;
82
+ font-weight: bolder;
83
+ margin-left: 5px;
84
+ }
85
+ }
86
+ .fade-enter-active, .fade-leave-active {
87
+ transition: opacity .5s
88
+ }
89
+ .fade-enter, .fade-leave-active {
90
+ opacity: 0
91
+ }
92
+ .gr-content {
93
+ flex: auto;
94
+ overflow: auto;
95
+ padding: 8px;
96
+ ul{
97
+ padding: 8px 0;
98
+ .via-bot-outer{
99
+ display: flex;
100
+ justify-content: flex-start;
101
+ .chat-content{
102
+ border-radius: 0 8px 8px 8px;
103
+ a {
104
+ color: royalblue !important;
105
+ }
106
+ a:link{
107
+ text-decoration: underline !important;
108
+ }
109
+ table{
110
+ color: red !important;
111
+ border: solid 1px red !important;
112
+ }
113
+ }
114
+ }
115
+ .via-user-outer{
116
+ display: flex;
117
+ justify-content: flex-end;
118
+ .chat-content{
119
+ border-radius:8px 0 8px 8px;
120
+ background-color: @system_fontcolor_red;
121
+ color: white;
122
+ }
123
+ }
124
+ li{
125
+ margin: 8px;
126
+ .via{
127
+ flex: none;
128
+ height: 30px;
129
+ width: 30px;
130
+ border-radius: 0 15px 15px 15px;
131
+ font-size: 28px;
132
+
133
+ }
134
+ .via-bot {
135
+ border: solid 1px @system_fontcolor_sub;
136
+ margin-right: 8px;
137
+ em {
138
+ color: @system_fontcolor_sub;
139
+ }
140
+
141
+ }
142
+ .via-user {
143
+ border: solid 1px @system_fontcolor_red;
144
+ margin-left: 8px;
145
+ em {
146
+ color:@system_fontcolor_red;
147
+ }
148
+ }
149
+ .chat-content{
150
+ background-color: white;
151
+ line-height: 26px;
152
+ padding: 8px;
153
+ max-width: 300px;
154
+ font-size: 14px;
155
+ text-align: left;
156
+ word-wrap: break-word;
157
+
158
+
159
+ .link-list-outer{
160
+ font-size: 14px;
161
+ .link-cell{
162
+ line-height: 16px;
163
+ display: block;
164
+ color: @system_fontcolor_red;
165
+ }
166
+ }
167
+ }
168
+ }
169
+ }
170
+ }
171
+ .gr-footer{
172
+ height: 32px;
173
+ padding: 8px;
174
+ flex: none;
175
+ .el-input{
176
+ .el-button{
177
+ color: white;
178
+ background-color: @system_fontcolor_red;
179
+ }
180
+ }
181
+ }
182
+ }
183
+
184
+ }
185
+ .dialog{
186
+ width: 51%;
187
+ margin: 0 auto;
188
+ background-color: #ffffff;
189
+ .list-paddingleft-2 {
190
+ padding-left: 16px !important;
191
+ color: hotpink;
192
+ }
193
+
194
+ ul,
195
+ ol,
196
+ li {
197
+ list-style-type: none;
198
+ }
199
+
200
+ ul, ul li {
201
+ list-style-type: disc !important;
202
+ }
203
+
204
+ ol, ol li{
205
+ list-style-type: decimal !important;
206
+ }
207
+
208
+ table,table tr th, table tr td {
209
+ border:1px solid #DDD !important;
210
+ }
211
+ table {
212
+ width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse !important;
213
+ }
214
+ .headerName{
215
+ padding: 20px;
216
+ text-align: center;
217
+ }
218
+ .dialogContent{
219
+ background-color: rgb(245, 245, 245);
220
+ height: calc(100vh - 170px);
221
+ display: flex;
222
+ flex-direction: column;
223
+ padding: 10px;
224
+ overflow-x: hidden;
225
+ overflow-y: auto;
226
+ .message-notice{
227
+ display: inline-block;
228
+ text-align: center;
229
+ margin-bottom: 20px;
230
+ width: 100%;
231
+ background-color: transparent !important;
232
+ }
233
+ .notice-content{
234
+ display: inline-block;
235
+ padding: 5px 10px;
236
+ border-radius: 5px;
237
+ background-color: #e8eaec;
238
+ color: #666666;
239
+ font-size: 12px;
240
+ }
241
+ .notice-content-day{
242
+ display: inline-block;
243
+ padding: 5px 10px;
244
+ .line-left{
245
+ display:inline-block;
246
+ width:100px;
247
+ height:1px;
248
+ margin-bottom: 5px;
249
+ margin-right: 5px;
250
+ //background:#dcdcdc;
251
+ background: -webkit-linear-gradient(left, #fff -4%,#666666 50%);
252
+
253
+ }
254
+ .line-text{
255
+ color: #666666;
256
+ font-size: 12px;
257
+ }
258
+ .line-right{
259
+ display:inline-block;
260
+ width:100px;
261
+ height:1px;
262
+ margin-bottom: 5px;
263
+ margin-left: 5px;
264
+ //background:#dcdcdc;
265
+ background: -webkit-linear-gradient(left,#666666 50%,#fff 100%);
266
+ }
267
+ }
268
+ //messages
269
+ .message{
270
+ display: flex;
271
+ margin-bottom: 20px;
272
+ justify-content:flex-start;
273
+ .user-detail{
274
+ display: flex;
275
+ align-items: flex-start;
276
+ .media-body{
277
+ //max-width: calc(100vw - 800px);
278
+ background-color: white;
279
+ // border: 1px solid #e4e3e3;
280
+ word-break: break-word;
281
+ flex: 1;
282
+ min-height: 25px;
283
+ line-height: 25px;
284
+ border-radius: 15px;
285
+ border-top-left-radius: 0px;
286
+ padding: 10px 10px 0 15px;
287
+ text-align: left;
288
+
289
+ h2{
290
+ font-size: 18px;
291
+ }
292
+ p{
293
+ margin-bottom: 5px;
294
+ font-size: 14px;
295
+ word-wrap:break-word;
296
+ word-break:break-all;
297
+ overflow: hidden;
298
+ }
299
+ .voicemessage{
300
+ width: 200px;
301
+ height: 35px;
302
+ line-height: 35px;
303
+ background-color: #e8eaec;
304
+ border-radius: 10px;
305
+ .icon-vioce{
306
+ font-size: 24px;
307
+ float: left;
308
+ margin-left: 20px;
309
+ margin-right: 20px;
310
+ }
311
+ .time{
312
+ font-size: 14px;
313
+ margin-left: 20px;
314
+ }
315
+ }
316
+ span{
317
+ margin-bottom: 5px;
318
+ font-size: 12px;
319
+ color: #a3a4a5;
320
+ float: left;
321
+ }
322
+ .botname{
323
+ margin-left: 10px;
324
+ float: right;
325
+ }
326
+ .mb-0{
327
+ margin-bottom: 0 !important;
328
+ text-align: left;
329
+ line-height: 1.3;
330
+ margin-top: 0;
331
+ font-size: 12px;
332
+ }
333
+ }
334
+ .media-body-ps{
335
+ //max-width: calc(100vw - 800px);
336
+ background-color: #f8f8f8;
337
+ border: 1px solid #e4e3e3;
338
+ word-break: break-word;
339
+ flex: 1;
340
+ min-height: 25px;
341
+ line-height: 25px;
342
+ border-radius: 25px;
343
+ border-top-left-radius: 0px;
344
+ text-align: left;
345
+ h2{
346
+ font-size: 18px;
347
+ }
348
+ .other{
349
+ margin-bottom: 5px;
350
+ font-size: 14px;
351
+ word-wrap:break-word;
352
+ word-break:break-all;
353
+ overflow: hidden;
354
+ padding: 10px 10px 0 15px;
355
+ }
356
+ .ps{
357
+ padding: 5px 10px 5px 15px;
358
+ height: 25px;
359
+ line-height: 25px;
360
+ border-top: 1px solid #e4e3e3;
361
+ background-color: #ffffff;
362
+ color: #409eff;
363
+ cursor:pointer;
364
+ }
365
+ .end{
366
+ border-bottom-left-radius: 25px !important;
367
+ border-bottom-right-radius: 25px !important;
368
+ }
369
+ .voicemessage{
370
+ width: 200px;
371
+ height: 35px;
372
+ line-height: 35px;
373
+ background-color: #e8eaec;
374
+ border-radius: 10px;
375
+ .icon-vioce{
376
+ font-size: 24px;
377
+ float: left;
378
+ margin-left: 20px;
379
+ margin-right: 20px;
380
+ }
381
+ .time{
382
+ font-size: 14px;
383
+ margin-left: 20px;
384
+ }
385
+ }
386
+ span{
387
+ margin-bottom: 5px;
388
+ font-size: 12px;
389
+ color: #a3a4a5;
390
+ float: left;
391
+ }
392
+ .botname{
393
+ margin-left: 10px;
394
+ float: right;
395
+ }
396
+ .mb-0{
397
+ margin-bottom: 0 !important;
398
+ text-align: left;
399
+ line-height: 1.3;
400
+ margin-top: 0;
401
+ font-size: 12px;
402
+ }
403
+ }
404
+ }
405
+ .video-player ,.video-js .vjs-icon-placeholder {
406
+ width: 300px;
407
+ height: 172px;
408
+ display: block;
409
+ }
410
+ .el-image{
411
+ float:right;
412
+ width: 300px !important;
413
+ height: auto !important;
414
+ }
415
+ }
416
+ .message-kf{
417
+ display: flex;
418
+ margin-bottom: 20px;
419
+ justify-content:flex-end;
420
+ .user-detail{
421
+ display: flex;
422
+ align-items: flex-start;
423
+ .media-body{
424
+ //max-width: calc(100vw - 800px);
425
+ border: 1px solid #c1e5ff !important;
426
+ background-color: #c1e5ff !important;
427
+ word-break: break-word;
428
+ flex: 1;
429
+ min-height: 25px;
430
+ line-height: 25px;
431
+ border-radius: 15px;
432
+ border-top-right-radius: 0px;
433
+ padding: 10px 10px 0 10px;
434
+ text-align: left;
435
+ h2{
436
+ font-size: 18px;
437
+ }
438
+ p{
439
+ margin-bottom: 5px;
440
+ font-size: 14px;
441
+ word-wrap:break-word;
442
+ word-break:break-all;
443
+ overflow: hidden;
444
+ }
445
+ .voicemessage{
446
+ width: 200px;
447
+ height: 35px;
448
+ line-height: 35px;
449
+ background-color: #e8eaec;
450
+ border-radius: 10px;
451
+ .icon-vioce{
452
+ font-size: 24px;
453
+ float: left;
454
+ margin-left: 20px;
455
+ margin-right: 20px;
456
+ }
457
+ .time{
458
+ font-size: 14px;
459
+ margin-left: 20px;
460
+ }
461
+ }
462
+ span{
463
+ margin-bottom: 5px;
464
+ font-size: 12px;
465
+ color: #a3a4a5;
466
+ float: right;
467
+ }
468
+ .botname{
469
+ margin-left: 10px;
470
+ float: right;
471
+ }
472
+ .mb-0{
473
+ margin-bottom: 0 !important;
474
+ text-align: left;
475
+ line-height: 1.3;
476
+ margin-top: 0;
477
+ font-size: 12px;
478
+ }
479
+ }
480
+ }
481
+ .video-player ,.video-js .vjs-icon-placeholder {
482
+ width: 300px;
483
+ height: 172px;
484
+ display: block;
485
+ }
486
+ .el-image{
487
+ float:right;
488
+ width: 300px !important;
489
+ height: auto !important;
490
+ }
491
+ }
492
+ }
493
493
  }