第一次冲刺09

聊天主页面的布局设计，接着改代码

<template>
  <div class="container">
  <div class="chat-app">
    <el-container>
      <el-container>
        <div>
          <el-container class="header">
            <MyHeader></MyHeader>
          </el-container>
        </div>
        <div>
          <el-main class="el-main" style="padding: 0 ; ">

            <div class="messages-container">
              <div
                  v-for="(message, index) in messages"
                  :key="index"
                  :class="{'message': true, 'is-user': message.isUser}"
              >

                <el-avatar :icon="message.isUser ? 'el-icon-user-solid' : 'el-icon-s-help'"></el-avatar>

                <el-card class="message-content" :class="{'user-message': message.isUser}">
                  {{ message.text }}
                </el-card>
              </div>
            </div>
          </el-main>
        </div>
        <el-footer class="el-footer" style="text-align: right; padding: 20px;">
          <el-input
              v-model="inputMessage"
              type="textarea"
              placeholder="输入消息..."
              @keyup.enter="sendMessage"
          ></el-input>
          <el-button class="el-button--primary" type="primary" @click="sendMessage">发送</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </div>
  </div>
</template>