diff --git a/frontend/src/pages/home/RightVisual.less b/frontend/src/pages/home/RightVisual.less index bd6257c..11a6265 100644 --- a/frontend/src/pages/home/RightVisual.less +++ b/frontend/src/pages/home/RightVisual.less @@ -1,9 +1,9 @@ .home-right-visual { position: absolute; top: 50%; - left: 35%; // 向左侧偏移（原本是 50%） + left: clamp(40%, 60vw, 65%); // 自适应向左偏移，屏幕越小越靠左居中 transform: translate(-50%, -50%); - width: 100%; + width: clamp(600px, 80vw, 1100px); // 响应式宽度，跟随浏览器大小缩放 height: 100%; display: flex; align-items: center; @@ -12,12 +12,15 @@ pointer-events: none; &__video { - width: 800px; - max-width: none; + width: 100%; // 充满自适应容器 height: auto; object-fit: cover; - // 轻微的阴影可以让视频更好地融入背景 - filter: drop-shadow(0 15px 35px rgba(99, 102, 241, 0.15)); - // webm 如果带透明通道，正常显示即可，不再需要 mix-blend-mode 干扰 + // 核心 1：正片叠底模式，将视频自带的白色背景直接变为透明，彻底消除白色色块 + mix-blend-mode: multiply; + // 核心 2：径向渐变遮罩，将视频边缘柔和过渡到透明，杜绝任何直线的边缘切割感 + -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); + mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); + // 轻微的阴影 + filter: drop-shadow(0 10px 20px rgba(99, 102, 241, 0.1)); } } diff --git a/frontend/src/pages/home/index.less b/frontend/src/pages/home/index.less index 873e925..695b029 100644 --- a/frontend/src/pages/home/index.less +++ b/frontend/src/pages/home/index.less @@ -1,26 +1,27 @@ @home-primary: var(--app-primary-color, #6366f1); -@home-text-main: #1f2937; -@home-text-gray: #6b7280; -@home-bg: #f9fafb; +@home-text-main: #0f172a; // ui-ux-pro-max slate-900 +@home-text-gray: #475569; // ui-ux-pro-max slate-600 +@home-bg: #f8fafc; // ui-ux-pro-max slate-50 .home-container { position: relative; - min-height: calc(100vh - 160px); // Account for header and footer + min-height: calc(100vh - 160px); padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 60px); - background: linear-gradient(135deg, #ffffff 0%, #f4f6fa 100%); + background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); color: @home-text-main; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - overflow: hidden; // Prevent the background visual from causing scroll - margin: -24px; // Offset typical parent padding + overflow-x: hidden; // 允许垂直滚动 + margin: -24px; z-index: 1; + display: flex; + flex-direction: column; - // Background Visual (The massive glowing sphere) .home-bg-visual { position: absolute; top: 0; - right: -10%; - width: 60vw; - height: 100%; + left: 0; + right: 0; + bottom: 0; pointer-events: none; z-index: -1; overflow: hidden; @@ -29,16 +30,15 @@ .home-bg-sphere { position: absolute; top: 50%; - left: 50%; + left: clamp(50%, 70vw, 80%); transform: translate(-50%, -50%); - width: 800px; - height: 800px; + width: clamp(500px, 70vw, 900px); + height: clamp(500px, 70vw, 900px); border-radius: 50%; - background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(220, 230, 255, 0.4) 40%, transparent 70%); + background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(220, 230, 255, 0.4) 40%, transparent 70%); box-shadow: inset 0 0 100px rgba(255,255,255,0.5); filter: blur(20px); - // Inner subtle glow/wave illusion &::after { content: ''; position: absolute; @@ -53,40 +53,38 @@ } } - // Wrapper to keep content contained and above background .home-content-wrapper { position: relative; z-index: 2; max-width: 1400px; + width: 100%; margin: 0 auto; - height: 100%; + flex: 1; // 占满剩余高度 display: flex; flex-direction: column; justify-content: flex-start; } - // Hero Section .home-hero { - margin-bottom: 48px; - padding-top: 20px; + margin-bottom: 56px; + padding-top: 32px; } .home-title { font-size: clamp(40px, 5vw, 64px) !important; font-weight: 800 !important; - margin-bottom: 48px !important; + margin-bottom: 56px !important; color: @home-text-main !important; - letter-spacing: -0.01em; + letter-spacing: -0.02em; // Tighter tracking .home-title-accent { - background: linear-gradient(90deg, #6366f1, #8b5cf6, #3b82f6); + background: linear-gradient(90deg, #4f46e5, #7c3aed, #2563eb); // Deeper, more elegant gradient -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } } - // Quick Actions Horizontal Layout .home-quick-actions { display: flex; gap: 64px; @@ -102,14 +100,21 @@ flex-direction: column; align-items: flex-start; cursor: pointer; - transition: transform 0.3s ease; max-width: 240px; &:hover { - transform: translateY(-4px); - .home-action-icon-wrapper { - transform: scale(1.05); + transform: translateY(-6px); + } + .home-action-icon { + box-shadow: + 0 10px 25px -5px rgba(0, 0, 0, 0.1), + 0 8px 10px -6px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255,255,255,1); + } + .home-action-icon-glow { + opacity: 0.8; + transform: translateY(14px) scale(0.9); } .home-action-title { color: @home-primary !important; @@ -117,21 +122,21 @@ } &--violet { - --action-color: #8b5cf6; - --action-bg: rgba(139, 92, 246, 0.1); + --action-color: #7c3aed; + --action-bg: rgba(124, 58, 237, 0.15); } &--cyan { - --action-color: #06b6d4; - --action-bg: rgba(6, 182, 212, 0.1); + --action-color: #0284c7; + --action-bg: rgba(2, 132, 199, 0.15); } .home-action-icon-wrapper { position: relative; - width: 72px; - height: 72px; - margin-bottom: 20px; - transition: transform 0.3s ease; + width: 64px; + height: 64px; + margin-bottom: 24px; + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); // Springy bounce } .home-action-icon { @@ -142,24 +147,32 @@ display: flex; align-items: center; justify-content: center; - font-size: 32px; + font-size: 28px; color: var(--action-color); - background: #ffffff; + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: 20px; - box-shadow: 0 4px 20px rgba(0,0,0,0.05); + border: 1px solid rgba(255, 255, 255, 0.8); + // Apple-like nested shadow + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.05), + 0 2px 4px -2px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255,255,255,1); + transition: box-shadow 0.4s ease; } .home-action-icon-glow { position: absolute; top: 50%; left: 50%; - transform: translate(-50%, -50%); - width: 120%; - height: 120%; + transform: translate(-50%, -50%) translateY(8px) scale(0.8); + width: 100%; + height: 100%; background: var(--action-bg); border-radius: 50%; - filter: blur(12px); + filter: blur(14px); z-index: 1; + opacity: 0.5; + transition: all 0.4s ease; } .home-action-title { @@ -179,13 +192,12 @@ .home-action-line { font-size: 14px; color: @home-text-gray; - line-height: 1.5; + line-height: 1.6; } } - // Recent Section (Horizontal Cards) .home-recent-section { - margin-top: auto; // Push to bottom if viewport is tall + margin-top: auto; } .home-section-header { @@ -203,7 +215,7 @@ } .home-view-all { - display: none; // Hidden in the reference design, but keeping in DOM + display: none; } .home-recent-grid { @@ -221,21 +233,32 @@ .home-recent-card { display: flex; - background: #ffffff; - border-radius: 12px; - padding: 12px; + background: rgba(255, 255, 255, 0.7); // Glassmorphism base + backdrop-filter: blur(20px); + border-radius: 16px; + padding: 16px; cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); - border: 1px solid transparent; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + // Sophisticated inner and outer shadows + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.02), + 0 2px 4px -2px rgba(0, 0, 0, 0.02), + inset 0 1px 0 rgba(255, 255, 255, 0.6); + border: 1px solid rgba(255, 255, 255, 0.8); &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); - border-color: rgba(99, 102, 241, 0.2); + transform: translateY(-4px); + background: rgba(255, 255, 255, 0.95); + border-color: rgba(99, 102, 241, 0.15); + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, 0.05), + 0 8px 10px -6px rgba(0, 0, 0, 0.01), + inset 0 1px 0 rgba(255, 255, 255, 0.8); .home-recent-card-action { color: @home-primary; + transform: translateX(0); + opacity: 1; } } @@ -243,17 +266,19 @@ width: 100px; height: 72px; background: linear-gradient(135deg, #e0e7ff 0%, #dbeafe 100%); - border-radius: 8px; + border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 16px; flex-shrink: 0; + border: 1px solid rgba(255, 255, 255, 0.5); .home-recent-card-play-icon { font-size: 24px; color: #fff; - opacity: 0.8; + opacity: 0.9; + filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); } } @@ -262,13 +287,13 @@ flex-direction: column; justify-content: center; flex: 1; - min-width: 0; // Prevent text overflow pushing flex item + min-width: 0; } .home-recent-card-title { font-size: 15px !important; font-weight: 600 !important; - margin-bottom: 12px !important; + margin-bottom: 8px !important; color: @home-text-main !important; white-space: nowrap; overflow: hidden; @@ -279,24 +304,27 @@ display: flex; justify-content: space-between; align-items: center; - font-size: 12px; + font-size: 13px; } .home-recent-card-duration { color: @home-text-gray; + font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; + font-size: 12px; } .home-recent-card-action { - color: transparent; // Hidden until hover or distinct blue - color: #3b82f6; // Default to blue + color: transparent; font-weight: 500; - transition: color 0.3s ease; + transition: all 0.3s ease; + transform: translateX(-4px); + opacity: 0; } } .home-recent-skeleton { background: #ffffff; - border-radius: 12px; + border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } @@ -307,9 +335,8 @@ } } -// Fade in animation .home-container > * { - animation: homeFadeUp 0.5s ease-out both; + animation: homeFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .home-bg-visual { animation-delay: 0s; } .home-content-wrapper { animation-delay: 0.1s; } @@ -317,7 +344,7 @@ @keyframes homeFadeUp { from { opacity: 0; - transform: translateY(10px); + transform: translateY(20px); } to { opacity: 1;