基于element-ui 模仿微信聊天页面

1、效果图

 2、代码

 <template>
 <div style=" overflow: hidden;">
              <el-row>
                <el-col :span="18" :offset="3">
                  <div
                    id="dataShow"
                    onmouseover="this.style.overflow='overlay'"
                    onmouseout="this.style.overflow='hidden'"
                    class="dataShow"
                  >
                    <div
                      v-for="(item,index) in radioInfoList"
                      :key="index"
                      style="background-color: #f5f5f5; padding:24px;"
                    >
                      <el-row>
                        <el-col :span="20" :offset="3">
                          <span class="aa">
                            {{ item.message1 }}
                          </span>
                        </el-col>
                        <el-col :span="1">
                          <span>                                  
                              <svg-icon slot="reference" icon-class="girl" style="font-size: 40px" />   <!--对应头像-->
                          </span>
                        </el-col>
                      </el-row>
                      <br>
                      <el-row>
                        <el-col :span="1">
                          <span>        
                              <svg-icon slot="reference" icon-class="person" style="font-size: 40px" />
                          </span>
                        </el-col>
                        <el-col :span="20">
                          <span class="bb">
                            {{ item.message2 }}
                          </span>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
</template>

　　js

radioInfoList: [{
        user: '周先生',
        robot: '专属客服小美',
        message1: '您好，周先生，我是你的专属客服',
        message2: '你好，有什么事情',
        time1: '2019-11-19 09:05:55',
        time2: '2019-11-19 09:06:55'
      }, {
        user: '周先生',
        robot: '专属客服小美',
        message1: '好的，我们稍后会把账单以短信的形式发给您，请您务必按照承诺在今晚六点之前还款，以免对您的账户及个人信用产生不良影响。我行会持续跟踪您的还款情况，如未按时到账将再次与您联系',
        message2: '这个，最近手头有点近，能缓两天吗，届时一定本息还完',
        time1: '2019-11-19 09:07:55',
        time2: '2019-11-19 09:08:55'
      },
      {
        user: '周先生',
        robot: '专属客服小美',
        message1: ' 我能理解您的情况，我建议您想办法通知家人、朋友或同事周转一下，在今晚六点之前周转，避免给您的账户和个人信用带来不良影响，可以吗？\n',
        message2: '那好吧，我去筹钱',
        time1: '2019-11-19 09:10:33',
        time2: '2019-11-19 09:10:55'
      }, {
        user: '周先生',
        robot: '专属客服小美',
        message1: ' 好的,周先生，你满意本次服务的话请给个好评？\n',
        message2: '好的',
        time1: '2019-11-19 09:11:03',
        time2: '2019-11-19 09:11:26'
      }, {
        user: '周先生',
        robot: '专属客服小美',
        message1: '好的，周先生，再见，祝您生活愉快',
        message2: '再见',
        time1: '2019-11-19 09:11:40',
        time2: '2019-11-19 09:11:55'
      }],
      visible: false,

// 滚动到底部
scrollToBottom() {
  this.$nextTick(() => {
    const div = document.getElementById('dataShow')
    div.scrollTop = div.scrollHeight
  })
},

　　css

<style>
  .font{
    font-size: 16px;
    font-weight: bold;
    font-family: "微软雅黑 Light";
  }
  .dataShow{
    overflow-y: hidden;
    overflow-x: hidden;
    margin-bottom: -24px;
    margin-top: -24px;
    height:600px;
    margin-bottom: 5%;
    margin-top: 5%;
  }
  .aa{
    float: right;
    position: relative;
    display: inline-block;
    max-width: calc(40%);
    min-height: 35px;
    line-height: 2.1;
    font-size: 15px;
    padding: 6px 10px;
    text-align: left;
    word-break: break-all;
    background-color: #9eea6a;
    color: #000;
    border-radius: 4px;
    box-shadow: 0px 1px 7px -5px #000;
    border:0px solid #000;
    margin-top: 0;
    margin-right: 10px;
  }
  .aa:after {
    content: "";
    border-top: solid 5px #00800000;
    border-left: solid 10px #9eea6a;
    border-right: solid 10px #00800000;
    border-bottom: solid 5px #00800000;
    position: absolute;
    top: 10px;
    left: 100%;
  }
  .bb{
    display: inline-block;
    line-height:30px;
    font-style: normal;
    background-color: white;
    letter-spacing: 2px;
    position: relative;
    max-width: calc(40%);
    min-height: 35px;
    line-height: 2.1;
    font-size: 15px;
    padding: 6px 10px;
    text-align: left;
    word-break: break-all;
    border-radius: 4px;
    color: #000;
    box-shadow: 0px 1px 7px -5px #000;
    border:0px solid #000;
    margin-top: 0;
    margin-left: 10px;
  }
  .bb:after {
    content: "";
    border-top: solid 5px #00800000;
    border-left: solid 10px #00800000;
    border-right: solid 10px white;
    border-bottom: solid 5px #00800000;
    position: absolute;
    top: 10px;
    right: 100%;

  }

</style>