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

feat(player): ui-ux-pro-max design system upgrade for theme-2 desktop

Browse Source
This commit is contained in:
mars
2026-07-13 09:42:23 +08:00
parent 4cbc846d05
commit 3af2fe72d4
10 changed files with 370 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/player/src/views/desktop/DesktopHomeView.vue
View File

@@ -590,8 +590,10 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
.content-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 18px;
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-7);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition);
}
/* section-title 閲戠嚎 */
@@ -605,16 +607,18 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
.st-line {
width: 4px;
height: 18px;
border-radius: 2px;
background: linear-gradient(180deg, var(--primary), var(--primary-light));
box-shadow: 0 0 8px rgba(0, 102, 204, 0.35);
border-radius: var(--radius-full);
background: linear-gradient(180deg, var(--primary), var(--primary-lighter));
box-shadow: 0 0 8px rgba(0, 102, 204, 0.4), var(--glow-gold);
}
.st-text {
font-size: 15px;
font-weight: 800;
font-family: var(--font-heading);
color: var(--text);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.st-refresh {
@@ -656,15 +660,15 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
.featured-match {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px 20px;
border-radius: 12px;
gap: var(--space-5);
padding: var(--space-7) var(--space-8);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, #f8fafc 0%, var(--bg-card) 100%);
border: 1px solid var(--border-active);
box-shadow: 0 2px 12px rgba(0, 61, 107, 0.08);
margin-bottom: 14px;
box-shadow: var(--shadow-gold-lg);
margin-bottom: var(--space-5);
cursor: pointer;
transition: box-shadow 0.25s, transform 0.15s;
transition: box-shadow var(--transition-slow), transform var(--transition);
position: relative;
overflow: hidden;
}
@@ -679,8 +683,8 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
}
.featured-match:is(:hover, .featured-match--engaged) {
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(0, 61, 107, 0.15), inset 0 0 20px rgba(0, 102, 204, 0.06);
transform: translateY(-2px);
box-shadow: var(--shadow-xl), inset 0 0 24px rgba(0, 102, 204, 0.08), var(--glow-gold);
}
.featured-top {
@@ -732,6 +736,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
.featured-team-name {
font-size: 18px;
font-weight: 800;
font-family: var(--font-heading);
color: var(--text);
text-align: center;
line-height: 1.2;
@@ -745,6 +750,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
font-size: 22px;
font-weight: 900;
font-style: italic;
font-family: var(--font-heading);
color: var(--odds-accent, #F8971F);
text-shadow: 0 0 12px rgba(248, 151, 31, 0.35);
}
@@ -769,6 +775,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
.featured-market-label {
font-size: 11px;
font-weight: 700;
font-family: var(--font-heading);
color: var(--primary);
text-align: center;
letter-spacing: 0.4px;
@@ -786,16 +793,16 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
display: flex;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
min-height: 68px;
}
.match-card:is(:hover, .match-card--engaged) {
border-color: var(--border-active);
box-shadow: 0 4px 12px rgba(0, 61, 107, 0.08);
transform: translateY(-1px);
box-shadow: var(--shadow-md), var(--glow-gold);
transform: translateY(-2px);
}
.match-info-side {
@@ -978,8 +985,9 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
.side-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
box-shadow: var(--shadow-xs);
}
.side-card-header {
@@ -993,8 +1001,10 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
.side-card-title {
font-size: 13px;
font-weight: 800;
font-family: var(--font-heading);
color: var(--primary-light);
letter-spacing: 0.3px;
text-transform: uppercase;
}
.side-recommend-list {
@@ -1281,7 +1291,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
.side-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 61, 107, 0.1);
box-shadow: var(--shadow-md), var(--glow-gold);
}
/* --- 8. 鎺ㄨ崘鍒楄〃 item 宸︿晶閲戠偣鎸囩ず hover --- */