加入原创的404页面

src/App.vue

@@ -6,11 +6,16 @@ import Toolbar from './components/Toolbar.vue'
 <template>
 <div id="contentPane">
   <Toolbar></Toolbar>
+  <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>
 
 <style scoped lang="scss">
@@ -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) {

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-up(md) {
+    height: 0px;
+  }
+}
+
+#contactRoot{
+  position: relative;
+  flex:1;
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+}
 </style>

src/components/Footer.vue

@@ -86,6 +86,7 @@ export default {
   #footerroot
   {
     min-height: 759px;
+    margin-top: 0px;
   }
   #footercontent
   {

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>

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;

src/components/Tools/Err404.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="ErrRoot">
+    <div id="upbarErr"></div>
+    <div id="ErrContent">
+      <div>
+        <span class="itemtitle">404:Not Found</span>
+        <br/>
+        <span class="itemcontent">您要找的页面不存在，<a href="/">返回主页</a></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Err404"
+}
+</script>
+
+<style scoped lang="scss">
+@import "node_modules/bootstrap/scss/_functions.scss";
+@import "node_modules/bootstrap/scss/_variables.scss";
+@import "node_modules/bootstrap/scss/_mixins.scss";
+#upbarErr{
+  position: relative;
+  flex:1;
+  width: 100%;
+  flex-shrink: 0;
+  @include media-breakpoint-between(xs, md) {
+    min-height: 70px!important;
+  }
+
+  @include media-breakpoint-up(md) {
+    //min-height: 95.17px!important;
+    min-height: 95.17px!important;
+  }
+}
+
+#ErrContent{
+  position: relative;
+  flex:2;
+  display: flex;
+  background-color: black;
+  width:100%;
+  align-items: center;
+  justify-content: center;
+  //height: 100%;
+  @include media-breakpoint-between(xs, md) {
+    min-height: 614px;
+  }
+  @include media-breakpoint-up(md) {
+    min-height: 338px;
+  }
+}
+
+#ErrRoot{
+  position: relative;
+  flex:1;
+  display: flex;
+  flex-direction: column;
+  background-color: black;
+  margin-top: 0px;
+  align-items: center;
+  justify-content: center;
+  width:100%;
+  min-height: 100%;
+
+  @include media-breakpoint-between(xs, md) {
+    //min-height:700px;
+  }
+
+  @include media-breakpoint-up(md) {
+    //min-height: 700px;
+  }
+}
+.itemtitle
+{
+  width: 280px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 20px;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  line-height: 30px;
+  display: inline-block;
+}
+.itemcontent
+{
+  width: 280px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  line-height: 30px;
+  display: inline-block;
+}
+
+</style>

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')

src/router.js

@@ -0,0 +1,35 @@
+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')
+    },
+    {
+        path: '/Err404',
+        name: 'Err404',
+        component: ()=>import('./components/Tools/Err404.vue')
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        redirect: '/Err404'
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+export default router