dy-admin-manager/src/views/teamDetail/componentCourse/message-box.vue

<template>
  <div class="box" :class="{teacher: item.isTeacher}">
    <span class="name">{{item.userName}}</span>
    <div class="container">
      <span class="time">{{item.createTime}}</span>
      <div v-if="item.msgType === 'TXT'" class="content">{{item.content}}</div>
      <div v-if="item.msgType === 'IMG'" class="content">
        <el-image
          style="width: 100px; height: 100px"
          :src="item.content"
          fit="cover"
          :preview-src-list="[item.content]">
        </el-image>
      </div>
      <div v-if="item.msgType === 'VC'" class="content">
        <audio controls
          style="width: 240px"
          :src="item.content"
          ref="dialogVideo">您的浏览器不支持音频播放</audio>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'message-box',
  props: ['item'],
  mounted() {
    console.log({...this.item})
  }
}
</script>
<style lang="less" scoped>
  .box{
    display: flex;
    margin-top: 10px;
    &.teacher{
      flex-direction: row-reverse;
      >.name{
        margin-left: 10px;
        margin-right: 0px;
      }
      .container{
        max-width: 80%;
        .content{
          color: #fff;
          background-color: #13817a;
          text-align: right;
          &::before{
            border: 10px solid #13817a;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-right-color: transparent;
            left: auto;
            right: -18px;
            top: 8px;
          }
        }
      }
    }
    >.name{
      margin: 27px 10px;
      margin-left: 0;
    }
    .container{
      .time{
        display: block;
        margin-bottom: 3px;
        font-size: 12px;
      }
      .content{
        position: relative;
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
        &::before{
          width: 0;
          height: 0;
          border: 10px solid #fff;
          border-top-color: transparent;
          border-bottom-color: transparent;
          border-left-color: transparent;
          content: '';
          left: -18px;
          top: 8px;
          position: absolute;
        }
      }
    }
  }
</style>