feat(player): 全站 UI 主题重构与布局优化 — 从暗金奢华风格迁移至 Pinnacle 风格蓝白专业主题
一、全局主题重构（52 文件） - 设计体系从深色/金色奢华调性全面迁移至 Pinnacle 风格的清爽专业调性 - 主色：深海蓝 #003D6B，辅色：橙色 #F8971F / #E8870A（赔率强调色） - 背景从纯黑/深灰改为白色/浅灰 (#F5F7FA, #E8EDF2) - 更新 CSS 变量设计令牌体系：--primary, --border, --text-muted, --bg-body, --bg-hover, --radius-sm 等 - styles.css 全量重写，所有组件 scoped CSS 同步适配 二、紧凑布局优化 - 首页：BannerCarousel 轮播高度缩减 (clamp 148→120px)，MatchBetCard 内边距/间距/字号全面收紧 - 首页：赛事卡片 padding 14px→10px，队旗尺寸 72×48→56×38，VS 区域缩小 - 个人中心：钱包横幅宽高比 2/1→1.75/1，设置单元格 min-height 48→42px - 钱包页：交易行 padding/字号收紧，金额字号 15→14px - MainLayout：顶栏高度 50→48px，底部导航间距微调 三、对比度与可读性增强 - 赛事详情/投注页背景从透明加深至 #E8EDF2 - 所有卡片边框从 #E5E7EB 加深至 #CBD5E1，阴影强度提升 - 盘口选择面板背景 #F5F7FA→#EDF0F4，增加 border-top 分隔线 - 赔率颜色从 #F8971F 加深至 #E8870A，选中态 border-width 加粗至 2px - 标签字号增大并加粗 (font-weight: 600)，颜色从 #6B7280 加深至 #4B5563 四、首页快捷入口 & 个人中心网格布局 - 首页新增 4 宫格快捷入口（投注/充值/账单/活动），彩色图标区分功能 - 个人中心重构为「4 宫格快捷操作 + 列表」结构：钱包/充值/返水/记录 - 移除原个人中心金色入口列表项，精简设置列表为修改资料/投注规则/语言 五、顶部导航栏重设计 - Logo 从 img 标签替换为内联 SVG 纯文字：THE(灰) + BET(深蓝) + 365(橙) - 客服按钮改为纯图标圆形按钮 (32×32px)，增加竖线分隔符 - Chip 高度 34→32px，间距 8→6px - 底部导航激活态指示条加粗至 2.5px，左右缩进从 22% 调至 18% 六、SVG Favicon - 新增纯路径 SVG favicon（无 <text> 元素，确保浏览器 favicon 沙箱兼容） - 深蓝圆角方块 + 白色 "B" 字母路径 + 橙色圆点 + 白色 "365" 数字路径 - index.html 更新 favicon 引用为 /favicon.svg 🤖 Generated with [Qoder][https://qoder.com]
This commit is contained in:
@@ -49,6 +49,33 @@ function formatKickoff(startTime: string) {
|
||||
|
||||
<BannerCarousel :banners="banners" />
|
||||
|
||||
<div class="quick-entries">
|
||||
<button type="button" class="qe-item" @click="router.push('/bet')">
|
||||
<span class="qe-icon qe-icon--bet">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 000 20 14.5 14.5 0 000-20M2 12h20"/></svg>
|
||||
</span>
|
||||
<span class="qe-label">{{ t('nav.bet') }}</span>
|
||||
</button>
|
||||
<button type="button" class="qe-item" @click="router.push('/wallet/recharge')">
|
||||
<span class="qe-icon qe-icon--recharge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M12 15h4"/></svg>
|
||||
</span>
|
||||
<span class="qe-label">{{ t('recharge.title') }}</span>
|
||||
</button>
|
||||
<button type="button" class="qe-item" @click="router.push('/wallet/detail')">
|
||||
<span class="qe-icon qe-icon--bill">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><path d="M9 5H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V9"/><path d="M9 5a2 2 0 012-2h2a2 2 0 012 2v0M9 12h6M9 16h4"/></svg>
|
||||
</span>
|
||||
<span class="qe-label">{{ t('wallet.view_all') }}</span>
|
||||
</button>
|
||||
<button type="button" class="qe-item" @click="router.push('/bet')">
|
||||
<span class="qe-icon qe-icon--promo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||||
</span>
|
||||
<span class="qe-label">{{ t('home.hot_matches') || '热门赛事' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">{{ t('home.hot_matches') }}</h2>
|
||||
<div
|
||||
v-for="(match, index) in hotMatches"
|
||||
@@ -118,22 +145,100 @@ function formatKickoff(startTime: string) {
|
||||
transition: height 0.15s ease;
|
||||
}
|
||||
|
||||
.quick-entries {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.qe-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px 4px 10px;
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.qe-item:active {
|
||||
transform: scale(0.96);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.qe-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qe-icon--bet {
|
||||
background: rgba(0, 61, 107, 0.1);
|
||||
color: #003D6B;
|
||||
}
|
||||
|
||||
.qe-icon--recharge {
|
||||
background: rgba(5, 150, 105, 0.1);
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.qe-icon--bill {
|
||||
background: rgba(248, 151, 31, 0.1);
|
||||
color: #E8870A;
|
||||
}
|
||||
|
||||
.qe-icon--promo {
|
||||
background: rgba(220, 38, 38, 0.08);
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.qe-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #1A1A2E;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
margin: 0 0 8px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #003D6B;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.match-card {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 14px 16px;
|
||||
min-height: 72px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: none;
|
||||
background: var(--bg-card);
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
padding: 10px 12px;
|
||||
min-height: 60px;
|
||||
border: 1px solid #E5E7EB;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
background: #FFFFFF;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -141,15 +246,14 @@ function formatKickoff(startTime: string) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: v-bind(matchCardBg) center / 100% 100% no-repeat;
|
||||
opacity: 0.25;
|
||||
background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 60%);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.match-card:active {
|
||||
opacity: 0.92;
|
||||
transform: scale(0.995);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.match-info,
|
||||
@@ -164,15 +268,16 @@ function formatKickoff(startTime: string) {
|
||||
}
|
||||
|
||||
.match-teams {
|
||||
font-weight: 800;
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
color: #1A1A2E;
|
||||
}
|
||||
|
||||
.match-time {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -180,15 +285,15 @@ function formatKickoff(startTime: string) {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 3px;
|
||||
max-width: 46%;
|
||||
}
|
||||
|
||||
.vs-arena {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 64px;
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -209,7 +314,7 @@ function formatKickoff(startTime: string) {
|
||||
stroke-width: 2.2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
|
||||
filter: drop-shadow(0 0 4px rgba(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -234,11 +339,11 @@ function formatKickoff(startTime: string) {
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(94, 184, 255, 0) 0%,
|
||||
rgba(184, 236, 255, 0.95) 28%,
|
||||
#fff 50%,
|
||||
rgba(255, 208, 128, 0.95) 72%,
|
||||
rgba(255, 144, 64, 0) 100%
|
||||
rgba(0, 91, 159, 0) 0%,
|
||||
rgba(0, 102, 204, 0.7) 28%,
|
||||
#0066CC 50%,
|
||||
rgba(0, 91, 159, 0.7) 72%,
|
||||
rgba(0, 61, 107, 0) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
filter: blur(0.4px);
|
||||
@@ -252,10 +357,10 @@ function formatKickoff(startTime: string) {
|
||||
.vs-img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 48px;
|
||||
width: 40px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
|
||||
filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
|
||||
}
|
||||
|
||||
.match-card--live-anim .vs-img {
|
||||
@@ -343,21 +448,21 @@ function formatKickoff(startTime: string) {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.82;
|
||||
filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
|
||||
filter: drop-shadow(0 0 2px rgba(0, 61, 107, 0.2));
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
filter:
|
||||
drop-shadow(0 0 3px rgba(255, 230, 140, 0.7))
|
||||
drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
|
||||
drop-shadow(0 0 3px rgba(0, 102, 204, 0.5))
|
||||
drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.vs-img {
|
||||
animation: none;
|
||||
filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
|
||||
filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
|
||||
}
|
||||
|
||||
.hz-path,
|
||||
@@ -369,14 +474,14 @@ function formatKickoff(startTime: string) {
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 40px 20px;
|
||||
color: #6B7280;
|
||||
padding: 28px 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin-bottom: 14px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user