From b53a7e28538010612032822b1a2af3c7733657fc Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Mon, 22 Apr 2024 02:00:31 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=A1=B5=E9=9D=A2body?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=B1=A1=E6=9F=93=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/HomeIndex/index.less | 53 +++++++++++++++-------------- src/components/HomeIndex/index.tsx | 46 +++++++++---------------- src/layout/default/index.less | 12 +++---- src/layout/default/index.tsx | 10 +++++- src/views/Main/index.tsx | 4 +-- 5 files changed, 60 insertions(+), 65 deletions(-) diff --git a/src/components/HomeIndex/index.less b/src/components/HomeIndex/index.less index 0e93934..87840cc 100644 --- a/src/components/HomeIndex/index.less +++ b/src/components/HomeIndex/index.less @@ -1,8 +1,8 @@ -//*, -//*:after, -//*:before { -// box-sizing: border-box; -//} +*, +*:after, +*:before { + box-sizing: border-box; +} :root { --border: hsl(0 0% 80%); @@ -12,11 +12,11 @@ --panel: hsl(240 38% 98%); } -//html { -// color-scheme: light only; -//} +html { + 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( - 90deg, - var(--line) 1px, - transparent 1px var(--size) - ) - 50% 50% / var(--size) var(--size), - linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / - var(--size) var(--size); + //background: linear-gradient( + // 90deg, + // var(--line) 1px, + // transparent 1px var(--size) + //) + //50% 50% / var(--size) var(--size), + //linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / + // 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; } diff --git a/src/components/HomeIndex/index.tsx b/src/components/HomeIndex/index.tsx index ae56032..3fdd2cf 100644 --- a/src/components/HomeIndex/index.tsx +++ b/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 ( <> -