<template>
  <div class="user-guide-page">
    <!-- 页面头部 -->
    <div class="page-header-modern">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <svg viewBox="0 0 24 24" class="back-icon">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
          </svg>
        </button>
        <div class="header-info">
          <div class="header-text">
            <h1 class="header-title">使用指南</h1>
            <p class="header-subtitle">《精彩猪手》完整使用说明</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="guide-content">
      <!-- 目录导航 -->
      <div class="toc-section">
        <h3 class="toc-title">目录</h3>
        <div class="toc-list">
          <a href="#section1" class="toc-item">一、功能介绍</a>
          <a href="#section2" class="toc-item">二、专有名词解释</a>
          <a href="#section3" class="toc-item">三、注册、登录与使用</a>
          <a href="#section4" class="toc-item">四、双色球智推版操作要点</a>
          <a href="#section5" class="toc-item">五、双色球精推版操作要点</a>
          <a href="#section6" class="toc-item">六、大乐透智推版操作要点</a>
          <a href="#section7" class="toc-item">七、大乐透精推版操作要点</a>
          <a href="#section8" class="toc-item">八、活跃性分析数据调用</a>
          <a href="#section9" class="toc-item">九、接续性分析数据调用</a>
          <a href="#section10" class="toc-item">十、组合性分析数据调用</a>
        </div>
      </div>

      <!-- 第一章 -->
      <div id="section1" class="guide-section">
        <h3 class="section-title">一、《精彩猪手》功能介绍</h3>
        <div class="section-content">
          <p>《精彩猪手》由西安溢彩数智科技有限公司研创开发，主要围绕国内乐透型、数字型、基诺型主流彩票，提供相关基于姿态逻辑模型化的数据分析，以及"下期"开奖号球推测辅助服务。具体内容如下：</p>
          <ol class="feature-list">
            <li><strong>开奖信息查询</strong>：包括按开奖期号查询、按开奖日期查询、批量查询和表相查询等；</li>
            <li><strong>开奖数据分析</strong>：所有的开奖数据通过姿态逻辑模型化分析，多维度展现号球的活跃性、组合性和接续性特征，可以为彩民感知号球态势、判断变化趋势、复式/胆拖投注，提供参考依据。</li>
            <li><strong>开奖推测辅助</strong>：就是设定彩票号球接续、组合的逻辑规划，依据"本期"已出的号球，来对"下期"待出的号球进行多重数据运算，再提出系数指标从优至次的号球推荐队列，供彩民选择中参考。</li>
            <li>根据首球与随球的关联线索，启发复式/胆拖的投注参考；</li>
            <li>推测行为统计、分析、备份；</li>
            <li>进行规律总结、技巧探索、经验交流。</li>
          </ol>
          <p class="highlight-text">《精彩猪手》立志成为广大彩民值得信赖的超级数据助理。</p>
        </div>
      </div>

      <!-- 第二章 -->
      <div id="section2" class="guide-section">
        <h3 class="section-title">二、《精彩猪手》专有名词解释</h3>
        <div class="section-content">
          <p>《精彩猪手》开创了透视彩票开奖数据的新视角，以及推测彩票号组的新逻辑，因此注入了诸多的新概念，需要进行重点的理解和把握：</p>
          <div class="term-list">
            <div class="term-item">
              <span class="term-number">1</span>
              <div class="term-content">
                <strong>首球</strong>：是《精彩猪手》分段推测法的一个重要概念。对于数字型彩票，其开奖时第1个出场的号球便是首球。但对于乐透型和基诺型彩票而言，相同属性的号球并无关乎其先后的出场顺序，所以，"首球"可以是它们其中的任何一个球。首球从一定意义上具有胆码的部分功效，可以作为重点观察对象。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">2</span>
              <div class="term-content">
                <strong>随球</strong>：是《精彩猪手》分段推测法的另一个重要概念，与"首球"概念共存。对于乐透型、基诺型彩票而言，通常指紧跟在首球之后的所有同属性号球为随球。随球从一定意义上具有拖码的部分功效，同时，随球也可以是复式投注的重点观察对象。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">3</span>
              <div class="term-content">
                <strong>活跃系数</strong>：这是对一个号球活跃性状态进行综合计算的表述性指标，其中主要包括了该号球的出现频率因素，也包括了与邻近号球在开奖序列中发生关联交互的因素。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">4</span>
              <div class="term-content">
                <strong>接续系数</strong>：这是对一个号球接续性状态进行综合计算的表述性指标，其中主要包括了该号球与上期和下期号球的接续因素，也包括了与邻近号球在开奖序列中发生关联交互的因素。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">5</span>
              <div class="term-content">
                <strong>组合系数</strong>：这是对一个号球组合性状态进行综合计算的表述性指标，其中主要包括了该号球与其它号球的组合因素，也包括了与邻近号球在开奖序列中发生关联交互的因素。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">6</span>
              <div class="term-content">
                <strong>智推版</strong>：这是《精彩猪手》提供的一个关于下期开奖号球推测智选模块化程序。该程序基于"上期"与"本期"的姿态逻辑数据集，采用分段分步推测法，辅助彩民来搜寻最有希望成为"下期"开奖号球的"可能性目标"。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">7</span>
              <div class="term-content">
                <strong>精推版</strong>：这是《精彩猪手》提供的一个关于下期开奖号球推测精选模块化程序。该程序敞开目标号球主要数据，由彩民根据各项指标来精比细对，审慎选择其中最有希望成为"下期"开奖号球的"可能目标"。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">8</span>
              <div class="term-content">
                <strong>出现频次</strong>：是指一个号球进入开奖号球榜的次数。每进入1次，这个号球便增加1个出现频次。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">9</span>
              <div class="term-content">
                <strong>平均隐现期</strong>：所谓隐现期，是指号球没有进入开奖号球榜的期次。开奖期次与号球出现频次的简单比值就是平均隐现期。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">10</span>
              <div class="term-content">
                <strong>当前隐现期</strong>：是指一个号球从上一次登入开奖榜，到本期开奖连续未登入开奖榜的期次。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">11</span>
              <div class="term-content">
                <strong>最长隐现期次</strong>：是指一个号球在标定的时间范围内，连续未登入开奖榜期次最多的那一条记录。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">12</span>
              <div class="term-content">
                <strong>最大连出期次</strong>：是指号球在标定的期间范围内，连续不间断的都有登入开奖榜的最高期次记录。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">13</span>
              <div class="term-content">
                <strong>上期、本期与下期</strong>：这是对开奖期次的不同时态进行界定的简单标准：所有本期之前的开奖期次均称为上期；已开出的最新的开奖期次称为本期；紧接本期即将开出的奖期称为下期。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">14</span>
              <div class="term-content">
                <strong>百期排位</strong>：是指最近100期号球的活跃性排行位置。活跃性数据越优，排行越靠前。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">15</span>
              <div class="term-content">
                <strong>历史排位</strong>：是指在整个历史开奖周期中号球的活跃性排行位置。活跃性数据越优，排行越靠前。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">16</span>
              <div class="term-content">
                <strong>张力值</strong>：是号球活跃性、组合性、接续性的综合计算的指标性结果。张力值越高，表示综合指标越好。
              </div>
            </div>
            <div class="term-item">
              <span class="term-number">17</span>
              <div class="term-content">
                <strong>系数值</strong>：是号球组合性、接续性的交叉计算结果。系数值越高，表示组合、接续交叉性越好。
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第三章 -->
      <div id="section3" class="guide-section">
        <h3 class="section-title">三、注册、登录与使用</h3>
        <div class="section-content">
          <p>用户可通过手机（电脑）浏览器，直接访问 <strong>www.yicaishuzhi.com</strong> 网址进行注册和登录，也可通过微信直接登录《精彩猪手》。注册成功并登录后即刻成为《精彩猪手》会员。</p>
          <div class="info-box">
            <p><strong>会员收费标准：</strong></p>
            <ul>
              <li>月度会员：10元/月</li>
              <li>年度会员：100元/年</li>
            </ul>
            <p class="tip-text">新会员入住即可获得为期30天的VIP会员体验。</p>
          </div>
          <p><strong>会员权益包括：</strong></p>
          <ol>
            <li>开奖信息查询；</li>
            <li>号球活跃性、组合性、接续性数据分析；</li>
            <li>下期开奖推测辅助（VIP会员）；</li>
            <li>推测数据备份（VIP会员）；</li>
            <li>推测行为分析（VIP会员）；</li>
            <li>AI互动交流。</li>
          </ol>
        </div>
      </div>

      <!-- 第四章 -->
      <div id="section4" class="guide-section">
        <h3 class="section-title">四、双色球智推版操作要点</h3>
        <div class="section-content">
          <p>双色球开奖号球智推版，是一个用于推测"下期"开奖号球的简易辅助程序。完成一轮推测流程仅可产生一个彩票号组。具体操作要领如下：</p>
          <div class="step-list">
            <div class="step-item"><span class="step-num">第一步</span>完成注册登录，进入首页，《精彩猪手》默认停留在智推版，点击"双色球"进入。</div>
            <div class="step-item"><span class="step-num">第二步</span>会员"请选择推测进程中需要调用的关键数据区位"。《精彩猪手》姿态逻辑数据集的关键数据，分为"高、中、低"三块区位，会员每次推测必须且只能选择其中一个区位。</div>
            <div class="step-item"><span class="step-num">第三步</span>确认"本期开奖期号"栏内，系统默认写入最新开奖期号，以及与本期期号相对应的红球号码和篮球号码均无误。</div>
            <div class="step-item"><span class="step-num">第四步</span>确认"推测下期期号"栏内，系统默认写入紧接本期的下期期号无误。</div>
            <div class="step-item"><span class="step-num">第五步</span>点击"继续"，《精彩猪手》即推荐出11个数据向好的红球供参考。请会员根据自己的理解，从所有33个红球当中选择1个，作为"下期"的首球。</div>
            <div class="step-item"><span class="step-num">第六步</span>请会员在预留的位置，任意写入2个自己所期望中的红球号码，加入下一步的随球推测行列。</div>
            <div class="step-item"><span class="step-num">第七步</span>点击"继续"，《精彩猪手》即推荐出11个数据向好的红球供参考。请会员根据自己的理解，从不包含已选首球的其它32个红球中，选择5个作为随球。</div>
            <div class="step-item"><span class="step-num">第八步</span>点击"继续"，开始推测篮球进程。请会员根据自己的理解，在预留处选择2个自己所期望中的篮球号码，加入下一步的篮球推测行列。</div>
            <div class="step-item"><span class="step-num">第九步</span>点击"分析篮球"，《精彩猪手》即推荐出5个数据向好的篮球号码供参考。请会员根据自己的理解，选择16个篮球中的任意1个作为下期的篮球号码。</div>
            <div class="step-item"><span class="step-num">第十步</span>点击"继续"，《精彩猪手》展示出会员所选定的一支完整的双色球彩票号组，确认无误之后，会员勾选提示框"以上号码由我本人所推测选定"，然后点击"确认"。</div>
            <div class="step-item"><span class="step-num">第十一步</span>《精彩猪手》弹出风险提示框："彩票开奖系随机，数据、逻辑仅参考！"，会员点击"确认"。</div>
            <div class="step-item"><span class="step-num">第十二步</span>《精彩猪手》公告完成本次推测进程，会员点击"确定"，所推测结果保存至会员推测记录。</div>
          </div>
        </div>
      </div>

      <!-- 第五章 -->
      <div id="section5" class="guide-section">
        <h3 class="section-title">五、双色球精推版操作要点</h3>
        <div class="section-content">
          <p>双色球开奖号球精推版，是一个用于推测"下期"开奖号球的精细辅助程序。全程配以号球动态数据，便于会员观察、比对和选择。完成一轮推测流程仅可产生一个彩票号组。具体操作要领如下：</p>
          <div class="step-list">
            <div class="step-item"><span class="step-num">第一步</span>进入首页，点击"精推版"，选择"双色球"，界面转入"推测准备"环节。</div>
            <div class="step-item"><span class="step-num">第二步</span>会员"请选择推测进程中所调用的关键数据区位"。《精彩猪手》将自有的姿态逻辑数据集的关键数据，分为"高、中、低"三块区位，会员每次推测必须且只能选择其中一个区位。</div>
            <div class="step-item"><span class="step-num">第三步</span>确认"本期开奖期号"栏内，系统默认写入最新开奖期号，以及与本期期号相对应的红球号码和篮球号码均无误。</div>
            <div class="step-item"><span class="step-num">第四步</span>确认"推测下期期号"栏内，系统默认写入紧接本期的下期期号无误。</div>
            <div class="step-item"><span class="step-num">第五步</span>点击"继续"。《精彩猪手》进入推测首球环节，依序展示出所有红球的分析数据，包括张力值、系数值、百期排位、历史排位，供会员参考选择。</div>
            <div class="step-item"><span class="step-num">第六步</span>会员从列表中的33个红球中选择1个作为首球，然后点击"继续"。</div>
            <div class="step-item"><span class="step-num">第七步</span>进入推测随球环节。会员参考所列举的"随球分析数据"，选择5个与首球不相重复的红球号码作为随球，点击"继续"，进行下一步。</div>
            <div class="step-item"><span class="step-num">第八步</span>进入推测篮球环节。会员参考所列举的"篮球分析数据"，选择1个篮球号码，点击"继续"，进行下一步。</div>
            <div class="step-item"><span class="step-num">第九步</span>《精彩猪手》展示出会员所选定的一支完整的双色球彩票号组，确认无误之后，会员勾选提示框"以上号码由我本人所推测选定"，然后点击"确认"。</div>
            <div class="step-item"><span class="step-num">第十步</span>《精彩猪手》弹出风险提示框："彩票开奖系随机，数据、逻辑仅参考！"，会员点击"确认"。</div>
            <div class="step-item"><span class="step-num">第十一步</span>《精彩猪手》公告完成本次推测进程，会员点击"确定"，所推测结果保存至会员推测记录。</div>
          </div>
        </div>
      </div>

      <!-- 第六章 -->
      <div id="section6" class="guide-section">
        <h3 class="section-title">六、超级大乐透智推版操作要点</h3>
        <div class="section-content">
          <p>超级大乐透（以下简称大乐透）开奖号球智推版，是一个用于推测"下期"开奖号球的简易辅助程序。完成一轮推测流程仅可产生一个彩票号组。具体操作要领如下：</p>
          <div class="step-list">
            <div class="step-item"><span class="step-num">第一步</span>进入首页，《精彩猪手》默认停留在智推版，点击"大乐透"进入。</div>
            <div class="step-item"><span class="step-num">第二步</span>会员"请选择推测进程中所调用的关键数据区位"。《精彩猪手》将自有的姿态逻辑数据集中的关键数据，分为"高、中、低"三块区位，会员每次推测必须且只能选择其中一个区位。</div>
            <div class="step-item"><span class="step-num">第三步</span>确认"本期开奖期号"栏内，系统默认写入最新开奖期号，以及与本期期号相对应的前区号球和后区号球均无误。</div>
            <div class="step-item"><span class="step-num">第四步</span>确认"推测下期期号"栏内，系统默认写入紧接本期的下期期号无误。</div>
            <div class="step-item"><span class="step-num">第五步</span>点击"继续"，《精彩猪手》推荐出12个数据向好的前区号球供参考。请会员根据自己的理解，从所有前区号球当中选择1个，作为"下期"彩票号组的前区首球。</div>
            <div class="step-item"><span class="step-num">第六步</span>请会员在预留的位置，任意写入3个自己期望中的前区号球，以加入下一步的前区随球推测行列。</div>
            <div class="step-item"><span class="step-num">第七步</span>点击"继续"，《精彩猪手》推荐出12个数据向好的前区号球供参考。请会员根据自己的理解，从不包含已选前区首球的其它号球中，选择4个作为前区随球。</div>
            <div class="step-item"><span class="step-num">第八步</span>开始推测后区首球。请会员根据自己的理解，在预留处选择2个自己期望中的后区号球，加入下一步的后区首球推测行列。</div>
            <div class="step-item"><span class="step-num">第九步</span>点击"继续"，《精彩猪手》推荐了5个数据向好的后区号球，供参考。请会员根据自己的判断，从所有的后区号球中选择1个，做为后区首球。</div>
            <div class="step-item"><span class="step-num">第十步</span>《精彩猪手》根据会员所选择的后区首球，又向会员推荐了4个数据向好的后区号球供参考。</div>
            <div class="step-item"><span class="step-num">第十一步</span>请会员从不包含已选后区首球的所有后区号球中，选择1个自己认定的号球，做为后区随球。</div>
            <div class="step-item"><span class="step-num">第十二步</span>点击"继续"，《精彩猪手》展示出会员所选定的一支完整的大乐透彩票号组，确认无误之后，会员勾选提示框"以上号码为本人所研判选定"，然后点击"确认"。</div>
            <div class="step-item"><span class="step-num">第十三步</span>《精彩猪手》弹出风险提示框："彩票开奖系随机，数据、逻辑仅参考！"，会员点击"确认"。</div>
            <div class="step-item"><span class="step-num">第十四步</span>《精彩猪手》公告完成本次推测进程，会员点击"确定"，所推测结果保存至会员推测记录。</div>
          </div>
        </div>
      </div>

      <!-- 第七章 -->
      <div id="section7" class="guide-section">
        <h3 class="section-title">七、大乐透精推版操作要点</h3>
        <div class="section-content">
          <p>大乐透开奖号球精推版，是一个用于推测"下期"开奖号球的精细辅助程序。全程配以号球动态数据，便于会员观察、比对和选择。完成一轮推测流程仅可产生一个彩票号组。具体操作要领如下：</p>
          <div class="step-list">
            <div class="step-item"><span class="step-num">第一步</span>进入首页，点击"精推版"，选择"大乐透"，界面转入"推测准备"环节。</div>
            <div class="step-item"><span class="step-num">第二步</span>会员"请选择推测进程中需要调用的关键数据区位"。《精彩猪手》将自有的姿态逻辑数据集中的关键数据，分为"高、中、低"三块区位，会员每次推测必须且只能选择其中一个区位。</div>
            <div class="step-item"><span class="step-num">第三步</span>确认"本期开奖期号"栏内，系统默认写入最新开奖期号，以及与本期期号相对应的前区号球和后区号球均无误。</div>
            <div class="step-item"><span class="step-num">第四步</span>确认"推测下期期号"栏内，系统默认写入紧接本期的下期期号无误。</div>
            <div class="step-item"><span class="step-num">第五步</span>点击"继续"。《精彩猪手》进入推测前区首球环节，依序展示出所有前区号球的分析数据，包括张力值、系数值、百期排位、历史排位，供会员参考选择。</div>
            <div class="step-item"><span class="step-num">第六步</span>会员从列表中选择1个号球作为前区首球，然后点击"继续"。</div>
            <div class="step-item"><span class="step-num">第七步</span>进入推测前区随球环节。会员参考所列举的"前区随球分析数据"，选择4个与前区首球不相重复的号球作为前区随球，点击"继续"，进行下一步。</div>
            <div class="step-item"><span class="step-num">第八步</span>进入推测后区首球环节。会员参考所列举的"后区首球分析数据"，选择1个后区号球作为后区首球，点击"继续"，进行下一步。</div>
            <div class="step-item"><span class="step-num">第九步</span>《精彩猪手》根据会员所选择的后区首球，展示出相应的"后区随球分析数据"，供参考。由会员选择1个与后区首球不相重复的号球做为后区随球，点击"继续"。</div>
            <div class="step-item"><span class="step-num">第十步</span>《精彩猪手》展示出会员所选定的一支完整的大乐透彩票号组，确认无误之后，会员勾选提示框"以上号码为本人所推测选定"，然后点击"确认"。</div>
            <div class="step-item"><span class="step-num">第十一步</span>《精彩猪手》弹出风险提示框："彩票开奖系随机，数据、逻辑仅参考！"，会员点击"确认"。</div>
            <div class="step-item"><span class="step-num">第十二步</span>《精彩猪手》公告完成本次推测进程，会员点击"确定"，所推测结果保存至会员推测记录。</div>
          </div>
        </div>
      </div>

      <!-- 第八章 -->
      <div id="section8" class="guide-section">
        <h3 class="section-title">八、"活跃性分析"数据调用</h3>
        <div class="section-content">
          <div class="step-list">
            <div class="step-item"><span class="step-num">1</span>点击"分析"，进入数据分析页面。</div>
            <div class="step-item"><span class="step-num">2</span>点击选择需要分析的彩票名称。《精彩猪手》默认状态为双色球。</div>
            <div class="step-item"><span class="step-num">3</span>点击"活跃性分析"，进入活跃性分析页面。</div>
            <div class="step-item"><span class="step-num">4</span>在活跃性分析页面上选择所需要调用的号球色别，比如"红球"或"篮球"。《精彩猪手》默认状态为红球。</div>
            <div class="step-item"><span class="step-num">5</span>选择所需要分析的数据项目，对应的数据即全部同步展现出来。</div>
          </div>
        </div>
      </div>

      <!-- 第九章 -->
      <div id="section9" class="guide-section">
        <h3 class="section-title">九、"接续性分析"数据调用</h3>
        <div class="section-content">
          <div class="step-list">
            <div class="step-item"><span class="step-num">1</span>点击"分析"，进入数据分析页面。</div>
            <div class="step-item"><span class="step-num">2</span>点击选择需要分析的彩票名称。《精彩猪手》默认状态为双色球。</div>
            <div class="step-item"><span class="step-num">3</span>点击"接续性分析"，进入接续性分析页面。</div>
            <div class="step-item"><span class="step-num">4</span>选择所需要分析的号球接续形态。比如，红球与篮球的接续。</div>
            <div class="step-item"><span class="step-num">5</span>在下方所显示的图形中，分别选择对应的红球和篮球号码，然后点击"开始分析"。一次仅可以通过《精彩猪手》分析两个号球之间的接续数据。</div>
            <div class="step-item"><span class="step-num">6</span>下方展示出当前号球的接续性分析报告。</div>
          </div>
        </div>
      </div>

      <!-- 第十章 -->
      <div id="section10" class="guide-section">
        <h3 class="section-title">十、"组合性分析"数据调用</h3>
        <div class="section-content">
          <div class="step-list">
            <div class="step-item"><span class="step-num">1</span>点击"分析"，进入数据分析页面。</div>
            <div class="step-item"><span class="step-num">2</span>点击选择需要分析的彩票名称。《精彩猪手》默认状态为双色球。</div>
            <div class="step-item"><span class="step-num">3</span>点击"组合性分析"，进入组合性分析页面。</div>
            <div class="step-item"><span class="step-num">4</span>选择所需要分析的号球组合形态。比如，红球与篮球的组合。</div>
            <div class="step-item"><span class="step-num">5</span>在下方所显示的图形中，分别选择对应的红球和篮球号码，然后点击"开始分析"。《精彩猪手》一次仅可以分析两个号球之间的组合数据。</div>
            <div class="step-item"><span class="step-num">6</span>下方展示出当前号球的组合性分析报告。</div>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="footer-info">
        <p class="company-name">西安溢彩数智科技有限公司</p>
        <p class="date">2025年12月31日</p>
      </div>
    </div>

    <!-- 回到顶部按钮 -->
    <div class="back-to-top" @click="scrollToTop" v-show="showBackToTop">
      <svg viewBox="0 0 24 24" class="top-icon">
        <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserGuide',
  data() {
    return {
      showBackToTop: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleScroll() {
      this.showBackToTop = window.scrollY > 300
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style scoped>
.user-guide-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

/* 页面头部 */
.page-header-modern {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 20px 0;
  position: relative;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.back-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  color: white;
  margin-right: 16px;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.back-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.header-info {
  flex: 1;
}

.header-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: white;
}

.header-subtitle {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

/* 主要内容 */
.guide-content {
  max-width: 850px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* 标题区域 */
.guide-title-section {
  text-align: center;
  margin-bottom: 30px;
}

.main-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.intro-text {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
}

/* 目录导航 */
.toc-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.toc-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #4facfe;
}

.toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.toc-item {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
  border-radius: 20px;
  color: #4facfe;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.toc-item:hover {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  transform: translateY(-2px);
}

/* 章节样式 */
.guide-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #4facfe;
  position: relative;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 2px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.section-content {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
}

.section-content p {
  margin-bottom: 16px;
}

.section-content strong {
  color: #333;
}

.highlight-text {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #4facfe;
  font-weight: 500;
}

/* 功能列表 */
.feature-list {
  padding-left: 20px;
  margin: 16px 0;
}

.feature-list li {
  margin-bottom: 12px;
  line-height: 1.6;
}

/* 术语列表 */
.term-list {
  margin-top: 16px;
}

.term-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 16px;
  background: #fafbfc;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.term-item:hover {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%);
}

.term-number {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  margin-right: 16px;
}

.term-content {
  flex: 1;
  line-height: 1.6;
}

/* 信息框 */
.info-box {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
  padding: 20px;
  border-radius: 12px;
  margin: 16px 0;
  border-left: 4px solid #4facfe;
}

.info-box ul {
  padding-left: 20px;
  margin: 12px 0;
}

.info-box li {
  margin-bottom: 8px;
}

.tip-text {
  color: #4facfe;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 0;
}

/* 步骤列表 */
.step-list {
  margin-top: 16px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: #fafbfc;
  border-radius: 10px;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.step-item:hover {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%);
  transform: translateX(4px);
}

.step-num {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 底部信息 */
.footer-info {
  text-align: center;
  color: #666;
}

.company-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.date {
  font-size: 14px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header-modern {
    padding: 16px 0;
  }
  
  .header-content {
    padding: 0 16px;
  }
  
  .back-btn {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  
  .header-title {
    font-size: 20px;
  }
  
  .guide-content {
    padding: 16px;
  }
  
  .main-title {
    font-size: 22px;
  }
  
  .toc-list {
    flex-direction: column;
    gap: 8px;
  }
  
  .toc-item {
    display: block;
    text-align: center;
  }
  
  .section-title {
    font-size: 18px;
  }
  
  .term-item {
    flex-direction: column;
  }
  
  .term-number {
    margin-bottom: 8px;
    margin-right: 0;
  }
  
  .step-item {
    flex-direction: column;
  }
  
  .step-num {
    margin-bottom: 8px;
    margin-right: 0;
  }
}

/* 回到顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
  transition: all 0.3s ease;
  z-index: 999;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.6);
}

.back-to-top:active {
  transform: translateY(-1px);
}

.top-icon {
  width: 24px;
  height: 24px;
  fill: white;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 70px;
    right: 15px;
    width: 44px;
    height: 44px;
  }
  
  .top-icon {
    width: 22px;
    height: 22px;
  }
}
</style>
