feat: 修改

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

@@ -50,11 +50,20 @@
         text-align: left;
         position: relative;
         z-index: 2;
+        color: #77223c;
     }
     .cardRight {
         text-align: right;
         position: relative;
         z-index: 2;
+        color: #ff1d66;
+    }
+    .money {
+        color: #ff1d66;
+        line-height: 1;
+    }
+    .text {
+        color: #77223c;
     }
     .rili {
         position: absolute;
@@ -101,7 +110,7 @@
     top: -1px;
     border: 2px solid #ff126b;
     box-sizing: border-box;
-    box-shadow: 0 0 0.15rem #000000 inset;
+    box-shadow: 0 0 0.15rem #222222 inset;
 }
 .lingquInfo {
     border-radius: 0.1rem;
@@ -132,6 +141,18 @@
         background-size: 100% 100%;
     }
 }
+.btn2 {
+    width: 1.5rem;
+    height: 0.45rem;
+    background: url("/card/buy.png") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.2rem;
+    font-size: 0.2rem;
+    padding-bottom: 0.06rem;
+}
 .config {
     border-radius: 0.1rem;
     border: 1px solid #7492dc;
@@ -256,9 +277,89 @@
         padding-top: 0.08rem;
     }
 }
-// .swiperSlide {
-//     width: 80% !important;
-// }
+.receiveText {
+    color: #459ff8;
+}
+.receiveText2 {
+    color: #ff1d66;
+}
+.swiperSlide {
+    padding-bottom: 0.2rem;
+}
+.swiperSlideBlue {
+    .leftContent {
+        color: #fff;
+    }
+    .cardContent {
+        background: linear-gradient(to bottom, #e2efff, #a3c2f2);
+    }
+    .swiperItemTop {
+        background-image: url("/card/b1.png");
+    }
+    .cardContainerOut {
+        background-image: url("/card/b2.png");
+    }
+    .cardLeft {
+        color: #345078;
+    }
+    .cardRight {
+        color: #1f88ff;
+    }
+    .money {
+        color: #1f88ff;
+    }
+    .text {
+        color: #345078;
+    }
+    .lingquContent {
+        background-color: #66a3ff;
+        box-shadow: 0 0 0.15rem #34c1e6 inset;
+        border: 2px solid #26f5ee;
+    }
+    .receiveText {
+        color: #fffc03;
+    }
+    .receiveText2 {
+        color: #fff;
+    }
+}
+.swiperSlideGold {
+    .leftContent {
+        color: #e5a661;
+    }
+    .cardContent {
+        background: linear-gradient(to bottom, #fff4e2, #f2c797);
+    }
+    .swiperItemTop {
+        background-image: url("/card/g1.png");
+    }
+    .cardContainerOut {
+        background-image: url("/card/g2.png");
+    }
+    .cardLeft {
+        color: #b67948;
+    }
+    .cardRight {
+        color: #ff7e00;
+    }
+    .money {
+        color: #ff7e00;
+    }
+    .text {
+        color: #b67948;
+    }
+    .lingquContent {
+        background-color: #fad5a9;
+        box-shadow: 0 0 0.15rem #ecb778 inset;
+        border: 2px solid #fff;
+    }
+    .receiveText {
+        color: #ff7e00;
+    }
+    .receiveText2 {
+        color: #fff;
+    }
+}
 
 // .swiper-slide-prev {
 //     right: -8%;

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

@@ -30,7 +30,7 @@ const CardPage = () => {
             <div className={styles.top}>
                 <Swiper
                     spaceBetween={10}
-                    slidesPerView={1.3}
+                    slidesPerView={1.25}
                     centeredSlides={true}
                     onSwiper={(swiper) => {
                         swiperRef.current = swiper;
@@ -47,7 +47,13 @@ const CardPage = () => {
                 >
                     {data.map((key) => {
                         return (
-                            <SwiperSlide key={key} className={styles.swiperSlide}>
+                            <SwiperSlide
+                                key={key}
+                                className={clsx(styles.swiperSlide, {
+                                    [styles.swiperSlideBlue]: key === 1,
+                                    [styles.swiperSlideGold]: key === 2,
+                                })}
+                            >
                                 <div className={styles.swiperItem}>
                                     <div
                                         className={clsx(
@@ -70,24 +76,34 @@ const CardPage = () => {
                                     <div className={styles.cardContainerOut}>
                                         <div className={styles.cardContent}>
                                             <div className={styles.cardLeft}>
-                                                <div className="text-[.12rem] font-bold text-[#77223c]">
+                                                <div className={clsx("text-[.12rem] font-bold")}>
                                                     PARA RECARREGAR
                                                 </div>
-                                                <div className="my-[.04rem] text-[.36rem] font-bold text-[#ff1d66]">
+                                                <div
+                                                    className={clsx(
+                                                        "my-[.04rem] text-[.36rem] font-bold",
+                                                        styles.money
+                                                    )}
+                                                >
                                                     500R
                                                 </div>
-                                                <div className="text-[.15rem] font-bold text-[#77223c]">
+                                                <div className="pb-[.2rem] text-[.15rem] font-bold">
                                                     EXTRA 271%
                                                 </div>
                                             </div>
                                             <div className={styles.cardRight}>
-                                                <div className="text-[.12rem] font-bold text-[#77223c]">
+                                                <div
+                                                    className={clsx(
+                                                        "text-[.12rem] font-bold",
+                                                        styles.text
+                                                    )}
+                                                >
                                                     RECEBA POR DIA
                                                 </div>
-                                                <div className="text-[.12rem] font-bold text-[#ff1d66]">
+                                                <div className="text-[.12rem] font-bold">
                                                     NUMERÁRIO 10R
                                                 </div>
-                                                <div className="text-[.12rem] font-bold text-[#ff1d66]">
+                                                <div className="text-[.12rem] font-bold">
                                                     BÔNUS 38R
                                                 </div>
                                             </div>
@@ -113,29 +129,55 @@ const CardPage = () => {
                                             </div>
                                             <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 == 2 && (
+                                                        <>
+                                                            <div className="text-center text-[.16rem] font-bold text-[#fffc03]">
+                                                                Você ainda não comprou
+                                                            </div>
+                                                            <div className={styles.btn2}>
+                                                                comprar
+                                                            </div>
+                                                        </>
                                                     )}
-                                                    {key !== 1 && (
+                                                    {key !== 2 && (
                                                         <>
-                                                            <div className="text-[.18rem] font-bold text-[#459ff8]">
+                                                            <div
+                                                                className={clsx(
+                                                                    "text-[.18rem] font-bold",
+                                                                    styles.receiveText
+                                                                )}
+                                                            >
                                                                 NUMERÁRIO 10R
                                                             </div>
-                                                            <div className="text-[.18rem] text-[#459ff8]">
+                                                            <div
+                                                                className={clsx(
+                                                                    "text-[.18rem]",
+                                                                    styles.receiveText
+                                                                )}
+                                                            >
                                                                 +
                                                             </div>
-                                                            <div className="text-[.18rem] font-bold text-[#459ff8]">
+                                                            <div
+                                                                className={clsx(
+                                                                    "text-[.18rem] font-bold",
+                                                                    styles.receiveText
+                                                                )}
+                                                            >
                                                                 BÔNUS 38R
                                                             </div>
-                                                            <div className="mt-[.08rem] text-[.18rem] font-bold text-[#ff1d66]">
+                                                            <div
+                                                                className={clsx(
+                                                                    "mt-[.08rem] text-[.18rem] font-bold",
+                                                                    styles.receiveText2
+                                                                )}
+                                                            >
                                                                 XX DIAS RESTANTES
-                                                            </div>{" "}
+                                                            </div>
+                                                            <div className={styles.btn}>
+                                                                Resgatar
+                                                            </div>
                                                         </>
                                                     )}
-
-                                                    <div className={styles.btn}>Resgatar</div>
                                                 </div>
                                             </div>
                                         </div>