fix:解决拖拽问题

src/pages/experiment/Step1IntroPage.tsx

@@ -0,0 +1,43 @@
+import { Image } from "@/components";
+import { getStaticImage } from "@/utils";
+import ExperimentTitle from "./ExperimentTitle";
+import { sensorImages } from "./constants";
+
+interface Step1IntroPageProps {
+  onNext: () => void;
+}
+
+export default function Step1IntroPage({ onNext }: Step1IntroPageProps) {
+  return (
+    <>
+      <ExperimentTitle
+        title="01实验工具介绍"
+        description="以下是实验所需要的所有工具，让我们来看看具体有哪些吧"
+      />
+
+      {/* img列表 */}
+      <div className="grid grid-cols-4 gap-y-20 gap-x-20 mt-10">
+        {sensorImages.map((image, index) => (
+          <div key={index} className="flex flex-col items-center">
+            <Image
+              src={image.src}
+              className="w-80 h-50 rounded-lg shadow-md mb-4 object-cover"
+            />
+            <div className="text-center text-xl">
+              <h3 className=" font-bold text-gray-800 mb-1">{image.name}</h3>
+              <p className=" text-gray-600">{image.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div onClick={onNext}>
+        <Image
+          className="absolute bottom-4 right-6 cursor-pointer"
+          src={getStaticImage("components/按钮-下一步.png")}
+          button={true}
+        />
+      </div>
+    </>
+  );
+}