ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(player): theme-3 全站 h5bg2 背景与首页账单 UI 优化

Browse Source
This commit is contained in:
Mars
2026-06-23 17:57:34 +08:00
parent dd7ca2f4e4
commit fee34feee8
6 changed files with 106 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
apps/player/src/views/HomeView.vue
View File

@@ -66,36 +66,37 @@ function formatKickoff(startTime: string) {
<BannerCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
<div class="hot-tabs" role="tablist" :aria-label="t('home.hot_matches')">
<button
type="button"
role="tab"
class="hot-tab"
:class="{ active: activeTab === 'hot' }"
:aria-selected="activeTab === 'hot'"
@click="activeTab = 'hot'"
>
{{ t('home.hot_tab') }}
</button>
<button
type="button"
role="tab"
class="hot-tab"
:class="{ active: activeTab === 'upcoming' }"
:aria-selected="activeTab === 'upcoming'"
@click="activeTab = 'upcoming'"
>
{{ t('home.upcoming_tab') }}
</button>
</div>
<section class="hot-panel">
<div class="hot-tabs" role="tablist" :aria-label="t('home.hot_matches')">
<button
type="button"
role="tab"
class="hot-tab"
:class="{ active: activeTab === 'hot' }"
:aria-selected="activeTab === 'hot'"
@click="activeTab = 'hot'"
>
{{ t('home.hot_tab') }}
</button>
<button
type="button"
role="tab"
class="hot-tab"
:class="{ active: activeTab === 'upcoming' }"
:aria-selected="activeTab === 'upcoming'"
@click="activeTab = 'upcoming'"
>
{{ t('home.upcoming_tab') }}
</button>
</div>
<div
v-for="(match, index) in displayedMatches"
:key="match.id"
class="match-card"
:class="{ 'match-card--live-anim': activeTab === 'hot' && index < 3 }"
@click="goMatch(match.id)"
>
<div
v-for="(match, index) in displayedMatches"
:key="match.id"
class="match-card"
:class="{ 'match-card--live-anim': activeTab === 'hot' && index < 3 }"
@click="goMatch(match.id)"
>
<div class="match-info">
<div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
<div class="match-time">{{ formatKickoff(match.startTime) }}</div>
@@ -141,10 +142,11 @@ function formatKickoff(startTime: string) {
</div>
</div>
<div v-if="!loading && !displayedMatches.length" class="empty">
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
<p>{{ emptyMessage }}</p>
</div>
<div v-if="!loading && !displayedMatches.length" class="empty">
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
<p>{{ emptyMessage }}</p>
</div>
</section>
</div>
</template>
@@ -157,10 +159,20 @@ function formatKickoff(startTime: string) {
transition: height 0.15s ease;
}
.hot-panel {
background: var(--glass-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.hot-tabs {
display: flex;
gap: 0;
margin-bottom: 12px;
margin-bottom: 0;
background: rgba(15, 32, 39, 0.55);
border-bottom: 1px solid var(--border);
}
@@ -287,6 +299,15 @@ function formatKickoff(startTime: string) {
line-height: 1.3;
}
.hot-panel .match-card {
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.match-card {
position: relative;
isolation: isolate;
@@ -294,15 +315,19 @@ function formatKickoff(startTime: string) {
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
margin-bottom: 0;
padding: 10px 12px;
min-height: 60px;
border-radius: var(--radius-lg);
border-radius: 0;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
overflow: hidden;
}
.hot-panel .match-card:last-of-type {
border-bottom: none;
}
.match-card::before {
content: '';
position: absolute;
@@ -538,6 +563,7 @@ function formatKickoff(startTime: string) {
color: var(--text-muted);
padding: 28px 16px;
font-weight: 600;
border-top: 1px solid var(--border);
}
.empty-icon {