guofei
/
addseed-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

main
guofei 2024-10-23 17:42:51 +08:00
parent 43ac7d2f48
commit 64e9644e8c
3 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -31,4 +31,4 @@
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
}

45
src/app/components/header.tsx
View File

@ -12,16 +12,20 @@ export default function Header(props: { dict: Record<string, string>; lang: stri
const [activeTab, setActiveTab] = useState(dict.home);
const [show, setShow] = useState(false);
const [hash, setHash] = useState("#home");
useEffect(() => {
const designWidth = 1440;
const deviceWidth = document.documentElement.clientWidth;
let scale = 1;
console.log("designWidth", deviceWidth);
if (deviceWidth <= 1440) {
scale = deviceWidth / designWidth;
}
console.log("scale", scale);
document.documentElement.style.fontSize = `${scale * 14.4}px`;
// const designWidth = 1440;
// const deviceWidth = document.documentElement.clientWidth;
// let scale = 1;
// console.log("designWidth", deviceWidth);
// if (deviceWidth <= 1440) {
// scale = deviceWidth / designWidth;
// }
// console.log("scale", scale);
// document.documentElement.style.fontSize = `${scale * 14.4}px`;
}, [hash]);
const handleJumpTo = (hash: string) => {
switch (hash) {
case "#home":
const home = document.getElementById("home");
@ -52,7 +56,7 @@ export default function Header(props: { dict: Record<string, string>; lang: stri
});
break;
}
}, [hash]);
};
const navList: NavType[] = [
{
@ -84,10 +88,19 @@ export default function Header(props: { dict: Record<string, string>; lang: stri
</div>
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"}>
{navList.map((item: NavType) => (
<div onClick={() => setHash(item.href)} key={item.name}>
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
<div onClick={() => handleJumpTo(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="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> : <div className="h-[8px]"></div>}
{activeTab === item.name ? (
<img src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" />
) : (
<div className="h-[8px]"></div>
)}
</div>
</div>
))}
@ -100,7 +113,11 @@ export default function Header(props: { dict: Record<string, string>; lang: stri
>
<img src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/earth.png" 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"} w-[10px] h-[5px]`} src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/arrow.png" alt="logo" />
<img
className={`transition-transform duration-300 transform rotate-0 ${show && "rotate-180"} w-[10px] h-[5px]`}
src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/arrow.png"
alt="logo"
/>
</div>
{
<div className={`absolute ${!show && "hidden"} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}>

14
src/app/globals.css
View File

@ -2,11 +2,15 @@
@tailwind components;
@tailwind utilities;
::-webkit-scrollbar {
display: none;
html::-webkit-scrollbar {
width: 8px;
}
.main {
-ms-overflow-style: none;
scrollbar-width: none;
html::-webkit-scrollbar-thumb {
background-color: rgba(169, 169, 169, 0.729);
border-radius: 10px;
}
html::-webkit-scrollbar-track {
background: #fff;
}