update:样式调整
parent
854641b4fc
commit
b3a8d2abee
|
@ -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
|
||||||
|
|
|
@ -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' }}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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;
|
||||||
} */
|
}
|
||||||
|
|
Loading…
Reference in New Issue