<!--
 * @Author: 李佐宁
 * @Description: 安全知识库
 * @Date: 2023-04-04 10:48:36
 * @LastEditTime: 2023-08-31 15:42:33
 * @LastEditors: 曹文丽
-->
<template>
  <CommonCardVue class="knowledgeBaseCard">
    <div class="knowledgeBase">
      <div class="ya-left">
        <div class="ya-item" v-for="(item, key) in catalogue" @click="itemClick(key)" :key="key"
          :class="{ active: moveIndex === key }">
          <span class="ya-item-dot"></span>
          <span class="ya-item-name" :class="moveIndex === key ? null : 'ya-regular-text'">{{ item.name }}</span>
        </div>
      </div>
      <div class="ya-right" id="yaContent">
        <div class="yaBox" v-for="(item, i) in catalogue" :key="i">
          <div class="ya-title ya-primary-text">
            <span>{{ item.name }}</span>
          </div>
          <div class="ya-content" v-for="(child, j) in item.content" :key="j">
            <div class="ya-subtitle">
              <img src="../../assets/image/icon_title_arrow.png" alt="" />
              <span>{{ child.name }}</span>
            </div>
            <div v-html="child.content"></div>
          </div>
        </div>
      </div>
      <div @click="handleScollTop" v-if="showTop" class="yaTop">
        <i class="iconfont icon-zhiding1 ya-primary-text"></i>
      </div>
    </div>
  </CommonCardVue>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import CommonCardVue from "../../components/CommonCard/CommonCard.vue";
import icon_dnsrequest from "../../assets/image/monitoring/icon_dnsrequest.png";
import icon_iterequest from "../../assets/image/monitoring/icon_iterequest.png";
import icon_process from "../../assets/image/monitoring/icon_process.png";
import icon_detection from "../../assets/image/monitoring/icon_detection.png";
import icon_analyse from "../../assets/image/monitoring/icon_analyse.png";
import icon_attacktype from "../../assets/image/monitoring/icon_attacktype.png";
import icon_apt_step from "../../assets/image/monitoring/icon_apt_step.png";
import icon_apt_method from "../../assets/image/monitoring/icon_apt_method.png";
import icon_apt_word from "../../assets/image/monitoring/icon_apt_word.png";

// 目录数据
const catalogue = ref([
  {
    name: "域名",
    content: [
      {
        name: "DNS递归请求和迭代请求",
        content: `<div class="lh-30">
                    <span class="ya-primary-text" style="font-weight: bold">递归请求：</span>
                    <span class="ya-regular-text"
                      >DNS客户端A问本地名称服务器B一个问题，B不知道答案，B去问C，C不知道答案，让B去问D,
                      如此递归…</span>
                  </div>
                  <div class="pb-35" style="margin-top: 10px;"><img style="width:56%;" src="${icon_dnsrequest}" /></div>
                  <div class="lh-30">
                    <span class="ya-primary-text" style="font-weight: bold">迭代请求：</span>
                    <span class="ya-regular-text"
                    >DNS客户端A问本地名称服务器B一个问题，B不知道答案，说你可以问C，然后A再去问C，C推荐D，然后A继续问D，如此迭代…</span>
                  </div>
                  <div style="margin-top: 10px;"><img style="width:56%;" src="${icon_iterequest}" /></div>
                `,
      },
      {
        name: "权威应答和非权威应答",
        content: `<div class="lh-30">
                    <span class="ya-regular-text"
                      >假设DNS Server 没有name.com的域名信息，客户端向DNS Server请求获取该域名的信息时，客户端访问该域名官网获取域名信息，并储存在该服务器的缓存中，供客户端下次访问，则为</span>
                    <span class="ya-primary-text" style="font-weight: bold">非权威应答</span>
                    <span class="ya-regular-text"
                      >；如DNS Server直接保存客户端想要的域名信息，直接返回，则为</span>
                    <span class="ya-primary-text" style="font-weight: bold">权威应答。</span>
                  </div>
                  <div class="ya-primary-text lh-30" style="font-weight: bold">统计某个省市的DNS访问的权威应答比例或递归请求比例可以有以下意义：</div>
                  <div class="ya-regular-text lh-30">
                    <span style="font-weight: bold">1. 了解该省市的DNS服务质量：</span>
                    <span>权威应答比例和递归请求比例能够反映该省市的DNS服务质量。如果权威应答比例高，说明该省市的DNS服务器能够提供较好的本地DNS服务，能够快速响应用户请求；如果递归请求比例高，说明该省市的用户更多地使用公共DNS服务器，可能是因为本地DNS服务质量较差。
                    </span>
                  </div>
                  <div class="ya-regular-text lh-30">
                    <span style="font-weight: bold">2. 优化网络结构和服务质量：</span>
                    <span>通过分析权威应答比例和递归请求比例，可以了解该省市的DNS请求流向和分布情况，有助于优化网络结构和服务质量，提高用户的访问体验。
                    </span>
                  </div>
                  <div class="ya-regular-text lh-30">
                    <span style="font-weight: bold">3. 为运营商提供参考：</span>
                    <span>权威应答比例和递归请求比例能够为运营商提供参考，帮助其了解用户需求和行为，制定更合理的网络服务策略。
                    </span>
                  </div>
          `,
      },
      {
        name: "CDN域名",
        content: `<div class="ya-regular-text lh-30">
          <div>CDN的全称是Content Delivery Network，翻译成中文就是内容分发网络。</div>
          举个例子，某个网站的服务器在深圳，如果山东的用户想要获取服务器上的数据，就需要跨越很远的距离，由于传输速度和路由转发等因素，就会导致访问速度非常缓慢。但如果我们在山东建立一个CDN服务器，上面缓存了一些服务器数据，那么山东用户只需要访问这个CDN的服务器就能获取相关的内容，这样速度就提升了很多。
                </div>
                `,
      },
      {
        name: "恶意域名",
        content: `<div class="ya-regular-text lh-30">
          <div>恶意域名是指一类具有恶意链接的网址，这种网址通常利用应用软件或浏览器的漏洞，在网站内植入木马、病毒程序等恶意代码，并利用伪装的网站服务内容来诱导用户访问。</div>
              恶意软件网站包含恶意代码，通过在用户计算机上安装恶意软件，黑客可利用该软件来获取和传输用户的隐私或敏感信息。恶意域名惯用的手段是诱导用户访问不安全的网站，使恶意代码破坏用户计算机网络、泄露用户隐私信息和敏感数据，通过欺诈等手段使用户在经济上受损。
                </div>
                `,
      },
      {
        name: "DGA域名",
        content: `<div class="ya-regular-text lh-30">
          <div>DGA（Domain Generation Algorithm，域名生成算法）是一种利用随机字符来生C&C（Command and Control，命令与控制）域名，从而 逃避域名黑名单检测 的技术手段。</div>
            攻击者利用DGA产生恶意域名后，选择部分域名进行注册并指向C&C服务器。当受害者运行恶意程序后，主机将通过恶意域名连接至C&C服务器，攻击者即可远程操控主机。僵尸网络由大量受控主机即僵尸（bot）和一个或多个命令和控制C2（Command &Control）服务器构成，bot与C2服务器相互通信以便传递命令和数据。为避免C2服务器被发现，恶意软件设法采用规避技术来隐藏bot与C2服务器的通信行为，其中，域名生成算法DGA（Domain Generation Algorithm）就是一种实用技术。
                </div>
                `,
      },
      {
        name: "仿冒域名",
        content: `<div class="ya-regular-text lh-30">
          仿冒者会注册一些与受害品牌域名极为类似的域名来诱骗普通用户者并谋取他们的信任。这样的域名会被用于各种网络攻击，尤其是网络钓鱼攻击或者达到其他目的。例如，攻击者可能会注册一个“1bank.com”的域名来仿冒ebank.com。
                </div>
                `,
      },
    ],
  },
  {
    name: "僵木蠕",
    content: [
      {
        name: "僵尸网络（Zombie Network）",
        content: `<div class="ya-regular-text lh-30">
          是一种通过控制多个被感染的计算机来进行攻击、传播恶意代码和举行大规模攻击的组织。它通常是由黑客通过利用漏洞或者诱骗用户安装恶意软件来感染大量计算机，然后利用感染的计算机进行攻击。
                </div>
                `,
      },
      {
        name: "木马（Trojan horse）",
        content: `<div class="ya-regular-text lh-30">
          是一种隐藏在常规程序中的恶意代码，它能够在用户意识不到的情况下植入计算机系统中，然后执行攻击者所指定的操作。木马程序通常通过欺骗用户下载和安装，它们可以用于窃取敏感信息、监控用户活动和破坏系统安全性。木马分类一般有间谍木马、下载木马、远控木马。
                </div>
                `,
      },
      {
        name: "蠕虫（Worm）",
        content: `<div class="ya-regular-text lh-30">
          是一种自我复制的恶意程序，它能够利用网络中的漏洞自动感染其他计算机，从而迅速传播、占用资源和破坏网络安全。蠕虫通常不需要用户交互或者安装，它们可以利用网络上的共享文件、邮件、远程控制等方式进行传播。蠕虫有网络蠕虫、文件蠕虫、邮件蠕虫等。
                </div>
                `,
      },
      {
        name: "僵木蠕区别：主要在于传播方式和攻击方式。",
        content: `<div class="ya-regular-text lh-30">
                  <div><span class="ya-primary-text" style="font-weight: bold;">僵尸网络</span>是通过控制多个被感染的计算机来进行攻击，通常是由黑客通过利用漏洞或者诱骗用户安装恶意软件来感染大量计算机。</div>
                    <div><span class="ya-primary-text" style="font-weight: bold;">木马</span>是一种隐藏在常规程序中的恶意代码，它能够在用户意识不到的情况下植入计算机系统中，然后执行攻击者所指定的操作。</div>
                      <div><span class="ya-primary-text" style="font-weight: bold;">蠕虫</span>是一种自我复制的恶意程序，它能够利用网络中的漏洞自动感染其他计算机，从而迅速传播、占用资源和破坏网络安全。</div>
                </div>
                `,
      },
    ],
  },
  {
    name: "恶意代码",
    content: [
      {
        name: "恶意代码",
        content: `
            <div class="ya-regular-text lh-30">
              <div style="padding-bottom: 24px;">恶意代码 （Malicious Code，有时也称作 Malware，即恶意软件)，是指为达到恶意目的专门设计的程序或代码，是指一切旨在破坏计算机或者网络系统可靠性、可用性、安全性和数据完整性或者捐耗系统资源的恶意程序。恶意代码可能通过软件漏洞、电子邮件、存储媒介或者其他方式植入到目标计算机，并随着目标计算机的启动而自动运行。目前发现的恶意代码主要的存在形态有:恶意数据文档、恶意网页、内存代码、可执行程序和动态链接库等。</div>
              <div class="ya-primary-text" style="font-weight: bold;">恶意代码具有如下共同特征:</div>
              <div>1. 具有恶意的目的</div>
                <div>2. 自身是计算程序或代码</div>
                  <div>3. 通过执行发生作用。</div>
                反病毒公司和安全研究人员按照已经存在的常规术语来描述恶意代码，这些术语包括计算机病毒、蠕虫、木马、后门、 Rootkitt、流氓软件、间谍软件、广告软件、僵尸 (bot)、Exploit 等。
            </div>
        `,
      },
      {
        name: "恶意代码分析",
        content: `
            <div class="ya-regular-text lh-30">
              <div>流量中恶意代码分析分两个过程：</div>
              <div>
                <span class="ya-primary-text" style="font-weight: bold;">首先是对流量传输的文件进行还原</span>
                ，通过对常用传输文件协议HTTP,SMTP,POP3,IMAP等应用层识别和解析，提取传输的文件，如下是文件还原的架构图。
              </div>
              <div style="margin: 16px 0 34px;"><img style="width:59%" src="${icon_process}" /></div>
              <div>
                <span class="ya-primary-text" style="font-weight: bold;">然后是文件检测</span>
                ，通过静态引擎、杀毒引擎、沙箱等对文件进行全方位检测，分析是否存在恶意特征或行为。
              </div>
              <div style="margin-top: 15px;"><img style="width:66%" src="${icon_detection}" /></div>
              <div><img style="width:66%" src="${icon_analyse}" /></div>
            </div>
        `,
      },
    ],
  },
  {
    name: "DDoS攻击",
    content: [
      {
        name: "DDoS攻击",
        content: `
            <div class="ya-regular-text lh-30">
              分布式拒绝服务（Distributed Denial of Service，简称DDoS）将多台计算机联合起来作为攻击平台，通过远程连接，利用恶意程序对一个或多个目标发起DDoS攻击，消耗目标服务器性能或网络带宽，从而造成服务器无法正常地提供服务。
            </div>
        `,
      },
      {
        name: "攻击原理",
        content: `
            <div class="ya-regular-text lh-30">
              通常，攻击者使用一个非法账号将DDoS主控程序安装在一台计算机上，并在网络上的多台计算机上安装代理程序。在所设定的时间内，主控程序与大量代理程序进行通讯，代理程序收到指令时对目标发动攻击，主控程序甚至能在几秒钟内激活成百上千次代理程序的运行。
            </div>
        `,
      },
      {
        name: "DDoS攻击的危害",
        content: `
            <div class="ya-regular-text lh-30">
              DDoS攻击会对您的业务造成以下危害：
              <div class="ya-primary-text" style="font-weight: bold;">1. 重大经济损失</div>
              <div class="pb-16">在遭受DDoS攻击后，您的源站服务器可能无法提供服务，导致用户无法访问您的业务，从而造成巨大的经济损失和品牌损失。例如：某电商平台在遭受DDoS攻击时，网站无法正常访问甚至出现短暂的关闭，导致合法用户无法下单购买商品等。</div>
              <div class="ya-primary-text" style="font-weight: bold;">2. 数据泄露</div>
              <div class="pb-16">黑客在对您的服务器进行DDoS攻击时，可能会趁机窃取您业务的核心数据。</div>
              <div class="ya-primary-text" style="font-weight: bold;">3. 恶意竞争</div>
              <div class="">部分行业存在恶性竞争，竞争对手可能会通过DDoS攻击恶意攻击您的服务，从而在行业竞争中获取优势。例如：某游戏业务遭受了DDoS攻击，游戏玩家数量锐减，导致该游戏业务几天内迅速彻底下线。</div>
            </div>
        `,
      },
      {
        name: "常见的DDoS攻击类型",
        content: `
            <div class="ya-regular-text" style="margin-top: 15px;">
              <img style="width: 100%" src="${icon_attacktype}" />
            </div>
        `,
      },
      {
        name: "如何判断业务是否已遭受DDoS攻击？",
        content: `
            <div class="ya-regular-text lh-30">
              <div>出现以下情况时，您的业务可能已遭受DDoS攻击：</div>
              <div>1. 网络和设备正常的情况下，服务器突然出现连接断开、访问卡顿、用户掉线等情况。</div>
              <div>2. 服务器CPU或内存占用率出现明显增长。</div>
              <div>3. 网络出方向或入方向流量出现明显增长。</div>
              <div>4. 您的业务网站或应用程序突然出现大量的未知访问。</div>
              <div>5. 登录服务器失败或者登录过慢。</div>
            </div>
        `,
      },
    ],
  },
  {
    name: "APT攻击",
    content: [
      {
        name: "什么是APT",
        content: `
            <div class="ya-regular-text lh-30">
              APT攻击是一种以商业或者政治目的为前提的特定攻击，其通过一系列具有针对性的攻击行为以获取某个组织甚至国家的重要信息，特别是针对国家重要的基础设施和单位开展攻击，包括能源、电力、金融、国防等等。APT攻击常常采用多种攻击技术手段，包括一些最为先进的手段和社会工程学方法，并通过长时间持续性的网络渗透，一步步的获取内部网络权限，此后便长期潜伏在内部网络，不断地收集各种信息，直至窃取到重要情报。
            </div>
        `,
      },
      {
        name: "APT攻击的特征",
        content: `
            <div class="ya-regular-text lh-30">
              <div class="ya-primary-text" style="font-weight: bold;">1. 高目的性</div>
              <div class="pb-16">攻击目标是拥有高价值敏感数据的高级用户，特别是可能影响到国家和地区政治等领域的高级别敏感数据持有者、 甚至各种工业控制系统。</div>
              <div class="ya-primary-text" style="font-weight: bold;">2. 高隐蔽性</div>
              <div class="pb-16">APT攻击存在于组织内部，已经与被攻击对象的可信程序漏洞与业务系统漏洞进行了融合，不易被发现。</div>
              <div class="ya-primary-text" style="font-weight: bold;">3. 高危害性</div>
              <div class="pb-16">APT攻击的持续时间长，攻击和威胁可能在用户环境中存在一年以上。</div>
              <div class="ya-primary-text" style="font-weight: bold;">4. 组织严密</div>
              <div class="pb-16">攻击者通常由熟练黑客形成团体，分工协作。他们在经济和技术上都拥有充足的资源，具备长时间专注APT研究的条件和能力。</div>
              <div class="ya-primary-text" style="font-weight: bold;">5. 间接攻击</div>
              <div class="">APT攻击通常利用第三方网站或服务器作跳板，布设恶意程序或木马向目标进行渗透攻击。</div>
            </div>
        `,
      },
      {
        name: "APT攻击的入侵途径",
        content: `
            <div class="ya-regular-text lh-30">
              <div>APT攻击通常通过以下六种途径入侵到目标网络中：</div>
              <div>1. 通过SQL注入等攻击手段突破面向外网的Web 服务器；</div>
              <div>2. 通过被入侵的Web 服务器做跳板，对内网的其他服务器或桌面终端进行扫描，并为进一步入侵做准备；</div>
              <div>3. 通过密码爆破或者发送欺诈邮件，获取管理员帐号，并最终突破AD服务器（目录服务）或核心开发环境；</div>
              <div>4. 被攻击者的私人邮箱自动发送邮件副本给攻击者；</div>
              <div>5. 通过植入恶意软件，如木马、后门、下载器等恶意软件，回传大量的敏感文件（WORD、PPT、PDF、CAD文件等）；</div>
              <div>6. 通过高层主管邮件，发送带有恶意程序的附件，诱骗员工点击并入侵内网终端。</div>
            </div>
        `,
      },
      {
        name: "APT攻击的攻击步骤",
        content: `
            <div class="ya-regular-text lh-30">
              <div style="padding-bottom: 13px;">APT攻击大致分为探测期、入侵期、潜伏期、退出期4个阶段。</div>
              <img style="width: 100%" src="${icon_apt_step}" />
            </div>
              `,
      },
      {
        name: "APT攻击的防御方法",
        content: `
            <div class="ya-regular-text lh-30">
              <div style="padding-bottom: 13px;">按照防御体系安全能力不同，一般将安全防御机制划分成三个层次，分别是防护层、协同层以及检测层，不同层次对应的安全技术手段如下图。</div>
              <img style="width: 46%" src="${icon_apt_method}" />
              <div class="ya-primary-text" style="font-weight: bold;">1. 基于沙箱的恶意代码检测技术——未知威胁检测</div>
              <div class="pb-16">要检测恶意代码，最具挑战性的就是利用0day漏洞的恶意代码。因为是0day，就意味着没有特征，传统的恶意代码检测技术就此失效。<br />
沙箱技术简单说就是构造一个模拟的执行环境，让可疑文件在这个模拟环境中运行起来，通过监控可疑文件所有的真正的行为（程序外在的可见的行为和程序内部调用系统的行为）判断是否为恶意文件。<br />
沙箱技术的模拟环境可以是真实的模拟环境，也可以是一个虚拟的模拟环境。而虚拟的模拟环境可以通过虚拟机技术来构建（KVM），或者通过一个特制程序来虚拟（docker）。</div>
              <div class="ya-primary-text" style="font-weight: bold;">2. 基于异常的流量检测技术——IDS（入侵检测系统）</div>
              <div class="pb-16">传统的IDS都是基于特征的技术去进行DPI(深度包检测)分析，检测能力的强弱主要看IDS库的能力（规则库要广泛还要及时更新），主要是安全分析人员要从各种开源机构或自发渗透挖掘出利用代码或恶意代码，来加入IDS规则库来增强检测能力。这种防御技术对常见的、已知的网络威胁检测时可以的，对未知的威胁就没有用武之地了。<br />
面对新型威胁，有的IDS也加入了DFI（深度流检测）技术，来增强检测能力。基于Flow，出现了一种基于异常的流量检测技术，通过建立流量行为轮廓和学习模型来识别流量异常，进而识别0day攻击、C&C通讯，以及信息渗出。本质上，这是一种基于统计学和机器学习的技术。</div>
              <div class="ya-primary-text" style="font-weight: bold;">3. 信誉技术</div>
              <div class="pb-16">信誉技术早已存在，在面对新型威胁的时候，可以助其他检测技术一臂之力。无论是WEB URL信誉库、文件MD5码库、僵尸网络、恶意IP、恶意邮件，还是威胁情报库，都是检测新型威胁的有力武器，一旦检测到不良信誉资源能够利用网络安全设备进行过滤和阻断。信誉技术一般只作为辅助技术来检测APT攻击，而信誉技术的关键在于信誉库的构建，这需要一个强有力的技术团队来维护。<br />
一般是借助第三方情报平台，实时的收集互联网上的最新威胁情报，实时的更新情报库。</div>
              <div class="ya-primary-text" style="font-weight: bold;">4. 关联分析技术</div>
              <div class="pb-16">把前述的技术关联在一起，进一步分析威胁的方法。我们已经知道APT攻击是一个过程，是一个组合，如果能够将APT攻击各个环节的信息综合到一起，有助于确认一个APT攻击行为。通过IDS+情报+沙箱+机器学习等综合的判断网络数据是否有威胁。<br />
综合分析技术要能够从零散的攻击事件背后透视出真正的持续攻击行为，包括组合攻击检测技术、大时间跨度的攻击行为分析技术、态势分析技术、情境分析技术，等等。</div>
              <div class="ya-primary-text" style="font-weight: bold;">5. 安全人员的挖掘，提升安全防御技术</div>
              <div class="">要实现对这种有组织隐蔽性极高的攻击攻击，除了监测/检测技术之外，还需要依靠强有力的专业分析服务做支撑，通过专家团队和他们的最佳实践，不断充实安全知识库，进行即时的可疑代码分析、渗透测试、漏洞验证，等等。安全专家的技能永远是任何技术都无法完全替代的。</div>
            </div>
              `,
      },
      {
        name: "APT组织",
        content: `
            <div class="ya-regular-text lh-30">
              <div style="padding-bottom: 13px;">随着APT攻击事件的频频曝光，APT攻击的威胁已经影响到国家安全、地缘政治及经济利益等诸多方面，全球各安全厂商、研究院以及第三方机构纷纷投入到APT攻击组织的研究中。目前全球安全机构共发现了数百个攻击组织，其中部分攻击组织有着深厚背景支持。随着不断曝光及深度挖掘，隐藏的攻击组织逐渐浮出水面，其背景也日渐明朗。<br />
下图是一些常见的APT攻击组织及地域归属。</div>
              <img style="width: 96%" src="${icon_apt_word}" />
            </div>
              `,
      },
    ],
  },
]);

//当前激活nav栏高亮显示标题的下标
const moveIndex = ref(0);
// 展示回到顶部按钮
const showTop = ref(false);

//页面中每一栏内容的高度数组
const contentHeightList = ref([]);

// 点击nav栏后
const itemClick = (index) => {
  // 获取父元素的dom元素
  const pageScrooll = document.getElementById("yaContent");
  // 激活当前高亮nav栏
  // moveIndex.value = index;
  // 点击后滚动到相应的区域
  pageScrooll!.scrollTo({
    top: pageScrooll!.children[index].offsetTop - 20, //举例：用户点击 第二个标签后 页面就会滚动到第二个标签的高度
    behavior: "smooth", //丝滑滚动
  });
};

// 获取页面中每一栏内容的高度数组
const getChildrenHeight = () => {
  // 获得他们的父元素节点
  const pageScrooll = document.getElementById("yaContent");
  let arr = [];
  // 将所有子元素的高度放入arr
  for (let i = 0; i < catalogue.value.length; i++) {
    // 把所有获得到的子元素高度都放入arr中
    arr.push(pageScrooll.children[i].offsetTop - 20);
  }
  // 给这个arr兜底，这样可以解决最后一个内容栏监听不到的bug，注意：如果最后一栏内容高度低于滚动条当前的高度，也不会高亮显示最后一栏的标题哦
  arr.push(Number.MAX_VALUE);
  contentHeightList.value = arr;
};

// 监听滚轮
const handleScroll = () => {
  const pageScrooll = document.getElementById("yaContent");
  // 获得当前的滚轮高度
  var scrollTop = pageScrooll!.scrollTop;
  showTop.value = scrollTop > 400;
  let Heights = contentHeightList.value;
  console.log(Heights);

  // 只有ContentHeightList存在才监听当前高度
  if (Heights) {
    // console.log(scrollTop);
    for (let i = 0; i < Heights.length; i++) {
      // 如果滚轮高度大于当前所在的子元素高度 并且 滚轮高度小于下一个子元素的高度 ，那么说明滚轮在当前内容中，就激活当前的nav栏
      if (scrollTop >= Heights[i] && scrollTop <= Heights[i + 1]) {
        // 那么就激活当前的nav栏
        moveIndex.value = i;
      }
    }
  }
};

// 回到顶部
const handleScollTop = () => {
  const pageScrooll = document.getElementById("yaContent");
  pageScrooll!.scrollTo({
    top: 0, //举例：用户点击 第二个标签后 页面就会滚动到第二个标签的高度
    behavior: "smooth", //丝滑滚动
  });
};

onMounted(() => {
  // 监听滚动
  window.addEventListener("scroll", handleScroll, true);
  window.addEventListener("resize", getChildrenHeight, true);
  setTimeout(() => {
    getChildrenHeight();
  }, 200);
});
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll, true);
  window.removeEventListener("resize", getChildrenHeight, true);
});
</script>
<style lang="scss">
.knowledgeBaseCard {
  .lh-30 {
    line-height: 30px;
  }

  .pb-35 {
    padding-bottom: 35px;
  }

  .title-center {
    height: 100%;
  }
}
</style>
<style lang="scss" scoped>
.knowledgeBase {
  display: flex;
  height: 100%;
  position: relative;

  .ya-left {
    width: 150px;
    border-right: 1px solid rgba(84, 229, 252, 0.39);
    padding-right: 10px;
    box-sizing: border-box;

    .ya-item {
      display: flex;
      align-items: center;
      margin-bottom: 26px;
      position: relative;
      cursor: pointer;

      &::before {
        position: absolute;
        content: "";
        width: 2px;
        background-color: rgba(84, 229, 252, 0.39);
        height: 50px;
        top: 10px;
        left: 8px;
        z-index: -1;
      }

      &:nth-last-child(1)::before {
        width: 0;
      }

      .ya-item-dot {
        background: #236d8a;
        display: inline-block;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        margin-right: 10px;
        border: 2px solid #104c6a;
      }

      &.active {
        .ya-item-dot {
          background-color: #9aefff;
          border-color: #5bcbe2;
        }
      }

      .ya-item-name {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
      }
    }
  }

  .ya-right {
    padding-left: 24px;
    flex: 1;
    overflow: auto;

    .ya-title {
      margin-bottom: 16px;
      padding: 5px 10px;
      background-color: #13426b;
      font-family: YouSheBiaoTiHei;
      font-size: 20px;

      span {
        position: relative;
        padding-left: 10px;

        &::before {
          position: absolute;
          width: 4px;
          height: 16px;
          content: "";
          background: #9aefff;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
        }
      }
    }

    .yaBox {
      margin-bottom: 40px;

      &:nth-last-child(1) {
        margin-bottom: 0;
      }
    }

    .ya-content {
      margin-bottom: 40px;

      .ya-subtitle {
        display: flex;
        align-items: center;
        padding-left: 0px;

        img {
          margin-right: 4px;
        }

        span {
          font-size: 18px;
          font-family: YouSheBiaoTiHei;
          color: #1ad7ff;
          line-height: 28px;
          text-shadow: 0px 0px 7px rgba(5, 252, 255, 0.64);
          background: linear-gradient(180deg, #ffffff 0%, #1ad7ff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      &>div {
        padding-left: 30px;
      }

      &:nth-last-child(1) {
        margin-bottom: 0;
      }
    }
  }

  .yaTop {
    position: fixed;
    right: 25px;
    bottom: 65px;
    cursor: pointer;

    i {
      font-size: 20px;
      border: 1px solid;
      padding: 8px;
      border-radius: 2px;
      backdrop-filter: blur(25px);
    }
  }
}
</style>
