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) => (
+ 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}
+ />
+ ))}
+
);
}