feat: 添加首页模板

src/components/BlurCard/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react'
-import './index.less'
+import styles from './index.module.less'
 import { gsap } from 'gsap'
 const BlurCard: React.FC = () => {
     useEffect(() => {
-        const UPDATE = ({ x, y}) => {
+        const UPDATE = ({ x, y }: { x: any; y: any }) => {
             gsap.set(document.documentElement, {
                 '--x': gsap.utils.mapRange(0, window.innerWidth, -1, 1, x),
                 '--y': gsap.utils.mapRange(0, window.innerHeight, -1, 1, y),
@@ -18,12 +18,12 @@ const BlurCard: React.FC = () => {
                 <img src='https://assets.codepen.io/605876/osaka-sky.jpeg' alt='' />
                 <h3>Osaka</h3>
                 <img src='https://assets.codepen.io/605876/osaka-tower.png' alt='' />
-                <div className='blur'>
+                <div className={styles.blur}>
                     <img src='https://assets.codepen.io/605876/osaka.jpeg' alt='' />
                     <div></div>
                     --&gt;
                 </div>
-                <div className='content'>
+                <div className={styles.content}>
                     <p>
                         <svg
                             xmlns='http://www.w3.org/2000/svg'
@@ -36,9 +36,9 @@ const BlurCard: React.FC = () => {
                                 d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM4.575 15.6a8.25 8.25 0 0 0 9.348 4.425 1.966 1.966 0 0 0-1.84-1.275.983.983 0 0 1-.97-.822l-.073-.437c-.094-.565.25-1.11.8-1.267l.99-.282c.427-.123.783-.418.982-.816l.036-.073a1.453 1.453 0 0 1 2.328-.377L16.5 15h.628a2.25 2.25 0 0 1 1.983 1.186 8.25 8.25 0 0 0-6.345-12.4c.044.262.18.503.389.676l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.575 15.6Z'
                                 clipRule='evenodd'></path>
                         </svg>
-                        <span>Osaka Castle</span>
+                        <span>GuGong GuGong</span>
                     </p>
-                    <p>Osaka, China</p>
+                    <p>GuGong, China</p>
                 </div>
             </article>
         </>