update: 适配移动端

style
icefire 2024-10-21 15:25:49 +08:00
parent 078e3745d8
commit 7a7e77617c
8 changed files with 174 additions and 159 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 340 KiB

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 229 KiB

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

View File

@ -43,11 +43,10 @@ export default async function Home (props: PropsType) {
return <>
<div className='w-full'>
<Header dict={dict} lang={lang} />
<div className="w-[1440px] relative container"
<section id="home"></section>
<div className="w-[1440px] relative container pt-[80px]"
>
<div className='main'>
<section id="home">
<div className="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[72px]">
<div
className="text-[46px] leading-[62px] w-[585px] text-center"
@ -70,12 +69,12 @@ export default async function Home (props: PropsType) {
}}>
{dict.goOverseas}
</div>
<section id="service"></section>
</div>
</div>
</section>
<section id="service">
<div className="w-full h-[428px] relative">
<img
className="absolute left-[-140px]"
src="/home/img_bg2.png"
width={745}
height={428}
@ -86,10 +85,10 @@ export default async function Home (props: PropsType) {
{ dict.customized }
</div>
</div>
</section>
<div className="w-full h-[403px] relative">
<img
className="absolute right-[0]"
className="absolute right-[-30px]"
src="/home/img_AB.png"
width={787}
height={403}
@ -107,7 +106,7 @@ export default async function Home (props: PropsType) {
<img
className="absolute"
src="/home/img_mutilan.png"
width={698}
width={731}
height={392}
alt=""
@ -121,7 +120,7 @@ export default async function Home (props: PropsType) {
</div>
<div className="w-full h-[317px] relative mt-[83px]">
<img
className="absolute right-[0]"
className="absolute right-[20px]"
src="/home/img_Omnichannel.png"
width={742}
height={317}
@ -135,10 +134,10 @@ export default async function Home (props: PropsType) {
{ dict.expandInfluence }
</div>
</div>
<section id="case">
<div className="w-full h-[317px] relative mt-[83px]">
<img
className="absolute"
className="absolute left-[-194px]"
src="/home/img_3.png"
width={881}
height={357}
@ -148,12 +147,14 @@ export default async function Home (props: PropsType) {
<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
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
style={{
@ -163,8 +164,8 @@ export default async function Home (props: PropsType) {
}}
>{ dict.caseGallery }</div>
{/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
</div>
</section>
<div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]">
{
@ -186,6 +187,7 @@ export default async function Home (props: PropsType) {
{dict.clickToPlay}
</div>
</div>
</div>
})
}
@ -196,6 +198,7 @@ export default async function Home (props: PropsType) {
</div>
</div>
<section id="contact">
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]">
<div

View File

@ -97,8 +97,8 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
}
</div>
</div>
<div className={`${!show && 'hidden'} absolute bg-[#000000] opacity-[0] left-0 top-0 bottom-0 right-0 z-[899]`} onClick={() => setShow(false)}></div>
<div className="h-[80px] container"></div>
<div className={`${!show && 'hidden'} fixed bg-[#000000] opacity-[0] left-0 top-0 bottom-0 right-0 z-[899]`} onClick={() => setShow(false)}></div>
{/* <div className="h-[80px] container"></div> */}
</>
)
}

View File

@ -14,6 +14,18 @@
.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 */