帮助与反�?/title> <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="mobile-optimizations.css?v=1.0.11"> <style> * { -webkit-tap-highlight-color: transparent; } body { background: linear-gradient(180deg, #f5f7fa 0%, #e5e7eb 100%); font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; padding-bottom: env(safe-area-inset-bottom); min-height: 100vh; } .top-bar { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); padding-top: calc(env(safe-area-inset-top) + 8px); padding-bottom: 12px; box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1); } .nav-button { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); color: white; border: none; cursor: pointer; transition: all 0.2s ease; font-size: 16px; } .nav-button:active { transform: scale(0.95); background-color: rgba(255, 255, 255, 0.35); } /* 标签页样式优�?*/ .tabs-container { background: white; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .tab-item { padding: 12px 14px; text-align: center; position: relative; transition: all 0.2s ease; cursor: pointer; flex: 1; font-size: 14px; color: #6b7280; } .tab-item:active { background-color: #f9fafb; } .tab-active { color: #4f46e5; font-weight: 700; } .tab-indicator { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #4f46e5, #6366f1); border-radius: 3px 3px 0 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* FAQ 独立卡片样式优化 */ .faq-card { background: white; border-radius: 14px; margin: 0 12px 10px 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: all 0.2s ease; } .faq-card:active { transform: scale(0.98); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .faq-header { padding: 14px 12px; display: flex; align-items: flex-start; cursor: pointer; min-height: 56px; } .faq-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 10px; flex-shrink: 0; transition: transform 0.2s ease; } .faq-header.open .faq-icon { transform: scale(1.1); } .faq-text { flex: 1; display: flex; align-items: center; justify-content: space-between; } .faq-question { font-weight: 600; font-size: 15px; color: #1f2937; line-height: 1.4; flex: 1; } .faq-arrow { margin-left: 10px; color: #9ca3af; transition: all 0.2s ease; font-size: 13px; } .faq-header.open .faq-arrow { transform: rotate(180deg); color: #4f46e5; } .faq-content { padding: 0 16px; max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .faq-content.open { padding: 0 16px 18px 72px; max-height: 500px; } .faq-answer { color: #6b7280; font-size: 14px; line-height: 1.6; background: #f9fafb; padding: 12px; border-radius: 8px; border-left: 3px solid #e5e7eb; } /* 反馈卡片优化 */ .feedback-card { border-radius: 20px; background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); box-shadow: 0 12px 24px -4px rgba(79, 70, 229, 0.3); position: relative; overflow: hidden; transition: transform 0.3s ease; } .feedback-card:active { transform: scale(0.98); } .feedback-card::before { content: ''; position: absolute; width: 180px; height: 180px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; top: -90px; right: -90px; } .feedback-card::after { content: ''; position: absolute; width: 120px; height: 120px; background-color: rgba(255, 255, 255, 0.08); border-radius: 50%; bottom: -60px; left: -60px; } .feedback-button { border-radius: 28px; background-color: white; color: #4f46e5; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); min-height: 52px; transition: all 0.2s ease; font-size: 16px; } .feedback-button:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* 反馈类型卡片式选择 */ .feedback-type-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; } .feedback-type-card { background: white; border: 2px solid #e5e7eb; border-radius: 14px; padding: 12px; display: flex; align-items: center; cursor: pointer; transition: all 0.2s ease; min-height: 60px; } .feedback-type-card:active { transform: scale(0.98); } .feedback-type-card.selected { border-color: #4f46e5; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15); } .feedback-type-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; flex-shrink: 0; transition: transform 0.2s ease; } .feedback-type-card.selected .feedback-type-icon { transform: scale(1.1); } .feedback-type-info { flex: 1; } .feedback-type-title { font-weight: 600; font-size: 15px; color: #1f2937; margin-bottom: 3px; } .feedback-type-desc { font-size: 12px; color: #6b7280; } .feedback-type-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d1d5db; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .feedback-type-card.selected .feedback-type-check { border-color: #4f46e5; background: #4f46e5; } .feedback-type-check i { font-size: 12px; color: white; opacity: 0; transition: opacity 0.3s ease; } .feedback-type-card.selected .feedback-type-check i { opacity: 1; } /* 表单优化 */ .form-label { font-weight: 600; font-size: 15px; color: #374151; margin-bottom: 10px; display: block; } .form-textarea, .form-input { width: 100%; border: 2px solid #e5e7eb; border-radius: 12px; padding: 14px; font-size: 15px; transition: all 0.3s ease; font-family: inherit; } .form-textarea:focus, .form-input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } .form-textarea { min-height: 140px; resize: vertical; line-height: 1.6; } /* 联系方式卡片优化 */ .contact-card { background: white; border-radius: 16px; margin: 0 16px 12px 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .contact-item { display: flex; align-items: center; padding: 18px 16px; border-bottom: 1px solid #f3f4f6; transition: background 0.2s ease; min-height: 76px; } .contact-item:last-child { border-bottom: none; } .contact-item:active { background: #f9fafb; } .contact-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; transition: transform 0.3s ease; } .contact-item:active .contact-icon { transform: scale(1.1); } .phone-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #0284c7; } .email-icon { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; } .wechat-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; } .contact-info { margin-left: 14px; flex: 1; } .contact-title { font-weight: 600; font-size: 16px; color: #1f2937; margin-bottom: 4px; } .contact-value { font-size: 14px; color: #6b7280; } .contact-button { padding: 8px 18px; border: 2px solid #4f46e5; color: #4f46e5; background: white; border-radius: 20px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .contact-button:active { transform: scale(0.95); background: #4f46e5; color: white; } /* 工作时间卡片优化 */ .work-time-card { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius: 14px; margin: 0 12px 14px 12px; padding: 14px; box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15); } .work-time-title { font-weight: 600; font-size: 15px; color: #92400e; margin-bottom: 10px; display: flex; align-items: center; } .work-time-title i { margin-right: 6px; font-size: 16px; } .work-time-info { color: #78350f; font-size: 13px; line-height: 1.6; } .work-time-note { color: #92400e; font-size: 11px; margin-top: 6px; opacity: 0.8; } /* 内容区域间距优化 */ .content-section { padding-bottom: 16px; } /* 标题优化 */ .section-title { font-size: 12px; color: #9ca3af; font-weight: 500; padding: 12px 12px 6px 12px; text-transform: uppercase; letter-spacing: 0.5px; } /* 手机端优�?*/ @media (max-width: 480px) { .top-bar { padding-bottom: 10px; } .nav-button { width: 36px; height: 36px; font-size: 15px; } .tab-item { padding: 10px 12px; font-size: 13px; } .faq-card { margin: 0 10px 8px 10px; border-radius: 12px; } .faq-header { padding: 12px 10px; min-height: 52px; } .faq-icon { width: 36px; height: 36px; font-size: 16px; margin-right: 8px; } .faq-question { font-size: 14px; } .faq-arrow { font-size: 12px; margin-left: 8px; } .feedback-type-grid { gap: 10px; margin-bottom: 16px; } .feedback-type-card { padding: 10px; min-height: 56px; border-radius: 12px; } .feedback-type-icon { width: 36px; height: 36px; font-size: 18px; margin-right: 10px; } .feedback-type-title { font-size: 14px; margin-bottom: 2px; } .feedback-type-desc { font-size: 11px; } .work-time-card { margin: 0 10px 12px 10px; padding: 12px; border-radius: 12px; } .work-time-title { font-size: 14px; margin-bottom: 8px; } .work-time-title i { font-size: 15px; } .work-time-info { font-size: 12px; } .work-time-note { font-size: 10px; } .section-title { font-size: 11px; padding: 10px 10px 5px 10px; } } </style> </head> <body class="page-transition">  <div class="toast-container"> <div class="toast-message" id="toastMessage"></div> </div>  <div class="loading-container" id="loadingIndicator"> <div class="loading-spinner"></div> </div>  <div class="top-bar text-white p-4"> <div class="flex items-center justify-between"> <div class="flex items-center"> <button onclick="history.back()" class="nav-button mr-3" role="button"> <i class="fas fa-arrow-left"></i> </button> <div class="flex items-center"> <span class="text-lg font-medium">帮助与反�?/span> </div> </div> </div> </div>  <div class="tabs-container"> <div class="flex" role="tablist" style="position: relative;"> <div class="tab-item tab-active" role="tab" data-index="0"> <span>常见问题</span> </div> <div class="tab-item" role="tab" data-index="1"> <span>意见反馈</span> </div> <div class="tab-item" role="tab" data-index="2"> <span>联系我们</span> </div> <div class="tab-indicator" id="tabIndicator"></div> </div> </div>  <div id="faqSection" class="content-section"> <div class="section-title">热门问题</div>  <div class="faq-card"> <div class="faq-header" role="button"> <div class="faq-icon" style="background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #0284c7;"> 💼 </div> <div class="faq-text"> <div class="faq-question">如何获取推广任务�?/div> <i class="fas fa-chevron-down faq-arrow"></i> </div> </div> <div class="faq-content"> <div class="faq-answer"> 您可以在首页找到各种推广任务，点击任务卡片即可查看详情并领取任务。领取任务后，按照任务要求完成相应操作，提交后等待审核即可获得奖励�? </div> </div> </div>  <div class="faq-card"> <div class="faq-header" role="button"> <div class="faq-icon" style="background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a;"> 💰 </div> <div class="faq-text"> <div class="faq-question">任务收益什么时候到账？</div> <i class="fas fa-chevron-down faq-arrow"></i> </div> </div> <div class="faq-content"> <div class="faq-answer"> 任务收益将在审核通过后自动到账，一般审核时间为1-2个工作日。您可以�?收益记录"页面查看详细的收益情况�? </div> </div> </div>  <div class="faq-card"> <div class="faq-header" role="button"> <div class="faq-icon" style="background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706;"> 💸 </div> <div class="faq-text"> <div class="faq-question">如何提现�?/div> <i class="fas fa-chevron-down faq-arrow"></i> </div> </div> <div class="faq-content"> <div class="faq-answer"> �?我的钱包"页面点击"提现"按钮，按照提示输入提现金额和收款账户信息即可。提现金额需满足最�?0元的要求，提现将�?-3个工作日内到账�? </div> </div> </div>  <div class="faq-card"> <div class="faq-header" role="button"> <div class="faq-icon" style="background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4f46e5;"> 👥 </div> <div class="faq-text"> <div class="faq-question">如何邀请好友加入团队？</div> <i class="fas fa-chevron-down faq-arrow"></i> </div> </div> <div class="faq-content"> <div class="faq-answer"> �?我的团队"页面找到您的专属邀请码，将邀请码分享给好友，好友注册时输入您的邀请码即可成为您的团队成员。您可以获得团队成员完成任务收益的一定比例作为奖励�? </div> </div> </div>  <div class="faq-card"> <div class="faq-header" role="button"> <div class="faq-icon" style="background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626;"> �? </div> <div class="faq-text"> <div class="faq-question">任务被拒绝怎么办？</div> <i class="fas fa-chevron-down faq-arrow"></i> </div> </div> <div class="faq-content"> <div class="faq-answer"> 如果您的任务被拒绝，可以�?我的任务"页面查看拒绝原因，根据原因修改后重新提交。如有疑问，可以通过"意见反馈"�?联系我们"与客服沟通解决�? </div> </div> </div> </div>  <div id="feedbackSection" class="hidden content-section"> <div class="mx-4 mb-6"> <div class="feedback-card p-6 text-white"> <div class="text-xl font-bold mb-2 relative z-10">💬 提交您的宝贵意见</div> <div class="text-sm opacity-90 mb-5 relative z-10">我们非常重视您的反馈，帮助我们不断改进产品体�?/div> <button id="submitFeedbackBtn" class="feedback-button w-full px-6 py-3" role="button"> <i class="fas fa-paper-plane mr-2"></i>立即提交反馈 </button> </div> </div> <div class="section-title">反馈类型</div>  <div class="mx-4 mb-5"> <div class="feedback-type-grid"> <div class="feedback-type-card" data-type="bug"> <div class="feedback-type-icon" style="background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626;"> 🐛 </div> <div class="feedback-type-info"> <div class="feedback-type-title">功能异常</div> <div class="feedback-type-desc">报告系统bug或功能故�?/div> </div> <div class="feedback-type-check"> <i class="fas fa-check"></i> </div> </div> <div class="feedback-type-card" data-type="suggestion"> <div class="feedback-type-icon" style="background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #0284c7;"> 💡 </div> <div class="feedback-type-info"> <div class="feedback-type-title">优化建议</div> <div class="feedback-type-desc">提出产品改进意见</div> </div> <div class="feedback-type-check"> <i class="fas fa-check"></i> </div> </div> <div class="feedback-type-card" data-type="other"> <div class="feedback-type-icon" style="background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706;"> 📝 </div> <div class="feedback-type-info"> <div class="feedback-type-title">其他问题</div> <div class="feedback-type-desc">咨询或其他反�?/div> </div> <div class="feedback-type-check"> <i class="fas fa-check"></i> </div> </div> </div> </div>  <div class="bg-white rounded-2xl mx-4 mb-6 p-5 shadow-sm"> <div class="mb-5"> <label class="form-label">问题描述 <span style="color: #ef4444;">*</span></label> <textarea id="feedbackContent" class="form-textarea" placeholder="请详细描述您遇到的问题或建议，我们会认真对待每一条反�?.."></textarea> </div> <div> <label class="form-label">联系方式 <span style="color: #9ca3af; font-size: 13px; font-weight: 400;">(选填)</span></label> <input id="feedbackContact" type="text" class="form-input" placeholder="手机号或邮箱，便于我们回复您"> </div> </div> </div>  <div id="contactSection" class="hidden content-section"> <div class="section-title">联系方式</div> <div class="contact-card">  <div class="contact-item"> <div class="contact-icon phone-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="contact-info"> <div class="contact-title">客服电话</div> <div class="contact-value">19859254734</div> </div> <a href="tel:19859254734" class="contact-button" role="button"> <i class="fas fa-phone mr-1"></i>拨打 </a> </div>  <div class="contact-item"> <div class="contact-icon email-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-info"> <div class="contact-title">客服邮箱</div> <div class="contact-value">zwq200394@qq.com</div> </div> <a href="mailto:zwq200394@qq.com" class="contact-button" role="button"> <i class="fas fa-paper-plane mr-1"></i>发�? </a> </div>  <div class="contact-item"> <div class="contact-icon wechat-icon"> <i class="fab fa-weixin"></i> </div> <div class="contact-info"> <div class="contact-title">微信公众�?/div> <div class="contact-value">文创�?/div> </div> <button class="contact-button" onclick="copyWechatId()" role="button"> <i class="fas fa-copy mr-1"></i>复制 </button> </div> </div>  <div class="work-time-card"> <div class="work-time-title"> <i class="fas fa-clock"></i> 营业时间 </div> <div class="work-time-info"> <div>📅 周一至周�? 09:00 - 18:00</div> <div>📅 周六至周�? 10:00 - 16:00</div> </div> <div class="work-time-note"> 💡 节假日可能调整，请以实际公告为准 </div> </div> </div> <script src="mobile-interactions.js?v=1.0.11"></script> <script> // 页面加载时初始化 document.addEventListener('DOMContentLoaded', function() { const loadingIndicator = document.getElementById('loadingIndicator'); if (loadingIndicator) { loadingIndicator.style.display = 'none'; } // 初始化标签指示器位置 updateTabIndicator(0); }); // FAQ折叠效果（优化版�? const faqHeaders = document.querySelectorAll('.faq-header'); faqHeaders.forEach(header => { header.addEventListener('click', function() { const content = this.nextElementSibling; const isOpen = content.classList.contains('open'); // 切换展开/收起状�? this.classList.toggle('open'); content.classList.toggle('open'); // 触觉反馈 if (window.navigator && window.navigator.vibrate) { window.navigator.vibrate(10); } }); }); // 标签切换功能（优化版 + 滑动指示器） const tabs = document.querySelectorAll('.tab-item'); const sections = [ document.getElementById('faqSection'), document.getElementById('feedbackSection'), document.getElementById('contactSection') ]; function updateTabIndicator(index) { const indicator = document.getElementById('tabIndicator'); const tab = tabs[index]; if (indicator && tab) { const tabWidth = tab.offsetWidth; indicator.style.width = tabWidth + 'px'; indicator.style.left = (tab.offsetLeft) + 'px'; } } tabs.forEach((tab, index) => { tab.addEventListener('click', function() { // 移除所有标签的活动状�? tabs.forEach(t => t.classList.remove('tab-active')); // 为当前点击的标签添加活动状�? this.classList.add('tab-active'); // 更新指示器位�? updateTabIndicator(index); // 隐藏所有内容区�? sections.forEach(section => section.classList.add('hidden')); // 显示对应的内容区域（带动画） setTimeout(() => { sections[index].classList.remove('hidden'); }, 100); // 触觉反馈 if (window.navigator && window.navigator.vibrate) { window.navigator.vibrate(10); } }); }); // 反馈类型卡片选择 let selectedFeedbackType = null; const feedbackTypeCards = document.querySelectorAll('.feedback-type-card'); feedbackTypeCards.forEach(card => { card.addEventListener('click', function() { // 移除所有选中状�? feedbackTypeCards.forEach(c => c.classList.remove('selected')); // 添加当前选中状�? this.classList.add('selected'); selectedFeedbackType = this.dataset.type; // 触觉反馈 if (window.navigator && window.navigator.vibrate) { window.navigator.vibrate(15); } }); }); // 提交反馈按钮点击事件（优化版�? document.getElementById('submitFeedbackBtn').addEventListener('click', function() { const content = document.getElementById('feedbackContent')?.value.trim(); if (!selectedFeedbackType) { window.showToast && window.showToast('�?请选择反馈类型'); return; } if (!content || content.length < 10) { window.showToast && window.showToast('�?请详细描述问题（至少10个字�?); return; } // 显示加载指示�? window.showLoading && window.showLoading(); // 模拟提交 setTimeout(() => { window.hideLoading && window.hideLoading(); window.showToast && window.showToast('�?反馈提交成功，感谢您的宝贵意见！'); // 清空表单 document.getElementById('feedbackContent').value = ''; document.getElementById('feedbackContact').value = ''; feedbackTypeCards.forEach(c => c.classList.remove('selected')); selectedFeedbackType = null; }, 1200); }); // 复制微信公众号ID function copyWechatId() { const wechatId = '文创�?; // 尝试使用现代API if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(wechatId).then(() => { window.showToast && window.showToast('�?已复制：' + wechatId); }).catch(() => { fallbackCopy(wechatId); }); } else { fallbackCopy(wechatId); } // 触觉反馈 if (window.navigator && window.navigator.vibrate) { window.navigator.vibrate(20); } } function fallbackCopy(text) { const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); window.showToast && window.showToast('�?已复制：' + text); } catch (err) { window.showToast && window.showToast('�?复制失败，请手动复制'); } document.body.removeChild(textarea); } // 监听窗口大小变化，更新指示器位置 window.addEventListener('resize', function() { const activeIndex = Array.from(tabs).findIndex(tab => tab.classList.contains('tab-active')); if (activeIndex !== -1) { updateTabIndicator(activeIndex); } }); </script> </body> </html>