33 lines
1.1 KiB
Vue
33 lines
1.1 KiB
Vue
<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>
|