cyber/src/pages/demoPages/messageBoard/Board_page.vue

<script setup>

import Message from "./Message.vue";
import {ref} from "vue";

const messages = ref([{
  "content": "1",
  "date": "2025-02-09 15:06:03",
  "id": 50,
  "is_deleted": 0,
  "name": "username",
  "uid": 22
},
  {
    "content": "<#ffff00>aaaaaaaaaaaa",
    "date": "2024-10-24 15:02:43",
    "id": 49,
    "is_deleted": 0,
    "name": "guarp001",
    "uid": 23
  },
  {
    "content": "99",
    "date": "2024-10-14 15:15:10",
    "id": 48,
    "is_deleted": 1,
    "name": "guarp001",
    "uid": 23
  },
  {
    "content": "9",
    "date": "2024-10-14 15:15:00",
    "id": 47,
    "is_deleted": 1,
    "name": "guarp001",
    "uid": 23
  },
  {
    "content": "88",
    "date": "2024-10-14 15:14:36",
    "id": 46,
    "is_deleted": 0,
    "name": "guarp001",
    "uid": 23
  },
  {
    "content": "88",
    "date": "2024-10-14 15:14:36",
    "id": 45,
    "is_deleted": 0,
    "name": "guarp001",
    "uid": 23
  },]);
</script>

<template>
  <div class="container">
    <div class="board-body">
      <div class="message-container">
        <Message v-for="msg in messages" :message="msg"/>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-items: flex-start;
  width: 100%;
  height: calc(100vh - 100px);
  overflow: auto;
}

.board-body {
  width: 90%;
  height: auto;
  padding: 20px;
  margin-bottom: 150px;
  border-radius: 15px;
  background: rgba(128, 128, 128, 0.06);
  border: cyan solid 1px;
}

.message-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
}


</style>