{"version":3,"sources":["webpack:///./src/views/pc/page/Introduce.vue","webpack:///src/views/pc/page/Introduce.vue","webpack:///./src/views/pc/page/Introduce.vue?9f0e","webpack:///./src/views/pc/page/Introduce.vue?1e5a","webpack:///./src/assets/img/introduce_search.png","webpack:///./src/views/pc/page/Introduce.vue?e0b7"],"names":["render","_vm","this","_c","_self","staticClass","ref","attrs","imgHeight","on","changeCarousel","_l","listSrc","item","index","key","refInFor","staticStyle","searchClick","require","setActiveItem","class","carouselIndex","dialogTableVisible","$event","imgSrc","staticRenderFns","name","data","getRelationListResult","ProductDetail","Brand","Product","ProductNum","CHPChooseId","CHPProductId","activeName","interval","created","imgLoad","$route","query","list","srcArr","mounted","clear","setInterval","destroyed","methods","clearInterval","$nextTick","$refs","imgH","height","e","target","dataset","carousel","component","module","exports"],"mappings":"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","file":"js/chunk-7da65fcd.28f45e50.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"Introduce\"},[_c('div',{staticClass:\"product_top flex_row\"},[_c('div',{staticClass:\"left\"},[_c('el-carousel',{ref:\"carousel\",attrs:{\"width\":\"100%\",\"arrow\":\"always\",\"height\":_vm.imgHeight},on:{\"change\":_vm.changeCarousel}},[_vm._l((_vm.listSrc),function(item,index){return _c('el-carousel-item',{key:index},[_c('img',{ref:\"imgH\",refInFor:true,staticStyle:{\"width\":\"100%\"},attrs:{\"src\":item,\"alt\":\"\"}})])}),_c('div',{staticClass:\"left_search flex_row\",on:{\"click\":_vm.searchClick}},[_c('img',{attrs:{\"src\":require(\"@/assets/img/introduce_search.png\")}})])],2),_c('div',{staticClass:\"small_Img flex_row\",on:{\"click\":_vm.setActiveItem}},_vm._l((_vm.listSrc),function(item,index){return _c('div',{key:index,staticClass:\"img_border flex_row\"},[_c('img',{class:_vm.carouselIndex==index?'pattern': '',attrs:{\"src\":item,\"alt\":\"\",\"data-index\":index}})])}),0)],1)]),_c('el-dialog',{staticClass:\"dialog\",staticStyle:{\"width\":\"100vw\",\"height\":\"100vh\"},attrs:{\"visible\":_vm.dialogTableVisible},on:{\"update:visible\":function($event){_vm.dialogTableVisible=$event}}},[_c('img',{staticStyle:{\"width\":\"100%\"},attrs:{\"src\":_vm.imgSrc,\"alt\":\"\"}})])],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"Introduce\">\r\n    <div class=\"product_top flex_row\">\r\n      <div class=\"left\">\r\n        <el-carousel  width=\"100%\" arrow=\"always\" @change=\"changeCarousel\" ref=\"carousel\"  :height=\"imgHeight\">\r\n          <el-carousel-item v-for=\"(item, index) in listSrc\" :key=\"index\">\r\n              <img ref=\"imgH\" :src=\"item\" alt=\"\" style=\"width: 100%\">\r\n          </el-carousel-item>\r\n          <div class=\"left_search flex_row\" @click=\"searchClick\">\r\n            <img src=\"@/assets/img/introduce_search.png\">\r\n          </div>\r\n        </el-carousel>\r\n        <div class=\"small_Img flex_row\" @click=\"setActiveItem\">\r\n          <div class=\"img_border flex_row\" v-for=\"(item, index) in listSrc\" :key=\"index\">\r\n            <img :src=\"item\" alt=\"\" :data-index=\"index\" :class=\"carouselIndex==index?'pattern': ''\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <el-dialog class=\"dialog\" :visible.sync=\"dialogTableVisible\" style=\"width: 100vw; height: 100vh\">\r\n      <img :src=\"imgSrc\" alt=\"\" style=\"width: 100%\">\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport {Loading, MessageBox} from \"element-ui\";\r\nimport axios from \"@/axios/axios\";\r\nimport store from \"@/store\";\r\nexport default {\r\n  name: 'Introduce',\r\n  data() {\r\n    return {\r\n      imgHeight: '0',\r\n      carouselIndex: 0,\r\n      getRelationListResult: {},\r\n      ProductDetail: {},\r\n      Brand: {},\r\n      Product: {},\r\n      ProductNum: 1,\r\n      CHPChooseId: '',\r\n      CHPProductId: '',\r\n      activeName: 'first',\r\n      dialogTableVisible: false,\r\n      imgSrc: '',\r\n      listSrc: [],\r\n      interval: null\r\n    }\r\n  },\r\n  created() {\r\n    this.imgLoad();\r\n    let key = this.$route.query.key;\r\n    let list = [\r\n      {\r\n        srcArr: ['http://2022.visumall.com/public/img/pc/pc_equipment11.jpg'],\r\n      },\r\n      {\r\n        srcArr: ['http://2022.visumall.com/public/img/pc/pc_equipment21.jpg','http://2022.visumall.com/public/img/pc/pc_equipment22.jpg','http://2022.visumall.com/public/img/pc/pc_equipment23.jpg','http://2022.visumall.com/public/img/pc/pc_equipment24.jpg'],\r\n      },\r\n      {\r\n        srcArr: ['http://2022.visumall.com/public/img/pc/pc_equipment31.jpg'],\r\n      },\r\n      {\r\n        srcArr: ['http://2022.visumall.com/public/img/pc/pc_equipment41.jpg'],\r\n      },\r\n      {\r\n        srcArr: ['http://2022.visumall.com/public/img/pc/pc_equipment51.jpg'],\r\n      },\r\n      {\r\n        srcArr: ['http://2022.visumall.com/public/img/pc/pc_equipment61.jpg','http://2022.visumall.com/public/img/pc/pc_equipment62.jpg','http://2022.visumall.com/public/img/pc/pc_equipment63.jpg','http://2022.visumall.com/public/img/pc/pc_equipment64.jpg'],\r\n      },\r\n    ];\r\n    this.listSrc = list[key - 1].srcArr;\r\n    this.imgSrc = this.listSrc[0]\r\n  },\r\n  mounted() {\r\n    this.clear();\r\n    this.interval = setInterval(this.imgLoad, 1000)\r\n  },\r\n  destroyed() {\r\n    this.clear();\r\n  },\r\n  methods: {\r\n    clear() {\r\n      if(this.interval) {\r\n        clearInterval(this.interval)\r\n      }\r\n    },\r\n    imgLoad(){\r\n      this.$nextTick(()=>{\r\n        let imgHeight = `${this.$refs.imgH[0].height}px`;\r\n        if(imgHeight == '0px') {\r\n          imgHeight = '70vh'\r\n        }\r\n        else {\r\n          clearInterval(this.interval)\r\n        }\r\n        this.imgHeight = imgHeight;\r\n      })\r\n    },\r\n    changeCarousel(e) {\r\n      if(!this.dialogTableVisible)\r\n        this.imgSrc = this.listSrc[e];\r\n      this.carouselIndex = e;\r\n    },\r\n    setActiveItem(e) {\r\n      let index = e.target.dataset.index;\r\n      this.carouselIndex = index;\r\n      this.$refs.carousel.setActiveItem(index);\r\n    },\r\n    searchClick() {\r\n      this.dialogTableVisible = true;\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.Introduce {\r\n  min-width: 1024px;\r\n  width: 70vw;\r\n  margin: 0 auto;\r\n  .product_top {\r\n    align-items: flex-start;\r\n    .left {\r\n      width: 70%;\r\n      //.big_Img {\r\n      //  width: 100%;\r\n      //  height: 100%;\r\n      //}\r\n      .small_Img {\r\n        width: 100%;\r\n        flex-wrap: wrap;;\r\n        overflow: hidden;\r\n        overflow-x: auto;\r\n        list-style: none;\r\n        .img_border {\r\n          margin-top: 0.35rem;\r\n          width: 25%;\r\n          img {\r\n            width: 80%;\r\n            border: 0.01rem solid #BCBCBC;\r\n          }\r\n          .pattern {\r\n            border: 0.01rem solid red;\r\n          }\r\n        }\r\n      }\r\n      .el-carousel {\r\n        border: 0.01rem solid #BCBCBC;\r\n        position: relative;\r\n        //::v-deep .el-carousel__container {\r\n        //  height: 60vh;\r\n        //}\r\n        ::v-deep .el-carousel__indicators {// 指示器\r\n          display: none;\r\n        }\r\n        ::v-deep .el-carousel__arrow {\r\n          background-color: rgba(31,45,61,0);\r\n          color: #010101;\r\n          font-size: 0.22rem;\r\n        }\r\n        ::v-deep .el-carousel__arrow--left {\r\n          left: 0;\r\n          opacity: 0.67;\r\n        }\r\n        ::v-deep .el-carousel__arrow--right {\r\n          right: 0;\r\n          opacity: 0.67;\r\n        }\r\n      }\r\n\r\n      .left_search {\r\n        width: 1rem;\r\n        height: 1rem;\r\n        left: 100%;\r\n        top: 100%;\r\n        z-index: 999;\r\n        transform: translate(-120%, -120%);\r\n        position: absolute;\r\n        img {\r\n          width: 50%;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .dialog {\r\n    ::v-deep .el-dialog {\r\n      margin-top: 3vh!important;\r\n      width: 78%;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Introduce.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Introduce.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Introduce.vue?vue&type=template&id=4925f960&scoped=true&\"\nimport script from \"./Introduce.vue?vue&type=script&lang=js&\"\nexport * from \"./Introduce.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Introduce.vue?vue&type=style&index=0&id=4925f960&prod&scoped=true&lang=scss&\"\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  \"4925f960\",\n  null\n  \n)\n\nexport default component.exports","module.exports = __webpack_public_path__ + \"img/introduce_search.906cc789.png\";","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Introduce.vue?vue&type=style&index=0&id=4925f960&prod&scoped=true&lang=scss&\""],"sourceRoot":""}