chore: seal Design Vision v1 and monorepo scaffold
Archive the differentiated YuXinGu product docs, AI engineering system, design contract, and Go/Vue scaffold. Next execution prioritizes Cece-parity over early innovation (see .ai/product/STRATEGY.md). Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<nav class="tabbar" aria-label="主导航">
|
||||
<router-link
|
||||
v-for="item in items"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="item"
|
||||
:class="{ ask: item.ask, on: isActive(item.to) }"
|
||||
>
|
||||
<span class="ni">{{ item.icon }}</span>
|
||||
{{ item.label }}
|
||||
</router-link>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const items = [
|
||||
{ to: '/', icon: '⌂', label: '首页' },
|
||||
{ to: '/explore', icon: '◎', label: '探索' },
|
||||
{ to: '/ask', icon: '问', label: '问', ask: true },
|
||||
{ to: '/companion', icon: '♡', label: '陪伴' },
|
||||
{ to: '/mine', icon: '◍', label: '我的' },
|
||||
]
|
||||
|
||||
function isActive(to: string): boolean {
|
||||
if (to === '/') return route.path === '/'
|
||||
return route.path.startsWith(to)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabbar{
|
||||
position:fixed;bottom:0;left:50%;transform:translateX(-50%);
|
||||
width:100%;max-width:var(--yxg-max-w);background:#fff;
|
||||
display:flex;justify-content:space-around;
|
||||
padding:6px 0 calc(10px + env(safe-area-inset-bottom,0));
|
||||
border-top:1px solid #f0f0f0;z-index:100;
|
||||
}
|
||||
.item{
|
||||
flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
|
||||
font-size:10px;color:var(--yxg-sub);padding:2px 0;
|
||||
}
|
||||
.item.on{color:var(--yxg-pri);font-weight:600}
|
||||
.ni{font-size:16px;line-height:1.2}
|
||||
.item.ask .ni{
|
||||
width:36px;height:36px;border-radius:50%;background:var(--yxg-pri);color:#fff;
|
||||
display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:-10px;
|
||||
}
|
||||
.item.ask.on{color:var(--yxg-pri)}
|
||||
</style>
|
||||
Reference in New Issue
Block a user