【04】完善页面优化内容-调整logo处和常见问题-下载调整-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下

<!-- 常见问题 -->
    <section id="faq" class="faq py-20 bg-gradient-to-br from-orange-light via-white to-orange-light">
      <div class="container">
        <!-- 标题区域 -->
        <div class="text-center mb-16">
          <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold mb-4 relative inline-block">
            <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-orange">常见问题</span>
            <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-primary to-orange rounded-full"></div>
          </h2>
          <p class="text-secondary max-w-2xl mx-auto text-lg">创作者最关心的问题，我们都为你准备了详细解答</p>
        </div>

        <!-- FAQ 容器 -->
        <div class="max-w-4xl mx-auto">
          <!-- FAQ 分类标签 -->
          <div class="flex flex-wrap justify-center gap-3 mb-10">
            <button 
              v-for="(category, idx) in categories" 
              :key="idx"
              @click="activeCategory = category"
              class="px-5 py-2 rounded-full text-sm font-medium transition-all duration-300"
              :class="activeCategory === category 
                ? 'bg-primary text-white shadow-md scale-105' 
                : 'bg-white text-gray-700 hover:bg-orange/10 border border-orange/20'"
            >
              {{ category }}
            </button>
          </div>

          <!-- FAQ 列表 -->
          <div class="grid grid-cols-1 gap-6">
            <div 
              v-for="(faq, index) in filteredFaqs" 
              :key="index" 
              class="group"
            >
              <!-- FAQ 卡片 -->
              <div class="bg-white rounded-xl shadow-sm border border-orange/10 overflow-hidden transition-all duration-400 group-hover:shadow-md">
                <!-- 问题按钮 -->
                <button 
                  class="w-full px-6 py-5 text-left font-medium flex justify-between items-center focus:outline-none"
                  @click="toggleFaq(index)"
                >
                  <!-- 问题编号 -->
                  <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-primary-light text-primary flex items-center justify-center font-bold mr-4 shrink-0">
                      {{ index + 1 }}
                    </div>
                    <!-- 问题文本 -->
                    <span class="text-lg font-medium text-gray-800 transition-colors duration-300 group-hover:text-primary">
                      {{ faq.question }}
                    </span>
                  </div>
                  <!-- 图标 -->
                  <div class="flex items-center space-x-2">
                    <span class="text-xs px-2 py-1 rounded-full" :class="faq.category === '入门' ? 'bg-blue-100 text-blue-600' : faq.category === '功能' ? 'bg-green-100 text-green-600' : faq.category === '变现' ? 'bg-purple-100 text-purple-600' : 'bg-yellow-100 text-yellow-600'">
                      {{ faq.category }}
                    </span>
                    <svg 
                      class="w-5 h-5 text-gray-400 transition-all duration-300 ease-in-out" 
                      :class="{ 'transform rotate-180 text-primary': activeFaq === index }"
                      fill="none" 
                      stroke="currentColor" 
                      viewBox="0 0 24 24"
                    >
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                  </div>
                </button>

                <!-- 答案内容 -->
                <transition name="faq-fade" mode="in-out">
                  <div v-if="activeFaq === index" class="px-6 pb-5 pt-0">
                    <div class="pl-12 border-l-2 border-primary-light py-4 animate-fadeIn">
                      <p class="text-gray-700 leading-relaxed mb-4">
                        {{ faq.answer }}
                      </p>
                      <!-- 额外提示 -->
                      <div v-if="faq.tip" class="bg-orange-light/50 p-3 rounded-lg text-sm text-gray-600 border-l-4 border-primary">
                        💡 <span class="font-medium">提示：</span>{{ faq.tip }}
                      </div>
                    </div>
                  </div>
                </transition>
              </div>
            </div>
          </div>

          <!-- 没有结果时的提示 -->
          <div v-if="filteredFaqs.length === 0" class="text-center py-16 bg-white rounded-xl shadow-sm border border-dashed border-gray-200">
            <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
            </svg>
            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无相关问题</h3>
            <p class="text-gray-500">请尝试选择其他分类或联系我们获取帮助</p>
          </div>

          <!-- 底部CTA -->
          <div class="mt-12 text-center">
            <p class="text-gray-600 mb-6">还有其他问题？</p>
            <router-link to="/contact" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300 transform hover:scale-105">
              联系我们的支持团队
              <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </router-link>
          </div>
        </div>
      </div>
    </section>

<script setup lang="ts">
import { ref, computed } from 'vue';

const activeFaq = ref(-1);
const activeCategory = ref('全部');

const toggleFaq = (index: number) => {
  activeFaq.value = activeFaq.value === index ? -1 : index;
};

const categories = ['全部', '入门', '功能', '变现', '社区'];

const faqs = [
  {
    question: '小圈子是什么？',
    answer: '小圈子是专为内容创作者设计的私域流量变现平台。我们帮助创作者建立专属社区，通过提供优质内容、课程和服务，与粉丝建立深度连接并实现多元化收入。无论是知识分享、技能教学还是创意作品展示，小圈子都能帮助你将才华转化为可持续的收入来源。',
    category: '入门',
    tip: '小圈子特别适合有专业技能或独特内容的创作者，让你的价值得到合理回报。'
  },
  {
    question: '如何开始使用小圈子？',
    answer: '注册账号后，完善个人信息和创作者资料，选择你的创作领域，上传作品样本。平台会为你创建专属主页，你可以开始发布内容、设置会员权益、管理粉丝互动。整个过程只需5分钟，无需复杂配置即可开始你的创作之旅。',
    category: '入门',
    tip: '建议上传高质量的头像和封面图，并撰写详细的个人简介，这有助于吸引更多粉丝关注。'
  },
  {
    question: '内容发布有哪些形式？',
    answer: '小圈子支持多种内容形式，包括：文章、视频、音频、图片集、直播课程、PDF文档等。创作者可以根据自己的专长和内容类型，灵活选择最合适的发布形式。平台还支持内容加密和防复制功能，保障创作者权益。',
    category: '功能',
    tip: '多样化的内容形式有助于提高粉丝黏性，建议定期发布不同类型的内容。'
  },
  {
    question: '如何设置会员体系？',
    answer: '在小圈子中，你可以创建多层次的会员体系，如免费会员、月度会员、季度会员和年度会员。每个会员等级可以设置不同的权益，如专属内容访问权、社群参与权、一对一咨询等。平台提供灵活的定价工具，帮助你找到最优的价格策略。',
    category: '变现',
    tip: '研究表明，设置3-4个会员等级通常能获得最佳的转化率和收入。'
  },
  {
    question: '在小圈子可以获得哪些收入？',
    answer: '创作者可以通过多种方式获得收入：1) 会员订阅费；2) 单次付费内容（文章、视频、音频等）；3) 在线课程销售；4) 粉丝打赏和支持；5) 专属社群服务；6) 品牌合作机会。多元化的收入来源确保创作者能够建立稳定的商业模式。',
    category: '变现'
  },
  {
    question: '小圈子如何收费？',
    answer: '小圈子采用透明的收入分成模式，平台收取15%的技术服务费，创作者保留85%的收入。对于年度会员用户，平台只收取10%的服务费作为激励。我们不收取任何前期费用、入驻费或押金，让创作者零门槛入驻并开始变现。',
    category: '变现',
    tip: '相比市场上其他平台，小圈子的分成比例对创作者更加友好。'
  },
  {
    question: '如何提高粉丝活跃度？',
    answer: '小圈子提供多种粉丝运营工具：1) 互动问答区，促进创作者与粉丝交流；2) 会员专属社群，增强粉丝归属感；3) 定期直播和在线活动，提升参与度；4) 投票和调查功能，收集粉丝反馈；5) 数据分析工具，帮助你了解粉丝行为和偏好。',
    category: '社区',
    tip: '定期与粉丝互动是提高活跃度的关键，建议每天花15-30分钟回复评论和消息。'
  },
  {
    question: '如何吸引粉丝加入我的圈子？',
    answer: '吸引粉丝的有效策略包括：1) 提供高质量的免费内容作为样本；2) 分享成功案例和粉丝反馈；3) 利用平台的推广工具获得更多曝光；4) 参与社区活动和推荐计划；5) 与其他创作者合作互推。持续输出价值是吸引和留住粉丝的核心。',
    category: '社区'
  },
  {
    question: '数据分析功能包括哪些？',
    answer: '小圈子提供全面的数据分析仪表盘，包括：内容表现分析（阅读量、完成率等）、会员增长趋势、收入统计、粉丝画像、用户活跃度等。这些数据帮助创作者了解内容效果，优化运营策略，做出数据驱动的决策。',
    category: '功能',
    tip: '定期查看数据分析报告，找出表现最好的内容类型，调整你的内容策略。'
  },
  {
    question: '小圈子如何保护创作者的知识产权？',
    answer: '小圈子高度重视知识产权保护：1) 所有内容采用数字水印技术；2) 严格的内容访问控制机制，防止未授权分享；3) 支持DMCA投诉和版权保护；4) 提供版权登记指引和建议；5) 对侵权行为零容忍，发现即严肃处理。我们致力于为创作者提供安全的创作环境。',
    category: '功能',
    tip: '建议在发布内容前为重要作品申请版权登记，增强法律保护。'
  }
];

const filteredFaqs = computed(() => {
  if (activeCategory.value === '全部') {
    return faqs;
  }
  return faqs.filter(faq => faq.category === activeCategory.value);
});
</script>

<!-- 导航栏 -->
    <header class="header">
      <div class="container flex justify-between items-center py-4">
        <div class="logo flex items-center">
          <img src="./assets/logo.png" alt="小圈子" class="h-10 mr-2">
          <span class="text-2xl font-bold text-primary text-shadow-lg">小圈子</span>
          <span class="ml-4 text-lg font-semibold text-blue-600">xqz.fan</span>
        </div>
        <nav class="hidden md:flex space-x-8">
          <router-link to="/" class="text-secondary hover:text-primary transition-fast">首页</router-link>
          <router-link to="/about" class="text-secondary hover:text-primary transition-fast">关于我们</router-link>
          <router-link to="/features" class="text-secondary hover:text-primary transition-fast">平台特色</router-link>
          <router-link to="/creators" class="text-secondary hover:text-primary transition-fast">创作者价值</router-link>
          <router-link to="/monetization" class="text-secondary hover:text-primary transition-fast">变现方式</router-link>
          <router-link to="/testimonials" class="text-secondary hover:text-primary transition-fast">用户评价</router-link>
          <router-link to="/faq" class="text-secondary hover:text-primary transition-fast">常见问题</router-link>
          <router-link to="/tutorials" class="text-secondary hover:text-primary transition-fast">使用教程</router-link>
        </nav>
        <button class="btn btn-primary">立即下载</button>
      </div>
    </header>


    阴影效果



<style>
.text-shadow-lg {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.2);
  font-weight: bold;
  letter-spacing: 0.5px;
}
</style>