update: 滚动定位

style
icefire 2024-10-21 17:56:41 +08:00
parent 7a7e77617c
commit 854641b4fc
7 changed files with 245 additions and 248 deletions

View File

@ -13,9 +13,11 @@
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",
"@formatjs/intl-localematcher": "^0.5.5", "@formatjs/intl-localematcher": "^0.5.5",
"@mui/material": "^6.1.3", "@mui/material": "^6.1.3",
"lib-flexible": "^0.3.2",
"negotiator": "^0.6.3", "negotiator": "^0.6.3",
"next": "14.2.15", "next": "14.2.15",
"next-intl": "^3.21.1", "next-intl": "^3.21.1",
"postcss-pxtorem": "^6.1.0",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18"
}, },

View File

@ -20,6 +20,9 @@ importers:
'@mui/material': '@mui/material':
specifier: ^6.1.3 specifier: ^6.1.3
version: 6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
lib-flexible:
specifier: ^0.3.2
version: 0.3.2
negotiator: negotiator:
specifier: ^0.6.3 specifier: ^0.6.3
version: 0.6.3 version: 0.6.3
@ -29,6 +32,9 @@ importers:
next-intl: next-intl:
specifier: ^3.21.1 specifier: ^3.21.1
version: 3.21.1(next@14.2.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) version: 3.21.1(next@14.2.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
postcss-pxtorem:
specifier: ^6.1.0
version: 6.1.0(postcss@8.4.47)
react: react:
specifier: ^18 specifier: ^18
version: 18.3.1 version: 18.3.1
@ -1279,6 +1285,9 @@ packages:
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
engines: {node: '>= 0.8.0'} engines: {node: '>= 0.8.0'}
lib-flexible@0.3.2:
resolution: {integrity: sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==}
lilconfig@2.1.0: lilconfig@2.1.0:
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
engines: {node: '>=10'} engines: {node: '>=10'}
@ -1510,6 +1519,11 @@ packages:
peerDependencies: peerDependencies:
postcss: ^8.2.14 postcss: ^8.2.14
postcss-pxtorem@6.1.0:
resolution: {integrity: sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==}
peerDependencies:
postcss: ^8.0.0
postcss-selector-parser@6.1.2: postcss-selector-parser@6.1.2:
resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
engines: {node: '>=4'} engines: {node: '>=4'}
@ -3354,6 +3368,8 @@ snapshots:
prelude-ls: 1.2.1 prelude-ls: 1.2.1
type-check: 0.4.0 type-check: 0.4.0
lib-flexible@0.3.2: {}
lilconfig@2.1.0: {} lilconfig@2.1.0: {}
lilconfig@3.1.2: {} lilconfig@3.1.2: {}
@ -3568,6 +3584,10 @@ snapshots:
postcss: 8.4.47 postcss: 8.4.47
postcss-selector-parser: 6.1.2 postcss-selector-parser: 6.1.2
postcss-pxtorem@6.1.0(postcss@8.4.47):
dependencies:
postcss: 8.4.47
postcss-selector-parser@6.1.2: postcss-selector-parser@6.1.2:
dependencies: dependencies:
cssesc: 3.0.0 cssesc: 3.0.0

View File

@ -2,6 +2,14 @@
const config = { const config = {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
'postcss-pxtorem': {
rootValue: 14.4, // 默认的根元素字体大小
unitPrecision: 5, // 单位转换后保留的精度
propList: ['*'], // 转换哪些属性,'*' 表示全部
selectorBlackList: [], // 不转换的类名
minPixelValue: 0, // 小于或等于`1px`的不转换为`rem`
mediaQuery: false, // 允许在媒体查询中转换`px`
}
}, },
}; };

View File

@ -41,188 +41,179 @@ export default async function Home (props: PropsType) {
{ img: '/home/case_3.png' }, { img: '/home/case_3.png' },
] ]
return <> return <>
<div className='w-full'> <div className='w-full flex flex-col items-center'>
<Header dict={dict} lang={lang} /> <Header dict={dict} lang={lang} />
<section id="home"></section> <div className="w-[1440px] relative pt-[80px]"
<div className="w-[1440px] relative container pt-[80px]"
> >
<div className='main'> <div className='main'>
<div className="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[72px]"> <div className="w-full h-[770px] pl-[72px] relative" id="home">
<div <img
className="text-[46px] leading-[62px] w-[585px] text-center" className="absolute right-0 w-[1520px] h-[770px]"
> src="/home/img_header.png"
alt=""
/>
<div <div
className="font-black" className="text-[46px] leading-[62px] w-[585px] text-center pt-[279px]"
style={{ >
'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)', <div
'backgroundClip': 'text', className="font-black"
'WebkitTextFillColor': 'transparent' style={{
}}> 'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
{dict.FocusingOnPlayableAds} 'backgroundClip': 'text',
'WebkitTextFillColor': 'transparent'
}}>
{dict.FocusingOnPlayableAds}
</div>
<div
className="font-black"
style={{
'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
'backgroundClip': 'text',
'WebkitTextFillColor': 'transparent'
}}>
{dict.goOverseas}
</div>
</div> </div>
<div
className="font-black"
style={{
'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
'backgroundClip': 'text',
'WebkitTextFillColor': 'transparent'
}}>
{dict.goOverseas}
</div>
<section id="service"></section>
</div> </div>
</div> <div className="w-full h-[428px] relative" id="service">
<div className="w-full h-[428px] relative"> <img
<img className="absolute left-[-140px] w-[745px] h-[428px]"
className="absolute left-[-140px]" src="/home/img_bg2.png"
src="/home/img_bg2.png" alt=""
width={745}
height={428} />
alt="" <div className="absolute w-[770px] text-[32px] top-[184px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.customized }
</div>
</div>
<div className="w-full h-[403px] relative">
<img
className="absolute right-[-30px] w-[787px] h-[403px]"
src="/home/img_AB.png"
alt=""
/>
<div className="absolute w-[662px] text-[32px] top-[160px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.ABTesting}
</div>
<div className="absolute w-[680px] text-[32px] top-[204px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.iterateGameplay }
</div>
</div>
<div className="w-full h-[392px] relative">
<img
className="absolute w-[731px] h-[392px]"
src="/home/img_mutilan.png"
alt=""
/>
<div className="absolute w-[520px] text-[32px] top-[197px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.multiLanguage }
</div>
<div className="absolute w-[510px] text-[32px] top-[242px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.breakingGeographical }
</div>
</div>
<div className="w-full h-[317px] relative mt-[83px]">
<img
className="absolute right-[20px] w-[742px] h-[317px]"
src="/home/img_Omnichannel.png"
alt=""
/>
<div className="absolute w-[680px] text-[32px] top-[124px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.allChannel }
</div>
<div className="absolute w-[680px] text-[32px] top-[169px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.expandInfluence }
</div>
</div>
<div className="w-full h-[317px] relative mt-[83px]">
<img
className="absolute left-[-194px] w-[881px] h-[357px]"
src="/home/img_3.png"
alt=""
/>
<div className="absolute w-[691px] text-[32px] top-[100px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.lightweightDeployment }
</div>
<div className="absolute w-[712px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.simplifyProcess }
</div>
</div>
<div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
<div
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
style={{
background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
backgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}}
>{ dict.caseGallery }</div>
{/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
</div>
<div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]">
{
caseList.map((item: CaseType, index: number) => {
return <div key={'key'+index} className="cursor-pointer relative group mb-[50px]" style={{ width: 'calc(25% - 37.5px)' }}>
<div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] h-full'>
<img
className="rounded-[60px] w-full
transition ease-in-out duration-300"
src={item.img}
width={300}
height={300}
alt=""
/>
<div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center
text-white text-[30px] hidden group-hover:block '
style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}}
>
{dict.clickToPlay}
</div>
</div>
</div>
})
}
<div className="flex flex-col justify-center items-center
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px]"
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)', width: 'calc(25% - 37.5px)' }}>
<More dict={dict} lang={lang} />
</div>
</div>
/>
<div className="absolute w-[770px] text-[32px] top-[184px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.customized }
</div>
</div>
<div className="w-full h-[403px] relative"> <div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">
<img
className="absolute right-[-30px]"
src="/home/img_AB.png"
width={787}
height={403}
alt=""
/>
<div className="absolute w-[662px] text-[32px] top-[160px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.ABTesting}
</div>
<div className="absolute w-[680px] text-[32px] top-[204px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.iterateGameplay }
</div>
</div>
<div className="w-full h-[392px] relative">
<img
className="absolute"
src="/home/img_mutilan.png"
width={731}
height={392}
alt=""
/>
<div className="absolute w-[520px] text-[32px] top-[197px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.multiLanguage }
</div>
<div className="absolute w-[510px] text-[32px] top-[242px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.breakingGeographical }
</div>
</div>
<div className="w-full h-[317px] relative mt-[83px]">
<img
className="absolute right-[20px]"
src="/home/img_Omnichannel.png"
width={742}
height={317}
alt=""
/>
<div className="absolute w-[680px] text-[32px] top-[124px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.allChannel }
</div>
<div className="absolute w-[680px] text-[32px] top-[169px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.expandInfluence }
</div>
</div>
<div className="w-full h-[317px] relative mt-[83px]">
<img
className="absolute left-[-194px]"
src="/home/img_3.png"
width={881}
height={357}
alt=""
/>
<div className="absolute w-[691px] text-[32px] top-[100px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.lightweightDeployment }
</div>
<div className="absolute w-[712px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.simplifyProcess }
</div>
</div>
<section id="case"></section>
<div className="w-full flex flex-col justify-center items-center mt-[98px]">
<div <div
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center" className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
style={{ style={{
background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)', background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
backgroundClip: 'text', backgroundClip: 'text',
WebkitTextFillColor: 'transparent' WebkitTextFillColor: 'transparent'
}} }}
>{ dict.caseGallery }</div> >{ dict.contactUs }</div>
{/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */} </div>
<div className="w-full mb-[60px]">
<Form />
</div> </div>
<div className="w-full flex justify-center text-[19px] text-[#59676C] pb-[52px] mb-[47px] border-b-1 border-solid border-[#D8D8D8]"
<div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]"> style={{ borderBottom: '1px solid #D8D8D8' }}
{ >
caseList.map((item: CaseType, index: number) => { { dict.businessCooperation }info@soyootech.com
return <div key={'key'+index} className="cursor-pointer relative group mb-[50px]" style={{ width: 'calc(25% - 37.5px)' }}>
<div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] h-full'>
<img
className="rounded-[60px] w-full
transition ease-in-out duration-300"
src={item.img}
width={300}
height={300}
alt=""
/>
<div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center
text-white text-[30px] hidden group-hover:block '
style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}}
>
{dict.clickToPlay}
</div>
</div>
</div>
})
}
<div className="flex flex-col justify-center items-center
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px]"
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)', width: 'calc(25% - 37.5px)' }}>
<More dict={dict} lang={lang} />
</div> </div>
</div> <div>
<Footer dict={dict} />
<section id="contact">
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]">
<div
className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
style={{
background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
backgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}}
>{ dict.contactUs }</div>
</div>
<div className="w-full mb-[60px]">
<Form />
</div> </div>
<div className="w-full flex justify-center text-[19px] text-[#59676C] pb-[52px] mb-[47px] border-b-1 border-solid border-[#D8D8D8]"
style={{ borderBottom: '1px solid #D8D8D8' }}
>
{ dict.businessCooperation }info@soyootech.com
</div> </div>
</section>
<div>
<Footer dict={dict} />
</div>
</div>
</div> </div>
</div> </div>
</> </>

View File

@ -1,6 +1,6 @@
'use client' 'use client'
import Link from "next/link"; import Link from "next/link";
import { useState } from "react"; import { useEffect, useState } from "react";
@ -15,6 +15,51 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
const { dict, lang } = props const { dict, lang } = props
const [activeTab, setActiveTab] = useState(dict.home) const [activeTab, setActiveTab] = useState(dict.home)
const [show, setShow] = useState(false) const [show, setShow] = useState(false)
const [hash, setHash] = useState('#home')
useEffect(() => {
const designWidth = 1440;
const deviceWidth = window.innerWidth;
let scale = 1920 / designWidth
if (deviceWidth >= 1440 && deviceWidth <= 1920) {
scale = deviceWidth / designWidth;
} else if (deviceWidth < 1440) {
scale = deviceWidth / designWidth;
}
document.documentElement.style.fontSize = `${scale * 14.4}px`;
switch (hash) {
case '#home':
const home = document.getElementById('home')
document.documentElement.scrollTo({
top: home!.offsetTop - 80,
behavior: 'smooth'
});
break;
case '#service':
const service = document.getElementById('service')
document.documentElement.scrollTo({
top: service!.offsetTop - 80,
behavior: 'smooth'
});
break;
case '#case':
const caseDom = document.getElementById('case')
document.documentElement.scrollTo({
top: caseDom!.offsetTop - 110,
behavior: 'smooth'
});
break;
case '#contact':
const contact = document.getElementById('contact')
document.documentElement.scrollTo({
top: contact!.offsetTop - 80,
behavior: 'smooth'
});
break;
}
}, [hash])
const navList: NavType[] = [ const navList: NavType[] = [
{ {
@ -36,31 +81,31 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
] ]
return (<> return (<>
<div className={`flex items-center px-[55px] h-[80px] border-b-1 border-solid <div className={`flex items-center px-[55px] h-[80px] border-b-1 border-solid
border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] container`} border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] justify-between`}
style={{ borderBottom: '1px solid #D8D8D8' }} style={{ borderBottom: '1px solid #D8D8D8' }}
> >
<Link href="#home"> <div className="cursor-pointer">
<img <img
className="w-[180px] h-[47px]"
src="/common/logo.png" src="/common/logo.png"
width={180}
height={47}
alt="logo" alt="logo"
onClick={() => setHash('#home')}
/> />
</Link> </div>
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"} <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
> >
{ {
navList.map((item: NavType) => ( navList.map((item: NavType) => (
<Link href={item.href} key={item.name}> <div onClick={() => setHash(item.href)} key={item.name}>
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}> <div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
<div className="my-[10px] w-[144px] text-[18px]">{item.name}</div> <div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
{ {
activeTab === item.name ? activeTab === item.name ?
<img src="/common/tab_checked.png" width={144} height={8} alt="" /> : <img src="/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> :
<div className="h-[8px]"></div> <div className="h-[8px]"></div>
} }
</div> </div>
</Link> </div>
)) ))
} }
</div> </div>
@ -70,16 +115,13 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
onClick={() => setShow(!show)}> onClick={() => setShow(!show)}>
<img <img
src="/common/earth.png" src="/common/earth.png"
width={16.5} className="w-[16.5px] h-[16.5px]"
height={16.5}
alt="logo" alt="logo"
/> />
<div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{dict?.lang}</div> <div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{dict?.lang}</div>
<img <img
className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'}`} className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'} w-[10px] h-[5px]`}
src="/common/arrow.png" src="/common/arrow.png"
width={10}
height={5}
alt="logo" alt="logo"
/> />
</div> </div>

View File

@ -2,66 +2,12 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
::-webkit-scrollbar { /* ::-webkit-scrollbar {
display: none; display: none;
} }
.main { .main {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
} } */
.container {
transform-origin: top left; /* 设置变换原点为左上角 */
}
@media screen and (max-width: 600px) {
.container {
transform: scale(0.28); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 200px);
}
}
@media screen and (min-width: 600px) and (max-width: 800px) {
.container {
transform: scale(0.6); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 200px);
}
}
@media screen and (min-width: 1440px) and (max-width: 1540px) {
.container {
transform: scale(1.069); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 770px);
}
}
/* 当屏幕宽度在1440px到1920px之间时 */
@media screen and (min-width: 1540px) and (max-width: 1640px) {
.container {
transform: scale(1.138); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 820px);
}
}
@media screen and (min-width: 1640px) and (max-width: 1740px) {
.container {
transform: scale(1.208); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 870px);
}
}
@media screen and (min-width: 1740px) and (max-width: 1840px) {
.container {
transform: scale(1.277); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 920px);
}
}
@media screen and (min-width: 1840px) and (max-width: 1940px) {
.container {
transform: scale(1.333); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 960px);
}
}
/* 当屏幕宽度大于或等于1920px时 */
@media screen and (min-width: 1920px) {
.container {
transform: scale(1.333); /* 保持与1920px宽度的屏幕相同的缩放比例 */
left: calc(50% - 960px);
}
}

View File

@ -1,18 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css"; import "./globals.css";
import { ReactElement, ReactNode } from "react"; import { ReactElement, ReactNode } from "react";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "北京索游科技", title: "北京索游科技",
@ -23,7 +12,6 @@ function RootLayout({ children }:{ children: ReactNode } ): ReactElement {
return ( return (
<html lang="en"> <html lang="en">
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >
{children} {children}
</body> </body>