|
|
@@ -0,0 +1,88 @@
|
|
|
+<template>
|
|
|
+ <div class="h-[100px] w-full">
|
|
|
+ <div class="flex h-16 items-center justify-between">
|
|
|
+ <!-- 系统名称 -->
|
|
|
+ <div class="flex items-center">
|
|
|
+ <h1 class="text-xl font-bold">学习系统</h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 移动端菜单按钮 -->
|
|
|
+ <button class="md:hidden" id="mobileMenuButton">
|
|
|
+ <i class="fas fa-bars text-xl"></i>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <!-- 主导航菜单 - 中等屏幕以上显示 -->
|
|
|
+ <nav class="hidden space-x-6 md:flex">
|
|
|
+ <a href="#" class="nav-link active flex items-center py-2">
|
|
|
+ <i class="fas fa-home mr-1"></i>
|
|
|
+ <span>首页</span>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="nav-link flex items-center py-2">
|
|
|
+ <i class="fas fa-book mr-1"></i>
|
|
|
+ <span>语文</span>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="nav-link flex items-center py-2">
|
|
|
+ <i class="fas fa-calculator mr-1"></i>
|
|
|
+ <span>数学</span>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="nav-link flex items-center py-2">
|
|
|
+ <i class="fas fa-language mr-1"></i>
|
|
|
+ <span>英语</span>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="nav-link flex items-center py-2">
|
|
|
+ <i class="fas fa-user mr-1"></i>
|
|
|
+ <span>个人中心</span>
|
|
|
+ </a>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 移动端导航菜单 -->
|
|
|
+ <div class="mobile-menu md:hidden" id="mobileMenu">
|
|
|
+ <div class="space-y-2 py-2">
|
|
|
+ <a
|
|
|
+ href="#"
|
|
|
+ class="hover:bg-hermes-dark block flex items-center rounded px-4 py-2"
|
|
|
+ >
|
|
|
+ <i class="fas fa-home mr-2"></i>
|
|
|
+ <span>首页</span>
|
|
|
+ </a>
|
|
|
+ <a
|
|
|
+ href="#"
|
|
|
+ class="hover:bg-hermes-dark block flex items-center rounded px-4 py-2"
|
|
|
+ >
|
|
|
+ <i class="fas fa-book mr-2"></i>
|
|
|
+ <span>语文</span>
|
|
|
+ </a>
|
|
|
+ <a
|
|
|
+ href="#"
|
|
|
+ class="hover:bg-hermes-dark block flex items-center rounded px-4 py-2"
|
|
|
+ >
|
|
|
+ <i class="fas fa-calculator mr-2"></i>
|
|
|
+ <span>数学</span>
|
|
|
+ </a>
|
|
|
+ <a
|
|
|
+ href="#"
|
|
|
+ class="hover:bg-hermes-dark block flex items-center rounded px-4 py-2"
|
|
|
+ >
|
|
|
+ <i class="fas fa-language mr-2"></i>
|
|
|
+ <span>英语</span>
|
|
|
+ </a>
|
|
|
+ <a
|
|
|
+ href="#"
|
|
|
+ class="hover:bg-hermes-dark block flex items-center rounded px-4 py-2"
|
|
|
+ >
|
|
|
+ <i class="fas fa-user mr-2"></i>
|
|
|
+ <span>个人中心</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { reactive } from 'vue'
|
|
|
+
|
|
|
+const state: any = reactive({})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|
taiji_caozhaorui