{"version":3,"sources":["webpack:///./src/components/Morebtn.vue?925c","webpack:///./src/views/Product.vue?383b","webpack:///./src/components/ProductHead.vue?1417","webpack:///./src/components/Morebtn.vue?842b","webpack:///src/components/Morebtn.vue","webpack:///./src/components/Morebtn.vue?e166","webpack:///./src/components/Morebtn.vue","webpack:///./src/components/ProductTop.vue?21ce","webpack:///./src/views/Product.vue?dea8","webpack:///./src/components/ProductHead.vue?a2fa","webpack:///src/components/ProductHead.vue","webpack:///./src/components/ProductHead.vue?505e","webpack:///./src/components/ProductHead.vue","webpack:///./src/components/ProductTop.vue?ebb8","webpack:///src/components/ProductTop.vue","webpack:///./src/components/ProductTop.vue?f873","webpack:///./src/components/ProductTop.vue","webpack:///src/views/Product.vue","webpack:///./src/views/Product.vue?cec8","webpack:///./src/views/Product.vue"],"names":["_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Morebtn_vue_vue_type_style_index_0_id_42a12837_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Morebtn_vue_vue_type_style_index_0_id_42a12837_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default","n","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Product_vue_vue_type_style_index_0_id_6f57e7a4_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Product_vue_vue_type_style_index_0_id_6f57e7a4_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ProductHead_vue_vue_type_style_index_0_id_148d908c_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ProductHead_vue_vue_type_style_index_0_id_148d908c_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default","render","_vm","this","_h","$createElement","_c","_self","staticClass","class","dark","on","click","btnClick","_v","_s","text","staticRenderFns","Morebtnvue_type_script_lang_js_","props","Boolean","String","methods","$emit","components_Morebtnvue_type_script_lang_js_","component","Object","componentNormalizer","__webpack_exports__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ProductTop_vue_vue_type_style_index_0_id_110a892c_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ProductTop_vue_vue_type_style_index_0_id_110a892c_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default","attrs","id","img","item","BANNER","title","PRONAME","sub","EN","products","PRODUCTS","weight","WEIGHT","ref","flavor","FLAVOR","packing","PACKING","imgs","domProps","innerHTML","CONTENT","$t","btn-click","gotoFatherPage","ProductHeadvue_type_template_id_148d908c_scoped_true_render","src","_f","data-width","data-height","ProductHeadvue_type_template_id_148d908c_scoped_true_staticRenderFns","ProductHeadvue_type_script_lang_js_","components_ProductHeadvue_type_script_lang_js_","ProductHead","ProductTopvue_type_template_id_110a892c_scoped_true_render","_l","key","ID","data-lazyload","PICURL","onPaginationPrev","xlink:href","onPaginationNext","_m","ProductTopvue_type_template_id_110a892c_scoped_true_staticRenderFns","ProductTopvue_type_script_lang_js_","Array","beforeDestroy","tlAutoplayTopSlider","kill","mounted","autoplayTopSlider","init","initDOM","topSlider","slider","onSliderTopChange","total","dom","topSliderNav","setAutoSlideTopSlider","DomTopSlider","$el","firstSlide","topSlides","topSliderNavPage","sliderNavTotal","setAttribute","length","t","concat","TweenMax","delayedCall","slideTopSlider","bind","next","e","i","canSlide","r","o","a","l","offsetHeight","h","onComplete","to","opacity","y","ease","easeInOut","set","updateTopNavPage","page","easeIn","easeOut","console","log","sens","components_ProductTopvue_type_script_lang_js_","ProductTop_component","ProductTop","Productvue_type_script_lang_js_","components","Morebtn","data","document","fechData","$nextTick","window","scrollBar","scrollTop","_this","$route","params","url0","util_url","axios_default","get","then","res","$refs","productTop","url","proarr","fid","$router","push","views_Productvue_type_script_lang_js_","Product_component"],"mappings":"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","file":"js/chunk-75652f62.5ec27f6a.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Morebtn.vue?vue&type=style&index=0&id=42a12837&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Morebtn.vue?vue&type=style&index=0&id=42a12837&lang=scss&scoped=true&\"","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Product.vue?vue&type=style&index=0&id=6f57e7a4&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Product.vue?vue&type=style&index=0&id=6f57e7a4&lang=scss&scoped=true&\"","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductHead.vue?vue&type=style&index=0&id=148d908c&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductHead.vue?vue&type=style&index=0&id=148d908c&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"btn-know ft-16\",class:{ dark: _vm.dark },on:{\"click\":_vm.btnClick}},[_vm._v(_vm._s(_vm.text))])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n<template>\r\n  <div class=\"btn-know ft-16\"\r\n    :class=\"{ dark }\"\r\n    @click=\"btnClick\">{{ text }}</div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  props: {\r\n    dark: Boolean,\r\n    text: String\r\n  },\r\n\r\n  methods: {\r\n    btnClick () {\r\n      this.$emit('btn-click')\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.btn-know {\r\n  cursor: pointer;\r\n  width: 166px;\r\n  height: 64px;\r\n  color: #fff;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  border-color: #fff;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.btn-know.dark {\r\n  color: #03192f;\r\n  border-color: #03192f;\r\n  transition: color 0.4s cubic-bezier(.77,.15,0,.99), background-color 0.4s cubic-bezier(.77,.15,0,.99);\r\n}\r\n.btn-know.dark:hover {\r\n  color: #8fd6ed;\r\n  background-color: #000;\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!./Morebtn.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!./Morebtn.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Morebtn.vue?vue&type=template&id=42a12837&scoped=true&\"\nimport script from \"./Morebtn.vue?vue&type=script&lang=js&\"\nexport * from \"./Morebtn.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Morebtn.vue?vue&type=style&index=0&id=42a12837&lang=scss&scoped=true&\"\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  \"42a12837\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductTop.vue?vue&type=style&index=0&id=110a892c&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductTop.vue?vue&type=style&index=0&id=110a892c&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"main\",attrs:{\"id\":\"product\"}},[_c('ProductHead',{attrs:{\"img\":_vm.item.BANNER,\"title\":_vm.item.PRONAME,\"sub\":_vm.item.EN,\"products\":_vm.item.PRODUCTS,\"weight\":_vm.item.WEIGHT}}),_c('ProductTop',{ref:\"productTop\",attrs:{\"flavor\":_vm.item.FLAVOR,\"packing\":_vm.item.PACKING,\"imgs\":_vm.imgs}}),_c('div',{staticClass:\"color-change\"},[_c('div',{staticClass:\"wrap-1280\"},[_c('div',{staticClass:\"title ft-30\"},[_vm._v(_vm._s(_vm.item.PRONAME))]),_c('div',{staticClass:\"line\"}),_c('div',{staticClass:\"detail ft-14\",domProps:{\"innerHTML\":_vm._s(_vm.item.CONTENT)}}),_c('div',{staticClass:\"btn-wrap\"},[_c('Morebtn',{attrs:{\"dark\":true,\"text\":_vm.$t('btn3')},on:{\"btn-click\":_vm.gotoFatherPage}})],1)])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"product-head\"},[_c('div',{staticClass:\"product-head-bg\"},[_c('img',{staticClass:\"no-resize\",attrs:{\"src\":_vm._f(\"imgFilter\")(_vm.img,'/images/vacances-en-laponie-en-hiver-707.jpg'),\"data-width\":\"1920\",\"data-height\":\"1040\"}})]),_c('div',{staticClass:\"page-head-container\"},[_c('div',{staticClass:\"title ft-40\"},[_vm._v(_vm._s(_vm.title))]),_c('div',{staticClass:\"sub ff-dr ft-25\"},[_vm._v(_vm._s(_vm.sub))])]),_c('div',{staticClass:\"page-head-bottom\"},[_c('div',{staticClass:\"wrap\"},[_c('div',{staticClass:\"page-head-bottom-item\"},[_c('div',{staticClass:\"name\"},[_c('span',{staticClass:\"big ft-26\"},[_vm._v(_vm._s(_vm.$t('product.head[0]')))]),_c('span',{staticClass:\"small ft-16\"},[_vm._v(\"Products\")])]),_c('div',{staticClass:\"info ft-14\"},[_vm._v(\"\\n          \"+_vm._s(_vm.products)+\"\\n        \")])]),_c('div',{staticClass:\"page-head-bottom-item\"},[_c('div',{staticClass:\"name\"},[_c('span',{staticClass:\"big ft-26\"},[_vm._v(_vm._s(_vm.$t('product.head[1]')))]),_c('span',{staticClass:\"small ft-16\"},[_vm._v(\"Net Weight/Drain Weight\")])]),_c('div',{staticClass:\"info ft-14\"},[_vm._v(\"\\n          \"+_vm._s(_vm.weight)+\"\\n        \")])])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n<template>\r\n  <div class=\"product-head\">\r\n    <div class=\"product-head-bg\">\r\n      <img\r\n        :src=\"img | imgFilter('/images/vacances-en-laponie-en-hiver-707.jpg')\"\r\n        class=\"no-resize\"\r\n        data-width=\"1920\"\r\n        data-height=\"1040\" />\r\n    </div>\r\n\r\n    <div class=\"page-head-container\">\r\n      <div class=\"title ft-40\">{{ title }}</div>\r\n      <div class=\"sub ff-dr ft-25\">{{ sub }}</div>\r\n    </div>\r\n\r\n    <div class=\"page-head-bottom\">\r\n      <div class=\"wrap\">\r\n        <div class=\"page-head-bottom-item\">\r\n          <div class=\"name\">\r\n            <span class=\"big ft-26\">{{$t('product.head[0]')}}</span>\r\n            <span class=\"small ft-16\">Products</span>\r\n          </div>\r\n          <div class=\"info ft-14\">\r\n            {{ products }}\r\n          </div>\r\n        </div>\r\n        <div class=\"page-head-bottom-item\">\r\n          <div class=\"name\">\r\n            <span class=\"big ft-26\">{{$t('product.head[1]')}}</span>\r\n            <span class=\"small ft-16\">Net Weight/Drain Weight</span>\r\n          </div>\r\n          <div class=\"info ft-14\">\r\n            {{ weight }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  props: {\r\n    img: String,\r\n    title: String,\r\n    sub: String,\r\n    products: String,\r\n    weight: String\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.product-head {\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  position: relative;\r\n  background-color: #242a3a;\r\n}\r\n\r\n.product-head:after {\r\n  content: \"\";\r\n  display: block;\r\n  position: absolute;\r\n  bottom: 0;\r\n  width: 100%;\r\n  height: 200px;\r\n  left: 0;\r\n  z-index: 2;\r\n  background: -webkit-gradient(linear,left top,left bottom,from(rgba(36,42,58,0)),color-stop(80%,#242a3a));\r\n  background: linear-gradient(rgba(36,42,58,0),#242a3a 80%);\r\n}\r\n\r\n.product-head-bg {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  opacity: 0.15;\r\n}\r\n\r\n.page-head-container {\r\n  text-align: center;\r\n  position: relative;\r\n  width: 100%;\r\n  z-index: 3;\r\n  top: 53%;\r\n  transform: translateY(-50%) translateZ(0);\r\n\r\n  .title {\r\n    color: #fff;\r\n    line-height: 100px;\r\n  }\r\n  .sub {\r\n    color: #fff;\r\n    line-height: 50px;\r\n  }\r\n}\r\n\r\n.page-head-bottom {\r\n  font-size: 0;\r\n  position: absolute;\r\n  bottom: 0;\r\n  width: 100%;\r\n  max-width: 1280px;\r\n  z-index: 3;\r\n  left: 50%;\r\n  box-sizing: border-box;\r\n  transform: translateX(-50%);\r\n\r\n  .wrap {\r\n    width: 100%;\r\n    display: flex;\r\n  }\r\n}\r\n\r\n.page-head-bottom:after {\r\n  content: \"\";\r\n  display: block;\r\n  height: 1px;\r\n  position: absolute;\r\n  bottom: 0;\r\n  background-color: #fff;\r\n  opacity: 0.1;\r\n  width: 100%;\r\n  left: 0;\r\n}\r\n\r\n.page-head-bottom-item {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 32px;\r\n\r\n  .name {\r\n    color: #c5e3f7;\r\n    display: flex;\r\n    align-items: baseline;\r\n\r\n    span {\r\n      display: inline-block;\r\n      padding: 16px 4px;\r\n    }\r\n  }\r\n  .info {\r\n    padding: 4px;\r\n    color: #fff;\r\n    line-height: 32px;\r\n    word-break: break-all;\r\n  }\r\n}\r\n@media(max-width: 768px){\r\n  .product-head{\r\n    height: auto;\r\n    &::after{\r\n      display: none;\r\n    }\r\n  }\r\n  .product-head-bg{\r\n    position: static;\r\n    height: auto;\r\n  }\r\n  .page-head-container{\r\n    transform: translate(0);\r\n    top: 0;\r\n    .title{\r\n      font-size: 20px;\r\n      line-height: 50px;\r\n    }\r\n  }\r\n  .page-head-bottom{\r\n    position: static;\r\n    transform: translate(0);\r\n    .wrap{\r\n      flex-direction: column;\r\n      .page-head-bottom-item .name .big{\r\n        font-size: 20px;\r\n      }\r\n    }\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!./ProductHead.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!./ProductHead.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ProductHead.vue?vue&type=template&id=148d908c&scoped=true&\"\nimport script from \"./ProductHead.vue?vue&type=script&lang=js&\"\nexport * from \"./ProductHead.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ProductHead.vue?vue&type=style&index=0&id=148d908c&lang=scss&scoped=true&\"\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  \"148d908c\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:\"product-top observable\"},[_c('section',{staticClass:\"product-top-top\"},[_c('div',{staticClass:\"page-head-bottom\"},[_c('div',{staticClass:\"wrap\"},[_c('div',{staticClass:\"page-head-bottom-item\"},[_c('div',{staticClass:\"name\"},[_c('span',{staticClass:\"big ft-26\"},[_vm._v(_vm._s(_vm.$t('product.head[2]')))]),_c('span',{staticClass:\"small ft-16\"},[_vm._v(\"Flavor\")])]),_c('div',{staticClass:\"info ft-14\"},[_vm._v(\"\\n            \"+_vm._s(_vm.flavor)+\"\\n          \")])]),_c('div',{staticClass:\"page-head-bottom-item\"},[_c('div',{staticClass:\"name\"},[_c('span',{staticClass:\"big ft-26\"},[_vm._v(_vm._s(_vm.$t('product.head[3]')))]),_c('span',{staticClass:\"small ft-16\"},[_vm._v(\"Packing\")])]),_c('div',{staticClass:\"info ft-14\"},[_vm._v(\"\\n            \"+_vm._s(_vm.packing)+\"\\n          \")])])])])]),_c('div',{staticClass:\"wrapper-1280 product-top-slider-container\"},[_c('div',{staticClass:\"product-top-slider-container-inner\"},[_c('div',{staticClass:\"product-top-slider\",attrs:{\"id\":\"product-top-slider\"}},_vm._l((_vm.imgs),function(item){return _c('div',{key:item.ID,staticClass:\"product-top-slide img-lazyload-container\"},[_c('img',{staticClass:\"img-lazyload\",attrs:{\"data-lazyload\":\"true\",\"src\":_vm._f(\"imgFilter\")(item.PICURL)}})])}),0),_c('div',{staticClass:\"product-top-slider-nav\"},[_c('div',{staticClass:\"slider-nav-buttons\"},[_c('div',{staticClass:\"slider-nav-item slider-nav-item-prev\",attrs:{\"id\":\"product-top-slider-prev\"},on:{\"click\":_vm.onPaginationPrev}},[_c('div',{staticClass:\"slider-nav-item-icon-container\"},[_c('span',{staticClass:\"slider-nav-item-icon-1\"},[_c('svg',{staticClass:\"icon icon-fleche\"},[_c('use',{attrs:{\"xlink:href\":\"#fleche\"}})])]),_c('span',{staticClass:\"slider-nav-item-icon-2\"},[_c('svg',{staticClass:\"icon icon-fleche\"},[_c('use',{attrs:{\"xlink:href\":\"#fleche\"}})])])])]),_c('div',{staticClass:\"slider-nav-item slider-nav-item-next\",attrs:{\"id\":\"product-top-slider-next\"},on:{\"click\":_vm.onPaginationNext}},[_c('div',{staticClass:\"slider-nav-item-icon-container\"},[_c('span',{staticClass:\"slider-nav-item-icon-1\"},[_c('svg',{staticClass:\"icon icon-fleche\"},[_c('use',{attrs:{\"xlink:href\":\"#fleche\"}})])]),_c('span',{staticClass:\"slider-nav-item-icon-2\"},[_c('svg',{staticClass:\"icon icon-fleche\"},[_c('use',{attrs:{\"xlink:href\":\"#fleche\"}})])])])])]),_vm._m(0),_vm._m(1)])])])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"slider-nav-pagination\"},[_c('span',{staticClass:\"ff-tt ft-60 slider-nav-page\"},[_vm._v(\"01\")]),_c('span',{staticClass:\"ff-tt ft-30 slider-nav-total\"},[_vm._v(\"\\n            03\\n          \")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"slider-progress slider-nav-progress\",attrs:{\"id\":\"product-top-slider-progress\"}},[_c('div',{staticClass:\"slider-progress-inner\"})])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <!-- Top -->\r\n  <section class=\"product-top observable\">\r\n    <section class=\"product-top-top\">\r\n      <div class=\"page-head-bottom\">\r\n        <div class=\"wrap\">\r\n          <div class=\"page-head-bottom-item\">\r\n            <div class=\"name\">\r\n              <span class=\"big ft-26\">{{$t('product.head[2]')}}</span>\r\n              <span class=\"small ft-16\">Flavor</span>\r\n            </div>\r\n            <div class=\"info ft-14\">\r\n              {{ flavor }}\r\n            </div>\r\n          </div>\r\n          <div class=\"page-head-bottom-item\">\r\n            <div class=\"name\">\r\n              <span class=\"big ft-26\">{{$t('product.head[3]')}}</span>\r\n              <span class=\"small ft-16\">Packing</span>\r\n            </div>\r\n            <div class=\"info ft-14\">\r\n              {{ packing }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n\r\n    <div class=\"wrapper-1280 product-top-slider-container\">\r\n      <div class=\"product-top-slider-container-inner\">\r\n        <div class=\"product-top-slider\"\r\n          id=\"product-top-slider\">\r\n          <div v-for=\"item in imgs\"\r\n            :key=\"item.ID\"\r\n            class=\"product-top-slide img-lazyload-container\">\r\n            <img\r\n              data-lazyload=\"true\"\r\n              class=\"img-lazyload\"\r\n              :src=\"item.PICURL | imgFilter\">\r\n          </div>\r\n          <!-- <div class=\"product-top-slide img-lazyload-container\">\r\n            <img\r\n              data-lazyload=\"true\"\r\n              class=\"img-lazyload\"\r\n              src=\"/images/slide1-2.jpg\"\r\n              alt=\"Chien de traineau en Laponie, Finlande\"\r\n              title=\"Chien\"\r\n            >\r\n          </div>\r\n          <div class=\"product-top-slide img-lazyload-container\">\r\n            <img\r\n              data-lazyload=\"true\"\r\n              class=\"img-lazyload\"\r\n              src=\"/images/slide1-3.jpg\"\r\n              alt=\"Hébergements de Hossa\"\r\n              title=\"Hbergements\"\r\n            >\r\n          </div>\r\n          <div class=\"product-top-slide img-lazyload-container\">\r\n            <img\r\n              data-lazyload=\"true\"\r\n              class=\"img-lazyload\"\r\n              src=\"/images/slide1-4.jpg\"\r\n              alt=\"vacances en Laponie en hiver\"\r\n              title=\"vacances\"\r\n            >\r\n          </div> -->\r\n          <!-- <div class=\"product-top-slide img-lazyload-container\">\r\n            <img\r\n              data-lazyload=\"true\"\r\n              class=\"img-lazyload\"\r\n              src=\"/images/slide1-5.jpg\"\r\n              alt=\"Chien de traîneau en laponie\"\r\n              title=\"Chien\"\r\n            >\r\n          </div> -->\r\n        </div>\r\n        <div class=\"product-top-slider-nav\">\r\n          <div class=\"slider-nav-buttons\">\r\n            <div class=\"slider-nav-item slider-nav-item-prev\" id=\"product-top-slider-prev\"\r\n            @click=\"onPaginationPrev\">\r\n              <div class=\"slider-nav-item-icon-container\">\r\n                <span class=\"slider-nav-item-icon-1\">\r\n                  <svg class=\"icon icon-fleche\">\r\n                    <use xlink:href=\"#fleche\"></use>\r\n                  </svg>\r\n                </span>\r\n                <span class=\"slider-nav-item-icon-2\">\r\n                  <svg class=\"icon icon-fleche\">\r\n                    <use xlink:href=\"#fleche\"></use>\r\n                  </svg>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"slider-nav-item slider-nav-item-next\" id=\"product-top-slider-next\"\r\n            @click=\"onPaginationNext\">\r\n              <div class=\"slider-nav-item-icon-container\">\r\n                <span class=\"slider-nav-item-icon-1\">\r\n                  <svg class=\"icon icon-fleche\">\r\n                    <use xlink:href=\"#fleche\"></use>\r\n                  </svg>\r\n                </span>\r\n                <span class=\"slider-nav-item-icon-2\">\r\n                  <svg class=\"icon icon-fleche\">\r\n                    <use xlink:href=\"#fleche\"></use>\r\n                  </svg>\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"slider-nav-pagination\">\r\n            <span class=\"ff-tt ft-60 slider-nav-page\">01</span>\r\n            <span class=\"ff-tt ft-30 slider-nav-total\">\r\n              03\r\n            </span>\r\n          </div>\r\n\r\n          <!-- Progress bar -->\r\n          <div class=\"slider-progress slider-nav-progress\" id=\"product-top-slider-progress\">\r\n            <div class=\"slider-progress-inner\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport Slider from '@/n66/slider.js'\r\nimport {\r\n  qs, qsa, domAddClass, domRemoveClass\r\n} from '@/util/dom.js'\r\nimport { TweenMax, TimelineLite, TweenLite, Power3, Expo } from 'gsap/TweenMax'\r\n\r\nexport default {\r\n  props: {\r\n    flavor: String,\r\n    packing: String,\r\n    imgs: Array\r\n  },\r\n\r\n  // data () {\r\n  //   return {\r\n  //     total: 0\r\n  //   }\r\n  // },\r\n\r\n  // computed: {\r\n  //   t () {\r\n  //     if (this.total < 10) {\r\n  //       return `0${this.total}`\r\n  //     }\r\n  //     return this.total\r\n  //   }\r\n  // },\r\n\r\n  beforeDestroy () {\r\n    this.tlAutoplayTopSlider && this.tlAutoplayTopSlider.kill()\r\n    this.tlAutoplayTopSlider = null\r\n  },\r\n\r\n  mounted () {\r\n    this.autoplayTopSlider = true\r\n\r\n    // this.init()\r\n  },\r\n\r\n  methods: {\r\n    init () {\r\n      this.initDOM()\r\n\r\n      this.topSlider =\r\n        new Slider('product-top-slider', this.onSliderTopChange, true, true)\r\n\r\n      if (this.total === 0 || this.total === 1) {\r\n        domAddClass(this.topSliderNav, 'disable')\r\n      }\r\n\r\n      this.setAutoSlideTopSlider()\r\n    },\r\n\r\n    initDOM () {\r\n      this.DomTopSlider = qs('.product-top-slider', this.$el)\r\n      this.firstSlide = qs('.product-top-slide', this.$el)\r\n      this.topSlides = qsa('.product-top-slide', this.$el)\r\n      this.topSliderNavPage = qs('.slider-nav-page', this.$el)\r\n      this.topSliderNav = qs('.product-top-slider-nav', this.$el)\r\n      this.sliderNavTotal = qs('.slider-nav-total', this.$el)\r\n\r\n      this.DomTopSlider.setAttribute('data-total', this.imgs.length)\r\n      domAddClass(this.firstSlide, 'active')\r\n\r\n      const t = this.imgs.length > 10\r\n        ? this.imgs.length\r\n        : `0${this.imgs.length}`\r\n      this.sliderNavTotal.innerHTML = t\r\n    },\r\n\r\n    setAutoSlideTopSlider () {\r\n      this.tlAutoplayTopSlider = TweenMax.delayedCall(5, function () {\r\n        this.autoplayTopSlider && this.slideTopSlider()\r\n      }.bind(this))\r\n    },\r\n\r\n    slideTopSlider () {\r\n      this.tlAutoplayTopSlider.kill()\r\n      this.topSlider.next()\r\n    },\r\n\r\n    onSliderTopChange (t, e) {\r\n      var i = this\r\n      i.topSlider.canSlide = false\r\n      i.tlAutoplayTopSlider && i.tlAutoplayTopSlider.kill()\r\n      var n = qsa('.active', i.DomTopSlider)\r\n      var r = i.topSlides[t]\r\n      var o = qsa('.active img', i.DomTopSlider)\r\n      var a = qs('img', r)\r\n      var l = i.DomTopSlider.offsetHeight\r\n      var h = new TimelineLite({\r\n        onComplete: function () {\r\n          domRemoveClass(n[0], 'active')\r\n          domAddClass(r, 'active')\r\n          i.topSlider.canSlide = true\r\n          i.setAutoSlideTopSlider()\r\n        }\r\n      })\r\n\r\n      h.to(n, 1, {\r\n        opacity: 1,\r\n        y: e * -l,\r\n        ease: Power3.easeInOut\r\n      }).to(o, 1, {\r\n        opacity: 1,\r\n        y: e * l / 1.5,\r\n        ease: Power3.easeInOut\r\n      }, 0)\r\n\r\n      h.set(r, {\r\n        opacity: 1,\r\n        y: e * l\r\n      }, 0).set(a, {\r\n        opacity: 1,\r\n        y: e * -l / 1.5\r\n      }, 0).to(r, 1, {\r\n        opacity: 1,\r\n        y: 0,\r\n        ease: Power3.easeInOut\r\n      }, 0).to(a, 1, {\r\n        opacity: 1,\r\n        y: 0,\r\n        ease: Power3.easeInOut\r\n      }, 0)\r\n\r\n      this.updateTopNavPage()\r\n    },\r\n\r\n    updateTopNavPage () {\r\n      var t = this.topSlider.page + 1\r\n      t < 10 && (t = '0' + t)\r\n      TweenLite.to(this.topSliderNavPage, 0.8, {\r\n        y: 80,\r\n        ease: Expo.easeIn,\r\n        onComplete: function () {\r\n          this.topSliderNavPage.innerHTML = t\r\n          TweenLite.set(this.topSliderNavPage, {\r\n            y: -80,\r\n            ease: Expo.easeOut\r\n          })\r\n          TweenLite.to(this.topSliderNavPage, 0.8, {\r\n            y: 0,\r\n            ease: Expo.easeOut\r\n          })\r\n        }.bind(this)\r\n      }, 0)\r\n    },\r\n\r\n    onPaginationNext () {\r\n      console.log('onPaginationNext')\r\n      this.topSlider.sens = 1\r\n      this.topSlider.set()\r\n    },\r\n\r\n    onPaginationPrev () {\r\n      console.log('onPaginationPrev')\r\n      this.topSlider.sens = -1\r\n      this.topSlider.set()\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.product-top {\r\n  padding-top: 40px;\r\n  font-size: 0;\r\n  line-height: 0;\r\n  position: relative;\r\n  // padding-bottom: 80px;\r\n  background-color: #242a3a;\r\n  background: url(/images/pattern-blue.jpg) repeat;\r\n}\r\n\r\n.product-top-top {\r\n  position: relative;\r\n  height: 128px;\r\n}\r\n\r\n.page-head-bottom {\r\n  font-size: 0;\r\n  position: absolute;\r\n  bottom: 0;\r\n  width: 100%;\r\n  max-width: 1280px;\r\n  z-index: 3;\r\n  left: 50%;\r\n  box-sizing: border-box;\r\n  transform: translateX(-50%);\r\n\r\n  .wrap {\r\n    width: 100%;\r\n    display: flex;\r\n  }\r\n}\r\n\r\n.page-head-bottom-item {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 32px;\r\n\r\n  .name {\r\n    color: #c5e3f7;\r\n    display: flex;\r\n    align-items: baseline;\r\n\r\n    span {\r\n      display: inline-block;\r\n      padding: 16px 4px;\r\n    }\r\n  }\r\n  .info {\r\n    padding: 4px;\r\n    color: #fff;\r\n    line-height: 32px;\r\n  }\r\n}\r\n\r\n.slider-nav-buttons {\r\n  position: relative;\r\n  padding-top: 145px;\r\n}\r\n\r\n.slider-nav-item {\r\n  display: block;\r\n  margin: 0 auto;\r\n  width: 60px;\r\n  height: 60px;\r\n  position: relative;\r\n  margin-bottom: 16px;\r\n  -webkit-transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  cursor: pointer;\r\n}\r\n\r\n.slider-nav-item:after,\r\n.slider-nav-item:before {\r\n  content: \"\";\r\n  display: block;\r\n  border: 4px solid #2e3448;\r\n  border-radius: 100%;\r\n  position: absolute;\r\n  width: 52px;\r\n  height: 52px;\r\n  left: 0;\r\n  top: 0;\r\n}\r\n\r\n.slider-nav-item:before {\r\n  -webkit-transform: scale(1);\r\n  transform: scale(1);\r\n  -webkit-transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\r\n    -webkit-transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\r\n  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\r\n    -webkit-transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\r\n  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\r\n    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\r\n  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\r\n    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms,\r\n    -webkit-transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\r\n}\r\n\r\n.slider-nav-item:after {\r\n  border-color: #96daf0;\r\n  opacity: 0;\r\n  -webkit-transform: scale(1.3);\r\n  transform: scale(1.3);\r\n  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    -webkit-transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    -webkit-transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),\r\n    -webkit-transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n}\r\n\r\n.slider-nav-item-icon-container {\r\n  position: absolute;\r\n  top: 4px;\r\n  left: 4px;\r\n  width: 52px;\r\n  height: 52px;\r\n  border-radius: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n.slider-nav-item .icon {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  margin-top: -8px;\r\n  margin-left: -8px;\r\n  width: 16px;\r\n  height: 16px;\r\n  fill: #fff;\r\n  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n}\r\n\r\n.slider-nav-item-icon-1,\r\n.slider-nav-item-icon-2 {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  top: 0;\r\n  left: 0;\r\n  opacity: 1;\r\n  -webkit-transition: opacity 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s,\r\n    -webkit-transform 0s cubic-bezier(0.77, 0, 0.175, 1) 0s;\r\n  transition: opacity 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s,\r\n    -webkit-transform 0s cubic-bezier(0.77, 0, 0.175, 1) 0s;\r\n  transition: transform 0s cubic-bezier(0.77, 0, 0.175, 1) 0s,\r\n    opacity 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;\r\n  transition: transform 0s cubic-bezier(0.77, 0, 0.175, 1) 0s,\r\n    opacity 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s,\r\n    -webkit-transform 0s cubic-bezier(0.77, 0, 0.175, 1) 0s;\r\n}\r\n\r\n.slider-nav-item-icon-2 {\r\n  opacity: 0;\r\n  -webkit-transform: translateX(-80px);\r\n  transform: translateX(-80px);\r\n  -webkit-transition: opacity 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s,\r\n    -webkit-transform 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;\r\n  transition: opacity 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s,\r\n    -webkit-transform 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;\r\n  transition: transform 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s,\r\n    opacity 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;\r\n  transition: transform 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s,\r\n    opacity 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s,\r\n    -webkit-transform 0s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;\r\n}\r\n\r\n.slider-nav-item-prev .icon {\r\n  -webkit-transform: scaleX(-1);\r\n  transform: scaleX(-1);\r\n}\r\n\r\n.slider-nav-item-prev .slider-nav-item-icon-2 {\r\n  -webkit-transform: translateX(80px);\r\n  transform: translateX(80px);\r\n}\r\n\r\n.slider-nav-item:hover:after {\r\n  opacity: 1;\r\n  -webkit-transform: scale(1);\r\n  transform: scale(1);\r\n  -webkit-transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 50ms,\r\n    -webkit-transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;\r\n  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 50ms,\r\n    -webkit-transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;\r\n  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 50ms,\r\n    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;\r\n  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 50ms,\r\n    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms,\r\n    -webkit-transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;\r\n}\r\n\r\n.slider-nav-item:hover:before {\r\n  opacity: 0;\r\n  -webkit-transform: scale(0.7);\r\n  transform: scale(0.7);\r\n  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    -webkit-transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    -webkit-transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),\r\n    -webkit-transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n}\r\n\r\n.slider-nav-item:hover .slider-nav-item-icon-1 {\r\n  opacity: 0;\r\n  -webkit-transform: translateX(80px);\r\n  transform: translateX(80px);\r\n  -webkit-transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);\r\n  transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);\r\n  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);\r\n  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);\r\n}\r\n\r\n.slider-nav-item:hover .slider-nav-item-icon-2 {\r\n  opacity: 1;\r\n  -webkit-transform: translateX(0);\r\n  transform: translateX(0);\r\n  -webkit-transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);\r\n  transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);\r\n  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);\r\n  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1),\r\n    -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);\r\n}\r\n\r\n.slider-nav-item-prev:hover .slider-nav-item-icon-1 {\r\n  -webkit-transform: translateX(-80px);\r\n  transform: translateX(-80px);\r\n}\r\n\r\n.slider-nav-pagination {\r\n  display: block;\r\n  color: #fff;\r\n  position: relative;\r\n  margin-top: 60px;\r\n  overflow: hidden;\r\n  height: 50px;\r\n  padding-top: 16px;\r\n  padding-bottom: 16px;\r\n  box-sizing: content-box;\r\n}\r\n\r\n.slider-nav-page {\r\n  color: #fff;\r\n  width: 85px;\r\n  line-height: 50px;\r\n  display: inline-block;\r\n  text-align: center;\r\n  margin-left: -42px;\r\n}\r\n\r\n.slider-nav-total {\r\n  color: #2e3448;\r\n  display: inline-block;\r\n}\r\n\r\n.slider-nav-progress {\r\n  width: 160px;\r\n  height: 2px;\r\n  background-color: #2e3448;\r\n  position: relative;\r\n  margin-top: 0;\r\n}\r\n\r\n.slider-nav-progress-bar {\r\n  background-color: #96daf0;\r\n  height: 2px;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 20px;\r\n  -webkit-transition: width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n}\r\n\r\n.slider-nav-progress-bar.complete-right {\r\n  right: 0;\r\n  left: auto;\r\n  -webkit-transition: width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n}\r\n\r\n.slider-nav-progress-bar.complete-left {\r\n  left: 0;\r\n  -webkit-transition: width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .slider-nav {\r\n    width: 100%;\r\n    height: 290px;\r\n    position: relative;\r\n    top: 180px;\r\n  }\r\n\r\n  .slider-nav-buttons,\r\n  .slider-nav-pagination {\r\n    display: none;\r\n  }\r\n\r\n  .slider-nav-container {\r\n    max-width: 100%;\r\n    width: 100%;\r\n    padding: 0;\r\n  }\r\n\r\n  .slider-nav-progress {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 50%;\r\n    margin-left: -40px;\r\n    width: 80px;\r\n  }\r\n\r\n  .slider-selection-slides {\r\n    top: 0;\r\n    margin-top: 0;\r\n    left: 50%;\r\n    margin-left: -202px;\r\n  }\r\n}\r\n\r\n.wrapper-1280 {\r\n  width: 100%;\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.product-top-slider-container-inner {\r\n  position: relative;\r\n  top: 260px;\r\n  margin-top: -150px;\r\n}\r\n\r\n.product-top-slider {\r\n  position: relative;\r\n  height: 0;\r\n  // padding-bottom: 41.8%;\r\n  padding-bottom: 48.125%;\r\n  overflow: hidden;\r\n  background-color: #96daf0;\r\n}\r\n\r\n.product-top-slide {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  opacity: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.product-top-slide.active {\r\n  opacity: 1;\r\n}\r\n\r\n.product-top-slide img {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n}\r\n\r\n.product-top-slider-nav {\r\n  display: block;\r\n  position: absolute;\r\n  z-index: 10;\r\n  bottom: 50px;\r\n  left: 30px;\r\n  text-align: center;\r\n}\r\n\r\n.product-top-slider-nav.disable .slider-nav-item {\r\n  opacity: 0.4;\r\n  pointer-events: none;\r\n}\r\n\r\n.product-top-slider-nav .slider-nav-buttons {\r\n  margin-left: -40px;\r\n}\r\n\r\n.product-top-slider-nav .slider-nav-item:before {\r\n  opacity: 0.2;\r\n  border-color: #fff;\r\n}\r\n\r\n.product-top-slider-nav .slider-nav-item:hover:before {\r\n  opacity: 0;\r\n}\r\n\r\n.product-top-slider-nav .slider-nav-total {\r\n  color: #fff;\r\n  opacity: 0.2;\r\n}\r\n\r\n.product-top-slider-nav .slider-nav-progress {\r\n  width: 120px;\r\n  background-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.product-top-slider-nav .slider-nav-page {\r\n  margin-left: -12px;\r\n}\r\n\r\n.product-top-slide {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n}\r\n\r\n.animate .product-top .page-head-bottom-item:after {\r\n  opacity: 0;\r\n}\r\n\r\n.animate .product-top .page-head-bottom-item-txt {\r\n  opacity: 0;\r\n  -webkit-transform: translateY(80px);\r\n  transform: translateY(80px);\r\n}\r\n\r\n.animate .product-top .page-head-bottom-item-icon {\r\n  -webkit-transform: translateY(80px);\r\n  transform: translateY(80px);\r\n}\r\n\r\n.animate .product-top .page-head-bottom-item-icon:before {\r\n  opacity: 0;\r\n  -webkit-transform: scale(1.4);\r\n  transform: scale(1.4);\r\n}\r\n\r\n.animate .product-top .page-head-bottom-item-icon .icon {\r\n  opacity: 0;\r\n  -webkit-transform: scale(1);\r\n  transform: scale(1);\r\n}\r\n\r\n.animate .product-top.visible .page-head-bottom-item:after {\r\n  opacity: 0.1;\r\n  -webkit-transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);\r\n  transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);\r\n}\r\n\r\n.animate .product-top.visible .page-head-bottom-item-txt {\r\n  opacity: 1;\r\n  -webkit-transform: translateY(0);\r\n  transform: translateY(0);\r\n  -webkit-transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n}\r\n\r\n.animate .product-top.visible .page-head-bottom-item-icon {\r\n  -webkit-transform: translateY(0);\r\n  transform: translateY(0);\r\n  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n}\r\n\r\n.animate .product-top.visible .page-head-bottom-item-icon:before {\r\n  opacity: 0.2;\r\n  -webkit-transform: scale(1);\r\n  transform: scale(1);\r\n  -webkit-transition: opacity 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n}\r\n\r\n.animate .product-top.visible .page-head-bottom-item-icon .icon {\r\n  opacity: 1;\r\n  -webkit-transform: scale(1);\r\n  transform: scale(1);\r\n  -webkit-transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n  transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955),\r\n    transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),\r\n    -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n}\r\n\r\n.animate .product-top.visible .page-head-bottom-item:nth-child(1):after {\r\n  -webkit-transition-delay: 0s;\r\n  transition-delay: 0s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(1)\r\n  .page-head-bottom-item-icon {\r\n  -webkit-transition-delay: 0s;\r\n  transition-delay: 0s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(1)\r\n  .page-head-bottom-item-txt {\r\n  -webkit-transition-delay: 0.15s;\r\n  transition-delay: 0.15s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(1)\r\n  .page-head-bottom-item-icon:before {\r\n  -webkit-transition-delay: 0.3s;\r\n  transition-delay: 0.3s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(1)\r\n  .page-head-bottom-item-icon\r\n  .icon {\r\n  -webkit-transition-delay: 0s;\r\n  transition-delay: 0s;\r\n}\r\n\r\n.animate .product-top.visible .page-head-bottom-item:nth-child(2):after {\r\n  -webkit-transition-delay: 0.2s;\r\n  transition-delay: 0.2s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(2)\r\n  .page-head-bottom-item-icon {\r\n  -webkit-transition-delay: 0.2s;\r\n  transition-delay: 0.2s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(2)\r\n  .page-head-bottom-item-txt {\r\n  -webkit-transition-delay: 0.35s;\r\n  transition-delay: 0.35s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(2)\r\n  .page-head-bottom-item-icon:before {\r\n  -webkit-transition-delay: 0.5s;\r\n  transition-delay: 0.5s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(2)\r\n  .page-head-bottom-item-icon\r\n  .icon {\r\n  -webkit-transition-delay: 0.2s;\r\n  transition-delay: 0.2s;\r\n}\r\n\r\n.animate .product-top.visible .page-head-bottom-item:nth-child(3):after {\r\n  -webkit-transition-delay: 0.4s;\r\n  transition-delay: 0.4s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(3)\r\n  .page-head-bottom-item-icon {\r\n  -webkit-transition-delay: 0.4s;\r\n  transition-delay: 0.4s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(3)\r\n  .page-head-bottom-item-txt {\r\n  -webkit-transition-delay: 0.55s;\r\n  transition-delay: 0.55s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(3)\r\n  .page-head-bottom-item-icon:before {\r\n  -webkit-transition-delay: 0.7s;\r\n  transition-delay: 0.7s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(3)\r\n  .page-head-bottom-item-icon\r\n  .icon {\r\n  -webkit-transition-delay: 0.4s;\r\n  transition-delay: 0.4s;\r\n}\r\n\r\n.animate .product-top.visible .page-head-bottom-item:nth-child(4):after {\r\n  -webkit-transition-delay: 0.6s;\r\n  transition-delay: 0.6s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(4)\r\n  .page-head-bottom-item-icon {\r\n  -webkit-transition-delay: 0.6s;\r\n  transition-delay: 0.6s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(4)\r\n  .page-head-bottom-item-txt {\r\n  -webkit-transition-delay: 0.75s;\r\n  transition-delay: 0.75s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(4)\r\n  .page-head-bottom-item-icon:before {\r\n  -webkit-transition-delay: 0.9s;\r\n  transition-delay: 0.9s;\r\n}\r\n\r\n.animate\r\n  .product-top.visible\r\n  .page-head-bottom-item:nth-child(4)\r\n  .page-head-bottom-item-icon\r\n  .icon {\r\n  -webkit-transition-delay: 0.6s;\r\n  transition-delay: 0.6s;\r\n}\r\n\r\n.animate .product-top.visible:after {\r\n  opacity: 1;\r\n  -webkit-transition: opacity 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);\r\n  transition: opacity 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);\r\n}\r\n@media(max-width: 768px){\r\n  .product-top-top{\r\n    height: auto;\r\n  }\r\n  .page-head-bottom{\r\n    position: static;\r\n    transform: translate(0);\r\n    .wrap{\r\n      flex-direction: column;\r\n    }\r\n  }\r\n  .product-top-slider-nav{\r\n    position: static;\r\n    .slider-nav-buttons{\r\n      display: flex;\r\n      margin: 0;\r\n      padding-top: 0;\r\n      .slider-nav-item{\r\n        &:after,\r\n        &:before{\r\n          border-color: #000;\r\n        }\r\n        .icon{\r\n          fill: #000;\r\n          opacity: .2;\r\n          transition: .4s;\r\n        }\r\n        &:hover .icon{\r\n          opacity: 1;\r\n        }\r\n      }\r\n    }\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!./ProductTop.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!./ProductTop.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ProductTop.vue?vue&type=template&id=110a892c&scoped=true&\"\nimport script from \"./ProductTop.vue?vue&type=script&lang=js&\"\nexport * from \"./ProductTop.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ProductTop.vue?vue&type=style&index=0&id=110a892c&lang=scss&scoped=true&\"\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  \"110a892c\",\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <div id=\"product\" class=\"main\">\r\n    <ProductHead :img=\"item.BANNER\"\r\n      :title=\"item.PRONAME\"\r\n      :sub=\"item.EN\"\r\n      :products=\"item.PRODUCTS\"\r\n      :weight=\"item.WEIGHT\" />\r\n\r\n    <!-- Top -->\r\n    <ProductTop ref=\"productTop\"\r\n      :flavor=\"item.FLAVOR\"\r\n      :packing=\"item.PACKING\"\r\n      :imgs=\"imgs\" />\r\n\r\n    <div class=\"color-change\">\r\n      <div class=\"wrap-1280\">\r\n        <div class=\"title ft-30\">{{ item.PRONAME }}</div>\r\n        <div class=\"line\"></div>\r\n        <div class=\"detail ft-14\" v-html=\"item.CONTENT\"></div>\r\n        <div class=\"btn-wrap\">\r\n          <Morebtn :dark=\"true\"\r\n            :text=\"$t('btn3')\"\r\n            @btn-click=\"gotoFatherPage\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport ProductHead from '@/components/ProductHead.vue'\r\nimport ProductTop from '@/components/ProductTop.vue'\r\nimport Morebtn from '@/components/Morebtn.vue'\r\nimport { getProductUrl, getProductSwiperUrl } from '@/util/url.js'\r\nimport axios from 'axios'\r\n\r\nexport default {\r\n  components: {\r\n    ProductHead,\r\n    ProductTop,\r\n    Morebtn\r\n  },\r\n\r\n  data () {\r\n    return {\r\n      imgs: [],\r\n      item: {\r\n        ID: '-1',\r\n        BANNER: '/images/vacances-en-laponie-en-hiver-707.jpg',\r\n        PRONAME: '',\r\n        EN: '',\r\n        PRODUCTS: '',\r\n        WEIGHT: '',\r\n        FLAVOR: '',\r\n        PACKING: '',\r\n        CONTENT: ''\r\n      }\r\n    }\r\n  },\r\n\r\n  mounted () {\r\n    document.title = `${this.$t('nav.products')}-${this.$t('title')}`\r\n    this.fechData()\r\n\r\n    this.$nextTick(() => {\r\n      if (window.scrollBar) window.scrollBar.scrollTop = 0\r\n\r\n      // setTimeout(() => {\r\n      //   this.loader.hide()\r\n      // }, 300)\r\n    })\r\n  },\r\n\r\n  methods: {\r\n    fechData () {\r\n      const id = this.$route.params.id\r\n\r\n      const url0 = getProductSwiperUrl(id)\r\n      axios.get(url0).then(res => {\r\n        if (res && res.data && res.data.length > 0) {\r\n          this.imgs = res.data\r\n          this.$nextTick(() => {\r\n            this.$refs.productTop.init()\r\n          })\r\n        }\r\n      })\r\n\r\n      const url = getProductUrl(id)\r\n      axios.get(url).then(res => {\r\n        if (res && res.data && res.data.proarr) {\r\n          this.item = res.data.proarr\r\n        }\r\n      })\r\n    },\r\n\r\n    gotoFatherPage () {\r\n      const fid = this.$route.params.fid\r\n      this.$router.push(`/products/${fid}`)\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.main, .color-change {\r\n  background: linear-gradient(#cae6f9, #cae6f9, #fff);\r\n}\r\n\r\n.wrap-1280 {\r\n  max-width: 1280px;\r\n  width: 100%;\r\n  margin: 0 auto;\r\n  padding: 300px 30px 30px 30px;\r\n\r\n  .title {\r\n    text-align: center;\r\n    line-height: 100px;\r\n  }\r\n  .line {\r\n    height: 1px;\r\n    background-color: #ddd;\r\n  }\r\n  .detail {\r\n    margin: 100px 0;\r\n    line-height: 32px;\r\n  }\r\n  .btn-wrap {\r\n    display: flex;\r\n    justify-content: center;\r\n  }\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!./Product.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!./Product.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Product.vue?vue&type=template&id=6f57e7a4&scoped=true&\"\nimport script from \"./Product.vue?vue&type=script&lang=js&\"\nexport * from \"./Product.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Product.vue?vue&type=style&index=0&id=6f57e7a4&lang=scss&scoped=true&\"\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  \"6f57e7a4\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}