Bit_Wise_World/src/views/notification/SysMessage.vue

<template>
  <div class="insite-message">
    <div class="message-item" v-for="(item, index) in 3" :key="index">
      <div class="title pf600 fs14 fc333333">
        系统通知系统通知系统通知系统通知系统通知
      </div>
      <div class="desc pf500 fs12 fc999999">
        系统通知系统通知系统通知系统通知系统通知知系统通知系统通知系统通知知系统通知系统通知系统通知知系统通知系统通知系统通知
      </div>
      <div class="time pf300 fs12 fc999999">2025-11-06 12:25:10</div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
  .insite-message {
    .message-item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-top: 18px;
      width: 345px;
      height: 120px;
      border: 1px solid #ebebeb;
      border-radius: 8px;

      .title {
        margin-top: 10px;
        width: 313px;
        height: 20px;
        line-height: 20px;
      }

      .desc {
        margin-top: 4px;
        width: 313px;
        height: 57px;
        line-height: 160%;
      }

      .time {
        margin-top: 4px;
        width: 313px;
        height: 20px;
        line-height: 20px;
      }
    }
  }
</style>