Mars
8a1ba0fd95
- 将原移动端页面重命名为 Mobile*，新增 22 个 Desktop* 视图与 DesktopShell 布局体系 - 路由入口改为 Wrapper 视图，通过 useViewport（≥1024px）自动切换移动/桌面端 - 新增投注单面板、盘口弹层、联赛侧栏、数据表格等桌面组件及独立样式令牌 - 扩展 betSlip store、串关筛选、冠军盘、Toast/悬浮信箱等交互与三语 i18n - 公告/消息 Hub 拆分移动与桌面实现；API 投注/钱包/充值记录支持 pageSize 分页
29 lines
752 B
TypeScript
29 lines
752 B
TypeScript
import { ref, watch } from 'vue';
|
|
|
|
const DESKTOP_MIN = 1024;
|
|
const isDesktop = ref(typeof window !== 'undefined' ? window.innerWidth >= DESKTOP_MIN : false);
|
|
|
|
function syncViewportClass(desktop: boolean) {
|
|
if (typeof document === 'undefined') return;
|
|
document.documentElement.classList.toggle('is-desktop', desktop);
|
|
document.documentElement.classList.toggle('is-mobile', !desktop);
|
|
}
|
|
|
|
function updateViewport() {
|
|
isDesktop.value = window.innerWidth >= DESKTOP_MIN;
|
|
syncViewportClass(isDesktop.value);
|
|
}
|
|
|
|
if (typeof window !== 'undefined') {
|
|
updateViewport();
|
|
window.addEventListener('resize', updateViewport);
|
|
}
|
|
|
|
watch(isDesktop, syncViewportClass, { immediate: true });
|
|
|
|
export function useViewport() {
|
|
return {
|
|
isDesktop,
|
|
};
|
|
}
|