xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

工作流布局自适应

Browse Source
This commit is contained in:
北枳 2025-07-03 06:12:07 +08:00
parent 96a319240d
commit aa5be1d5ff
2 changed files with 124 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/common/EmptyStateAnimation.tsx
View File

@ -54,7 +54,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
}, {
y: 0,
opacity: 1,
duration: 0.5,
duration: 0.3,
ease: "power2.out"
})
.fromTo(inputContainerRef.current, {
@ -63,7 +63,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
}, {
scale: 1,
opacity: 1,
duration: 0.3,
duration: 0.2,
ease: "back.out(1.7)"
}, "-=0.3");
@ -74,7 +74,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
opacity: 1,
x: -150,
y: 0,
duration: 0.5,
duration: 0.3,
ease: "power2.out"
},
"+=0.5"
@ -84,7 +84,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
mainTl.to(mouseRef.current, {
x: 0,
y: 0,
duration: 0.3,
duration: 0.2,
ease: "power2.inOut"
});
@ -106,25 +106,25 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
0 0 0 1px rgba(59, 130, 246, 0.6)
`,
borderColor: 'rgba(79, 70, 229, 0.8)',
duration: 0.2,
duration: 0.1,
ease: "back.out(1.7)"
}, "+=0.2");
// 5. 显示按钮
mainTl.fromTo(buttonRef.current,
{ scale: 0, opacity: 0 },
{ scale: 1, opacity: 1, duration: 0.2, ease: "back.out(1.7)" },
{ scale: 1, opacity: 1, duration: 0.1, ease: "back.out(1.7)" },
"+=0.3"
);
// 隐藏鼠标指针
mainTl.to(mouseRef.current, {
opacity: 0,
duration: 0.2
duration: 0.1
}, "+=0.2");
// 6. 打字动画
const typingDuration = demoText.length * 0.03;
const typingDuration = demoText.length * 0.01;
let currentChar = 0;
mainTl.to({}, {
@ -143,7 +143,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
// 7. 隐藏光标
mainTl.to(cursorRef.current, {
opacity: 0,
duration: 0.2
duration: 0.1
}, "+=0.2");
// 重新显示鼠标指针并移动到按钮
@ -151,7 +151,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
{ opacity: 0, x: 0, y: 0 },
{
opacity: 1,
duration: 0.2,
duration: 0.1,
ease: "power2.out"
},
"-=0.3"
@ -161,7 +161,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
mainTl.to(mouseRef.current, {
x: 20,
y: 10,
duration: 0.3,
duration: 0.1,
ease: "power2.inOut"
}, "+=0.5");
@ -181,7 +181,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
0 16px 32px rgba(0,0,0,0.1),
0 0 0 1px rgba(255,255,255,0.1)
`,
duration: 0.2,
duration: 0.1,
ease: "power2.out"
}, "+=0.2");
@ -213,7 +213,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
mainTl.to(containerRef.current, {
opacity: 0,
y: -50,
duration: 0.5,
duration: 0.3,
ease: "power2.in",
onComplete: () => {
onComplete();
@ -245,7 +245,7 @@ const AnimatedText = ({ text, onComplete, shouldStart }: { text: string; onCompl
ref={inputRef}
className="relative w-[600px] h-[60px] bg-gradient-to-br from-white/12 to-white/4 backdrop-blur-md rounded-lg px-4 py-3 flex items-center transition-all duration-300"
style={{
background: 'rgba(233,231,231,0.9)',
background: 'rgba(233,231,231,0.7)',
boxShadow: `
inset 0 2px 0 rgba(233,231,231,0.25),
inset 0 -2px 0 rgba(0,0,0,0.15),

118
components/pages/style/work-flow.css
View File

@ -5,10 +5,103 @@
flex-direction: column;
width: 100%;
max-width: 1200px;
height: fit-content;
height: calc(100vh - 120px);
max-height: 800px;
min-height: 600px;
display: flex;
overflow: hidden;
}
/* 小屏幕适配 */
@media (max-width: 768px) {
.container-H2sRZG {
padding-inline: 12px;
max-width: 100%;
height: calc(100vh - 80px);
min-height: 500px;
}
.splashContainer-otuV_A {
gap: 12px;
}
.media-Ocdu1O {
gap: 8px;
}
.videoContainer-qteKNi {
min-height: 200px;
}
.imageGrid-ymZV9z {
flex-shrink: 0;
height: 110px;
gap: 8px;
display: flex;
overflow-x: auto;
}
.title-JtMejk {
font-size: 1.1rem;
line-height: 28px;
}
.subtitle-had8uE {
font-size: 13px;
line-height: 18px;
}
.info-UUGkPJ {
gap: 8px;
}
}
/* 超小屏幕适配 (手机竖屏) */
@media (max-width: 480px) {
.container-H2sRZG {
padding-inline: 8px;
height: calc(100vh - 60px);
min-height: 450px;
}
.splashContainer-otuV_A {
gap: 8px;
}
.videoContainer-qteKNi {
min-height: 160px;
}
.title-JtMejk {
font-size: 1rem;
line-height: 24px;
}
.subtitle-had8uE {
font-size: 12px;
line-height: 16px;
}
.imageGrid-ymZV9z {
height: 90px;
gap: 6px;
}
.info-UUGkPJ {
gap: 6px;
}
}
/* 默认小屏幕布局 */
.splashContainer-otuV_A {
box-sizing: border-box;
flex-direction: column;
gap: 16px;
height: 100%;
display: flex;
min-height: 0;
}
/* 大屏幕布局 */
@media (width >= 1024px) {
.splashContainer-otuV_A {
box-sizing: border-box;
@ -21,6 +114,7 @@
.content-vPGYx8 {
box-sizing: border-box;
position: relative;
flex-shrink: 0;
}
.info-UUGkPJ {
box-sizing: border-box;
@ -53,15 +147,15 @@
flex-direction: column;
gap: 12px;
height: 100%;
display: flex
;
flex: 1;
display: flex;
overflow: hidden;
min-height: 0;
}
.videoContainer-qteKNi {
/* flex: 3; */
flex: 1;
min-height: 0;
display: flex
;
display: flex;
position: relative;
}
.heroVideo-FIzuK1 {
@ -112,15 +206,23 @@
bottom: 12px;
right: 12px;
}
.imageGrid-ymZV9z {
flex-shrink: 0;
height: 140px;
gap: 12px;
display: flex;
overflow-x: auto;
}
@media (height >= 880px) {
.imageGrid-ymZV9z {
flex: 1;
gap: 12px;
height: auto;
min-height: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(25%, 1fr);
/* overflow-x: auto; */
overflow-x: unset;
}
}
.image-x5Y2Sg {