feat: 界面

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

@@ -7,6 +7,7 @@
         background-image: url("/card/top.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
+        position: relative;
     }
     .left {
         background-color: rgba(255, 255, 255, 0.5);
@@ -34,16 +35,206 @@
     .cardContent {
         border-radius: 0 0.1rem 0.1rem 0.1rem;
         background: linear-gradient(to bottom, #fff6e6, #f3cca0);
+        box-shadow: 0 0 0.15rem #fff inset;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
         position: relative;
         padding: 0.2rem;
         display: flex;
         align-items: stretch;
         justify-content: space-between;
+        &::after {
+            content: "";
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            left: 0;
+            background-image: url("/card/cardBg.png");
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            z-index: 1;
+        }
     }
     .cardLeft {
         text-align: left;
+        position: relative;
+        z-index: 2;
     }
     .cardRight {
         text-align: right;
+        position: relative;
+        z-index: 2;
+    }
+    .rili {
+        position: absolute;
+        right: -0.02rem;
+        bottom: 0;
+        width: 0.6rem;
+        height: 0.5rem;
+        background: url("/card/rili.png") no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        perspective: 500px;
+    }
+    .riliContent {
+        transform: rotateZ(5deg);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+    }
+}
+.main {
+    background: #42118e;
+    box-shadow: 0 0 0.15rem rgba(255, 255, 255, 0.5) inset;
+    box-sizing: border-box;
+    padding: 0.1rem 0.15rem;
+    .lingquTop {
+        background: url("/card/bg1.png") no-repeat;
+        background-size: 100% 100%;
+        height: 0.6rem;
+        display: flex;
+        align-items: center;
+        padding-left: 0.1rem;
+        padding-top: 0.2rem;
+        box-sizing: border-box;
+    }
+    .lingquContent {
+        background: url("/card/bg2.png") no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        padding: 0.2rem;
+        position: relative;
+        top: -1px;
+    }
+    .lingquInfo {
+        border-radius: 0.1rem;
+        background: #dcedff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0.2rem;
+    }
+    .btn {
+        width: 1.5rem;
+        height: 0.45rem;
+        background: url("/card/btn.png") no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 0.2rem;
+        font-size: 0.2rem;
+        &.disabled {
+            background: url("/card/btn1.png") no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+}
+
+.config {
+    box-shadow: 0 0 0.15rem #7492dc inset;
+    border-radius: 0.1rem;
+    border: 1px solid #7492dc;
+    overflow: hidden;
+    .configItem {
+        display: flex;
+        align-items: stretch;
+        flex-direction: row;
+        border-top: 1px solid #7492dc;
+        font-size: 0.1rem;
+        background: #310e71;
+        &:nth-child(1) {
+            border-top: none;
+            background: #421497;
+            div {
+                border-right: none;
+            }
+        }
+        div {
+            flex: 1;
+            border-right: 1px solid #7492dc;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 0.08rem 0;
+            &:nth-last-child(1) {
+                border-right: none;
+            }
+        }
+    }
+}
+
+.introbox {
+    margin-top: 0.3rem;
+
+    border-radius: 0.2rem;
+    // background: #0af0ff; // 添加水平渐变背景
+    // padding: 0.02rem;
+    position: relative;
+    z-index: 2;
+    .introContainer {
+        background-color: #3c1397;
+        box-shadow: 0 0 15px #8abbf1 inset;
+        min-height: 1rem;
+        border-radius: 0.2rem;
+        // background-image: url("/continuous/bg_1.png");
+        background-size: 100% auto;
+        padding: 0.34rem 0.1rem 0.15rem 0.1rem;
+        position: relative;
+    }
+    .introTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: -0.05rem;
+        left: 0;
+        right: 0;
+        .introTitleText {
+            width: 2.7rem;
+            height: 0.4rem;
+            background-image: url("/card/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;
+        li {
+            margin: 0.05rem 0;
+        }
+    }
+}
+.pagation {
+    position: absolute;
+    right: 0.2rem;
+    top: 0.24rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 3;
+    .arrow {
+        width: 0.27rem;
+        height: 0.18rem;
+        background-size: 100% 100%;
+        &.arrowLeft {
+            background-image: url("/card/al.png");
+        }
+        &.arrowRight {
+            background-image: url("/card/ar.png");
+        }
     }
 }

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

@@ -1,36 +1,165 @@
 "use client";
 import clsx from "clsx";
+import { Swiper, SwiperSlide } from "swiper/react";
 import styles from "./page.module.scss";
 
 const CardPage = () => {
     return (
         <div className={styles.CardPage}>
             <div className={styles.top}>
-                <div className={clsx("flex flex-row items-center justify-between")}>
-                    <div className={styles.left}>
-                        <div className={styles.leftContent}>CARTãO DE MêS</div>
-                    </div>
-                </div>
-                <div className={styles.cardContainer}>
-                    <div className={styles.cardContent}>
-                        <div className={styles.cardLeft}>
-                            <div className="text-[.12rem] font-bold text-[#77223c]">
-                                PARA RECARREGAR
+                <Swiper slidesPerView={"auto"} spaceBetween={4}>
+                    <SwiperSlide>
+                        <div className={clsx("flex flex-row items-center justify-between")}>
+                            <div className={styles.left}>
+                                <div className={styles.leftContent}>CARTãO DE MêS</div>
                             </div>
-                            <div className="my-[.04rem] text-[.36rem] font-bold text-[#ff1d66]">
-                                500R
+                        </div>
+                        <div className={styles.cardContainer}>
+                            <div className={styles.cardContent}>
+                                <div className={styles.cardLeft}>
+                                    <div className="text-[.12rem] font-bold text-[#77223c]">
+                                        PARA RECARREGAR
+                                    </div>
+                                    <div className="my-[.04rem] text-[.36rem] font-bold text-[#ff1d66]">
+                                        500R
+                                    </div>
+                                    <div className="text-[.15rem] font-bold text-[#77223c]">
+                                        EXTRA 271%
+                                    </div>
+                                </div>
+                                <div className={styles.cardRight}>
+                                    <div className="text-[.12rem] font-bold text-[#77223c]">
+                                        RECEBA POR DIA
+                                    </div>
+                                    <div className="text-[.12rem] font-bold text-[#ff1d66]">
+                                        NUMERÁRIO 10R
+                                    </div>
+                                    <div className="text-[.12rem] font-bold text-[#ff1d66]">
+                                        BÔNUS 38R
+                                    </div>
+                                </div>
+                                <div className={styles.rili}>
+                                    <div className={styles.riliContent}>
+                                        <div className="text-[.14rem] font-bold text-[#ac4b31]">
+                                            30
+                                        </div>
+                                        <div className="text-[.12rem] text-[#ac4b31]">dias</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                        <div className={clsx("flex flex-row items-center justify-between")}>
+                            <div className={styles.left}>
+                                <div className={styles.leftContent}>CARTãO DE MêS</div>
                             </div>
-                            <div className="text-[.15rem] font-bold text-[#77223c]">EXTRA 271%</div>
                         </div>
-                        <div className={styles.cardRight}>
-                            <div className="text-[.12rem] font-bold text-[#77223c]">
-                                RECEBA POR DIA
+                        <div className={styles.cardContainer}>
+                            <div className={styles.cardContent}>
+                                <div className={styles.cardLeft}>
+                                    <div className="text-[.12rem] font-bold text-[#77223c]">
+                                        PARA RECARREGAR
+                                    </div>
+                                    <div className="my-[.04rem] text-[.36rem] font-bold text-[#ff1d66]">
+                                        500R
+                                    </div>
+                                    <div className="text-[.15rem] font-bold text-[#77223c]">
+                                        EXTRA 271%
+                                    </div>
+                                </div>
+                                <div className={styles.cardRight}>
+                                    <div className="text-[.12rem] font-bold text-[#77223c]">
+                                        RECEBA POR DIA
+                                    </div>
+                                    <div className="text-[.12rem] font-bold text-[#ff1d66]">
+                                        NUMERÁRIO 10R
+                                    </div>
+                                    <div className="text-[.12rem] font-bold text-[#ff1d66]">
+                                        BÔNUS 38R
+                                    </div>
+                                </div>
+                                <div className={styles.rili}>
+                                    <div className={styles.riliContent}>
+                                        <div className="text-[.14rem] font-bold text-[#ac4b31]">
+                                            30
+                                        </div>
+                                        <div className="text-[.12rem] text-[#ac4b31]">dias</div>
+                                    </div>
+                                </div>
                             </div>
-                            <div className="text-[.12rem] font-bold text-[#ff1d66]">
+                        </div>
+                    </SwiperSlide>
+                </Swiper>
+                <div className={styles.pagation}>
+                    <div className={clsx(styles.arrow, styles.arrowLeft)}></div>
+                    <div className="mx-[.05rem] text-[.1rem]">1/30</div>
+                    <div className={clsx(styles.arrow, styles.arrowRight)}></div>
+                </div>
+            </div>
+            <div className={styles.main}>
+                <div className={styles.lingqu}>
+                    <div className={clsx(styles.lingquTop, "text-[.15rem] font-bold")}>
+                        Receba por dia
+                    </div>
+                    <div className={clsx(styles.lingquContent)}>
+                        <div className={clsx(styles.lingquInfo)}>
+                            <div className="text-[.18rem] font-bold text-[#459ff8]">
                                 NUMERÁRIO 10R
                             </div>
-                            <div className="text-[.12rem] font-bold text-[#ff1d66]">BÔNUS 38R</div>
+                            <div className="text-[.18rem] text-[#459ff8]">+</div>
+                            <div className="text-[.18rem] font-bold text-[#459ff8]">BÔNUS 38R</div>
+                            <div className="mt-[.08rem] text-[.18rem] font-bold text-[#ff1d66]">
+                                XX DIAS RESTANTES
+                            </div>
+                            <div className={styles.btn}>Resgatar</div>
+                        </div>
+                    </div>
+                </div>
+                <div className="my-[.15rem] cursor-pointer text-right text-[#00deff]">
+                    Receba sens registros&gt;
+                </div>
+                <div className={styles.config}>
+                    <div className={styles.configItem}>
+                        <div>Recarga</div>
+                        <div>Receba dinheiro diariamente</div>
+                        <div>Receba seu bônus diarianente</div>
+                        <div>Taxa de retirada de dinheiro</div>
+                        <div>Bônus retirada nultiplicação</div>
+                    </div>
+                    <div className={styles.configItem}>
+                        <div>1</div>
+                        <div>2</div>
+                        <div>3</div>
+                        <div>4</div>
+                        <div>5</div>
+                    </div>
+                    <div className={styles.configItem}>
+                        <div>1</div>
+                        <div>2</div>
+                        <div>3</div>
+                        <div>4</div>
+                        <div>5</div>
+                    </div>
+                </div>
+                <div className={styles.introbox}>
+                    <div className={styles.introContainer}>
+                        <div className={styles.introTitle}>
+                            <span className={styles.introTitleText}>Regras de Atividade</span>
                         </div>
+                        <ul className={styles.introboxDesc}>
+                            <li>
+                                Recarregue no dia 1 e receba bônus + prêmios emdinheiro diariamente
+                                do mesmo dia até o dia 30.
+                            </li>
+                            <li>A retirada diária do prémio do cartão mensal é até às 23h30.</li>
+                            <li>0 cartão mensal é recolhido 1 vez por dia.</li>
+                            <li>
+                                Reemissão automática da parte do prêmio em dinheiro seo cartão
+                                mensal não for recebido no dia, o prêmio de ourocolorido não está
+                                disponível
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>