refactor: 优化首页布局和样式
- 更新 `RightVisual.less` 和 `index.less`，调整响应式布局和样式 - 改进背景视觉元素的自适应性和动画效果 - 调整颜色和字体以提升UI/UX体验dev_na
chenhao
parent
3cd1c48bce
commit
ff47c34349
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue