Skip to content

Commit 971b88a

Browse files
zyckxzyckx
committed
feat: 修改font-size标准以及增加顶部菜单栏的隐藏消失
1 parent 6388d23 commit 971b88a

File tree

6 files changed

+78
-44
lines changed

6 files changed

+78
-44
lines changed

‎components/FixedBtn/FixedBtn.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ const FixedBtn: NextPage = () => {
1616

1717
// 滚动事件处理函数
1818
const handlerScroll = () => {
19-
const scrollTop =
20-
document.documentElement.scrollTop || document.body.scrollTop
19+
const scrollTop =document.documentElement.scrollTop || document.body.scrollTop
2120
if (scrollTop > 830) {
2221
setIsShow(true)
2322
} else {

‎components/NavBar/NavBar.module.scss

+20-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
.nav {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
right: 0;
6+
transition: all 0.2s;
7+
transform: translate3d(0, 0, 0);
28
width: 100%;
3-
height: 58px;
9+
height:5rem;
410
background: var(--primary-color);
511
box-shadow: 0 0 10x var(--shadow-color);
6-
12+
&.hide{
13+
transform: translateY(-100%);
14+
}
715
.nav_wrapper {
8-
width: 90rem /* 1440/16 */;
16+
max-width: 1440px;
917
height: 100%;
10-
margin: 0 auto;
18+
margin: auto;
1119
display: flex;
1220
justify-content: space-between;
1321
align-items: center;
@@ -34,16 +42,18 @@
3442

3543
.nav__menu__item {
3644
position: relative;
37-
height: 58px;
38-
line-height: 58px;
45+
height: 60px;
46+
line-height: 60px;
3947
list-style: none;
4048
margin-left: 1.25rem;
41-
font-size: 1rem;
49+
font-size: 1.167rem;;
4250
font-weight: 500;
4351
color: var(--primary-text-color);
4452
cursor: pointer;
4553
box-sizing: border-box;
4654
transition: width 0.5s ease-in-out;
55+
//设置不换行
56+
white-space: nowrap;
4757
@keyframes expand {
4858
0% {
4959
width: 0;
@@ -57,7 +67,7 @@
5767
color: var(--primary-text-color);
5868
}
5969
&::after {
60-
content: '';
70+
content: "";
6171
display: block;
6272
position: absolute;
6373
left: 50%;
@@ -97,6 +107,8 @@
97107
font-size: 1rem;
98108
font-weight: 500;
99109
color: var(--primary-text-color);
110+
white-space: nowrap;
111+
100112
}
101113
}
102114
}

‎components/NavBar/NavBar.tsx

+47-33
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { NextPage } from 'next'
2-
import Image from 'next/image'
3-
import styles from './NavBar.module.scss'
4-
import { useContext, useEffect, useState } from 'react'
5-
import { ThemeContext } from '@/stores/theme'
6-
import { Themes } from '@/constants/enum'
7-
import { usePathname } from 'next/navigation'
1+
import { NextPage } from "next"
2+
import Image from "next/image"
3+
import styles from "./NavBar.module.scss"
4+
import { useContext, useEffect, useState } from "react"
5+
import { ThemeContext } from "@/stores/theme"
6+
import { Themes } from "@/constants/enum"
7+
import { usePathname } from "next/navigation"
88

99
export interface INavBarItemProps {
1010
id: number
@@ -17,9 +17,9 @@ export interface INavBarProps {
1717
}
1818

1919
const NavBar: NextPage<INavBarProps> = ({ NavData }) => {
20-
20+
const [IsHide, setIsHide] = useState<boolean>(false)
2121
const { theme, setTheme } = useContext(ThemeContext)
22-
const [searchQuery, setSearchQuery] = useState<string>('')
22+
const [searchQuery, setSearchQuery] = useState<string>("")
2323
const [IsFocus, setIsFocus] = useState<boolean>(false)
2424
const [IsActive, setIsActive] = useState<boolean>(false)
2525
const pathname = usePathname()
@@ -30,26 +30,37 @@ const NavBar: NextPage<INavBarProps> = ({ NavData }) => {
3030
const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
3131
setSearchQuery(e.target.value)
3232
}
33-
const handleClick = (e:MouseEvent) => {
34-
if(!e.target) return;
33+
const handleClick = (e: MouseEvent) => {
34+
if (!e.target) return
3535
const target = e.target as HTMLElement
36-
if(target.classList.value.indexOf('more') === -1){
36+
if (target.classList.value.indexOf("more") === -1) {
3737
setIsActive(false)
3838
}
39-
40-
}
41-
useEffect(() => {
42-
document.addEventListener('click', handleClick)
43-
return () => {
44-
document.removeEventListener('click', handleClick)
4539
}
46-
})
40+
useEffect(() => {
41+
document.addEventListener("scroll", handlerScroll)
42+
document.addEventListener("click", handleClick)
4743

44+
return () => {
45+
document.removeEventListener("click", handleClick)
46+
document.addEventListener("scroll", handlerScroll)
47+
}
48+
})
49+
// 滚动事件处理函数
50+
const handlerScroll = () => {
51+
const scrollTop =
52+
document.documentElement.scrollTop || document.body.scrollTop
53+
if (scrollTop > 446) {
54+
setIsHide(true)
55+
} else {
56+
setIsHide(false)
57+
}
58+
}
4859

4960
//监听点击除了create__btn以外的地方
50-
61+
5162
return (
52-
<nav className={styles.nav}>
63+
<nav className={`${styles.nav} ${IsHide?styles.hide:''}`}>
5364
<div className={styles.nav_wrapper}>
5465
<div className={styles.nav__left}>
5566
<div className={styles.nav__logo}>
@@ -62,7 +73,7 @@ useEffect(() => {
6273
<li
6374
key={item.id}
6475
className={`${styles.nav__menu__item} ${
65-
pathname === item.url ? styles.active : ''
76+
pathname === item.url ? styles.active : ""
6677
}`}
6778
>
6879
<a href={item.url}>{item.name}</a>
@@ -77,16 +88,16 @@ useEffect(() => {
7788
</div>
7889
<div className={styles.nav__right}>
7990
<div
80-
className={`${styles.nav__search} ${IsFocus ? styles.focus : ''}`}
91+
className={`${styles.nav__search} ${IsFocus ? styles.focus : ""}`}
8192
>
8293
<input
8394
type="text"
84-
placeholder={IsFocus ? '文章、专栏、用户' : '搜索'}
95+
placeholder={IsFocus ? "文章、专栏、用户" : "搜索"}
8596
className={styles.nav__search__input}
8697
onChange={handleSearchInput}
8798
onFocus={() => setIsFocus(true)}
8899
onBlur={() => {
89-
if (searchQuery === '') {
100+
if (searchQuery === "") {
90101
setIsFocus(false)
91102
}
92103
}}
@@ -99,15 +110,18 @@ useEffect(() => {
99110
</div>
100111
<div className={styles.create__group}>
101112
<div
102-
className={`${styles.create__btn} ${IsFocus ? styles.focus : ''}`}
113+
className={`${styles.create__btn} ${IsFocus ? styles.focus : ""}`}
103114
>
104115
<button className={styles.add__btn}>创作者中心</button>
105-
<i className={styles.more} onClick={()=>{
106-
setIsActive(!IsActive)
107-
}}>
116+
<i
117+
className={styles.more}
118+
onClick={() => {
119+
setIsActive(!IsActive)
120+
}}
121+
>
108122
<svg
109123
className={`${styles.more__icon} ${
110-
IsActive ? styles.active : ''
124+
IsActive ? styles.active : ""
111125
}`}
112126
width="12"
113127
height="12"
@@ -116,15 +130,15 @@ useEffect(() => {
116130
xmlns="http://www.w3.org/2000/svg"
117131
>
118132
<path
119-
className='more__icon__path'
133+
className="more__icon__path"
120134
d="M2.45025 4.82383C2.17422 4.49908 2.40501 4 2.83122 4H9.16878C9.59499 4 9.82578 4.49908 9.54975 4.82382L6.38097 8.5518C6.1813 8.7867 5.8187 8.7867 5.61903 8.5518L2.45025 4.82383Z"
121135
fill="white"
122136
></path>
123137
</svg>
124138
</i>
125139
<ul
126140
className={`${styles.more__list} ${
127-
IsActive ? styles.active : ''
141+
IsActive ? styles.active : ""
128142
}`}
129143
>
130144
<li className={styles.more__item}>
@@ -152,7 +166,7 @@ useEffect(() => {
152166
<div className={styles.theme__wrapper}>
153167
<i
154168
className={`${styles.theme__icon} ${
155-
theme === Themes.light ? 'fas fa-moon' : 'fas fa-sun'
169+
theme === Themes.light ? "fas fa-moon" : "fas fa-sun"
156170
}`}
157171
onClick={(): void => {
158172
if (theme === Themes.light) {

‎styles/globals.scss

+4-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,10 @@ html[data-theme='light'] {
4444
}
4545

4646
html {
47-
font-size: 16px;
47+
font-size: 12px;
4848
scroll-behavior: smooth;
4949
background-color: var(--background-color);
5050
}
51+
body{
52+
word-break: break-word;
53+
}

‎tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"compilerOptions": {
3+
"noImplicitAny": false,
34
"target": "es5",
45
"lib": ["dom", "dom.iterable", "esnext"],
56
"allowJs": true,

‎utils/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,8 @@ export const getIsSupportWebp = (context: AppContext) => {
1414
const { headers = {} } = context.ctx.req || {};
1515
return headers.accept?.includes("image/webp");
1616
};
17+
18+
export const handlerScroll=()=>{
19+
console.log("到底了");
20+
21+
}

0 commit comments

Comments
 (0)