feat(player): 新增桌面端 UI 与响应式双端路由架构
- 将原移动端页面重命名为 Mobile*，新增 22 个 Desktop* 视图与 DesktopShell 布局体系 - 路由入口改为 Wrapper 视图，通过 useViewport（≥1024px）自动切换移动/桌面端 - 新增投注单面板、盘口弹层、联赛侧栏、数据表格等桌面组件及独立样式令牌 - 扩展 betSlip store、串关筛选、冠军盘、Toast/悬浮信箱等交互与三语 i18n - 公告/消息 Hub 拆分移动与桌面实现；API 投注/钱包/充值记录支持 pageSize 分页
This commit is contained in:
243
apps/player/src/components/desktop/DesktopTopNav.vue
Normal file
243
apps/player/src/components/desktop/DesktopTopNav.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { RouterLink, useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import LocaleSwitcher from '../LocaleSwitcher.vue';
|
||||
import CashBalanceChip from '../CashBalanceChip.vue';
|
||||
import UserAvatarMenu from '../UserAvatarMenu.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const activeTab = computed(() => {
|
||||
const p = route.path;
|
||||
if (p === '/') return 'home';
|
||||
if (p === '/bet' || p.startsWith('/match/') || p.startsWith('/outright/')) return 'sports';
|
||||
if (p === '/bets' || p.startsWith('/bets/')) return 'bet_history';
|
||||
if (p.startsWith('/wallet') || p === '/profile/cashbacks') return 'wallet';
|
||||
if (p.startsWith('/profile')) return 'profile';
|
||||
if (p.startsWith('/messages')) return 'messages';
|
||||
return '';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="desktop-top-nav">
|
||||
<RouterLink to="/" class="logo-wrap">
|
||||
<img src="/logo.png" alt="TheBet365" class="logo" />
|
||||
<span class="site-name">TheBet365</span>
|
||||
</RouterLink>
|
||||
<nav class="nav-menu">
|
||||
<RouterLink
|
||||
to="/"
|
||||
class="nav-link"
|
||||
:class="{ active: activeTab === 'home' }"
|
||||
>
|
||||
{{ t('nav.home') }}
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
to="/bet"
|
||||
class="nav-link"
|
||||
:class="{ active: activeTab === 'sports' }"
|
||||
>
|
||||
{{ t('nav.sports') }}
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
to="/bets"
|
||||
class="nav-link"
|
||||
:class="{ active: activeTab === 'bet_history' }"
|
||||
>
|
||||
{{ t('nav.bet_history') }}
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
to="/wallet"
|
||||
class="nav-link"
|
||||
:class="{ active: activeTab === 'wallet' }"
|
||||
>
|
||||
{{ t('nav.wallet') }}
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink
|
||||
to="/profile"
|
||||
class="nav-link"
|
||||
:class="{ active: activeTab === 'profile' }"
|
||||
>
|
||||
{{ t('nav.profile') }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<div class="nav-right">
|
||||
<LocaleSwitcher />
|
||||
<template v-if="auth.user">
|
||||
<CashBalanceChip />
|
||||
<UserAvatarMenu />
|
||||
</template>
|
||||
<div v-else class="auth-buttons">
|
||||
<button
|
||||
type="button"
|
||||
class="login-btn"
|
||||
@click="auth.showLoginPrompt(route.fullPath)"
|
||||
>
|
||||
{{ t('auth.login') }}
|
||||
</button>
|
||||
<RouterLink to="/register" class="register-btn">
|
||||
{{ t('auth.register') || '注册' }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.desktop-top-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-decoration: none;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 38px;
|
||||
width: auto;
|
||||
display: block;
|
||||
filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.2));
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
letter-spacing: 0.5px;
|
||||
background: var(--gradient-gold);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 0 8px rgba(212, 175, 55, 0.15);
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.logo-wrap:hover .site-name {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
padding: 18px 4px;
|
||||
transition: color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--primary);
|
||||
border-radius: 3px 3px 0 0;
|
||||
box-shadow: 0 -1px 8px rgba(212, 175, 55, 0.5);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 8px;
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.auth-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
padding: 6px 18px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
background: rgba(212, 175, 55, 0.05);
|
||||
color: var(--primary-light);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
padding: 7px 18px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #F0D875 0%, #D4AF37 100%);
|
||||
color: #3D2800;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.register-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Override locale switcher and other header action height */
|
||||
:deep(.locale-switch:not(.compact)),
|
||||
:deep(.cash-chip),
|
||||
:deep(.avatar-btn) {
|
||||
height: 34px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:deep(.avatar-btn) {
|
||||
width: 34px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user