fix: 解决页面body样式污染问题

src/components/HomeIndex/index.less

@@ -1,8 +1,8 @@
-//*,
+*,
-//*:after,
+*:after,
-//*:before {
+*:before {
-//	box-sizing: border-box;
+	box-sizing: border-box;
-//}
+}
 
 :root {
 	--border: hsl(0 0% 80%);
@@ -12,11 +12,11 @@
 	--panel: hsl(240 38% 98%);
 }
 
-//html {
+html {
-//	color-scheme: light only;
+	color-scheme: light only;
-//}
+}
 
-body {
+.body {
 	min-height: 100vh;
 	font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
 	Helvetica, Arial, sans-serif, system-ui;
@@ -24,21 +24,22 @@ body {
 	overflow-x: hidden;
 }
 
-body::before {
+.body::before {
 	--size: 60px;
 	--line: hsl(0 0% 0% / 0.15);
 	content: '';
 	height: 100vh;
 	width: 100vw;
 	position: fixed;
-	background: linear-gradient(
+	//background: linear-gradient(
-		90deg,
+	//	90deg,
-		var(--line) 1px,
+	//	var(--line) 1px,
-		transparent 1px var(--size)
+	//	transparent 1px var(--size)
-	)
+	//)
-	50% 50% / var(--size) var(--size),
+	//50% 50% / var(--size) var(--size),
-	linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
+	//linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
-		var(--size) var(--size);
+	//	var(--size) var(--size);
+	background-image: url("@/assets/images/background.png");
 	-webkit-mask: linear-gradient(-15deg, transparent 30%, white);
 	mask: linear-gradient(-15deg, transparent 30%, white);
 	top: 0;
@@ -47,19 +48,19 @@ body::before {
 	z-index: -1;
 }
 
-header {
+.header {
 	min-height: 200vh;
 	position: relative;
 	width: 100%;
 }
 
-footer {
+.footer {
 	padding: 1rem;
 	display: grid;
 	place-items: center;
 }
 
-h1 {
+.h1 {
 	margin: 0;
 	font-size: clamp(3rem, 4.5vw + 1rem, 10rem);
 	width: 20ch;
@@ -69,22 +70,22 @@ h1 {
 	text-align: center;
 }
 
-h1 span {
+.h1 span {
 	color: hsl(260 80% 50%);
 }
 
-h2 {
+.h2 {
 	margin: 0;
 	font-size: clamp(1.5rem, 3vw + 1rem, 8rem);
 }
 
-section {
+.section {
 	display: grid;
 	place-items: center;
 	min-height: 100vh;
 }
 
-nav {
+.nav {
 	position: fixed;
 	top: 0;
 	padding: 0.25rem;
@@ -102,7 +103,7 @@ nav {
 	max-width: 100%;
 }
 
-nav button {
+.nav button {
 	width: 44px;
 	aspect-ratio: 1;
 }

src/components/HomeIndex/index.tsx

@@ -4,6 +4,7 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger'
 import './index.less'
 const HomeIndex: React.FC = () => {
     useEffect(() => {
+        document.body.classList.add('body')
         if (!CSS.supports('animation-timeline: scroll()')) {
             // const SPAN = 'max(45vw, 260px)';
             const CONFIG = [
@@ -187,10 +188,13 @@ const HomeIndex: React.FC = () => {
                 },
             })
         }
+        return () => {
+            document.body.classList.remove('body')
+        }
     }, [])
     return (
         <>
-            <nav>
+            <nav className={'nav'}>
                 <div className='navbar'>
                     <a
                         className='bear-link'
@@ -242,10 +246,10 @@ const HomeIndex: React.FC = () => {
                     </a>
                 </div>
             </nav>
-            <header>
+            <header className={'header'}>
                 <div className='hero'>
                     <div className='content'>
-                        <h1>
+                        <h1 className={'h1'}>
                             五 味 子 云 存 储
                             <br />
                             <span>schisandra</span>
@@ -263,10 +267,7 @@ const HomeIndex: React.FC = () => {
                                 <div className='card card--one'>
                                     <div className='card__column'>
                                         <div className='card__avatar'>
-                                            <img
+                                            <img src='@/assets/images/test/526.jpg' alt='' />
-                                                src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/526.jpg'
-                                                alt=''
-                                            />
                                         </div>
                                     </div>
 
@@ -317,10 +318,7 @@ const HomeIndex: React.FC = () => {
                                                     fill='#4285F4'
                                                     d='M12 0C8.21 0 4.831 1.757 2.632 4.501l3.953 6.848A5.454 5.454 0 0 1 12 6.545h10.691A12 12 0 0 0 12 0zM1.931 5.47A11.943 11.943 0 0 0 0 12c0 6.012 4.42 10.991 10.189 11.864l3.953-6.847a5.45 5.45 0 0 1-6.865-2.29zm13.342 2.166a5.446 5.446 0 0 1 1.45 7.09l.002.001h-.002l-5.344 9.257c.206.01.413.016.621.016 6.627 0 12-5.373 12-12 0-1.54-.29-3.011-.818-4.364zM12 16.364a4.364 4.364 0 1 1 0-8.728 4.364 4.364 0 0 1 0 8.728Z'></path>
                                             </svg>
-                                            <img
+                                            <img src='@/assets/images/test/430.jpg' alt='' />
-                                                src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/430.jpg'
-                                                alt=''
-                                            />
                                         </div>
                                         <div className='card__dummy'>
                                             <div className='text-wrap'>
@@ -363,10 +361,7 @@ const HomeIndex: React.FC = () => {
                                 <div className='card card--two'>
                                     <div className='card__column'>
                                         <div className='card__avatar'>
-                                            <img
+                                            <img src='@/assets/images/test/535.jpg' alt='' />
-                                                src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/535.jpg'
-                                                alt=''
-                                            />
                                         </div>
                                     </div>
 
@@ -412,10 +407,7 @@ const HomeIndex: React.FC = () => {
                                                     fill='#F22F46'
                                                     d='M12 0C5.381-.008.008 5.352 0 11.971V12c0 6.64 5.359 12 12 12 6.64 0 12-5.36 12-12 0-6.641-5.36-12-12-12zm0 20.801c-4.846.015-8.786-3.904-8.801-8.75V12c-.014-4.846 3.904-8.786 8.75-8.801H12c4.847-.014 8.786 3.904 8.801 8.75V12c.015 4.847-3.904 8.786-8.75 8.801H12zm5.44-11.76c0 1.359-1.12 2.479-2.481 2.479-1.366-.007-2.472-1.113-2.479-2.479 0-1.361 1.12-2.481 2.479-2.481 1.361 0 2.481 1.12 2.481 2.481zm0 5.919c0 1.36-1.12 2.48-2.481 2.48-1.367-.008-2.473-1.114-2.479-2.48 0-1.359 1.12-2.479 2.479-2.479 1.361-.001 2.481 1.12 2.481 2.479zm-5.919 0c0 1.36-1.12 2.48-2.479 2.48-1.368-.007-2.475-1.113-2.481-2.48 0-1.359 1.12-2.479 2.481-2.479 1.358-.001 2.479 1.12 2.479 2.479zm0-5.919c0 1.359-1.12 2.479-2.479 2.479-1.367-.007-2.475-1.112-2.481-2.479 0-1.361 1.12-2.481 2.481-2.481 1.358 0 2.479 1.12 2.479 2.481z'></path>
                                             </svg>
-                                            <img
+                                            <img src='@/assets/images/test/332.jpg' alt='' />
-                                                src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/332.jpg'
-                                                alt=''
-                                            />
                                         </div>
                                         <div className='card__dummy'>
                                             <div className='text-wrap'>
@@ -473,10 +465,7 @@ const HomeIndex: React.FC = () => {
                                                     fill='#1DB954'
                                                     d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z'></path>
                                             </svg>
-                                            <img
+                                            <img src='@/assets/images/test/1011.jpg' alt='' />
-                                                src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/1011.jpg'
-                                                alt=''
-                                            />
                                         </div>
                                         <div className='card__dummy'>
                                             <div className='text-wrap'>
@@ -525,10 +514,7 @@ const HomeIndex: React.FC = () => {
                                 <div className='card card--four'>
                                     <div className='card__column'>
                                         <div className='card__avatar'>
-                                            <img
+                                            <img src='@/assets/images/test/47.jpg' alt='' />
-                                                src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/47.jpg'
-                                                alt=''
-                                            />
                                         </div>
                                     </div>
 
@@ -589,11 +575,11 @@ const HomeIndex: React.FC = () => {
                 </div>
             </header>
             <main>
-                <section>
+                <section className={'section'}>
-                    <h2>Pretty rad.</h2>
+                    <h2 className={'h2'}>Pretty rad.</h2>
                 </section>
             </main>
-            <footer>ʕ•ᴥ•ʔ jhey © 2024</footer>
+            <footer className={'footer'}>ʕ•ᴥ•ʔ schisandra © 2024</footer>
         </>
     )
 }

src/layout/default/index.less

@@ -6,13 +6,13 @@ html {
 	scroll-behavior: smooth;
 }
 
-html, body {
+html, .main-body {
-	width: 100%;
+	width: 100vw;
 	height: 100vh;
 	margin: 0;
 }
 
-body {
+.main-body {
 	font-family: "DM Sans", sans-serif;
 	display: flex;
 	justify-content: center;
@@ -20,7 +20,7 @@ body {
 	flex-direction: column;
 	//overflow: hidden;
 	//overflow-x: hidden;
-	//background-image: url("@/assets/images/background.png");
+	background-image: url("@/assets/images/background.png");
 	background-position: center;
 	background-size: cover;
 	padding: 20px;
@@ -43,8 +43,8 @@ h1,p{
 	border-radius: 10px;
 	width: 100vw;
 	height: 100vh;
-	max-width: 1510px;
+	max-width: 1500px;
-	max-height: 670px;
+	max-height: 650px;
 	background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
 	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
 	display: flex;

src/layout/default/index.tsx

@@ -1,9 +1,16 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import LeftArea from '@/layout/default/left-area'
 import MainArea from '@/layout/default/main-area'
 import RightArea from '@/layout/default/right-area'
 import './index.less'
+import Footer from '@/components/Footer'
 const DefaultLayOut: React.FC = () => {
+    useEffect(() => {
+        document.body.classList.add('main-body')
+        return () => {
+            document.body.classList.remove('main-body')
+        }
+    }, [])
     return (
         <>
             <div className='app-container'>
@@ -11,6 +18,7 @@ const DefaultLayOut: React.FC = () => {
                 <MainArea />
                 <RightArea />
             </div>
+            <Footer />
         </>
     )
 }

src/views/Main/index.tsx

@@ -1,8 +1,8 @@
-// import DefaultLayOut from '@/layout/default'
+import DefaultLayOut from '@/layout/default'
 export default () => {
     return (
         <>
-            {/*<DefaultLayOut />*/}
+            <DefaultLayOut />
         </>
     )
 }