update:样式修改

style
icefire 2024-10-20 23:31:28 +08:00
parent 3dcabcef62
commit cecff52eea
6 changed files with 115 additions and 97 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 424 KiB

After

Width:  |  Height:  |  Size: 418 KiB

View File

@ -0,0 +1,17 @@
import Link from "next/link"
export default function More(props: {dict: Record<string, string>, lang: string[]}) {
const { dict, lang } = props
return <>
<Link href="#contact">
<div className="flex flex-col justify-center items-center
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] w-full h-full"
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
<div>{ dict.seeMore }</div>
<div>{ dict.contactUs1 }</div>
</div>
</Link>
</>
}

View File

@ -7,6 +7,7 @@ import { getDictionary } from '@/dictionaries';
import Form from "./components/form"; import Form from "./components/form";
import Header from "@/app/components/header"; import Header from "@/app/components/header";
import Footer from "@/app/components/footer"; import Footer from "@/app/components/footer";
import More from './components/more';
type CaseType = { type CaseType = {
img: string img: string
@ -40,10 +41,10 @@ export default async function Home (props: PropsType) {
{ img: '/home/case_3.png' }, { img: '/home/case_3.png' },
] ]
return <> return <>
<div className='w-full'> <div className='w-full' style={{overflow: 'hidden'}}>
<Header dict={dict} lang={lang} />
<div className="w-[1440px] relative container" <div className="w-[1440px] relative container"
> >
<Header dict={dict} lang={lang} />
<div className='main' style={{height: 'calc(100vh - 82px)', overflowY: "auto"}}> <div className='main' style={{height: 'calc(100vh - 82px)', overflowY: "auto"}}>
<section id="home"> <section id="home">
@ -161,7 +162,7 @@ export default async function Home (props: PropsType) {
WebkitTextFillColor: 'transparent' WebkitTextFillColor: 'transparent'
}} }}
>{ dict.caseGallery }</div> >{ dict.caseGallery }</div>
<div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> {/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
</div> </div>
</section> </section>
@ -191,8 +192,7 @@ export default async function Home (props: PropsType) {
<div className="flex flex-col justify-center items-center <div className="flex flex-col justify-center items-center
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px]" text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px]"
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)', width: 'calc(25% - 37.5px)' }}> style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)', width: 'calc(25% - 37.5px)' }}>
<div>{ dict.seeMore }</div> <More dict={dict} lang={lang} />
<div>{ dict.contactUs1 }</div>
</div> </div>
</div> </div>

View File

@ -12,7 +12,7 @@ export default function Footer(props: {dict: Record<string, string>}) {
height={151} height={151}
alt="" alt=""
/> />
<div className="text-[#888888] text-[15px]">{ dict.addWeChat }</div> <div className="text-[#888888] text-[15px] text-center">{ dict.addWeChat }</div>
</div> </div>
<div > <div >
<div className="text-[#AFB2B9] text-[17px] font-medium mb-[45px]">{ dict.emailContact }</div> <div className="text-[#AFB2B9] text-[17px] font-medium mb-[45px]">{ dict.emailContact }</div>

View File

@ -6,104 +6,99 @@ import { useState } from "react";
type NavType = { type NavType = {
name: string; name: string;
href: string; href: string;
} }
function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
const { dict, lang } = props export default function Header(props: { dict: Record<string, string>, lang: string[] }) {
const [show, setShow] = useState(false)
return <>
<div className="">
<div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6]
border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer"
onClick={() => setShow(!show)}>
<img
src="/common/earth.png"
width={16.5}
height={16.5}
alt="logo"
/>
<div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{ dict?.lang }</div>
<img
className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'}`}
src="/common/arrow.png"
width={10}
height={5}
alt="logo"
/>
</div>
{
<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' : '/'}>
<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`}>
<div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
</div>
</Link>
</div>
}
</div>
</>
}
export default function Header(props: {dict: Record<string, string>, lang: string[]}) {
const { dict, lang } = props const { dict, lang } = props
const [activeTab, setActiveTab] = useState(dict.home) const [activeTab, setActiveTab] = useState(dict.home)
const navList: NavType[] = [ const [show, setShow] = useState(false)
const navList: NavType[] = [
{
name: dict.home,
href: "#home"
},
{
name: dict.services,
href: "#service"
},
{
name: dict.caseGallery,
href: "#case"
},
{
name: dict.contactUs,
href: "#contact"
},
]
return (<>
<div className={`flex items-center px-[55px] h-[80px] border-b-1 border-solid
border-[#D8D8D8] absolute bg-white z-[900] w-[1440px] container`}
style={{ borderBottom: '1px solid #D8D8D8' }}
>
<Link href="#home">
<img
src="/common/logo.png"
width={180}
height={47}
alt="logo"
/>
</Link>
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
>
{ {
name: dict.home, navList.map((item: NavType) => (
href: "#home" <Link href={item.href} key={item.name}>
}, <div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
{ <div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
name: dict.services, {
href: "#service" activeTab === item.name ?
}, <img src="/common/tab_checked.png" width={144} height={8} alt="" /> :
{ <div className="h-[8px]"></div>
name: dict.caseGallery, }
href: "#case" </div>
}, </Link>
{ ))
name: dict.contactUs, }
href: "#contact " </div>
}, <div className="w-[129px]">
] <div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6]
return (<> border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer"
<div className={"flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8] absolute w-full bg-white z-[999]"} onClick={() => setShow(!show)}>
style={{ borderBottom: '1px solid #D8D8D8' }}
>
<Link href="#home">
<img <img
src="/common/logo.png" src="/common/earth.png"
width={180} width={16.5}
height={47} height={16.5}
alt="logo"
/>
<div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{dict?.lang}</div>
<img
className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'}`}
src="/common/arrow.png"
width={10}
height={5}
alt="logo" alt="logo"
/> />
</Link>
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
>
{
navList.map((item: NavType) => (
<Link href={item.href} key={item.name}>
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
<div className="my-[10px] w-[144px] text-[18px]">{ item.name }</div>
{
activeTab === item.name ?
<img src="/common/tab_checked.png" width={144} height={8} alt="" /> :
<div className="h-[8px]"></div>
}
</div>
</Link>
))
}
</div> </div>
<div className="w-[129px]"> {
<SplitButton dict={dict} lang={lang} />
</div> <div className={`absolute ${!show && 'hidden'} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}>
</div> <Link href={lang[0] === 'zh' ? '/en' : '/'}>
<div className="h-[80px]"></div> <div className={`absolute right-[55px] top-[68px] w-[129px] h-[28px] leading-[28px]
</> bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}>
) <div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
</div>
</Link>
</div>
}
</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>
</>
)
} }

View File

@ -21,6 +21,9 @@
transform: scale(1.333); /* 1440px宽度的1.333倍是1920px */ transform: scale(1.333); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 960px); left: calc(50% - 960px);
} }
.mn {
transform: scaleY(1 /1.333)
}
} }
/* 当屏幕宽度大于或等于1920px时 */ /* 当屏幕宽度大于或等于1920px时 */
@ -29,4 +32,7 @@
transform: scale(1.333); /* 保持与1920px宽度的屏幕相同的缩放比例 */ transform: scale(1.333); /* 保持与1920px宽度的屏幕相同的缩放比例 */
left: calc(50% - 960px); left: calc(50% - 960px);
} }
.mn {
transform: scaleY(1 /1.333)
}
} }