update: 屏幕宽度自适应
parent
da158c84ff
commit
3dcabcef62
|
@ -41,8 +41,11 @@ export default async function Home (props: PropsType) {
|
||||||
]
|
]
|
||||||
return <>
|
return <>
|
||||||
<div className='w-full'>
|
<div className='w-full'>
|
||||||
<div className="w-min-[1440px] w-max-[1920px] mx-auto">
|
<div className="w-[1440px] relative container"
|
||||||
|
>
|
||||||
<Header dict={dict} lang={lang} />
|
<Header dict={dict} lang={lang} />
|
||||||
|
<div className='main' style={{height: 'calc(100vh - 82px)', overflowY: "auto"}}>
|
||||||
|
|
||||||
<section id="home">
|
<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="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[72px]">
|
||||||
<div
|
<div
|
||||||
|
@ -162,13 +165,13 @@ export default async function Home (props: PropsType) {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div className="w-full px-[40px] flex flex-wrap justify-center gap-[50px] 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">
|
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]'>
|
<div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] h-full'>
|
||||||
<img
|
<img
|
||||||
className="rounded-[60px]
|
className="rounded-[60px] w-full
|
||||||
transition ease-in-out duration-300"
|
transition ease-in-out duration-300"
|
||||||
src={item.img}
|
src={item.img}
|
||||||
width={300}
|
width={300}
|
||||||
|
@ -185,9 +188,9 @@ export default async function Home (props: PropsType) {
|
||||||
</div>
|
</div>
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
<div className="w-[300px] h-[300px] flex flex-col justify-center items-center
|
<div className="flex flex-col justify-center items-center
|
||||||
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px]"
|
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px]"
|
||||||
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)'}}>
|
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)', width: 'calc(25% - 37.5px)' }}>
|
||||||
<div>{ dict.seeMore }</div>
|
<div>{ dict.seeMore }</div>
|
||||||
<div>{ dict.contactUs1 }</div>
|
<div>{ dict.contactUs1 }</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -216,6 +219,7 @@ export default async function Home (props: PropsType) {
|
||||||
<div>
|
<div>
|
||||||
<Footer dict={dict} />
|
<Footer dict={dict} />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { useState } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
type NavType = {
|
type NavType = {
|
||||||
name: string;
|
name: string;
|
||||||
href: string;
|
href: string;
|
||||||
|
@ -12,6 +13,7 @@ type NavType = {
|
||||||
function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
|
function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
|
||||||
const { dict, lang } = props
|
const { dict, lang } = props
|
||||||
const [show, setShow] = useState(false)
|
const [show, setShow] = useState(false)
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<div className="">
|
<div className="">
|
||||||
<div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6]
|
<div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6]
|
||||||
|
@ -34,9 +36,9 @@ function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
|
|
||||||
<div className={`absolute ${!show && 'hidden'} w-[100vw] h-[100vh] left-0 top-0 z-[1000]`} onClick={() => setShow(false)}>
|
<div className={`absolute ${!show && 'hidden'} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[1000]`} onClick={() => setShow(false)}>
|
||||||
<Link href={lang[0] === 'zh' ? '/en' : '/'}>
|
<Link href={lang[0] === 'zh' ? '/en' : '/'}>
|
||||||
<div className={`absolute right-[40px] top-[68px] w-[129px] h-[28px]
|
<div className={`absolute right-[20px] top-[68px] w-[129px] h-[28px] leading-[28px]
|
||||||
bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}>
|
bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}>
|
||||||
<div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
|
<div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -69,16 +71,19 @@ export default function Header(props: {dict: Record<string, string>, lang: strin
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
return (<>
|
return (<>
|
||||||
<div className={"flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8] fixed w-full bg-white z-[999]"}
|
<div className={"flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8] absolute w-full bg-white z-[999]"}
|
||||||
style={{ borderBottom: '1px solid #D8D8D8' }}
|
style={{ borderBottom: '1px solid #D8D8D8' }}
|
||||||
>
|
>
|
||||||
<img
|
<Link href="#home">
|
||||||
src="/common/logo.png"
|
<img
|
||||||
width={180}
|
src="/common/logo.png"
|
||||||
height={47}
|
width={180}
|
||||||
alt="logo"
|
height={47}
|
||||||
/>
|
alt="logo"
|
||||||
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"}>
|
/>
|
||||||
|
</Link>
|
||||||
|
<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}>
|
<Link href={item.href} key={item.name}>
|
||||||
|
@ -94,8 +99,7 @@ export default function Header(props: {dict: Record<string, string>, lang: strin
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="">
|
<div className="w-[129px]">
|
||||||
|
|
||||||
<SplitButton dict={dict} lang={lang} />
|
<SplitButton dict={dict} lang={lang} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,4 +2,31 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.main::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
transform-origin: top left; /* 设置变换原点为左上角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当屏幕宽度在1440px到1920px之间时 */
|
||||||
|
@media screen and (min-width: 1440px) and (max-width: 1920px) {
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
|
@ -28,5 +28,5 @@
|
||||||
"privacyPolicy": "隐私条款",
|
"privacyPolicy": "隐私条款",
|
||||||
"userAgreement": "用户协议",
|
"userAgreement": "用户协议",
|
||||||
"productPricing": "产品定价",
|
"productPricing": "产品定价",
|
||||||
"clickToPlay": "点击游玩"
|
"clickToPlay": "点击试玩"
|
||||||
}
|
}
|
Loading…
Reference in New Issue