Mars
b5dca1bfb1
- 球赛/串关/优胜冠军、赛事详情、历史投注与个人资料编辑 - 固定顶栏、公告与底栏，仅内容区滚动 - 底部导航与站点 favicon 使用 logo，登录页精简 - API 种子、冠军盘与历史注单增强 Co-authored-by: Cursor <cursoragent@cursor.com>
73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import api from '../api';
|
|
import emptyMatchesImg from '../assets/images/empty-matches.svg';
|
|
import BannerCarousel from '../components/BannerCarousel.vue';
|
|
import { resolveBanners } from '../constants/defaultBanner';
|
|
|
|
const router = useRouter();
|
|
const home = ref<{
|
|
banners: Banner[];
|
|
hotMatches: Match[];
|
|
ticker: ContentItem[];
|
|
notices: ContentItem[];
|
|
} | null>(null);
|
|
|
|
interface ContentItem {
|
|
translation?: { title?: string; body?: string; imageUrl?: string };
|
|
}
|
|
|
|
interface Banner {
|
|
id?: string;
|
|
linkType?: string | null;
|
|
linkTarget?: string | null;
|
|
translation?: { title?: string; body?: string; imageUrl?: string };
|
|
}
|
|
|
|
interface Match {
|
|
id: string;
|
|
homeTeamName: string;
|
|
awayTeamName: string;
|
|
startTime: string;
|
|
isHot: boolean;
|
|
}
|
|
|
|
const displayBanners = computed(() => resolveBanners(home.value?.banners));
|
|
|
|
onMounted(async () => {
|
|
const { data } = await api.get('/player/home');
|
|
home.value = data.data;
|
|
});
|
|
|
|
function goMatch(id: string) {
|
|
router.push(`/match/${id}`);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<BannerCarousel :banners="displayBanners" />
|
|
|
|
<h2 class="section-title">热门赛事</h2>
|
|
<div v-for="match in home?.hotMatches || []" :key="match.id" class="card match-card" @click="goMatch(match.id)">
|
|
<div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
|
|
<div class="match-time">{{ new Date(match.startTime).toLocaleString() }}</div>
|
|
</div>
|
|
|
|
<div v-if="home && !home.hotMatches?.length" class="empty">
|
|
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
|
|
<p>暂无赛事</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.match-card { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
|
|
.match-card:active { border-color: var(--border-gold-soft); }
|
|
.match-teams { font-weight: 800; margin-bottom: 8px; font-size: 16px; }
|
|
.match-time { font-size: 13px; color: var(--text-muted); font-weight: 500; }
|
|
.empty { text-align: center; color: var(--text-muted); padding: 40px 20px; font-weight: 600; }
|
|
.empty-icon { width: 96px; height: 96px; margin-bottom: 14px; }
|
|
</style>
|