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-20 20:53:23 +08:00
parent 7618e0c12d
commit debc584dd9
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/pages/home-page2.tsx
View File

@ -119,14 +119,14 @@ export function HomePage2() {
<div className="min-h-screen bg-[var(--background)]" ref={containerRef}> <div className="min-h-screen bg-[var(--background)]" ref={containerRef}>
<div className="flex relative" style={{height: '100vh'}}> <div className="flex relative" style={{height: '100vh'}}>
{/* 工具栏-列表形式切换 */} {/* 工具栏-列表形式切换 */}
<div className="absolute top-[8rem] z-[50] right-6 w-[8rem] flex justify-end"> <div className="absolute top-[8rem] z-[50] right-6 w-[128px] flex justify-end">
<LiquidButton className="w-[8rem] h-[3rem] text-sm" <LiquidButton className="w-[128px] h-[3rem] text-sm"
onClick={(e: React.MouseEvent) => { onClick={(e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
handleToolChange(activeTool === "stretch" ? "right" : "left"); handleToolChange(activeTool === "stretch" ? "right" : "left");
}} }}
> >
<div className="relative flex items-center justify-around gap-4 w-[8rem] h-[3rem] p-2"> <div className="relative flex items-center justify-around gap-4 w-[128px] h-[3rem] p-2">
<div <div
className={`cursor-pointer relative z-10 transition-opacity duration-300 ${activeTool === "stretch" ? "opacity-100" : "opacity-50"}`}> className={`cursor-pointer relative z-10 transition-opacity duration-300 ${activeTool === "stretch" ? "opacity-100" : "opacity-50"}`}>
<AlignHorizontalSpaceAround className="w-4 h-4 text-white" /> <AlignHorizontalSpaceAround className="w-4 h-4 text-white" />
@ -138,7 +138,7 @@ export function HomePage2() {
{/* 水滴动画 */} {/* 水滴动画 */}
<AnimatePresence> <AnimatePresence>
<motion.div <motion.div
className="absolute w-10 h-8 bg-[rgba(255,255,255,0.35)] rounded-full backdrop-blur-[2px] z-[1]" className="absolute w-[40px] h-8 bg-[rgba(255,255,255,0.35)] rounded-full backdrop-blur-[2px] z-[1]"
initial={{ x: dropPosition === "left" ? -32 : 32 }} initial={{ x: dropPosition === "left" ? -32 : 32 }}
animate={{ animate={{
x: dropPosition === "left" ? -32 : 32, x: dropPosition === "left" ? -32 : 32,
@ -186,8 +186,8 @@ export function HomePage2() {
/> />
</div> </div>
<div className="w-[8rem] h-[8rem] rounded-[50%] overflow-hidden fixed bottom-[3rem] left-[50%] -translate-x-1/2 z-50"> <div className="w-[128px] h-[128px] rounded-[50%] overflow-hidden fixed bottom-[3rem] left-[50%] -translate-x-1/2 z-50">
<LiquidButton className="w-[8rem] h-[8rem] text-lg"> <LiquidButton className="w-[128px] h-[128px] text-lg">
<div className="flex items-center justify-center gap-2" <div className="flex items-center justify-center gap-2"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();

16
components/pages/style/login.css
View File

@ -24,8 +24,8 @@
} }
.auth-container { .auth-container {
padding: 2.5rem; padding: 40px;
border-radius: 1.5rem; border-radius: 20px;
max-width: 400px; max-width: 400px;
width: 100%; width: 100%;
position: relative; position: relative;
@ -61,7 +61,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
border-radius: 1.5rem; border-radius: 20px;
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 50%,
@ -76,7 +76,7 @@
left: -1px; left: -1px;
right: -1px; right: -1px;
bottom: -1px; bottom: -1px;
border-radius: 1.5rem; border-radius: 20px;
background: linear-gradient(45deg, background: linear-gradient(45deg,
rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0) 60%); rgba(255, 255, 255, 0) 60%);
@ -417,9 +417,9 @@
.auth-container { .auth-container {
max-width: 100%; max-width: 100%;
width: calc(100% - 2rem); width: calc(100% - 40px);
margin: 0; margin: 0;
padding: 2rem 1.5rem; padding: 40px 20px;
} }
.login-logo { .login-logo {
@ -435,8 +435,8 @@
@media (max-width: 480px) { @media (max-width: 480px) {
.auth-container { .auth-container {
padding: 1.5rem 1rem; padding: 20px 10px;
border-radius: 1rem; border-radius: 10px;
} }
.login-logo { .login-logo {