公共头部、底部组件

src/assets/main.css

@@ -68,4 +68,7 @@ a {
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
+}
+.bg-primary{
+  background-color: var(--el-color-primary);
 }

src/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElSpace: typeof import('element-plus/es')['ElSpace']
+    GlobalFooter: typeof import('./components/GlobalFooter.vue')['default']
     GlobalHeader: typeof import('./components/GlobalHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/GlobalFooter.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const site = ref({
+  phone: 'xxxxxxxx',
+  email: 'upchh@example.com',
+  address: 'xxxxxxxx',
+  fax: 'xxxxxxxx',
+  copyright: 'xxxxxxxx',
+  icp: 'xxxxxxxx'
+})
+</script>
+
+<template>
+  <div class="bg-black text-xs text-white">
+    <div class="container mx-auto leading-10 flex justify-between items-center py-10">
+      <div>
+        <div>电话：{{ site.phone }}</div>
+        <div>地址：{{ site.address }}</div>
+        <div>邮箱：{{ site.email }}</div>
+        <div>传真：{{ site.fax }}</div>
+      </div>
+    </div>
+    <div class="border-t border-t-solid border-white border-opacity-50 text-center p-5">
+      {{ site.copyright }}. {{ site.icp }}
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped></style>

src/components/GlobalHeader.vue

@@ -12,18 +12,20 @@ const navList = [
 </script>
 
 <template>
-  <header class="bg-white h-60px">
-    <div class="container h-full mx-auto px-4">
-      <nav class="flex h-full items-center justify-between py-5px">
-        <div class="flex items-center">
-          <img src="logo.png" alt="Logo" class="h-50px" />
-        </div>
-        <el-menu router default-active="/home" class="el-menu-demo" mode="horizontal" :ellipsis="false">
-          <el-menu-item :index="item.path" v-for="item in navList" :key="item.path">
-            {{ item.title }}
-          </el-menu-item>
-        </el-menu>
-      </nav>
+  <header class="mb-57px">
+    <div class="bg-white fixed top-0 inset-x-0 z-100">
+      <div class="container h-full mx-auto px-4">
+        <nav class="flex h-full items-center justify-between">
+          <div class="flex items-center">
+            <img src="logo.png" alt="Logo" class="h-50px" />
+          </div>
+          <el-menu router default-active="/home" mode="horizontal" :ellipsis="false">
+            <el-menu-item :index="item.path" v-for="item in navList" :key="item.path">
+              {{ item.title }}
+            </el-menu-item>
+          </el-menu>
+        </nav>
+      </div>
     </div>
   </header>
 </template>
@@ -32,10 +34,4 @@ const navList = [
 .el-menu--horizontal {
   border-bottom: none;
 }
-.router-link {
-  height: 50px;
-}
-.router-link-active {
-  color: red;
-}
 </style>

src/layouts/BasicLayout.vue

@@ -3,6 +3,7 @@
 <template>
   <global-header></global-header>
   <router-view></router-view>
+  <global-footer></global-footer>
 </template>
 
 <style scoped>