feat: dynamic price example
parent
3a7541ca76
commit
5fb2918af2
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -1,19 +1,21 @@
|
||||||
"use client";
|
"use client";
|
||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import "./price.css";
|
import "./price.css";
|
||||||
|
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
// https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/
|
|
||||||
const [tip, setTip] = useState("");
|
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`,
|
const [prices, setPrices] = useState<{ desc: ""; url: "" }[]>([]);
|
||||||
_2d_5k: `https://static.soyootech.com/public/price/2d-5k.html`,
|
|
||||||
_2d_1w: `https://static.soyootech.com/public/price/2d-1w.html`,
|
useEffect(() => {
|
||||||
_2d_2w: `https://static.soyootech.com/public/price/2d-2w.html`,
|
const fetchData = async () => {
|
||||||
_3d_1w: `https://static.soyootech.com/public/price/3d-1w.html`,
|
const res = await fetch(`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/price.json`);
|
||||||
_3d_1_5w: `https://static.soyootech.com/public/price/3d-1.5w.html`,
|
const dataSource = await res.json();
|
||||||
_3d_2w: `https://static.soyootech.com/public/price/3d-2w.html`,
|
setPrices(dataSource);
|
||||||
});
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
const [previewInfo, setPreviewInfo] = useState({
|
const [previewInfo, setPreviewInfo] = useState({
|
||||||
url: "",
|
url: "",
|
||||||
|
|
@ -32,172 +34,173 @@ const Page = () => {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<h2 className="text-gradient">参考价格</h2>
|
<div className=" absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
|
||||||
|
<h2 className="text-gradient">参考价格</h2>
|
||||||
<div className="formmenu">
|
<div className="formmenu">
|
||||||
<div className="formmenus">
|
<div className="formmenus">
|
||||||
<ul>
|
<ul>
|
||||||
<li className="header">分类/价格</li>
|
<li className="header">分类/价格</li>
|
||||||
<li className="header">初级素材</li>
|
<li className="header">初级素材</li>
|
||||||
<li className="header">中级素材</li>
|
<li className="header">中级素材</li>
|
||||||
<li className="header">高级素材</li>
|
<li className="header">高级素材</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div className="bbbbbb">
|
<div className="bbbbbb">
|
||||||
<dl className="Rowheaders">
|
<dl className="Rowheaders">
|
||||||
<dd className="Rowheader down">交互视频型</dd>
|
<dd className="Rowheader down">交互视频型</dd>
|
||||||
<dd className="Rowheader down">2D类型</dd>
|
<dd className="Rowheader down">2D类型</dd>
|
||||||
<dd className="Rowheader">3D类型</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>
|
|
||||||
</dl>
|
</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>
|
<dl>
|
||||||
<dd className="price-item down">
|
<dd className="price-item down">
|
||||||
3000{" "}
|
3000{" "}
|
||||||
<img
|
<img
|
||||||
src="/home/send.png"
|
src="/home/send.png"
|
||||||
className="Sendicon"
|
className="Sendicon"
|
||||||
alt=""
|
alt=""
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTip("用户需要提供视频原素材");
|
setTip("用户需要提供视频原素材");
|
||||||
setPreviewInfo({
|
setPreviewInfo({
|
||||||
url: price["mp4"],
|
url: prices[3].url,
|
||||||
preview: true,
|
preview: true,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dd className="price-item down">
|
<dd className="price-item down">
|
||||||
10000{" "}
|
10000{" "}
|
||||||
<img
|
<img
|
||||||
src="/home/send.png"
|
src="/home/send.png"
|
||||||
className="Sendicon"
|
className="Sendicon"
|
||||||
alt=""
|
alt=""
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
|
setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
|
||||||
setPreviewInfo({
|
setPreviewInfo({
|
||||||
url: price["_2d_1w"],
|
url: prices[4].url,
|
||||||
preview: true,
|
preview: true,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dd className="price-item">
|
<dd className="price-item">
|
||||||
15000{" "}
|
15000{" "}
|
||||||
<img
|
<img
|
||||||
src="/home/send.png"
|
src="/home/send.png"
|
||||||
className="Sendicon"
|
className="Sendicon"
|
||||||
alt=""
|
alt=""
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
|
setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
|
||||||
setPreviewInfo({
|
setPreviewInfo({
|
||||||
url: price["_3d_1_5w"],
|
url: prices[5].url,
|
||||||
preview: true,
|
preview: true,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
<dl>
|
<dl>
|
||||||
<dd className="price-item down">
|
<dd className="price-item down">
|
||||||
3000{" "}
|
3000{" "}
|
||||||
<img
|
<img
|
||||||
src="/home/send.png"
|
src="/home/send.png"
|
||||||
className="Sendicon"
|
className="Sendicon"
|
||||||
alt=""
|
alt=""
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTip("用户需要提供视频原素材");
|
setTip("用户需要提供视频原素材");
|
||||||
setPreviewInfo({
|
setPreviewInfo({
|
||||||
url: price["mp4"],
|
url: prices[6].url,
|
||||||
preview: true,
|
preview: true,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</dd>
|
</dd>
|
||||||
<dd className="price-item down">
|
<dd className="price-item down">
|
||||||
20000{" "}
|
20000{" "}
|
||||||
<img
|
<img
|
||||||
src="/home/send.png"
|
src="/home/send.png"
|
||||||
className="Sendicon"
|
className="Sendicon"
|
||||||
alt=""
|
alt=""
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
|
setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
|
||||||
setPreviewInfo({
|
setPreviewInfo({
|
||||||
url: price["_2d_2w"],
|
url: prices[7].url,
|
||||||
preview: true,
|
preview: true,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</dd>
|
</dd>
|
||||||
<dd className="price-item">
|
<dd className="price-item">
|
||||||
20000{" "}
|
20000{" "}
|
||||||
<img
|
<img
|
||||||
src="/home/send.png"
|
src="/home/send.png"
|
||||||
className="Sendicon"
|
className="Sendicon"
|
||||||
alt=""
|
alt=""
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
|
setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
|
||||||
setPreviewInfo({
|
setPreviewInfo({
|
||||||
url: price["_3d_2w"],
|
url: prices[8].url,
|
||||||
preview: true,
|
preview: true,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<p className="annotation">标价为人民币</p>
|
||||||
</div>
|
</div>
|
||||||
<p className="annotation">标价为人民币</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{previewInfo.preview && (
|
{previewInfo.preview && (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue