update:样式修改
parent
3dcabcef62
commit
cecff52eea
Binary file not shown.
Before Width: | Height: | Size: 424 KiB After Width: | Height: | Size: 418 KiB |
|
@ -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>
|
||||||
|
</>
|
||||||
|
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
|
@ -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)
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue