网站客服系统_在线客服系统源码_vue.js项目开发（五）flex布局实现输入框区域
时间：2023-03-28 16:04:20
HTML
??由Wolf提供支持 样式内容为.chatArea{margin:0px10px;底部边距：10px；显示：弹性；填充：6px5px；对齐项目：居中；弹性：1；框阴影：05px30pxrgb(505093/8%),01px3pxrgb(000/5%);边界半径：10px；背景：#fff；}.chatArea.iconfont{颜色：#383838；字体大小：18px；边距：0px5px；游标：指针；}.chatArea.iconfont:hover{颜色：#409eff;}.chatAreaInput{边框半径：10px；;大纲：无；调整大小：无；框大小：边框框；颜色：#505050；最小高度：35px；字体大小：16px；}.chatCopyright{颜色：#999a9b；字体大小：12px；-居中对齐;底部边距：10px；过滤器：灰度（1）；不透明度：.9；字体系列：Inter、-apple-system、system-ui、BlinkMacSystemFont、SegoeUI、Roboto、HelveticaNeue、Tahoma、Arial、sans-serif；}这段代码中的布局主要采用了flex布局。chatArea类使用display:flex;属性沿水平方向排列其子元素。它的子元素包括一个文本字段、一个加号图标和一个发送按钮图标。文本字段使用flex:1;属性使其占据父元素的所有剩余空间，从而使文本字段填充整个父元素，而加号和发送按钮图标只占用自己的空间。整个聊天区的父元素是.chatBottom，.chatCopyright是.chatBottom的兄弟元素，所以不受flex布局的影响。总的来说，这段代码使用了flex布局，允许文本字段占据整个聊天区域，而加号和发送按钮图标则放置在文本字段的两侧。唯一在线客服系统https://gofly.v1kf.com
