default-prod-view-images.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. exports.ids = [10];
  2. exports.modules = {
  3. /***/ 190:
  4. /***/ (function(module, exports, __webpack_require__) {
  5. // style-loader: Adds some css to the DOM by adding a <style> tag
  6. // load the styles
  7. var content = __webpack_require__(232);
  8. if(content.__esModule) content = content.default;
  9. if(typeof content === 'string') content = [[module.i, content, '']];
  10. if(content.locals) module.exports = content.locals;
  11. // add CSS to SSR context
  12. var add = __webpack_require__(4).default
  13. module.exports.__inject__ = function (context) {
  14. add("511cbb3f", content, true, context)
  15. };
  16. /***/ }),
  17. /***/ 230:
  18. /***/ (function(module, exports, __webpack_require__) {
  19. module.exports = __webpack_require__.p + "img/play.997c8f1.png";
  20. /***/ }),
  21. /***/ 231:
  22. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  23. "use strict";
  24. __webpack_require__.r(__webpack_exports__);
  25. /* harmony import */ var _node_modules_vue_style_loader_4_1_3_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_4_3_0_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_15_9_8_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_sass_loader_10_2_1_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_2_2_4_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_2_2_1_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_15_9_8_vue_loader_lib_index_js_vue_loader_options_prodViewImages_vue_vue_type_style_index_0_id_457f8ee1_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(190);
  26. /* harmony import */ var _node_modules_vue_style_loader_4_1_3_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_4_3_0_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_15_9_8_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_sass_loader_10_2_1_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_2_2_4_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_2_2_1_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_15_9_8_vue_loader_lib_index_js_vue_loader_options_prodViewImages_vue_vue_type_style_index_0_id_457f8ee1_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_4_1_3_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_4_3_0_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_15_9_8_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_sass_loader_10_2_1_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_2_2_4_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_2_2_1_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_15_9_8_vue_loader_lib_index_js_vue_loader_options_prodViewImages_vue_vue_type_style_index_0_id_457f8ee1_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
  27. /* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_4_1_3_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_4_3_0_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_15_9_8_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_sass_loader_10_2_1_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_2_2_4_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_2_2_1_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_15_9_8_vue_loader_lib_index_js_vue_loader_options_prodViewImages_vue_vue_type_style_index_0_id_457f8ee1_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_4_1_3_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_4_3_0_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_15_9_8_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_sass_loader_10_2_1_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_2_2_4_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_2_2_1_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_15_9_8_vue_loader_lib_index_js_vue_loader_options_prodViewImages_vue_vue_type_style_index_0_id_457f8ee1_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
  28. /***/ }),
  29. /***/ 232:
  30. /***/ (function(module, exports, __webpack_require__) {
  31. // Imports
  32. var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3);
  33. var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__(36);
  34. var ___CSS_LOADER_URL_IMPORT_0___ = __webpack_require__(233);
  35. var ___CSS_LOADER_URL_IMPORT_1___ = __webpack_require__(234);
  36. var ___CSS_LOADER_URL_IMPORT_2___ = __webpack_require__(235);
  37. var ___CSS_LOADER_URL_IMPORT_3___ = __webpack_require__(236);
  38. var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
  39. var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
  40. var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);
  41. var ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);
  42. var ___CSS_LOADER_URL_REPLACEMENT_3___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_3___);
  43. // Module
  44. ___CSS_LOADER_EXPORT___.push([module.i, ".col_red[data-v-457f8ee1]{color:#f11111}.col_green[data-v-457f8ee1]{color:#44be95}.col_white[data-v-457f8ee1]{color:#fff}.flex-col[data-v-457f8ee1]{flex-direction:column}.flex-j-c[data-v-457f8ee1]{justify-content:center}.flex-j-sb[data-v-457f8ee1]{justify-content:space-between}.flex-j-ar[data-v-457f8ee1]{justify-content:space-around}.flex-a-c[data-v-457f8ee1]{align-items:center}.flex-a-e[data-v-457f8ee1]{align-items:flex-end}.w[data-v-457f8ee1]{width:1200px}.m-auto[data-v-457f8ee1]{margin:0 auto}.height-one[data-v-457f8ee1]{height:100%}.flex[data-v-457f8ee1]{display:flex}.text-overflow[data-v-457f8ee1]{-webkit-line-clamp:4}.text-overflow[data-v-457f8ee1],.text-overflow-2[data-v-457f8ee1]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.text-overflow-2[data-v-457f8ee1]{-webkit-line-clamp:2}.text-overflow-3[data-v-457f8ee1]{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.overflow-hide[data-v-457f8ee1],.text-overflow-3[data-v-457f8ee1]{overflow:hidden;text-overflow:ellipsis}.overflow-hide[data-v-457f8ee1]{white-space:nowrap}.hiddenScroll[data-v-457f8ee1]{scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden;overflow-y:scroll}.hiddenScroll[data-v-457f8ee1]::-webkit-scrollbar{display:none}.finger-point[data-v-457f8ee1]{cursor:pointer}.cursor-default[data-v-457f8ee1]{cursor:default}.el-icon-circle-close[data-v-457f8ee1]{color:#fff}.middle-box[data-v-457f8ee1]{position:relative}.middle-box .play[data-v-457f8ee1]{position:absolute;left:20px;bottom:20px;z-index:999;cursor:pointer}.middle-box .video[data-v-457f8ee1]{position:absolute;left:0;top:0;z-index:9999}.middle-box .video[data-v-457f8ee1],.middle-box .video video[data-v-457f8ee1],.products-pic-all-box[data-v-457f8ee1],.products-pic-panel[data-v-457f8ee1]{width:100%;height:100%}.products-pic-all-box[data-v-457f8ee1]{position:relative}.products-pic-show-box[data-v-457f8ee1]{position:relative;overflow:hidden;width:100%}.products-pic-show-box img[data-v-457f8ee1]{width:100%;height:100%}.move[data-v-457f8ee1]{z-index:99;filter:alpha(opacity=40);opacity:.4;cursor:move}.b_box[data-v-457f8ee1],.move[data-v-457f8ee1]{position:absolute;background:#fff}.b_box[data-v-457f8ee1]{top:0;left:410px;width:400px;height:400px;overflow:hidden;z-index:9}.b_box img[data-v-457f8ee1]{position:absolute;top:0;left:0}.products-pic-small-box[data-v-457f8ee1]{position:relative;overflow:hidden;width:100%;height:auto;margin-top:10px}.products-pic-list-box[data-v-457f8ee1]{overflow:hidden;width:460px;height:102px;margin:0 auto}.products-pic-list-box ul[data-v-457f8ee1]{overflow:hidden;width:100%;height:100%}.products-pic-list-box ul li[data-v-457f8ee1]{float:left;overflow:hidden;width:100px;height:100px;margin-right:10px;background:#f2f2f2;border:1px solid transparent;box-sizing:border-box;cursor:pointer}.products-pic-list-box ul li[data-v-457f8ee1]:last-child{margin-right:0}.products-pic-list-box ul li.picCur[data-v-457f8ee1]{border:1px solid var(--color)}.products-pic-list-box ul li img[data-v-457f8ee1]{width:100%;height:100%}span#products-pic-pre[data-v-457f8ee1]{left:0;background:#f2f2f2 url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") 50% no-repeat}span#products-pic-next[data-v-457f8ee1],span#products-pic-pre[data-v-457f8ee1]{position:absolute;top:0;display:block;width:20px;height:100px;cursor:pointer}span#products-pic-next[data-v-457f8ee1]{right:0;background:#f2f2f2 url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ") 50% no-repeat}span#products-pic-pre[data-v-457f8ee1]:hover{background:#f2f2f2 url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ") 50% no-repeat}span#products-pic-next[data-v-457f8ee1]:hover{background:#f2f2f2 url(" + ___CSS_LOADER_URL_REPLACEMENT_3___ + ") 50% no-repeat}", ""]);
  45. // Exports
  46. module.exports = ___CSS_LOADER_EXPORT___;
  47. /***/ }),
  48. /***/ 233:
  49. /***/ (function(module, exports) {
  50. module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAVCAYAAABLy77vAAAA3klEQVQ4ja3UO04DMRAAUC+KqKCjSR/uQEkJtwiUaeEWICGEKOEYcAQuQBV6SqIoFeLzKEikxet1zG5Gmm732Z4Zu0LoGaMQwnVA19zBBd51BCqM8aoW/0UO8CQRpcAQd/hKISXQNs4wbwNKoCNM1wE5aISHzD/POMxBf9qZiBkmGCy/b0AVTkTtrMUnbrEXLdyArjLH+F4ukipBA9rCaWZHH6U7WuUuLrXX6M2aGsW5j8cWjIKuxXmMlwxYDK0m+xyLvlD9rt377WIvaGO3P36PGuPSBUqOS8VG3uybH5NfqtZU4dE9AAAAAElFTkSuQmCC"
  51. /***/ }),
  52. /***/ 234:
  53. /***/ (function(module, exports, __webpack_require__) {
  54. module.exports = __webpack_require__.p + "img/banner-btn-next.16a1394.png";
  55. /***/ }),
  56. /***/ 235:
  57. /***/ (function(module, exports) {
  58. module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAVCAMAAAB8FU7dAAAAS1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmYDp0AAAAGHRSTlMA+oxh5hYMBfAk29THt7aelXNqSEA48yXh9SRJAAAAaUlEQVQY04WQSQ6AMAwDw06Bsi/+/0tR2grJBdQ5jqI4scSYMRJ1noFNUQKkjgEgVU0AqWZpwWrr8BCC4ej3oDRYaddGnNJgJZsrEa9yeApRPqb+dimXpUS+i68/ASR+pCbefaVaVYy9AXHxDvSJps0dAAAAAElFTkSuQmCC"
  59. /***/ }),
  60. /***/ 236:
  61. /***/ (function(module, exports) {
  62. module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAVCAMAAAB8FU7dAAAARVBMVEUAAAA6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEI6OEItmAx4AAAAFnRSTlMAjea3YiQWDQXz79vUx5+Vc2pJQDhheYXOtAAAAGBJREFUGNOF0FkKwCAMBFB37b7P/Y/aFkMonQ/nR3gEjWN8NP8ANhPBBSJgOomAORGhW4uSZtg/dIwVfVQyZesr2iz0HGmp5oLQmwAZpKmL76IXaS/env5ITVBfzVa5+xsuGA4hAOeuUwAAAABJRU5ErkJggg=="
  63. /***/ }),
  64. /***/ 264:
  65. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  66. "use strict";
  67. // ESM COMPAT FLAG
  68. __webpack_require__.r(__webpack_exports__);
  69. // CONCATENATED MODULE: ./node_modules/_vue-loader@15.9.8@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_@nuxt_components@2.2.1@@nuxt/components/dist/loader.js??ref--0-0!./node_modules/_vue-loader@15.9.8@vue-loader/lib??vue-loader-options!./components/default/prodViewImages.vue?vue&type=template&id=457f8ee1&scoped=true&
  70. var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"products-pic-panel"},[_vm._ssrNode("<div id=\"PicZoom\" class=\"products-pic-all-box\" data-v-457f8ee1><div id=\"BigPic\" class=\"products-pic-show-box\" data-v-457f8ee1><div class=\"middle-box\""+(_vm._ssrStyle(null,{width: (_vm.boxWidth + "px"), height: (_vm.boxHeight + "px")}, null))+" data-v-457f8ee1><div class=\"play\""+(_vm._ssrStyle(null,null, { display: (!_vm.hide_img && _vm.video) ? '' : 'none' }))+" data-v-457f8ee1><img"+(_vm._ssrAttr("src",__webpack_require__(230)))+" data-v-457f8ee1></div> <div class=\"video\""+(_vm._ssrStyle(null,null, { display: (_vm.hide_img) ? '' : 'none' }))+" data-v-457f8ee1><video controls=\"controls\" data-v-457f8ee1><source"+(_vm._ssrAttr("src",_vm.video))+" data-v-457f8ee1></video></div> <img"+(_vm._ssrAttr("src",_vm.popThumb || _vm.middleImage[_vm.curIndex]))+(_vm._ssrAttr("alt",_vm.middleImage[_vm.curIndex]))+(_vm._ssrStyle(null,null, { display: (!_vm.hide_img) ? '' : 'none' }))+" data-v-457f8ee1> <div class=\"move\""+(_vm._ssrStyle(null,{width: ((this.glassWidth) + "px"),height: ((this.glassHeight) + "px"),top: ((this.glassTop) + "px"),left: ((this.glassLeft) + "px")}, { display: (_vm.isShow&&!_vm.hide_img) ? '' : 'none' }))+" data-v-457f8ee1></div></div></div> <div class=\"products-pic-small-box\" data-v-457f8ee1>"+((_vm.smallImage.length>3)?("<span id=\"products-pic-pre\" data-v-457f8ee1></span>"):"<!---->")+" "+((_vm.smallImage.length>3)?("<span id=\"products-pic-next\" data-v-457f8ee1></span>"):"<!---->")+" <div id=\"SmallPicList\" class=\"products-pic-list-box\" style=\"width:80%;\" data-v-457f8ee1><ul"+(_vm._ssrStyle(null,{width: ((this.ulWidth) + "px"),marginLeft: ((this.ulMarginLeft) + "px")}, null))+" data-v-457f8ee1>"+(_vm._ssrList((_vm.smallImage),function(image,index){return ("<li"+(_vm._ssrClass(null,{picCur: _vm.curIndex == index}))+" data-v-457f8ee1><img"+(_vm._ssrAttr("src",image))+(_vm._ssrAttr("alt",image))+" data-v-457f8ee1></li>")}))+"</ul></div></div> "+((_vm.isShow)?("<div class=\"b_box\" data-v-457f8ee1><img"+(_vm._ssrAttr("src",_vm.popThumb || _vm.bigImage[_vm.curIndex]))+(_vm._ssrStyle(null,{left: (_vm.bigLeft + "px"), top: (_vm.bigTop + "px"),width: ((this.bigWidth) + "px"),height: ((this.bigHeight) + "px")}, null))+" data-v-457f8ee1></div>"):"<!---->")+"</div>")])}
  71. var staticRenderFns = []
  72. // CONCATENATED MODULE: ./components/default/prodViewImages.vue?vue&type=template&id=457f8ee1&scoped=true&
  73. // CONCATENATED MODULE: ./node_modules/_babel-loader@8.2.3@babel-loader/lib??ref--2-0!./node_modules/_@nuxt_components@2.2.1@@nuxt/components/dist/loader.js??ref--0-0!./node_modules/_vue-loader@15.9.8@vue-loader/lib??vue-loader-options!./components/default/prodViewImages.vue?vue&type=script&lang=js&
  74. //
  75. //
  76. //
  77. //
  78. //
  79. //
  80. //
  81. //
  82. //
  83. //
  84. //
  85. //
  86. //
  87. //
  88. //
  89. //
  90. //
  91. //
  92. //
  93. //
  94. //
  95. //
  96. //
  97. //
  98. //
  99. //
  100. //
  101. //
  102. //
  103. //
  104. //
  105. //
  106. //
  107. //
  108. //
  109. //
  110. //
  111. //
  112. /* harmony default export */ var prodViewImagesvue_type_script_lang_js_ = ({
  113. //组件名称
  114. name: "ProdViewImages",
  115. props: {
  116. video: String,
  117. bigImage: Array,
  118. middleImage: Array,
  119. smallImage: Array,
  120. popThumb: String
  121. },
  122. data() {
  123. return {
  124. hide_img: false,
  125. next_length: 3,
  126. //当前选中商品
  127. curIndex: 0,
  128. //是否显示大图
  129. isShow: false,
  130. //显示盒子的宽度和高度
  131. boxWidth: 400,
  132. boxHeight: 400,
  133. //显示盒子相对于浏览器窗口的偏移
  134. boxOffsetLeft: 0,
  135. boxOffsetTop: 0,
  136. //放大镜的宽度和高度
  137. glassWidth: 100,
  138. glassHeight: 100,
  139. //放大镜的位置
  140. glassLeft: 0,
  141. glassTop: 0,
  142. //大图的宽度和高度
  143. bigWidth: 1000,
  144. bigHeight: 1000,
  145. //大图的位置
  146. bigLeft: 0,
  147. bigTop: 0,
  148. //小图列表盒子的宽度
  149. SmallPicListWidth: 400,
  150. //小图列表li的宽度(加外边距)
  151. liOuterWidth: 110,
  152. //小图列表ul宽度
  153. ulWidth: 460,
  154. //小图列表ul的marginleft
  155. ulMarginLeft: 0
  156. };
  157. },
  158. //初始化
  159. mounted() {
  160. this.$nextTick(() => {
  161. //显示盒子到浏览器窗口最左端的距离
  162. this.boxOffsetLeft = this.getElementLeft(document.querySelector(".middle-box")); //显示盒子到浏览器窗口最顶部的距离
  163. this.boxOffsetTop = this.getElementTop(document.querySelector(".middle-box")); //小图列表ul宽度
  164. if (this.smallImage.length > 3) {
  165. this.ulWidth = this.liOuterWidth * this.smallImage.length - 20;
  166. }
  167. });
  168. },
  169. methods: {
  170. stop() {
  171. this.hide_img = false;
  172. },
  173. closeVideo(index) {
  174. this.curIndex = index;
  175. this.hide_img = false;
  176. this.$emit('removePopThumb');
  177. },
  178. openvideo() {
  179. if (this.video) {
  180. this.hide_img = true;
  181. let myvideo = this.$refs.myvideo;
  182. myvideo.play();
  183. }
  184. },
  185. //放大镜移动
  186. move(event) {
  187. //计算放大镜的位置
  188. //位置= 鼠标指针位置 - 显示盒子在浏览器上的偏移 - 放大镜宽高的一半
  189. this.glassLeft = event.pageX - this.boxOffsetLeft - this.glassWidth / 2;
  190. this.glassTop = event.pageY - this.boxOffsetTop - this.glassHeight / 2; //放大镜在水平方向上的最大距离
  191. var maxLeft = this.boxWidth - this.glassWidth; //放大镜在竖直方向上移动的最大距离
  192. var maxTop = this.boxHeight - this.glassHeight; //限制放大镜在水平方向的距离
  193. if (this.glassLeft < 0) {
  194. this.glassLeft = 0;
  195. } else if (this.glassLeft > maxLeft) {
  196. this.glassLeft = maxLeft;
  197. } //限制放大镜在竖直方向上的范围
  198. if (this.glassTop < 0) {
  199. this.glassTop = 0;
  200. } else if (this.glassTop > maxTop) {
  201. this.glassTop = maxTop;
  202. } //计算大图的移动位置
  203. this.bigLeft = -(this.glassLeft / maxLeft) * (this.bigWidth - this.boxWidth);
  204. this.bigTop = -(this.glassTop / maxTop) * (this.bigHeight - this.boxHeight);
  205. },
  206. //元素最左端到网页最左端的距离
  207. getElementLeft(element) {
  208. var actualLeft = element.offsetLeft;
  209. var current = element.offsetParent;
  210. while (current !== null) {
  211. actualLeft += current.offsetLeft;
  212. current = current.offsetParent;
  213. }
  214. return actualLeft;
  215. },
  216. //元素最顶端到网页最顶端的距离
  217. getElementTop(element) {
  218. var actualTop = element.offsetTop;
  219. var current = element.offsetParent;
  220. while (current !== null) {
  221. actualTop += current.offsetTop;
  222. current = current.offsetParent;
  223. }
  224. return actualTop;
  225. },
  226. //下一个点击按钮
  227. goNext() {
  228. this.ulMarginLeft = -this.liOuterWidth + this.ulMarginLeft;
  229. },
  230. //上一个点击按钮
  231. goPre() {
  232. if (this.ulMarginLeft > -this.liOuterWidth) {
  233. this.ulMarginLeft = 0;
  234. return;
  235. } else {
  236. this.ulMarginLeft = this.ulMarginLeft + this.liOuterWidth;
  237. }
  238. }
  239. }
  240. });
  241. // CONCATENATED MODULE: ./components/default/prodViewImages.vue?vue&type=script&lang=js&
  242. /* harmony default export */ var default_prodViewImagesvue_type_script_lang_js_ = (prodViewImagesvue_type_script_lang_js_);
  243. // EXTERNAL MODULE: ./node_modules/_vue-loader@15.9.8@vue-loader/lib/runtime/componentNormalizer.js
  244. var componentNormalizer = __webpack_require__(2);
  245. // CONCATENATED MODULE: ./components/default/prodViewImages.vue
  246. function injectStyles (context) {
  247. var style0 = __webpack_require__(231)
  248. if (style0.__inject__) style0.__inject__(context)
  249. }
  250. /* normalize component */
  251. var component = Object(componentNormalizer["a" /* default */])(
  252. default_prodViewImagesvue_type_script_lang_js_,
  253. render,
  254. staticRenderFns,
  255. false,
  256. injectStyles,
  257. "457f8ee1",
  258. "64d7d1fe"
  259. )
  260. /* harmony default export */ var prodViewImages = __webpack_exports__["default"] = (component.exports);
  261. /***/ })
  262. };;
  263. //# sourceMappingURL=default-prod-view-images.js.map