Mars
8a1ba0fd95
- 将原移动端页面重命名为 Mobile*，新增 22 个 Desktop* 视图与 DesktopShell 布局体系 - 路由入口改为 Wrapper 视图，通过 useViewport（≥1024px）自动切换移动/桌面端 - 新增投注单面板、盘口弹层、联赛侧栏、数据表格等桌面组件及独立样式令牌 - 扩展 betSlip store、串关筛选、冠军盘、Toast/悬浮信箱等交互与三语 i18n - 公告/消息 Hub 拆分移动与桌面实现；API 投注/钱包/充值记录支持 pageSize 分页
122 lines
2.5 KiB
Vue
122 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { RouterLink, useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
|
|
const isWalletSection = computed(
|
|
() => route.path.startsWith('/wallet') || route.path === '/profile/cashbacks',
|
|
);
|
|
|
|
const hubTitleKey = computed(() => (isWalletSection.value ? 'nav.wallet' : 'nav.bet_history'));
|
|
|
|
const menuItems = computed(() => {
|
|
if (isWalletSection.value) {
|
|
return [
|
|
{
|
|
path: '/wallet',
|
|
labelKey: 'nav.wallet',
|
|
match: (p: string) =>
|
|
p === '/wallet' ||
|
|
p === '/wallet/detail' ||
|
|
p === '/wallet/recharge' ||
|
|
p.startsWith('/wallet/transactions'),
|
|
},
|
|
{
|
|
path: '/wallet/recharge/history',
|
|
labelKey: 'wallet.recharge_history',
|
|
match: (p: string) => p.startsWith('/wallet/recharge/history'),
|
|
},
|
|
{
|
|
path: '/wallet/cashbacks',
|
|
labelKey: 'wallet.cashbacks_tab',
|
|
match: (p: string) => p === '/wallet/cashbacks' || p === '/profile/cashbacks',
|
|
},
|
|
];
|
|
}
|
|
|
|
return [
|
|
{
|
|
path: '/bets',
|
|
labelKey: 'nav.bet_history',
|
|
match: (p: string) => p === '/bets' || p.startsWith('/bets/'),
|
|
},
|
|
];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="account-side-nav">
|
|
<div class="hub-nav-title">{{ t(hubTitleKey) }}</div>
|
|
<RouterLink
|
|
v-for="item in menuItems"
|
|
:key="item.path"
|
|
:to="item.path"
|
|
class="nav-item hover-bg"
|
|
:class="{ active: item.match(route.path) }"
|
|
>
|
|
<span class="dot"></span>
|
|
<span class="label">{{ t(item.labelKey) || item.path }}</span>
|
|
</RouterLink>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.account-side-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.hub-nav-title {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
padding: 6px 14px 10px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 14px;
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: var(--primary-light);
|
|
background: rgba(212, 175, 55, 0.08);
|
|
}
|
|
|
|
.nav-item.active .dot {
|
|
background: var(--primary);
|
|
box-shadow: 0 0 8px var(--primary);
|
|
}
|
|
|
|
.dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #333;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.label {
|
|
line-height: 1;
|
|
}
|
|
</style>
|