Mars
8a1ba0fd95
- 将原移动端页面重命名为 Mobile*，新增 22 个 Desktop* 视图与 DesktopShell 布局体系 - 路由入口改为 Wrapper 视图，通过 useViewport（≥1024px）自动切换移动/桌面端 - 新增投注单面板、盘口弹层、联赛侧栏、数据表格等桌面组件及独立样式令牌 - 扩展 betSlip store、串关筛选、冠军盘、Toast/悬浮信箱等交互与三语 i18n - 公告/消息 Hub 拆分移动与桌面实现；API 投注/钱包/充值记录支持 pageSize 分页
45 lines
985 B
Vue
45 lines
985 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import AnnouncementListView from '../AnnouncementListView.vue';
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const isDetailRoute = computed(
|
|
() => route.path.startsWith('/announcements/') && Boolean(route.params.id),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="desktop-layout-hub desktop-hub-page">
|
|
<aside class="desktop-hub-left">
|
|
<AnnouncementListView embedded />
|
|
</aside>
|
|
<main class="desktop-hub-right">
|
|
<slot v-if="isDetailRoute" />
|
|
<div v-else class="hub-placeholder">
|
|
{{ t('announcements.select_hint') }}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.desktop-hub-page {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.hub-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 280px;
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|