feat: 修改样式展示

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

@@ -124,6 +124,7 @@ const Jackpot: React.FC = () => {
                             }
                             result[curKey] = {
                                 ...curItem,
+                                idx: i,
                                 time,
                             };
                         }
@@ -251,9 +252,35 @@ const Jackpot: React.FC = () => {
                         >
                             Bónus misterioso
                         </div>
-                        <div className={clsx("mt-[.08rem] text-[.18rem] font-bold text-[#ffd200]")}>
-                            R${" "}
-                            {curTabData.is_suss ? formatAmount(curTabData?.extra_num || 0) : "??"}
+                        <div
+                            className={clsx(
+                                "relative mt-[.08rem] text-[.18rem] font-bold text-[#ffd200]"
+                            )}
+                        >
+                            <img
+                                src={
+                                    curTabData?.is_suss
+                                        ? `/jackpot/v${curTabData.idx + 1 > 6 ? 6 : curTabData.idx + 1}.png`
+                                        : `/jackpot/sv${curTabData.idx + 1 > 6 ? 6 : curTabData.idx + 1}.png`
+                                }
+                                alt=""
+                                style={{ width: "1.5rem" }}
+                                className="relative top-[-.3rem]"
+                            />
+                            {curTabData?.is_suss && (
+                                <span
+                                    className={clsx(
+                                        "absolute -bottom-[-.6rem] left-[45%] translate-x-[-50%]",
+                                        styles.money
+                                    )}
+                                >
+                                    <span>+R$ </span>
+                                    <span> {formatAmount(curTabData?.extra_num || 0)}</span>
+                                </span>
+                            )}
+
+                            {/* R${" "}
+                            {curTabData.is_suss ? formatAmount(curTabData?.extra_num || 0) : "??"} */}
                         </div>
                     </div>
                 </div>

src/app/[locale]/(doings)/jackpot/style.module.scss

@@ -5,6 +5,17 @@
     flex-direction: column;
     align-items: stretch;
 }
+.money {
+    font-size: 0.16rem;
+    white-space: nowrap;
+    background: linear-gradient(to bottom, #ffffbc, #f0a029);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-weight: bold;
+    filter: drop-shadow(2px 2px 0 #fd1d9c) drop-shadow(-2px 2px 0 #fd1d9c)
+        drop-shadow(2px -2px 0 #fd1d9c) drop-shadow(-2px -2px 0 #fd1d9c);
+}
 .main {
     flex: 1;
     overflow: auto;
@@ -70,7 +81,7 @@
         height: 0.75rem;
     }
     .introBottom {
-        height: 1.95rem;
+        height: 2.7rem;
         display: flex;
         flex-direction: column;
         align-items: center;