初始化

vite-tailwindcss/src/layouts/Header.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <header class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-6 flex items-center justify-between">
+    <div class="flex items-center space-x-4">
+      <!-- Logo -->
+      <img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8 rounded-full">
+      <span class="font-bold">My App</span>
+    </div>
+
+    <!-- Menu -->
+    <nav class="hidden md:flex space-x-4">
+      <a href="#" class="hover:text-gray-300">首页</a>
+      <a href="#" class="hover:text-gray-300">About</a>
+      <a href="#" class="hover:text-gray-300">Services</a>
+      <a href="#" class="hover:text-gray-300">Contact</a>
+    </nav>
+
+    <!-- User Profile -->
+    <div class="flex items-center space-x-4">
+      <button class="text-sm bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
+        Personal Center
+      </button>
+      <img src="https://via.placeholder.com/40" alt="User Avatar" class="h-8 w-8 rounded-full cursor-pointer">
+    </div>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+
+</style>