AI聊天-界面自定义布局 第1集

chat聊天-界面自定义布局 第1集

一、前言

通过作为一个java开发人员，进阶高级开发的过程中，兼容前端开发是不可获取的能力要素，本编给大家分享的内容是一chat聊天界面作为案例，如何画出属于自己的容器布局。

获取源码学习地址: 从零开始搭建一个chat聊天界面

二、思路

1、采用vue作为框架

2、采用弹性布局，左侧为聊天面板，右侧为聊天宽

3、设计聊天信息框及面板大小

三、效果截图

四、代码实现

1、vue 标签核心代码

  <div class="container">
    <div class="aside">
      <div class="logo">logo区域</div>
      <div>聊天选择区域</div>
    </div>
    <div class="main-right">
      <div class="header">标题区域</div>
      <div class="main">主要内容区域</div>
      <div class="send">发送消息区域</div>
    </div>
  </div>

2、css核心样式代码

.container{
  text-align: center;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.aside{
  width: 13vw;
  height: calc(100vh);
  background: #f1f0f0;
}
.logo{
  width: 13vw;
  height: 12vh;
}
.main-right{
  width: 87vw;
  height: calc(100vh);
  background: antiquewhite;
}
.header{
  width: 100%;
  height:7vh;
  background: white;
}

.send{
  width: 100%;
  height: 16vh;
  background: white;
}
.main{
  width: 100%;
  height: calc(100vh - 24vh);
  overflow-y: auto;
}

五、总结注解事项

1、在布局左右侧布局的过程中，注意使用 flex布局，justify-content: flex-start;

2、设置左侧面板的高度为   height: calc(100vh);这样控制了高度，保证右侧会话界面在聊天的过程中整体界面不重叠

3、注意设置聊天内容为   overflow-y: auto;   height: calc(100vh - 24vh);

六、源码开源

本编为大家介绍的如何进行容器布局，下一集将对聊天的内容进行左右自动布局划分，请帮忙关注并点赞哦，大佬如果觉得有更好的方法请帮忙在评论区留言哦，最后再次分享源码

获取源码学习地址: 从零开始搭建一个chat聊天界面