tk-mini-program-PC/src/views/hosts/Forum.vue

<template>
  <!-- 站内信 -->
  <div class="forum">
    <div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">

      <el-card style="width: 90%" class="card" v-for="(item, index) in NoticeList" :key="index">
        <template #header>
          <div class="card-header">
            <span>{{ item.title }}</span>
          </div>
        </template>
        <div class="card-body">
          {{ item.content }}
        </div>
        <template #footer>
          <div class="card-footer">
            <span>{{ item.time }}</span>
          </div>
        </template>
      </el-card>

    </div>
  </div>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
import { getNoticeList } from "@/api/account";
const refname = ref("");
const NoticeList = ref([]);

function load() {
  // 加载更多数据
}
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
onMounted(() => {
  getNoticeList({page: 0, size: 10}).then((res) => {
    NoticeList.value = res;
  });
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
</script>

<style scoped lang="less">
.forum {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.infinite-list {
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card{
  border-radius: 16px;
  border: 1px solid #4FCACD;
  background-image: linear-gradient(180deg, #E4FFFF, #FFFFFF);
}
.card-header{
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-footer{
  font-size: 14px;
  display: flex;
  justify-content:flex-end;
  align-items: center;
}
.card-body{
  color: #333333;
  font-size: 16px;
}
</style>