|
@@ -1,50 +1,45 @@
|
|
|
-'use client'
|
|
|
-import { FC, PropsWithChildren, useRef, useState } from "react";
|
|
|
-import { useRouter } from "@/i18n";
|
|
|
+"use client";
|
|
|
import { useTranslations } from "next-intl";
|
|
|
-import './page.scss'
|
|
|
-import HeaderCom from '../component/HeaderCom'
|
|
|
-import TabsCom from "../component/TabsCom"
|
|
|
+import { FC, PropsWithChildren, useRef, useState } from "react";
|
|
|
+import "./page.scss";
|
|
|
|
|
|
-interface Props { }
|
|
|
+interface Props {}
|
|
|
const App: FC<PropsWithChildren<Props>> = (props) => {
|
|
|
- const t = useTranslations("FaqPage")
|
|
|
+ const t = useTranslations("FaqPage");
|
|
|
|
|
|
- const sliderRef = useRef<HTMLDivElement>(null)
|
|
|
- const [num, setNum] = useState(100)
|
|
|
- const [money, setMoney] = useState('5000')
|
|
|
+ const sliderRef = useRef<HTMLDivElement>(null);
|
|
|
+ const [num, setNum] = useState(100);
|
|
|
+ const [money, setMoney] = useState("5000");
|
|
|
const handleSlide: any = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
|
|
|
if (sliderRef.current) {
|
|
|
- const startX = sliderRef.current.getBoundingClientRect().x
|
|
|
- const x = e.clientX - startX
|
|
|
- const xRem = x / (144 * 0.6)
|
|
|
- const intNum = Math.round(10000 * xRem) - Math.round(10000 * xRem % 10)
|
|
|
- setNum(intNum)
|
|
|
- const m = intNum * 50
|
|
|
- let r = ''
|
|
|
- const arr = m.toString().split('')
|
|
|
+ const startX = sliderRef.current.getBoundingClientRect().x;
|
|
|
+ const x = e.clientX - startX;
|
|
|
+ const xRem = x / (144 * 0.6);
|
|
|
+ const intNum = Math.round(10000 * xRem) - Math.round((10000 * xRem) % 10);
|
|
|
+ setNum(intNum);
|
|
|
+ const m = intNum * 50;
|
|
|
+ let r = "";
|
|
|
+ const arr = m.toString().split("");
|
|
|
arr.forEach((item, i) => {
|
|
|
- if (i !== (arr.length - 1) && (arr.length - i - 1) % 3 === 0) {
|
|
|
- r += item + ','
|
|
|
+ if (i !== arr.length - 1 && (arr.length - i - 1) % 3 === 0) {
|
|
|
+ r += item + ",";
|
|
|
} else {
|
|
|
- r += item
|
|
|
+ r += item;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
|
|
|
- setMoney(r)
|
|
|
+ setMoney(r);
|
|
|
|
|
|
- const scale = ((Math.round((xRem * 10000))) / 100.00).toFixed(2) + '%';
|
|
|
- sliderRef.current.style.width = scale
|
|
|
+ const scale = (Math.round(xRem * 10000) / 100.0).toFixed(2) + "%";
|
|
|
+ sliderRef.current.style.width = scale;
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
return (
|
|
|
<div className="content">
|
|
|
<div className="referralFaq referralFaq referral-router-view">
|
|
|
<div className="content">
|
|
|
<h2>{t("title1")}</h2>
|
|
|
- <div>
|
|
|
- {t("content1")}
|
|
|
- </div>
|
|
|
+ <div>{t("content1")}</div>
|
|
|
</div>
|
|
|
<div className="content">
|
|
|
<h2>{t("title2")}</h2>
|
|
@@ -52,9 +47,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
|
|
|
</div>
|
|
|
<div className="content">
|
|
|
<h2>{t("title3")}</h2>
|
|
|
- <div>
|
|
|
- {t("content3")}
|
|
|
- </div>
|
|
|
+ <div>{t("content3")}</div>
|
|
|
</div>
|
|
|
<div className="content">
|
|
|
<h2>{t("title4")} </h2>
|
|
@@ -67,12 +60,20 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
|
|
|
<div className="imgContent rowReverse">
|
|
|
<img src="/img/cash.png" alt="" />
|
|
|
<div>
|
|
|
- {t("number")} > {num}
|
|
|
+ {t("number")} > {num}
|
|
|
<br />
|
|
|
- {t("Comissão")} > {t("R$")} {money} {t("money")}
|
|
|
+ {t("Comissão")} > {t("R$")} {money} {t("money")}
|
|
|
</div>
|
|
|
- <div className="slider van-slider" style={{ height: "0.02rem" }} onClick={handleSlide}>
|
|
|
- <div className="van-slider__bar" style={{ width: "0.900901%", background: "rgb(0, 157, 128)" }} ref={sliderRef}>
|
|
|
+ <div
|
|
|
+ className="slider van-slider"
|
|
|
+ style={{ height: "0.02rem" }}
|
|
|
+ onClick={handleSlide}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ className="van-slider__bar"
|
|
|
+ style={{ width: "0.900901%", background: "rgb(0, 157, 128)" }}
|
|
|
+ ref={sliderRef}
|
|
|
+ >
|
|
|
<div role="slider" className="van-slider__button-wrapper">
|
|
|
<div className="img"></div>
|
|
|
</div>
|
|
@@ -87,9 +88,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
|
|
|
{t("content5-1")}
|
|
|
<span style={{ color: "red" }}>{t("red1")}</span>
|
|
|
</li>
|
|
|
- <li>
|
|
|
- {t("content5-2")}
|
|
|
- </li>
|
|
|
+ <li>{t("content5-2")}</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div className="content">
|
|
@@ -97,13 +96,11 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
|
|
|
<div>
|
|
|
<p>{t("content6-1")}</p>
|
|
|
<p>{t("content6-2")}</p>
|
|
|
- <p>
|
|
|
- {t("content6-3")}
|
|
|
- </p>
|
|
|
+ <p>{t("content6-3")}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- )
|
|
|
-}
|
|
|
-export default App
|
|
|
+ );
|
|
|
+};
|
|
|
+export default App;
|