feat: 修改

src/app/[locale]/(TabBar)/deposit/DepositData.tsx

@@ -9,7 +9,7 @@ import { neReg } from "@/utils";
 import { Button, Form, Input, Toast } from "antd-mobile";
 import { FormInstance } from "antd-mobile/es/components/form";
 import { useTranslations } from "next-intl";
-import { FC, useLayoutEffect, useRef, useState } from "react";
+import { FC, useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import actions from "@/app/[locale]/(TabBar)/deposit/actions";
 import Empty from "@/components/Empty";
@@ -20,7 +20,9 @@ import "@/styles/deposit.scss";
 import { server } from "@/utils/client";
 import clsx from "clsx";
 import { Swiper, SwiperSlide } from "swiper/react";
-interface Props {}
+interface Props {
+    onActiveChange?: (activeType: DepositsTypes) => void;
+}
 
 interface RewardsProps {
     rewards: RewardsType[];
@@ -93,6 +95,12 @@ const DepositData: FC<Props> = (props) => {
     const formInstanceRef = useRef<FormInstance>(null);
     let [amount, setAmount] = useState<number | undefined>(undefined);
 
+    useEffect(() => {
+        if (props.onActiveChange) {
+            props.onActiveChange(activeType as DepositsTypes);
+        }
+    }, [activeType]);
+
     const titleChangeHandler = (item: DepositsTypes, index: number) => {
         setAmount(undefined);
         setActiveType(item);
@@ -175,7 +183,7 @@ const DepositData: FC<Props> = (props) => {
 
     return (
         <div className="deposit-box">
-            <div className="img-box">
+            {/* <div className="img-box">
                 <img
                     className={"h-[100%] w-[100%] object-cover"}
                     src={activeType.icon || ""}
@@ -183,7 +191,7 @@ const DepositData: FC<Props> = (props) => {
                     width={160}
                     height={40}
                 />
-            </div>
+            </div> */}
 
             {/*<div className={"flex flex-wrap"}>*/}
             {/*    {depositState.map((item, index) => {*/}
@@ -207,9 +215,9 @@ const DepositData: FC<Props> = (props) => {
                                 boxShadow: activeType?.id === item.id ? "none":,
                                 borderColor: activeType?.id === item.id ? "#d917ff",
                             } */}
-            <Swiper slidesPerView={"auto"} centeredSlidesBounds>
+            <Swiper slidesPerView={3} spaceBetween={10} centeredSlidesBounds>
                 {depositState?.map((item, index) => (
-                    <SwiperSlide key={index} className={"max-w-fit"}>
+                    <SwiperSlide key={index}>
                         <p
                             className={clsx("btn-box truncate", {
                                 active: activeType?.id === item.id, // 检查是否为当前活动项，添加active类名

src/app/[locale]/(TabBar)/deposit/Left.tsx

@@ -0,0 +1,27 @@
+import clsx from "clsx";
+import React from "react";
+import styles from "./left.module.scss";
+
+interface Props {
+    activeData: any;
+}
+
+const Left: React.FC<Props> = ({ activeData }) => {
+    return (
+        <div className="h-[100%] overflow-auto border border-y-0 border-[#5ec5ff] shadow-[0_0_25px_#3d4083_inset]">
+            <div className="py-[.06rem] text-center">
+                <img
+                    src={activeData.icon}
+                    alt={activeData.name}
+                    className="inline-block w-[80%] object-cover"
+                />
+            </div>
+            <div className={clsx(styles.item, styles.active)}>Cartão Mensal</div>
+            <div className={clsx(styles.item)}>Cartão Mensal</div>
+            <div className={clsx(styles.item)}>Cartão Mensal</div>
+            <div className={clsx(styles.item)}>Cartão Mensal</div>
+        </div>
+    );
+};
+
+export default Left;

src/app/[locale]/(TabBar)/deposit/left.module.scss

@@ -0,0 +1,12 @@
+.item {
+    padding: 0.15rem 0.05rem;
+    text-align: center;
+    box-sizing: border-box;
+    border-bottom: 1px solid transparent;
+    font-size: 0.12rem;
+    &.active {
+        background-color: #413fad;
+        box-shadow: 0 -0.05rem 0.1rem #714fcf inset;
+        border-bottom: 1px solid #5ec5ff;
+    }
+}

src/app/[locale]/(TabBar)/deposit/page.tsx

@@ -1,10 +1,24 @@
+"use client";
+import React from "react";
 import DepositData from "./DepositData";
+import Left from "./Left";
+
+const Deposit = () => {
+    const [activeData, setActiveData] = React.useState({});
+
+    const activeDataChange = (data: any) => {
+        setActiveData(data);
+    };
 
-const Deposit = async () => {
     return (
-        <>
-            <DepositData />
-        </>
+        <div className="flex h-[100%] flex-row items-stretch">
+            <div className="w-[1rem]">
+                <Left activeData={activeData}></Left>
+            </div>
+            <div className="flex-1 overflow-auto">
+                <DepositData onActiveChange={activeDataChange} />
+            </div>
+        </div>
     );
 };
 

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

@@ -0,0 +1,20 @@
+import HeaderBack from "@/components/HeaderBack";
+import { getTranslations } from "next-intl/server";
+import { ReactNode } from "react";
+import styles from "./page.module.scss";
+
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const t = await getTranslations("Header");
+    return (
+        <div className={styles.page}>
+            <HeaderBack showBack={true} title={"Cartão de semanas"} useBg={false} />
+            <main className={"main-header"}>{children}</main>
+        </div>
+    );
+}

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

@@ -0,0 +1,49 @@
+.page {
+    height: 100%;
+}
+.CardPage {
+    .top {
+        padding: 0.2rem 0.1rem;
+        background-image: url("/card/top.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+    }
+    .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;
+        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;
+        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);
+        position: relative;
+        padding: 0.2rem;
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between;
+    }
+    .cardLeft {
+        text-align: left;
+    }
+    .cardRight {
+        text-align: right;
+    }
+}

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

@@ -0,0 +1,42 @@
+"use client";
+import clsx from "clsx";
+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
+                            </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>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CardPage;
+CardPage;

src/styles/deposit.scss

@@ -20,8 +20,8 @@
         box-shadow: $-input-shadow;
         margin: 0.1rem 0;
         height: 0.3rem;
-        margin-right: 0.06rem;
-        width: 0.98rem !important;
+        // margin-right: 0.06rem;
+        // width: 0.68rem !important;
         flex-shrink: 0;
         border-radius: 0.05rem;
         line-height: 0.28rem;
@@ -87,7 +87,7 @@
         -ms-flex-align: center;
         align-items: center;
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(2, 1fr);
         justify-content: center;
         gap: 20px;