88979a68c2
- 品牌栏与页面标题移除「作品集」副标题，仅保留 Zikai - HeroSection 移除「角色: 主开发/Lead Developer」meta 项 - TeamCard 移除成员角色(主开发/开发/团队)，仅显示姓名 - 清理 i18n locales 中无用的 subtitle 字段及 App.vue 对应样式
104 lines
2.0 KiB
Vue
104 lines
2.0 KiB
Vue
<script setup>
|
|
import TabNav from './components/TabNav.vue'
|
|
import LanguageSwitcher from './components/LanguageSwitcher.vue'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app">
|
|
<header class="topbar">
|
|
<div class="container topbar__inner">
|
|
<div class="brand">
|
|
<span class="brand__mark">Z</span>
|
|
<span class="brand__title">{{ $t('app.title') }}</span>
|
|
</div>
|
|
<LanguageSwitcher />
|
|
</div>
|
|
</header>
|
|
|
|
<TabNav />
|
|
|
|
<main class="main">
|
|
<RouterView v-slot="{ Component }">
|
|
<Transition name="fade" mode="out-in">
|
|
<component :is="Component" />
|
|
</Transition>
|
|
</RouterView>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container footer__inner">
|
|
<span>© {{ new Date().getFullYear() }} Zikai Wang</span>
|
|
<span class="footer__dot">·</span>
|
|
<span>Built with Vue 3</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.topbar {
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg);
|
|
}
|
|
.topbar__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 60px;
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
.brand__mark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
}
|
|
|
|
.footer {
|
|
border-top: 1px solid var(--border);
|
|
padding: var(--space-lg) 0;
|
|
margin-top: var(--space-2xl);
|
|
}
|
|
.footer__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
color: var(--text-tertiary);
|
|
font-size: 0.85rem;
|
|
}
|
|
.footer__dot {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|