diff --git a/packages/form/src/components/LoginForm/demos/login-form-page.tsx b/packages/form/src/components/LoginForm/demos/login-form-page.tsx index 9fbb72c91e35..e95e599d6f28 100644 --- a/packages/form/src/components/LoginForm/demos/login-form-page.tsx +++ b/packages/form/src/components/LoginForm/demos/login-form-page.tsx @@ -37,6 +37,7 @@ export default () => { = { * @example backgroundImageUrl="xxx.svg" */ backgroundImageUrl?: string; + /** + * @name 登录页面的背景视频,可以用它来设置一个背景,优先级高于 backgroundImageUrl + * + * @example backgroundImageUrl="xxx.svg" + */ + backgroundVideoUrl?: string; children?: React.ReactNode | React.ReactNode[]; containerStyle?: React.CSSProperties; @@ -73,6 +79,7 @@ export function LoginFormPage>( style, activityConfig = {}, backgroundImageUrl, + backgroundVideoUrl, title, subTitle, actions, @@ -127,9 +134,38 @@ export function LoginFormPage>( className={classNames(baseClassName, hashId)} style={{ ...style, + position: 'relative', backgroundImage: `url("${backgroundImageUrl}")`, }} > + {backgroundVideoUrl ? ( +
+
+ ) : null}
{activityConfig && (
= (token) => { '&-notice': { display: 'flex', flex: '1', + zIndex: 99, alignItems: 'flex-end', '&-activity': { marginBlock: 24, @@ -35,6 +36,7 @@ const genLoginFormStyle: GenerateStyle = (token) => { '&-left': { display: 'flex', flex: '1', + zIndex: 99, flexDirection: 'column', maxWidth: '550px', paddingInline: 0, @@ -49,7 +51,7 @@ const genLoginFormStyle: GenerateStyle = (token) => { backgroundSize: '100%', backgroundPosition: 'top', backdropFilter: 'blur(10px)', - backgroundColor: setAlpha(token.colorBgContainer, 0.6), + backgroundColor: setAlpha(token.colorBgContainer, 0.8), backgroundImage: 'radial-gradient(circle at 93% 1e+02%, rgba(22,119,255,0.17) 0%, rgba(255,255,255,0.05) 23%, rgba(255,255,255,0.03) 87%, rgba(22,119,255,0.12) 109%)', padding: 32, diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap index 299fd5c7c50d..cd0437e79a22 100644 --- a/tests/form/__snapshots__/demo.test.ts.snap +++ b/tests/form/__snapshots__/demo.test.ts.snap @@ -16255,8 +16255,19 @@ exports[`form demos > 📸 renders ./packages/form/src/components/LoginForm/demo >