guofei
/
addseed-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

faet: add price page

main
guofei 2024-10-24 16:17:57 +08:00
parent 98936a89ee
commit 21789ff44d
12 changed files with 795 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/home/send.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

43
public/price/2d-1w.html 100644
View File

File diff suppressed because one or more lines are too long

1
public/price/2d-2w.html 100644
View File

File diff suppressed because one or more lines are too long

62
public/price/2d-5k.html 100644
View File

File diff suppressed because one or more lines are too long

62
public/price/3d-1.5w.html 100644
View File

File diff suppressed because one or more lines are too long

62
public/price/3d-1w.html 100644
View File

File diff suppressed because one or more lines are too long

1
public/price/3d-2w.html 100644
View File

File diff suppressed because one or more lines are too long

7
public/price/视频类型.html 100644
View File

File diff suppressed because one or more lines are too long

225
src/app/price/page.tsx 100644
View File

@ -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;

149
src/app/price/price.css 100644
View File

@ -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;
}

176
src/app/price/price.less 100644
View File

@ -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;
}
}

12
src/dictionaries/index.ts
View File

@ -1,6 +1,8 @@
const dictionaries = {
en: () => import('./en.json').then((module) => module.default),
zh: () => import('./zh.json').then((module) => module.default),
} as Record<string, () => Promise<Record<string, string>>>;
export const getDictionary = async (locale: string) => dictionaries[locale]();
en: () => import('./en.json').then((module) => module.default),
zh: () => import('./zh.json').then((module) => module.default),
} as Record<string, () => Promise<Record<string, string>>>;
export const getDictionary = async (locale: string) => {
return dictionaries[locale]()
};