style: 首页广告位优化——移除冗余描述、标题居中、轮播控件透明化

This commit is contained in:
QihuAI Design committed 2026-07-14 09:23:57 +08:00
1 parent ab54d7344c
commit 730065895a
2 files changed
+7 -9

No files matched your search

+7 -8
View File
@@ -96,9 +96,8 @@
/* 右侧广告位:min-width:0 让其严格贴合网格右轨道,右边框与顶栏"免费注册"垂直对齐、绝不外溢 */ /* 右侧广告位:min-width:0 让其严格贴合网格右轨道,右边框与顶栏"免费注册"垂直对齐、绝不外溢 */
.lp-hero-ad { display: flex; flex-direction: column; min-width: 0; } .lp-hero-ad { display: flex; flex-direction: column; min-width: 0; }
.lp-ad-head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; } .lp-ad-head { display: flex; justify-content: center; align-items: center; margin-bottom: var(--space-lg); }
.lp-ad-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-primary); } .lp-ad-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-primary); text-align: center; }
.lp-ad-sub { font-size: var(--text-sm); color: var(--color-text-tertiary); }
.lp-hero-ad .lp-carousel { width: 100%; } .lp-hero-ad .lp-carousel { width: 100%; }
.lp-hero-ad .lp-carousel-card { min-height: 340px; } .lp-hero-ad .lp-carousel-card { min-height: 340px; }
.lp-hero-ad .lp-cc-content { max-width: 62%; } .lp-hero-ad .lp-cc-content { max-width: 62%; }
@@ -136,14 +135,14 @@
.lp-arrow { .lp-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); cursor: pointer;
background: rgba(255,255,255,.85); color: var(--color-accent); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.5); color: var(--color-accent); display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-md); transition: all var(--transition-normal); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none; transition: all var(--transition-normal);
} }
.lp-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); } .lp-arrow:hover { background: rgba(255,255,255,.85); transform: translateY(-50%) scale(1.05); }
.lp-arrow-l { left: 12px; } .lp-arrow-r { right: 12px; } .lp-arrow-l { left: 12px; } .lp-arrow-r { right: 12px; }
.lp-dots { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); } .lp-dots { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.lp-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--color-border-hover); cursor: pointer; transition: all var(--transition-fast); } .lp-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(91,95,237,.28); cursor: pointer; transition: all var(--transition-fast); }
.lp-dot.on { width: 24px; border-radius: var(--radius-full); background: var(--color-accent); } .lp-dot.on { width: 24px; border-radius: var(--radius-full); background: var(--color-accent); }
/* ===== 栅格 ===== */ /* ===== 栅格 ===== */
-1
View File
@@ -234,7 +234,6 @@ const LandingPage: React.FC = () => {
{banners.length > 0 && ( {banners.length > 0 && (
<div className="lp-ad-head"> <div className="lp-ad-head">
<span className="lp-ad-title">精选推荐</span> <span className="lp-ad-title">精选推荐</span>
<span className="lp-ad-sub">热门技能广告位 · 提升展现与下载</span>
</div> </div>
)} )}
<div className="lp-carousel" onMouseEnter={() => setIsPaused(true)} onMouseLeave={() => setIsPaused(false)}> <div className="lp-carousel" onMouseEnter={() => setIsPaused(true)} onMouseLeave={() => setIsPaused(false)}>