diff --git a/nkebao/src/pages/mine/index.module.scss b/nkebao/src/pages/mine/index.module.scss
index d0ddc66a8..474657d68 100644
--- a/nkebao/src/pages/mine/index.module.scss
+++ b/nkebao/src/pages/mine/index.module.scss
@@ -3,54 +3,108 @@
 }
 
 .user-card {
-  margin-bottom: 16px;
-  border-radius: 12px;
-  overflow: hidden;
-  
-  :global(.adm-card-body) {
-    padding: 20px;
-  }
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  margin: 16px 0 12px 0;
+  padding: 0 0 0 0;
 }
 
-.user-info {
+.user-info-row {
   display: flex;
   align-items: center;
-  gap: 16px;
+  padding: 20px 24px 16px 24px;
 }
 
 .user-avatar {
-  width: 60px;
-  height: 60px;
+  width: 56px;
+  height: 56px;
   border-radius: 50%;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  font-weight: 700;
+  color: #1890ff;
+  margin-right: 18px;
   overflow: hidden;
-  border: 2px solid var(--primary-color);
-  
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+}
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  font-weight: 700;
+  color: #1890ff;
+  background: #e6f7ff;
+  border-radius: 50%;
 }
 
-.user-details {
+.user-main-info {
   flex: 1;
+  min-width: 0;
 }
 
+.user-main-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 .user-name {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
+  font-size: 20px;
+  font-weight: 700;
+  color: #222;
+  margin-right: 2px;
 }
-
-.user-level {
-  font-size: 14px;
-  color: var(--primary-color);
-  margin-bottom: 4px;
+.role-badge {
+  background: #fa8c16;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 12px;
+  padding: 2px 10px;
+  margin-right: 8px;
 }
-
-.user-points {
-  font-size: 12px;
+.balance-label {
   color: #666;
+  font-size: 15px;
+  margin-right: 2px;
+}
+.balance-value {
+  color: #16b364;
+  font-size: 20px;
+  font-weight: 700;
+  margin-right: 4px;
+}
+.recharge-btn {
+  margin-right: 8px;
+  padding: 0 14px;
+  font-size: 14px;
+  height: 28px;
+  line-height: 28px;
+  border-radius: 8px;
+}
+.icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: none;
+  font-size: 20px;
+  color: #666;
+  cursor: pointer;
+  margin-left: 2px;
+}
+.last-login {
+  color: #888;
+  font-size: 13px;
+  margin-top: 6px;
+  margin-left: 2px;
 }
 
 .menu-card {
diff --git a/nkebao/src/pages/mine/index.tsx b/nkebao/src/pages/mine/index.tsx
index 4019d842f..4a4fc8db7 100644
--- a/nkebao/src/pages/mine/index.tsx
+++ b/nkebao/src/pages/mine/index.tsx
@@ -23,6 +23,7 @@ const Mine: React.FC = () => {
     wechat: 25,
     traffic: 8,
     content: 156,
+    balance: 0,
   });
   const [showLogoutDialog, setShowLogoutDialog] = useState(false);
 
@@ -90,6 +91,7 @@ const Mine: React.FC = () => {
         wechat: res.wechatNum,
         traffic: 999,
         content: 999,
+        balance: res.balance || 0,
       });
     } catch (error) {
       console.error("加载统计数据失败:", error);
@@ -173,45 +175,51 @@ const Mine: React.FC = () => {
       footer={<MeauMobile activeKey="mine" />}
     >
       <div className={style["mine-page"]}>
-        {/* 用户信息卡片 */}
+        {/* 用户信息卡片（严格按图片风格） */}
         <Card className={style["user-card"]}>
-          <div className={style["user-info"]}>
-            <div className={style["user-avatar"]}>{renderUserAvatar()}</div>
-            <div className={style["user-details"]}>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                }}
-              >
-                <div className={style["user-name"]}>{currentUserInfo.name}</div>
-                <span
-                  style={{
-                    padding: "2px 8px",
-                    backgroundColor: "#fa8c16",
-                    color: "white",
-                    borderRadius: "12px",
-                    fontSize: "12px",
-                    fontWeight: "500",
-                  }}
-                >
+          <div className={style["user-info-row"]}>
+            {/* 头像 */}
+            <div className={style["user-avatar"]}>
+              {currentUserInfo.avatar ? (
+                <img src={currentUserInfo.avatar} alt="头像" />
+              ) : (
+                <div className={style["avatar-placeholder"]}>卡</div>
+              )}
+            </div>
+            {/* 右侧内容 */}
+            <div className={style["user-main-info"]}>
+              <div className={style["user-main-row"]}>
+                <span className={style["user-name"]}>
+                  {currentUserInfo.name}
+                </span>
+                <span className={style["role-badge"]}>
                   {currentUserInfo.role}
                 </span>
+                <span className={style["balance-label"]}>余额：</span>
+                <span className={style["balance-value"]}>
+                  ￥{Number(stats.balance || 0).toFixed(2)}
+                </span>
+                <Button
+                  size="small"
+                  color="primary"
+                  className={style["recharge-btn"]}
+                  onClick={() => navigate("/recharge")}
+                >
+                  充值
+                </Button>
+                <span className={style["icon-btn"]}>
+                  <i className="iconfont icon-bell" />
+                </span>
+                <span className={style["icon-btn"]}>
+                  <i
+                    className="iconfont icon-setting"
+                    onClick={() => navigate("/settings")}
+                  />
+                </span>
               </div>
-              <div
-                style={{ fontSize: "14px", color: "#666", marginBottom: "4px" }}
-              >
-                {currentUserInfo.email}
+              <div className={style["last-login"]}>
+                最近登录：{currentUserInfo.lastLogin}
               </div>
-              <div style={{ fontSize: "12px", color: "#666" }}>
-                最近登录: {currentUserInfo.lastLogin}
-              </div>
-            </div>
-            <div
-              style={{ display: "flex", flexDirection: "column", gap: "8px" }}
-            >
-              <SettingOutlined style={{ fontSize: "20px", color: "#666" }} />
             </div>
           </div>
         </Card>
diff --git a/nkebao/src/pages/mine/recharge/index.module.scss b/nkebao/src/pages/mine/recharge/index.module.scss
new file mode 100644
index 000000000..e03d5412b
--- /dev/null
+++ b/nkebao/src/pages/mine/recharge/index.module.scss
@@ -0,0 +1,127 @@
+.recharge-page {
+  padding: 16px 0 60px 0;
+  background: #f7f8fa;
+  min-height: 100vh;
+}
+
+.balance-card {
+  margin: 16px;
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+  border-radius: 12px;
+  padding: 18px 0 18px 0;
+  display: flex;
+  align-items: center;
+  .balance-content {
+    display: flex;
+    color: #16b364;
+    padding-left: 30px;
+  }
+  .wallet-icon {
+    color: #16b364;
+    font-size: 30px;
+    flex-shrink: 0;
+  }
+  .balance-info {
+    margin-left: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .balance-label {
+    font-size: 14px;
+    font-weight: normal;
+    color: #666;
+    margin-bottom: 2px;
+  }
+  .balance-amount {
+    font-size: 24px;
+    font-weight: 700;
+    color: #16b364;
+    line-height: 1.1;
+  }
+}
+
+.quick-card {
+  margin: 16px;
+  .quick-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: flex-start;
+    margin-bottom: 8px;
+  }
+}
+
+.desc-card {
+  margin: 16px;
+  background: #fffbe6;
+  border: 1px solid #ffe58f;
+}
+
+.warn-card {
+  margin: 16px;
+  background: #fff2e8;
+  border: 1px solid #ffbb96;
+}
+
+.quick-title {
+  font-weight: 500;
+  margin-bottom: 8px;
+  font-size: 16px;
+}
+.quick-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+  margin-bottom: 8px;
+}
+.quick-btn {
+  min-width: 80px;
+  margin: 4px 0;
+  font-size: 16px;
+  border-radius: 8px;
+}
+.quick-btn-active {
+  @extend .quick-btn;
+  font-weight: 600;
+}
+.recharge-main-btn {
+  margin-top: 16px;
+  font-size: 18px;
+  border-radius: 8px;
+}
+.desc-title {
+  font-weight: 500;
+  margin-bottom: 8px;
+  font-size: 16px;
+}
+.desc-text {
+  color: #666;
+  font-size: 14px;
+}
+.warn-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #faad14;
+  font-size: 14px;
+}
+.warn-icon {
+  font-size: 30px;
+  color: #faad14;
+  flex-shrink: 0;
+}
+.warn-info {
+  display: flex;
+  flex-direction: column;
+}
+.warn-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+.warn-text {
+  color: #faad14;
+  font-size: 14px;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/mine/recharge/index.tsx b/nkebao/src/pages/mine/recharge/index.tsx
new file mode 100644
index 000000000..9f5ad8533
--- /dev/null
+++ b/nkebao/src/pages/mine/recharge/index.tsx
@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Card, Button, Toast, NavBar } from "antd-mobile";
+import { useUserStore } from "@/store/module/user";
+import style from "./index.module.scss";
+import { WalletOutlined, WarningOutlined } from "@ant-design/icons";
+import NavCommon from "@/components/NavCommon";
+import Layout from "@/components/Layout/Layout";
+
+const quickAmounts = [50, 100, 200, 500, 1000];
+
+const Recharge: React.FC = () => {
+  const navigate = useNavigate();
+  const { user } = useUserStore();
+  // 假设余额从后端接口获取，实际可用props或store传递
+  const [balance, setBalance] = useState(0);
+  const [selected, setSelected] = useState<number | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // 充值操作
+  const handleRecharge = async () => {
+    if (!selected) {
+      Toast.show({ content: "请选择充值金额", position: "top" });
+      return;
+    }
+    setLoading(true);
+    setTimeout(() => {
+      setBalance((b) => b + selected);
+      Toast.show({ content: `充值成功，已到账￥${selected}` });
+      setLoading(false);
+    }, 1200);
+  };
+
+  return (
+    <Layout header={<NavCommon title="账户充值" />}>
+      <div className={style["recharge-page"]}>
+        <Card className={style["balance-card"]}>
+          <div className={style["balance-content"]}>
+            <WalletOutlined className={style["wallet-icon"]} />
+            <div className={style["balance-info"]}>
+              <div className={style["balance-label"]}>当前余额</div>
+              <div className={style["balance-amount"]}>
+                ￥{balance.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card className={style["quick-card"]}>
+          <div className={style["quick-title"]}>快捷充值</div>
+          <div className={style["quick-list"]}>
+            {quickAmounts.map((amt) => (
+              <Button
+                key={amt}
+                color={selected === amt ? "primary" : "default"}
+                className={
+                  selected === amt
+                    ? style["quick-btn-active"]
+                    : style["quick-btn"]
+                }
+                onClick={() => setSelected(amt)}
+              >
+                ￥{amt}
+              </Button>
+            ))}
+          </div>
+          <Button
+            block
+            color="primary"
+            size="large"
+            className={style["recharge-main-btn"]}
+            loading={loading}
+            onClick={handleRecharge}
+          >
+            立即充值
+          </Button>
+        </Card>
+        <Card className={style["desc-card"]}>
+          <div className={style["desc-title"]}>服务消耗</div>
+          <div className={style["desc-text"]}>
+            使用以下服务将从余额中扣除相应费用。
+          </div>
+        </Card>
+        {balance < 10 && (
+          <Card className={style["warn-card"]}>
+            <div className={style["warn-content"]}>
+              <WarningOutlined className={style["warn-icon"]} />
+              <div className={style["warn-info"]}>
+                <div className={style["warn-title"]}>余额不足提醒</div>
+                <div className={style["warn-text"]}>
+                  当前余额较低，建议及时充值以免影响服务使用
+                </div>
+              </div>
+            </div>
+          </Card>
+        )}
+      </div>
+    </Layout>
+  );
+};
+
+export default Recharge;
diff --git a/nkebao/src/router/module/index.tsx b/nkebao/src/router/module/index.tsx
index c68fdffde..f3680fec5 100644
--- a/nkebao/src/router/module/index.tsx
+++ b/nkebao/src/router/module/index.tsx
@@ -2,6 +2,7 @@ import Home from "@/pages/home/index";
 import Mine from "@/pages/mine/index";
 import WechatAccounts from "@/pages/wechat-accounts/list/index";
 import WechatAccountDetail from "@/pages/wechat-accounts/detail/index";
+import Recharge from "@/pages/mine/recharge/index";
 
 const routes = [
   // 基础路由
@@ -26,6 +27,11 @@ const routes = [
     element: <WechatAccountDetail />,
     auth: true,
   },
+  {
+    path: "/recharge",
+    element: <Recharge />,
+    auth: true,
+  },
 ];
 
 export default routes;