From 2c8429d01213b15007fe411ef42c57f0d2a4dc48 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 7 Sep 2023 18:12:33 +0800
Subject: [PATCH] Add slogan to home page

---
 src/assets/css/common.scss       | 11 ++++++-
 src/assets/css/home.scss         | 44 +++++++++++++++++++++++++++
 src/assets/svg/down.svg          |  1 +
 src/components/FitCenter.tsx     | 11 +++++++
 src/components/FitFullScreen.tsx | 12 ++++++--
 src/components/Home.tsx          | 51 ++++++++++++++++++++++++--------
 6 files changed, 115 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/svg/down.svg
 create mode 100644 src/components/FitCenter.tsx

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/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 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M958.577476 311.180252c0 15.286148-5.878894 29.522384-16.564257 40.166815L551.623951 741.043556c-1.39272 1.425466-2.577708 2.537799-3.846608 3.449565l-2.905166 2.304486c-11.416004 11.362792-24.848944 16.945951-39.068807 16.945951-14.475689 0-28.010961-5.708002-38.110993-16.056698L79.475588 355.310332c-10.467399-10.613732-16.236799-24.786523-16.236799-39.893592 0-14.772448 5.599532-28.726252 15.753799-39.286772 10.18599-10.497075 24.390503-16.539698 38.95215-16.539698 14.382569 0 28.009937 5.723352 38.366819 16.142655l350.169241 353.968777 359.428116-358.485651c10.30981-10.248412 23.781636-15.909341 37.994336-15.909341 14.889105 0 28.859281 6.05081 39.333844 16.999163C953.126324 282.725176 958.577476 296.556183 958.577476 311.180252z" /></svg>
\ 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<PropsWithChildren> = (props: PropsWithChildren) => {
+    return (
+        <>
+            <div id={'fit-center'}>{props.children}</div>
+        </>
+    )
+}
+
+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<PropsWithChildren> = (props: PropsWithChildren) => {
+const FitFullScreen: React.FC<FitFullscreenProps> = (props: FitFullscreenProps) => {
     return (
         <>
-            <div id={'fit-fullscreen'}>{props.children}</div>
+            <div
+                id={'fit-fullscreen'}
+                style={{
+                    zIndex: props.zIndex,
+                    backgroundColor: props.backgroundColor
+                }}
+            >
+                {props.children}
+            </div>
         </>
     )
 }
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 (
         <>
-            <h1>Home</h1>
-            <div style={{ marginTop: '100px' }}>
-                <AntdButton onClick={handleButtonClick}>
-                    {navbarHidden ? '显示' : '隐藏'}
-                </AntdButton>
-            </div>
+            <FitFullScreen zIndex={100} backgroundColor={'#FBFBFB'}>
+                <FitCenter>
+                    <div className={'center-box'}>
+                        <div className={'big-logo'}>FatWeb</div>
+                        <span id={'slogan'} className={'slogan'}>
+                            {slogan || <>&nbsp;</>}
+                        </span>
+                    </div>
+                    <div className={'scroll-to-down'}>
+                        <Icon
+                            component={IconFatwebDown}
+                            style={{ fontSize: '1.8em', color: '#666' }}
+                        />
+                    </div>
+                </FitCenter>
+            </FitFullScreen>
         </>
     )
 }