Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

美化主页模块 #27

Merged
merged 3 commits into from
Jul 13, 2024
Merged

美化主页模块 #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c3bea6
🐛 beautify the style of the main module
kkkangKK Jul 13, 2024
d577ad8
🐛 beautify the style of the main module
kkkangKK Jul 13, 2024
d2ad084
Merge branch 'main' into fix/beauitfy_style
kkkangKK Jul 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/web/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Footer from "../components/main/footer";
import Head from "../components/main/head";

function Main() {

return (
<div className="h-screen">
<Head />
Expand Down
10 changes: 9 additions & 1 deletion apps/web/components/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,25 @@
import { useRouter } from "next/navigation";

import "../style/card.css";
import "../style/scrollAnimate.css"
import { useRef } from "react";
import { useScrollAnimate } from "@/hooks/useScrollAnimate";

function Card() {
const router = useRouter();
const handleClick = () => {
router.push("/edit-template");
};


const boxRef = useRef<HTMLDivElement>(null); // 指定ref的类型为HTMLDivElement
useScrollAnimate(boxRef);

return (
<div
className="card bg-base-100 w-80 shadow-xl mb-7 mt-7 hover-zoom"
className="card bg-base-100 w-80 shadow-xl mb-7 mt-7 hover-zoom ml-14 box"
onClick={handleClick}
ref={boxRef}
>
<figure>
<img
Expand Down
2 changes: 1 addition & 1 deletion apps/web/components/main/body_1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

function Index(props: any) {
return (
<div className="hero bg-base-200 h-4/6">
<div className="hero bg-base-200 h-full">
<div className="hero-content flex-col lg:flex-row-reverse">
{/* <img
src="/num.jpg"
Expand Down
9 changes: 8 additions & 1 deletion apps/web/components/main/body_2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
"use client";

import { useScrollAnimate } from "@/hooks/useScrollAnimate";
import { useRef } from "react";

function Index(props: any) {

const boxRef = useRef<HTMLDivElement>(null); // 指定ref的类型为HTMLDivElement
useScrollAnimate(boxRef);

return (
<div className="mt-8 mb-8 flex w-2/3 mx-auto flex-col lg:flex-row">
<div className="mt-8 mb-8 flex w-2/3 mx-auto flex-col lg:flex-row box" ref={boxRef}>
<div className="card bg-base-300 rounded-box grid h-32 flex-grow place-items-center ">
<img
src="./余额.png"
Expand Down
6 changes: 3 additions & 3 deletions apps/web/components/main/body_3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ function Index(props: any) {
<div className="absolute right-8 top-0">
<Search searchMessage={"查找热门海报"} />
</div>
<div className="flex flex-wrap justify-around items-center">
{Array.from({ length: 8 }, (_, index) => (
<div className="flex flex-wrap justify-start items-center">
{Array.from({ length: 7 }, (_, index) => (
<Card key={index} />
))}
</div>
Expand All @@ -40,7 +40,7 @@ function Index(props: any) {
<div className="absolute right-8 top-0">
<Search searchMessage={"查找我的作品"} />
</div>
<div className="flex flex-wrap justify-around items-center">
<div className="flex flex-wrap items-center justify-start">
{Array.from({ length: 4 }, (_, index) => (
<Card key={index} />
))}
Expand Down
12 changes: 7 additions & 5 deletions apps/web/components/main/head.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,22 @@ import Link from "next/link";

function Head(props: any) {
return (
<div className="flex flex-row bg-[#f2f2f2] pb-4 pt-4 border-b-8 border-red-500">
<div className="basis-1/2 ml-8 text-red-500 font-bold text-3xl leading-loose">
// <div className="flex flex-row bg-[#f2f2f2] pb-4 pt-4 border-b-8 border-red-500">
<div className="flex flex-row bg-red-500 pb-4 pt-4 fixed w-full z-10 bg-opacity-90 hover:bg-opacity-100">
<div className="basis-1/2 ml-8 text-[#f2f2f2] font-bold text-3xl leading-loose">
<Link href="/">POSTERCRAFT</Link>
</div>
<div className="basis-1/6"></div>
<div className="basis-1/6"></div>
<div className="basis-1/6"></div>
<div className="basis-1/6 pt-2 pb-2 mr-8 text-center leading-loose text-lg hover:bg-gray-300 font-medium">
{/* <div className="basis-1/6 pt-2 pb-2 mr-8 text-center leading-loose text-lg hover:bg-gray-300 font-medium text-[#f2f2f2]"> */}
<div className="basis-1/6 pt-2 pb-2 mr-8 text-center leading-loose text-lg hover:bg-red-600 font-medium text-[#f2f2f2] rounded-full">
<Link href="/#my-work">我的作品</Link>
</div>
<div className="basis-1/6 pt-2 pb-2 mr-8 text-center leading-loose text-lg hover:bg-gray-300 font-medium">
<div className="basis-1/6 pt-2 pb-2 mr-8 text-center leading-loose text-lg hover:bg-red-600 font-medium text-[#f2f2f2] rounded-full">
我的账号
</div>
<div className="basis-1/6 mr-8 pt-2 pb-2 text-center leading-loose text-lg hover:bg-gray-300 font-medium rounded-full border-solid border-4 border-red-500 ">
<div className="basis-1/6 mr-8 pt-2 pb-2 text-center leading-loose text-lg hover:bg-red-600 font-medium text-[#f2f2f2] rounded-full ">
<span>创建设计</span>
</div>
</div>
Expand Down
33 changes: 33 additions & 0 deletions apps/web/hooks/useScrollAnimate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { useEffect, useRef } from "react";
/**
* 滚动动画 Hook
*1.使用时先在相应页面引入style下的scrollAnimate.css文件；
*2.然后定义const boxRef = useRef<HTMLDivElement>(null);
*3.在需要监听的元素上添加ref={boxRef}和className="box"
*4.最后调用钩子useScrollAnimate(boxRef)，传入需要监听的元素
* @param boxRef 传入需要监听滚动的 HTML 元素的 React Ref
* @returns 无返回值
*/
export function useScrollAnimate(boxRef:React.RefObject<HTMLElement>) {

useEffect(() => {
const handleScroll = () => {
const box = boxRef.current;
if (box) {
const isBoxVisible = box.getBoundingClientRect().top+100 < window.innerHeight;
if (isBoxVisible && !box.classList.contains('isVisible')) {
box.classList.add('isVisible');
}
if (!isBoxVisible && box.classList.contains('isVisible')) {
box.classList.remove('isVisible');
}
}
};

window.addEventListener('scroll', handleScroll);

return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [boxRef]);
}
1 change: 1 addition & 0 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"css-types": "^1.1.0",
"daisyui": "^4.12.10",
"eslint": "^8",
"eslint-config-next": "14.2.4",
Expand Down
23 changes: 23 additions & 0 deletions apps/web/style/scrollAnimate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.box {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out;
will-change: opacity, transform;
/* 初始状态模拟动画开始前的状态 */
}

.isVisible {
animation: fadeIn 0.9s forwards;
/* 当添加is-visible类时，触发fadeIn动画 */
}
Loading
Loading