39 lines
1.2 KiB
Vue
39 lines
1.2 KiB
Vue
|
<script setup>
|
||
|
|
import HelloWorld from './components/HelloWorld.vue'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="bg-gray-100 min-h-screen">
|
||
|
|
<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">Home</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>
|
||
|
|
|
||
|
|
<main class="p-6">
|
||
|
|
<slot></slot>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
</style>
|