网站客服系统_在线客服系统源码_vue.js项目开发（三）实现对话聊天界面

.chatAppBody{显示：flex;弹性方向：列；高度：100vh；背景色：#f1f5f8；}.chatTitle{背景：#fff;}.chatBox{flex:1;填充：05px；}.chatBottom{背景：#fff;}.chatRow{显示：弹性；对齐项目：flex-end；边距：5px0px；}.chatAvatar{margin-right:5px;伸缩收缩：0；}.chatUsername{字体大小：12px；空白：nowrap；颜色：#999；保证金底部：2px;}.chatContent{border-radius:10px10px10px0px;填充：10px；背景色：rgb(255,255,255)；框阴影：05px30pxrgb(505093/8%),01px3px000/5%);字体大小：14px；分词：break-all；行高：21px；}.chatRowMe{证明内容：弹性结束；}.chatRowMe.chatContent{边框半径：10px10px0px10px;}继续上面两篇文章，我来实现下一个对话聊天界面，效果如下：所有代码：.chatAppBody{显示：flex;弹性方向：列；高度：100vh；背景色：#f1f5f8；}.chatTitle{背景：#fff;}.chatBox{flex:1;填充：05px；}.chatBottom{背景：#fff;}.chatRow{显示：弹性；对齐项目：flex-end；边距：5px0px；}.chatAvatar{margin-right:5px;伸缩收缩：0；}.chatUsername{字体大小：12px；空白：nowrap；颜色：#999；保证金底部：2px;}.chatContent{border-radius:10px10px10px0px;填充：10px；背景色：rgb(255,255,255)；框阴影：05px30pxrgb(505093/8%),01px3px000/5%);字体大小：14px；分词：break-all；行高：21px；}.chatRowMe{证明内容：弹性结束；}.chatRowMe.chatContent{边框半径：10px10px0px10px;}使用VueRouter、ElementUi、axios等依赖代码导入Login、ChatPage、ChatApp、Main、OnlineVisitor等多个组件。它使用VueRouter设置不同的路由，并将App组件挂载在HTML页面的#app元素上。在路由设置中，它定义了多个路由，每个组件一个。例如，当访问/login时，会显示Login组件。它还设置了一个子路由，在/main路由下有一个onlineVisitor路由，对应的组件就是OnlineVisitor。还设置了全局变量ApiHost和$axios。使用Vue.prototype.ApiHost将ApiHost设置为全局变量，并赋值给'https://gofly.v1kf.com'，这样所有Vue组件都可以访问这个变量。Vue.prototype.$axios也是如此，所以你可以在所有组件中使用$axios来访问axios模块。以这种方式设置全局变量有助于在应用程序中重用常量和变量。唯一在线客服系统https://gofly.v1kf.com