jack/digital-psychology
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 按测测功能重构 H5 首页与各子页，并修正顶栏「+」添加档案菜单

Browse Source 
对齐测测交互：首页「+」支持邀请填档案/添加档案/邀请合盘；各 Tab 与工具页按同一视觉与功能标准落地；本地对照截图目录显式忽略。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-05 14:32:35 +08:00
co-authored by Cursor
parent bd22d9dddd
commit 53eb4577b3
35 changed files with 8900 additions and 1356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user-h5/src/components/TabBar.vue
+59 -26
View File
@@ -7,7 +7,7 @@
class="item"
:class="{ ask: item.ask, on: isActive(item.key) }"
>
<span class="ni">{{ item.icon }}</span>
<span class="ni" aria-hidden="true">{{ item.icon }}</span>
<span class="lb">{{ item.label }}</span>
</router-link>
</nav>
@@ -19,7 +19,7 @@ import { useRoute } from 'vue-router'
const route = useRoute()
const items = [
{ key: 'home', to: '/', icon: '⌂', label: '首页' },
{ key: 'explore', to: '/explore', icon: '◎', label: '探索' },
{ key: 'explore', to: '/explore', icon: '◆', label: '探索' },
{ key: 'ask', to: '/ask', icon: '问', label: '问答', ask: true },
{ key: 'companion', to: '/companion', icon: '♡', label: '陪伴' },
{ key: 'mine', to: '/mine', icon: '◍', label: '我的' },
@@ -61,31 +61,64 @@ function isActive(key: string): boolean {
</script>
<style scoped>
.tabbar{
position:fixed;bottom:0;left:50%;transform:translateX(-50%);
width:100%;max-width:var(--yxg-max-w);
background:rgba(255,255,255,.96);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
display:flex;justify-content:space-around;
padding:6px 0 calc(10px + env(safe-area-inset-bottom,0));
border-top:1px solid var(--color-border);z-index:100;
box-shadow:var(--shadow-nav);
.tabbar {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--yxg-max-w);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
justify-content: space-around;
padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0));
border-top: 1px solid var(--color-border);
z-index: 100;
box-shadow: var(--shadow-nav);
}
.item{
flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
font-size:10px;color:var(--color-text-secondary);padding:2px 0;
letter-spacing:.02em;
.item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: 10px;
color: var(--color-text-secondary);
padding: 2px 0;
letter-spacing: 0.02em;
transition: color var(--duration-fast) ease;
}
.item.on{color:var(--yxg-pri);font-weight:600}
.ni{font-size:17px;line-height:1.2}
.lb{line-height:1.2}
.item.ask .ni{
width:40px;height:40px;border-radius:50%;
background:linear-gradient(135deg,#ff7a6e,var(--yxg-pri));
color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:700;margin-top:-12px;
box-shadow:0 4px 12px rgba(229,77,66,.35);
.item.on {
color: var(--color-primary);
font-weight: 600;
}
.ni {
font-size: 17px;
line-height: 1.2;
}
.lb {
line-height: 1.2;
}
.item.ask .ni {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
margin-top: -14px;
box-shadow: 0 6px 16px rgba(229, 77, 66, 0.38);
}
.item.ask.on {
color: var(--color-primary);
}
.item.ask.on .ni {
box-shadow: 0 8px 20px rgba(229, 77, 66, 0.45);
}
.item.ask.on{color:var(--yxg-pri)}
</style>