本期内容
详细讲述布局划分，flex布局，相对绝对布局，过渡效果，组件定义等，一步步实现下面的结果图。左侧蓝色区域是会话列表，右侧是消息记录。蓝色区域内的一个个小卡片是聊天会话组件，在组件内定义了相关的交互，删除，点击，鼠标悬浮。
点击左侧的会话，右侧的内容也会随之发生改变。
(资料图片仅供参考)
鼠标放在会话上会弹出删除按钮，点击可以发起删除请求同时发送事件从会话列表中剔除该会话。
点击新的聊天可以新增会话。
点击右上角的修改按钮可以修改会话名称。
代码实现
1. 搭建聊天面板骨架
2. 聊天会话小卡片
聊天会话可以封装成组件，分散首页的代码逻辑。
3. 侧边会话列表展示和会话创建
点击会话列表中的会话小卡片会切换当前激活的会话。鼠标放在会话小卡片上会弹出删除按钮。点击新的聊天按钮之后会话列表会新增会话小卡片。
4. 会话编辑
未编辑状态，点击右侧按钮开始编辑。
编辑状态，可以点击右侧按钮取消编辑。按回车也可以键确认编辑。
关键词：
