/* style block 1 from index.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
overflow: hidden;
background: #030407;
}
body {
width: 100%;
height: 100%;
overflow: auto;
background: #030407;
}
.responsive-page {
display: block;
width: 100%;
height: 100vh;
border: 0;
}
.responsive-page--mobile {
display: none;
}
.responsive-page--pc {
display: block;
}
@media (max-width: 767px) {
.responsive-page--mobile {
display: block;
}
.responsive-page--pc {
display: none;
}
}
/* style block 2 from index.html */
:root {
--bg-deep: #030407;
--bg-surface: #090B12;
--primary-glow: #00FF66;
--secondary-glow: #7B2CBF;
--text-high: #FFFFFF;
--text-dim: #5A6578;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-deep);
font-family: system-ui, -apple-system, sans-serif;
color: var(--text-high);
}
/* 主体内容 60% 居中，大幅缩小模块间距至 24px */
.original-main {
width: 60%;
margin: 24px auto;
display: flex;
flex-direction: column;
gap: 24px;
}
/* 焦点巨幕区 */
.oblique-hero {
position: relative;
width: 100%;
height: 260px;
background: linear-gradient(115deg, #111424 40%, #030407 100%);
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: stretch;
padding: 0;
border-right: 4px solid var(--primary-glow);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}
.pc-hero-swiper,
.pc-hero-swiper .swiper-wrapper,
.pc-hero-swiper .swiper-slide {
width: 100%;
height: 100%;
}
.pc-hero-swiper .swiper-wrapper {
display: flex;
}
.pc-hero-swiper .swiper-slide {
position: relative;
flex: 0 0 100%;
overflow: hidden;
}
.pc-hero-swiper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pc-hero-swiper .hero-fallback {
position: absolute;
inset: 0;
background: linear-gradient(115deg, #111424 40%, #030407 100%);
}
.pc-hero-swiper .hero-info-panel {
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
z-index: 2;
}
.pc-hero-swiper .swiper-button-prev,
.pc-hero-swiper .swiper-button-next {
color: var(--primary-glow);
}
.hero-info-panel h1 {
font-size: 22px;
font-weight: 900;
line-height: 1.3;
margin-top: 8px;
}
/* 统一模块标题 22px，缩小底部间距 */
.clash-headline {
font-size: 22px;
font-weight: 900;
letter-spacing: -0.5px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.clash-headline::after {
content: '';
flex-grow: 1;
height: 1px;
background: linear-gradient(to right, var(--secondary-glow), transparent);
}
/* 数据列表紧凑化 */
.stagger-box-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.stagger-card {
background: var(--bg-surface);
border-radius: 12px;
padding: 14px 20px;
display: flex;
align-items: center;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.03);
}
.clash-left-heavy {
width: 50%;
font-size: 16px;
font-weight: 800;
}
.clash-vs-hub {
width: 15%;
font-size: 16px;
font-weight: 900;
font-style: italic;
color: var(--primary-glow);
text-align: center;
}
.clash-right-dim {
width: 35%;
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
text-align: right;
}
/* 正在直播矩阵 */
.console-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.console-node {
background: rgba(255, 255, 255, 0.01);
border-left: 3px solid var(--text-dim);
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100px;
}
.node-mid {
font-size: 16px;
font-weight: 700;
margin: 4px 0;
}
/* 新增：热门新闻模块（紧凑排版） */
.news-compact-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.news-compact-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: var(--bg-surface);
border-radius: 8px;
text-decoration: none;
color: inherit;
}
.news-compact-item:hover {
border-left: 2px solid var(--primary-glow);
}
.news-title {
font-size: 16px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80%;
}
.news-date {
font-size: 16px;
color: var(--text-dim);
font-family: monospace;
}
/* style block 3 from index.html */
/* --- 全局 Design Tokens 变量定义 --- */
:root {
--bg-main: #08090D;
/* 深曜黑 */
--bg-card: #12141C;
/* 夜空灰 */
--primary: #00FF66;
/* 荧光激光绿 */
--secondary: #8A2BE2;
/* 赛博电光紫 */
--text-main: #FFFFFF;
/* 高亮白 */
--text-muted: #64748B;
/* 烟灰 */
--danger: #FF3B30;
/* 动态呼吸红 */
}
/* --- 基础重置与流式断点 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
background-color: var(--bg-main);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--text-main);
padding-bottom: 90px;
/* 为底部浮动导航留空 */
overflow-x: hidden;
}
/* --- 2. Hero Banner 焦点大图轮播 --- */
.hero-section {
padding: 16px;
}
.hero-banner {
position: relative;
width: 100%;
height: 200px;
border-radius: 24px;
overflow: hidden;
background: #1a1c24;
}
.hero-swiper .swiper-wrapper {
display: flex;
width: 100%;
height: 100%;
}
.hero-swiper .swiper-slide {
position: relative;
flex: 0 0 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
.hero-banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, #08090D 0%, rgba(8, 9, 13, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
display: flex;
align-items: flex-end;
padding: 20px;
}
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
color: var(--primary);
}
.hero-title {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
border-left: 4px solid var(--primary);
padding-left: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
/* --- 公用模块标题样式 --- */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 16px 12px;
}
.section-title {
font-size: 18px;
font-weight: 800;
letter-spacing: 0.5px;
position: relative;
}
.section-more {
font-size: 12px;
color: var(--text-muted);
text-decoration: none;
letter-spacing: 1px;
}
/* --- 3. 热门直播（颠覆性横屏滑块） --- */
.swiper-container {
display: flex;
gap: 14px;
overflow-x: auto;
padding: 4px 16px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* Firefox */
}
.swiper-container::-webkit-scrollbar {
display: none;
/* Chrome/Safari */
}
.match-card-slide {
flex: 0 0 280px;
scroll-snap-align: start;
background: linear-gradient(135deg, #12141C 0%, #1E2230 100%);
border-radius: 20px;
padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.03);
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.slide-tag {
font-size: 11px;
color: var(--primary);
background: rgba(0, 255, 102, 0.1);
padding: 3px 8px;
border-radius: 20px;
display: inline-block;
margin-bottom: 12px;
font-weight: 600;
}
.slide-time {
position: absolute;
top: 16px;
right: 16px;
font-size: 12px;
color: var(--text-muted);
}
.slide-vs-box {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
}
.slide-team {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 35%;
}
.team-logo-placeholder {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: bold;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.team-name {
font-size: 13px;
font-weight: 600;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.slide-score {
font-size: 26px;
font-weight: 900;
font-family: 'Impact', sans-serif;
color: var(--text-main);
letter-spacing: 2px;
}
/* --- 4. 正在直播（高密度竞技异形榜） --- */
.live-list {
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.live-item {
background: var(--bg-card);
border-radius: 16px;
padding: 14px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(255, 255, 255, 0.02);
}
.live-left {
display: flex;
align-items: center;
gap: 10px;
width: 70%;
}
.league-badge {
font-size: 11px;
background: rgba(255, 255, 255, 0.08);
padding: 4px 6px;
border-radius: 6px;
color: var(--text-muted);
min-width: 45px;
text-align: center;
}
.teams-versus {
display: flex;
flex-direction: column;
gap: 4px;
}
.vs-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
}
.vs-row span {
color: var(--primary);
font-size: 11px;
}
.live-btn-box {
width: 30%;
display: flex;
justify-content: flex-end;
}
.action-btn {
background: var(--primary);
color: #000000;
font-size: 12px;
font-weight: 800;
padding: 8px 14px;
border: none;
border-radius: 10px;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 255, 102, 0.2);
}
.pulse-dot {
width: 6px;
height: 6px;
background: var(--danger);
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 1;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
100% {
transform: scale(0.9);
opacity: 1;
}
}
/* --- 5. 热门新闻（无框线流式排版） --- */
.news-list {
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.news-item {
display: flex;
align-items: center;
gap: 16px;
position: relative;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.news-rank {
font-size: 38px;
font-weight: 900;
font-style: italic;
font-family: 'Impact', sans-serif;
color: rgba(255, 255, 255, 0.05);
line-height: 1;
min-width: 40px;
text-align: center;
transition: 0.3s;
}
.news-item:nth-child(-n+3) .news-rank {
color: rgba(0, 255, 102, 0.15);
-webkit-text-stroke: 1px var(--primary);
}
.news-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.news-title {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-time {
font-size: 11px;
color: var(--text-muted);
}
/* --- 6. 热门专题（大图杂志感卡片） --- */
.topic-grid {
padding: 0 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.topic-card {
background: linear-gradient(180deg, rgba(30, 34, 48, 0.4) 0%, rgba(18, 20, 28, 1) 100%);
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 16px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 110px;
}
.topic-meta {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--text-muted);
}
.topic-meta span:first-child {
color: var(--secondary);
font-weight: bold;
}
.topic-title {
font-size: 13px;
font-weight: 700;
line-height: 1.4;
color: var(--text-main);
margin-top: 8px;
}
/* responsive iframe shell */
body.responsive-shell {
width: 100%;
height: 100%;
overflow: hidden;
}