zhongyidian
29029bb608
- Updated project title in README.md to reflect the new focus on "名师工作室". - Enhanced Image component to accept custom styles. - Implemented teacher selection feature in Menu component, allowing users to select and display different teacher avatars with corresponding positions and transitions.
111 lines
2.8 KiB
TypeScript
111 lines
2.8 KiB
TypeScript
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("点击开启实验");
|
|
// navigate("/experiment");
|
|
};
|
|
|
|
return (
|
|
<BackgroundImage
|
|
src={getStaticImage("menu/首页背景.png")}
|
|
className="h-full w-full relative"
|
|
backgroundSize="cover"
|
|
backgroundPosition="center"
|
|
>
|
|
<Image
|
|
src={getStaticImage("components/按钮-返回.png")}
|
|
alt="返回"
|
|
button
|
|
className="absolute top-0 right-0"
|
|
onClick={handleStartExperiment}
|
|
/>
|
|
|
|
<Image
|
|
src={getStaticImage("menu/内页居中标题.png")}
|
|
alt="文字"
|
|
className="absolute bottom-0 left-1/2 transform -translate-x-1/2"
|
|
/>
|
|
|
|
<BackgroundImage
|
|
src={getStaticImage("menu/转盘合.png")}
|
|
className="absolute w-full h-500 -bottom-1/5 left-0"
|
|
backgroundSize="cover"
|
|
backgroundPosition="center"
|
|
>
|
|
{teachers.map((teacher) => (
|
|
<Image
|
|
key={teacher.id}
|
|
src={
|
|
selectedTeacherId === teacher.id
|
|
? teacher.selectedAvatar
|
|
: teacher.avatar
|
|
}
|
|
alt={teacher.name}
|
|
onClick={() => 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}
|
|
/>
|
|
))}
|
|
</BackgroundImage>
|
|
</BackgroundImage>
|
|
);
|
|
}
|