yichael
/
AnimationManager


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>充值</title>
  <link rel="stylesheet" href="../../css/recharge-view/recharge-view.css">
</head>
<body>
  <div class="recharge-overlay" id="rechargeOverlay">
    <div class="recharge-container" id="rechargeContainer">
      <div class="recharge-header">
        <h2 class="recharge-title">充值Ani币</h2>
        <button class="recharge-close" id="rechargeClose">×</button>
      </div>
      
      <div class="recharge-content">
        <div class="recharge-packages">
          <div class="recharge-package" data-package="100" data-price="5" data-points="120">
            <div class="package-header">
              <div class="package-points">100 Ani币</div>
              <div class="package-bonus">送 20 Ani币</div>
              <div class="package-price">¥5</div>
            </div>
            <div class="package-total">共 120 Ani币</div>
          </div>
          
          <div class="recharge-package" data-package="1000" data-price="50" data-points="1200">
            <div class="package-header">
              <div class="package-points">1000 Ani币</div>
              <div class="package-bonus">送 200 Ani币</div>
              <div class="package-price">¥50</div>
            </div>
            <div class="package-total">共 1200 Ani币</div>
          </div>
          
          <div class="recharge-package" data-package="10000" data-price="500" data-points="10800">
            <div class="package-header">
              <div class="package-points">10000 Ani币</div>
              <div class="package-bonus">送 800 Ani币</div>
              <div class="package-price">¥500</div>
            </div>
            <div class="package-total">共 10800 Ani币</div>
          </div>
        </div>
        
        <div class="recharge-info" id="rechargeInfo" style="display: none;">
          <div class="selected-package-info">
            <div class="info-item">
              <span class="info-label">充值Ani币：</span>
              <span class="info-value" id="selectedPoints">0</span>
            </div>
            <div class="info-item">
              <span class="info-label">支付金额：</span>
              <span class="info-value" id="selectedPrice">¥0</span>
            </div>
          </div>
          
          <div class="qr-code-container">
            <div class="qr-code-placeholder" id="qrCodePlaceholder">
              <svg width="200" height="200" viewBox="0 0 200 200" fill="none">
                <rect width="200" height="200" fill="#f5f5f5"/>
                <text x="100" y="100" text-anchor="middle" fill="#999" font-size="14">微信二维码</text>
              </svg>
            </div>
            <p class="qr-code-hint">请使用微信扫码支付</p>
            <p class="qr-code-tip">（正式版本：扫描二维码成功后自动完成支付）</p>
            <button class="test-buy-btn" id="testBuyBtn">测试购买</button>
            <p class="test-buy-tip">（测试用按钮，正式版本将移除）</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="../../js/recharge-view/recharge-view.js"></script>
</body>
</html>