diff --git a/react-ui/src/components/RightContent/AvatarDropdown.tsx b/react-ui/src/components/RightContent/AvatarDropdown.tsx index 9f8c1ecd..3ee4c156 100644 --- a/react-ui/src/components/RightContent/AvatarDropdown.tsx +++ b/react-ui/src/components/RightContent/AvatarDropdown.tsx @@ -74,7 +74,7 @@ const AvatarDropdown: React.FC = ({ menu, isHome = false * 退出登录,并且将当前的 url 保存 */ const loginOut = async () => { - const { origin } = location; + // const { origin } = location; const [res] = await to(getLabelStudioUrl()); if (res && res.data) { oauthLogout(`${res.data}/oauth/logout`); @@ -88,11 +88,11 @@ const AvatarDropdown: React.FC = ({ menu, isHome = false if (clientInfo) { const { logoutUri } = clientInfo; location.replace(logoutUri); - if (isHome) { - setTimeout(() => { - location.replace(origin); - }, 1); - } + // if (isHome) { + // setTimeout(() => { + // location.replace(origin); + // }, 1); + // } } else { if (isHome) { location.reload(); diff --git a/react-ui/src/pages/Home/components/Intro/index.less b/react-ui/src/pages/Home/components/Intro/index.less index 0318d174..6adf597c 100644 --- a/react-ui/src/pages/Home/components/Intro/index.less +++ b/react-ui/src/pages/Home/components/Intro/index.less @@ -7,6 +7,9 @@ height: @home-info-height; overflow: hidden; background-color: transparent; + background-repeat: no-repeat; + background-position: left top; + background-size: 100% 100%; &__content { position: relative; @@ -15,7 +18,7 @@ flex-direction: column; align-items: center; padding: 1.25rem @home-padding-x 0; - background-image: url(@/assets/img/home/header-bg.png); + // background-image: url(@/assets/img/home/header-bg.png); background-repeat: no-repeat; background-position: left top; background-size: 100% 100%; diff --git a/react-ui/src/pages/Home/components/Intro/index.tsx b/react-ui/src/pages/Home/components/Intro/index.tsx index 2f0b51bd..0d654905 100644 --- a/react-ui/src/pages/Home/components/Intro/index.tsx +++ b/react-ui/src/pages/Home/components/Intro/index.tsx @@ -1,11 +1,23 @@ +import miniHeaderImage from '@/assets/img/home/header-bg-mini.png'; +import headerImage from '@/assets/img/home/header-bg.png'; import { convertRemToPx } from '@/utils'; import { useNavigate } from '@umijs/max'; -import { motion, useMotionTemplate, useScroll, useSpring, useTransform } from 'motion/react'; +import { + motion, + useMotionTemplate, + useMotionValueEvent, + useScroll, + useSpring, + useTransform, +} from 'motion/react'; +import { useState } from 'react'; import NavBar from '../NavBar'; import StatisticsBlock from '../Statistics'; import styles from './index.less'; function IntroBlock() { + const [backgroundImage1, setBackgroundImage1] = useState(undefined); + const [backgroundImage2, setBackgroundImage2] = useState(headerImage); const navigate = useNavigate(); const { scrollY } = useScroll(); const springValue = useSpring(scrollY, { @@ -15,10 +27,8 @@ function IntroBlock() { }); const initialHeight = convertRemToPx(35); - console.log(initialHeight); - - const height = useTransform(() => `max(calc(35rem - ${springValue.get()}px), 5rem)`); - // const left = useTransform(() => `min(${springValue.get()}px, 16.25rem)`); + const minHeight = convertRemToPx(4.7); + const height = useTransform(() => `max(calc(35rem - ${springValue.get()}px), 4.7rem)`); const left = useTransform(springValue, [0, initialHeight], [0.0, 16.25]); const leftRem = useMotionTemplate`${left}rem`; const radius = useTransform(springValue, [0, initialHeight], [0.0, 2.5]); @@ -26,6 +36,10 @@ function IntroBlock() { const top = useTransform(springValue, [0, initialHeight], [0, 10]); const paddingX = useTransform(springValue, [0, initialHeight], [16.25, 10]); const paddingXRem = useMotionTemplate`1.25rem ${paddingX}rem 0`; + useMotionValueEvent(scrollY, 'change', (value) => { + setBackgroundImage1(value > initialHeight - minHeight ? miniHeaderImage : undefined); + setBackgroundImage2(value > initialHeight - minHeight ? undefined : headerImage); + }); return ( - +
智能材料科研平台
diff --git a/react-ui/src/pages/Home/components/NavBar/index.less b/react-ui/src/pages/Home/components/NavBar/index.less index a59aff1e..6641b46a 100644 --- a/react-ui/src/pages/Home/components/NavBar/index.less +++ b/react-ui/src/pages/Home/components/NavBar/index.less @@ -16,6 +16,7 @@ margin-right: 6.625rem; font-size: 1.375rem; font-family: WenYiHei; + line-height: 2.2rem; } &__menu-item { @@ -38,6 +39,8 @@ height: 2.15rem; .ant-avatar { + width: 1.875rem; + height: 1.875rem; margin-right: 0 !important; } }