20240612每日前端-------vue3实现聊天室（一）_前端 vue 聊天室样式

先上效果图

讲讲布局设计

聊天室大致分三块：

• 左边导航
• 右边聊天界面主界面
  
  单独调整一下样式：
• 外层friend-box先调整布局为flex，这样方便进行自适应布局，增加背景色为白色，设置边框圆角使得外观更加美观，使用绝对定位，并且设置top,left，transform: translateX(-50%) translateY(-50%);保证水平垂直居中。
• 内层左边friend-aside设置固定宽度60px,增加右边框属性，区分左右聊天界面，设置布局为flex自适应，设置自适应flex-direction: column;从上到下，自适应排序。设置justify-content: space-between;设置元素等距。
• 内层右边friend-bode设置flex填充右边剩余界面。

  .friend-box {
    display: flex;
    background-color: var(--white);
    border-radius: 10px;
    position: absolute;
    width: 100%;
    height: 80vh;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden;
  }

  .friend-aside {
    width: 60px;
    border-right: 1px solid var(--maxLightGray);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .friend-bode {
    flex: 1;
    display: flex;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25