update: 滚动定位
parent
7a7e77617c
commit
854641b4fc
|
|
@ -13,9 +13,11 @@
|
|||
"@emotion/styled": "^11.13.0",
|
||||
"@formatjs/intl-localematcher": "^0.5.5",
|
||||
"@mui/material": "^6.1.3",
|
||||
"lib-flexible": "^0.3.2",
|
||||
"negotiator": "^0.6.3",
|
||||
"next": "14.2.15",
|
||||
"next-intl": "^3.21.1",
|
||||
"postcss-pxtorem": "^6.1.0",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@ importers:
|
|||
'@mui/material':
|
||||
specifier: ^6.1.3
|
||||
version: 6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
lib-flexible:
|
||||
specifier: ^0.3.2
|
||||
version: 0.3.2
|
||||
negotiator:
|
||||
specifier: ^0.6.3
|
||||
version: 0.6.3
|
||||
|
|
@ -29,6 +32,9 @@ importers:
|
|||
next-intl:
|
||||
specifier: ^3.21.1
|
||||
version: 3.21.1(next@14.2.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
|
||||
postcss-pxtorem:
|
||||
specifier: ^6.1.0
|
||||
version: 6.1.0(postcss@8.4.47)
|
||||
react:
|
||||
specifier: ^18
|
||||
version: 18.3.1
|
||||
|
|
@ -1279,6 +1285,9 @@ packages:
|
|||
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
lib-flexible@0.3.2:
|
||||
resolution: {integrity: sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==}
|
||||
|
||||
lilconfig@2.1.0:
|
||||
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -1510,6 +1519,11 @@ packages:
|
|||
peerDependencies:
|
||||
postcss: ^8.2.14
|
||||
|
||||
postcss-pxtorem@6.1.0:
|
||||
resolution: {integrity: sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==}
|
||||
peerDependencies:
|
||||
postcss: ^8.0.0
|
||||
|
||||
postcss-selector-parser@6.1.2:
|
||||
resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
|
||||
engines: {node: '>=4'}
|
||||
|
|
@ -3354,6 +3368,8 @@ snapshots:
|
|||
prelude-ls: 1.2.1
|
||||
type-check: 0.4.0
|
||||
|
||||
lib-flexible@0.3.2: {}
|
||||
|
||||
lilconfig@2.1.0: {}
|
||||
|
||||
lilconfig@3.1.2: {}
|
||||
|
|
@ -3568,6 +3584,10 @@ snapshots:
|
|||
postcss: 8.4.47
|
||||
postcss-selector-parser: 6.1.2
|
||||
|
||||
postcss-pxtorem@6.1.0(postcss@8.4.47):
|
||||
dependencies:
|
||||
postcss: 8.4.47
|
||||
|
||||
postcss-selector-parser@6.1.2:
|
||||
dependencies:
|
||||
cssesc: 3.0.0
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@
|
|||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
'postcss-pxtorem': {
|
||||
rootValue: 14.4, // 默认的根元素字体大小
|
||||
unitPrecision: 5, // 单位转换后保留的精度
|
||||
propList: ['*'], // 转换哪些属性，'*' 表示全部
|
||||
selectorBlackList: [], // 不转换的类名
|
||||
minPixelValue: 0, // 小于或等于`1px`的不转换为`rem`
|
||||
mediaQuery: false, // 允许在媒体查询中转换`px`
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -41,15 +41,20 @@ export default async function Home (props: PropsType) {
|
|||
{ img: '/home/case_3.png' },
|
||||
]
|
||||
return <>
|
||||
<div className='w-full'>
|
||||
<div className='w-full flex flex-col items-center'>
|
||||
<Header dict={dict} lang={lang} />
|
||||
<section id="home"></section>
|
||||
<div className="w-[1440px] relative container pt-[80px]"
|
||||
<div className="w-[1440px] relative pt-[80px]"
|
||||
>
|
||||
<div className='main'>
|
||||
<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] pl-[72px] relative" id="home">
|
||||
<img
|
||||
className="absolute right-0 w-[1520px] h-[770px]"
|
||||
src="/home/img_header.png"
|
||||
alt=""
|
||||
|
||||
/>
|
||||
<div
|
||||
className="text-[46px] leading-[62px] w-[585px] text-center"
|
||||
className="text-[46px] leading-[62px] w-[585px] text-center pt-[279px]"
|
||||
>
|
||||
<div
|
||||
className="font-black"
|
||||
|
|
@ -69,15 +74,12 @@ export default async function Home (props: PropsType) {
|
|||
}}>
|
||||
{dict.goOverseas}
|
||||
</div>
|
||||
<section id="service"></section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-[428px] relative">
|
||||
<div className="w-full h-[428px] relative" id="service">
|
||||
<img
|
||||
className="absolute left-[-140px]"
|
||||
className="absolute left-[-140px] w-[745px] h-[428px]"
|
||||
src="/home/img_bg2.png"
|
||||
width={745}
|
||||
height={428}
|
||||
alt=""
|
||||
|
||||
/>
|
||||
|
|
@ -88,10 +90,8 @@ export default async function Home (props: PropsType) {
|
|||
|
||||
<div className="w-full h-[403px] relative">
|
||||
<img
|
||||
className="absolute right-[-30px]"
|
||||
className="absolute right-[-30px] w-[787px] h-[403px]"
|
||||
src="/home/img_AB.png"
|
||||
width={787}
|
||||
height={403}
|
||||
alt=""
|
||||
|
||||
/>
|
||||
|
|
@ -104,10 +104,8 @@ export default async function Home (props: PropsType) {
|
|||
</div>
|
||||
<div className="w-full h-[392px] relative">
|
||||
<img
|
||||
className="absolute"
|
||||
className="absolute w-[731px] h-[392px]"
|
||||
src="/home/img_mutilan.png"
|
||||
width={731}
|
||||
height={392}
|
||||
alt=""
|
||||
|
||||
/>
|
||||
|
|
@ -120,10 +118,8 @@ export default async function Home (props: PropsType) {
|
|||
</div>
|
||||
<div className="w-full h-[317px] relative mt-[83px]">
|
||||
<img
|
||||
className="absolute right-[20px]"
|
||||
className="absolute right-[20px] w-[742px] h-[317px]"
|
||||
src="/home/img_Omnichannel.png"
|
||||
width={742}
|
||||
height={317}
|
||||
alt=""
|
||||
|
||||
/>
|
||||
|
|
@ -137,10 +133,8 @@ export default async function Home (props: PropsType) {
|
|||
|
||||
<div className="w-full h-[317px] relative mt-[83px]">
|
||||
<img
|
||||
className="absolute left-[-194px]"
|
||||
className="absolute left-[-194px] w-[881px] h-[357px]"
|
||||
src="/home/img_3.png"
|
||||
width={881}
|
||||
height={357}
|
||||
alt=""
|
||||
|
||||
/>
|
||||
|
|
@ -152,8 +146,7 @@ export default async function Home (props: PropsType) {
|
|||
{ dict.simplifyProcess }
|
||||
</div>
|
||||
</div>
|
||||
<section id="case"></section>
|
||||
<div className="w-full flex flex-col justify-center items-center mt-[98px]">
|
||||
<div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
|
||||
|
||||
<div
|
||||
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
|
||||
|
|
@ -199,8 +192,7 @@ export default async function Home (props: PropsType) {
|
|||
</div>
|
||||
|
||||
|
||||
<section id="contact">
|
||||
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]">
|
||||
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">
|
||||
<div
|
||||
className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
|
||||
style={{
|
||||
|
|
@ -218,7 +210,6 @@ export default async function Home (props: PropsType) {
|
|||
>
|
||||
{ dict.businessCooperation }info@soyootech.com
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<Footer dict={dict} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use client'
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
|
||||
|
||||
|
|
@ -15,6 +15,51 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
|
|||
const { dict, lang } = props
|
||||
const [activeTab, setActiveTab] = useState(dict.home)
|
||||
const [show, setShow] = useState(false)
|
||||
const [hash, setHash] = useState('#home')
|
||||
useEffect(() => {
|
||||
const designWidth = 1440;
|
||||
const deviceWidth = window.innerWidth;
|
||||
let scale = 1920 / designWidth
|
||||
if (deviceWidth >= 1440 && deviceWidth <= 1920) {
|
||||
scale = deviceWidth / designWidth;
|
||||
} else if (deviceWidth < 1440) {
|
||||
scale = deviceWidth / designWidth;
|
||||
}
|
||||
document.documentElement.style.fontSize = `${scale * 14.4}px`;
|
||||
switch (hash) {
|
||||
case '#home':
|
||||
const home = document.getElementById('home')
|
||||
document.documentElement.scrollTo({
|
||||
top: home!.offsetTop - 80,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
break;
|
||||
case '#service':
|
||||
const service = document.getElementById('service')
|
||||
document.documentElement.scrollTo({
|
||||
top: service!.offsetTop - 80,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
break;
|
||||
case '#case':
|
||||
const caseDom = document.getElementById('case')
|
||||
document.documentElement.scrollTo({
|
||||
top: caseDom!.offsetTop - 110,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
break;
|
||||
case '#contact':
|
||||
const contact = document.getElementById('contact')
|
||||
document.documentElement.scrollTo({
|
||||
top: contact!.offsetTop - 80,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}, [hash])
|
||||
|
||||
const navList: NavType[] = [
|
||||
{
|
||||
|
|
@ -36,31 +81,31 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
|
|||
]
|
||||
return (<>
|
||||
<div className={`flex items-center px-[55px] h-[80px] border-b-1 border-solid
|
||||
border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] container`}
|
||||
border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] justify-between`}
|
||||
style={{ borderBottom: '1px solid #D8D8D8' }}
|
||||
>
|
||||
<Link href="#home">
|
||||
<div className="cursor-pointer">
|
||||
<img
|
||||
className="w-[180px] h-[47px]"
|
||||
src="/common/logo.png"
|
||||
width={180}
|
||||
height={47}
|
||||
alt="logo"
|
||||
onClick={() => setHash('#home')}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
|
||||
>
|
||||
{
|
||||
navList.map((item: NavType) => (
|
||||
<Link href={item.href} key={item.name}>
|
||||
<div onClick={() => setHash(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="" /> :
|
||||
<img src="/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> :
|
||||
<div className="h-[8px]"></div>
|
||||
}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
@ -70,16 +115,13 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
|
|||
onClick={() => setShow(!show)}>
|
||||
<img
|
||||
src="/common/earth.png"
|
||||
width={16.5}
|
||||
height={16.5}
|
||||
className="w-[16.5px] h-[16.5px]"
|
||||
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'}`}
|
||||
className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'} w-[10px] h-[5px]`}
|
||||
src="/common/arrow.png"
|
||||
width={10}
|
||||
height={5}
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,66 +2,12 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
/* ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
} */
|
||||
|
||||
.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 */
|
||||
left: calc(50% - 770px);
|
||||
}
|
||||
}
|
||||
/* 当屏幕宽度在1440px到1920px之间时 */
|
||||
@media screen and (min-width: 1540px) and (max-width: 1640px) {
|
||||
.container {
|
||||
transform: scale(1.138); /* 1440px宽度的1.333倍是1920px */
|
||||
left: calc(50% - 820px);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1640px) and (max-width: 1740px) {
|
||||
.container {
|
||||
transform: scale(1.208); /* 1440px宽度的1.333倍是1920px */
|
||||
left: calc(50% - 870px);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1740px) and (max-width: 1840px) {
|
||||
.container {
|
||||
transform: scale(1.277); /* 1440px宽度的1.333倍是1920px */
|
||||
left: calc(50% - 920px);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1840px) and (max-width: 1940px) {
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,7 @@
|
|||
import type { Metadata } from "next";
|
||||
import localFont from "next/font/local";
|
||||
import "./globals.css";
|
||||
import { ReactElement, ReactNode } from "react";
|
||||
|
||||
const geistSans = localFont({
|
||||
src: "./fonts/GeistVF.woff",
|
||||
variable: "--font-geist-sans",
|
||||
weight: "100 900",
|
||||
});
|
||||
const geistMono = localFont({
|
||||
src: "./fonts/GeistMonoVF.woff",
|
||||
variable: "--font-geist-mono",
|
||||
weight: "100 900",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "北京索游科技",
|
||||
|
|
@ -23,7 +12,6 @@ function RootLayout({ children }:{ children: ReactNode } ): ReactElement {
|
|||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue