yichael
/
AnimationManager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>充值与货币</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: #f9fafb;
      min-height: 100vh;
    }

    .page-content {
      padding: 24px;
    }

    .section {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .section-title {
      font-size: 15px;
      font-weight: 600;
      color: #111;
      margin-bottom: 16px;
    }

    .package-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .package-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 16px;
      background: #fafafa;
      border-radius: 8px;
      border: 1px solid #eee;
    }

    .package-index {
      width: 26px;
      height: 26px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0;
    }

    .package-fields {
      display: flex;
      align-items: center;
      gap: 20px;
      flex: 1;
    }

    .package-field {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .package-field label {
      font-size: 12px;
      color: #666;
      white-space: nowrap;
    }

    .package-field input {
      width: 80px;
      padding: 6px 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s;
    }

    .package-field input:focus {
      border-color: #667eea;
    }

    .package-field .unit {
      font-size: 12px;
      color: #999;
    }

    .package-total {
      padding: 6px 12px;
      background: #f0fdf4;
      border-radius: 5px;
      font-size: 13px;
      color: #16a34a;
      font-weight: 500;
      white-space: nowrap;
    }

    .package-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .btn-confirm {
      display: none;
      width: 28px;
      height: 28px;
      background: #10b981;
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      font-size: 14px;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .btn-confirm:hover {
      background: #059669;
      transform: scale(1.1);
    }

    .btn-confirm.show {
      display: flex;
    }

    .btn-remove {
      width: 28px;
      height: 28px;
      background: #fee2e2;
      color: #ef4444;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .btn-remove:hover {
      background: #fecaca;
    }

    .btn-add {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #86efac;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
      margin-top: 12px;
    }

    .btn-add:hover {
      background: #dcfce7;
    }

    .preview-section {
      margin-top: 24px;
      padding: 24px;
      background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
      border-radius: 16px;
      border: 1px solid rgba(102, 126, 234, 0.1);
    }

    .preview-title {
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .preview-title::before {
      content: '';
      width: 4px;
      height: 16px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 2px;
    }

    .preview-packages {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .preview-card {
      padding: 28px 24px;
      background: linear-gradient(145deg, #667eea 0%, #764ba2 50%, #9333ea 100%);
      color: #fff;
      border-radius: 20px;
      text-align: center;
      box-shadow: 
        0 10px 30px rgba(102, 126, 234, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 140px;
    }

    .preview-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .preview-card:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: 
        0 20px 40px rgba(102, 126, 234, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .preview-card:hover::before {
      opacity: 1;
    }

    .preview-card .points {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.5px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      margin-bottom: 16px;
    }

    .preview-card .card-bottom {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
    }

    .preview-card .bonus {
      font-size: 12px;
      opacity: 0.95;
      padding: 6px 14px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      white-space: nowrap;
    }

    .preview-card .price {
      font-size: 15px;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.25);
      padding: 6px 16px;
      border-radius: 20px;
      backdrop-filter: blur(4px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
      white-space: nowrap;
    }

    .msg {
      padding: 10px 14px;
      border-radius: 6px;
      margin-bottom: 12px;
      font-size: 13px;
      display: none;
    }

    .msg.success {
      background: #f0fdf4;
      color: #16a34a;
    }

    .msg.error {
      background: #fef2f2;
      color: #ef4444;
    }
  </style>
</head>
<body>
  <div class="page-content">
    <div id="msgBox" class="msg"></div>

    <div class="section">
      <h3 class="section-title">充值套餐配置</h3>
      <div class="package-list" id="packageList"></div>
      <button class="btn-add" id="addBtn">+ 添加套餐</button>

      <div class="preview-section">
        <div class="preview-title">客户端预览</div>
        <div class="preview-packages" id="preview"></div>
      </div>
    </div>
  </div>

  <script src="../../js/currency/currency.js"></script>
  <script>
    (function() {
      let apiBaseUrl = 'http://localhost:3000';
      try {
        if (window.parent && window.parent.getApiBaseUrl) {
          apiBaseUrl = window.parent.getApiBaseUrl();
        }
      } catch (e) {}
      
      window.currencyManager = new CurrencyManager({ apiBaseUrl });
    })();
  </script>
</body>
</html>