update:样式调整

style
icefire 2024-10-21 21:22:44 +08:00
parent 854641b4fc
commit b3a8d2abee
3 changed files with 24 additions and 28 deletions

View File

@ -48,13 +48,13 @@ export default async function Home (props: PropsType) {
<div className='main'>
<div className="w-full h-[770px] pl-[72px] relative" id="home">
<img
className="absolute right-0 w-[1520px] h-[770px]"
className="absolute right-[-40px] w-[1520px] h-[770px]"
src="/home/img_header.png"
alt=""
/>
<div
className="text-[46px] leading-[62px] w-[585px] text-center pt-[279px]"
className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px]"
>
<div
className="font-black"
@ -78,71 +78,71 @@ export default async function Home (props: PropsType) {
</div>
<div className="w-full h-[428px] relative" id="service">
<img
className="absolute left-[-140px] w-[745px] h-[428px]"
className="absolute left-[-214px] w-[969px] h-[428px]"
src="/home/img_bg2.png"
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 }
</div>
</div>
<div className="w-full h-[403px] relative">
<img
className="absolute right-[-30px] w-[787px] h-[403px]"
className="absolute right-[-100px] w-[888px] 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">
<div className="absolute w-[662px] text-[32px] top-[160px] left-[105px] 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">
<div className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">
{ dict.iterateGameplay }
</div>
</div>
<div className="w-full h-[392px] relative">
<img
className="absolute w-[731px] h-[392px]"
className="absolute w-[731px] h-[392px] left-[-33px]"
src="/home/img_mutilan.png"
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 }
</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 }
</div>
</div>
<div className="w-full h-[317px] relative mt-[83px]">
<img
className="absolute right-[20px] w-[742px] h-[317px]"
className="absolute right-0 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">
<div className="absolute w-[680px] text-[32px] top-[124px] left-[105px] 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">
<div className="absolute w-[680px] text-[32px] top-[169px] left-[105px] 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]"
className="absolute left-[-329px] w-[1250px] 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">
<div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] 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">
<div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">
{ dict.simplifyProcess }
</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]">
{
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'>
return <div key={'key'+index} className="cursor-pointer relative group mb-[60px]">
<div className='hover:scale-[1.25] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]'>
<img
className="rounded-[60px] w-full
transition ease-in-out duration-300"
transition ease-in-out duration-300 w-[280px] h-[280px]"
src={item.img}
width={300}
height={300}
alt=""
/>
<div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center

View File

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

View File

@ -2,12 +2,12 @@
@tailwind components;
@tailwind utilities;
/* ::-webkit-scrollbar {
::-webkit-scrollbar {
display: none;
}
.main {
-ms-overflow-style: none;
scrollbar-width: none;
} */
}