feat: add avatar interaction and modal for user assistance

- Introduced an avatar element that opens a modal when clicked, providing users with assistance.
- Integrated IframeModal component to display external content within the modal.
- Enhanced user experience with hover effects on the avatar.
This commit is contained in:
zhongyidian committed 2025-10-26 13:15:41 +08:00
1 parent 2d66abc610
commit 13dd84a8a7
2 files changed
+175

No files matched your search

+32
View File
@@ -1,4 +1,5 @@
import { BackgroundImage, Image } from "@/components";
import { IframeModal } from "@/components/Modal";
import { getStaticImage } from "@/utils";
import clsx from "clsx";
import { useState } from "react";
@@ -177,11 +178,20 @@ const TabContent = ({
export default function PublicityPage() {
const navigate = useNavigate();
const [isModalOpen, setIsModalOpen] = useState(false);
const changeTab = (id: number) => {
console.log(id);
};
const handleAvatarClick = () => {
setIsModalOpen(true);
};
const handleCloseModal = () => {
setIsModalOpen(false);
};
return (
<BackgroundImage
src={getStaticImage("content/内页底图02.png")}
@@ -200,8 +210,30 @@ export default function PublicityPage() {
}}
/>
{/* 数字人头像 */}
<div
className="flex flex-col items-center absolute right-4 bottom-2 cursor-pointer hover:scale-105 transition-all duration-300 z-10"
onClick={handleAvatarClick}
>
<Image
src={getStaticImage("publicity/数字人-头像框.png")}
alt="数字人头像"
/>
<span className="text-white text-2xl font-bold tracking-wide">
点击我随时为你解答
</span>
</div>
<Tab changeTab={changeTab} />
</div>
{/* 弹窗 */}
<IframeModal
isOpen={isModalOpen}
onClose={handleCloseModal}
url="https://human-train.lkz.fit/ad905c35-886a-4abb-98c0-e7f894d86b4c/"
title="数字人助手"
/>
</BackgroundImage>
);
}