style: 首页广告位优化——移除冗余描述、标题居中、轮播控件透明化
This commit is contained in:
1 parent
ab54d7344c
commit
730065895a
2 files changed
+7
-9
No files matched your search
@@ -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); }
|
||||||
|
|
||||||
/* ===== 栅格 ===== */
|
/* ===== 栅格 ===== */
|
||||||
|
|||||||
@@ -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)}>
|
||||||
|
|||||||
Reference in new issue
Block a user