123 lines
2.0 KiB
Vue
123 lines
2.0 KiB
Vue
<script setup>
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const navigateToHome = () => {
|
|
router.push('/')
|
|
}
|
|
|
|
const navigateToAdmin = () => {
|
|
router.push('/admin')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="root-app">
|
|
<!-- 导航栏 -->
|
|
<nav class="navigation">
|
|
<div class="nav-container">
|
|
<div class="nav-brand">
|
|
<h1>AI棒榜系统</h1>
|
|
</div>
|
|
<div class="nav-links">
|
|
<button
|
|
class="nav-btn"
|
|
:class="{ active: route.path === '/admin' }"
|
|
@click="navigateToAdmin"
|
|
>
|
|
后台管理
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 路由视图 -->
|
|
<main class="main-content">
|
|
<router-view />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.root-app {
|
|
min-height: 100vh;
|
|
background: #ebedf2;
|
|
}
|
|
|
|
/* 导航栏样式 */
|
|
.navigation {
|
|
background: white;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-container {
|
|
max-width: 375px;
|
|
margin: 0 auto;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-brand h1 {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid #ddd;
|
|
background: white;
|
|
color: #666;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-btn:hover {
|
|
background: #f8f9fa;
|
|
border-color: #4a90e2;
|
|
}
|
|
|
|
.nav-btn.active {
|
|
background: #4a90e2;
|
|
color: white;
|
|
border-color: #4a90e2;
|
|
}
|
|
|
|
/* 主内容区域 */
|
|
.main-content {
|
|
min-height: calc(100vh - 60px);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 480px) {
|
|
.nav-container {
|
|
max-width: 100%;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.nav-brand h1 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style> |