From 854641b4fcf5d536904fb00535666f93d7509c14 Mon Sep 17 00:00:00 2001 From: icefire <1028247921@qq.com> Date: Mon, 21 Oct 2024 17:56:41 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E6=BB=9A=E5=8A=A8=E5=AE=9A=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + pnpm-lock.yaml | 20 +++ postcss.config.mjs | 8 + src/app/[[...lang]]/page.tsx | 321 +++++++++++++++++----------------- src/app/components/header.tsx | 70 ++++++-- src/app/globals.css | 60 +------ src/app/layout.tsx | 12 -- 7 files changed, 245 insertions(+), 248 deletions(-) diff --git a/package.json b/package.json index 1ed6bcf..37205af 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2bb35d9..b9e24d8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/postcss.config.mjs b/postcss.config.mjs index 1a69fd2..ad4dadc 100644 --- a/postcss.config.mjs +++ b/postcss.config.mjs @@ -2,6 +2,14 @@ const config = { plugins: { tailwindcss: {}, + 'postcss-pxtorem': { + rootValue: 14.4, // 默认的根元素字体大小 + unitPrecision: 5, // 单位转换后保留的精度 + propList: ['*'], // 转换哪些属性，'*' 表示全部 + selectorBlackList: [], // 不转换的类名 + minPixelValue: 0, // 小于或等于`1px`的不转换为`rem` + mediaQuery: false, // 允许在媒体查询中转换`px` + } }, }; diff --git a/src/app/[[...lang]]/page.tsx b/src/app/[[...lang]]/page.tsx index 24d461c..82328bd 100644 --- a/src/app/[[...lang]]/page.tsx +++ b/src/app/[[...lang]]/page.tsx @@ -41,188 +41,179 @@ export default async function Home (props: PropsType) { { img: '/home/case_3.png' }, ] return <> -
+
-
-
-
-
-
+
+
+
- {dict.FocusingOnPlayableAds} + className="text-[46px] leading-[62px] w-[585px] text-center pt-[279px]" + > +
+ {dict.FocusingOnPlayableAds} +
+
+ {dict.goOverseas} +
-
- {dict.goOverseas} -
-
-
-
- + +
+ { dict.customized } +
+
+ +
+ +
+ { dict.ABTesting} +
+
+ { dict.iterateGameplay } +
+
+
+ +
+ { dict.multiLanguage } +
+
+ { dict.breakingGeographical } +
+
+
+ +
+ { dict.allChannel } +
+
+ { dict.expandInfluence } +
+
+ +
+ +
+ { dict.lightweightDeployment } +
+ +
+ { dict.simplifyProcess } +
+
+
+ +
{ dict.caseGallery }
+ {/*
{ dict.clickNow }
*/} + +
+ +
+ { + caseList.map((item: CaseType, index: number) => { + return
+
+ +
+ {dict.clickToPlay} +
+
+ +
+ }) + } +
+ +
+
- /> -
- { dict.customized } -
-
-
- -
- { dict.ABTesting} -
-
- { dict.iterateGameplay } -
-
-
- -
- { dict.multiLanguage } -
-
- { dict.breakingGeographical } -
-
-
- -
- { dict.allChannel } -
-
- { dict.expandInfluence } -
-
- -
- -
- { dict.lightweightDeployment } -
- -
- { dict.simplifyProcess } -
-
-
-
- +
{ dict.caseGallery }
- {/*
{ dict.clickNow }
*/} - + >{ dict.contactUs }
+
+
+
- -
- { - caseList.map((item: CaseType, index: number) => { - return
-
- -
- {dict.clickToPlay} -
-
- -
- }) - } -
- +
+ { dict.businessCooperation }info@soyootech.com
-
- - -
-
-
{ dict.contactUs }
-
-
- +
+
-
- { dict.businessCooperation }info@soyootech.com
-
-
-
-
-
diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx index 7cc93bc..05a8a77 100644 --- a/src/app/components/header.tsx +++ b/src/app/components/header.tsx @@ -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, 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, lang: stri ] return (<>
- +
logo setHash('#home')} /> - +
{ navList.map((item: NavType) => ( - +
setHash(item.href)} key={item.name}>
setActiveTab(item.name)}>
{item.name}
{ activeTab === item.name ? - : + :
}
- +
)) }
@@ -70,16 +115,13 @@ export default function Header(props: { dict: Record, lang: stri onClick={() => setShow(!show)}> logo
{dict?.lang}
logo
diff --git a/src/app/globals.css b/src/app/globals.css index ba08cee..2ac6c40 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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); - } - } \ No newline at end of file + } */ + \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 49f8461..7e0ffce 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 ( {children}