From 10c3629052ca58aed460f434b18ecbc32a2bbc87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com> Date: Thu, 22 Aug 2024 20:01:20 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=A1=B6=E9=83=A8=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 10 ++ package.json | 1 + src/app/layout.tsx | 8 +- src/app/page.tsx | 2 + src/assets/image/{logo.png => dark_logo.png} | Bin src/assets/image/light_logo.png | Bin 0 -> 17859 bytes src/components/Header/index.scss | 89 ++++++++++++ src/components/Header/index.tsx | 134 +++++++++++++++++++ src/components/Starry/index.tsx | 8 +- src/styles/index.scss | 5 + src/styles/var.scss | 15 +++ tailwind.config.ts | 9 +- 12 files changed, 271 insertions(+), 10 deletions(-) rename src/assets/image/{logo.png => dark_logo.png} (100%) create mode 100644 src/assets/image/light_logo.png create mode 100644 src/components/Header/index.scss create mode 100644 src/components/Header/index.tsx create mode 100644 src/styles/var.scss diff --git a/package-lock.json b/package-lock.json index 8bd42be..7923256 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "next": "14.2.5", "react": "^18", "react-dom": "^18", + "react-icons": "^5.3.0", "sass": "^1.77.8", "typed.js": "^2.1.0" }, @@ -1294,6 +1295,15 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmmirror.com/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 9f4a4fa..a2cba12 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "next": "14.2.5", "react": "^18", "react-dom": "^18", + "react-icons": "^5.3.0", "sass": "^1.77.8", "typed.js": "^2.1.0" }, diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 04f0670..6bd7daf 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,4 @@ -import type { Metadata } from "next"; +import Header from '@/components/Header' // 加载样式文件 import "@/styles/index.scss"; @@ -11,6 +11,7 @@ const LXGWWenKai = localFont({ display: 'swap', }) +import type { Metadata } from "next"; export const metadata: Metadata = { title: "宇阳 - 花有重开日，人无再少年!", description: "Generated by create next app", @@ -19,7 +20,10 @@ export const metadata: Metadata = { export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return ( - {children} + +
+ {children} + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 8e142ea..348b408 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,7 +6,9 @@ export default function Home() { return ( <> + {/* 星空背景组件 */} + {/* 打字机组件 */} diff --git a/src/assets/image/logo.png b/src/assets/image/dark_logo.png similarity index 100% rename from src/assets/image/logo.png rename to src/assets/image/dark_logo.png diff --git a/src/assets/image/light_logo.png b/src/assets/image/light_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..3c879cf3dec3a7edd025bc6b6cc0285701d6f34c GIT binary patch literal 17859 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 KUZw63^Zx+LvT0EO literal 0 HcmV?d00001 diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss new file mode 100644 index 0000000..8ed7782 --- /dev/null +++ b/src/components/Header/index.scss @@ -0,0 +1,89 @@ +@import "@/styles/var.scss"; + +.HeaderComponent { + .header { + position: fixed; + top: 0; + width: 100%; + height: 60px; + backdrop-filter: blur(5px); + transition: background-color $move; + z-index: 999; + + &::after { + content: ""; + display: block; + width: 100%; + height: 0; + background: linear-gradient(#fff, transparent 70%); + transition: background $move; + } + + // 二级导航 + .two { + display: none; + overflow: hidden; + position: absolute; + top: 50px; + width: 100%; + border-radius: $round; + background-color: #f9f9f9; + box-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08); + + .two_item { + .two_item_nav { + position: relative; + display: inline-block; + width: 100%; + padding: 10px; + padding-left: 10px; + font-size: 15px; + box-sizing: border-box; + color: #666; + transition: all $move; + + // 鼠标经过的小横线 + &::after { + content: ""; + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 3px; + background-color: $color; + transition: width $move; + } + } + + // 鼠标经过二级导航的效果 + &:hover .two_item_nav { + color: $color !important; + background-color: #f2f2f2; + padding-left: 30px; + + &:hover::after { + width: 10px; + } + } + } + } + + // 鼠标经过哪个，就让哪个二级导航显示 + &:hover .two { + display: block; + } + } + + .bg { + border-bottom: 1px solid #eee; + background-color: rgba(255, 255, 255, 0.9); + transition: all $move; + + &::after { + content: ""; + height: 30px; + transition: height $move; + } + } +} \ No newline at end of file diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 0000000..e1bb3d3 --- /dev/null +++ b/src/components/Header/index.tsx @@ -0,0 +1,134 @@ +"use client" + +import React, { useState, useEffect } from 'react'; +import Link from 'next/link'; + +import lightLogo from '@/assets/image/light_logo.png'; +import darkLogo from '@/assets/image/dark_logo.png'; + +import { IoIosArrowDown } from "react-icons/io"; +import "./index.scss" + +const Header = () => { + const cateList = [ + { + "id": 1, + "name": "开发笔记", + "url": "/", + "mark": "kfbj", + "icon": "🎉", + "level": 0, + "children": [] + }, + { + "id": 2, + "name": "生活随笔", + "url": "/", + "mark": "shsb", + "icon": "✍️", + "level": 0, + "children": [] + }, + { + "id": 4, + "name": "大前端", + "url": "http://127.0.0.1:5000", + "mark": "dqd", + "icon": "🎉", + "level": 0, + "children": [ + { + "id": 5, + "name": "前端", + "url": "/", + "mark": "qd", + "icon": "?", + "level": 4, + "children": [] + }, + { + "id": 7, + "name": "Java", + "url": "/", + "mark": "java", + "icon": "?", + "level": 4, + "children": [] + }, + { + "id": 9, + "name": "Python", + "url": "/", + "mark": "python", + "icon": "?", + "level": 4, + "children": [] + } + ] + } + ]; + + const [isScrolled, setIsScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 100); + }; + + window.addEventListener('scroll', handleScroll); + + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + return ( +
+
+
+
    +
  • + + Logo + +
    • + +
  • + + 💎 首页 + +
    • + + {cateList.map(one => ( +
  • + + {one.icon} {one.name} + {one.children.length > 0 && ( + + )} + + + {one.children.length > 0 && ( + //
      +
        + {one.children.map(two => ( +
      • + + {two.name} + +
        • + ))} +
      + )} + + ))} +
    +
+
+
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/src/components/Starry/index.tsx b/src/components/Starry/index.tsx index 512db85..d02823b 100644 --- a/src/components/Starry/index.tsx +++ b/src/components/Starry/index.tsx @@ -3,7 +3,7 @@ import { useEffect } from 'react'; import './index.scss'; -const StarrySky = () => { +const StarrySky: React.FC = () => { useEffect(() => { /*星星的密集程度，数字越大越多*/ const stars = 800; @@ -14,10 +14,10 @@ const StarrySky = () => { for (let i = 0; i < stars; i++) { const star = document.createElement('div'); star.classList.add('star_starrySky'); - starsContainer.appendChild(star); + starsContainer?.appendChild(star); } - const starElements = document.querySelectorAll('.star_starrySky'); + const starElements = document.querySelectorAll('.star_starrySky'); starElements.forEach((starElement) => { const s = 0.2 + Math.random() * 1; const curR = r + Math.random() * 300; @@ -36,4 +36,4 @@ const StarrySky = () => { ); }; -export default StarrySky; +export default StarrySky; \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index ae2a11f..6a11da3 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,8 @@ +body { + height: 2000px; + background-color: #f9f9f9; +} + .custom_text_shadow { text-shadow: 0 0.1875rem 0.3125rem #1c1f21; } \ No newline at end of file diff --git a/src/styles/var.scss b/src/styles/var.scss new file mode 100644 index 0000000..a47f7df --- /dev/null +++ b/src/styles/var.scss @@ -0,0 +1,15 @@ +// 版心 +$w: 1200px; + +// 色彩 +$color: var(--color, #539dfd); // 主色调 +$assistColor: var(--assistColor, #539dfd60); // 辅助色调 + +// 过渡效果 +$move: 0.3s; + +// 圆角效果 +$round: 5px; + +// 阴影效果 +$boxShadow: 0 2px 8px rgba(186, 186, 186, 0.15); \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index e9a0944..c30dd45 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -8,10 +8,11 @@ const config: Config = { ], theme: { extend: { - backgroundImage: { - "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "gradient-conic": - "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", + colors: { + primary: '#539dfd', // 添加自定义颜色 + }, + transitionDuration: { + 'DEFAULT': '300ms', // 添加默认过渡时间为0.3秒 }, }, },