zhongyidian
ac7bb420fd
- 替换多个场景中的图像资源，确保视觉内容的准确性和一致性。 - 更新信件组件中的输入校验功能，提升用户填写体验。 - 调整引导对话文本，增强互动性和信息传达的清晰度。 - 引入结束窗口，鼓励用户深入了解鲁迅和孙中山的历史背景。
610 lines
22 KiB
TypeScript
610 lines
22 KiB
TypeScript
import { useState, useEffect, useMemo, useCallback } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { Image, DragFill, GuideSteps, GuideStepsItem } from "@/components";
|
|
import type { DragFillResult } from "@/components";
|
|
import ErrorAlert from "@/components/layout/alert/error-alert";
|
|
import SuccessAlert from "@/components/layout/alert/success-alert";
|
|
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
|
|
|
const starName = "luxun";
|
|
|
|
// 拖拽元素配置 - 每个元素对应一个特定的标签放置区域
|
|
const dragItems = [
|
|
{
|
|
id: "runtu",
|
|
name: "闰土",
|
|
imagePath: "luxun/reflection/scene2/拖拽-润土",
|
|
targetBlankId: "city-1-label-0", // 绍兴-人物
|
|
errorHint: "❌闰土的故事和鲁迅的少年绍兴时光有关哦",
|
|
successMessage: "✅答对啦! 闰土是鲁迅绍兴时期笔下的经典人物",
|
|
},
|
|
{
|
|
id: "baicaoyuan",
|
|
name: "《从百草园到三味书屋》",
|
|
imagePath: "luxun/reflection/scene2/拖拽-百草园到三味书屋",
|
|
targetBlankId: "city-1-label-1", // 绍兴-作品
|
|
errorHint: "❌这个作品写的是鲁迅在绍兴的故事哦",
|
|
successMessage: "✅真棒! 这篇散文记录了鲁迅在绍兴的求学时光",
|
|
},
|
|
{
|
|
id: "aqzhengzhuan",
|
|
name: "《阿Q正传》",
|
|
imagePath: "luxun/reflection/scene2/拖拽-阿Q正传",
|
|
targetBlankId: "city-2-label-0", // 北京-作品
|
|
errorHint: "❌这部经典小说和鲁迅在北京的创作有关哦",
|
|
successMessage: "✅答对啦! 《阿Q正传》是鲁迅小说的代表作, 诞生于北京",
|
|
},
|
|
{
|
|
id: "jingshenshengli",
|
|
name: '"精神胜利法"',
|
|
imagePath: "luxun/reflection/scene2/拖拽-精神胜利法",
|
|
targetBlankId: "city-2-label-1", // 北京-核心主题
|
|
errorHint: "❌这个主题是《阿Q正传》的核心, 和北京创作背景相关哦",
|
|
successMessage: "✅没错! 《阿Q正传》画出了国人的灵魂, 以便疗救。",
|
|
},
|
|
{
|
|
id: "guanzhudiceng",
|
|
name: '"关注底层"',
|
|
imagePath: "luxun/reflection/scene2/关注底层",
|
|
targetBlankId: "city-3-label-0", // 厦门-创作方向
|
|
errorHint: "❌这个创作方向是鲁迅在厦门的核心追求哦",
|
|
successMessage: "✅答对啦!鲁迅在厦门任教时,依旧关注底层民众的命运",
|
|
},
|
|
{
|
|
id: "zhaohuaxishi",
|
|
name: "《朝花夕拾》",
|
|
imagePath: "luxun/reflection/scene2/拖拽-朝花夕拾",
|
|
targetBlankId: "city-4-label-0", // 广州-作品集
|
|
errorHint: "❌这个作品集和鲁迅在广州的旅居时光有关哦",
|
|
successMessage: "✅真棒!《朝花夕拾》部分篇章在广州白云楼定稿",
|
|
},
|
|
{
|
|
id: "gushixinbian",
|
|
name: "《故事新编》",
|
|
imagePath: "luxun/reflection/scene2/拖拽-故事新编",
|
|
targetBlankId: "city-5-label-0", // 上海-作品
|
|
errorHint: "❌再试试~这个作品和上海的创作故事更相关哦",
|
|
successMessage: "✅答对啦!《故事新编》是鲁迅在上海故居完成的 经典作品集",
|
|
},
|
|
{
|
|
id: "biweidaoqiang",
|
|
name: '"笔为刀枪"',
|
|
imagePath: "luxun/reflection/scene2/笔为刀枪",
|
|
targetBlankId: "city-5-label-1", // 上海-创作中心
|
|
errorHint: "❌这个初心是鲁迅在上海创作的核心哦",
|
|
successMessage: "✅没错!鲁迅在上海以笔为刃,批判黑暗的社会现实",
|
|
},
|
|
];
|
|
|
|
// 城市配置 - 根据效果图调整位置
|
|
// 布局：北京(上) -> 上海(中上) -> 绍兴(中) -> 广州(左下) -> 厦门(右下)
|
|
const cityConfig = [
|
|
{
|
|
id: 1,
|
|
name: "绍兴",
|
|
location: "绍兴三味书屋",
|
|
imagePath: "luxun/reflection/scene2/绍兴",
|
|
position: { top: "65%", left: "65%" }, // 中间
|
|
labels: [
|
|
{ text: "人物", containerPosition: { top: "50%", left: "20%" } },
|
|
{ text: "作品", containerPosition: { top: "50%", left: "50%" } },
|
|
],
|
|
time: "1892年-1898年",
|
|
description: "少年鲁迅在此求学,为《从百草园到三味书屋》埋下创作种子。",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "北京",
|
|
location: "北京八道湾胡同",
|
|
imagePath: "luxun/reflection/scene2/北京",
|
|
position: { top: "14%", left: "62%" }, // 顶部
|
|
labels: [
|
|
{ text: "作品", containerPosition: { top: "72%", left: "30%" } },
|
|
{ text: "核心主题", containerPosition: { top: "72%", left: "70%" } },
|
|
],
|
|
time: "1919-1923年",
|
|
description:
|
|
"鲁迅参与新文化运动的核心时期,《阿Q正传》等经典作品在此酝酿创作。",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "厦门",
|
|
location: "厦门大学",
|
|
imagePath: "luxun/reflection/scene2/厦门",
|
|
position: { top: "83%", left: "78%" }, // 右下
|
|
labels: [
|
|
{ text: "创作方向", containerPosition: { top: "52%", left: "60%" } },
|
|
],
|
|
time: "1926年9-12月",
|
|
description:
|
|
"鲁迅应邀前往厦门大学任教,期间写下多篇批判现实的杂文,关注底层民众命运。",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "广州",
|
|
location: "广州白云楼",
|
|
imagePath: "luxun/reflection/scene2/广州",
|
|
position: { top: "88%", left: "35%" }, // 左下
|
|
labels: [
|
|
{ text: "作品集", containerPosition: { top: "38%", left: "50%" } },
|
|
],
|
|
time: "1927年3-9月",
|
|
description:
|
|
"先生在此整理旧作,思考民族觉醒之路,《朝花夕拾》部分篇章定稿于此。",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "上海",
|
|
location: "上海鲁迅故居",
|
|
imagePath: "luxun/reflection/scene2/上海",
|
|
position: { top: "48%", left: "70%" }, // 中上
|
|
labels: [
|
|
{ text: "作品", containerPosition: { top: "50%", left: "20%" } },
|
|
{ text: "创作中心", containerPosition: { top: "50%", left: "50%" } },
|
|
],
|
|
time: "1933-1936年",
|
|
description:
|
|
"鲁迅晚年定居地,先生在此写下《故事新编》等作品,与进步文人并肩,以文字为刃批判黑暗。",
|
|
},
|
|
];
|
|
|
|
const LuxunReflectionScene2 = () => {
|
|
const navigate = useNavigate();
|
|
const { moduleName } = useParams<{
|
|
moduleName: string;
|
|
}>();
|
|
|
|
// DragFill 的值
|
|
const [dragFillValue, setDragFillValue] = useState<DragFillResult[]>([]);
|
|
|
|
// 是否全部完成
|
|
const [allCompleted, setAllCompleted] = useState(false);
|
|
// 错误提示相关状态
|
|
const [showErrorAlert, setShowErrorAlert] = useState(false);
|
|
const [errorHint, setErrorHint] = useState("");
|
|
// 成功提示相关状态
|
|
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
|
|
const [successMessage, setSuccessMessage] = useState("");
|
|
// 引导对话是否显示
|
|
const [guideVisible, setGuideVisible] = useState(true);
|
|
// 通关提示对话是否显示
|
|
const [completionGuideVisible, setCompletionGuideVisible] = useState(false);
|
|
// 通关提示是否已经显示过（防止重复显示）
|
|
const [completionGuideShown, setCompletionGuideShown] = useState(false);
|
|
|
|
// 转换为 DragFill 的 options
|
|
const options = useMemo(
|
|
() =>
|
|
dragItems.map((item) => ({
|
|
value: item.id,
|
|
label: item.name,
|
|
})),
|
|
[]
|
|
);
|
|
|
|
// 转换为 DragFill 的 blanks - 为每个标签创建独立的空白区域
|
|
const blanks = useMemo(() => {
|
|
const allBlanks: Array<{ id: string; label: string }> = [];
|
|
cityConfig.forEach((city) => {
|
|
city.labels.forEach((label, index) => {
|
|
const labelText = typeof label === "string" ? label : label.text;
|
|
allBlanks.push({
|
|
id: `city-${city.id}-label-${index}`,
|
|
label: labelText,
|
|
});
|
|
});
|
|
});
|
|
return allBlanks;
|
|
}, []);
|
|
|
|
// 处理拖拽结果变化 - 验证是否正确放置
|
|
const handleValueChange = useCallback(
|
|
(newValue: DragFillResult[]) => {
|
|
// 找出新添加或位置改变的拖拽结果（与当前值比较）
|
|
const previousValue = dragFillValue;
|
|
const changedResults = newValue.filter(
|
|
(newResult) =>
|
|
!previousValue.some(
|
|
(prevResult) =>
|
|
prevResult.optionValue === newResult.optionValue &&
|
|
prevResult.blankId === newResult.blankId
|
|
)
|
|
);
|
|
|
|
// 检查改变的结果是否有错误
|
|
let hasError = false;
|
|
let errorMessage = "";
|
|
let successItem = null;
|
|
|
|
for (const result of changedResults) {
|
|
const itemId = result.optionValue;
|
|
const blankId = result.blankId;
|
|
const item = dragItems.find((item) => item.id === itemId);
|
|
|
|
// 如果放置位置不正确，显示错误提示
|
|
if (item && item.targetBlankId !== blankId) {
|
|
hasError = true;
|
|
errorMessage = item.errorHint || "放置位置不正确，请再试试~";
|
|
break; // 只显示第一个错误的提示
|
|
} else if (item && item.targetBlankId === blankId) {
|
|
// 如果放置正确，记录成功项（只记录第一个正确的）
|
|
if (!successItem) {
|
|
successItem = item;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (hasError) {
|
|
// 显示错误提示
|
|
setErrorHint(errorMessage);
|
|
setShowErrorAlert(true);
|
|
// 不更新拖拽值，保持之前正确的状态
|
|
// DragFill 是受控组件，不更新 value 会保持之前的状态
|
|
return;
|
|
}
|
|
|
|
// 验证每个元素是否放置到正确的标签区域，只保留正确的放置
|
|
const filteredValue = newValue.filter((result) => {
|
|
const itemId = result.optionValue;
|
|
const blankId = result.blankId;
|
|
|
|
const item = dragItems.find((item) => item.id === itemId);
|
|
return item && item.targetBlankId === blankId;
|
|
});
|
|
|
|
// 如果拖拽正确，显示成功提示
|
|
if (successItem) {
|
|
setSuccessMessage(successItem.successMessage);
|
|
setShowSuccessAlert(true);
|
|
}
|
|
|
|
setDragFillValue(filteredValue);
|
|
},
|
|
[dragFillValue]
|
|
);
|
|
|
|
const progress = dragFillValue.length;
|
|
const totalTasks = dragItems.length; // 8个拖拽元素
|
|
|
|
// 检查是否全部完成
|
|
useEffect(() => {
|
|
if (progress === totalTasks && !allCompleted) {
|
|
setAllCompleted(true);
|
|
// 不在这里显示通关提示，等待所有成功提示关闭后再显示
|
|
}
|
|
}, [progress, totalTasks, allCompleted]);
|
|
|
|
const handleErrorAlertClose = () => {
|
|
setShowErrorAlert(false);
|
|
setErrorHint("");
|
|
};
|
|
|
|
const handleSuccessAlertClose = () => {
|
|
setShowSuccessAlert(false);
|
|
setSuccessMessage("");
|
|
};
|
|
|
|
// 当所有任务完成且成功提示关闭后，显示通关提示（只显示一次）
|
|
useEffect(() => {
|
|
if (allCompleted && !showSuccessAlert && !completionGuideShown) {
|
|
setCompletionGuideVisible(true);
|
|
setCompletionGuideShown(true);
|
|
}
|
|
}, [allCompleted, showSuccessAlert, completionGuideShown]);
|
|
|
|
// 获取每个标签区域已放置的元素
|
|
const getLabelPlacedItem = (cityId: number, labelIndex: number) => {
|
|
const blankId = `city-${cityId}-label-${labelIndex}`;
|
|
const result = dragFillValue.find((r) => r.blankId === blankId);
|
|
if (!result) return null;
|
|
return dragItems.find((item) => item.id === result.optionValue) || null;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="select-none flex justify-between w-full h-full bg-cover bg-center bg-no-repeat gap-10 relative"
|
|
style={{
|
|
backgroundImage: getBackgroundImage(
|
|
`${starName}/reflection/scene2/底图`
|
|
),
|
|
}}
|
|
>
|
|
{/* 离开按钮 */}
|
|
<Image
|
|
className="absolute right-5 top-5 z-10"
|
|
src={getStaticImage(`${starName}/reflection/scene1/离开`)}
|
|
button
|
|
onClick={() => {
|
|
if (moduleName && starName) {
|
|
navigate(`/${moduleName}/${starName}/reflection`);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{/* 左侧：鲁迅的文学足迹 - 地图区域 */}
|
|
<div className="w-[44.5%] relative">
|
|
{/* 地图容器 */}
|
|
<div className="relative w-full h-full">
|
|
{cityConfig.map((city) => {
|
|
return (
|
|
<div
|
|
key={city.id}
|
|
className="absolute flex flex-col items-center"
|
|
style={{
|
|
top: city.position.top,
|
|
left: city.position.left,
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
>
|
|
{/* 城市图片容器 */}
|
|
<div className="relative">
|
|
<img src={getStaticImage(city.imagePath)} alt={city.name} />
|
|
|
|
{/* 标签区域 - 每个标签是一个独立的容器框 */}
|
|
<div className="absolute inset-0">
|
|
{city.labels.map((label, index) => {
|
|
const blankId = `city-${city.id}-label-${index}`;
|
|
const placedItem = getLabelPlacedItem(city.id, index);
|
|
const isFilled = !!placedItem;
|
|
const labelText =
|
|
typeof label === "string" ? label : label.text;
|
|
const containerPosition =
|
|
typeof label === "string"
|
|
? { top: "0%", left: "0%" }
|
|
: label.containerPosition;
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
data-blank-id={blankId}
|
|
className={`absolute border-2 border-dashed rounded-lg transition-all min-w-[80px] min-h-[80px] flex flex-col items-center justify-center ${
|
|
isFilled
|
|
? "border-green-500 bg-green-500/20"
|
|
: "border-white/60 bg-black/60 hover:border-blue-400 hover:bg-blue-400/20"
|
|
}`}
|
|
style={{
|
|
top: containerPosition.top,
|
|
left: containerPosition.left,
|
|
transform: "translate(-50%, -50%)",
|
|
}}
|
|
>
|
|
{/* 已放置的元素显示在容器框内 */}
|
|
{placedItem ? (
|
|
<img
|
|
src={getStaticImage(placedItem.imagePath)}
|
|
alt={placedItem.name}
|
|
className="w-20 h-20 object-contain"
|
|
/>
|
|
) : (
|
|
<div className="text-white text-sm text-center">
|
|
{labelText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 导航栏 */}
|
|
<div className="absolute top-20 left-[37%] w-80 space-y-4 z-99">
|
|
{/* 任务2漫集美学 */}
|
|
<div className="text-4xl font-bold h-16 cursor-pointer relative"></div>
|
|
{/* 任务3学习精神 */}
|
|
<div
|
|
className="text-4xl font-bold h-16 cursor-pointer relative"
|
|
onClick={() => {
|
|
if (moduleName && allCompleted) {
|
|
navigate(`/${moduleName}/${starName}/reflection3`);
|
|
}
|
|
}}
|
|
>
|
|
{/* 任务完成后显示点一点图标 */}
|
|
{allCompleted && (
|
|
<div className="absolute -right-20 top-1/2 flex items-center gap-2 z-10 pointer-events-none">
|
|
<img
|
|
className="animate-finger-bounce scale-x-[-1]"
|
|
src={getStaticImage(
|
|
`${starName}/reflection/scene1/鲁迅体悟点一点图标`
|
|
)}
|
|
alt="点一点图标"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右侧区域 */}
|
|
<div className="flex-1 relative">
|
|
{/* 任务进度 */}
|
|
<div className="absolute top-4 left-[27%] w-[430px] h-51 flex justify-center items-center">
|
|
<span className="text-white text-[54px] font-bold [text-shadow:_0px_0px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921]">
|
|
{allCompleted
|
|
? "任务进度已完成"
|
|
: `任务进度：(${progress}/${totalTasks})`}
|
|
</span>
|
|
</div>
|
|
{/* 鲁迅画廊 */}
|
|
<div className="absolute top-[calc(2.4rem+204px)] left-0 w-[995px] h-[467px] pt-16 pl-70 pr-10">
|
|
{/* 提示图标 */}
|
|
<div className="absolute left-14 top-35 space-y-2 z-10 pointer-events-none">
|
|
<div className="flex items-center">
|
|
<img
|
|
src={getStaticImage(
|
|
`${starName}/reflection/scene2/鲁迅体悟拖一拖`
|
|
)}
|
|
alt="拖一拖"
|
|
/>
|
|
<img
|
|
src={getStaticImage(
|
|
`${starName}/reflection/scene2/鲁迅体悟拖一拖图标`
|
|
)}
|
|
alt="拖一拖图标"
|
|
/>
|
|
</div>
|
|
<div className="w-45 leading-relaxed tracking-wider text-black text-3xl font-bold">
|
|
请将右侧图标拖到左侧对应位置。
|
|
</div>
|
|
</div>
|
|
|
|
{/* 使用 DragFill 组件 */}
|
|
<div className="mt-10">
|
|
<DragFill
|
|
options={options}
|
|
blanks={blanks}
|
|
value={dragFillValue}
|
|
onChange={handleValueChange}
|
|
allowDuplicate={false}
|
|
showSubmitButton={false}
|
|
layout="horizontal-options"
|
|
hideLabels={true}
|
|
className="w-full"
|
|
optionClassName="grid grid-cols-4 gap-10"
|
|
blankClassName="hidden" // 隐藏默认的空白区域，我们在地图上自定义显示
|
|
renderOption={(option, isUsed) => {
|
|
const item = dragItems.find((item) => item.id === option.value);
|
|
if (!item) return null;
|
|
|
|
return (
|
|
<div
|
|
className={`relative transition-all duration-200 cursor-move ${
|
|
isUsed ? "opacity-30" : "hover:scale-105"
|
|
}`}
|
|
>
|
|
<img
|
|
src={getStaticImage(item.imagePath)}
|
|
alt={item.name}
|
|
className="w-full h-auto"
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
);
|
|
}}
|
|
renderDragging={(option) => {
|
|
const item = dragItems.find((item) => item.id === option.value);
|
|
if (!item) return null;
|
|
return (
|
|
<img
|
|
src={getStaticImage(item.imagePath)}
|
|
alt={item.name}
|
|
className="w-16"
|
|
draggable={false}
|
|
/>
|
|
);
|
|
}}
|
|
renderBlank={(blank, _filledValue, _isHovered) => {
|
|
// 空白区域在地图上显示，返回一个隐藏的占位元素
|
|
// DragFill 会通过 data-blank-id 属性来识别空白区域
|
|
return (
|
|
<div
|
|
data-blank-id={blank.id}
|
|
className="hidden"
|
|
style={{ display: "none" }}
|
|
/>
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* 任务展示窗口 */}
|
|
<div className="absolute bottom-3.5 right-8 w-[995px] h-[335px] px-10 py-4 overflow-y-auto luxun-scrollbar">
|
|
{allCompleted ? (
|
|
// 全部完成后显示详细信息
|
|
<div className="space-y-8">
|
|
{cityConfig.map((city) => (
|
|
<div key={city.id} className="space-y-4">
|
|
<div className="text-red-600 text-5xl font-bold flex items-end gap-6">
|
|
<div>{city.location}</div>
|
|
<div className="text-gray-600 text-4xl font-normal">
|
|
{city.time}
|
|
</div>
|
|
</div>
|
|
<div className="text-black text-4xl font-normal leading-relaxed">
|
|
{city.description}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
// 未完成时显示提示内容
|
|
<div className="space-y-8 text-center">
|
|
<div className="text-black text-5xl font-bold mb-10">
|
|
任务展示窗口
|
|
</div>
|
|
{/* <div className="text-red-600 text-4xl font-bold">
|
|
请将以下内容拖拽至正确位置
|
|
</div> */}
|
|
<div className="grid grid-cols-4 gap-4 text-3xl font-bold">
|
|
{dragItems.map((item) => {
|
|
const isPlaced = dragFillValue.some(
|
|
(result) => result.optionValue === item.id
|
|
);
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
className={`${
|
|
isPlaced ? "text-green-600" : "text-black"
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 错误提示弹窗 */}
|
|
<ErrorAlert
|
|
visible={showErrorAlert}
|
|
text={errorHint}
|
|
onClose={handleErrorAlertClose}
|
|
onMaskClick={handleErrorAlertClose}
|
|
/>
|
|
|
|
{/* 成功提示弹窗 */}
|
|
<SuccessAlert
|
|
visible={showSuccessAlert}
|
|
title={successMessage}
|
|
onClose={handleSuccessAlertClose}
|
|
onContinue={handleSuccessAlertClose}
|
|
/>
|
|
|
|
{/* 学习引导对话 */}
|
|
<GuideSteps
|
|
visible={guideVisible}
|
|
onVisibleChange={setGuideVisible}
|
|
showMask={false}
|
|
highlightSelectors={[]}
|
|
zIndex={10000}
|
|
>
|
|
<GuideStepsItem speaker="guide">
|
|
这些线索藏在先生的文字里,长按卡片拖到对应地标旁,还原创作故事!
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
|
|
{/* 通关提示对话 */}
|
|
<GuideSteps
|
|
visible={completionGuideVisible}
|
|
onVisibleChange={setCompletionGuideVisible}
|
|
showMask={false}
|
|
highlightSelectors={[]}
|
|
zIndex={10000}
|
|
>
|
|
<GuideStepsItem speaker="guide">
|
|
你读懂了鲁迅文字与土地的联结,再深入看看文字里的初心!
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LuxunReflectionScene2;
|