qyyfw/qihuaiflow
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 首页轮播箭头默认隐藏(hover显现)、指示器圆点去边框极淡透明

Browse Source
This commit is contained in:
QihuAI Design committed 2026-07-14 10:40:52 +08:00
1 parent 730065895a
commit 6e4fcad2b9
1 file changed
+8 -5
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/front/LandingPage.css
+8 -5
View File
@@ -135,15 +135,18 @@
.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: 1px solid rgba(255,255,255,.6); cursor: pointer; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
background: rgba(255,255,255,.5); 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;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none; transition: all var(--transition-normal); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none;
opacity: 0; pointer-events: none;
transition: opacity var(--transition-normal), background var(--transition-normal), transform var(--transition-normal);
} }
.lp-arrow:hover { background: rgba(255,255,255,.85); transform: translateY(-50%) scale(1.05); } .lp-carousel:hover .lp-arrow { opacity: 1; pointer-events: auto; }
.lp-arrow:hover { background: rgba(255,255,255,.9); 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: rgba(91,95,237,.28); cursor: pointer; transition: all var(--transition-fast); } .lp-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(91,95,237,.14); 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: 22px; border-radius: var(--radius-full); background: var(--color-accent); }
/* ===== 栅格 ===== */ /* ===== 栅格 ===== */
.lp-grid { display: grid; gap: var(--space-2xl); } .lp-grid { display: grid; gap: var(--space-2xl); }