feat:首页联系我们新增跳转

Yi.Bbs.Vue3/src/components/BottomInfo.vue

@@ -1,38 +1,59 @@
 <template>
-<div class="botton-div">
-<a><el-icon><UserFilled /></el-icon>站长：{{configStore.author}}</a>
-<a><el-icon><Search /></el-icon>{{configStore.bottom}}</a>
-<a><el-icon><View /></el-icon>关于本站</a>
-<a><el-icon><Message /></el-icon>建议反馈</a>
-<p></p>
-<a ><el-icon><Position /></el-icon>{{configStore.icp}}</a>
-</div>
+  <div class="botton-div">
+    <a
+      ><el-icon><UserFilled /></el-icon>站长：{{ configStore.author }}</a
+    >
+    <a
+      ><el-icon><Search /></el-icon>{{ configStore.bottom }}</a
+    >
+    <a
+      ><el-icon><View /></el-icon>关于本站</a
+    >
+    <a @click="handleContact"
+      ><el-icon><Link /></el-icon>联系我们</a
+    >
+    <a
+      ><el-icon><Message /></el-icon>建议反馈</a
+    >
+    <p></p>
+    <a
+      ><el-icon><Position /></el-icon>{{ configStore.icp }}</a
+    >
+  </div>
 </template>
 <script setup>
 import useConfigStore from "@/stores/config";
-const  configStore= useConfigStore();
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const configStore = useConfigStore();
+
+// 联系我们跳转对应页面
+const handleContact = () => {
+  router.push("/contact");
+};
 </script>
 <style scoped>
-.el-icon
-{margin: 0 0.2rem;}
-a{
-    margin-right: 2rem;
-    line-height: 1.8rem;
+.el-icon {
+  margin: 0 0.2rem;
+}
+a {
+  margin-right: 2rem;
+  line-height: 1.8rem;
 }
 a:hover {
-    color: #40a9ff;
-    cursor:pointer;
+  color: #40a9ff;
+  cursor: pointer;
 }
-.botton-div
-{
-    background: transparent;
-    color: rgba(0,0,0,.45);
-    font-size: 14px;
-    display: flex;
-    flex-wrap: wrap;
-    height: auto;
-    width: auto;
-    justify-content: center;
-    margin: 0.5rem auto;
+.botton-div {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  height: auto;
+  width: auto;
+  justify-content: center;
+  margin: 0.5rem auto;
 }
-</style>
+</style>