From 6601c46708708abc5044e91eac5189a1a0127d96 Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Fri, 2 May 2025 15:16:32 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=88=9B=E5=BB=BA=E6=88=90?=
 =?UTF-8?q?=E5=8A=9F=EF=BC=8C=E8=B7=AF=E7=94=B1=E5=8A=9F=E8=83=BD=E5=8F=AF?=
 =?UTF-8?q?=E7=94=A8=EF=BC=8C=E6=B7=BB=E5=8A=A0404=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     | 23 +++++++++++++++++++----
 src/components/ContactUs.vue    | 31 +++++++++++++++++++++++++++++--
 src/components/Footer.vue       |  1 +
 src/components/Homepage.vue     |  5 ++++-
 src/components/Toolbar.vue      |  4 ++--
 src/components/Tools/Err404.vue | 13 +++++++++++++
 src/main.js                     | 13 ++++++++++++-
 src/router.js                   | 26 ++++++++++++++++++++++++++
 8 files changed, 106 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Tools/Err404.vue
 create mode 100644 src/router.js

diff --git a/src/App.vue b/src/App.vue
index d788cc8..c5284d2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,9 +6,14 @@ import Toolbar from './components/Toolbar.vue'
 <template>
 <div id="contentPane">
   <Toolbar></Toolbar>
-  <div id="content"><router-view/></div>
-  <div id="footer">
-    <Footer></Footer>
+  <div v-if="$route.path === '/ContactUs'">
+    <router-view/>
+  </div>
+  <div v-else id="defaultcontainer">
+    <div id="content"><router-view/></div>
+    <div id="footer">
+      <Footer></Footer>
+    </div>
   </div>
 </div>
 </template>
@@ -23,14 +28,24 @@ import Toolbar from './components/Toolbar.vue'
   flex-direction: column;
   min-height: 100vh;
 }
+#defaultcontainer{
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
 #content{
+  display: flex;
   position: relative;
   flex:1;
   width: 100%;
   min-height: 100%;
 }
 
-@include media-breakpoint-between(xs, sm) {
+#footer{
+  margin-top: 0px;
+}
+
+@include media-breakpoint-between(xs, md) {
 }
 
 @include media-breakpoint-between(md, xl) {
diff --git a/src/components/ContactUs.vue b/src/components/ContactUs.vue
index 773b41e..244d241 100644
--- a/src/components/ContactUs.vue
+++ b/src/components/ContactUs.vue
@@ -1,5 +1,12 @@
-<template>
+<script setup>
+import Footer from './Footer.vue'
+</script>
 
+<template>
+  <div id="contactRoot">
+    <div id="upbar"></div>
+    <Footer></Footer>
+  </div>
 </template>
 
 <script>
@@ -8,6 +15,26 @@ export default {
 }
 </script>
 
-<style scoped>
+<style  lang="scss">
+@import "node_modules/bootstrap/scss/_functions.scss";
+@import "node_modules/bootstrap/scss/_variables.scss";
+@import "node_modules/bootstrap/scss/_mixins.scss";
+#upbar{
+  width: 100%;
+  @include media-breakpoint-between(xs, md) {
+    height: 33px;
+  }
 
+  @include media-breakpoint-between(md, xl) {
+    height: 0px;
+  }
+}
+
+#contactRoot{
+  position: relative;
+  flex:1;
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+}
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 5f897a1..ab2b5d8 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -86,6 +86,7 @@ export default {
   #footerroot
   {
     min-height: 759px;
+    margin-top: 0px;
   }
   #footercontent
   {
diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue
index 6d8f9d4..ecd8929 100644
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@@ -1,5 +1,8 @@
 <template>
-
+<div style="position: relative;
+  flex:1;width: 100%;min-height: 100%;background-color: #0dcaf0">
+  <h1>It works!</h1>
+</div>
 </template>
 
 <script>
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 7d30312..3c727e1 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -183,8 +183,8 @@ export default {
 #toproot
 {
   display: flex;
-  position: -webkit-sticky;
-  position: sticky;
+  //position: -webkit-fixed;
+  position: fixed;
   top:0px;
   background-color: rgba(255,255,255,0);
   z-index: 7;
diff --git a/src/components/Tools/Err404.vue b/src/components/Tools/Err404.vue
new file mode 100644
index 0000000..ee32a1a
--- /dev/null
+++ b/src/components/Tools/Err404.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Err404"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/main.js b/src/main.js
index e32400d..7427259 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,20 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router.js'
 
 // 引入Bootstrap CSS
 import 'bootstrap/dist/css/bootstrap.min.css'
 // 引入Bootstrap JS（bundle版本）
 import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')
+// new Vue({
+//     el: '#app',
+//     router,
+//     components: { App },
+//     template: '<App/>'
+// })
+
+// const app = createApp(App)
+// app.use(router)
+// app.mount('#app')
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..e03f262
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes= [
+    {
+        path: '/',
+        name: 'Homepage',
+        component: ()=>import('./components/Homepage.vue')
+    },
+    {
+        path: '/ContactUs',
+        name: 'ContactUs',
+        component: ()=>import('./components/ContactUs.vue')
+    },
+    {
+        path: '/Aboutus',
+        name: 'Aboutus',
+        component: ()=>import('./components/Aboutus.vue')
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+export default router