diff --git a/app/zone/pay/[zid]/[product_id]/[moment_id]/page.jsx b/app/zone/pay/[zid]/[product_id]/[moment_id]/page.jsx
index 2a6a0d8..eb93542 100644
--- a/app/zone/pay/[zid]/[product_id]/[moment_id]/page.jsx
+++ b/app/zone/pay/[zid]/[product_id]/[moment_id]/page.jsx
@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import Divider from "@/components/Divider";
 import Link from "next/link";
-import { Toast, Switch } from "antd-mobile";
+import { Toast, Switch, Image } from "antd-mobile";
 import { generateSignature } from "@/utils/crypto";
 import webviewBaseRequest from "@/utils/webviewBaseRequest";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -40,6 +40,7 @@ export default function Pay({ params }) {
         product_id: params.product_id,
         ...base,
       };
+      // debugger;
       const signature = generateSignature(body);
       const response = await fetch(
         `/api/zone/get_cashier?signature=${signature}`,
@@ -89,9 +90,13 @@ export default function Pay({ params }) {
       );
       const temData = await response.json();
       if (temData.ret === -1) return;
-      const superfanPriceList = temData.data?.superfan_price_list;
+      const superfanPriceList = temData.data?.superfan_price_list?.filter(
+        (it) => it.enable
+      );
       if (superfanPriceList) {
         setSuperCheched({ index: 0, ...superfanPriceList[0] });
+      } else {
+        setSuperCheched({ index: 0, ...temData.data });
       }
       setSuperfanshipData(temData.data);
     } catch (error) {
@@ -118,13 +123,13 @@ export default function Pay({ params }) {
     params.product_id === "h5_zone_superfanship" ? true : false
   );
   const superId = superfanshipData?.superfan_price_list
-    ? superCheched?.period == 1
+    ? superCheched?.period == 4
       ? "h5_zone_superfanship_year"
-      : superCheched?.period == 2
-      ? "h5_zone_superfanship_half_year"
       : superCheched?.period == 3
+      ? "h5_zone_superfanship_half_year"
+      : superCheched?.period == 2
       ? "h5_zone_superfanship_season"
-      : superCheched?.period == 4
+      : superCheched?.period == 1
       ? "h5_zone_superfanship_month"
       : "h5_zone_superfanship_eternal"
     : "h5_zone_superfanship";
@@ -143,7 +148,6 @@ export default function Pay({ params }) {
       from: searchParams.get("base") ? "web" : "app",
     };
     setIsLoading(true);
-
     const signature = generateSignature(body);
     try {
       const response = await fetch(
@@ -229,82 +233,46 @@ export default function Pay({ params }) {
         <span className="absolute top-1/2 loading loading-spinner loading-lg z-20"></span>
       )}
       <div
-        className={`flex flex-col p-4 ${
+        className={`flex flex-col p-4  ${
           searchParams.get("base") ? "" : "mt-20"
         }`}
       >
-        <h1 className="text-[#FF669E] text-4xl font-medium text-center my-10">
-          ¥{" "}
-          {checked
-            ? (superCheched?.price || data?.price) / 100
-            : (data?.price / 100).toFixed(2)}
-        </h1>
-        <div className="flex flex-row justify-between">
-          <p className="text-white text-base font-medium">付费商品：</p>
-          <p className="text-secondary text-base font-medium">
-            {checked ? superfanshipData?.name : data?.name}
-          </p>
-        </div>
-        <Divider className="my-2" />
-        <div className="flex flex-row justify-between">
-          <p className="text-white text-base font-medium">有效期：</p>
-          <p className="text-secondary text-base font-medium">
+        <div className="flex flex-row justify-center items-baseline my-10 text-white">
+          <span className="text-2xl font-medium mr-2">¥</span>
+          <span className="text-5xl font-medium text-center">
             {checked
-              ? superCheched?.period == 1
-                ? "一年"
-                : superCheched?.period == 2
-                ? "半年"
-                : superCheched?.period == 3
-                ? "三个月"
-                : superCheched?.period == 4
-                ? "一个月"
-                : "永久"
-              : data?.validity}
-          </p>
+              ? ((superCheched?.price || data?.price) / 100).toFixed(2)
+              : (data?.price / 100).toFixed(2)}
+          </span>
+        </div>
+        <div className="flex flex-col gap-4 text-secondary mb-4">
+          <div className="flex flex-row justify-between text-base">
+            <p className="text-[#FFFFFFB2]">付费商品：</p>
+            <p>{checked ? superfanshipData?.name : data?.name}</p>
+          </div>
+          <div className="flex flex-row justify-between text-base">
+            <p className="text-[#FFFFFFB2]">有效期：</p>
+            <p>
+              {checked
+                ? superCheched?.period == 1
+                  ? "一个月"
+                  : superCheched?.period == 2
+                  ? "三个月"
+                  : superCheched?.period == 3
+                  ? "半年"
+                  : superCheched?.period == 4
+                  ? "一年"
+                  : "永久"
+                : data?.validity}
+            </p>
+          </div>
         </div>
 
-        <Divider className="my-2" />
-        {checked && (
-          <div className="my-2 grid grid-cols-3 gap-4">
-            {superfanshipData?.superfan_price_list
-              ?.filter((it) => it.enable)
-              ?.map((it, index) => (
-                <div
-                  onClick={() => handleSelectSuper({ index, ...it })}
-                  className={`flex-col justify-center items-center p-4 text-center border-[#${
-                    superCheched?.index == index ? "FF669E" : "ffffff80"
-                  }] bg-[#${
-                    superCheched?.index == index ? "ff669e38" : "ffffff81a"
-                  }] border-[2px] rounded-xl max-h-max`}
-                >
-                  <p className="whitespace-nowrap text-base">
-                    {it.period == 0
-                      ? "永久"
-                      : it.period == 1
-                      ? "年度"
-                      : it.period == 2
-                      ? "半年"
-                      : it.period == 3
-                      ? "季度"
-                      : "月度"}
-                    超粉
-                  </p>
-                  <p className="whitespace-nowrap my-1 text-xl font-medium text-[#FF669E]">
-                    ¥{it.price / 100}
-                  </p>
-                  {it.is_superfanship_give_wechat ? (
-                    <p className="whitespace-nowrap text-sm text-[#ffffff80]">
-                      (赠送微信)
-                    </p>
-                  ) : (
-                    ""
-                  )}
-                </div>
-              ))}
-          </div>
-        )}
         {params.product_id === "h5_zone_moment" && superfanshipData && (
-          <div className="flex flex-row justify-between items-center bg-[#331F0B] py-2 px-4 rounded-2xl">
+          <div
+            className="flex flex-row justify-between items-center bg-[#331F0B] py-2 px-4 rounded-xl mb-2"
+            onClick={() => setChecked(!checked)}
+          >
             <div className="flex flex-col items-center">
               <p className="text-[#FFD685] text-base font-medium">
                 开通超粉，空间动态免费看
@@ -323,15 +291,27 @@ export default function Pay({ params }) {
                 </div>
               )}
             </div>
-            <Switch
+            <Image
+              width={24}
+              height={24}
+              src={
+                process.env.NEXT_PUBLIC_CDN_URL +
+                (checked
+                  ? "/public/icon/superFan_price_selected.png"
+                  : "/public/icon/superFan_price_select.png")
+              }
+            />
+            {/* <Radio
+              checked={checked}
+              onChange={() => setChecked(!checked)}
+            ></Radio> */}
+            {/* <Switch
               checked={checked}
               onChange={() => setChecked(!checked)}
               style={{
-                "--checked-color": "#FFD685",
-                "--height": "30px",
-                "--width": "60px",
+                "--checked-color": "#FFE9AB",
               }}
-            />
+            /> */}
           </div>
         )}
         {params.product_id === "h5_zone_superfanship" && (
@@ -351,7 +331,73 @@ export default function Pay({ params }) {
             )}
           </>
         )}
+        {checked && (
+          <div className="my-2 grid grid-cols-3 justify-between gap-2">
+            {superfanshipData?.superfan_price_list
+              ?.filter((it) => it.enable)
+              ?.map((it, index) => (
+                <div
+                  key={index}
+                  onClick={() => handleSelectSuper({ index, ...it })}
+                  className={`relative flex flex-col  items-center p-2 text-center bg-cover bg- bg-no-repeat rounded-2xl w-full h-[calc(100vw/3-1rem)]
+                    ${
+                      superCheched?.index == index
+                        ? "border-2 border-[#ffffff] text-[#663B0B]"
+                        : "border-2 border-[#FFFFFF14] text-white"
+                    }
 
+                    ${
+                      !it.is_superfanship_give_wechat
+                        ? "justify-center"
+                        : "justify-start"
+                    }
+                  `}
+                  style={{
+                    backgroundImage: `url(${
+                      superCheched?.index == index
+                        ? process.env.NEXT_PUBLIC_CDN_URL +
+                          "/public/images/superFan_price_bg.png"
+                        : ""
+                    })`,
+                  }}
+                >
+                  <div>
+                    <p className="whitespace-nowrap text-sm">
+                      {it.period == 0
+                        ? "永久"
+                        : it.period == 1
+                        ? "月度"
+                        : it.period == 2
+                        ? "季度"
+                        : it.period == 3
+                        ? "半年"
+                        : "年度"}
+                      超粉
+                    </p>
+                    <p className="whitespace-nowrap my-1 text-sm font-medium">
+                      ¥
+                      <span className="font-bold text-2xl ml-1">
+                        {it.price / 100}
+                      </span>
+                    </p>
+                  </div>
+                  {it.is_superfanship_give_wechat ? (
+                    <p
+                      className={`w-full absolute bottom-0 text-center py-2 flex-1  whitespace-nowrap text-sm ${
+                        superCheched?.index == index
+                          ? "bg-[#FFDD81]"
+                          : "bg-[#FFFFFF1A]"
+                      } rounded-bl-xl rounded-br-xl`}
+                    >
+                      赠送微信
+                    </p>
+                  ) : (
+                    ""
+                  )}
+                </div>
+              ))}
+          </div>
+        )}
         {checked ? (
           <div className="flex flex-col mt-16 pb-48">
             <p className="text-secondary text-base font-medium">购买须知：</p>
diff --git a/public/images/superFan_price_bg.png b/public/images/superFan_price_bg.png
new file mode 100644
index 0000000..cce99ba
Binary files /dev/null and b/public/images/superFan_price_bg.png differ