【web前端】17.实现点击跳转锚点部分(vue)

 

      <div class="big-data-content-bottom">
        <section class="content-bottom-one" id="one">
          <p class="content-bottom-one-title">平台技术框架</p>
          <p class="content-bottom-one-content">&nbsp;&nbsp;&nbsp;&nbsp;
            海隆行建在Hadoop分布式文件系统（HDFS）上重新优化集成了自己海量数据存储平台产品(HZ DATA)，
            HZ DATA能提供高吞吐量的数据访问，可以在大规模数据集上的应用实现低时延、高并发的数据查询。
            HZ DATA并且还是一个高度容错性的系统，适合部署在廉价的机器集群上。在中国金融及数据领域拥有广泛的客户。</p>
          <img class="content-bottom-one-img" src="../images/bigData/u47.png">
        </section>
        <section class="content-bottom-two" id="two">
          <p class="content-bottom-two-title">开放平台的目标</p>
          <div class="content-bottom-two-list">
            <img src="../images/bigData/u68.png">
            <span>提供开发者熟悉学习完整大数据框架构成及各种组件的实例和专家咨询</span>
          </div>
          <div class="content-bottom-two-list">
            <img src="../images/bigData/u68.png">
            <span>为各部门提供大数据平台架构设计提案的技术支持咨询</span>
          </div>
          <div class="content-bottom-two-list">
            <img src="../images/bigData/u68.png">
            <span>提供验证大数据技术可行性，性能比较的测试环境</span>
          </div>
        </section>
        <section class="content-bottom-three" id="three">
          <p class="content-bottom-three-title">平台功能</p>
          <div class="three-detail">
            <div class="three-detail-title">
              <p class="three-detail-title-left">Hadoop集群数据库运维</p>
              <p class="three-detail-title-right">数据库开发功能测试</p>
            </div>
            <div class="three-detail-left-list">
              <div class="three-detail-left-list-left">
                <img src="../images/bigData/u71.png">
                <span>资源监控</span>
              </div>
              <div class="three-detail-left-list-right">
                <img src="../images/bigData/u79.png">
                <span>NoSQL数据查询以及可视化</span>
              </div>
            </div>
            <div class="three-detail-left-list">
              <div class="three-detail-left-list-left">
                <img src="../images/bigData/u68.png">
                <span>作业任务流监控</span>
              </div>
              <div class="three-detail-left-list-right">
                <img src="../images/bigData/u80.png">
                <span>HDFS数据管理</span>
              </div>
            </div>
            <div class="three-detail-left-list">
              <div class="three-detail-left-list-left">
                <img src="../images/bigData/u69.png">
                <span>集群管理操作</span>
              </div>
              <div class="three-detail-left-list-right">
                <img src="../images/bigData/u81.png">
                <span>运行类SQL脚本及查看运行结果</span>
              </div>
            </div>
            <div class="three-detail-left-list">
              <div class="three-detail-left-list-left">
                <img src="../images/bigData/u70.png">
                <span>配置管理</span>
              </div>
              <div class="three-detail-left-list-right">
                <img src="../images/bigData/u82.png">
                <span>数据导入/传统数据库同步</span>
              </div>
            </div>
            <div class="three-detail-left-list">
              <div class="three-detail-left-list-left">
                <img src="../images/bigData/u72.png">
                <span>任务脚本运行</span>
              </div>
              <div class="three-detail-left-list-right">
                <img src="../images/bigData/u83.png">
                <span>ODBC/JDBC兼容性验证</span>
              </div>
            </div>
            <div class="three-detail-left-list">
                <div class="three-detail-left-list-left">
                  <!--<img src="../images/bigData/u72.png">-->
                  <!--<span>任务脚本运行</span>-->
                </div>
                <div class="three-detail-left-list-right">
                  <img src="../images/bigData/u84.png">
                  <span>数据流处理</span>
                </div>
            </div>
          </div>
        </section>
        <section class="content-bottom-four" id="four">
          <p class="content-bottom-four-title">使用手顺</p>
        </section>
      </div>
      <div class="fix-left">
        <p class="fix-left-item" id="fix-left-item1" @click="goAnchor('#one')">平台技术框架</p>
        <p class="fix-left-item" id="fix-left-item2" @click="goAnchor('#two')">开放平台的目标</p>
        <p class="fix-left-item" id="fix-left-item3" @click="goAnchor('#three')">平台功能</p>
        <p class="fix-left-item" id="fix-left-item4" @click="goAnchor('#four')">使用手顺</p>
      </div>

methods: {
  goAnchor(selector) {
   // this.activeBtn = index;
   // document.querySelector("#app-root").scrollTop =                      this.$el.querySelector(selector).offsetTop;
      this.$el.querySelector(selector).scrollIntoView();
    },
}