diff --git a/frontend/src/pages/front/LandingPage.css b/frontend/src/pages/front/LandingPage.css index f1c3590..45a72cd 100644 --- a/frontend/src/pages/front/LandingPage.css +++ b/frontend/src/pages/front/LandingPage.css @@ -135,15 +135,18 @@ .lp-arrow { 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; - 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-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.on { width: 24px; border-radius: var(--radius-full); background: var(--color-accent); } +.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: 22px; border-radius: var(--radius-full); background: var(--color-accent); } /* ===== 栅格 ===== */ .lp-grid { display: grid; gap: var(--space-2xl); }