diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index 9747a19..c161ddb 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.scss @@ -116,6 +116,15 @@ $font-secondary-color: #9E9E9E; } #fit-fullscreen { - width: 100vw; + position: relative; + width: 100%; height: 100vh; +} + +#fit-center { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/src/assets/css/header.scss b/src/assets/css/header.scss index 012474f..6d5c914 100644 --- a/src/assets/css/header.scss +++ b/src/assets/css/header.scss @@ -86,7 +86,6 @@ transform: translateY(0); } 100% { - display: none; transform: translateY(-100%); } } diff --git a/src/assets/css/home.scss b/src/assets/css/home.scss index e69de29..5397f58 100644 --- a/src/assets/css/home.scss +++ b/src/assets/css/home.scss @@ -0,0 +1,44 @@ +@use "mixins" as mixins; + +.center-box { + display: flex; + flex-direction: column; +} + +.big-logo { + font: { + size: 5em; + weight: bold; + }; + color: #666; +} + +.slogan { + font: { + size: 1.3em; + style: italic; + }; + color: #666; +} + +.scroll-to-down { + position: absolute; + bottom: 20px; + animation: 1.5s infinite; + @include mixins.unique-keyframes { + 0%, + 100% { + -ms-filter: none; + filter: none; + opacity: 1; + transform: translateY(10px); + } + + 50% { + -ms-filter: alpha(opacity=40); + filter: alpha(opacity=40); + opacity: .4; + transform: translateY(-10px); + } + } +} \ No newline at end of file diff --git a/src/assets/svg/down.svg b/src/assets/svg/down.svg new file mode 100644 index 0000000..872d226 --- /dev/null +++ b/src/assets/svg/down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/FitCenter.tsx b/src/components/FitCenter.tsx new file mode 100644 index 0000000..15bee2c --- /dev/null +++ b/src/components/FitCenter.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const FitCenter: React.FC = (props: PropsWithChildren) => { + return ( + <> +
{props.children}
+ + ) +} + +export default FitCenter diff --git a/src/components/FitFullScreen.tsx b/src/components/FitFullScreen.tsx index fab7cc3..5a6d7bb 100644 --- a/src/components/FitFullScreen.tsx +++ b/src/components/FitFullScreen.tsx @@ -1,9 +1,17 @@ import React from 'react' -const FitFullScreen: React.FC = (props: PropsWithChildren) => { +const FitFullScreen: React.FC = (props: FitFullscreenProps) => { return ( <> -
{props.children}
+
+ {props.children} +
) } diff --git a/src/components/Home.tsx b/src/components/Home.tsx index e73e06a..1eeda90 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -1,22 +1,49 @@ import React from 'react' import '@/assets/css/home.scss' -import { MainFrameworkContext } from '@/pages/MainFramework' +import FitFullScreen from '@/components/FitFullScreen.tsx' +import FitCenter from '@/components/FitCenter.tsx' +import Icon from '@ant-design/icons' const Home: React.FC = () => { - const { - navbarHiddenState: { navbarHidden, setNavbarHidden } - } = useContext(MainFrameworkContext) - const handleButtonClick = () => { - setNavbarHidden(!navbarHidden) + const [slogan, setSlogan] = useState('') + const [sloganType, setSloganType] = useState(true) + const typeText = '/* 因为热爱 所以折腾 */' + if (sloganType) { + setTimeout(() => { + if (slogan.length < typeText.length) { + setSlogan(typeText.substring(0, slogan.length + 1)) + } else { + setSloganType(false) + } + }, 150) + } else { + setTimeout(() => { + if (slogan.length > 0) { + setSlogan(typeText.substring(0, slogan.length - 1)) + } else { + setSloganType(true) + } + }, 50) } + return ( <> -

Home

-
- - {navbarHidden ? '显示' : '隐藏'} - -
+ + +
+
FatWeb
+ + {slogan || <> } + +
+
+ +
+ + ) } diff --git a/src/components/LoadingMask.tsx b/src/components/LoadingMask.tsx index 0f41ca8..8675314 100644 --- a/src/components/LoadingMask.tsx +++ b/src/components/LoadingMask.tsx @@ -7,7 +7,7 @@ const LoadingMask: React.FC = () => { const loadingIcon = ( <> diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index df695b0..4f1a3dd 100644 --- a/src/pages/MainFramework.tsx +++ b/src/pages/MainFramework.tsx @@ -1,6 +1,7 @@ import React, { createContext } from 'react' import '@/assets/css/header.scss' import LoadingMask from '@/components/LoadingMask.tsx' +import router from '@/router' export const MainFrameworkContext = createContext<{ navbarHiddenState: { @@ -16,6 +17,8 @@ export const MainFrameworkContext = createContext<{ const MainFramework: React.FC = () => { const [navbarHidden, setNavbarHidden] = useState(false) + const routeId = useMatches()[1].id + const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children return ( <> @@ -26,36 +29,20 @@ const MainFramework: React.FC = () => { diff --git a/src/router/index.tsx b/src/router/index.tsx index 274ca0a..666df6f 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -25,6 +25,17 @@ const routes: RouteObject[] = [ id: 'home', Component: React.lazy(() => import('@/components/Home')), handle: { + name: '主页', + menu: true, + auth: false + } + }, + { + path: 'https://blog.fatweb.top', + id: 'blog', + handle: { + name: '博客', + menu: true, auth: false } }, @@ -33,6 +44,8 @@ const routes: RouteObject[] = [ id: 'project', Component: React.lazy(() => import('@/components/Project')), handle: { + name: '项目', + menu: true, auth: false } } diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 2bc780f..33556af 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1,12 +1,14 @@ /// -type Captcha = { - value: string - base64Src: string +type RouteHandle = { + name?: string + menu?: boolean + auth?: boolean } -type RouteHandle = { - auth: boolean +interface FitFullscreenProps extends PropsWithChildren { + zIndex?: number + backgroundColor?: string } type _Response = { @@ -15,6 +17,11 @@ type _Response = { data: T | null } +type Captcha = { + value: string + base64Src: string +} + type Token = { token: string }