聊天室元件 index.vue

<div class="chat">     
<div class="rooms">         
<div class="room">             
<div>                 
<el-avatar :size="60" :src="'https://picsum.photos/60'"></el-avatar>             
</div>             
<div class="text-block">                 
<span>阿君</span>                 
<div>你好嗎</div>             
</div>             
<div class="日期">星期日</div>         
</div>     
</div>     
<div class="messages">b</div> </div>

style.scss

@import "../../assets/scss/_variables"; 
.chat{   display:flex;   height: 100%; } 
.rooms{   flex-basis:260px;   background-color:red; } 
.messages{   flex-grow: 1;   background-color:black; } 
.room > *{   display: inline-block; }