Mars
7f563326d8
桌面端： - 新增 DesktopWalletPageHeader 统一钱包子导航，移除重复大标题 - 重构我的余额页布局（居中窄卡片 + 余额/统计/账户设置） - 新增 DesktopBetSlipRail 可折叠注单侧栏，优化 BetSlipPanel 交互 - 首页 upcoming 赛事卡片支持胜平负/让球/大小球快速下注 - 优化 DesktopShell 布局、3D 轮播、各账户/消息/充值页面样式 移动端： - 重构 MobileWalletView 钱包页 UI - 修复 MarketSelectionsPanel 下注区黑色背景问题 - 新增 PageBackButton 与 useSmartBack 智能返回逻辑 - 优化公告/消息/个人中心等详情页导航 API： - listUpcomingPublished 支持 includeMarkets，返回首页卡片所需核心玩法
74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
<script setup lang="ts">
|
||
import { useI18n } from 'vue-i18n';
|
||
import { useSmartBack } from '../composables/useSmartBack';
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
fallback?: string;
|
||
variant?: 'desktop' | 'mobile';
|
||
showLabel?: boolean;
|
||
}>(),
|
||
{
|
||
variant: 'desktop',
|
||
showLabel: true,
|
||
},
|
||
);
|
||
|
||
const { t } = useI18n();
|
||
const { goBack } = useSmartBack(() => props.fallback);
|
||
</script>
|
||
|
||
<template>
|
||
<button
|
||
type="button"
|
||
class="page-back-btn"
|
||
:class="[`page-back-btn--${variant}`]"
|
||
:aria-label="t('common.back')"
|
||
@click="goBack"
|
||
>
|
||
<span class="page-back-icon" aria-hidden="true">‹</span>
|
||
<span v-if="showLabel && variant === 'desktop'" class="page-back-label">
|
||
{{ t('common.back') }}
|
||
</span>
|
||
</button>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page-back-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 0;
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.page-back-btn--desktop {
|
||
color: var(--text-muted);
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.page-back-btn--desktop:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
.page-back-btn--mobile {
|
||
color: #003d6b;
|
||
font-size: 24px;
|
||
line-height: 1;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.page-back-icon {
|
||
line-height: 1;
|
||
}
|
||
|
||
.page-back-btn--desktop .page-back-icon {
|
||
font-size: 18px;
|
||
}
|
||
</style>
|