99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
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;
|
|
}).catch((err) => {});
|
|
});
|
|
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>
|