feat: 邮件相关

messages/br.json

@@ -191,7 +191,8 @@
         "bouns6001": "Condições não satisfeitas",
         "bouns6002": "No Bouns está aberto, não é possível receber",
         "success": "Sucesso",
-        "depositeWarn": "Você está no modo sem bônus. Continuar?"
+        "depositeWarn": "Você está no modo sem bônus. Continuar?",
+        "email": "E-mail"
     },
     "DepositPage": {
         "Montante": "Alcance de recarga",

src/app/[locale]/(navbar)/notification/NotificationClient.tsx

@@ -4,6 +4,7 @@ import Tabs from "@/components/Tabs";
 import { useTranslations } from "next-intl";
 import { FC, useState } from "react";
 import actions from "./actions";
+import Email from "./components/Email";
 import { default as Notices } from "./components/Notices";
 
 interface Props {
@@ -42,16 +43,37 @@ const NotificationClient: FC<Props> = (props) => {
     const defaultTabs = [
         {
             id: 1,
-            name: t("systemMessage"),
+            name: (
+                <div className="flex items-center text-[.14rem]">
+                    <i className="iconfont icon-laba mr-[.02rem] text-[.14rem]"></i>
+                    <div>{t("systemMessage")}</div>
+                </div>
+            ),
             content: systemNotices.reduce((count, notice) => count + (notice.is_read ? 0 : 1), 0),
             render: <Notices data={systemNotices} type={"system"} handler={handler} />,
         },
         {
             id: 2,
-            name: t("personalMessage"),
+            name: (
+                <div className="flex items-center text-[.14rem]">
+                    <i className="iconfont icon-yonghu mr-[.02rem] text-[.16rem]"></i>
+                    <div>{t("personalMessage")}</div>
+                </div>
+            ),
             content: userNotices.reduce((count, notice) => count + (notice.is_read ? 0 : 1), 0),
             render: <Notices data={userNotices} type={"user"} handler={handler} />,
         },
+        {
+            id: 3,
+            name: (
+                <div className="flex items-center text-[.14rem]">
+                    <i className="iconfont icon-duanxinguanli mr-[.02rem] text-[.18rem]"></i>
+                    <div>{t("email")}</div>
+                </div>
+            ),
+            content: userNotices.reduce((count, notice) => count + (notice.is_read ? 0 : 1), 0),
+            render: <Email></Email>,
+        },
     ];
     return <Tabs items={defaultTabs} />;
 };

src/app/[locale]/(navbar)/notification/components/Email.tsx

@@ -0,0 +1,41 @@
+import styles from "./style.module.scss";
+const Email = () => {
+    return (
+        <div className={styles.emailBox}>
+            <div className={styles.content}>
+                <div className={styles.emailItem}>
+                    <div className={styles.title}>
+                        <div className="text-[#c6d4e1]">
+                            232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232
+                        </div>
+                        <div className="mt-[.04rem] text-[.1rem] text-[#5d7284]">202112323</div>
+                    </div>
+                    <img className={styles.gift} src="/notice/gift.png" alt="" />
+                    <div className={styles.doGet}>Nova!!</div>
+                </div>
+                <div className={styles.emailItem}>
+                    <div className={styles.title}>
+                        <div className="text-[#c6d4e1]">
+                            232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232232322323223232
+                        </div>
+                        <div className="mt-[.04rem] text-[.1rem] text-[#5d7284]">202112323</div>
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.footer}>
+                <div className="px-[.12rem] pb-[.12rem] text-[.1rem] text-[#697885]">
+                    Os e-mails nāo podem ser recebidos apos expirar.
+                    <br />
+                    Os e-mails recebidos sao limpos após expirar.
+                </div>
+                <div className={styles.btns}>
+                    <button>Excluir leitura</button>
+                    <button>Uma peça para pegar</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Email;

src/app/[locale]/(navbar)/notification/components/Notices.tsx

@@ -42,15 +42,15 @@ const SystemMessage = (props: Props) => {
                                         }}
                                     ></div>
                                 )}
-                                <span className={"iconfont icon-zhankai text-[#04e8fc]"} />
+                                <span className={"iconfont icon-zhankai text-[#4d789e]"} />
                             </div>
                         }
                         title={
                             <section>
                                 <header className={"flex items-center"}>
-                                    <h6 className={""}>{notice.content?.title}</h6>
+                                    <h6 className={"text-[#c6d4e1]"}>{notice.content?.title}</h6>
                                 </header>
-                                <p className={"text-[12px] text-[#caceff]"}>
+                                <p className={"text-[12px] text-[#5d7284]"}>
                                     {notice.send_time
                                         ? timeFormat(notice.send_time!, locale)
                                         : timeFormat(notice.send_user_time!, locale)}
@@ -59,27 +59,31 @@ const SystemMessage = (props: Props) => {
                         }
                     >
                         <div>
-                            <p className={"text-[16px] text-[#c1c6d2]"}>{notice.content?.text}</p>
+                            <p className={"break-all text-[16px] text-[#c1c6d2]"}>
+                                {notice.content?.text}
+                            </p>
 
-                            <img src={notice.content?.image} alt="" />
-                            <div
-                                className={`-mb-[12px] mt-[0.0694rem] flex h-[0.2778rem] items-center justify-center border-t-[0.0rem] border-[#caceff] text-[#c1c6d2]`}
-                            >
-                                <Box
-                                    action={notice.action_type}
-                                    actionData={notice.action_params}
-                                    className={"flex items-center"}
+                            {notice.content?.image && <img src={notice.content?.image} alt="" />}
+                            {notice.content?.word && (
+                                <div
+                                    className={`-mb-[12px] mt-[0.0694rem] flex h-[0.2778rem] items-center justify-center border-t-[0.0rem] border-[#caceff] text-[#c1c6d2]`}
                                 >
-                                    <p className={"text-[0.1111rem] text-[#caceff]"}>
-                                        {notice.content?.word}{" "}
-                                    </p>
-                                    <span
-                                        className={
-                                            "iconfont icon-xiangyou2 ml-[5px] text-[0.08rem] text-[#caceff]"
-                                        }
-                                    ></span>
-                                </Box>
-                            </div>
+                                    <Box
+                                        action={notice.action_type}
+                                        actionData={notice.action_params}
+                                        className={"flex items-center"}
+                                    >
+                                        <p className={"text-[0.1111rem] text-[#caceff]"}>
+                                            {notice.content?.word}{" "}
+                                        </p>
+                                        <span
+                                            className={
+                                                "iconfont icon-xiangyou2 ml-[5px] text-[0.08rem] text-[#5d7284]"
+                                            }
+                                        ></span>
+                                    </Box>
+                                </div>
+                            )}
                         </div>
                     </Collapse.Panel>
                 ))}

src/app/[locale]/(navbar)/notification/components/style.module.scss

@@ -1,9 +1,11 @@
 .messageCollapse {
+    padding: 0 0.12rem 0.12rem;
     :global(.adm-list-body-inner) {
         // background: #32343a;
-        box-shadow: 0 0 15px #34a7bb inset;
-        border: 1px solid #46e3ff;
+        // box-shadow: 0 0 15px #34a7bb inset;
+        // border: 1px solid #46e3ff;
         border-radius: 0.1rem;
+        background-color: #1f2830;
     }
     :global(a.adm-list-item:active:not(.adm-list-item-disabled)) {
         // background-color: #32343a;
@@ -13,3 +15,63 @@
         margin-bottom: 10px;
     }
 }
+
+.emailBox {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    .content {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+        padding: 0 0.12rem 0.12rem;
+    }
+    .footer {
+        .btns {
+            display: flex;
+            background-color: #161b1f;
+            justify-content: space-between;
+            box-sizing: border-box;
+            padding: 0.12rem;
+            button {
+                width: 47%;
+                color: #121c1b;
+                height: 0.38rem;
+                border-radius: 0.19rem;
+                &:nth-child(1) {
+                    background-color: #11de68;
+                }
+                &:nth-child(2) {
+                    background-color: #ecc720;
+                }
+            }
+        }
+    }
+    .emailItem {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: #1f2830;
+        margin-bottom: 0.12rem;
+        border-radius: 0.1rem;
+        padding: 0.12rem;
+    }
+    .doGet {
+        color: #ebc71f;
+        font-size: 0.14rem;
+    }
+    .title {
+        width: 60%;
+        div:nth-child(1) {
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .gift {
+        width: 0.24rem;
+    }
+}

src/app/[locale]/(navbar)/notification/layout.tsx

@@ -1,6 +1,7 @@
 import HeaderBack from "@/components/HeaderBack";
 import { getTranslations } from "next-intl/server";
 import { ReactNode } from "react";
+import styles from "./style.module.scss";
 export const generateMetadata = async () => {
     const t = await getTranslations("titles");
     return {
@@ -16,8 +17,13 @@ export default async function Layout({
 }) {
     const t = await getTranslations("ProfilePage");
     return (
-        <div className="h-[100%] overflow-auto bg-[url('/home/bg.jpg')]">
-            <HeaderBack showBack={true} title={t("message")} useBg={true} />
+        <div className="h-[100%] overflow-auto">
+            <HeaderBack
+                showBack={true}
+                title={t("message")}
+                useBg={false}
+                className={styles.header}
+            />
             <main className={"main-header"}>{children}</main>
         </div>
     );

src/app/[locale]/(navbar)/notification/page.tsx

@@ -22,7 +22,7 @@ const Notification = async () => {
     const systemNotices = await getSystemNotifications();
     const userNotices = await getUserNotices();
     return (
-        <div className={clsx("overflow-visible", styles.notificationPage)}>
+        <div className={clsx("h-[100%] overflow-visible pt-[.12rem]", styles.notificationPage)}>
             <NotificationClient systemNotices={systemNotices.data} userNotices={userNotices.data} />
         </div>
     );

src/app/[locale]/(navbar)/notification/style.module.scss

@@ -1,40 +1,56 @@
 .notificationPage {
     :global(.adm-tabs-tab-list) {
-        margin: 0.12rem;
-        // border: 1px solid #e43bff;
-        // border-radius: 0.3rem;
-        // box-shadow: 0 0 15px #7735bd inset;
-        padding-bottom: 0.1rem;
+        margin: 0 0.12rem 0.12rem;
+        background-color: #1f2830;
+        border-radius: 0.1rem;
+        height: 0.4rem;
         position: relative;
-        &:after {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            bottom: 0;
-            border-bottom: 1px solid #fcd6ff;
-            border-radius: 0.3rem;
-            pointer-events: none;
-        }
-        &:before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: 1px;
-            width: 100%;
-            bottom: 1px;
-            border: 1px solid #e43bff;
-            border-radius: 0.3rem;
-            box-shadow: 0 0 15px #7735bd inset;
-            padding-bottom: 0.1rem;
-            pointer-events: none;
-        }
+    }
+    :global(.adm-tabs) {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    :global(.adm-tabs-content) {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+        padding: 0;
     }
     :global(.adm-tabs-tab) {
         padding-bottom: 0;
     }
+    // :global(.adm-tabs-tab-line) {
+    //     bottom: 0.08rem;
+    // }
     :global(.adm-tabs-tab-line) {
-        bottom: 0.08rem;
+        top: 0;
+        bottom: 0;
+        background: #11de68;
+        height: 100%;
+        border-radius: 0.1rem;
     }
+    :global(.adm-tabs-tab-wrapper) {
+        flex: 1;
+        padding: 0;
+        height: 100%;
+    }
+    :global(.adm-tabs-tab) {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #5d7284;
+        font-weight: 700;
+    }
+    :global(.adm-tabs-tab-active) {
+        color: #122f23;
+    }
+}
+.header {
+    background: #1e252b;
 }

src/components/Tabs/index.tsx

@@ -1,10 +1,10 @@
 "use client";
-import { Badge, Tabs } from "antd-mobile";
+import { Tabs } from "antd-mobile";
 import { FC, PropsWithChildren, ReactNode } from "react";
 import styles from "./style.module.scss";
 interface Item {
     id: number;
-    name: string;
+    name: string | ReactNode;
     content: number;
     render: ReactNode;
 }
@@ -52,11 +52,23 @@ const Transactions: FC<PropsWithChildren<Props>> = (props) => {
                             // >
                             //     {tab.name}
                             // </Badge>
-                            <div style={{position: 'relative'}}>
-                              {tab.name}
-                              {
-                                tab.content > 0 && <div className={`mr-[0.1rem] h-[0.15rem] w-[0.15rem] text-[#fff] flex items-center justify-center`} style={{position: 'absolute', borderRadius: "0.075rem", backgroundColor: "#ff311b",  fontSize: "0.1rem", top: '-0.02rem', right: '-0.24rem'}}>{tab.content}</div>
-                              }
+                            <div style={{ position: "relative" }}>
+                                {tab.name}
+                                {tab.content > 0 && (
+                                    <div
+                                        className={`mr-[0.1rem] flex h-[0.15rem] w-[0.15rem] items-center justify-center text-[#fff]`}
+                                        style={{
+                                            position: "absolute",
+                                            borderRadius: "0.075rem",
+                                            backgroundColor: "#ff311b",
+                                            fontSize: "0.1rem",
+                                            top: "-0.02rem",
+                                            right: "-0.24rem",
+                                        }}
+                                    >
+                                        {tab.content}
+                                    </div>
+                                )}
                             </div>
                         }
                     >