feat: 修改

public/scripts/firebase-messaging-sw.js

@@ -1,76 +1,77 @@
-
 class CustomPushEvent extends Event {
-  constructor(data) {
-    super('push')
+    constructor(data) {
+        super("push");
 
-    Object.assign(this, data)
-    this.custom = true
-  }
+        Object.assign(this, data);
+        this.custom = true;
+    }
 }
 
-if ('serviceWorker' in navigator) {
-  importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
-  importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');
-  importScripts('./swenv.js')
-  navigator.serviceWorker.register('./firebase-messaging-sw.js').then(function (reg) {
-  firebase.initializeApp({
-    apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
-    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN,
-    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECTID,
-    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET,
-    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID,
-    appId: process.env.NEXT_PUBLIC_FIREBASE_APPID,
-    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID,
-  });
+if ("serviceWorker" in navigator) {
+    importScripts("https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js");
+    importScripts("https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js");
+    importScripts("./swenv.js");
+    navigator.serviceWorker
+        .register("./firebase-messaging-sw.js")
+        .then(function (reg) {
+            firebase.initializeApp({
+                apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
+                authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN,
+                projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECTID,
+                storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET,
+                messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID,
+                appId: process.env.NEXT_PUBLIC_FIREBASE_APPID,
+                measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID,
+            });
 
-  self.addEventListener('push', (e) => {
-    console.log(`🚀🚀🚀🚀🚀-> in firebase-messaging-sw.js on 41`, e);
-    if (e.custom) return;
+            self.addEventListener("push", (e) => {
+                console.log(`🚀🚀🚀🚀🚀-> in firebase-messaging-sw.js on 41`, e);
+                if (e.custom) return;
 
-    let oldData = e.data
-    let newEvent = new CustomPushEvent({
-      data: {
-        json() {
-          let newData = oldData.json()
-          newData.data = {
-            ...newData.data,
-            ...newData.notification
-          }
-          delete newData.notification
-          return newData
-        },
-      },
-      waitUntil: e.waitUntil.bind(e),
-    })
+                let oldData = e.data;
+                let newEvent = new CustomPushEvent({
+                    data: {
+                        json() {
+                            let newData = oldData.json();
+                            newData.data = {
+                                ...newData.data,
+                                ...newData.notification,
+                            };
+                            delete newData.notification;
+                            return newData;
+                        },
+                    },
+                    waitUntil: e.waitUntil.bind(e),
+                });
 
-    e.stopImmediatePropagation()
+                e.stopImmediatePropagation();
 
-    dispatchEvent(newEvent)
-  })
+                dispatchEvent(newEvent);
+            });
 
-  const messaging = firebase.messaging();
+            const messaging = firebase.messaging();
 
-  messaging.onBackgroundMessage( (payload) => {
-    console.log(`🚀🚀🚀🚀🚀-> in firebase-messaging-sw.js on 24`,payload)
-    // Customize notification here
-    const notificationTitle = payload.data.title;
-    const notificationOptions = {
-      body: payload.data.body,
-      icon: payload.data.image,
-      data: payload.data,
-     ...payload.data
-    };
-    return self.registration.showNotification(notificationTitle,
-      notificationOptions);
-  });
+            messaging.onBackgroundMessage((payload) => {
+                console.log(`🚀🚀🚀🚀🚀-> in firebase-messaging-sw.js on 24`, payload);
+                // Customize notification here
+                const notificationTitle = payload.data.title;
+                const notificationOptions = {
+                    body: payload.data.body,
+                    icon: payload.data.image,
+                    data: payload.data,
+                    ...payload.data,
+                };
+                return self.registration.showNotification(notificationTitle, notificationOptions);
+            });
 
-  self.onnotificationclick = function (event) {
-    //example
-    self.clients.openWindow('/')
-    event.notification.close()
-  }
-    console.log('reg: ', reg.scope);
-  }).catch(function (err) {
-    console.log('err: ', err);
-  })
+            self.onnotificationclick = function (event) {
+                //example
+                self.clients.openWindow("/");
+                event.notification.close();
+            };
+            console.log("reg: ", reg.scope);
+        })
+        .catch(function (err) {
+            console.log("err: ", err);
+        });
 }

public_original/scripts/firebase-messaging-sw.js

@@ -1,76 +1,77 @@
-
 class CustomPushEvent extends Event {
-  constructor(data) {
-    super('push')
+    constructor(data) {
+        super("push");
 
-    Object.assign(this, data)
-    this.custom = true
-  }
+        Object.assign(this, data);
+        this.custom = true;
+    }
 }
 
-if ('serviceWorker' in navigator) {
-  importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
-  importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');
-  importScripts('./swenv.js')
-  navigator.serviceWorker.register('./firebase-messaging-sw.js').then(function (reg) {
-  firebase.initializeApp({
-    apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
-    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN,
-    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECTID,
-    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET,
-    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID,
-    appId: process.env.NEXT_PUBLIC_FIREBASE_APPID,
-    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID,
-  });
+if ("serviceWorker" in navigator) {
+    importScripts("https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js");
+    importScripts("https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js");
+    importScripts("./swenv.js");
+    navigator.serviceWorker
+        .register("./firebase-messaging-sw.js")
+        .then(function (reg) {
+            firebase.initializeApp({
+                apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
+                authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN,
+                projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECTID,
+                storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET,
+                messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID,
+                appId: process.env.NEXT_PUBLIC_FIREBASE_APPID,
+                measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID,
+            });
 
-  self.addEventListener('push', (e) => {
-    console.log(`🚀🚀🚀🚀🚀-> in firebase-messaging-sw.js on 41`, e);
-    if (e.custom) return;
+            self.addEventListener("push", (e) => {
+                console.log(`🚀🚀🚀🚀🚀-> in firebase-messaging-sw.js on 41`, e);
+                if (e.custom) return;
 
-    let oldData = e.data
-    let newEvent = new CustomPushEvent({
-      data: {
-        json() {
-          let newData = oldData.json()
-          newData.data = {
-            ...newData.data,
-            ...newData.notification
-          }
-          delete newData.notification
-          return newData
-        },
-      },
-      waitUntil: e.waitUntil.bind(e),
-    })
+                let oldData = e.data;
+                let newEvent = new CustomPushEvent({
+                    data: {
+                        json() {
+                            let newData = oldData.json();
+                            newData.data = {
+                                ...newData.data,
+                                ...newData.notification,
+                            };
+                            delete newData.notification;
+                            return newData;
+                        },
+                    },
+                    waitUntil: e.waitUntil.bind(e),
+                });
 
-    e.stopImmediatePropagation()
+                e.stopImmediatePropagation();
 
-    dispatchEvent(newEvent)
-  })
+                dispatchEvent(newEvent);
+            });
 
-  const messaging = firebase.messaging();
+            const messaging = firebase.messaging();
 
-  messaging.onBackgroundMessage( (payload) => {
-    console.log(`🚀🚀🚀🚀🚀-> in firebase-messaging-sw.js on 24`,payload)
-    // Customize notification here
-    const notificationTitle = payload.data.title;
-    const notificationOptions = {
-      body: payload.data.body,
-      icon: payload.data.image,
-      data: payload.data,
-     ...payload.data
-    };
-    return self.registration.showNotification(notificationTitle,
-      notificationOptions);
-  });
+            messaging.onBackgroundMessage((payload) => {
+                console.log(`🚀🚀🚀🚀🚀-> in firebase-messaging-sw.js on 24`, payload);
+                // Customize notification here
+                const notificationTitle = payload.data.title;
+                const notificationOptions = {
+                    body: payload.data.body,
+                    icon: payload.data.image,
+                    data: payload.data,
+                    ...payload.data,
+                };
+                return self.registration.showNotification(notificationTitle, notificationOptions);
+            });
 
-  self.onnotificationclick = function (event) {
-    //example
-    self.clients.openWindow('/')
-    event.notification.close()
-  }
-    console.log('reg: ', reg.scope);
-  }).catch(function (err) {
-    console.log('err: ', err);
-  })
+            self.onnotificationclick = function (event) {
+                //example
+                self.clients.openWindow("/");
+                event.notification.close();
+            };
+            console.log("reg: ", reg.scope);
+        })
+        .catch(function (err) {
+            console.log("err: ", err);
+        });
 }

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

@@ -13,7 +13,16 @@ export default async function Layout({
     const t = await getTranslations("Header");
     return (
         <div className={styles.page}>
-            <HeaderBack showBack={true} title={"Baú de Fissão"} showService={false} />
+            <HeaderBack
+                showBack={true}
+                title={
+                    <div className="flex items-center justify-center">
+                        <i className="iconfont icon-hongbao mr-[.1rem] text-[.28rem] text-[var(--textColor4)]"></i>
+                        <span className="leading-[1]">Baú de Fissão</span>
+                    </div>
+                }
+                showService={false}
+            />
             <main className={"main-header"}>{children}</main>
         </div>
     );

src/app/[locale]/(navbar)/emailDetail/layout.tsx

@@ -17,9 +17,14 @@ export default async function Layout({
 }) {
     const t = await getTranslations("ProfilePage");
     return (
-        <div className="h-[100%] overflow-auto bg-[#1e252b]">
-            <HeaderBack showBack={true} title={"Regresso"} className={styles.header} />
-            <main className={"main-header bg-[#0b0e10]"}>{children}</main>
+        <div className="flex h-[100%] flex-col">
+            <HeaderBack
+                showBack={true}
+                showService={false}
+                title={"Regresso"}
+                className={styles.header}
+            />
+            <main className={"main-header hasFlag"}>{children}</main>
         </div>
     );
 }

src/app/[locale]/(navbar)/emailDetail/page.module.scss

@@ -1,11 +1,11 @@
 .emailDetail {
-    background-color: #0b0e10;
     padding: 0.15rem;
     line-height: 1.2;
 }
 .title {
-    color: #f0f3f5;
+    color: var(--textColor1);
     font-size: 0.18rem;
+    font-weight: bolder;
     word-wrap: break-word;
     word-break: break-word;
 }
@@ -28,17 +28,17 @@
 
 .more {
     text-align: center;
-    color: #11de68;
+    color: var(--primary-button);
     margin-top: 0.3rem;
 }
 .giftBox {
-    background-color: #1f2830;
+    background-color: var(--primary2);
     border-radius: 0.1rem;
     box-sizing: border-box;
     padding: 0.15rem;
     margin-top: 0.2rem;
     .giftItem {
-        background-color: #2a333b;
+        background: var(--gradient-right4);
         border-radius: 0.1rem;
         padding: 0.1rem;
         display: flex;
@@ -65,35 +65,36 @@
 }
 
 .btnBox {
-    text-align: center;
+    display: flex;
+    justify-content: center;
     button {
-        background-image: linear-gradient(to bottom, #befd53, #3bbb0e);
-        border-radius: 0.2rem;
+        // background-image: linear-gradient(to bottom, #befd53, #3bbb0e);
+        // border-radius: 0.2rem;
         height: 0.36rem;
         width: 1.35rem;
         position: relative;
-        &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            right: 0;
-            height: 100%;
-            bottom: -3px;
-            background-image: linear-gradient(to bottom, #007200, #007200);
-            border-radius: 0.2rem;
-            z-index: 0;
-        }
-        &::after {
-            content: "";
-            position: absolute;
-            left: 0;
-            right: 0;
-            height: 100%;
-            bottom: 0;
-            background-image: linear-gradient(to bottom, #befd53, #3bbb0e);
-            border-radius: 0.2rem;
-            z-index: 1;
-        }
+        // &::before {
+        //     content: "";
+        //     position: absolute;
+        //     left: 0;
+        //     right: 0;
+        //     height: 100%;
+        //     bottom: -3px;
+        //     background-image: linear-gradient(to bottom, #007200, #007200);
+        //     border-radius: 0.2rem;
+        //     z-index: 0;
+        // }
+        // &::after {
+        //     content: "";
+        //     position: absolute;
+        //     left: 0;
+        //     right: 0;
+        //     height: 100%;
+        //     bottom: 0;
+        //     background-image: linear-gradient(to bottom, #befd53, #3bbb0e);
+        //     border-radius: 0.2rem;
+        //     z-index: 1;
+        // }
         span {
             position: relative;
             z-index: 2;

src/app/[locale]/(navbar)/emailDetail/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { EmailNoticeRep } from "@/api/home";
 import Box from "@/components/Box";
+import CustomButton from "@/components/CustomButton";
 import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
 import { ClaimActiveErrorMap } from "@/enums";
 import { server } from "@/utils/client";
@@ -144,9 +145,9 @@ const EmailDetail = () => {
                         );
                     })}
                     <div className={styles.btnBox}>
-                        <button onClick={doReceive}>
+                        <CustomButton onClick={doReceive}>
                             <span>Receber</span>
-                        </button>
+                        </CustomButton>
                     </div>
                 </div>
             )}

src/app/[locale]/(navbar)/notification/components/Email.tsx

@@ -128,7 +128,9 @@ const Email: React.FC<Props> = ({ data, handler }) => {
                                 onClick={() => goDetail(item)}
                             >
                                 <div className={styles.title}>
-                                    <div className="text-[#c6d4e1]">{item.title}</div>
+                                    <div className="font-black text-[var(--textColor1)]">
+                                        {item.title}
+                                    </div>
                                     <div className="mt-[.04rem] text-[.1rem] text-[#5d7284]">
                                         {timeFormat(item.create_at)}
                                     </div>

src/app/[locale]/(navbar)/notification/components/style.module.scss

@@ -53,14 +53,15 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        background-color: #1f2830;
+        background: linear-gradient(90deg, var(--gradient-left4), var(--gradient-right4));
         margin-bottom: 0.12rem;
         border-radius: 0.1rem;
         padding: 0.12rem;
     }
     .doGet {
-        color: #ebc71f;
+        color: var(--textColor4);
         font-size: 0.14rem;
+        font-weight: 900;
     }
     .title {
         width: 60%;

src/app/[locale]/(navbar)/notification/layout.tsx

@@ -31,7 +31,7 @@ export default async function Layout({
                     className={styles.header}
                 />
             </Suspense>
-            <main className={"main-header"}>{children}</main>
+            <main className={"main-header hasFlag"}>{children}</main>
         </div>
     );
 }

src/app/[locale]/(navbar)/vip/page.module.scss

@@ -1,3 +1,5 @@
+//linear-gradient(180deg, rgba(78, 90, 128, 0.3), 50%, var(--primary1) 100%);
+
 .top {
     padding: 0.15rem;
     border-radius: 0.1rem;

src/app/[locale]/(navbar)/vip/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { CashbackTypes } from "@/api/cashback";
 import { UserVipInfo } from "@/api/user";
+import VipProgress from "@/components/VipProgress";
 import { server } from "@/utils/client";
 import { useRequest } from "ahooks";
 import RewardBox from "./reward";
@@ -50,6 +51,7 @@ const Page = () => {
     });
     return (
         <div className="p-[.1rem]">
+            <VipProgress></VipProgress>
             <Top data={userVip} cashbackInfo={cashbackInfo}></Top>
             <RewardBox data={userVip} cashbackInfo={cashbackInfo}></RewardBox>
         </div>

src/components/VipProgress/index.module.scss

@@ -0,0 +1,66 @@
+.VipProgress {
+    position: relative;
+    :global(.swiper-slide) {
+        width: auto;
+    }
+    .VipItem {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        &.active {
+            .VipItemIcon {
+                &::before {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    border: 2px solid red;
+                    border-radius: 0.1rem;
+                }
+                &:after {
+                    border-right: 2px solid red;
+                    border-bottom: 2px solid red;
+                }
+            }
+            .point {
+                background: red !important;
+            }
+        }
+        &.disabled {
+            .VipItemIcon {
+                background: #cccccd !important;
+                img {
+                    filter: grayscale(1);
+                }
+                &:after {
+                    background: #cccccd !important;
+                }
+            }
+        }
+    }
+    .VipItemIcon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 0.56rem;
+        aspect-ratio: 1/1;
+        border-radius: 0.1rem;
+        margin-bottom: 0.1rem;
+        position: relative;
+        &:after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%) rotate(45deg);
+            transform-origin: 50% 50%;
+            width: 8px;
+            height: 8px;
+            bottom: -4px;
+            background-color: #f8d732;
+            z-index: 1;
+        }
+    }
+}

src/components/VipProgress/index.tsx

@@ -0,0 +1,66 @@
+"use client";
+import { VipProgressMap } from "@/enums";
+import { useVipStore } from "@/stores/useVipStore";
+import clsx from "clsx";
+import React from "react";
+import "swiper/css";
+import { FreeMode } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import styles from "./index.module.scss";
+
+const VipProgress = () => {
+    const { vipData } = useVipStore();
+    const [act, setAct] = React.useState<number>(0);
+    React.useEffect(() => {
+        setAct(vipData?.vip_level || 0);
+    }, [vipData]);
+    const VipList = React.useMemo(() => {
+        const result = [];
+        for (let [key, value] of VipProgressMap) {
+            result.push({
+                key,
+                ...value,
+            });
+        }
+        return result;
+    }, []);
+
+    return (
+        <div className={styles.VipProgress}>
+            <Swiper slidesPerView={"auto"} spaceBetween={5} freeMode modules={[FreeMode]}>
+                {VipList.map((item) => {
+                    return (
+                        <SwiperSlide key={item.key} className="relative pb-[.15rem]">
+                            <div
+                                className={clsx(styles.VipItem, {
+                                    [styles.disabled]: item.key > (vipData?.vip_level || 0),
+                                    [styles.active]: item.key === act,
+                                })}
+                                onClick={() => setAct(item.key)}
+                            >
+                                <div
+                                    className={clsx(styles.VipItemIcon)}
+                                    style={{
+                                        background: `linear-gradient(180deg, ${item.startColor || "#535e7e"} 0%, ${item.endColor || "#f3d439"} 100%)`,
+                                    }}
+                                >
+                                    <img className={"w-[100%]"} src={item.icon} alt="" />
+                                </div>
+                                <div className="text-[.12rem]">Vip {item.text}</div>
+                                <div
+                                    className={clsx(
+                                        "absolute bottom-[0.035rem] z-[1] h-[4px] w-[4px] rounded-[50%] bg-[#7d8582]",
+                                        styles.point
+                                    )}
+                                ></div>
+                            </div>
+                        </SwiperSlide>
+                    );
+                })}
+            </Swiper>
+            <div className="absolute bottom-[0] left-[0] right-[0] h-[.11rem] bg-[#fde997]"></div>
+        </div>
+    );
+};
+
+export default VipProgress;

src/enums/index.tsx

@@ -165,3 +165,34 @@ export enum JackpotStatusEnum {
     OPENED = "opened",
     WAIT_OPEN = "waitOpen",
 }
+
+interface VipItem {
+    text: string;
+    icon: string;
+    startColor?: string;
+    endColor?: string;
+}
+
+export const VipProgressMap = new Map<number, VipItem>([
+    [0, { text: "0", icon: "/vipIcon/0.webp", startColor: "#535e7e", endColor: "#f8d732" }],
+    [1, { text: "1", icon: "/vipIcon/1.webp", startColor: "#c18258", endColor: "#f8d732" }],
+    [2, { text: "2", icon: "/vipIcon/2.webp", startColor: "#6b60ab", endColor: "#f8d732" }],
+    [3, { text: "3", icon: "/vipIcon/3.webp", startColor: "#2f81a7", endColor: "#f8d732" }],
+    [4, { text: "4", icon: "/vipIcon/4.webp", startColor: "#c9609d", endColor: "#f8d732" }],
+    [5, { text: "5", icon: "/vipIcon/5.webp", startColor: "#b48045", endColor: "#f8d732" }],
+    [6, { text: "6", icon: "/vipIcon/6.webp", startColor: "#9041b4", endColor: "#f8d732" }],
+    [7, { text: "7", icon: "/vipIcon/7.webp", startColor: "#c38745", endColor: "#f8d732" }],
+    [8, { text: "8", icon: "/vipIcon/8.webp", startColor: "#b97c35", endColor: "#f8d732" }],
+    [9, { text: "9", icon: "/vipIcon/9.webp", startColor: "#b9683f", endColor: "#f8d732" }],
+    [10, { text: "10", icon: "/vipIcon/10.webp", startColor: "#9f4ecd", endColor: "#f8d732" }],
+    [11, { text: "11", icon: "/vipIcon/11.webp", startColor: "#a03999", endColor: "#f8d732" }],
+    [12, { text: "12", icon: "/vipIcon/12.webp", startColor: "#b47946", endColor: "#f8d732" }],
+    [13, { text: "13", icon: "/vipIcon/13.webp", startColor: "#6e50bb", endColor: "#f8d732" }],
+    [14, { text: "14", icon: "/vipIcon/14.webp", startColor: "#b74366", endColor: "#f8d732" }],
+    [15, { text: "15", icon: "/vipIcon/15.webp", startColor: "#a1463b", endColor: "#f8d732" }],
+    [16, { text: "16", icon: "/vipIcon/16.webp", startColor: "#aa3e68", endColor: "#f8d732" }],
+    [17, { text: "17", icon: "/vipIcon/17.webp", startColor: "#8f3aab", endColor: "#f8d732" }],
+    [18, { text: "18", icon: "/vipIcon/18.webp", startColor: "#853c83", endColor: "#f8d732" }],
+    [19, { text: "19", icon: "/vipIcon/19.webp", startColor: "#8838a5", endColor: "#f8d732" }],
+    [20, { text: "20", icon: "/vipIcon/20.webp", startColor: "#953f3a", endColor: "#f8d732" }],
+]);

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4978020 */
-  src: url('iconfont.woff2?t=1753352378518') format('woff2'),
-       url('iconfont.woff?t=1753352378518') format('woff'),
-       url('iconfont.ttf?t=1753352378518') format('truetype');
+  src: url('iconfont.woff2?t=1753407326175') format('woff2'),
+       url('iconfont.woff?t=1753407326175') format('woff'),
+       url('iconfont.ttf?t=1753407326175') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-hongbao:before {
+  content: "\e6b7";
+}
+
+.icon-suoding:before {
+  content: "\e63d";
+}
+
 .icon-fenxiang01:before {
   content: "\e6d1";
 }