feat: 修改

src/app/[locale]/(doings)/rechargeproxy/config.ts

@@ -0,0 +1,32 @@
+export const config = [
+    [1, 5, 10, 100, 1000],
+    [2, 5, 10, 100, 2000],
+    [3, 5, 10, 200, 3000],
+    [4, 5, 15, 200, 4000],
+    [5, 5, 15, 500, 5000],
+    [6, 5, 30, 500, 6000],
+    [7, 5, 30, 1000, 7000],
+    [8, 5, 50, 1000, 8000],
+    [9, 5, 50, 1000, 9000],
+    [10, 5, 100, 2000, 10000],
+    [11, 5, 100, 2000, 10000],
+    [12, 5, 200, 2000, 10000],
+    [13, 5, 200, 2000, 10000],
+    [14, 5, 300, 2000, 10000],
+    [15, 5, 300, 3000, 20000],
+    [16, 5, 400, 3000, 20000],
+    [17, 5, 400, 3000, 20000],
+    [18, 5, 500, 3000, 20000],
+    [19, 5, 500, 3000, 50000],
+    [20, 5, 600, 5000, 50000],
+    [21, 5, 600, 5000, 50000],
+    [22, 5, 700, 5000, 50000],
+    [23, 5, 700, 5000, 50000],
+    [24, 5, 800, 6000, 100000],
+    [25, 5, 800, 6000, 100000],
+    [26, 5, 900, 7000, 100000],
+    [27, 5, 900, 7000, 100000],
+    [28, 5, 1000, 8000, 100000],
+    [29, 5, 1000, 9000, 100000],
+    [30, 5, 1000, 10000, 100000],
+];

src/app/[locale]/(doings)/rechargeproxy/page.module.scss

@@ -1,7 +1,549 @@
 .page {
     height: 100%;
 }
-.rechargeProxyPage {
+.continuePage {
     height: 100%;
     overflow: auto;
+    background-color: #813af4;
+    .container {
+        position: relative;
+        .img {
+            width: 100%;
+        }
+        .recharge {
+            background-image: url("/continuous/recharge.png");
+            background-size: 100% 100%;
+            width: 1.1rem;
+            height: 0.4rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            right: 0;
+            top: 1.5rem;
+            font-weight: 700;
+            box-sizing: border-box;
+            padding-top: 0.04rem;
+            text-shadow:
+                0.02rem 0.02rem 0.04rem #b81bac,
+                // 右下主阴影
+                -0.02rem -0.02rem 0.04rem #b81bac;
+            // 左上辅助阴影
+            // 0 0 0.08rem rgba(184, 27, 172, 0.5);
+        }
+    }
+    .content {
+        position: relative;
+        top: -0.8rem;
+        .tip {
+            height: 0.6rem;
+            width: 3.2rem;
+            background-image: url("/proxyRecharge/tabbg.png");
+            background-size: 100% 100%;
+            margin: 0 auto;
+            display: flex;
+            align-items: stretch;
+            justify-content: center;
+            overflow: hidden;
+            box-sizing: border-box;
+            padding-top: 0.07rem;
+            position: relative;
+            top: 0.1rem;
+            z-index: 2;
+            .text {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 0.15rem;
+                font-weight: 700;
+                &.active {
+                    background-image: url("/proxyRecharge/tabact.png");
+                    background-size: 100% 100%;
+                }
+            }
+        }
+    }
+    .inner {
+        // height: 300px;
+        position: relative;
+        // border-radius: 0.2rem 0.2rem 0 0;
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            height: 1rem;
+            border-radius: 0.3rem;
+            background-color: #5db0ff;
+            z-index: 1;
+            box-shadow: 0 0 0.1rem rgba(255, 255, 255, 0.1) inset; // 添加内阴影效果，使背景更暗;
+        }
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0.15rem;
+            right: 0;
+            left: 0;
+            height: 1rem;
+            border-radius: 0.3rem;
+            background-color: #ff02ea;
+            z-index: 1;
+        }
+    }
+    .innerContainer {
+        // box-shadow: 0 0 0.2rem #9895d6 inset;
+        // background-image: url("/continuous/bg_1.png");
+        // background-size: 100% auto;
+        // background-repeat: repeat-y;
+        border-radius: 0.3rem 0.3rem 0 0;
+        position: relative;
+        z-index: 2;
+        top: 0.17rem;
+        box-sizing: border-box;
+        padding: 0.2rem 0;
+        &:after {
+            content: "";
+            border-radius: 0.3rem 0.3rem 0 0;
+            box-shadow: 0 0 0.2rem #bfa0f9 inset;
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: -0.62rem;
+            background-image: url("/continuous/bg_1.png");
+            background-size: 100% auto;
+            background-repeat: repeat-y;
+            pointer-events: none;
+            background-color: #8112c4;
+            z-index: 1;
+        } // 添加内阴影效果，使背景更暗;
+    }
+}
+
+.box {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .boxItem {
+        width: 0.75rem;
+        height: 1.1rem;
+        background-size: 100% 100%;
+        position: relative;
+        z-index: 1;
+        &.active {
+            &::after {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                background-image: url("/continuous/gou.png");
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-repeat: no-repeat;
+                background-position: center center;
+            }
+        }
+    }
+    .boxItemTop {
+        height: 0.29rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .boxItemTopText {
+            text-align: center;
+            word-break: break-word;
+            font-size: 0.11rem;
+            line-height: 1.1;
+            font-weight: 700;
+            background: linear-gradient(to bottom, #ffffea, #fff349); // 添加水平渐变背景
+            -webkit-background-clip: text; // 将背景裁剪到文字
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    }
+    .boxItemBottom {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 0.29rem;
+        line-height: 1.1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        word-break: break-word;
+        font-size: 0.11rem;
+    }
+}
+.cfgbox {
+    background: linear-gradient(to bottom, #ff03ea, #0af0ff); // 添加水平渐变背景
+    border-radius: 0.2rem;
+    box-sizing: border-box;
+    padding: 0.02rem;
+    position: relative;
+    z-index: 2;
+    overflow: hidden;
+    font-size: 0.1rem;
+    margin: 0.14rem 0.15rem 0 0.15rem;
+    .cfgHeader {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        justify-content: space-between;
+        background-color: rgba(145, 46, 235, 0.7);
+        box-shadow: 0 0 0.2rem #dd66fb inset; // 添加内阴影效果，使背景更暗;
+        border-bottom: 1px solid #bd79ff;
+
+        div {
+            text-align: center;
+            flex: 1;
+            padding: 0.1rem 0;
+            line-height: 1.1;
+            &:nth-child(1) {
+                flex: 0 0 0.7rem;
+                padding: 0.1rem;
+            }
+        }
+    }
+    .cfgContainer {
+        background-color: rgb(106, 34, 184, 1);
+        box-shadow: 0 0 15px rgba(255, 5, 234, 0.5) inset;
+        min-height: 1rem;
+        border-radius: 0.2rem;
+        background-image: url("/continuous/bg_1.png");
+        background-repeat: repeat;
+        overflow: hidden;
+        background-size: 100% auto;
+    }
+    .cfgItem {
+        display: flex;
+        align-items: stretch;
+        border-bottom: 1px solid #bd79ff;
+    }
+    .cfgItemName {
+        flex: 0 0 0.7rem;
+        border-right: 1px solid #bd79ff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        word-break: break-word;
+        padding: 0.1rem;
+    }
+    .cfgItem {
+        display: flex;
+        align-items: stretch;
+    }
+    .cfgItemChild {
+        border-bottom: 1px solid #bd79ff;
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        justify-content: center;
+        &:nth-last-child(1) {
+            border-bottom: none;
+        }
+        div {
+            flex: 1;
+            border-right: 1px solid #bd79ff;
+            text-align: center;
+            padding: 0.1rem 0;
+        }
+    }
+}
+.stageBox {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    padding: 0 0.2rem 0.2rem 0.2rem;
+    position: relative;
+    z-index: 2;
+    &.stageBox1 {
+        .stageItem {
+            &.lock {
+                .stageImg {
+                    background-image: url("/proxyRecharge/stage2.png");
+                }
+            }
+            &.unlock {
+                .stageImg {
+                    background-image: url("/proxyRecharge/stage3.png");
+                    &:after {
+                        background-image: url("/proxyRecharge/check1.png");
+                    }
+                }
+            }
+        }
+    }
+    .stageItem {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        z-index: 2;
+        margin-right: calc(25% - 0.4rem);
+        width: 0.5rem;
+        &:nth-child(4n) {
+            margin-right: 0;
+        }
+        &.lock {
+            .stageText2 {
+                display: none;
+            }
+            .stageImg {
+                background-image: url("/proxyRecharge/stage1.png");
+                background-size: 100% 100%;
+                &:after {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    background-image: url("/proxyRecharge/lock.png");
+                    background-size: 30%;
+                    background-position: center center;
+                    background-repeat: no-repeat;
+                }
+            }
+        }
+        &.unlock {
+            .stageText {
+                display: none;
+            }
+            .stageImg {
+                background-image: url("/proxyRecharge/stage.png");
+                background-size: 100% 100%;
+                &:after {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    background-image: url("/proxyRecharge/check.png");
+                    background-size: 50%;
+                    background-position: center center;
+                    background-repeat: no-repeat;
+                }
+            }
+        }
+    }
+    .stageImg {
+        width: 0.4rem;
+        height: 0.4rem;
+        position: relative;
+    }
+    .stageText {
+        line-height: 1.1;
+        font-size: 0.12rem;
+        color: #c4a4ff;
+        text-align: center;
+    }
+    .stageText2 {
+        line-height: 1;
+        font-size: 0.13rem;
+        color: #fff;
+        text-align: center;
+    }
+    .stageDay {
+        font-size: 0.12rem;
+        color: #fff;
+    }
+    .stageText2Num {
+        margin-top: 0.04rem;
+        background: linear-gradient(to bottom, #ffffc2, #ffd74c);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        filter: drop-shadow(1px 1px 0 #fd1d9c) drop-shadow(1px -1px 0 #fd1d9c)
+            drop-shadow(-1px 1px 0 #fd1d9c) drop-shadow(-1px -1px 0 #fd1d9c);
+    }
+}
+.premio {
+    margin-top: 0.2rem;
+    position: relative;
+    z-index: 2;
+    margin: 0.2rem 0.15rem 0 0.15rem;
+    .premioTitle {
+        background-image: url("/continuous/t1.png");
+        margin: 0 0.32rem;
+        background-size: 100% 100%;
+        height: 0.53rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fb4862;
+        font-size: 0.15rem;
+        font-weight: 700;
+        box-sizing: border-box;
+        padding-top: 0.06rem;
+        &.premioTitle1 {
+            background-image: url("/proxyRecharge/reward.png");
+            .premioTitleText {
+                color: #fbfcff;
+            }
+        }
+        .premioTitleText {
+            -webkit-background-clip: text; // 将背景裁剪到文字
+            background-clip: text;
+            filter: drop-shadow(0 2px 1px #ccc);
+            text-align: center;
+            line-height: 1;
+            font-size: 0.18rem;
+        }
+    }
+    .premioContainer {
+        border-radius: 0.2rem;
+        background: linear-gradient(to bottom, #ff03ea, #0af0ff); // 添加水平渐变背景
+        padding: 0.02rem;
+    }
+    .premioContent {
+        background-color: #942ef7;
+        box-shadow: 0 0 15px rgba(255, 5, 234, 0.5) inset;
+        min-height: 1rem;
+        padding: 0.1rem;
+        border-radius: 0.2rem;
+        background-image: url("/continuous/bg_1.png");
+        background-size: 100% auto;
+        padding: 0.15rem 0.1rem;
+    }
+    .premioItem {
+        border-radius: 0.1rem;
+        display: flex;
+        padding: 0.08rem;
+        box-shadow: 0 0 0.1rem rgba(242, 142, 254, 1) inset; // 添加内阴影效果，使背景更暗;
+        background-color: rgba(242, 142, 254, 0.4);
+        margin-bottom: 0.15rem;
+        &:nth-last-child(1) {
+            margin-bottom: 0;
+        }
+    }
+    .premioItemDay {
+        width: 0.6rem;
+        height: 0.6rem;
+        border-radius: 0.1rem;
+        background: url("/continuous/rili.png") no-repeat;
+        background-size: 80% auto;
+        background-position: center center;
+        background-color: #fff;
+        perspective: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.2rem;
+        font-weight: 700;
+        margin-right: 0.1rem;
+        position: relative;
+        span {
+            position: absolute;
+            top: 42%;
+            left: 43%;
+            transform: rotateY(0) rotateZ(5deg) rotateX(0) translateX(-50%);
+            transform-origin: 50% 50%;
+            width: 0.3rem;
+            display: block;
+            text-align: center;
+        }
+    }
+    .premioItemBtn {
+        width: 0.75rem;
+        height: 0.25rem;
+        background-image: url("/continuous/btn2.png");
+        background-size: 100% 100%;
+        font-size: 0.11rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &.disabled {
+            background-image: url("/continuous/btn1.png");
+        }
+    }
+}
+.canGet {
+    width: 2.27rem;
+    height: 0.3rem;
+    background-image: url("/continuous/bg2.png");
+    background-size: 100% 100%;
+    text-align: center;
+    line-height: 0.3rem;
+    color: #fff;
+    font-size: 0.14rem;
+    font-weight: 700;
+}
+.introbox {
+    margin-top: 0.3rem;
+    margin-left: 0.15rem;
+    margin-right: 0.15rem;
+    border-radius: 0.2rem;
+    background: linear-gradient(to bottom, #ff03ea, #0af0ff); // 添加水平渐变背景
+    padding: 0.02rem;
+    position: relative;
+    z-index: 2;
+    .introContainer {
+        background-color: #942ef7;
+        box-shadow: 0 0 15px rgba(255, 5, 234, 0.5) inset;
+        min-height: 1rem;
+        padding: 0.1rem;
+        border-radius: 0.2rem;
+        background-image: url("/continuous/bg_1.png");
+        background-size: 100% auto;
+        padding: 0.15rem 0.1rem;
+        position: relative;
+    }
+    .introTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: -0.1rem;
+        left: 0;
+        right: 0;
+        .introTitleText {
+            width: 2.7rem;
+            height: 0.4rem;
+            background-image: url("/continuous/title.png");
+            background-size: 100% 100%;
+            text-align: center;
+            font-size: 0.16rem;
+            font-weight: 700;
+            text-shadow: 0 0 0.02rem red; // 添加文字阴影效果，使文字更清晰;
+            padding-top: 0.06rem;
+        }
+    }
+    .introboxDesc {
+        font-size: 0.12rem;
+        line-height: 1.5;
+        list-style: auto;
+        padding-left: 0.2rem;
+    }
+}
+.introItem {
+    display: flex;
+    flex-direction: row;
+    font-size: 0.12rem;
+    align-items: stretch;
+    background-color: #8e28e0;
+    &.odd {
+        background-color: #7622bb;
+    }
+    div {
+        flex: 1 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0.1rem 0;
+
+        &.idx1 {
+            flex: 0 0 0.4rem;
+        }
+    }
 }

src/app/[locale]/(doings)/rechargeproxy/page.tsx

@@ -1,14 +1,597 @@
 "use client";
+import {
+    claimActivityReward,
+    ContinuousCfgItem,
+    ContinuousListItem,
+    ContinuousResult,
+    ContinuousRewardItem,
+    ContinuousStageItem,
+    getContinuousRechargeInfo,
+} from "@/api/activity";
+import CutDown from "@/components/CutDown";
+import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
+import { useRouter } from "@/i18n/routing";
+import { formatAmount } from "@/utils/index";
+import { Toast } from "antd-mobile";
+import BigNumber from "bignumber.js";
 import clsx from "clsx";
+import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
 import React from "react";
 import styles from "./page.module.scss";
 
-const RechargeProxy: React.FC = () => {
+interface Cfg1Item {
+    text: string;
+    text2: string;
+    key: number;
+    footer: string;
+    footer2?: string;
+}
+
+interface StageItem extends ContinuousStageItem, Cfg1Item {}
+
+interface ListItem {
+    dayId: number;
+    data: ContinuousListItem;
+}
+
+interface RewardItem {
+    dayId: number;
+    data: ContinuousRewardItem[];
+}
+//"#297fcf"
+const DayItem = ({
+    data,
+    idx,
+    onClaim,
+    level,
+}: {
+    data: ContinuousCfgItem;
+    idx: number;
+    onClaim: (data: ContinuousCfgItem) => void;
+    level: string;
+}) => {
+    const dayColor = React.useMemo(() => {
+        return ["#12940f", "#297fcf", "#ec3920"][idx % 3];
+    }, [idx]);
+
+    const doClaim = () => {
+        if (onClaim && typeof onClaim === "function") {
+            onClaim(data);
+        }
+    };
+
+    return (
+        <div>
+            {data.id >= 2 && (
+                <div className="mb-[.1rem] flex flex-row justify-center">
+                    <div className={styles.canGet}>Grande Prêmio Disponível</div>
+                </div>
+            )}
+
+            {!!data.end_at && (
+                <div className="item-center mb-[.1rem] flex flex-row justify-center">
+                    <CutDown
+                        endTime={data.end_at - Date.now() / 1000}
+                        itemBgColor="rgba(255,255,255,.4)"
+                    ></CutDown>
+                </div>
+            )}
+            <div className={styles.premioItem}>
+                <div className={styles.premioItemDay}>
+                    <span style={{ color: dayColor }}>{data.days}</span>
+                </div>
+                <div className="flex flex-col justify-between">
+                    <div className="text-[.16rem] font-bold">
+                        Recarga contínua por {data.days} dias
+                    </div>
+                    <div className="flrx-row flex items-center justify-between">
+                        <div>
+                            Recompensa de login
+                            {/* {level}  */}
+                            {/* {data.target_reward}R */}
+                        </div>
+                        <div
+                            className={clsx(styles.premioItemBtn, {
+                                [styles.disabled]: data.is_sign === 0 || data.is_suss === 1,
+                            })}
+                            onClick={doClaim}
+                        >
+                            {data.is_sign === 0 ? "Recebido" : "Receber"}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const Page = () => {
+    const t = useTranslations();
+    const query = Object.fromEntries(useSearchParams());
+    const [data, setData] = React.useState<ContinuousResult>({} as ContinuousResult);
+    const router = useRouter();
+    const dayContainer = React.useRef<HTMLDivElement>(null);
+
+    const [act, setAct] = React.useState<number>(0);
+    const [amount, setAmount] = React.useState<any>({});
+    const [visible, setVisible] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+        getData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const getData = async () => {
+        const res = await getContinuousRechargeInfo({ activity_id: Number(query.activity_id) });
+        if (res.code === 200) {
+            setData(res.data);
+        }
+    };
+    const cfg1: Record<number, Cfg1Item> = React.useMemo(() => {
+        return {
+            1: {
+                text: "LOGIN ",
+                text2: "PLATINUM",
+                key: 1,
+                footer: "Alcançou",
+            },
+            2: {
+                text: "LOGIN",
+                text2: "GOLD",
+                key: 2,
+                footer: "Ainda preciso",
+            },
+            3: {
+                text: "LOGIN",
+                text2: "DIAMANTE",
+                key: 3,
+                footer: "Ainda preciso",
+            },
+            // 4: {
+            //     text: "ENTRAR NO",
+            //     text2: "MONOPOLY",
+            //     key: 4,
+            //     footer: "Ainda preciso",
+            // },
+            // 5: {
+            //     text: "ENTRAR NO",
+            //     text2: "MONOPOLY",
+            //     key: 5,
+            //     footer: "Ainda preciso",
+            // },
+            // 6: {
+            //     text: "ENTRAR NO",
+            //     text2: "MONOPOLY",
+            //     key: 6,
+            //     footer: "Ainda preciso",
+            // },
+            // 7: {
+            //     text: "ENTRAR NO",
+            //     text2: "MONOPOLY",
+            //     key: 7,
+            //     footer: "Ainda preciso",
+            // },
+        };
+    }, []);
+
+    const stage = React.useMemo<StageItem[]>(() => {
+        let stags = data?.list?.stage;
+        if (!data?.list?.stage) {
+            stags = [
+                { id: 1 },
+                { id: 2 },
+                { id: 3 },
+                // { id: 4 },
+                // { id: 5 },
+                // { id: 6 },
+                // { id: 7 },
+            ] as unknown as ContinuousStageItem[];
+        }
+        const result: StageItem[] = stags
+            .map((item) => {
+                console.log(112233, item);
+                return {
+                    ...item,
+                    ...cfg1[item.id],
+                    footer2: item.diff_num ? `${item.diff_num}R` : "",
+                };
+            })
+            .sort((a: ContinuousStageItem, b: ContinuousStageItem) => a.id - b.id);
+        return result; //[{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }];
+    }, [data?.list?.stage, cfg1]);
+
+    const list = React.useMemo<ListItem[]>(() => {
+        if (!data?.list?.list) {
+            return [];
+        }
+        const result: ListItem[] = [] as ListItem[];
+        Object.keys(data?.list?.list).forEach((key: string) => {
+            const item = data?.list?.list[key as any];
+            const key1 = Object.keys(item)[0];
+            result.push({ dayId: Number(key), data: item[key1 as any] });
+        });
+
+        return result.sort((a, b) => a.dayId - b.dayId);
+    }, [data?.list?.list]);
+
+    const reward_list = React.useMemo<RewardItem[]>(() => {
+        if (!data?.list?.reward_list) {
+            return [];
+        }
+        const result: RewardItem[] = [] as RewardItem[];
+
+        Object.keys(data?.list?.reward_list).forEach((key: string) => {
+            const item = data?.list?.reward_list[key as any];
+            const res2: ContinuousRewardItem[] = [];
+            Object.keys(item).forEach((key2: string) => {
+                const item2 = item[key2 as any];
+                res2.push(item2);
+            });
+            result.push({ dayId: Number(key), data: res2 });
+        });
+
+        return result;
+    }, [data?.list?.reward_list]);
+
+    const waitList = React.useMemo<ContinuousCfgItem[]>(() => {
+        if (!data?.list?.config_list) return [];
+        const result = [] as ContinuousCfgItem[];
+        data?.list?.config_list.forEach((item) => {
+            // if (item.id <= data.cur_num) {
+            //     return;
+            // }
+            result.push(item);
+        });
+        return result.sort((a, b) => a.days - b.days);
+    }, [data?.list?.config_list]);
+
+    const goDeposit = () => {
+        router.push("/deposit");
+    };
+
+    const doClaim = async (data: ContinuousCfgItem) => {
+        if (!query.activity_id) {
+            Toast.show({ content: "Missing activity ID" });
+            return;
+        }
+        if (!data.is_sign) return;
+        try {
+            const res = await claimActivityReward({
+                activity_id: Number(query.activity_id),
+                id: data.days,
+            });
+
+            if (res.code === 200 && res?.data?.code === 1) {
+                const amountObj: any = {};
+                if (res?.data?.reward) {
+                    res?.data?.reward.forEach((item: any) => {
+                        amountObj[`coin_${item.coin_type}`] = formatAmount(item.amount);
+                    });
+                }
+                if (res?.data?.extra_reward) {
+                    res?.data?.extra_reward.forEach((item: any) => {
+                        amountObj[`coin_${item.coin_type}`] = formatAmount(
+                            new BigNumber(amountObj[`coin_${item.coin_type}`] || 0)
+                                .plus(item.amount)
+                                .toString()
+                        );
+                    });
+                }
+                setAmount(amountObj);
+                setVisible(true);
+                getData();
+            } else {
+                throw new Error(t(`code.400`));
+            }
+        } catch (error: any) {
+            if (error) {
+                Toast.show({
+                    content: error.message || error.toString(),
+                    maskClickable: false,
+                });
+            }
+        }
+    };
+
     return (
-        <div className={clsx(styles.rechargeProxyPage)}>
-            <div>2323</div>
+        <div className={clsx(styles.continuePage)}>
+            <div className={styles.container}>
+                <div className={styles.top}>
+                    <img className={styles.img} src="/proxyRecharge/top.png" alt="" />
+                    {/* <div className={styles.recharge} onClick={goDeposit}>
+                        RECARGA
+                    </div> */}
+                </div>
+                <div className={styles.content}>
+                    <div className={styles.tip}>
+                        <div
+                            className={clsx(styles.text, {
+                                [styles.active]: act === 0,
+                            })}
+                            onClick={() => setAct(0)}
+                        >
+                            Meu login
+                        </div>
+                        <div
+                            className={clsx(styles.text, {
+                                [styles.active]: act === 1,
+                            })}
+                            onClick={() => setAct(1)}
+                        >
+                            Login de amigo
+                        </div>
+                    </div>
+                    <div className={styles.inner}>
+                        <div className={styles.innerContainer}>
+                            {!!stage.length && (
+                                <div
+                                    className={clsx(styles.stageBox, {
+                                        [styles.stageBox1]: act === 1,
+                                    })}
+                                >
+                                    {stage.map((item, idx) => {
+                                        return (
+                                            <div
+                                                key={item.key}
+                                                className={clsx(styles.stageItem, {
+                                                    [styles.unlock]: idx < 3,
+                                                    [styles.lock]: idx >= 3,
+                                                })}
+                                            >
+                                                <div className={styles.stageText}>
+                                                    <div>Para ser</div>
+                                                    <div className="mt-[.03rem]">concluído</div>
+                                                </div>
+                                                <div className={styles.stageText2}>
+                                                    <span>recarga</span>
+                                                    <div className={styles.stageText2Num}>
+                                                        10000
+                                                    </div>
+                                                </div>
+                                                <div className={clsx(styles.stageImg)}></div>
+                                                <div className={styles.stageDay}>Dia 1</div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            )}
+                            {/* {!!list?.length && (
+                                <div className={styles.daybox}>
+                                    <div className={styles.dayContainer} ref={dayContainer}>
+                                        {list.map((item: any) => {
+                                            return (
+                                                <div
+                                                    key={item.dayId}
+                                                    className={clsx(styles.dayItem, {
+                                                        [styles.active]: item.data.is_sign,
+                                                    })}
+                                                >
+                                                    <div className={styles.dayItemText}>
+                                                        {item.dayId} dia
+                                                    </div>
+                                                    <div className={styles.dayitemTextActive}>
+                                                        <img
+                                                            src={`/continuous/s${item.data.id}.png`}
+                                                            alt=""
+                                                        />
+                                                        <div className="flex flex-row items-end text-[#dbc6ff]">
+                                                            <span className="relative top-[1px] mt-[2px] text-[.13rem]">
+                                                                {item.dayId}
+                                                            </span>
+                                                            <span>dia</span>
+                                                        </div>
+                                                        <div>recarga</div>
+                                                        <div className="mt-[.03rem] w-[100%] overflow-hidden text-ellipsis text-[#ffb400]">
+                                                            {item?.data?.pay_num}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            )} */}
+                            {!!waitList.length && (
+                                <div className={styles.premio}>
+                                    <div
+                                        className={clsx(styles.premioTitle, {
+                                            [styles.premioTitle1]: act === 1,
+                                        })}
+                                    >
+                                        {act === 1 && (
+                                            <div className={styles.premioTitleText}>
+                                                <div>AMIGO ENTRAR PARA</div>
+                                                <div>RECEBER CORTESIA</div>
+                                            </div>
+                                        )}
+                                        {act === 0 && (
+                                            <div className={styles.premioTitleText}>
+                                                <div>ENTRAR E RECEBER CORTESIA</div>
+                                            </div>
+                                        )}
+                                    </div>
+                                    <div className={styles.premioContainer}>
+                                        <div className={styles.premioContent}>
+                                            {waitList.map((item, idx: number) => {
+                                                return (
+                                                    <DayItem
+                                                        key={item.days}
+                                                        data={item}
+                                                        idx={idx}
+                                                        onClaim={doClaim}
+                                                        level={cfg1[item.id].text2}
+                                                    ></DayItem>
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                            <div className={styles.cfgbox}>
+                                <div className={styles.cfgContainer} ref={dayContainer}>
+                                    <div className={styles.cfgHeader}>
+                                        <div>
+                                            Dias de
+                                            <br />
+                                            depósito
+                                        </div>
+                                        <div>
+                                            Requisitos da <br />
+                                            atividade
+                                        </div>
+                                        <div>
+                                            Valor do
+                                            <br />
+                                            bônus
+                                        </div>
+                                        <div>
+                                            Recompensas <br />
+                                            de Agente
+                                        </div>
+                                    </div>
+                                    <div className={styles.cfgItem}>
+                                        <div className={styles.cfgItemName}>
+                                            Recarga contínua por
+                                        </div>
+                                        <div className="flex-1">
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className={styles.cfgItem}>
+                                        <div className={styles.cfgItemName}>
+                                            Recarga <br /> contínua <br /> por
+                                        </div>
+                                        <div className="flex-1">
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                            <div className={styles.cfgItemChild}>
+                                                <div>232</div>
+                                                <div>232</div>
+                                                <div>232</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className={styles.introbox}>
+                                <div className={styles.introContainer}>
+                                    <div className={styles.introTitle}>
+                                        <span className={styles.introTitleText}>
+                                            Regras de Atividade
+                                        </span>
+                                    </div>
+                                    <div className="h-[.2rem]"></div>
+                                    <ul className={styles.introboxDesc}>
+                                        <li>
+                                            Jogadores que atendem aos requisitos podem receber o
+                                            bônus diretamente.
+                                        </li>
+                                        <li>
+                                            Solicite o bônus desta promoção dentro do período
+                                            promocional. Não se inscrever após o prazo limite será
+                                            considerado como desistência automática.
+                                        </li>
+                                        <li>
+                                            Ao participar desta promoção, você concorda em cumprir
+                                            as Regras e Termos da Promoção.
+                                        </li>
+                                    </ul>
+
+                                    <div className="mt-[.1rem]">
+                                        <div className="pb-[.1rem] text-center text-[.14rem] font-bold">
+                                            Termos e Condições
+                                        </div>
+                                    </div>
+                                    <ul className={styles.introboxDesc}>
+                                        <li>
+                                            Todas as ofertas são liquidadas em RMB (CNY) e são
+                                            baseadas no horário de Pequim.
+                                        </li>
+                                        <li>
+                                            Cada jogador, domicílio, endereço, endereço de e-mail,
+                                            número de telefone, método de pagamento (mesmo cartão de
+                                            débito/crédito/conta bancária) e endereço IP só pode
+                                            aproveitar a oferta uma vez por dia.
+                                        </li>
+                                        <li>
+                                            Se for descoberto que qualquer grupo ou indivíduo está
+                                            obtendo bônus desonestamente ou abusando de benefícios
+                                            da empresa, a empresa reserva-se o direito de congelar
+                                            ou cancelar o saldo do grupo.
+                                        </li>
+                                        <li>
+                                            A Ginkgo Live reserva-se o direito de interpretação
+                                            final do evento; bem como o direito de modificar ou
+                                            encerrar o evento sem aviso prévio.
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <GlobalNotify
+                amount={amount}
+                visible={visible}
+                onChange={() => setVisible(false)}
+                deraction={5000}
+            ></GlobalNotify>
         </div>
     );
 };
 
-export default RechargeProxy;
+export default Page;

src/app/[locale]/layout.tsx

@@ -1,4 +1,6 @@
+import { ConfigType } from "@/api/config";
 import { routing } from "@/i18n/routing";
+import { server } from "@/utils/server";
 import clsx from "clsx";
 import { Metadata, Viewport } from "next";
 import { NextIntlClientProvider } from "next-intl";
@@ -6,10 +8,9 @@ import { getMessages } from "next-intl/server";
 import { Inter as FontSans } from "next/font/google";
 import { notFound } from "next/navigation";
 import { ReactNode } from "react";
+import "../editor.scss";
 import "../globals.scss";
 import { Providers } from "./providers";
-import { server } from "@/utils/server";
-import { ConfigType } from "@/api/config";
 
 // 加载字体
 const fontSans = FontSans({
@@ -40,7 +41,7 @@ export const metadata: Metadata = {
     other: {
         viewport: [
             "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0," +
-            " viewport-fit=cover ",
+                " viewport-fit=cover ",
         ],
     },
 };
@@ -50,17 +51,17 @@ interface Og {
     keywords: string;
     title: string;
     url: string;
-    address: string
+    address: string;
 }
 interface System extends ConfigType {
-    og: Og
+    og: Og;
 }
 const getSystemReq = () => {
     return server.request<System>({
-        url: '/v1/api/front/system/configs',
-        method: 'POST'
-    })
-}
+        url: "/v1/api/front/system/configs",
+        method: "POST",
+    });
+};
 export default async function LocaleLayout({
     children,
     params: { locale },
@@ -73,7 +74,7 @@ export default async function LocaleLayout({
     }
     const messages = await getMessages();
 
-    const { data } = await getSystemReq()
+    const { data } = await getSystemReq();
     // console.log(data)
     return (
         <html lang={locale} suppressHydrationWarning>
@@ -85,17 +86,17 @@ export default async function LocaleLayout({
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> */}
 
                 {/* <!-- Open Graph Metadata --> */}
-                <meta property="og:title" content={data?.og?.title || ''} />
-                <meta property="og:description" content={data?.og?.description || ''} />
-                <meta property="og:image" content={data?.og?.url || ''} />
-                <meta property="og:url" content={data?.og?.address || ''} />
+                <meta property="og:title" content={data?.og?.title || ""} />
+                <meta property="og:description" content={data?.og?.description || ""} />
+                <meta property="og:image" content={data?.og?.url || ""} />
+                <meta property="og:url" content={data?.og?.address || ""} />
                 <meta property="og:type" content="website" />
 
                 {/* <!-- Twitter Card Metadata --> */}
-                <meta name="twitter:card" content={data?.og?.address || ''} />
-                <meta name="twitter:title" content={data?.og?.title || ''} />
-                <meta name="twitter:description" content={data?.og?.description || ''} />
-                <meta name="twitter:image" content={data?.og?.url || ''} />
+                <meta name="twitter:card" content={data?.og?.address || ""} />
+                <meta name="twitter:title" content={data?.og?.title || ""} />
+                <meta name="twitter:description" content={data?.og?.description || ""} />
+                <meta name="twitter:image" content={data?.og?.url || ""} />
             </head>
             <body className={clsx("font-sans", fontSans.variable)}>
                 <NextIntlClientProvider messages={messages}>

src/app/editor.scss

@@ -0,0 +1,1063 @@
+/**
+ * Skipped minification because the original files appears to be already minified.
+ * Original file: /npm/react-quill-new@3.4.6/dist/quill.snow.css
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+/*!
+ * Quill Editor v2.0.2
+ * https://quilljs.com
+ * Copyright (c) 2017-2024, Slab
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+    box-sizing: border-box;
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    height: 100%;
+    margin: 0;
+    position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+    visibility: hidden;
+}
+.ql-container:not(.ql-disabled) li[data-list="checked"] > .ql-ui,
+.ql-container:not(.ql-disabled) li[data-list="unchecked"] > .ql-ui {
+    cursor: pointer;
+}
+.ql-clipboard {
+    left: -100000px;
+    height: 1px;
+    overflow-y: hidden;
+    position: absolute;
+    top: 50%;
+}
+.ql-clipboard p {
+    margin: 0;
+    padding: 0;
+}
+.ql-editor {
+    box-sizing: border-box;
+    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    line-height: 1.42;
+    height: 100%;
+    outline: none;
+    overflow-y: auto;
+    padding: 12px 15px;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    text-align: left;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+.ql-editor > * {
+    cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+    margin: 0;
+    padding: 0;
+}
+@supports (counter-set: none) {
+    .ql-editor p,
+    .ql-editor h1,
+    .ql-editor h2,
+    .ql-editor h3,
+    .ql-editor h4,
+    .ql-editor h5,
+    .ql-editor h6 {
+        counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor p,
+    .ql-editor h1,
+    .ql-editor h2,
+    .ql-editor h3,
+    .ql-editor h4,
+    .ql-editor h5,
+    .ql-editor h6 {
+        counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+.ql-editor table {
+    border-collapse: collapse;
+}
+.ql-editor td {
+    border: 1px solid #000;
+    padding: 2px 5px;
+}
+.ql-editor ol {
+    padding-left: 1.5em;
+}
+.ql-editor li {
+    list-style-type: none;
+    padding-left: 1.5em;
+    position: relative;
+}
+.ql-editor li > .ql-ui:before {
+    display: inline-block;
+    margin-left: -1.5em;
+    margin-right: 0.3em;
+    text-align: right;
+    white-space: nowrap;
+    width: 1.2em;
+}
+.ql-editor li[data-list="checked"] > .ql-ui,
+.ql-editor li[data-list="unchecked"] > .ql-ui {
+    color: #777;
+}
+.ql-editor li[data-list="bullet"] > .ql-ui:before {
+    content: "\2022";
+}
+.ql-editor li[data-list="checked"] > .ql-ui:before {
+    content: "\2611";
+}
+.ql-editor li[data-list="unchecked"] > .ql-ui:before {
+    content: "\2610";
+}
+@supports (counter-set: none) {
+    .ql-editor li[data-list] {
+        counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor li[data-list] {
+        counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+.ql-editor li[data-list="ordered"] {
+    counter-increment: list-0;
+}
+.ql-editor li[data-list="ordered"] > .ql-ui:before {
+    content: counter(list-0, decimal) ". ";
+}
+.ql-editor li[data-list="ordered"].ql-indent-1 {
+    counter-increment: list-1;
+}
+.ql-editor li[data-list="ordered"].ql-indent-1 > .ql-ui:before {
+    content: counter(list-1, lower-alpha) ". ";
+}
+@supports (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-1 {
+        counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-1 {
+        counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+.ql-editor li[data-list="ordered"].ql-indent-2 {
+    counter-increment: list-2;
+}
+.ql-editor li[data-list="ordered"].ql-indent-2 > .ql-ui:before {
+    content: counter(list-2, lower-roman) ". ";
+}
+@supports (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-2 {
+        counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-2 {
+        counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+.ql-editor li[data-list="ordered"].ql-indent-3 {
+    counter-increment: list-3;
+}
+.ql-editor li[data-list="ordered"].ql-indent-3 > .ql-ui:before {
+    content: counter(list-3, decimal) ". ";
+}
+@supports (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-3 {
+        counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-3 {
+        counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+}
+.ql-editor li[data-list="ordered"].ql-indent-4 {
+    counter-increment: list-4;
+}
+.ql-editor li[data-list="ordered"].ql-indent-4 > .ql-ui:before {
+    content: counter(list-4, lower-alpha) ". ";
+}
+@supports (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-4 {
+        counter-set: list-5 list-6 list-7 list-8 list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-4 {
+        counter-reset: list-5 list-6 list-7 list-8 list-9;
+    }
+}
+.ql-editor li[data-list="ordered"].ql-indent-5 {
+    counter-increment: list-5;
+}
+.ql-editor li[data-list="ordered"].ql-indent-5 > .ql-ui:before {
+    content: counter(list-5, lower-roman) ". ";
+}
+@supports (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-5 {
+        counter-set: list-6 list-7 list-8 list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-5 {
+        counter-reset: list-6 list-7 list-8 list-9;
+    }
+}
+.ql-editor li[data-list="ordered"].ql-indent-6 {
+    counter-increment: list-6;
+}
+.ql-editor li[data-list="ordered"].ql-indent-6 > .ql-ui:before {
+    content: counter(list-6, decimal) ". ";
+}
+@supports (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-6 {
+        counter-set: list-7 list-8 list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-6 {
+        counter-reset: list-7 list-8 list-9;
+    }
+}
+.ql-editor li[data-list="ordered"].ql-indent-7 {
+    counter-increment: list-7;
+}
+.ql-editor li[data-list="ordered"].ql-indent-7 > .ql-ui:before {
+    content: counter(list-7, lower-alpha) ". ";
+}
+@supports (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-7 {
+        counter-set: list-8 list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-7 {
+        counter-reset: list-8 list-9;
+    }
+}
+.ql-editor li[data-list="ordered"].ql-indent-8 {
+    counter-increment: list-8;
+}
+.ql-editor li[data-list="ordered"].ql-indent-8 > .ql-ui:before {
+    content: counter(list-8, lower-roman) ". ";
+}
+@supports (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-8 {
+        counter-set: list-9;
+    }
+}
+@supports not (counter-set: none) {
+    .ql-editor li[data-list].ql-indent-8 {
+        counter-reset: list-9;
+    }
+}
+.ql-editor li[data-list="ordered"].ql-indent-9 {
+    counter-increment: list-9;
+}
+.ql-editor li[data-list="ordered"].ql-indent-9 > .ql-ui:before {
+    content: counter(list-9, decimal) ". ";
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+    padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+    padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+    padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+    padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+    padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+    padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+    padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+    padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+    padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+    padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+    padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+    padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+    padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+    padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+    padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+    padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+    padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+    padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+    padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+    padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+    padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+    padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+    padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+    padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+    padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+    padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+    padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+    padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+    padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+    padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+    padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+    padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+    padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+    padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+    padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+    padding-right: 28.5em;
+}
+.ql-editor li.ql-direction-rtl {
+    padding-right: 1.5em;
+}
+.ql-editor li.ql-direction-rtl > .ql-ui:before {
+    margin-left: 0.3em;
+    margin-right: -1.5em;
+    text-align: left;
+}
+.ql-editor table {
+    table-layout: fixed;
+    width: 100%;
+}
+.ql-editor table td {
+    outline: none;
+}
+.ql-editor .ql-code-block-container {
+    font-family: monospace;
+}
+.ql-editor .ql-video {
+    display: block;
+    max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+    margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+    margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+    background-color: #000;
+}
+.ql-editor .ql-bg-red {
+    background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+    background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+    background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+    background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+    background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+    background-color: #93f;
+}
+.ql-editor .ql-color-white {
+    color: #fff;
+}
+.ql-editor .ql-color-red {
+    color: #e60000;
+}
+.ql-editor .ql-color-orange {
+    color: #f90;
+}
+.ql-editor .ql-color-yellow {
+    color: #ff0;
+}
+.ql-editor .ql-color-green {
+    color: #008a00;
+}
+.ql-editor .ql-color-blue {
+    color: #06c;
+}
+.ql-editor .ql-color-purple {
+    color: #93f;
+}
+.ql-editor .ql-font-serif {
+    font-family:
+        Georgia,
+        Times New Roman,
+        serif;
+}
+.ql-editor .ql-font-monospace {
+    font-family:
+        Monaco,
+        Courier New,
+        monospace;
+}
+.ql-editor .ql-size-small {
+    font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+    font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+    font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+    direction: rtl;
+    text-align: inherit;
+}
+.ql-editor .ql-align-center {
+    text-align: center;
+}
+.ql-editor .ql-align-justify {
+    text-align: justify;
+}
+.ql-editor .ql-align-right {
+    text-align: right;
+}
+.ql-editor .ql-ui {
+    position: absolute;
+}
+.ql-editor.ql-blank::before {
+    color: rgba(0, 0, 0, 0.6);
+    content: attr(data-placeholder);
+    font-style: italic;
+    left: 15px;
+    pointer-events: none;
+    position: absolute;
+    right: 15px;
+}
+.ql-snow.ql-toolbar:after,
+.ql-snow .ql-toolbar:after {
+    clear: both;
+    content: "";
+    display: table;
+}
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    float: left;
+    height: 24px;
+    padding: 3px 5px;
+    width: 28px;
+}
+.ql-snow.ql-toolbar button svg,
+.ql-snow .ql-toolbar button svg {
+    float: left;
+    height: 100%;
+}
+.ql-snow.ql-toolbar button:active:hover,
+.ql-snow .ql-toolbar button:active:hover {
+    outline: none;
+}
+.ql-snow.ql-toolbar input.ql-image[type="file"],
+.ql-snow .ql-toolbar input.ql-image[type="file"] {
+    display: none;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+    color: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+    fill: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke,
+.ql-snow .ql-toolbar button:hover .ql-stroke,
+.ql-snow.ql-toolbar button:focus .ql-stroke,
+.ql-snow .ql-toolbar button:focus .ql-stroke,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+    stroke: #06c;
+}
+@media (pointer: coarse) {
+    .ql-snow.ql-toolbar button:hover:not(.ql-active),
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+        color: #444;
+    }
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+        fill: #444;
+    }
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+        stroke: #444;
+    }
+}
+.ql-snow {
+    box-sizing: border-box;
+}
+.ql-snow * {
+    box-sizing: border-box;
+}
+.ql-snow .ql-hidden {
+    display: none;
+}
+.ql-snow .ql-out-bottom,
+.ql-snow .ql-out-top {
+    visibility: hidden;
+}
+.ql-snow .ql-tooltip {
+    position: absolute;
+    transform: translateY(10px);
+}
+.ql-snow .ql-tooltip a {
+    cursor: pointer;
+    text-decoration: none;
+}
+.ql-snow .ql-tooltip.ql-flip {
+    transform: translateY(-10px);
+}
+.ql-snow .ql-formats {
+    display: inline-block;
+    vertical-align: middle;
+}
+.ql-snow .ql-formats:after {
+    clear: both;
+    content: "";
+    display: table;
+}
+.ql-snow .ql-stroke {
+    fill: none;
+    stroke: #444;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+}
+.ql-snow .ql-stroke-miter {
+    fill: none;
+    stroke: #444;
+    stroke-miterlimit: 10;
+    stroke-width: 2;
+}
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+    fill: #444;
+}
+.ql-snow .ql-empty {
+    fill: none;
+}
+.ql-snow .ql-even {
+    fill-rule: evenodd;
+}
+.ql-snow .ql-thin,
+.ql-snow .ql-stroke.ql-thin {
+    stroke-width: 1;
+}
+.ql-snow .ql-transparent {
+    opacity: 0.4;
+}
+.ql-snow .ql-direction svg:last-child {
+    display: none;
+}
+.ql-snow .ql-direction.ql-active svg:last-child {
+    display: inline;
+}
+.ql-snow .ql-direction.ql-active svg:first-child {
+    display: none;
+}
+.ql-snow .ql-editor h1 {
+    font-size: 2em;
+}
+.ql-snow .ql-editor h2 {
+    font-size: 1.5em;
+}
+.ql-snow .ql-editor h3 {
+    font-size: 1.17em;
+}
+.ql-snow .ql-editor h4 {
+    font-size: 1em;
+}
+.ql-snow .ql-editor h5 {
+    font-size: 0.83em;
+}
+.ql-snow .ql-editor h6 {
+    font-size: 0.67em;
+}
+.ql-snow .ql-editor a {
+    text-decoration: underline;
+}
+.ql-snow .ql-editor blockquote {
+    border-left: 4px solid #ccc;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding-left: 16px;
+}
+.ql-snow .ql-editor code,
+.ql-snow .ql-editor .ql-code-block-container {
+    background-color: #f0f0f0;
+    border-radius: 3px;
+}
+.ql-snow .ql-editor .ql-code-block-container {
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding: 5px 10px;
+}
+.ql-snow .ql-editor code {
+    font-size: 85%;
+    padding: 2px 4px;
+}
+.ql-snow .ql-editor .ql-code-block-container {
+    background-color: #23241f;
+    color: #f8f8f2;
+    overflow: visible;
+}
+.ql-snow .ql-editor img {
+    max-width: 100%;
+}
+.ql-snow .ql-picker {
+    color: #444;
+    display: inline-block;
+    float: left;
+    font-size: 14px;
+    font-weight: 500;
+    height: 24px;
+    position: relative;
+    vertical-align: middle;
+}
+.ql-snow .ql-picker-label {
+    cursor: pointer;
+    display: inline-block;
+    height: 100%;
+    padding-left: 8px;
+    padding-right: 2px;
+    position: relative;
+    width: 100%;
+}
+.ql-snow .ql-picker-label::before {
+    display: inline-block;
+    line-height: 22px;
+}
+.ql-snow .ql-picker-options {
+    background-color: #fff;
+    display: none;
+    min-width: 100%;
+    padding: 4px 8px;
+    position: absolute;
+    white-space: nowrap;
+}
+.ql-snow .ql-picker-options .ql-picker-item {
+    cursor: pointer;
+    display: block;
+    padding-bottom: 5px;
+    padding-top: 5px;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+    color: #ccc;
+    z-index: 2;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+    fill: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+    stroke: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+    display: block;
+    margin-top: -1px;
+    top: 100%;
+    z-index: 1;
+}
+.ql-snow .ql-color-picker,
+.ql-snow .ql-icon-picker {
+    width: 28px;
+}
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+    padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-label svg,
+.ql-snow .ql-icon-picker .ql-picker-label svg {
+    right: 4px;
+}
+.ql-snow .ql-icon-picker .ql-picker-options {
+    padding: 4px 0;
+}
+.ql-snow .ql-icon-picker .ql-picker-item {
+    height: 24px;
+    width: 24px;
+    padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-options {
+    padding: 3px 5px;
+    width: 152px;
+}
+.ql-snow .ql-color-picker .ql-picker-item {
+    border: 1px solid transparent;
+    float: left;
+    height: 16px;
+    margin: 2px;
+    padding: 0;
+    width: 16px;
+}
+.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+    position: absolute;
+    margin-top: -9px;
+    right: 0;
+    top: 50%;
+    width: 18px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""])::before {
+    content: attr(data-label);
+}
+.ql-snow .ql-picker.ql-header {
+    width: 98px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+    content: "Normal";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+    content: "Heading 1";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+    content: "Heading 2";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+    content: "Heading 3";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+    content: "Heading 4";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+    content: "Heading 5";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+    content: "Heading 6";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+    font-size: 2em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+    font-size: 1.5em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+    font-size: 1.17em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+    font-size: 1em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+    font-size: 0.83em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+    font-size: 0.67em;
+}
+.ql-snow .ql-picker.ql-font {
+    width: 108px;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+    content: "Sans Serif";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+    content: "Serif";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+    content: "Monospace";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+    font-family:
+        Georgia,
+        Times New Roman,
+        serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+    font-family:
+        Monaco,
+        Courier New,
+        monospace;
+}
+.ql-snow .ql-picker.ql-size {
+    width: 98px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+    content: "Normal";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+    content: "Small";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+    content: "Large";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+    content: "Huge";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+    font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+    font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+    font-size: 32px;
+}
+.ql-snow .ql-color-picker.ql-background .ql-picker-item {
+    background-color: #fff;
+}
+.ql-snow .ql-color-picker.ql-color .ql-picker-item {
+    background-color: #000;
+}
+.ql-code-block-container {
+    position: relative;
+}
+.ql-code-block-container .ql-ui {
+    right: 5px;
+    top: 5px;
+}
+.ql-toolbar.ql-snow {
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    padding: 8px;
+}
+.ql-toolbar.ql-snow .ql-formats {
+    margin-right: 15px;
+}
+.ql-toolbar.ql-snow .ql-picker-label {
+    border: 1px solid transparent;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+    border: 1px solid transparent;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+    border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+    border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
+    border-color: #000;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+    border-top: 0;
+}
+.ql-snow .ql-tooltip {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 0 5px #ddd;
+    color: #444;
+    padding: 5px 12px;
+    white-space: nowrap;
+}
+.ql-snow .ql-tooltip::before {
+    content: "Visit URL:";
+    line-height: 26px;
+    margin-right: 8px;
+}
+.ql-snow .ql-tooltip input[type="text"] {
+    display: none;
+    border: 1px solid #ccc;
+    font-size: 13px;
+    height: 26px;
+    margin: 0;
+    padding: 3px 5px;
+    width: 170px;
+}
+.ql-snow .ql-tooltip a.ql-preview {
+    display: inline-block;
+    max-width: 200px;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+.ql-snow .ql-tooltip a.ql-action::after {
+    border-right: 1px solid #ccc;
+    content: "Edit";
+    margin-left: 16px;
+    padding-right: 8px;
+}
+.ql-snow .ql-tooltip a.ql-remove::before {
+    content: "Remove";
+    margin-left: 8px;
+}
+.ql-snow .ql-tooltip a {
+    line-height: 26px;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-preview,
+.ql-snow .ql-tooltip.ql-editing a.ql-remove {
+    display: none;
+}
+.ql-snow .ql-tooltip.ql-editing input[type="text"] {
+    display: inline-block;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+    border-right: 0;
+    content: "Save";
+    padding-right: 0;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+    content: "Enter link:";
+}
+.ql-snow .ql-tooltip[data-mode="formula"]::before {
+    content: "Enter formula:";
+}
+.ql-snow .ql-tooltip[data-mode="video"]::before {
+    content: "Enter video:";
+}
+.ql-snow a {
+    color: #06c;
+}
+.ql-container.ql-snow {
+    border: 1px solid #ccc;
+}
+
+/*# sourceMappingURL=quill.snow.css.map*/

src/dialog/text/index.tsx

@@ -69,8 +69,8 @@ const ImgDialog = () => {
                     <div className={styles.imgDialogContainer}>
                         <div
                             dangerouslySetInnerHTML={{ __html: data?.content?.text }}
-                            className={styles.textBox}
-                            onCanPlay={doFun}
+                            className={clsx(styles.textBox, "ql-editor")}
+                            onClick={doFun}
                         ></div>
                         <div className={clsx(styles.close)} onClick={close}>
                             <i