{"version":3,"sources":["webpack:///./src/components/m-anchor/m-anchor.vue?8e44","webpack:///src/components/m-anchor/m-anchor.vue","webpack:///./src/components/m-anchor/m-anchor.vue?f522","webpack:///./src/components/m-anchor/m-anchor.vue","webpack:///./src/components/m-anchor/m-anchor.vue?3fda"],"names":["render","_vm","this","_h","$createElement","_c","_self","class","isFixed","_l","item","index","key","active","on","$event","scrollTo","_v","_s","menu","staticRenderFns","props","contentDivClass","anchorItem","subNavList","parentMenusCode","data","created","mounted","window","addEventListener","onScroll","destroy","removeEventListener","methods","navContents","forEach","offsetTopArr","push","offsetTop","scrollTop","n","navIndex","smoothDown","targetOffsetTop","STEP","document","body","documentElement","requestAnimationFrame","smoothUp","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,MAAM,CAAC,UAAWN,EAAIO,QAAU,cAAgB,KAAK,CAACH,EAAG,KAAKJ,EAAIQ,GAAIR,EAAc,YAAE,SAASS,EAAKC,GAAO,OAAON,EAAG,KAAK,CAACO,IAAID,GAAO,CAACN,EAAG,IAAI,CAACE,MAAM,CAACM,OAAQZ,EAAIY,SAASF,GAAOG,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOd,EAAIe,SAASL,MAAU,CAACV,EAAIgB,GAAGhB,EAAIiB,GAAGR,EAAKS,cAAa,QAC9XC,EAAkB,GCYtB,G,8BAAA,CACEC,MAAO,CACLC,gBAAiB,CACf,KAAN,OACM,QAAN,eAEIC,WAAY,CACV,KAAN,OACM,QAAN,eAEIC,WAAY,CACV,KAAN,MACM,QAAN,WAAQ,MAAR,KAEIC,gBAAiB,CACf,KAAN,OACM,QAAN,SAGEC,KAnBF,WAoBI,MAAO,CACLb,OAAQ,EACRL,SAAS,IAIbmB,QA1BF,aA+BEC,QA/BF,WAiCIC,OAAOC,iBAAiB,SAAU5B,KAAK6B,UAAU,IAEnDC,QAnCF,WAqCIH,OAAOI,oBAAoB,SAAU/B,KAAK6B,WAE5CG,QAAS,CAqBPH,SArBJ,WAuBM,IAAN,8FAEA,KACMI,EAAYC,SAAQ,SAA1B,GACQC,EAAaC,KAAK5B,EAAK6B,cAGzB,IAAN,kFAEMrC,KAAKM,QAAUgC,EAAY,GAG3B,IADA,IAAN,IACA,mBAGYA,GAAaH,EAAaI,GAAK,MACjCC,EAAWD,GAGfvC,KAAKW,OAAS6B,GAGhB1B,SA7CJ,SA6CA,GAIM,IAAN,8FACA,iBAGA,kFAEA,KAWM,SAAS2B,IAEHH,EAAYI,IAGVA,EAAkBJ,GAAaK,EACjCL,GAAaK,EAEbL,EAAYI,EAEdE,SAASC,KAAKP,UAAYA,EAAY,IACtCM,SAASE,gBAAgBR,UAAYA,EAAY,IAEjDS,sBAAsBN,IAI1B,SAASO,IACHV,EAAYI,IACVJ,EAAYI,GAAmBC,EACjCL,GAAaK,EAEbL,EAAYI,EAEdE,SAASC,KAAKP,UAAYA,EAAY,IACtCM,SAASE,gBAAgBR,UAAYA,EAAY,IACjDS,sBAAsBC,IAnCtBV,EAAYI,EAEdM,KAGR,gBACQP,SCnHyV,I,wBCQ7VQ,EAAY,eACd,EACAnD,EACAoB,GACA,EACA,KACA,WACA,MAIa,aAAA+B,E,kECnBf,yBAAulB,EAAG","file":"js/chunk-991399f6.091f43dc.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{class:['sub-nav', _vm.isFixed ? 'subNavFixed' : '']},[_c('ul',_vm._l((_vm.subNavList),function(item,index){return _c('li',{key:index},[_c('a',{class:{active: _vm.active===index},on:{\"click\":function($event){return _vm.scrollTo(index)}}},[_vm._v(_vm._s(item.menu))])])}),0)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <div :class=\"['sub-nav', isFixed ? 'subNavFixed' : '']\">\r\n        <ul>\r\n            <li v-for=\"(item, index) in subNavList\" :key=\"index\">\r\n              <a :class=\"{active: active===index}\" @click=\"scrollTo(index)\">{{item.menu}}</a>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  props: {\r\n    contentDivClass: {\r\n        type: String,\r\n        default: 'tempcontent'\r\n    },\r\n    anchorItem: {\r\n        type: String,\r\n        default: 'anchor-item'\r\n    },\r\n    subNavList: {\r\n        type: Array,\r\n        default: () => []\r\n    },\r\n    parentMenusCode:  {\r\n        type: String,\r\n        default: 'home'\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      active: 0, // 当前激活的导航索引\r\n      isFixed: false,\r\n      // subNavList: []\r\n    }\r\n  },\r\n  created() {\r\n    // setTimeout(() => {\r\n    //   this.getSubList()\r\n    // }, 300);\r\n  },\r\n  mounted() {\r\n    // 监听滚动事件\r\n    window.addEventListener('scroll', this.onScroll, false)\r\n  },\r\n  destroy() {\r\n    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错\r\n    window.removeEventListener('scroll', this.onScroll)\r\n  },\r\n  methods: {\r\n    //获取各子菜单\r\n    // getSubList() {\r\n    //   let menus = JSON.parse(sessionStorage.getItem('menus'));\r\n    //   let currentMatchMenu = menus.find(el => {\r\n    //     return el.code === 'currentmatch'\r\n    //   })\r\n    //   let currentMatchSubNav = currentMatchMenu.menueVoList\r\n    //   let currentMenu = menus.find(el => {\r\n    //     return el.code === this.parentMenusCode\r\n    //   })\r\n    //   let nowSubNav = this.parentMenusCode === 'currentmatch' ? currentMatchSubNav : currentMenu.menueVoList\r\n    //   if(this.parentMenusCode === 'currentmatch') {\r\n    //     this.subNavList = nowSubNav\r\n    //   } else {\r\n    //     let temp = new Array(currentMatchSubNav.length - nowSubNav.length).join(\",\").split(\",\")\r\n    //     this.subNavList = nowSubNav.concat(temp)\r\n    //   }\r\n\r\n    // },\r\n    // 滚动监听器\r\n    onScroll() {\r\n      // 获取所有锚点元素\r\n      const navContents = document.querySelectorAll(`.${this.contentDivClass} div.${this.anchorItem}`)\r\n      // 所有锚点元素的 offsetTop\r\n      const offsetTopArr = []\r\n      navContents.forEach(item => {\r\n        offsetTopArr.push(item.offsetTop)\r\n      })\r\n      // 获取当前 offsetTop\r\n      let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop\r\n      //  当滚动超过 10 时，实现吸顶效果\r\n      this.isFixed = scrollTop > 10 ? true : false\r\n      // 定义当前点亮的导航下标\r\n      let navIndex = 0\r\n      for (let n = 0; n < offsetTopArr.length; n++) {\r\n        // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见\r\n        // 那么此时导航索引就应该是n了\r\n        if (scrollTop >= offsetTopArr[n] - 112) {\r\n          navIndex = n\r\n        }\r\n      }\r\n      this.active = navIndex\r\n    },\r\n    // 跳转到指定索引的元素\r\n    scrollTo(index) {\r\n      // 获取目标的 offsetTop\r\n      // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1\r\n      // const targetOffsetTop = document.querySelector(`.${this.contentDivClass} div.${this.anchorItem}:nth-child(${index + 1})`).offsetTop\r\n      let allSelector = document.querySelectorAll(`.${this.contentDivClass} div.${this.anchorItem}`)\r\n      let targetOffsetTop = allSelector[index].offsetTop\r\n      //获取页面滚动条的高度\r\n      // 获取当前 offsetTop\r\n      let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop\r\n      // 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋\r\n      const STEP = 50\r\n      // 判断是往下滑还是往上滑\r\n      if (scrollTop > targetOffsetTop) {\r\n        // 往上滑\r\n        smoothUp()\r\n      } else {\r\n        // 往下滑\r\n        if(scrollTop === 0) targetOffsetTop = targetOffsetTop - 112 //初始时导航栏未fixed占空间\r\n        smoothDown()\r\n      }\r\n      // 定义往下滑函数\r\n      function smoothDown() {\r\n        // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置\r\n        if (scrollTop < targetOffsetTop) {\r\n          // 如果和目标相差距离大于等于 STEP 就跳 STEP\r\n          // 否则直接跳到目标点，目标是为了防止跳过了。\r\n          if (targetOffsetTop - scrollTop >= STEP) {\r\n            scrollTop += STEP\r\n          } else {\r\n            scrollTop = targetOffsetTop\r\n          }\r\n          document.body.scrollTop = scrollTop - 112\r\n          document.documentElement.scrollTop = scrollTop - 112\r\n          // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高\r\n          requestAnimationFrame(smoothDown)\r\n        }\r\n      }\r\n      // 定义往上滑函数\r\n      function smoothUp() {\r\n        if (scrollTop > targetOffsetTop) {\r\n          if (scrollTop - targetOffsetTop >= STEP) {\r\n            scrollTop -= STEP\r\n          } else {\r\n            scrollTop = targetOffsetTop\r\n          }\r\n          document.body.scrollTop = scrollTop - 112\r\n          document.documentElement.scrollTop = scrollTop - 112\r\n          requestAnimationFrame(smoothUp)\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"stylus\" scoped rel=\"stylesheet/stylus\">\r\n@import '~common/stylus/base'\r\n.sub-nav\r\n  width: 100%;\r\n  height: 42px;\r\n  line-height: 42px;\r\n  background-color: #222;\r\n  // position: fixed;\r\n  // top: 70px;\r\n  // z-index: 997;\r\n  -webkit-animation: hdnav2-show1 .3s;\r\n  -moz-animation: hdnav2-show1 .3s;\r\n  -o-animation: hdnav2-show1 .3s;\r\n  animation: hdnav2-show1 .3s;\r\n  ul\r\n    display: -webkit-box;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin: 0 auto;\r\n    width: 1140px;\r\n    // padding-right: 240px;\r\n    padding-left: 240px;\r\n    li\r\n      // margin-right: 50px\r\n      a\r\n        cursor: pointer;\r\n        color: #808080;\r\n        font-size:14px;\r\n      a.active, a:hover\r\n        color: #fff\r\n  /* 内容区的样式 */\r\n  .tempcontent {\r\n    background-color: white;\r\n    width: 500px;\r\n  }\r\n  .tempcontent div {\r\n    width: 100%;\r\n    height: 600px;\r\n    font-size: 36px;\r\n    padding: 20px;\r\n    background-color: #7ec384;\r\n  }\r\n  .tempcontent div:nth-child(2n) {\r\n    background-color: #847ec3;\r\n  }\r\n  /* 导航栏的样式 */\r\n  .navs {\r\n    position: fixed;\r\n    top: 80px;\r\n    left: 700px;\r\n    background-color: #efefef;\r\n  }\r\n  .navs li {\r\n    padding: 0 20px;\r\n    line-height: 1.6;\r\n    font-size: 24px;\r\n  }\r\n  /* 当导航被点亮后改变颜色 */\r\n  .navs .active{\r\n    color: #847ec3;\r\n    background-color: #e2e2e2;\r\n  }\r\n.subNavFixed \r\n  position: fixed;\r\n  top: 70px;\r\n  z-index: 997;\r\n  -webkit-animation: hdnav2-show2 .3s;\r\n  -moz-animation: hdnav2-show2 .3s;\r\n  -o-animation: hdnav2-show2 .3s;\r\n  animation: hdnav2-show2 .3s;\r\n  display: block!important\r\n@-webkit-keyframes hdnav2-show1 {\r\n    0% {\r\n        top: 70px;\r\n    }\r\n    100% {\r\n        top: 70px;\r\n    }\r\n}\r\n@keyframes hdnav2-show1 {\r\n    0% {\r\n      top: 70px\r\n    }\r\n    100% {\r\n      top: 70px\r\n    }\r\n}\r\n@-webkit-keyframes hdnav2-show2 {\r\n    0% {\r\n        top: -42px\r\n    }\r\n\r\n    100% {\r\n        top: 70px\r\n    }\r\n}\r\n@keyframes hdnav2-show2 {\r\n    0% {\r\n        top: -42px\r\n    }\r\n\r\n    100% {\r\n        top: 70px\r\n    }\r\n}\r\n/* 大屏幕 ：大于等于1200px*/\r\n@media (min-width: 1920px)  {\r\n  .sub-nav ul {\r\n    width: 1560px;\r\n    min-width: 1140px;\r\n  }\r\n}\r\n@media (min-width: 1500px) and (max-width: 1920px) {\r\n  .sub-nav ul {\r\n    width: calc(100% - 360px);\r\n    min-width: 1140px;\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./m-anchor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./m-anchor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./m-anchor.vue?vue&type=template&id=4fa54a36&scoped=true&\"\nimport script from \"./m-anchor.vue?vue&type=script&lang=js&\"\nexport * from \"./m-anchor.vue?vue&type=script&lang=js&\"\nimport style0 from \"./m-anchor.vue?vue&type=style&index=0&id=4fa54a36&lang=stylus&scoped=true&rel=stylesheet%2Fstylus&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"4fa54a36\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./m-anchor.vue?vue&type=style&index=0&id=4fa54a36&lang=stylus&scoped=true&rel=stylesheet%2Fstylus&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./m-anchor.vue?vue&type=style&index=0&id=4fa54a36&lang=stylus&scoped=true&rel=stylesheet%2Fstylus&\""],"sourceRoot":""}