diff --git a/frontend/index.html b/frontend/index.html index 5a7946d..d758788 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,6 +4,9 @@ + + + MeetingAI - 智能会议系统 diff --git a/frontend/public/bg-small.7a2ab458.webm b/frontend/public/bg-small.7a2ab458.webm new file mode 100644 index 0000000..81c2779 Binary files /dev/null and b/frontend/public/bg-small.7a2ab458.webm differ diff --git a/frontend/src/pages/home/RightVisual.less b/frontend/src/pages/home/RightVisual.less index c681932..bd6257c 100644 --- a/frontend/src/pages/home/RightVisual.less +++ b/frontend/src/pages/home/RightVisual.less @@ -1,154 +1,23 @@ .home-right-visual { - position: relative; + position: absolute; + top: 50%; + left: 35%; // 向左侧偏移（原本是 50%） + transform: translate(-50%, -50%); width: 100%; height: 100%; - min-height: 300px; display: flex; align-items: center; justify-content: center; - perspective: 1200px; - z-index: 0; + z-index: 10; pointer-events: none; - &__glow { - position: absolute; - border-radius: 50%; - filter: blur(50px); - z-index: -1; - pointer-events: none; - animation: pulseGlow 6s ease-in-out infinite alternate; - - &--main { - width: 280px; - height: 280px; - background: rgba(103, 103, 244, 0.18); - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - &--secondary { - width: 180px; - height: 180px; - background: rgba(165, 214, 255, 0.25); - top: 15%; - right: 15%; - animation-delay: -2s; - } - } - - &__soundwave { - position: relative; - width: 380px; - height: 160px; - display: flex; - align-items: center; - justify-content: center; - gap: 4px; - z-index: 2; - - .home-right-visual__bar { - width: 5px; - height: 100%; - background: linear-gradient(180deg, rgba(165, 214, 255, 0.95) 0%, rgba(103, 103, 244, 0.95) 100%); - border-radius: 999px; - transform-origin: center; - /* The base transform uses the envelope to shape the bell curve */ - transform: scaleY(calc(0.05 + 0.1 * var(--envelope))); - animation: soundwave-bounce var(--duration) ease-in-out infinite alternate; - /* Sweep delay creates the wave-like motion */ - animation-delay: calc(-0.1s * var(--index)); - box-shadow: 0 0 12px rgba(103, 103, 244, 0.25); - will-change: transform; - } - } - - &__drop { - position: absolute; - background: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(240, 240, 255, 0.3) 100%); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.7); - box-shadow: - 0 12px 40px rgba(103, 103, 244, 0.15), - inset 0 0 20px rgba(255, 255, 255, 0.95), - inset 4px 4px 10px rgba(255, 255, 255, 0.6); - animation: floatDrop 6s ease-in-out infinite; - transform-style: preserve-3d; - overflow: hidden; - - &-inner { - position: absolute; - width: 150%; - height: 150%; - top: -25%; - left: -25%; - background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8) 0%, transparent 60%); - pointer-events: none; - transform: rotate(-45deg); - } - - &--1 { - width: 80px; - height: 80px; - top: 10%; - right: 12%; - animation-duration: 7s; - animation-name: floatDrop1; - } - - &--2 { - width: 120px; - height: 110px; - bottom: -10%; - left: -5%; - animation-duration: 9s; - animation-delay: -4s; - animation-name: floatDrop3; - background: linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(180, 180, 255, 0.25) 100%); - } - - &--3 { - width: 50px; - height: 50px; - top: -5%; - left: 35%; - animation-duration: 8s; - animation-delay: -3s; - animation-name: floatDrop5; - } + &__video { + width: 800px; + max-width: none; + height: auto; + object-fit: cover; + // 轻微的阴影可以让视频更好地融入背景 + filter: drop-shadow(0 15px 35px rgba(99, 102, 241, 0.15)); + // webm 如果带透明通道，正常显示即可，不再需要 mix-blend-mode 干扰 } } - -@keyframes soundwave-bounce { - 0% { - transform: scaleY(calc(0.05 + 0.1 * var(--envelope))); - opacity: 0.5; - } - 100% { - transform: scaleY(calc(0.1 + 0.85 * var(--envelope))); - opacity: 1; - filter: brightness(1.2); - } -} - -@keyframes pulseGlow { - 0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.5; } - 100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } -} - -@keyframes floatDrop1 { - 0%, 100% { transform: translateY(0) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } - 33% { transform: translateY(-22px) rotate(12deg); border-radius: 50% 50% 60% 40% / 50% 40% 70% 40%; } - 66% { transform: translateY(12px) rotate(-8deg); border-radius: 30% 70% 50% 50% / 30% 60% 40% 60%; } -} - -@keyframes floatDrop3 { - 0%, 100% { transform: translateY(0) scale(1); border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; } - 50% { transform: translateY(-28px) scale(1.02); border-radius: 30% 70% 50% 50% / 40% 60% 40% 60%; } -} - -@keyframes floatDrop5 { - 0%, 100% { transform: translateY(0) scale(1) rotate(0deg); border-radius: 45% 55% 65% 35% / 45% 45% 55% 55%; } - 50% { transform: translateY(20px) scale(0.95) rotate(-10deg); border-radius: 55% 45% 35% 65% / 55% 55% 45% 45%; } -} diff --git a/frontend/src/pages/home/RightVisual.tsx b/frontend/src/pages/home/RightVisual.tsx index a12be68..aabeda7 100644 --- a/frontend/src/pages/home/RightVisual.tsx +++ b/frontend/src/pages/home/RightVisual.tsx @@ -2,57 +2,16 @@ import React from "react"; import "./RightVisual.less"; export default function RightVisual() { - const BAR_COUNT = 48; - - // Calculate a Gaussian envelope for the soundwave so the center is tallest - const getEnvelope = (i: number) => { - const center = BAR_COUNT / 2; - const x = (i - center) / (center * 0.8); - // Gaussian bell curve - const envelope = Math.exp(-Math.pow(x, 2)); - return Math.max(0.05, envelope); - }; - - // Deterministic pseudo-random duration for a more organic, less rigid feel - const getDuration = (i: number) => { - return 0.9 + (Math.sin(i * 76543) * 0.5 + 0.5) * 0.6; // between 0.9s and 1.5s - }; - return (