diff --git a/README.md b/README.md index 216ef34..7667558 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# 传感器及检测技术 - 实验课件系统 +# 名师工作室 - 实验课件系统 -这是一个基于 React 的传感器及检测技术实验课件交互式平台。 +这是一个基于 React 的名师工作室实验课件交互式平台。 ## 技术栈 diff --git a/src/assets/images/menu/内页居中标题.png b/src/assets/images/menu/内页居中标题.png new file mode 100644 index 0000000..ea8d34e Binary files /dev/null and b/src/assets/images/menu/内页居中标题.png differ diff --git a/src/assets/images/menu/卢航-未选中.png b/src/assets/images/menu/卢航-未选中.png new file mode 100644 index 0000000..d862952 Binary files /dev/null and b/src/assets/images/menu/卢航-未选中.png differ diff --git a/src/assets/images/menu/名师曹君选中.png b/src/assets/images/menu/名师曹君选中.png new file mode 100644 index 0000000..48c70e0 Binary files /dev/null and b/src/assets/images/menu/名师曹君选中.png differ diff --git a/src/assets/images/menu/曹君-未选中.png b/src/assets/images/menu/曹君-未选中.png new file mode 100644 index 0000000..4ccbae9 Binary files /dev/null and b/src/assets/images/menu/曹君-未选中.png differ diff --git a/src/assets/images/menu/龚丹-未选中.png b/src/assets/images/menu/龚丹-未选中.png new file mode 100644 index 0000000..fa4781b Binary files /dev/null and b/src/assets/images/menu/龚丹-未选中.png differ diff --git a/src/components/Image.tsx b/src/components/Image.tsx index 0307245..5556701 100644 --- a/src/components/Image.tsx +++ b/src/components/Image.tsx @@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from "react"; import { clsx } from "clsx"; interface ImageProps { + style?: React.CSSProperties; src: string; children?: React.ReactNode; alt?: string; @@ -23,6 +24,7 @@ interface ImageProps { } export default function Image({ + style, src, children, alt, @@ -113,7 +115,7 @@ export default function Image({ "cursor-pointer transition-all duration-300 hover:scale-105 hover:brightness-110", className )} - style={{ width, height }} + style={{ width, height, ...style }} onClick={onClick} > {/* 加载占位符 */} diff --git a/src/pages/Menu.tsx b/src/pages/Menu.tsx index 78d43b4..a95b99a 100644 --- a/src/pages/Menu.tsx +++ b/src/pages/Menu.tsx @@ -1,9 +1,53 @@ import { useNavigate } from "react-router-dom"; import { BackgroundImage, Image } from "@/components"; import { getStaticImage } from "@/utils"; +import { useState } from "react"; + +/** + * 卢航-未选中.png + * 龚丹-未选中.png + * 曹君-未选中.png + */ +const teachers = [ + { + id: 1, + name: "卢航", + avatar: getStaticImage("menu/卢航-未选中.png"), + selectedAvatar: getStaticImage("menu/卢航-选中.png"), + position: { + top: "20%", + left: "12%", + }, + }, + { + id: 2, + name: "曹君", + avatar: getStaticImage("menu/曹君-未选中.png"), + selectedAvatar: getStaticImage("menu/名师曹君选中.png"), + position: { + top: "10%", + left: "39%", + }, + }, + { + id: 3, + name: "龚丹", + avatar: getStaticImage("menu/龚丹-未选中.png"), + selectedAvatar: getStaticImage("menu/曹君-选中.png"), + position: { + top: "20%", + left: "65%", + }, + }, +]; export default function Home() { const navigate = useNavigate(); + const [selectedTeacherId, setSelectedTeacherId] = useState(0); + + const handleSelectTeacher = (teacherId: number) => { + setSelectedTeacherId(teacherId); + }; const handleStartExperiment = () => { console.log("点击开启实验"); @@ -25,12 +69,42 @@ export default function Home() { onClick={handleStartExperiment} /> + 文字 + + > + {teachers.map((teacher) => ( + {teacher.name} handleSelectTeacher(teacher.id)} + className="absolute" + style={{ + top: + selectedTeacherId === teacher.id ? "4%" : teacher.position.top, + left: + selectedTeacherId === teacher.id + ? "36%" + : teacher.position.left, + transition: "transform 0.2s ease, z-index 0.2s ease", + }} + button={selectedTeacherId !== teacher.id} + /> + ))} + ); }