qa-prevention-gwj-vue/src/views/emergen_cyrescue/emergency_map/components/sysChat.vue

<template>
  <div class="sys_chat_container">
    <div v-for="(item, ind) in chatData" :key="ind">
      <div v-for="(itemChild, index) in item" :key="index" class="chat_body">
        <p class="chat_title">{{ itemChild.title }}</p>
        <p :class="{ 'ready': itemChild.isRead }" class="chat_content">{{ itemChild.content }}</p>

        <p v-for="(answer, indx) in itemChild.answers" :key="indx" :class="{ 'ready': answer.isReady}" class="chat_item">
          <span class="chat_item_head">{{ answer.personnal }}回复: </span>
          <span class="chat_item_content">{{ answer.content }}</span>
          <span v-if="answer.isReady" class="chat_ready">已读</span>
        </p>
      </div>
    </div>
    <div class="order">
      <button @click="sendOrderBtn">发送指令</button>
    </div>
  </div>
</template>

<script>
export default {

  props: {
    chatData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {}
  },
  mounted() {
    console.log(this.chatData, 'this.chatData')
  },
  methods: {
    sendOrderBtn() {
      this.$emit('orderMessage')
    }
  }
}
</script>

<style scoped lang="scss">
.sys_chat_container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  color: #ffffff;
  font-size: 15px;
  position: relative;

  & > h5, p, span {
    padding: 0;
    margin: 0;
  }

  .chat_body {
    border-radius: 6px;
    background: #0021649c;
    width: 100%;
    padding: 6px 0 0 18px;

    .chat_title {
      font-size: 16px;
      padding: 8px 0;
    }

    .chat_content {
      position: relative;
      color: rgb(255, 255, 255);
      // 小圆点伪类样式
      &::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        background-color: rgb(255, 0, 0);
        position: absolute;
        left: -12px;
        top: 5px;
        border-radius: 50%;
      }
    }

    .chat_content.ready::before {
      background-color: rgb(19, 223, 0);
    }

    .chat_item {
      padding: 10px 0;
      position: relative;
      border-bottom: 1px solid rgb(15 57 123);

      // 小圆点伪类样式
      &::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        background-color: rgb(255, 0, 0);
        position: absolute;
        left: -12px;
        top: 14px;
        border-radius: 50%;
      }

      .chat_item_head {
        color: #1b6fae;
      }

      .chat_item_content {
        font-size: 14px;
      }

      .chat_ready {
        margin-left: 3px;
        font-size: 12px;
        background-color: #2b82cd;
        color: #ffffff;
        display: inline-block;
        padding: 3px;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
      }
    }

    .chat_item.ready::before {
      background-color: rgb(19, 223, 0);
    }

    & > p:last-child {
      border-bottom: none;
    }
  }

  .order {
    position: fixed;
    bottom: 25px;
    right: 25px;

     & > button {
      transition: all ease-in-out .3s;
      cursor: pointer;
      padding: 7px;
      border-radius: 3px;
      border: none;
      background-color: #5f78ff47;
      color: #fff;
      font-weight: 600;backdrop-filter: blur(16px);

      &:hover {
        background-color: #5f77ff75;
      }
     }
  }
}
</style>