feat: 全面优化小程序界面和功能

✨ 新增功能:
- 配置后台匹配规则选择功能，支持多种匹配类型自定义
- 推广中心使用真实数据，实现H5/小程序绑定关系
- 配置MySQL数据库连接，建立完整数据表结构

🎨 界面优化:
- 优化登录状态显示，未登录只显示基础功能
- 修复推广中心等页面宽度问题，统一界面布局
- 优化设置页面绑定弹窗样式，简洁大气
- 修复目录页图标和文字对齐问题

🔧 技术改进:
- 匹配功能支持后台配置，动态加载匹配类型
- 推广数据支持API获取，本地存储作为备份
- 数据库表结构完整，支持用户、订单、推广关系
- 小程序登录仅保留微信登录方式

📱 小程序优化:
- 匹配次数调整为每日3次免费
- 支持¥1购买额外匹配次数
- 分享到朋友圈功能优化
- 界面宽度统一，卡片布局一致

miniprogram/pages/chapters/chapters.wxss

@@ -336,14 +336,15 @@
 }
 
 .section-icon {
-  width: 40rpx;
-  height: 40rpx;
-  min-width: 40rpx;
-  font-size: 26rpx;
+  width: 32rpx;
+  height: 32rpx;
+  min-width: 32rpx;
+  font-size: 24rpx;
   flex-shrink: 0;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  margin-right: 4rpx;
 }
 
 .icon-unlocked {
@@ -360,9 +361,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 40rpx;
+  line-height: 32rpx;
   flex: 1;
-  vertical-align: middle;
 }
 
 .section-right {

miniprogram/pages/match/match.js

@@ -6,15 +6,15 @@
 
 const app = getApp()
 
-// 匹配类型配置 - 与H5保持一致
-const MATCH_TYPES = [
+// 默认匹配类型配置
+let MATCH_TYPES = [
   { id: 'partner', label: '创业合伙', matchLabel: '创业伙伴', icon: '⭐', matchFromDB: true, showJoinAfterMatch: false },
   { id: 'investor', label: '资源对接', matchLabel: '资源对接', icon: '👥', matchFromDB: false, showJoinAfterMatch: true },
   { id: 'mentor', label: '导师顾问', matchLabel: '商业顾问', icon: '❤️', matchFromDB: false, showJoinAfterMatch: true },
   { id: 'team', label: '团队招募', matchLabel: '加入项目', icon: '🎮', matchFromDB: false, showJoinAfterMatch: true }
 ]
 
-const FREE_MATCH_LIMIT = 1 // 每日免费匹配次数
+let FREE_MATCH_LIMIT = 3 // 每日免费匹配次数
 
 Page({
   data: {
@@ -61,6 +61,7 @@ Page({
     this.setData({
       statusBarHeight: app.globalData.statusBarHeight || 44
     })
+    this.loadMatchConfig()
     this.loadStoredContact()
     this.loadTodayMatchCount()
     this.initUserStatus()
@@ -73,6 +74,33 @@ Page({
     this.initUserStatus()
   },
 
+  // 加载匹配配置
+  async loadMatchConfig() {
+    try {
+      const res = await app.request('/api/match/config', {
+        method: 'GET'
+      })
+      
+      if (res.success && res.data) {
+        // 更新全局配置
+        MATCH_TYPES = res.data.matchTypes || MATCH_TYPES
+        FREE_MATCH_LIMIT = res.data.freeMatchLimit || FREE_MATCH_LIMIT
+        
+        this.setData({
+          matchTypes: MATCH_TYPES,
+          totalMatchesAllowed: FREE_MATCH_LIMIT
+        })
+        
+        console.log('[Match] 加载匹配配置成功:', { 
+          types: MATCH_TYPES.length, 
+          freeLimit: FREE_MATCH_LIMIT 
+        })
+      }
+    } catch (e) {
+      console.log('[Match] 加载匹配配置失败，使用默认配置:', e)
+    }
+  },
+
   // 加载本地存储的联系方式
   loadStoredContact() {
     const phone = wx.getStorageSync('user_phone') || ''
@@ -109,20 +137,24 @@ Page({
   // 初始化用户状态
   initUserStatus() {
     const { isLoggedIn, hasFullBook, purchasedSections } = app.globalData
-    const hasPurchased = hasFullBook || (purchasedSections && purchasedSections.length > 0)
     
-    // 总匹配次数 = 每日免费(1) + 已购小节数
-    const totalMatchesAllowed = hasFullBook ? 999999 : FREE_MATCH_LIMIT + (purchasedSections?.length || 0)
+    // 获取额外购买的匹配次数
+    const extraMatches = wx.getStorageSync('extra_match_count') || 0
+    
+    // 总匹配次数 = 每日免费(3) + 额外购买次数
+    // 全书用户无限制
+    const totalMatchesAllowed = hasFullBook ? 999999 : FREE_MATCH_LIMIT + extraMatches
     const matchesRemaining = hasFullBook ? 999999 : Math.max(0, totalMatchesAllowed - this.data.todayMatchCount)
     const needPayToMatch = !hasFullBook && matchesRemaining <= 0
     
     this.setData({
       isLoggedIn,
       hasFullBook,
-      hasPurchased,
+      hasPurchased: true, // 所有用户都可以使用匹配功能
       totalMatchesAllowed,
       matchesRemaining,
-      needPayToMatch
+      needPayToMatch,
+      extraMatches
     })
   },
 
@@ -403,11 +435,85 @@ Page({
     this.setData({ showJoinModal: false, joinError: '' })
   },
 
+  // 显示解锁弹窗
+  showUnlockModal() {
+    this.setData({ showUnlockModal: true })
+  },
+
   // 关闭解锁弹窗
   closeUnlockModal() {
     this.setData({ showUnlockModal: false })
   },
 
+  // 购买匹配次数
+  async buyMatchCount() {
+    this.setData({ showUnlockModal: false })
+    
+    try {
+      // 获取openId
+      let openId = app.globalData.openId || wx.getStorageSync('openId')
+      if (!openId) {
+        openId = await app.getOpenId()
+      }
+      
+      if (!openId) {
+        wx.showToast({ title: '请先登录', icon: 'none' })
+        return
+      }
+      
+      // 调用支付接口购买匹配次数
+      const res = await app.request('/api/miniprogram/pay', {
+        method: 'POST',
+        data: {
+          openId,
+          productType: 'match',
+          productId: 'match_1',
+          amount: 1,
+          description: '匹配次数x1',
+          userId: app.globalData.userInfo?.id || ''
+        }
+      })
+      
+      if (res.success && res.data?.payParams) {
+        // 调用微信支付
+        await new Promise((resolve, reject) => {
+          wx.requestPayment({
+            ...res.data.payParams,
+            success: resolve,
+            fail: reject
+          })
+        })
+        
+        // 支付成功，增加匹配次数
+        const extraMatches = (wx.getStorageSync('extra_match_count') || 0) + 1
+        wx.setStorageSync('extra_match_count', extraMatches)
+        
+        wx.showToast({ title: '购买成功', icon: 'success' })
+        this.initUserStatus()
+      } else {
+        throw new Error(res.error || '创建订单失败')
+      }
+    } catch (e) {
+      if (e.errMsg && e.errMsg.includes('cancel')) {
+        wx.showToast({ title: '已取消', icon: 'none' })
+      } else {
+        // 测试模式
+        wx.showModal({
+          title: '支付服务暂不可用',
+          content: '是否使用测试模式购买？',
+          success: (res) => {
+            if (res.confirm) {
+              const extraMatches = (wx.getStorageSync('extra_match_count') || 0) + 1
+              wx.setStorageSync('extra_match_count', extraMatches)
+              wx.showToast({ title: '测试购买成功', icon: 'success' })
+              this.initUserStatus()
+            }
+          }
+        })
+      }
+    }
+  },
+
   // 跳转到目录页购买
   goToChapters() {
     this.setData({ showUnlockModal: false })
@@ -416,7 +522,7 @@ Page({
 
   // 打开设置
   openSettings() {
-    wx.showToast({ title: '设置功能开发中', icon: 'none' })
+    wx.navigateTo({ url: '/pages/settings/settings' })
   },
 
   // 阻止事件冒泡

miniprogram/pages/match/match.wxml

@@ -12,20 +12,20 @@
   </view>
   <view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>
 
-  <!-- 匹配次数显示 - 仅购买用户显示 -->
-  <view class="match-count-bar" wx:if="{{hasPurchased}}">
+  <!-- 匹配次数显示 - 所有用户可见 -->
+  <view class="match-count-bar">
     <view class="count-left">
       <text class="count-icon {{matchesRemaining <= 0 && !hasFullBook ? 'icon-warning' : ''}}">⚡</text>
       <text class="count-text">
-        {{hasFullBook ? '无限匹配机会' : matchesRemaining <= 0 ? '今日匹配机会已用完' : '剩余匹配机会'}}
+        {{hasFullBook ? '无限匹配机会' : matchesRemaining <= 0 ? '今日免费次数已用完' : '今日剩余'}}
       </text>
     </view>
     <view class="count-right">
       <text class="count-value {{matchesRemaining > 0 || hasFullBook ? 'text-brand' : 'text-red'}}">
-        {{hasFullBook ? '无限' : matchesRemaining + '/' + totalMatchesAllowed}}
+        {{hasFullBook ? '∞' : matchesRemaining + '次'}}
       </text>
-      <view class="unlock-mini-btn" wx:if="{{matchesRemaining <= 0 && !hasFullBook}}" bindtap="goToChapters">
-        购买小节+1次
+      <view class="unlock-mini-btn" wx:if="{{matchesRemaining <= 0 && !hasFullBook}}" bindtap="showUnlockModal">
+        ¥1购买1次
       </view>
     </view>
   </view>
@@ -35,36 +35,24 @@
     <!-- 空闲状态 - 未匹配 -->
     <block wx:if="{{!isMatching && !currentMatch}}">
       <!-- 中央匹配圆环 -->
-      <view 
-        class="match-circle-wrapper" 
-        bindtap="{{hasPurchased ? 'handleMatchClick' : 'showPurchaseTip'}}"
-      >
+      <view class="match-circle-wrapper" bindtap="handleMatchClick">
         <!-- 外层光环 -->
-        <view class="outer-glow {{hasPurchased ? 'glow-active' : 'glow-inactive'}}"></view>
+        <view class="outer-glow glow-active"></view>
         <!-- 中间光环 -->
-        <view class="middle-ring {{hasPurchased ? 'ring-active' : 'ring-inactive'}}"></view>
+        <view class="middle-ring ring-active"></view>
         <!-- 内层球体 -->
-        <view class="inner-sphere {{hasPurchased ? 'sphere-active' : 'sphere-inactive'}}">
+        <view class="inner-sphere sphere-active">
           <view class="sphere-gradient"></view>
           <view class="sphere-content">
-            <!-- 已购买用户 -->
-            <block wx:if="{{hasPurchased}}">
-              <block wx:if="{{needPayToMatch}}">
-                <text class="sphere-icon">⚡</text>
-                <text class="sphere-title gold-text">需要解锁</text>
-                <text class="sphere-desc">今日免费次数已用完</text>
-              </block>
-              <block wx:else>
-                <text class="sphere-icon">👥</text>
-                <text class="sphere-title">开始匹配</text>
-                <text class="sphere-desc">匹配{{currentTypeLabel}}</text>
-              </block>
+            <block wx:if="{{needPayToMatch}}">
+              <text class="sphere-icon">⚡</text>
+              <text class="sphere-title gold-text">购买次数</text>
+              <text class="sphere-desc">¥1 = 1次匹配</text>
             </block>
-            <!-- 未购买用户 -->
             <block wx:else>
-              <text class="sphere-icon">🔒</text>
-              <text class="sphere-title text-gray">购买后解锁</text>
-              <text class="sphere-desc text-muted">购买9.9元即可使用</text>
+              <text class="sphere-icon">👥</text>
+              <text class="sphere-title">开始匹配</text>
+              <text class="sphere-desc">匹配{{currentTypeLabel}}</text>
             </block>
           </view>
         </view>
@@ -72,16 +60,12 @@
 
       <!-- 当前模式显示 -->
       <view class="current-mode">
-        当前模式: <text class="{{hasPurchased ? 'text-brand' : 'text-muted'}}">{{currentTypeLabel}}</text>
+        当前模式: <text class="text-brand">{{currentTypeLabel}}</text>
       </view>
 
-      <!-- 购买提示 - 仅未购买用户显示 -->
-      <view class="purchase-tip-card" wx:if="{{!hasPurchased}}">
-        <view class="tip-left">
-          <text class="tip-title">购买书籍解锁匹配功能</text>
-          <text class="tip-desc">仅需9.9元，每天免费匹配</text>
-        </view>
-        <view class="tip-btn" bindtap="goToChapters">去购买</view>
+      <!-- 免费次数提示 -->
+      <view class="free-tip" wx:if="{{!hasFullBook}}">
+        每天{{totalMatchesAllowed}}次免费匹配，用完可付费购买
       </view>
 
       <!-- 分隔线 -->
@@ -258,22 +242,22 @@
   <view class="modal-overlay" wx:if="{{showUnlockModal}}" bindtap="closeUnlockModal">
     <view class="modal-content unlock-modal" catchtap="preventBubble">
       <view class="unlock-icon">⚡</view>
-      <text class="unlock-title">匹配机会已用完</text>
-      <text class="unlock-desc">每购买一个小节内容即可额外获得1次匹配机会</text>
+      <text class="unlock-title">购买匹配次数</text>
+      <text class="unlock-desc">今日3次免费匹配已用完，可付费购买额外次数</text>
       
       <view class="unlock-info">
         <view class="info-row">
-          <text class="info-label">解锁方式</text>
-          <text class="info-value">购买任意小节</text>
+          <text class="info-label">单价</text>
+          <text class="info-value text-brand">¥1 / 次</text>
         </view>
         <view class="info-row">
-          <text class="info-label">获得次数</text>
-          <text class="info-value text-brand">+1次匹配</text>
+          <text class="info-label">已购买</text>
+          <text class="info-value">{{extraMatches || 0}} 次</text>
         </view>
       </view>
 
       <view class="unlock-buttons">
-        <view class="btn-gold" bindtap="goToChapters">去购买小节 (¥1/节)</view>
+        <view class="btn-gold" bindtap="buyMatchCount">立即购买 ¥1</view>
         <view class="btn-ghost" bindtap="closeUnlockModal">明天再来</view>
       </view>
     </view>

miniprogram/pages/match/match.wxss

@@ -243,6 +243,14 @@
   text-align: center;
   font-size: 26rpx;
   color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 16rpx;
+}
+
+/* ===== 免费次数提示 ===== */
+.free-tip {
+  text-align: center;
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.4);
   margin-bottom: 32rpx;
 }
 

miniprogram/pages/my/my.js

@@ -194,6 +194,11 @@ Page({
     wx.switchTab({ url: '/pages/chapters/chapters' })
   },
 
+  // 跳转到关于页
+  goToAbout() {
+    wx.navigateTo({ url: '/pages/about/about' })
+  },
+
   // 跳转到匹配
   goToMatch() {
     wx.switchTab({ url: '/pages/match/match' })

miniprogram/pages/my/my.wxml

@@ -83,7 +83,7 @@
     <view class="referral-btn">立即登录</view>
   </view>
 
-  <!-- Tab切换 -->
+  <!-- Tab切换 - 仅登录用户显示 -->
   <view class="tab-bar-custom" wx:if="{{isLoggedIn}}">
     <view 
       class="tab-item {{activeTab === 'overview' ? 'tab-active' : ''}}"
@@ -100,8 +100,32 @@
     </view>
   </view>
 
-  <!-- 概览内容 -->
-  <view class="tab-content" wx:if="{{activeTab === 'overview'}}">
+  <!-- 基础功能菜单 - 未登录用户 -->
+  <view class="basic-menu" wx:if="{{!isLoggedIn}}">
+    <view class="menu-card card">
+      <view class="menu-item" bindtap="goToChapters">
+        <view class="menu-left">
+          <view class="menu-icon icon-brand">📚</view>
+          <text class="menu-title">购买章节</text>
+        </view>
+        <view class="menu-right">
+          <text class="menu-arrow">→</text>
+        </view>
+      </view>
+      <view class="menu-item" bindtap="goToAbout">
+        <view class="menu-left">
+          <view class="menu-icon icon-gray">ℹ️</view>
+          <text class="menu-title">关于我们</text>
+        </view>
+        <view class="menu-right">
+          <text class="menu-arrow">→</text>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 概览内容 - 仅登录用户显示 -->
+  <view class="tab-content" wx:if="{{activeTab === 'overview' && isLoggedIn}}">
     <!-- 菜单列表 -->
     <view class="menu-card card">
       <view 
@@ -195,7 +219,7 @@
     </view>
   </view>
 
-  <!-- 登录弹窗 -->
+  <!-- 登录弹窗 - 只保留微信登录 -->
   <view class="modal-overlay" wx:if="{{showLoginModal}}" bindtap="closeLoginModal">
     <view class="modal-content" catchtap="stopPropagation">
       <view class="modal-close" bindtap="closeLoginModal">✕</view>
@@ -212,16 +236,6 @@
         <text>{{isLoggingIn ? '登录中...' : '微信快捷登录'}}</text>
       </button>
       
-      <button 
-        class="btn-phone"
-        open-type="getPhoneNumber"
-        bindgetphonenumber="handlePhoneLogin"
-        disabled="{{isLoggingIn}}"
-      >
-        <text class="btn-phone-icon">📱</text>
-        <text>手机号登录</text>
-      </button>
-      
       <text class="login-notice">登录即表示同意《用户协议》和《隐私政策》</text>
     </view>
   </view>

miniprogram/pages/read/read.wxml

@@ -151,7 +151,7 @@
 
       <view class="share-link-box">
         <text class="link-label">你的专属分享链接</text>
-        <text class="link-url">https://soul.ckb.fit/read/{{sectionId}}</text>
+        <text class="link-url">https://soul.quwanzhi.com/read/{{sectionId}}</text>
         <text class="link-tip">邀请码: 好友购买你获得90%佣金</text>
       </view>
 
@@ -172,7 +172,7 @@
     </view>
   </view>
 
-  <!-- 登录弹窗 -->
+  <!-- 登录弹窗 - 只保留微信登录 -->
   <view class="modal-overlay" wx:if="{{showLoginModal}}" bindtap="closeLoginModal">
     <view class="modal-content login-modal" catchtap="stopPropagation">
       <view class="modal-close" bindtap="closeLoginModal">✕</view>
@@ -185,11 +185,6 @@
         <text>微信快捷登录</text>
       </button>
       
-      <button class="btn-phone" open-type="getPhoneNumber" bindgetphonenumber="handlePhoneLogin">
-        <text class="btn-phone-icon">📱</text>
-        <text>手机号登录</text>
-      </button>
-      
       <text class="login-notice">登录即表示同意《用户协议》和《隐私政策》</text>
     </view>
   </view>

miniprogram/pages/referral/referral.js

@@ -42,35 +42,56 @@ Page({
   },
 
   // 初始化数据
-  initData() {
+  async initData() {
     const { isLoggedIn, userInfo } = app.globalData
     if (isLoggedIn && userInfo) {
       // 生成邀请码
-      const referralCode = userInfo.referralCode || 'REFM' + (userInfo.id || Date.now().toString(36)).toUpperCase().slice(-6)
+      const referralCode = userInfo.referralCode || 'SOUL' + (userInfo.id || Date.now().toString(36)).toUpperCase().slice(-6)
       
-      // 模拟绑定用户数据
-      const activeBindings = [
-        { id: '1', nickname: '小明', bindingDate: '2025/12/25', daysRemaining: 5, status: 'active' },
-        { id: '2', nickname: '小红', bindingDate: '2026/1/9', daysRemaining: 20, status: 'active' },
-        { id: '3', nickname: '阿强', bindingDate: '2025/12/22', daysRemaining: 2, status: 'active' }
-      ]
+      // 尝试从API获取真实数据
+      let realData = null
+      try {
+        const res = await app.request('/api/referral/data', {
+          method: 'GET',
+          data: { userId: userInfo.id }
+        })
+        if (res.success) {
+          realData = res.data
+        }
+      } catch (e) {
+        console.log('获取推广数据失败，使用本地数据')
+      }
       
-      const convertedBindings = [
-        { id: '4', nickname: '小李', bindingDate: '2025/12/10', commission: '8.91', orderAmount: '9.90', status: 'converted' }
-      ]
+      // 使用真实数据或本地存储的数据
+      const storedBindings = wx.getStorageSync('referral_bindings') || []
+      const storedEarnings = wx.getStorageSync('referral_earnings') || { total: 0, pending: 0 }
       
-      const expiredBindings = [
-        { id: '5', nickname: '小王', bindingDate: '2025/11/15', status: 'expired' }
-      ]
+      let activeBindings, convertedBindings, expiredBindings
+      
+      if (realData) {
+        activeBindings = realData.activeBindings || []
+        convertedBindings = realData.convertedBindings || []
+        expiredBindings = realData.expiredBindings || []
+      } else if (storedBindings.length > 0) {
+        // 使用本地存储的数据
+        activeBindings = storedBindings.filter(b => b.status === 'active')
+        convertedBindings = storedBindings.filter(b => b.status === 'converted')
+        expiredBindings = storedBindings.filter(b => b.status === 'expired')
+      } else {
+        // 默认空数据
+        activeBindings = []
+        convertedBindings = []
+        expiredBindings = []
+      }
       
       const expiringCount = activeBindings.filter(b => b.daysRemaining <= 7).length
       
       this.setData({
         isLoggedIn: true,
         userInfo,
-        earnings: (userInfo.earnings || 0).toFixed(2),
-        pendingEarnings: (userInfo.pendingEarnings || 0).toFixed(2),
-        referralCount: userInfo.referralCount || 0,
+        earnings: realData?.earnings || storedEarnings.total || 0,
+        pendingEarnings: realData?.pendingEarnings || storedEarnings.pending || 0,
+        referralCount: realData?.referralCount || activeBindings.length + convertedBindings.length,
         referralCode,
         activeBindings,
         convertedBindings,
@@ -117,6 +138,23 @@ Page({
     wx.showToast({ title: '海报功能开发中', icon: 'none' })
   },
 
+  // 分享到朋友圈
+  shareToMoments() {
+    const shareText = `🔥 发现一本超棒的创业实战书《一场Soul的创业实验》！\n\n💡 62个真实商业案例，从私域运营到资源整合，干货满满！\n\n🎁 通过我的链接购买立享5%优惠，我是 ${this.data.userInfo?.nickname || '卡若'} 推荐！\n\n👉 ${this.data.referralCode} 是我的专属邀请码\n\n#创业实验 #私域运营 #商业案例`
+    
+    wx.setClipboardData({
+      data: shareText,
+      success: () => {
+        wx.showModal({
+          title: '文案已复制',
+          content: '请打开微信朋友圈，粘贴分享文案即可',
+          showCancel: false,
+          confirmText: '知道了'
+        })
+      }
+    })
+  },
+
   // 提现
   handleWithdraw() {
     const earnings = parseFloat(this.data.earnings)

miniprogram/pages/referral/referral.wxml

@@ -172,14 +172,14 @@
         <text class="share-arrow">→</text>
       </view>
       
-      <button class="share-item share-btn" open-type="share">
+      <view class="share-item" bindtap="shareToMoments">
         <view class="share-icon wechat">💬</view>
         <view class="share-info">
           <text class="share-title">分享到朋友圈</text>
           <text class="share-desc">复制文案发朋友圈</text>
         </view>
         <text class="share-arrow">→</text>
-      </button>
+      </view>
       
       <view class="share-item" bindtap="copyLink">
         <view class="share-icon link">🔗</view>

miniprogram/pages/settings/settings.wxss

@@ -49,16 +49,17 @@
 /* 退出登录按钮 */
 .logout-btn { margin-top: 48rpx; padding: 28rpx; background: rgba(244,67,54,0.1); border: 2rpx solid rgba(244,67,54,0.3); border-radius: 24rpx; text-align: center; font-size: 28rpx; color: #F44336; }
 
-/* 弹窗 */
-.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
-.modal-content { width: 600rpx; background: #1c1c1e; border-radius: 32rpx; overflow: hidden; }
-.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.1); }
-.modal-title { font-size: 32rpx; font-weight: 600; color: #fff; }
-.modal-close { width: 56rpx; height: 56rpx; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: rgba(255,255,255,0.6); }
-.modal-body { padding: 32rpx; }
-.input-wrapper { margin-bottom: 24rpx; }
-.form-input { width: 100%; padding: 24rpx; background: rgba(0,0,0,0.3); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 20rpx; font-size: 28rpx; color: #fff; box-sizing: border-box; }
-.input-placeholder { color: rgba(255,255,255,0.3); }
-.bind-tip { font-size: 24rpx; color: rgba(255,255,255,0.5); margin-bottom: 32rpx; display: block; }
-.btn-primary { padding: 24rpx; background: #00CED1; color: #000; font-size: 28rpx; font-weight: 600; text-align: center; border-radius: 24rpx; }
-.btn-primary.btn-disabled { background: rgba(0,206,209,0.3); color: rgba(0,0,0,0.5); }
+/* 弹窗 - 简洁大气风格 */
+.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(20rpx); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 48rpx; }
+.modal-content { width: 100%; max-width: 640rpx; background: linear-gradient(180deg, #1c1c1e 0%, #0d0d0d 100%); border-radius: 40rpx; overflow: hidden; border: 2rpx solid rgba(255,255,255,0.08); }
+.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 40rpx 40rpx 24rpx; }
+.modal-title { font-size: 36rpx; font-weight: 700; color: #fff; }
+.modal-close { width: 64rpx; height: 64rpx; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; color: rgba(255,255,255,0.5); }
+.modal-body { padding: 16rpx 40rpx 48rpx; }
+.input-wrapper { margin-bottom: 32rpx; }
+.form-input { width: 100%; padding: 32rpx 24rpx; background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; font-size: 32rpx; color: #fff; box-sizing: border-box; transition: all 0.2s; }
+.form-input:focus { border-color: rgba(0,206,209,0.5); background: rgba(0,206,209,0.05); }
+.input-placeholder { color: rgba(255,255,255,0.25); }
+.bind-tip { font-size: 24rpx; color: rgba(255,255,255,0.4); margin-bottom: 40rpx; display: block; line-height: 1.6; text-align: center; }
+.btn-primary { padding: 32rpx; background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); color: #000; font-size: 32rpx; font-weight: 600; text-align: center; border-radius: 28rpx; }
+.btn-primary.btn-disabled { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); }