feat: 修改

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

@@ -2,39 +2,29 @@
     height: 100%;
 }
 .CardPage {
+    :global(.swiper-pagination) {
+        bottom: -5px;
+    }
     .top {
-        padding: 0.2rem 0.1rem;
-        background-image: url("/card/top.png");
+        padding: 0.2rem 0;
+        background-image: url("/card/top2.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
         position: relative;
     }
-    .left {
-        background-color: rgba(255, 255, 255, 0.5);
-        width: 50%;
-        border-radius: 0.04rem 0.3rem 0 0;
-        height: 0.3rem;
-    }
-    .leftContent {
-        background: linear-gradient(to right, #ffc873 0%, #ffe3b6 100%);
-        width: 100%;
-        border-radius: 0.04rem 0.3rem 0 0;
-        height: 0.3rem;
+
+    .cardContainerOut {
+        background-image: url("/card/2.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
         position: relative;
-        top: 0.04rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    .cardContainer {
-        background-color: rgba(255, 255, 255, 0.5);
-        border-radius: 0 0.1rem 0.1rem 0.1rem;
+        top: -1px;
+        padding: 0 0.1rem 0.1rem 0.1rem;
         box-sizing: border-box;
-        padding: 0.04rem 0.04rem 0 0;
     }
     .cardContent {
-        border-radius: 0 0.1rem 0.1rem 0.1rem;
-        background: linear-gradient(to bottom, #fff6e6, #f3cca0);
+        border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
+        background: linear-gradient(to bottom, #fff, #e2b4fd);
         box-shadow: 0 0 0.15rem #fff inset;
         background-size: 100% 100%;
         background-repeat: no-repeat;
@@ -88,54 +78,60 @@
         line-height: 1;
     }
 }
+.lingqu {
+    margin-top: 0.2rem;
+}
+.lingquTop {
+    background: url("/card/3.png") no-repeat;
+    background-size: 100% 100%;
+    height: 0.3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    margin: 0 0.4rem;
+}
+.lingquContent {
+    border-radius: 0.1rem;
+    background-color: #a03be0;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding: 0.2rem;
+    position: relative;
+    top: -1px;
+    border: 2px solid #ff126b;
+    box-sizing: border-box;
+    box-shadow: 0 0 0.15rem #000000 inset;
+}
+.lingquInfo {
+    border-radius: 0.1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 1rem;
+}
 .main {
     background: #42118e;
     box-shadow: 0 0 0.45rem #8365b6 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;
+}
+.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%;
-        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 {
     border-radius: 0.1rem;
     border: 1px solid #7492dc;
@@ -229,22 +225,44 @@
     }
 }
 .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.2rem;
+        position: absolute;
         background-size: 100% 100%;
+        z-index: 3;
+        i {
+            font-size: 0.3rem;
+        }
         &.arrowLeft {
-            background-image: url("/card/al.png");
+            left: 0;
+            top: 50%;
+            transform: rotate(180deg);
+            transform-origin: center center;
         }
         &.arrowRight {
-            background-image: url("/card/ar.png");
+            right: 0;
+            top: 50%;
         }
     }
 }
+.swiperItem {
+    .swiperItemTop {
+        background-image: url("/card/1.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        height: 0.6rem;
+        display: flex;
+        align-items: flex-start;
+        box-sizing: border-box;
+        padding-top: 0.08rem;
+    }
+}
+// .swiperSlide {
+//     width: 80% !important;
+// }
+
+// .swiper-slide-prev {
+//     right: -8%;
+// }
+// .swiper-slide-next {
+//     left: -8%;
+// }

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

@@ -1,7 +1,10 @@
 "use client";
 import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
+
 import clsx from "clsx";
 import React from "react";
+import "swiper/css/pagination";
+import { Pagination } from "swiper/modules";
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 import styles from "./page.module.scss";
 
@@ -19,62 +22,120 @@ const CardPage = () => {
     };
 
     const data = React.useMemo(() => {
-        return [1, 2, 3];
+        return [1, 2, 3, 4, 5];
     }, []);
 
     return (
         <div className={styles.CardPage}>
             <div className={styles.top}>
                 <Swiper
-                    spaceBetween={4}
-                    centeredSlidesBounds
+                    spaceBetween={10}
+                    slidesPerView={1.3}
+                    centeredSlides={true}
                     onSwiper={(swiper) => {
                         swiperRef.current = swiper;
                     }}
                     onSlideChange={(swiper) => {
                         setAct(swiper.realIndex);
                     }}
-                    loop={true}
+                    loop={data.length > 3}
+                    modules={[Pagination]}
+                    // loopAdditionalSlides={2}
+                    pagination={{
+                        clickable: true,
+                    }}
                 >
                     {data.map((key) => {
                         return (
-                            <SwiperSlide key={key}>
-                                <div className={clsx("flex flex-row items-center justify-between")}>
-                                    <div className={styles.left}>
-                                        <div className={styles.leftContent}>CARTãO DE MêS{key}</div>
+                            <SwiperSlide key={key} className={styles.swiperSlide}>
+                                <div className={styles.swiperItem}>
+                                    <div
+                                        className={clsx(
+                                            "flex flex-row items-center justify-between",
+                                            styles.swiperItemTop
+                                        )}
+                                    >
+                                        <div className={clsx(styles.leftContent, "pl-[.1rem]")}>
+                                            CARTãO DE MêS{key}
+                                        </div>
+                                        <div
+                                            className={clsx(
+                                                styles.rightContent,
+                                                "pr-[.12rem] pt-[.02rem] text-[.1rem]"
+                                            )}
+                                        >
+                                            Já foi comprado
+                                        </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
+                                    <div className={styles.cardContainerOut}>
+                                        <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="my-[.04rem] text-[.36rem] font-bold text-[#ff1d66]">
-                                                500R
+                                            <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="text-[.15rem] font-bold text-[#77223c]">
-                                                EXTRA 271%
+                                            <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={styles.cardRight}>
-                                            <div className="text-[.12rem] font-bold text-[#77223c]">
-                                                RECEBA POR DIA
+                                        <div className={styles.lingqu}>
+                                            <div
+                                                className={clsx(
+                                                    styles.lingquTop,
+                                                    "text-[.15rem] font-bold text-[#e4292d]"
+                                                )}
+                                            >
+                                                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 className={clsx(styles.lingquContent)}>
+                                                <div className={clsx(styles.lingquInfo)}>
+                                                    {key === 1 && (
+                                                        <div className="text-[.18rem] font-bold text-[#fffc03]">
+                                                            Você ainda não comprou
+                                                        </div>
+                                                    )}
+                                                    {key !== 1 && (
+                                                        <>
+                                                            <div className="text-[.18rem] font-bold text-[#459ff8]">
+                                                                NUMERÁRIO 10R
+                                                            </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>
@@ -88,35 +149,19 @@ const CardPage = () => {
                     <div
                         className={clsx(styles.arrow, styles.arrowLeft)}
                         onClick={() => doChange(-1)}
-                    ></div>
-                    <div className="mx-[.05rem] text-[.1rem]">
-                        {act + 1}/{data.length}
+                    >
+                        <i className="iconfont icon-xiangyou1"></i>
                     </div>
+
                     <div
                         className={clsx(styles.arrow, styles.arrowRight)}
                         onClick={() => doChange(1)}
-                    ></div>
+                    >
+                        <i className="iconfont icon-xiangyou1"></i>
+                    </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-[.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>