|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
<template>
|
|
|
<nav class="bg-white border-2 border-[#0A0910] max-w-7xl mx-auto rounded-lg mb-4 shadow-lg">
|
|
<nav class="bg-white border-2 border-[#0A0910] max-w-7xl mx-auto rounded-lg mb-4 shadow-lg">
|
|
|
- <div class="px-4 py-6 md:px-6">
|
|
|
|
|
|
|
+ <div class="px-4 py-6 md:px-6">
|
|
|
<!-- 桌面端导航 -->
|
|
<!-- 桌面端导航 -->
|
|
|
<div class="hidden md:flex items-center justify-between">
|
|
<div class="hidden md:flex items-center justify-between">
|
|
|
<!-- Logo区域 -->
|
|
<!-- Logo区域 -->
|
|
@@ -62,7 +62,7 @@
|
|
|
<span>🥄</span>
|
|
<span>🥄</span>
|
|
|
<span>酱料大师</span>
|
|
<span>酱料大师</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<!-- 更多菜单下拉 -->
|
|
<!-- 更多菜单下拉 -->
|
|
|
<div class="relative" @mouseleave="handleMouseLeave">
|
|
<div class="relative" @mouseleave="handleMouseLeave">
|
|
|
<button
|
|
<button
|
|
@@ -76,13 +76,22 @@
|
|
|
<span>⋯</span>
|
|
<span>⋯</span>
|
|
|
<span>更多</span>
|
|
<span>更多</span>
|
|
|
</button>
|
|
</button>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<!-- 下拉菜单 -->
|
|
<!-- 下拉菜单 -->
|
|
|
<div
|
|
<div
|
|
|
v-if="showMoreMenu"
|
|
v-if="showMoreMenu"
|
|
|
@mouseenter="handleMouseEnter"
|
|
@mouseenter="handleMouseEnter"
|
|
|
class="absolute right-0 top-full mt-0.5 w-40 bg-white border-2 border-[#0A0910] rounded-lg shadow-lg z-50 overflow-hidden"
|
|
class="absolute right-0 top-full mt-0.5 w-40 bg-white border-2 border-[#0A0910] rounded-lg shadow-lg z-50 overflow-hidden"
|
|
|
>
|
|
>
|
|
|
|
|
+ <router-link
|
|
|
|
|
+ to="/fortune-cooking"
|
|
|
|
|
+ @click="showMoreMenu = false"
|
|
|
|
|
+ class="flex items-center gap-2 px-4 py-3 text-sm font-bold transition-colors duration-200 hover:bg-gray-100"
|
|
|
|
|
+ :class="$route.path === '/fortune-cooking' ? 'bg-yellow-100 text-gray-800' : 'text-gray-700'"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span>🔮</span>
|
|
|
|
|
+ <span>玄学厨房</span>
|
|
|
|
|
+ </router-link>
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/favorites"
|
|
to="/favorites"
|
|
|
@click="showMoreMenu = false"
|
|
@click="showMoreMenu = false"
|
|
@@ -101,15 +110,6 @@
|
|
|
<span>🖼️</span>
|
|
<span>🖼️</span>
|
|
|
<span>封神图鉴</span>
|
|
<span>封神图鉴</span>
|
|
|
</router-link>
|
|
</router-link>
|
|
|
- <router-link
|
|
|
|
|
- to="/fortune-cooking"
|
|
|
|
|
- @click="showMoreMenu = false"
|
|
|
|
|
- class="flex items-center gap-2 px-4 py-3 text-sm font-bold transition-colors duration-200 hover:bg-gray-100"
|
|
|
|
|
- :class="$route.path === '/fortune-cooking' ? 'bg-yellow-100 text-gray-800' : 'text-gray-700'"
|
|
|
|
|
- >
|
|
|
|
|
- <span>🔮</span>
|
|
|
|
|
- <span>玄学厨房</span>
|
|
|
|
|
- </router-link>
|
|
|
|
|
<router-link
|
|
<router-link
|
|
|
to="/about"
|
|
to="/about"
|
|
|
@click="showMoreMenu = false"
|
|
@click="showMoreMenu = false"
|
liuziting