diff --git a/app/Livewire/Layout/Navigation.php b/app/Livewire/Layout/Navigation.php new file mode 100644 index 0000000..b2ded47 --- /dev/null +++ b/app/Livewire/Layout/Navigation.php @@ -0,0 +1,34 @@ + '首頁', 'route' => 'welcome'], + ['name' => '新歌快報', 'route' => 'new-songs'], + ['name' => '熱門排行', 'route' => 'top-ranking'], + ['name' => '歌星查詢', 'route' => 'search-singer'], + ['name' => '歌名查詢', 'route' => 'search-song'], + ['name' => '已點歌曲', 'route' => 'clicked-song'], + ['name' => '聲音控制', 'route' => 'sound-control'], + ['name' => '社群媒體', 'route' => 'social-media'], + ['name' => '真情告白', 'route' => 'love-message'], + ['name' => '心情貼圖', 'route' => 'mood-stickers'], + ]; + + public function logout(Logout $logout) + { + $logout(); + return redirect('/'); + } + + public function render() + { + return view('livewire.layout.navigation'); + } +} \ No newline at end of file diff --git a/resources/css/app.css b/resources/css/app.css index b5c61c9..5fb5c6d 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,3 +1,21 @@ @tailwind base; @tailwind components; @tailwind utilities; + + +body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } +.container { text-align: center; margin: 20px; } +.header { background: #D32F2F; padding: 10px 0; color: white; font-size: 24px; font-weight: 500; text-align: center; } +.banner { width: 100%; max-width: 600px; margin: 0 auto 20px; } +.banner img { width: 100%; height: auto; } +.content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px 20px; max-width: 600px; margin: 0 auto; justify-content: center; } +@media (max-width: 600px) { .content { grid-template-columns: repeat(2, 1fr); gap: 10px; } } +@media (max-width: 400px) { .content { grid-template-columns: repeat(2, 1fr); gap: 8px; } .card { width: auto; max-width: 160px; } } +.card { width: 100%; max-width: 180px; margin: 0 auto; display: flex; justify-content: center; align-items: center; + background: linear-gradient(135deg, #FF4081, #FF4081); color: white; border-radius: 10px; text-align: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; cursor: pointer; } +.card:hover { transform: scale(1.05); } +.card img { width: 100%; height: auto; object-fit: contain; } +.section { display: none; } +.section.active { display: block; } + diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 224957f..7bcb3bc 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,36 +1,37 @@ - - - - + + + + - {{ config('app.name', 'Laravel') }} + {{ config('app.name', 'Laravel') }} - - - + + + - - @vite(['resources/css/app.css', 'resources/js/app.js']) - - -
- + + @vite(['resources/css/app.css', 'resources/js/app.js']) + @livewireStyles + @wireUiScripts + + + - - @if (isset($header)) -
-
- {{ $header }} -
-
- @endif +
+ + @if (isset($header)) +
+ {{ $header }} +
+ @endif - -
- {{ $slot }} -
-
- + +
+ {{ $slot }} +
+
+ @livewireScripts + diff --git a/resources/views/livewire/layout/navigation.blade.php b/resources/views/livewire/layout/navigation.blade.php index a06e223..d2c14c8 100644 --- a/resources/views/livewire/layout/navigation.blade.php +++ b/resources/views/livewire/layout/navigation.blade.php @@ -1,110 +1,26 @@ - + + -use App\Livewire\Actions\Logout; -use Livewire\Volt\Component; + + + \ No newline at end of file