{"product_id":"ai-style-generator-enterprise","title":"🎨 AI Style Generator 企业版 | 20+ AI 风格无限生成 | GCityPartners","description":"\u003cstyle\u003e\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter+Tight:wght@400;600;700;800\u0026family=Plus+Jakarta+Sans:wght@400;600;700\u0026display=swap');\n  \n  :root {\n    --cyan: #38bdf8;\n    --magenta: #d946ef;\n    --gold: #fbbf24;\n    --dark-bg: #0f172a;\n    --glass-bg: rgba(255,255,255,0.05);\n    --glass-hover: rgba(255,255,255,0.08);\n    --radius: 24px;\n    --blur: 20px;\n  }\n  \n  .ai-photo-booth-page {\n    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;\n    background: linear-gradient(180deg, #fff5e6 0%, #ffe4cc 100%);\n    color: #2d1810;\n    padding: 0;\n    margin: 0;\n    min-height: 100vh;\n  }\n  \n  \/* Hero Section *\/\n  .hero-section {\n    background: linear-gradient(135deg, #fff5e6 0%, #ffe4cc 50%, #ffd9b3 100%);\n    padding: clamp(40px, 8vw, 80px) 20px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  \n  .hero-section::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(circle at 30% 50%, rgba(251,191,36,0.2), transparent 50%),\n                radial-gradient(circle at 70% 50%, rgba(217,70,239,0.15), transparent 50%);\n    animation: pulse 8s ease-in-out infinite;\n  }\n  \n  @keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.6; }\n  }\n  \n  .hero-content {\n    position: relative;\n    z-index: 2;\n    max-width: 900px;\n    margin: 0 auto;\n  }\n  \n  .hero-title {\n    font-size: clamp(1.8rem, 5vw, 3rem);\n    font-weight: 800;\n    color: #2d1810;\n    margin-bottom: 16px;\n    line-height: 1.2;\n  }\n  \n  .hero-subtitle {\n    font-size: clamp(1rem, 3vw, 1.3rem);\n    color: #5d4037;\n    margin-bottom: 32px;\n    line-height: 1.6;\n  }\n  \n  \/* GFun Balance Display *\/\n  .gfun-balance-display {\n    background: rgba(255,255,255,0.9);\n    backdrop-filter: blur(20px);\n    border-radius: 24px;\n    padding: clamp(16px, 3vw, 24px) clamp(24px, 5vw, 40px);\n    display: inline-block;\n    margin-bottom: 32px;\n    border: 2px solid rgba(251,191,36,0.3);\n    box-shadow: 0 10px 30px rgba(251,191,36,0.2);\n  }\n  \n  .balance-label {\n    font-size: clamp(0.8rem, 2vw, 0.9rem);\n    color: #5d4037;\n    margin-bottom: 8px;\n    font-weight: 600;\n  }\n  \n  .balance-amount {\n    font-size: clamp(2rem, 5vw, 3.5rem);\n    font-weight: 800;\n    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n  \n  \/* Style Cards Grid *\/\n  .styles-section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: clamp(40px, 6vw, 60px) 20px;\n  }\n  \n  .section-title {\n    font-size: clamp(1.5rem, 4vw, 2rem);\n    font-weight: 800;\n    color: #2d1810;\n    margin-bottom: clamp(24px, 4vw, 32px);\n    text-align: center;\n  }\n  \n  .styles-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));\n    gap: clamp(16px, 3vw, 24px);\n    margin-bottom: 40px;\n  }\n  \n  \/* Style Card - 参考截图设计 *\/\n  .style-card {\n    background: rgba(255,255,255,0.95);\n    border-radius: 20px;\n    overflow: hidden;\n    cursor: pointer;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    position: relative;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    border: 2px solid transparent;\n  }\n  \n  .style-card:hover {\n    transform: translateY(-8px) scale(1.02);\n    box-shadow: 0 20px 40px rgba(251,191,36,0.3);\n    border-color: rgba(251,191,36,0.5);\n  }\n  \n  .style-card:active {\n    transform: translateY(-4px) scale(0.98);\n  }\n  \n  \/* 热门标签 - 参考截图右上角 *\/\n  .hot-badge {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    background: linear-gradient(135deg, #ef4444, #dc2626);\n    color: white;\n    padding: 6px 12px;\n    border-radius: 12px;\n    font-size: 0.75rem;\n    font-weight: 700;\n    z-index: 10;\n    box-shadow: 0 4px 12px rgba(239,68,68,0.4);\n  }\n  \n  \/* 图片容器 *\/\n  .style-image-container {\n    width: 100%;\n    aspect-ratio: 3\/4;\n    overflow: hidden;\n    position: relative;\n    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);\n  }\n  \n  .style-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  \n  .style-card:hover .style-image {\n    transform: scale(1.1);\n  }\n  \n  \/* 卡片底部信息 *\/\n  .style-info {\n    padding: 16px;\n    background: white;\n  }\n  \n  .style-title {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: #2d1810;\n    margin-bottom: 8px;\n  }\n  \n  .style-description {\n    font-size: 0.9rem;\n    color: #5d4037;\n    margin-bottom: 12px;\n    line-height: 1.5;\n  }\n  \n  \/* 立即体验按钮 - 参考截图 *\/\n  .try-button {\n    width: 100%;\n    background: linear-gradient(135deg, #fbbf24, #f59e0b);\n    color: #2d1810;\n    padding: 12px 24px;\n    border-radius: 12px;\n    font-weight: 700;\n    font-size: 0.95rem;\n    border: none;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    box-shadow: 0 4px 12px rgba(251,191,36,0.3);\n  }\n  \n  .try-button:hover {\n    background: linear-gradient(135deg, #f59e0b, #d97706);\n    transform: translateY(-2px);\n    box-shadow: 0 6px 16px rgba(251,191,36,0.4);\n  }\n  \n  .try-button:active {\n    transform: translateY(0);\n  }\n  \n  \/* GFun 价格标签 *\/\n  .gfun-price {\n    display: inline-block;\n    background: rgba(251,191,36,0.2);\n    color: #92400e;\n    padding: 4px 12px;\n    border-radius: 8px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    margin-top: 8px;\n  }\n  \n  \/* Loading 动画 *\/\n  .loading-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0,0,0,0.8);\n    display: none;\n    align-items: center;\n    justify-content: center;\n    z-index: 9999;\n    backdrop-filter: blur(10px);\n  }\n  \n  .loading-overlay.active {\n    display: flex;\n  }\n  \n  .loading-content {\n    text-align: center;\n    color: white;\n  }\n  \n  .spinner {\n    width: 60px;\n    height: 60px;\n    border: 4px solid rgba(255,255,255,0.2);\n    border-top-color: #fbbf24;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n    margin: 0 auto 20px;\n  }\n  \n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n  \n  \/* 响应式设计 *\/\n  @media (max-width: 768px) {\n    .styles-grid {\n      grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));\n      gap: 12px;\n    }\n    \n    .style-info {\n      padding: 12px;\n    }\n    \n    .style-title {\n      font-size: 0.95rem;\n    }\n    \n    .style-description {\n      font-size: 0.85rem;\n    }\n    \n    .try-button {\n      padding: 10px 16px;\n      font-size: 0.85rem;\n    }\n  }\n  \n  @media (max-width: 480px) {\n    .styles-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\u003c\/style\u003e\n\n\u003cdiv class=\"ai-photo-booth-page\"\u003e\n  \u003c!-- Hero Section --\u003e\n  \u003cdiv class=\"hero-section\"\u003e\n    \u003cdiv class=\"hero-content\"\u003e\n      \u003cdiv class=\"gfun-balance-display\"\u003e\n        \u003cdiv class=\"balance-label\"\u003e💎 您的 GFun 余额\u003c\/div\u003e\n        \u003cdiv class=\"balance-amount\" id=\"gfun-balance-display\"\u003e0 GFun\u003c\/div\u003e\n      \u003c\/div\u003e\n      \n      \u003ch1 class=\"hero-title\"\u003e🎨 AI照相馆\u003c\/h1\u003e\n      \u003cp class=\"hero-subtitle\"\u003e20+ 专业风格 × 即时生成 × 一键体验\u003c\/p\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n  \n  \u003c!-- Styles Grid Section --\u003e\n  \u003cdiv class=\"styles-section\"\u003e\n    \u003ch2 class=\"section-title\"\u003e🎭 看看出图AI神器\u003c\/h2\u003e\n    \u003cp style=\"text-align: center; color: #5d4037; margin-bottom: 32px; font-size: 1rem;\"\u003e分享有爱 · 详情可关注小红书@黄油相机\u003c\/p\u003e\n    \n    \u003cdiv class=\"styles-grid\" id=\"styles-grid\"\u003e\n      \u003c!-- 风格卡片将由 JavaScript 动态生成 --\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n  \n  \u003c!-- Loading Overlay --\u003e\n  \u003cdiv class=\"loading-overlay\" id=\"loading-overlay\"\u003e\n    \u003cdiv class=\"loading-content\"\u003e\n      \u003cdiv class=\"spinner\"\u003e\u003c\/div\u003e\n      \u003cp style=\"font-size: 1.2rem; font-weight: 600;\"\u003e正在生成您的专属风格...\u003c\/p\u003e\n      \u003cp style=\"font-size: 0.9rem; opacity: 0.8; margin-top: 8px;\"\u003e预计需要 2-5 秒\u003c\/p\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/\/ ========================================\n\/\/ 完整的 RWD + 事件处理系统\n\/\/ ========================================\n\n(function() {\n  'use strict';\n  \n  \/\/ ========================================\n  \/\/ 1. 配置常量\n  \/\/ ========================================\n  const CONFIG = {\n    API_ENDPOINT: 'https:\/\/api.glgrphk.com\/ai\/generate',\n    GFUN_API: 'https:\/\/api.glgrphk.com\/gfun\/balance',\n    CUSTOMER_ID: '{{ customer.id }}',\n    PRODUCT_ID: '15595138908241'\n  };\n  \n  \/\/ ========================================\n  \/\/ 2. 风格数据库（参考截图）\n  \/\/ ========================================\n  const STYLE_DATABASE = [\n    {\n      id: 'cotton-doll',\n      title: '棉花娃娃',\n      description: '可爱Q版风格，适合亲子照片',\n      image: 'https:\/\/cdn.shopify.com\/s\/files\/1\/0667\/5762\/3889\/files\/IMG-5030.png?v=1772508819',\n      gfunCost: 1,\n      isHot: true,\n      prompt: 'cute cotton doll style, soft pastel colors, kawaii aesthetic'\n    },\n    {\n      id: 'red-envelope',\n      title: '红包封面',\n      description: '新年喜庆风格，节日专用',\n      image: 'https:\/\/cdn.shopify.com\/s\/files\/1\/0667\/5762\/3889\/files\/red-envelope-style.png',\n      gfunCost: 1,\n      isHot: true,\n      prompt: 'chinese new year red envelope style, festive, gold accents'\n    },\n    {\n      id: 'lion-dance',\n      title: '醒狮头',\n      description: '传统文化风格，活力满满',\n      image: 'https:\/\/cdn.shopify.com\/s\/files\/1\/0667\/5762\/3889\/files\/lion-dance-style.png',\n      gfunCost: 1,\n      isHot: true,\n      prompt: 'chinese lion dance style, vibrant colors, traditional culture'\n    },\n    {\n      id: 'starry-cat',\n      title: '三屏烟花大片',\n      description: '浪漫星空风格，梦幻效果',\n      image: 'https:\/\/cdn.shopify.com\/s\/files\/1\/0667\/5762\/3889\/files\/starry-cat-style.png',\n      gfunCost: 2,\n      isHot: true,\n      prompt: 'starry night fireworks, dreamy atmosphere, triple screen'\n    },\n    {\n      id: 'new-year-photo',\n      title: '新春摄影棚',\n      description: '专业摄影风格，高质感',\n      image: 'https:\/\/cdn.shopify.com\/s\/files\/1\/0667\/5762\/3889\/files\/new-year-photo-style.png',\n      gfunCost: 2,\n      isHot: false,\n      prompt: 'professional studio photography, spring festival theme'\n    },\n    {\n      id: 'cartoon-border',\n      title: '漫画感相边',\n      description: '漫画风格边框，趣味十足',\n      image: 'https:\/\/cdn.shopify.com\/s\/files\/1\/0667\/5762\/3889\/files\/cartoon-border-style.png',\n      gfunCost: 1,\n      isHot: false,\n      prompt: 'comic book style border, playful and fun'\n    }\n  ];\n  \n  \/\/ ========================================\n  \/\/ 3. DOM 元素引用\n  \/\/ ========================================\n  const elements = {\n    stylesGrid: document.getElementById('styles-grid'),\n    balanceDisplay: document.getElementById('gfun-balance-display'),\n    loadingOverlay: document.getElementById('loading-overlay')\n  };\n  \n  \/\/ ========================================\n  \/\/ 4. GFun 余额管理\n  \/\/ ========================================\n  let currentBalance = 0;\n  \n  async function fetchGFunBalance() {\n    try {\n      const response = await fetch(`${CONFIG.GFUN_API}?customer_id=${CONFIG.CUSTOMER_ID}`);\n      const data = await response.json();\n      currentBalance = data.balance || 0;\n      updateBalanceDisplay();\n    } catch (error) {\n      console.error('Failed to fetch GFun balance:', error);\n      currentBalance = 0;\n      updateBalanceDisplay();\n    }\n  }\n  \n  function updateBalanceDisplay() {\n    if (elements.balanceDisplay) {\n      elements.balanceDisplay.textContent = `${currentBalance} GFun`;\n    }\n  }\n  \n  \/\/ ========================================\n  \/\/ 5. 渲染风格卡片\n  \/\/ ========================================\n  function renderStyleCards() {\n    if (!elements.stylesGrid) return;\n    \n    elements.stylesGrid.innerHTML = STYLE_DATABASE.map(style =\u003e `\n      \u003cdiv class=\"style-card\" data-style-id=\"${style.id}\" data-gfun-cost=\"${style.gfunCost}\"\u003e\n        ${style.isHot ? '\u003cdiv class=\"hot-badge\"\u003e热卖\u003c\/div\u003e' : ''}\n        \n        \u003cdiv class=\"style-image-container\"\u003e\n          \u003cimg src=\"${style.image}\" alt=\"${style.title}\" class=\"style-image\" loading=\"lazy\"\u003e\n        \u003c\/div\u003e\n        \n        \u003cdiv class=\"style-info\"\u003e\n          \u003ch3 class=\"style-title\"\u003e${style.title}\u003c\/h3\u003e\n          \u003cp class=\"style-description\"\u003e${style.description}\u003c\/p\u003e\n          \n          \u003cbutton class=\"try-button\" data-action=\"generate\"\u003e\n            ✨ 立即体验\n          \u003c\/button\u003e\n          \n          \u003cdiv class=\"gfun-price\"\u003e💎 ${style.gfunCost} GFun\u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    `).join('');\n    \n    attachCardEventListeners();\n  }\n  \n  \/\/ ========================================\n  \/\/ 6. 事件处理系统\n  \/\/ ========================================\n  function attachCardEventListeners() {\n    const cards = elements.stylesGrid.querySelectorAll('.style-card');\n    \n    cards.forEach(card =\u003e {\n      const button = card.querySelector('[data-action=\"generate\"]');\n      const styleId = card.dataset.styleId;\n      const gfunCost = parseInt(card.dataset.gfunCost);\n      \n      \/\/ 按钮点击事件\n      button.addEventListener('click', async (e) =\u003e {\n        e.stopPropagation();\n        await handleGenerateClick(styleId, gfunCost);\n      });\n      \n      \/\/ 卡片悬停效果（桌面）\n      if (window.innerWidth \u003e 768) {\n        card.addEventListener('mouseenter', () =\u003e {\n          card.style.zIndex = '10';\n        });\n        \n        card.addEventListener('mouseleave', () =\u003e {\n          card.style.zIndex = '1';\n        });\n      }\n      \n      \/\/ 触摸反馈（移动端）\n      card.addEventListener('touchstart', () =\u003e {\n        card.style.transform = 'scale(0.98)';\n      });\n      \n      card.addEventListener('touchend', () =\u003e {\n        card.style.transform = '';\n      });\n    });\n  }\n  \n  \/\/ ========================================\n  \/\/ 7. AI 生成处理\n  \/\/ ========================================\n  async function handleGenerateClick(styleId, gfunCost) {\n    \/\/ 检查余额\n    if (currentBalance \u003c gfunCost) {\n      alert(`❌ GFun 余额不足！\\n\\n当前余额：${currentBalance} GFun\\n需要：${gfunCost} GFun\\n\\n请先购买 GFun 积分`);\n      window.location.href=\"\/zh-hans\/products\/gfun-gift-card\";\n      return;\n    }\n    \n    \/\/ 显示 Loading\n    showLoading();\n    \n    try {\n      const style = STYLE_DATABASE.find(s =\u003e s.id === styleId);\n      \n      const response = await fetch(CONFIG.API_ENDPOINT, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application\/json'\n        },\n        body: JSON.stringify({\n          customer_id: CONFIG.CUSTOMER_ID,\n          style_id: styleId,\n          prompt: style.prompt,\n          gfun_cost: gfunCost\n        })\n      });\n      \n      const result = await response.json();\n      \n      if (result.success) {\n        \/\/ 更新余额\n        currentBalance -= gfunCost;\n        updateBalanceDisplay();\n        \n        \/\/ 显示结果\n        alert(`✅ 生成成功！\\n\\n已扣除 ${gfunCost} GFun\\n剩余余额：${currentBalance} GFun`);\n        \n        \/\/ 可选：打开生成结果页面\n        if (result.image_url) {\n          window.open(result.image_url, '_blank');\n        }\n      } else {\n        throw new Error(result.message || '生成失败');\n      }\n    } catch (error) {\n      console.error('Generation error:', error);\n      alert(`❌ 生成失败：${error.message}\\n\\n请稍后重试或联系客服`);\n    } finally {\n      hideLoading();\n    }\n  }\n  \n  \/\/ ========================================\n  \/\/ 8. Loading 控制\n  \/\/ ========================================\n  function showLoading() {\n    if (elements.loadingOverlay) {\n      elements.loadingOverlay.classList.add('active');\n      document.body.style.overflow = 'hidden';\n    }\n  }\n  \n  function hideLoading() {\n    if (elements.loadingOverlay) {\n      elements.loadingOverlay.classList.remove('active');\n      document.body.style.overflow = '';\n    }\n  }\n  \n  \/\/ ========================================\n  \/\/ 9. 响应式处理\n  \/\/ ========================================\n  let resizeTimer;\n  window.addEventListener('resize', () =\u003e {\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(() =\u003e {\n      \/\/ 重新附加事件监听器以适应新的屏幕尺寸\n      attachCardEventListeners();\n    }, 250);\n  });\n  \n  \/\/ ========================================\n  \/\/ 10. 初始化\n  \/\/ ========================================\n  function init() {\n    renderStyleCards();\n    fetchGFunBalance();\n    \n    \/\/ 每30秒更新一次余额\n    setInterval(fetchGFunBalance, 30000);\n  }\n  \n  \/\/ DOM 加载完成后执行\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n  \n})();\n\u003c\/script\u003e","brand":"GCityPartners","offers":[{"title":"Default Title","offer_id":58357566898257,"sku":"GFUN-ENTERPRISE-TEAM-001","price":8.0,"currency_code":"HKD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0667\/5762\/3889\/files\/image_ff94082d-aaec-4ceb-a421-36cb337a055f.png?v=1772509466","url":"https:\/\/littleg.group\/zh-hans\/products\/ai-style-generator-enterprise","provider":"LittleG","version":"1.0","type":"link"}