feat: 邮件

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

@@ -0,0 +1,30 @@
+import HeaderBack from "@/components/HeaderBack";
+import { getTranslations } from "next-intl/server";
+import { ReactNode } from "react";
+import styles from "./page.module.scss";
+export const generateMetadata = async () => {
+    const t = await getTranslations("titles");
+    return {
+        title: t("message"),
+    };
+};
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const t = await getTranslations("ProfilePage");
+    return (
+        <div className="h-[100%] overflow-auto bg-[#1e252b]">
+            <HeaderBack
+                showBack={true}
+                title={"Regresso"}
+                useBg={false}
+                className={styles.header}
+            />
+            <main className={"main-header bg-[#0b0e10]"}>{children}</main>
+        </div>
+    );
+}

src/app/[locale]/(navbar)/emailDetail/page.module.scss

@@ -0,0 +1,102 @@
+.emailDetail {
+    background-color: #0b0e10;
+    padding: 0.15rem;
+    line-height: 1.2;
+}
+.title {
+    color: #f0f3f5;
+    font-size: 0.18rem;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+.date {
+    color: #5d7284;
+    font-size: 0.11rem;
+    margin-top: 0.06rem;
+}
+.content {
+    margin-top: 0.1rem;
+}
+.img {
+    width: 100%;
+    border-radius: 0.1rem;
+    margin-bottom: 0.1rem;
+}
+.contentText {
+    color: #b2bcc5;
+}
+
+.more {
+    text-align: center;
+    color: #11de68;
+    margin-top: 0.3rem;
+}
+.giftBox {
+    background-color: #1f2830;
+    border-radius: 0.1rem;
+    box-sizing: border-box;
+    padding: 0.15rem;
+    margin-top: 0.2rem;
+    .giftItem {
+        background-color: #2a333b;
+        border-radius: 0.1rem;
+        padding: 0.1rem;
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.1rem;
+        img {
+            width: 0.7rem;
+            margin-right: 0.1rem;
+        }
+    }
+    .giftDesc {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        :nth-child(1) {
+            word-wrap: break-word;
+            word-break: break-word;
+        }
+        :nth-child(2) {
+            color: #11de68;
+        }
+    }
+}
+
+.btnBox {
+    text-align: center;
+    button {
+        background-image: linear-gradient(to bottom, #befd53, #3bbb0e);
+        border-radius: 0.2rem;
+        height: 0.36rem;
+        width: 1.35rem;
+        position: relative;
+        &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 100%;
+            bottom: -3px;
+            background-image: linear-gradient(to bottom, #007200, #007200);
+            border-radius: 0.2rem;
+            z-index: 0;
+        }
+        &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 100%;
+            bottom: 0;
+            background-image: linear-gradient(to bottom, #befd53, #3bbb0e);
+            border-radius: 0.2rem;
+            z-index: 1;
+        }
+        span {
+            position: relative;
+            z-index: 2;
+        }
+    }
+}

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

@@ -0,0 +1,53 @@
+import styles from "./page.module.scss";
+const EmailDetail = () => {
+    return (
+        <div className={styles.emailDetail}>
+            <div className={styles.title}>
+                O texto do título do e-mail é exibido aqui. Se o texto for longo
+            </div>
+            <div className={styles.date}>27/03/25 14:22:30</div>
+            <div className={styles.content}>
+                <img
+                    src="https://img1.baidu.com/it/u=2076262900,1204832320&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=678"
+                    alt=""
+                    className={styles.img}
+                />
+                <div
+                    className={styles.contentText}
+                    dangerouslySetInnerHTML={{
+                        __html: `Texto do e-mail:\r\n
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
+                    laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
+                    Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
+                    parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra
+                    vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.`,
+                    }}
+                ></div>
+            </div>
+            <div className={styles.more}>&lt;Pular texto&gt;</div>
+            <div className={styles.giftBox}>
+                <div className={styles.giftItem}>
+                    <img src="/notice/gift2.png" alt="" />
+                    <div className={styles.giftDesc}>
+                        <div>O nome da recompensa é mostrado aqui</div>
+                        <div>prêmio R$1</div>
+                    </div>
+                </div>
+                <div className={styles.giftItem}>
+                    <img src="/notice/gift2.png" alt="" />
+                    <div className={styles.giftDesc}>
+                        <div>O nome da recompensa é mostrado aqui</div>
+                        <div>prêmio R$1</div>
+                    </div>
+                </div>
+                <div className={styles.btnBox}>
+                    <button>
+                        <span>Receber</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EmailDetail;