diff --git a/price.json b/price.json
new file mode 100644
index 0000000..39d45ea
--- /dev/null
+++ b/price.json
@@ -0,0 +1,38 @@
+[
+    {
+        "desc": "初级3k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "初级5k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "初级1w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "中级3k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "中级1w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "中级1.5w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "高级3k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "高级2w",
+        "url": "https://static.soyootech.com/case/bubble/bubble.html"
+    },
+    {
+        "desc": "高级2w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    }
+]
\ No newline at end of file
diff --git a/src/app/price/page.tsx b/src/app/price/page.tsx
index cc37dcb..e27cd04 100644
--- a/src/app/price/page.tsx
+++ b/src/app/price/page.tsx
@@ -1,19 +1,21 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "./price.css";
 
 const Page = () => {
-  // https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/
   const [tip, setTip] = useState("");
-  const [price] = useState({
-    mp4: `https://static.soyootech.com/public/price/%E8%A7%86%E9%A2%91%E7%B1%BB%E5%9E%8B.html`,
-    _2d_5k: `https://static.soyootech.com/public/price/2d-5k.html`,
-    _2d_1w: `https://static.soyootech.com/public/price/2d-1w.html`,
-    _2d_2w: `https://static.soyootech.com/public/price/2d-2w.html`,
-    _3d_1w: `https://static.soyootech.com/public/price/3d-1w.html`,
-    _3d_1_5w: `https://static.soyootech.com/public/price/3d-1.5w.html`,
-    _3d_2w: `https://static.soyootech.com/public/price/3d-2w.html`,
-  });
+
+  const [prices, setPrices] = useState<{ desc: ""; url: "" }[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch(`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/price.json`);
+      const dataSource = await res.json();
+      setPrices(dataSource);
+    };
+
+    fetchData();
+  }, []);
 
   const [previewInfo, setPreviewInfo] = useState({
     url: "",
@@ -32,172 +34,173 @@ const Page = () => {
           }}
         />
 
-        <h2 className="text-gradient">参考价格</h2>
-
-        <div className="formmenu">
-          <div className="formmenus">
-            <ul>
-              <li className="header">分类/价格</li>
-              <li className="header">初级素材</li>
-              <li className="header">中级素材</li>
-              <li className="header">高级素材</li>
-            </ul>
-            <div className="bbbbbb">
-              <dl className="Rowheaders">
-                <dd className="Rowheader down">交互视频型</dd>
-                <dd className="Rowheader down">2D类型</dd>
-                <dd className="Rowheader">3D类型</dd>
-              </dl>
-              <div className=" pricechoose">
-                <dl>
-                  <dd className="price-item down">
-                    3000{" "}
-                    <img
-                      src="/home/send.png"
-                      className="Sendicon"
-                      alt=""
-                      onClick={() => {
-                        setTip("用户需要提供视频原素材");
-                        setPreviewInfo({
-                          url: price["mp4"],
-                          preview: true,
-                        });
-                      }}
-                    />
-                  </dd>
-                  <dd className="price-item down">
-                    5000{" "}
-                    <img
-                      src="/home/send.png"
-                      className="Sendicon"
-                      alt=""
-                      onClick={() => {
-                        setTip("用户需要提供所有美术资源");
-                        setPreviewInfo({
-                          url: price["_2d_5k"],
-                          preview: true,
-                        });
-                      }}
-                    />
-                  </dd>
-                  <dd className="price-item">
-                    10000{" "}
-                    <img
-                      src="/home/send.png"
-                      className="Sendicon"
-                      alt=""
-                      onClick={() => {
-                        setTip("用户需要提供所有美术资源");
-                        setPreviewInfo({
-                          url: price["_3d_1w"],
-                          preview: true,
-                        });
-                      }}
-                    />
-                  </dd>
+        <div className=" absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
+          <h2 className="text-gradient">参考价格</h2>
+          <div className="formmenu">
+            <div className="formmenus">
+              <ul>
+                <li className="header">分类/价格</li>
+                <li className="header">初级素材</li>
+                <li className="header">中级素材</li>
+                <li className="header">高级素材</li>
+              </ul>
+              <div className="bbbbbb">
+                <dl className="Rowheaders">
+                  <dd className="Rowheader down">交互视频型</dd>
+                  <dd className="Rowheader down">2D类型</dd>
+                  <dd className="Rowheader">3D类型</dd>
                 </dl>
+                <div className=" pricechoose">
+                  <dl>
+                    <dd className="price-item down">
+                      3000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供视频原素材");
+                          setPreviewInfo({
+                            url: prices[0].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                    <dd className="price-item down">
+                      5000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供所有美术资源");
+                          setPreviewInfo({
+                            url: prices[1].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                    <dd className="price-item">
+                      10000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供所有美术资源");
+                          setPreviewInfo({
+                            url: prices[2].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                  </dl>
 
-                <dl>
-                  <dd className="price-item down">
-                    3000{" "}
-                    <img
-                      src="/home/send.png"
-                      className="Sendicon"
-                      alt=""
-                      onClick={() => {
-                        setTip("用户需要提供视频原素材");
-                        setPreviewInfo({
-                          url: price["mp4"],
-                          preview: true,
-                        });
-                      }}
-                    />
-                  </dd>
+                  <dl>
+                    <dd className="price-item down">
+                      3000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供视频原素材");
+                          setPreviewInfo({
+                            url: prices[3].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
 
-                  <dd className="price-item down">
-                    10000{" "}
-                    <img
-                      src="/home/send.png"
-                      className="Sendicon"
-                      alt=""
-                      onClick={() => {
-                        setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
-                        setPreviewInfo({
-                          url: price["_2d_1w"],
-                          preview: true,
-                        });
-                      }}
-                    />
-                  </dd>
+                    <dd className="price-item down">
+                      10000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
+                          setPreviewInfo({
+                            url: prices[4].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
 
-                  <dd className="price-item">
-                    15000{" "}
-                    <img
-                      src="/home/send.png"
-                      className="Sendicon"
-                      alt=""
-                      onClick={() => {
-                        setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
-                        setPreviewInfo({
-                          url: price["_3d_1_5w"],
-                          preview: true,
-                        });
-                      }}
-                    />
-                  </dd>
-                </dl>
+                    <dd className="price-item">
+                      15000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
+                          setPreviewInfo({
+                            url: prices[5].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                  </dl>
 
-                <dl>
-                  <dd className="price-item down">
-                    3000{" "}
-                    <img
-                      src="/home/send.png"
-                      className="Sendicon"
-                      alt=""
-                      onClick={() => {
-                        setTip("用户需要提供视频原素材");
-                        setPreviewInfo({
-                          url: price["mp4"],
-                          preview: true,
-                        });
-                      }}
-                    />
-                  </dd>
-                  <dd className="price-item down">
-                    20000{" "}
-                    <img
-                      src="/home/send.png"
-                      className="Sendicon"
-                      alt=""
-                      onClick={() => {
-                        setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
-                        setPreviewInfo({
-                          url: price["_2d_2w"],
-                          preview: true,
-                        });
-                      }}
-                    />
-                  </dd>
-                  <dd className="price-item">
-                    20000{" "}
-                    <img
-                      src="/home/send.png"
-                      className="Sendicon"
-                      alt=""
-                      onClick={() => {
-                        setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
-                        setPreviewInfo({
-                          url: price["_3d_2w"],
-                          preview: true,
-                        });
-                      }}
-                    />
-                  </dd>
-                </dl>
+                  <dl>
+                    <dd className="price-item down">
+                      3000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供视频原素材");
+                          setPreviewInfo({
+                            url: prices[6].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                    <dd className="price-item down">
+                      20000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
+                          setPreviewInfo({
+                            url: prices[7].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                    <dd className="price-item">
+                      20000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
+                          setPreviewInfo({
+                            url: prices[8].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                  </dl>
+                </div>
               </div>
             </div>
+            <p className="annotation">标价为人民币</p>
           </div>
-          <p className="annotation">标价为人民币</p>
         </div>
       </div>
       {previewInfo.preview && (