faet: add price page
parent
98936a89ee
commit
21789ff44d
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,225 @@
|
||||||
|
"use client";
|
||||||
|
import { useState } from "react";
|
||||||
|
import "./price.css";
|
||||||
|
|
||||||
|
const Page = () => {
|
||||||
|
// https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/
|
||||||
|
const [tip, setTip] = useState("");
|
||||||
|
const [price] = useState({
|
||||||
|
mp4: `price/视频类型.html`,
|
||||||
|
_2d_5k: `/price/2d-5k.html`,
|
||||||
|
_2d_1w: `/price/2d-1w.html`,
|
||||||
|
_2d_2w: `/price/2d-2w.html`,
|
||||||
|
_3d_1w: `/price/3d-1w.html`,
|
||||||
|
_3d_1_5w: `/price/3d-1.5w.html`,
|
||||||
|
_3d_2w: `/price/3d-2w.html`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [previewInfo, setPreviewInfo] = useState({
|
||||||
|
url: "",
|
||||||
|
preview: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="max-w-[1400px] mx-auto mt-4 priceBox">
|
||||||
|
<img className="w-[180px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/logo.png" alt="logo" />
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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">
|
||||||
|
10000{" "}
|
||||||
|
<img
|
||||||
|
src="/home/send.png"
|
||||||
|
className="Sendicon"
|
||||||
|
alt=""
|
||||||
|
onClick={() => {
|
||||||
|
setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
|
||||||
|
setPreviewInfo({
|
||||||
|
url: price["_2d_1w"],
|
||||||
|
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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="annotation">标价为人民币</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{previewInfo.preview && (
|
||||||
|
<div
|
||||||
|
className="fixed left-0 right-0 top-0 bottom-0 bg-black/60 z-[2000]"
|
||||||
|
onClick={() => {
|
||||||
|
document.body.style.overflow = "auto";
|
||||||
|
setPreviewInfo({
|
||||||
|
preview: false,
|
||||||
|
url: "",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="flex flex-col justify-center w-[370px] h-[680px] items-center fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] mx-auto border rounded-lg p-4 bg-white"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="text-left w-full mb-2 text-xl flex space-x-2">
|
||||||
|
<img className="w-8 h-8" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/tip.png" alt="" />
|
||||||
|
{tip}
|
||||||
|
</div>
|
||||||
|
<iframe src={previewInfo.url} className="flex-1 w-full overflow-hidden" scrolling="no" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,149 @@
|
||||||
|
.priceBox {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 500px;
|
||||||
|
max-width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: hwb(0 100% 0%);
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
.priceBox .pricelogo {
|
||||||
|
margin: 26px 0px 40px 42px;
|
||||||
|
}
|
||||||
|
.priceBox .pricelogo img {
|
||||||
|
width: 238px;
|
||||||
|
height: 74px;
|
||||||
|
}
|
||||||
|
.priceBox h2 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 37px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
background-image: linear-gradient(to right, #ecf5ff, #0838b1);
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu {
|
||||||
|
width: 900px;
|
||||||
|
border-radius: 30px;
|
||||||
|
background: #f1f6ff;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 48px;
|
||||||
|
padding-bottom: 13px;
|
||||||
|
/* 标价为人民币 */
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus ul .header {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 34px;
|
||||||
|
color: #526ba8;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .Rowheaders {
|
||||||
|
width: 25%;
|
||||||
|
padding-top: 22px;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .Rowheaders .Rowheader {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 34px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #3d3d3d;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .Rowheaders .down {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .pricechoose {
|
||||||
|
width: 72%;
|
||||||
|
display: flex;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 22px;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .pricechoose dl {
|
||||||
|
width: 33.3%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .pricechoose dl dd:last-child {
|
||||||
|
margin: 28px;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .pricechoose .price-item {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 34px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #3d3d3d;
|
||||||
|
background: #fff;
|
||||||
|
padding-left: 20%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .pricechoose .price-item .Sendicon {
|
||||||
|
color: #839cd8;
|
||||||
|
vertical-align: revert;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 1px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .pricechoose .price-item .Sendicon:hover {
|
||||||
|
color: #2169ff;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .formmenus .bbbbbb .pricechoose .down {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.priceBox .formmenu .annotation {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 34px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #999999;
|
||||||
|
width: 97%;
|
||||||
|
}
|
||||||
|
.priceBox .gameDialog {
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.priceBox .gameDialog .gameDialogImgp {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.priceBox .gameDialog img {
|
||||||
|
width: 18.33px;
|
||||||
|
height: 18.33px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.priceBox .gameDialog p {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 23px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #3d3d3d;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.priceBox .iframesone {
|
||||||
|
height: 658px;
|
||||||
|
}
|
||||||
|
.priceBox .el-dialog__header {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,176 @@
|
||||||
|
.priceBox {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-width: 500px;
|
||||||
|
max-width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: hwb(0 100% 0%);
|
||||||
|
margin-top: 50px;
|
||||||
|
|
||||||
|
.pricelogo {
|
||||||
|
margin: 26px 0px 40px 42px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 238px;
|
||||||
|
height: 74px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 37px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
background-image: linear-gradient(to right, #ecf5ff, #0838b1);
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formmenu {
|
||||||
|
width: 900px;
|
||||||
|
border-radius: 30px;
|
||||||
|
background: #f1f6ff;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 48px;
|
||||||
|
padding-bottom: 13px;
|
||||||
|
|
||||||
|
.formmenus {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 34px;
|
||||||
|
color: #526ba8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bbbbbb {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.Rowheaders {
|
||||||
|
width: 25%;
|
||||||
|
|
||||||
|
padding-top: 22px;
|
||||||
|
|
||||||
|
.Rowheader {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 34px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #3d3d3d;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricechoose {
|
||||||
|
width: 72%;
|
||||||
|
display: flex;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 22px;
|
||||||
|
|
||||||
|
dl {
|
||||||
|
width: 33.3%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
dd:last-child {
|
||||||
|
margin: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-item {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 34px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #3d3d3d;
|
||||||
|
background: #fff;
|
||||||
|
padding-left: 20%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.Sendicon {
|
||||||
|
color: #839cd8;
|
||||||
|
vertical-align: revert;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 1px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Sendicon:hover {
|
||||||
|
color: #2169ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.down {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标价为人民币 */
|
||||||
|
.annotation {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 34px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #999999;
|
||||||
|
width: 97%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gameDialog {
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
|
// height: 698px;
|
||||||
|
.gameDialogImgp {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 18.33px;
|
||||||
|
height: 18.33px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 23px;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
color: #3d3d3d;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.iframesone {
|
||||||
|
height: 658px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__header {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3,4 +3,6 @@ const dictionaries = {
|
||||||
zh: () => import('./zh.json').then((module) => module.default),
|
zh: () => import('./zh.json').then((module) => module.default),
|
||||||
} as Record<string, () => Promise<Record<string, string>>>;
|
} as Record<string, () => Promise<Record<string, string>>>;
|
||||||
|
|
||||||
export const getDictionary = async (locale: string) => dictionaries[locale]();
|
export const getDictionary = async (locale: string) => {
|
||||||
|
return dictionaries[locale]()
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue