fix: 解决页面body样式污染问题
This commit is contained in:
landaiqing
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/526.jpg'
|
||||
alt=''
|
||||
/>
|
||||
<img src='@/assets/images/test/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
|
||||
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/430.jpg'
|
||||
alt=''
|
||||
/>
|
||||
<img src='@/assets/images/test/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
|
||||
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/535.jpg'
|
||||
alt=''
|
||||
/>
|
||||
<img src='@/assets/images/test/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
|
||||
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/332.jpg'
|
||||
alt=''
|
||||
/>
|
||||
<img src='@/assets/images/test/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
|
||||
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/1011.jpg'
|
||||
alt=''
|
||||
/>
|
||||
<img src='@/assets/images/test/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
|
||||
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/47.jpg'
|
||||
alt=''
|
||||
/>
|
||||
<img src='@/assets/images/test/47.jpg' alt='' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -589,11 +575,11 @@ const HomeIndex: React.FC = () => {
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Pretty rad.</h2>
|
||||
<section className={'section'}>
|
||||
<h2 className={'h2'}>Pretty rad.</h2>
|
||||
</section>
|
||||
</main>
|
||||
<footer>ʕ•ᴥ•ʔ jhey © 2024</footer>
|
||||
<footer className={'footer'}>ʕ•ᴥ•ʔ schisandra © 2024</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -6,13 +6,13 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
html, .main-body {
|
||||
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-height: 670px;
|
||||
max-width: 1500px;
|
||||
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;
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// import DefaultLayOut from '@/layout/default'
|
||||
import DefaultLayOut from '@/layout/default'
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
{/*<DefaultLayOut />*/}
|
||||
<DefaultLayOut />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user