feat: 修改代码

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

@@ -137,10 +137,20 @@
 }
 
 .config {
-    box-shadow: 0 0 0.15rem #7492dc inset;
     border-radius: 0.1rem;
     border: 1px solid #7492dc;
     overflow: hidden;
+    position: relative;
+    &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        box-shadow: 0 0 0.15rem #7492dc inset;
+        pointer-events: none;
+    }
     .configItem {
         display: flex;
         align-items: stretch;
@@ -228,7 +238,7 @@
     z-index: 3;
     .arrow {
         width: 0.27rem;
-        height: 0.18rem;
+        height: 0.2rem;
         background-size: 100% 100%;
         &.arrowLeft {
             background-image: url("/card/al.png");

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

@@ -1,100 +1,101 @@
 "use client";
+import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
 import clsx from "clsx";
-import { Swiper, SwiperSlide } from "swiper/react";
+import React from "react";
+import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 import styles from "./page.module.scss";
 
 const CardPage = () => {
+    const swiperRef = React.useRef<SwiperClass | null>(null);
+    const [act, setAct] = React.useState(0);
+    const [amount, setAmount] = React.useState<any>({});
+    const [visible, setVisible] = React.useState<boolean>(false);
+
+    const doChange = (type: 1 | -1) => {
+        if (swiperRef.current) {
+            if (type === 1) swiperRef.current.slideNext();
+            if (type === -1) swiperRef.current.slidePrev();
+        }
+    };
+
+    const data = React.useMemo(() => {
+        return [1, 2, 3];
+    }, []);
+
     return (
         <div className={styles.CardPage}>
             <div className={styles.top}>
-                <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>
-                        <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%
+                <Swiper
+                    spaceBetween={4}
+                    centeredSlidesBounds
+                    onSwiper={(swiper) => {
+                        swiperRef.current = swiper;
+                    }}
+                    onSlideChange={(swiper) => {
+                        setAct(swiper.realIndex);
+                    }}
+                    loop={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>
                                     </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 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="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>
-                        <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 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 className="text-[.12rem] text-[#ac4b31]">dias</div>
                                     </div>
                                 </div>
-                            </div>
-                        </div>
-                    </SwiperSlide>
+                            </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
+                        className={clsx(styles.arrow, styles.arrowLeft)}
+                        onClick={() => doChange(-1)}
+                    ></div>
+                    <div className="mx-[.05rem] text-[.1rem]">
+                        {act + 1}/{data.length}
+                    </div>
+                    <div
+                        className={clsx(styles.arrow, styles.arrowRight)}
+                        onClick={() => doChange(1)}
+                    ></div>
                 </div>
             </div>
             <div className={styles.main}>
@@ -163,6 +164,12 @@ const CardPage = () => {
                     </div>
                 </div>
             </div>
+            <GlobalNotify
+                amount={amount}
+                visible={visible}
+                onChange={() => setVisible(false)}
+                deraction={5000}
+            ></GlobalNotify>
         </div>
     );
 };