Mars
14e49374ac
包含 NestJS 后端、三端前端、Prisma 数据模型、结算引擎测试与 PRD 文档。 Co-authored-by: Cursor <cursoragent@cursor.com>
85 lines
3.1 KiB
Vue
85 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { RouterView, RouterLink, useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useAuthStore } from '../stores/auth';
|
|
import { useBetSlipStore } from '../stores/betSlip';
|
|
import BetSlipDrawer from '../components/BetSlipDrawer.vue';
|
|
import { ref } from 'vue';
|
|
|
|
const { t, locale } = useI18n();
|
|
const auth = useAuthStore();
|
|
const slip = useBetSlipStore();
|
|
const route = useRoute();
|
|
const showSlip = ref(false);
|
|
|
|
const locales = [
|
|
{ code: 'zh-CN', label: '中文' },
|
|
{ code: 'en-US', label: 'EN' },
|
|
{ code: 'ms-MY', label: 'BM' },
|
|
];
|
|
|
|
function setLocale(code: string) {
|
|
locale.value = code;
|
|
localStorage.setItem('locale', code);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="layout">
|
|
<header class="header">
|
|
<span class="logo">TheBet365</span>
|
|
<div class="header-actions">
|
|
<select :value="locale" @change="setLocale(($event.target as HTMLSelectElement).value)" class="lang-select">
|
|
<option v-for="l in locales" :key="l.code" :value="l.code">{{ l.label }}</option>
|
|
</select>
|
|
<span class="balance">{{ auth.user?.username }}</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<RouterView />
|
|
</main>
|
|
|
|
<nav class="bottom-nav">
|
|
<RouterLink to="/" :class="{ active: route.path === '/' }">{{ t('nav.home') }}</RouterLink>
|
|
<RouterLink to="/football" :class="{ active: route.path.startsWith('/football') || route.path.startsWith('/match') }">{{ t('nav.football') }}</RouterLink>
|
|
<button class="slip-btn" @click="showSlip = true">
|
|
{{ t('bet.bet_slip') }}
|
|
<span v-if="slip.count" class="badge">{{ slip.count }}</span>
|
|
</button>
|
|
<RouterLink to="/bets" :class="{ active: route.path === '/bets' }">{{ t('nav.my_bets') }}</RouterLink>
|
|
<RouterLink to="/profile" :class="{ active: route.path === '/profile' }">{{ t('nav.profile') }}</RouterLink>
|
|
</nav>
|
|
|
|
<BetSlipDrawer v-model="showSlip" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.layout { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 60px; }
|
|
.header {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 12px 16px; background: #1a2332; border-bottom: 1px solid var(--border);
|
|
}
|
|
.logo { font-weight: 800; color: var(--primary); font-size: 18px; }
|
|
.header-actions { display: flex; gap: 12px; align-items: center; }
|
|
.lang-select { background: var(--bg-card); color: #fff; border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; width: auto; }
|
|
.balance { font-size: 13px; color: var(--text-muted); }
|
|
.main { flex: 1; padding: 12px; }
|
|
.bottom-nav {
|
|
position: fixed; bottom: 0; left: 0; right: 0;
|
|
display: flex; background: #1a2332; border-top: 1px solid var(--border);
|
|
z-index: 100;
|
|
}
|
|
.bottom-nav a, .slip-btn {
|
|
flex: 1; text-align: center; padding: 10px 4px; font-size: 11px;
|
|
color: var(--text-muted); background: none; position: relative;
|
|
}
|
|
.bottom-nav a.active, .slip-btn.active { color: var(--primary); }
|
|
.badge {
|
|
position: absolute; top: 2px; right: 20%;
|
|
background: var(--danger); color: #fff; font-size: 10px;
|
|
padding: 1px 5px; border-radius: 10px;
|
|
}
|
|
</style>
|