feat: "add bottom"

ecafe8 · Sep 6, 2024 · 2329794 · 2329794
1 parent 55c0080
commit 2329794
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/index.css b/src/index.css
@@ -183,11 +183,25 @@ body,
 }
 
 .typewriter {
-  width: 30em; /* 调整为字符总数的一半 */
+  width: 30em;
   margin: 0 auto;
 }
 @keyframes hideCaret {
   to {
     border-right-color: transparent;
   }
 }
+
+@keyframes gradientBG {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
diff --git a/src/pages/Mobile/index.tsx b/src/pages/Mobile/index.tsx
@@ -1,8 +1,8 @@
 import Flow from './flow'
-import directoryImg from '@/assets/carousel/directory.png'
-import hotImg from '@/assets/carousel/hot.png'
-import indexImg from '@/assets/carousel/index.png'
 import logo from '@/assets/logo.svg'
+import directoryImg from '@/assets/mobile/carousel/directory.png'
+import hotImg from '@/assets/mobile/carousel/hot.png'
+import indexImg from '@/assets/mobile/carousel/index.png'
 import codeImg from '@/assets/mobile/detail/code.png'
 import dictationImg from '@/assets/mobile/detail/dictation.png'
 import phoneticImg from '@/assets/mobile/detail/phonetic.png'
@@ -66,7 +66,7 @@ const MobilePage: React.FC = () => {
   }, [currentSlide])
 
   return (
-    <div className="flex h-screen w-screen flex-col">
+    <div className="flex   w-screen flex-col">
       <section className="flex items-center justify-center py-2 shadow-md">
         <img src={logo} className="mr-3 h-16 w-16" alt="Qwerty Learner Logo" />
         <h1 className="text-2xl font-bold text-primary">Qwerty Learner</h1>
@@ -150,6 +150,19 @@ const MobilePage: React.FC = () => {
           <img className="w-full object-contain" src={detail[activeIndex].img} alt="" />
         </div>
       </section>
+
+      <section
+        className="mt-10 flex h-[20rem] w-full w-full flex-col items-center"
+        style={{
+          background: 'linear-gradient(-45deg, #6366f1, #6366f1, #6366f1, #b600ff)',
+          backgroundSize: '600% 600%',
+          animation: 'gradientBG 4s ease-in-out infinite',
+        }}
+      >
+        <h1 className="mt-10 text-3xl font-bold text-white">轻松上手，简单好用</h1>
+        <h2 className="mt-10    px-10 text-white">为键盘工作者设计的单词与肌肉记忆锻炼软件</h2>
+        <div className="mt-10 rounded-2xl bg-white px-6 py-3 text-xl font-bold text-primary">立即体验</div>
+      </section>
     </div>
   )
 }