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", "tailwindcss": "^3.4.1",
"typescript": "^5" "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 [activeTab, setActiveTab] = useState(dict.home);
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [hash, setHash] = useState("#home"); const [hash, setHash] = useState("#home");
useEffect(() => { useEffect(() => {
const designWidth = 1440; // const designWidth = 1440;
const deviceWidth = document.documentElement.clientWidth; // const deviceWidth = document.documentElement.clientWidth;
let scale = 1; // let scale = 1;
console.log("designWidth", deviceWidth); // console.log("designWidth", deviceWidth);
if (deviceWidth <= 1440) { // if (deviceWidth <= 1440) {
scale = deviceWidth / designWidth; // scale = deviceWidth / designWidth;
} // }
console.log("scale", scale); // console.log("scale", scale);
document.documentElement.style.fontSize = `${scale * 14.4}px`; // document.documentElement.style.fontSize = `${scale * 14.4}px`;
}, [hash]);
const handleJumpTo = (hash: string) => {
switch (hash) { switch (hash) {
case "#home": case "#home":
const home = document.getElementById("home"); const home = document.getElementById("home");
@ -52,7 +56,7 @@ export default function Header(props: { dict: Record<string, string>; lang: stri
}); });
break; break;
} }
}, [hash]); };
const navList: NavType[] = [ const navList: NavType[] = [
{ {
@ -84,10 +88,19 @@ export default function Header(props: { dict: Record<string, string>; lang: stri
</div> </div>
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"}> <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}>
{navList.map((item: NavType) => ( {navList.map((item: NavType) => (
<div onClick={() => setHash(item.href)} key={item.name}> <div onClick={() => handleJumpTo(item.href)} key={item.name}>
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}> <div
className="text-center cursor-pointer"
onClick={() => {
setActiveTab(item.name);
}}
>
<div className="my-[10px] w-[144px] text-[18px]">{item.name}</div> <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>
</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" /> <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> <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>
{ {
<div className={`absolute ${!show && "hidden"} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}> <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 components;
@tailwind utilities; @tailwind utilities;
::-webkit-scrollbar { html::-webkit-scrollbar {
display: none; width: 8px;
} }
.main { html::-webkit-scrollbar-thumb {
-ms-overflow-style: none; background-color: rgba(169, 169, 169, 0.729);
scrollbar-width: none; border-radius: 10px;
}
html::-webkit-scrollbar-track {
background: #fff;
} }