diff --git a/Yi.Bbs.Vue3/src/layout/AppBody.vue b/Yi.Bbs.Vue3/src/layout/AppBody.vue
index 4d22ac05..acdcad22 100644
--- a/Yi.Bbs.Vue3/src/layout/AppBody.vue
+++ b/Yi.Bbs.Vue3/src/layout/AppBody.vue
@@ -1,18 +1,15 @@
-<template class="back-color">
+<template>
   <div class="content-main">
     <RouterView />
   </div>
 </template>
 
 <style scoped>
-.body-main {
-  min-height: 10rem;
-  min-width: 10rem;
-  background-color: #f0f2f5;
-}
 .content-main {
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
-  min-height: 1150px;
+  /* min-height: 1150px; */
 }
 </style>
diff --git a/Yi.Bbs.Vue3/src/layout/Index.vue b/Yi.Bbs.Vue3/src/layout/Index.vue
index 6e16f4b9..8fe1b171 100644
--- a/Yi.Bbs.Vue3/src/layout/Index.vue
+++ b/Yi.Bbs.Vue3/src/layout/Index.vue
@@ -8,7 +8,7 @@
       >
         <AppHeader />
       </el-header>
-      <el-main>
+      <el-main class="common-main">
         <AppBody />
       </el-main>
     </el-container>
@@ -42,12 +42,21 @@ const handleScroll = () => {
 
 <style scoped lang="scss">
 .common {
-  &-header {
-    background-color: #fff;
+  &-layout {
     width: 100%;
+    height: 100%;
+  }
+  &-header {
+    width: 100%;
+    background-color: #fff;
+    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
+    height: 50px;
     display: flex;
     justify-content: center;
   }
+  &-main {
+    height: calc(100% - 50px);
+  }
 }
 
 .el-main {
diff --git a/Yi.Bbs.Vue3/src/router/index.js b/Yi.Bbs.Vue3/src/router/index.js
index 1269e39c..0ec56979 100644
--- a/Yi.Bbs.Vue3/src/router/index.js
+++ b/Yi.Bbs.Vue3/src/router/index.js
@@ -80,6 +80,14 @@ const router = createRouter({
             title: "主题封面",
           },
         },
+        {
+          name: "contact",
+          path: "/contact",
+          component: () => import("../views/contact/index.vue"),
+          meta: {
+            title: "联系我们",
+          },
+        },
       ],
     },
     { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
diff --git a/Yi.Bbs.Vue3/src/views/contact/index.vue b/Yi.Bbs.Vue3/src/views/contact/index.vue
new file mode 100644
index 00000000..083d8be7
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/views/contact/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="contact-box">
+    <div class="content">
+      <h2>联系我们</h2>
+      <p>作者QQ：454313500</p>
+      <p>2029年之前作者24小时在线，时刻保持活跃更新。</p>
+      <p>
+        QQ交流群：官方一群（已满）、官方二群（已满）、官方三群：786308927（基本已满）、官方四群:498310311（新群）
+        联系作者，这里人人都是顾问
+      </p>
+      <p>官方网址留言区：ccnetcore.com</p>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="scss">
+.contact-box {
+  width: 100%;
+  padding: 20px;
+  //   height: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: #fff;
+  .content {
+    width: 1300px;
+    > p {
+      margin: 50px 0;
+      font-size: 16px;
+    }
+  }
+}
+</style>
diff --git a/Yi.Bbs.Vue3/src/views/login/index.vue b/Yi.Bbs.Vue3/src/views/login/index.vue
index 24733250..03bb8f3c 100644
--- a/Yi.Bbs.Vue3/src/views/login/index.vue
+++ b/Yi.Bbs.Vue3/src/views/login/index.vue
@@ -154,7 +154,7 @@
     </div>
     <div class="login-footer">
       <div class="info">站长：{{ configStore.author }}</div>
-      <div class="info btn">联系我们</div>
+      <div class="info btn" @click="handleContact">联系我们</div>
       <div class="info btn">关于本站</div>
       <div class="info btn">建议反馈</div>
     </div>
@@ -300,6 +300,11 @@ const handleGetCodeImage = () => {
 onMounted(async () => {
   await useUserStore().updateCodeImage();
 });
+
+// 联系我们跳转对应页面
+const handleContact = () => {
+  router.push("/contact");
+};
 </script>
 <style scoped lang="scss">
 .login {