优化代码

src/views/hosts/Forum.vue

@@ -3,16 +3,18 @@
   <div class="forum">
     <div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
 
-      <el-card style="width: 90%">
+      <el-card style="width: 90%" class="card" v-for="(item, index) in NoticeList" :key="index">
         <template #header>
           <div class="card-header">
-            <span>Card name</span>
+            <span>{{ item.title }}</span>
           </div>
         </template>
-        <p v-for="o in 2" :key="o" class="text item">{{ "List item " + o }}</p>
+        <div class="card-body">
+          {{ item.content }}
+        </div>
         <template #footer>
           <div class="card-footer">
-            <span>Card footer</span>
+            <span>{{ item.time }}</span>
           </div>
         </template>
       </el-card>
@@ -29,7 +31,10 @@ import {
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
 } from "vue";
+import { getNoticeList } from "@/api/account";
 const refname = ref("");
+const NoticeList = ref([]);
+
 function load() {
   // 加载更多数据
 }
@@ -37,7 +42,9 @@ watch(refname, async (newQuestion, oldQuestion) => {
   // 变化后执行
 });
 onMounted(() => {
-  // 组件挂载完成后执行
+  getNoticeList({page: 0, size: 10}).then((res) => {
+    NoticeList.value = res;
+  });
 });
 onUpdated(() => {
   // 组件更新后执行
@@ -62,6 +69,11 @@ onUnmounted(() => {
   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;
@@ -75,4 +87,8 @@ onUnmounted(() => {
   justify-content:flex-end;
   align-items: center;
 }
+.card-body{
+  color: #333333;
+  font-size: 24px;
+}
 </style>