guofei
/
addseed-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update：样式调整

style
icefire 2024-10-21 21:22:44 +08:00
parent 854641b4fc
commit b3a8d2abee
3 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/[[...lang]]/page.tsx
View File

@ -48,13 +48,13 @@ export default async function Home (props: PropsType) {
<div className='main'> <div className='main'>
<div className="w-full h-[770px] pl-[72px] relative" id="home"> <div className="w-full h-[770px] pl-[72px] relative" id="home">
<img <img
className="absolute right-0 w-[1520px] h-[770px]" className="absolute right-[-40px] w-[1520px] h-[770px]"
src="/home/img_header.png" src="/home/img_header.png"
alt="" alt=""
/> />
<div <div
className="text-[46px] leading-[62px] w-[585px] text-center pt-[279px]" className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px]"
> >
<div <div
className="font-black" className="font-black"
@ -78,71 +78,71 @@ export default async function Home (props: PropsType) {
</div> </div>
<div className="w-full h-[428px] relative" id="service"> <div className="w-full h-[428px] relative" id="service">
<img <img
className="absolute left-[-140px] w-[745px] h-[428px]" className="absolute left-[-214px] w-[969px] h-[428px]"
src="/home/img_bg2.png" src="/home/img_bg2.png"
alt="" alt=""
/> />
<div className="absolute w-[770px] text-[32px] top-[184px] right-[115px] text-[#333333] text-right font-semibold"> <div className="absolute w-[770px] text-[32px] top-[184px] right-[95px] text-[#333333] text-right font-semibold">
{ dict.customized } { dict.customized }
</div> </div>
</div> </div>
<div className="w-full h-[403px] relative"> <div className="w-full h-[403px] relative">
<img <img
className="absolute right-[-30px] w-[787px] h-[403px]" className="absolute right-[-100px] w-[888px] h-[403px]"
src="/home/img_AB.png" src="/home/img_AB.png"
alt="" alt=""
/> />
<div className="absolute w-[662px] text-[32px] top-[160px] left-[165px] text-[#333333] text-left font-semibold"> <div className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#333333] text-left font-semibold">
{ dict.ABTesting} { dict.ABTesting}
</div> </div>
<div className="absolute w-[680px] text-[32px] top-[204px] left-[165px] text-[#333333] text-left font-semibold"> <div className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">
{ dict.iterateGameplay } { dict.iterateGameplay }
</div> </div>
</div> </div>
<div className="w-full h-[392px] relative"> <div className="w-full h-[392px] relative">
<img <img
className="absolute w-[731px] h-[392px]" className="absolute w-[731px] h-[392px] left-[-33px]"
src="/home/img_mutilan.png" src="/home/img_mutilan.png"
alt="" alt=""
/> />
<div className="absolute w-[520px] text-[32px] top-[197px] right-[115px] text-[#333333] text-right font-semibold"> <div className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#333333] text-right font-semibold">
{ dict.multiLanguage } { dict.multiLanguage }
</div> </div>
<div className="absolute w-[510px] text-[32px] top-[242px] right-[115px] text-[#333333] text-right font-semibold"> <div className="absolute w-[520px] text-[32px] top-[242px] right-[95px] text-[#333333] text-right font-semibold">
{ dict.breakingGeographical } { dict.breakingGeographical }
</div> </div>
</div> </div>
<div className="w-full h-[317px] relative mt-[83px]"> <div className="w-full h-[317px] relative mt-[83px]">
<img <img
className="absolute right-[20px] w-[742px] h-[317px]" className="absolute right-0 w-[742px] h-[317px]"
src="/home/img_Omnichannel.png" src="/home/img_Omnichannel.png"
alt="" alt=""
/> />
<div className="absolute w-[680px] text-[32px] top-[124px] left-[165px] text-[#333333] text-left font-semibold"> <div className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#333333] text-left font-semibold">
{ dict.allChannel } { dict.allChannel }
</div> </div>
<div className="absolute w-[680px] text-[32px] top-[169px] left-[165px] text-[#333333] text-left font-semibold"> <div className="absolute w-[680px] text-[32px] top-[169px] left-[105px] text-[#333333] text-left font-semibold">
{ dict.expandInfluence } { dict.expandInfluence }
</div> </div>
</div> </div>
<div className="w-full h-[317px] relative mt-[83px]"> <div className="w-full h-[317px] relative mt-[83px]">
<img <img
className="absolute left-[-194px] w-[881px] h-[357px]" className="absolute left-[-329px] w-[1250px] h-[357px]"
src="/home/img_3.png" src="/home/img_3.png"
alt="" alt=""
/> />
<div className="absolute w-[691px] text-[32px] top-[100px] right-[115px] text-[#333333] text-right font-semibold"> <div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">
{ dict.lightweightDeployment } { dict.lightweightDeployment }
</div> </div>
<div className="absolute w-[712px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold"> <div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">
{ dict.simplifyProcess } { dict.simplifyProcess }
</div> </div>
</div> </div>
@ -163,14 +163,12 @@ export default async function Home (props: PropsType) {
<div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]"> <div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]">
{ {
caseList.map((item: CaseType, index: number) => { caseList.map((item: CaseType, index: number) => {
return <div key={'key'+index} className="cursor-pointer relative group mb-[50px]" style={{ width: 'calc(25% - 37.5px)' }}> return <div key={'key'+index} className="cursor-pointer relative group mb-[60px]">
<div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] h-full'> <div className='hover:scale-[1.25] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]'>
<img <img
className="rounded-[60px] w-full className="rounded-[60px] w-full
transition ease-in-out duration-300" transition ease-in-out duration-300 w-[280px] h-[280px]"
src={item.img} src={item.img}
width={300}
height={300}
alt="" alt=""
/> />
<div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center <div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center

8
src/app/components/header.tsx
View File

@ -19,10 +19,8 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
useEffect(() => { useEffect(() => {
const designWidth = 1440; const designWidth = 1440;
const deviceWidth = window.innerWidth; const deviceWidth = window.innerWidth;
let scale = 1920 / designWidth let scale = 1
if (deviceWidth >= 1440 && deviceWidth <= 1920) { if (deviceWidth <= 1440) {
scale = deviceWidth / designWidth;
} else if (deviceWidth < 1440) {
scale = deviceWidth / designWidth; scale = deviceWidth / designWidth;
} }
document.documentElement.style.fontSize = `${scale * 14.4}px`; document.documentElement.style.fontSize = `${scale * 14.4}px`;
@ -80,7 +78,7 @@ 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-[40px] h-[80px] border-b-1 border-solid
border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] justify-between`} border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] justify-between`}
style={{ borderBottom: '1px solid #D8D8D8' }} style={{ borderBottom: '1px solid #D8D8D8' }}
> >

4
src/app/globals.css
View File

@ -2,12 +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;
} */ }