diff --git a/my-project-frontend/index.html b/my-project-frontend/index.html
index f1b1688..e015332 100644
--- a/my-project-frontend/index.html
+++ b/my-project-frontend/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="//lib.baomitu.com/element-plus/2.2.32/index.css"/>
+    <link href="https://cdn.jsdelivr.net/npm/qweather-icons@1.5.0/font/qweather-icons.css" rel="stylesheet">
     <title>Vite App</title>
     <style>
         body {
diff --git a/my-project-frontend/src/components/LightCard.vue b/my-project-frontend/src/components/LightCard.vue
new file mode 100644
index 0000000..966d93b
--- /dev/null
+++ b/my-project-frontend/src/components/LightCard.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="light-card">
+        <slot/>
+    </div>
+</template>
+
+<style scoped>
+.light-card {
+    background-color: var(--el-bg-color);
+    border-radius: 5px;
+    padding: 10px;
+}
+</style>
diff --git a/my-project-frontend/src/components/Weather.vue b/my-project-frontend/src/components/Weather.vue
new file mode 100644
index 0000000..b87202a
--- /dev/null
+++ b/my-project-frontend/src/components/Weather.vue
@@ -0,0 +1,35 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <div style="display: flex;justify-content: space-between;margin: 10px 20px">
+            <div style="font-size: 45px;color: grey">
+                <i class="qi-301-fill"></i>
+            </div>
+            <div style="font-weight: bold;text-align: center">
+                <div style="font-size: 25px">20℃</div>
+                <div style="font-size: 15px">多云</div>
+            </div>
+            <div style="margin-top: 13px">
+                <div style="font-size: 15px">中国 四川省</div>
+                <div style="font-size: 14px;color: grey">成都市 成华区</div>
+            </div>
+        </div>
+        <el-divider style="margin: 10px 0"/>
+        <div style="display: grid;grid-template-columns: repeat(5, 1fr);text-align: center">
+            <div v-for="item in 5">
+                <div style="font-size: 13px">{{item}}时</div>
+                <div style="font-size: 23px">
+                    <i class="qi-301-fill"></i>
+                </div>
+                <div style="font-size: 12px">20℃</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/my-project-frontend/src/router/index.js b/my-project-frontend/src/router/index.js
index efd766d..03b9a10 100644
--- a/my-project-frontend/src/router/index.js
+++ b/my-project-frontend/src/router/index.js
@@ -29,6 +29,10 @@ const router = createRouter({
             component: () => import('@/views/IndexView.vue'),
             children: [
                 {
+                    path: '',
+                    name: 'topic-list',
+                    component: () => import('@/views/forum/TopicList.vue')
+                }, {
                     path: 'user-setting',
                     name: 'user-setting',
                     component: () => import('@/views/settings/UserSetting.vue')
diff --git a/my-project-frontend/src/views/IndexView.vue b/my-project-frontend/src/views/IndexView.vue
index 20c7591..fa86ece 100755
--- a/my-project-frontend/src/views/IndexView.vue
+++ b/my-project-frontend/src/views/IndexView.vue
@@ -89,7 +89,7 @@ function userLogout() {
                   <el-icon><Location/></el-icon>
                   <span><b>校园论坛</b></span>
                 </template>
-                <el-menu-item index="1-1">
+                <el-menu-item index="/index">
                   <template #title>
                     <el-icon><ChatDotSquare/></el-icon>
                     帖子广场
diff --git a/my-project-frontend/src/views/forum/TopicList.vue b/my-project-frontend/src/views/forum/TopicList.vue
new file mode 100644
index 0000000..b49a0d8
--- /dev/null
+++ b/my-project-frontend/src/views/forum/TopicList.vue
@@ -0,0 +1,107 @@
+<script setup>
+import LightCard from "@/components/LightCard.vue";
+import {Calendar, CollectionTag, EditPen, Link} from "@element-plus/icons-vue";
+import Weather from "@/components/Weather.vue";
+import {computed} from "vue";
+
+const today = computed(() => {
+    const date = new Date()
+    return `${date.getFullYear()} 年 ${date.getMonth()} 月 ${date.getDay()} 日`
+})
+</script>
+
+<template>
+    <div style="display: flex;margin: 20px auto;gap: 20px;max-width: 900px">
+        <div style="flex: 1">
+            <light-card>
+                <div class="create-topic">
+                    <el-icon><EditPen/></el-icon> 点击发表主题...
+                </div>
+            </light-card>
+            <light-card style="margin-top: 10px;height: 30px">
+            </light-card>
+            <div style="margin-top: 10px;display: flex;flex-direction: column;gap: 10px">
+                <light-card style="height: 150px" v-for="item in 10">
+
+                </light-card>
+            </div>
+        </div>
+        <div style="width: 280px">
+            <div style="position: sticky;top: 20px">
+                <light-card>
+                    <div style="font-weight: bold">
+                        <el-icon><CollectionTag/></el-icon>
+                        论坛公告
+                    </div>
+                    <el-divider style="margin: 10px 0"/>
+                    <div style="font-size: 14px;margin: 10px;color: grey">
+                        为认真学习宣传贯彻党的二十大精神,深入贯彻习近平强军思想,
+                        作为迎接办学70周年系列学术活动之一,国防科技大学将于2022年11月24日至26日在长沙举办“国防科技
+                    </div>
+                </light-card>
+                <light-card style="margin-top: 10px">
+                    <div style="font-weight: bold">
+                        <el-icon><Calendar/></el-icon>
+                        天气信息
+                    </div>
+                    <el-divider style="margin: 10px 0"/>
+                    <weather/>
+                </light-card>
+                <light-card style="margin-top: 10px">
+                    <div class="info-text">
+                        <div>当前日期</div>
+                        <div>{{today}}</div>
+                    </div>
+                    <div class="info-text">
+                        <div>当期IP地址</div>
+                        <div>127.0.0.1</div>
+                    </div>
+                </light-card>
+                <div style="font-size: 14px;margin-top: 10px;color: grey">
+                    <el-icon><Link/></el-icon>
+                    友情链接
+                    <el-divider style="margin: 10px 0"/>
+                </div>
+                <div style="display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 10px;margin-top: 10px">
+                    <div class="friend-link">
+                        <el-image style="height: 100%" src="https://element-plus.org/images/js-design-banner.jpg"/>
+                    </div>
+                    <div class="friend-link">
+                        <el-image style="height: 100%" src="https://element-plus.org/images/vform-banner.png"/>
+                    </div>
+                    <div class="friend-link">
+                        <el-image style="height: 100%" src="https://element-plus.org/images/sponsors/jnpfsoft.jpg"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.info-text {
+    display: flex;
+    justify-content: space-between;
+    color: grey;
+    font-size: 14px;
+}
+
+.friend-link {
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.create-topic {
+    background-color: #efefef;
+    border-radius: 5px;
+    height: 40px;
+    color: grey;
+    font-size: 14px;
+    line-height: 40px;
+    padding: 0 10px;
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+</style>