抽离header

src/App.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from "vue-router";
-import HelloWorld from "./components/HelloWorld.vue";
+import HeaderBar from "@/components/HeaderBar.vue";
 </script>
 
 <template>
+	<HeaderBar />
 	<RouterView />
 </template>
 

src/components/HeaderBar.vue

@@ -0,0 +1,19 @@
+<template>
+	<header class="h-[--headerHeight] bg-primary flex items-center text-white">
+		<img class="w-[83px] ml-6" src="@/assets/logo.png" alt="logo" />
+		<div class="w-0.5 h-5 bg-white mx-3"></div>
+		<p class="text-lg">基质喷涂转印仪</p>
+		<div class="flex items-center bg-[#335AA5] px-4 py-1 rounded ml-auto">
+			<i class="bg-[#8CFBB7] w-[14px] h-[14px] rounded-full mr-2"></i>
+			<p>基质余量正常</p>
+		</div>
+		<Time class="mx-4"></Time>
+		<div class="btn-light px-5 py-1 mx-6 rounded">
+			<img src="@/assets/menu.svg" alt="menu" />
+			<p class="text-lg ml-2 text-primary">菜单</p>
+		</div>
+	</header>
+</template>
+<script setup lang="ts">
+import Time from "@/components/Time.vue";
+</script>

src/style.css

@@ -8,12 +8,6 @@
 	--footerHeight: 62px;
 }
 @layer utilities {
-	.gradient-light {
-		background: linear-gradient(180deg, #ebf1fa 0%, #f8fafd 100%);
-	}
-    .gradient-dark {
-        background: linear-gradient(90deg, #0657C0 24%, #096AE0 101%);
-    }
     .btn-dark {
         display: flex;
 		justify-content: center;
@@ -31,4 +25,8 @@
         border-radius: 4px;
         color: var(--primaryColor);
     }
+    .main-page {
+        height: calc(100vh - var(--headerHeight)); 
+        background: linear-gradient(180deg, #dfe8f7 0%, #ffffff 100%);
+    }
 }

src/views/HomeView.vue

@@ -1,19 +1,5 @@
 <template>
-	<header class="h-[--headerHeight] bg-primary flex items-center text-white">
-		<img class="w-[83px] ml-6" src="@/assets/logo.png" alt="logo" />
-		<div class="w-0.5 h-5 bg-white mx-3"></div>
-		<p class="text-lg">基质喷涂转印仪</p>
-		<div class="flex items-center bg-[#335AA5] px-4 py-1 rounded ml-auto">
-			<i class="bg-[#8CFBB7] w-[14px] h-[14px] rounded-full mr-2"></i>
-			<p>基质余量正常</p>
-		</div>
-		<Time class="mx-4"></Time>
-		<div class="flex items-center text-white px-5 py-1 mx-6 rounded gradient-light">
-			<img src="@/assets/menu.svg" alt="menu" />
-			<p class="text-lg ml-2 text-primary">菜单</p>
-		</div>
-	</header>
-	<main class="relative" style="height: calc(100vh - var(--headerHeight)); background: linear-gradient(180deg, #dfe8f7 0%, #ffffff 100%)">
+	<main class="relative main-page">
 		<section class="pt-[90px] mb-5 flex justify-between px-[90px]">
 			<img src="@/assets/entry1.png" alt="entry1" />
 			<img src="@/assets/entry2.png" alt="entry1" />
@@ -39,5 +25,5 @@
 </template>
 
 <script setup lang="ts">
-import Time from "@/components/Time.vue";
+
 </script>