确定论坛基本样式，添加天气组件展示效果

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 {

my-project-frontend/src/components/LightCard.vue

@@ -0,0 +1,17 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="light-card">
+        <slot/>
+    </div>
+</template>
+
+<style scoped>
+.light-card {
+    background-color: var(--el-bg-color);
+    border-radius: 5px;
+    padding: 10px;
+}
+</style>

my-project-frontend/src/components/Weather.vue

@@ -0,0 +1,64 @@
+<script setup>
+const data = {
+    location: '中国 四川省',
+    city: '成都市',
+    temperature: 22,
+    icon: '101',
+    text: '多云',
+    hourly: [
+        {
+            icon: '100',
+            temperature: 22,
+            time: '1时'
+        }, {
+            icon: '102',
+            temperature: 30,
+            time: '2时'
+        }, {
+            icon: '101',
+            temperature: 21,
+            time: '3时'
+        }, {
+            icon: '103',
+            temperature: 25,
+            time: '4时'
+        }, {
+            icon: '104',
+            temperature: 24,
+            time: '5时'
+        }
+    ]
+}
+</script>
+
+<template>
+    <div>
+        <div style="display: flex;justify-content: space-between;margin: 10px 20px">
+            <div style="font-size: 45px">
+                <i :class="`qi-${data.icon}-fill`"></i>
+            </div>
+            <div style="font-weight: bold;text-align: center">
+                <div style="font-size: 25px">{{data.temperature}}℃</div>
+                <div style="font-size: 15px">{{data.text}}</div>
+            </div>
+            <div style="margin-top: 13px">
+                <div style="font-size: 15px">{{data.city}}</div>
+                <div style="font-size: 14px;color: grey">{{data.location}}</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 data.hourly">
+                <div style="font-size: 13px">{{item.time}}</div>
+                <div style="font-size: 23px">
+                    <i :class="`qi-${item.icon}-fill`"></i>
+                </div>
+                <div style="font-size: 12px">{{item.temperature}}℃</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

my-project-frontend/src/router/index.js

@@ -29,6 +29,10 @@ const router = createRouter({
             component: () => import('@/views/IndexView.vue'),
             children: [
                 {
+                    path: '',
+                    name: 'post-list',
+                    component: () => import('@/views/forum/TopicList.vue')
+                }, {
                     path: 'user-setting',
                     name: 'user-setting',
                     component: () => import('@/views/settings/UserSetting.vue')

my-project-frontend/src/views/IndexView.vue

@@ -93,7 +93,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>
                     帖子广场

my-project-frontend/src/views/forum/TopicList.vue

@@ -0,0 +1,77 @@
+<script setup>
+import LightCard from "@/components/LightCard.vue";
+import {Calendar, CollectionTag, Link} from "@element-plus/icons-vue";
+import {computed} from "vue"
+import Weather from "@/components/Weather.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>
+
+            </light-card>
+        </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="margin: 10px;font-size: 14px;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 style="display: flex;justify-content: space-between;color: grey;font-size: 14px">
+                        <div>当前日期</div>
+                        <div>{{today}}</div>
+                    </div>
+                    <div style="display: flex;justify-content: space-between;color: grey;font-size: 14px">
+                        <div>当前IP地址</div>
+                        <div><b>127.0.0.1</b></div>
+                    </div>
+                </light-card>
+                <div style="margin-top: 10px;color: grey;font-size: 14px">
+                    <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 scoped>
+.friend-link {
+    border-radius: 5px;
+    overflow: hidden;
+}
+</style>