优化代码

src/views/hosts/Forum.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="forum">
+    <div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
+
+      <el-card style="width: 90%">
+        <template #header>
+          <div class="card-header">
+            <span>Card name</span>
+          </div>
+        </template>
+        <p v-for="o in 2" :key="o" class="text item">{{ "List item " + o }}</p>
+        <template #footer>
+          <div class="card-footer">
+            <span>Card footer</span>
+          </div>
+        </template>
+      </el-card>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref, // 响应式基础
+  watch, // 侦听器
+  onMounted, // 组件挂载完成后执行
+  onUpdated, // 组件更新后执行
+  onUnmounted, // 组件销毁前执行
+} from "vue";
+const refname = ref("");
+function load() {
+  // 加载更多数据
+}
+watch(refname, async (newQuestion, oldQuestion) => {
+  // 变化后执行
+});
+onMounted(() => {
+  // 组件挂载完成后执行
+});
+onUpdated(() => {
+  // 组件更新后执行
+});
+onUnmounted(() => {
+  // 组件销毁前执行
+});
+</script>
+
+<style scoped lang="less">
+.forum {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.infinite-list {
+  width: 90%;
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.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;
+}
+</style>