{"version":3,"sources":["webpack:///./src/components/component/TalkImages.vue?6fa5","webpack:///./src/components/component/TalkImages.vue?d49e","webpack:///src/components/component/TalkImages.vue","webpack:///./src/components/component/TalkImages.vue?e691","webpack:///./src/components/component/TalkImages.vue?f6d8","webpack:///./src/components/component/TalkImages.vue?f8e9"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","images","_l","img","idx","key","style","imgStyle","on","$event","clickImg","vOverlay","stopPropagation","preventDefault","index","clickLeft","attrs","_e","length","clickRight","staticStyle","_v","_s","$refs","downloadModal","open","ref","close","clickDownload","staticRenderFns","component"],"mappings":"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","file":"js/chunk-71cbc6ae.562d6f4d.js","sourcesContent":["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!./TalkImages.vue?vue&type=style&index=1&lang=stylus&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"grid\",class:(\"grid-\" + (_vm.images.length))},_vm._l((_vm.images),function(img,idx){return _c('div',{key:'img-'+idx,staticClass:\"img\",style:(_vm.imgStyle(img)),on:{\"click\":function($event){return _vm.clickImg(idx)}}})}),0),(_vm.vOverlay)?_c('div',{staticClass:\"overlay-image-container\",on:{\"click\":function($event){_vm.vOverlay=false}}},[_c('div',{staticClass:\"overlay-image-wrapper\",on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();}}},[(_vm.index > 0)?_c('div',{staticClass:\"ti-arrow-left\",on:{\"click\":_vm.clickLeft}},[_c('img',{staticClass:\"svg-white\",attrs:{\"src\":\"/static/icon/fi_chevron-left.svg\"}})]):_vm._e(),(_vm.index < _vm.images.length-1)?_c('div',{staticClass:\"ti-arrow-right\",on:{\"click\":_vm.clickRight}},[_c('img',{staticClass:\"svg-white\",attrs:{\"src\":\"/static/icon/fi_chevron-right.svg\"}})]):_vm._e(),_c('div',{staticClass:\"overlay-close\",on:{\"click\":function($event){_vm.vOverlay=false}}},[_c('img',{staticClass:\"svg-sub4\",attrs:{\"src\":\"/static/icon/fi_close.svg\"}})]),_c('div',{staticClass:\"preview-wrapper\"},[_c('div',{staticClass:\"preview\"},[_c('img',{attrs:{\"src\":_vm.images[_vm.index]}})]),_c('div',{staticClass:\"preview-counter\"},[_c('img',{staticClass:\"svg-gray\",attrs:{\"src\":\"/static/icon/u_image.svg\"}}),_c('div',{staticStyle:{\"margin-left\":\"8px\"}},[_vm._v(_vm._s(((_vm.index+1) + \"/\" + (_vm.images.length))))])]),_c('div',{staticClass:\"preview-download-wrapper\"},[_c('img',{staticClass:\"download-icon\",attrs:{\"src\":\"/static/icon/u_arrow-to-bottom.svg\"},on:{\"click\":_vm.$refs.downloadModal.open}})])])])]):_vm._e(),_c('div',{staticClass:\"download-modal\"},[_c('sweet-modal',{ref:\"downloadModal\",attrs:{\"overlay-theme\":\"dark\",\"width\":\"564px\",\"hide-close-button\":true}},[_c('div',{staticClass:\"subtitle4\"},[_vm._v(\"파일을 다운로드하시겠습니까?\")]),_c('div',{staticClass:\"flex-between body5-medium\",staticStyle:{\"padding\":\"64px 16px 0\"}},[_c('button',{staticClass:\"button body2-bold\",staticStyle:{\"width\":\"50%\",\"height\":\"52px\"},on:{\"click\":function($event){return _vm.$refs.downloadModal.close()}}},[_vm._v(\"취소\")]),_c('button',{staticClass:\"button is-primary margin-left-16 body2-bold\",staticStyle:{\"width\":\"50%\",\"height\":\"52px\"},on:{\"click\":_vm.clickDownload}},[_vm._v(\"확인\")])])])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <div class=\"grid\" :class=\"`grid-${images.length}`\">\r\n      <div v-for=\"(img,idx) in images\" :style=\"imgStyle(img)\" class=\"img\" :key=\"'img-'+idx\" @click=\"clickImg(idx)\"></div>\r\n    </div>\r\n\r\n    <!-- 오버레이 -->\r\n    <div class=\"overlay-image-container\" v-if=\"vOverlay\" @click=\"vOverlay=false\">\r\n      <div class=\"overlay-image-wrapper\" @click.stop.prevent>\r\n        <div class=\"ti-arrow-left\" v-if=\"index > 0\" @click=\"clickLeft\">\r\n          <img src=\"/static/icon/fi_chevron-left.svg\" class=\"svg-white\">\r\n        </div>\r\n        <div class=\"ti-arrow-right\" v-if=\"index < images.length-1\" @click=\"clickRight\">\r\n          <img src=\"/static/icon/fi_chevron-right.svg\" class=\"svg-white\">\r\n        </div>\r\n        <div class=\"overlay-close\" @click=\"vOverlay=false\">\r\n          <img src=\"/static/icon/fi_close.svg\" class=\"svg-sub4\">\r\n        </div>\r\n        <div class=\"preview-wrapper\">\r\n          <div class=\"preview\">\r\n            <img :src=\"images[index]\">\r\n          </div>\r\n          <div class=\"preview-counter\">\r\n            <img src=\"/static/icon/u_image.svg\" class=\"svg-gray\">\r\n            <div style=\"margin-left:8px\">{{ `${index+1}/${images.length}` }}</div>\r\n          </div>\r\n          <div class=\"preview-download-wrapper\">\r\n            <img src=\"/static/icon/u_arrow-to-bottom.svg\" class=\"download-icon\" @click=\"$refs.downloadModal.open\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"download-modal\">\r\n      <sweet-modal overlay-theme=\"dark\" ref=\"downloadModal\" width=\"564px\"\r\n                   :hide-close-button=\"true\">\r\n        <div class=\"subtitle4\">파일을 다운로드하시겠습니까?</div>\r\n        <div class=\"flex-between body5-medium\" style=\"padding:64px 16px 0;\">\r\n          <button class=\"button body2-bold\" style=\"width:50%;height:52px\" @click=\"$refs.downloadModal.close()\">취소</button>\r\n          <button class=\"button is-primary margin-left-16 body2-bold\"\r\n                  style=\"width:50%;height:52px;\"\r\n                  @click=\"clickDownload\">확인</button>\r\n        </div>\r\n      </sweet-modal>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import { SweetModal } from 'sweet-modal-vue'\r\n\r\n  export default {\r\n    name: \"TalkImages\",\r\n    components: {\r\n      SweetModal\r\n    },\r\n    props: {\r\n      images: {\r\n        type: Array\r\n      }\r\n    },\r\n    created() {\r\n\r\n    },\r\n    data() {\r\n      return {\r\n        index: 0,\r\n        vOverlay: false\r\n      }\r\n    },\r\n    methods: {\r\n      imgStyle(img) {\r\n        return {\r\n          width: '100%',\r\n          height: '100%',\r\n          backgroundImage: `url(${img})`,\r\n          backgroundSize: 'cover',\r\n          backgroundPosition: 'center'\r\n        }\r\n      },\r\n      clickDownload() {\r\n        const a = document.createElement(\"a\");\r\n        a.href = this.images[this.index];\r\n        a.target = '_blank';\r\n        document.body.appendChild(a);\r\n        a.click();\r\n        a.parentNode.removeChild(a);\r\n        this.$refs.downloadModal.close();\r\n\r\n\r\n        /*delete axios.defaults.headers.common.Authorization;\r\n\r\n        axios({\r\n          method: 'GET',\r\n          url: this.images[this.index],\r\n          responseType: 'blob'\r\n        }).then(res=>{\r\n          const blob = res.data;\r\n          let file = this.images[this.index].split('/');\r\n          file = file[file.length-1].split('.');\r\n          const name = file[0];\r\n          const ext = file[1];\r\n          if (window.navigator.msSaveOrOpenBlob) { // for IE\r\n            window.navigator.msSaveOrOpenBlob((blob), `${name}.${ext}`);\r\n          } else { // Others\r\n            const reader = new FileReader();\r\n            reader.onloadend = () => {\r\n              const a = document.createElement(\"a\");\r\n              a.href = reader.result;\r\n              a.style.display = 'none';\r\n              a.setAttribute('download', `${name}.${ext}`);\r\n              document.body.appendChild(a);\r\n              a.click();\r\n              a.parentNode.removeChild(a);\r\n              this.$refs.downloadModal.close();\r\n            }\r\n            reader.readAsDataURL(blob);\r\n          }\r\n        });*/\r\n      },\r\n      clickImg(idx) {\r\n        this.index = idx;\r\n        this.vOverlay = true;\r\n      },\r\n      clickLeft() {\r\n        if(this.index > 0) {\r\n          this.index--;\r\n        }\r\n      },\r\n      clickRight() {\r\n        if(this.index < this.images.length-1) {\r\n          this.index++;\r\n        }\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"stylus\" scoped>\r\n  @import '~assets/css/lp_main'\r\n\r\n  .grid\r\n    display grid\r\n    grid-template-columns repeat(6, 55px)\r\n    grid-gap 4px\r\n    border-radius 8px\r\n    overflow hidden\r\n\r\n  .grid-1\r\n  .grid-2\r\n  .grid-3\r\n    grid-template-rows 120px\r\n  .grid-4\r\n  .grid-5\r\n  .grid-6\r\n    grid-template-rows 100px 100px\r\n\r\n  .grid-1\r\n    .img\r\n      grid-column-start 1\r\n      grid-column-end 7\r\n  .grid-3\r\n    .img:nth-child(1)\r\n      grid-column-start 1\r\n      grid-column-end 3\r\n    .img:nth-child(2)\r\n      grid-column-start 3\r\n      grid-column-end 5\r\n    .img:nth-child(3)\r\n      grid-column-start 5\r\n      grid-column-end 7\r\n\r\n  .grid-2\r\n  .grid-4\r\n    .img:nth-child(odd)\r\n      grid-column-start 1\r\n      grid-column-end 4\r\n    .img:nth-child(even)\r\n      grid-column-start 4\r\n      grid-column-end 7\r\n  .grid-5\r\n    .img:nth-child(1)\r\n      grid-column-start 1\r\n      grid-column-end 3\r\n    .img:nth-child(2)\r\n      grid-column-start 3\r\n      grid-column-end 5\r\n    .img:nth-child(3)\r\n      grid-column-start 5\r\n      grid-column-end 7\r\n    .img:nth-child(4)\r\n      grid-column-start 1\r\n      grid-column-end 4\r\n    .img:nth-child(5)\r\n      grid-column-start 4\r\n      grid-column-end 7\r\n\r\n  .overlay-image-container\r\n    position fixed\r\n    z-index 1000\r\n    top 0\r\n    left 0\r\n    width 100%\r\n    height 100%\r\n    background-color rgba(0,0,0,0.5)\r\n\r\n  .overlay-image-wrapper\r\n    position fixed\r\n    top 50%\r\n    left 50%\r\n    transform translate(-50%, -50%)\r\n\r\n  .ti-arrow-left\r\n  .ti-arrow-right\r\n  .overlay-close\r\n    position absolute\r\n    cursor pointer\r\n\r\n  .ti-arrow-left\r\n    left -60px\r\n  .ti-arrow-right\r\n    right -60px\r\n\r\n  .ti-arrow-left\r\n  .ti-arrow-right\r\n    top calc(50% - 24px)\r\n    padding 8px\r\n    img\r\n      width 32px\r\n      height 32px\r\n\r\n  .overlay-close\r\n    top 0\r\n    right -60px\r\n    background-color white\r\n    width 32px\r\n    height 32px\r\n    border-radius 100%\r\n    display flex\r\n    align-items center\r\n    justify-content center\r\n    img\r\n      width 18px\r\n      height 18px\r\n\r\n  .preview-wrapper\r\n    border-radius 8px\r\n    overflow hidden\r\n    background white\r\n    width 1098px\r\n    height 654px\r\n\r\n  .preview\r\n    width 100%\r\n    background $gray3\r\n    height calc(100% - 64px)\r\n    display flex\r\n    justify-content center\r\n    align-items center\r\n    img\r\n      max-height 100%\r\n\r\n  .preview-counter\r\n    position absolute\r\n    bottom 80px\r\n    left 50%\r\n    transform translateX(-50%)\r\n    background-color rgba(0,0,0,0.5)\r\n    border-radius 30px\r\n    padding 4px 12px\r\n    color white\r\n    display flex\r\n    align-items flex-end\r\n    font-size 16px\r\n    img\r\n      width 20px\r\n\r\n  .preview-download-wrapper\r\n    background-color white\r\n    display flex\r\n    align-items center\r\n    justify-content flex-end\r\n    height 64px\r\n    padding 0 20px\r\n  .download-icon\r\n    filter invert(29%) sepia(0%) saturate(1%) hue-rotate(352deg) brightness(99%) contrast(88%)\r\n    cursor pointer\r\n  .download-icon:hover\r\n    filter invert(54%) sepia(46%) saturate(5884%) hue-rotate(360deg) brightness(100%) contrast(110%)\r\n\r\n\r\n  @media (max-width:500px)\r\n    .grid\r\n      grid-template-columns repeat(6, 32px)\r\n    .preview\r\n      height calc(100% - 40px)\r\n\r\n    .preview-wrapper\r\n      width 250px\r\n      height 200px\r\n    .preview-download-wrapper\r\n      height 40px\r\n      img\r\n        width 20px\r\n    .overlay-close\r\n      right -38px\r\n      width 24px\r\n      height 24px\r\n      img\r\n        width 16px\r\n        height 16px\r\n    .preview-counter\r\n      bottom 48px\r\n      font-size 11px\r\n      img\r\n        width 15px\r\n\r\n    .ti-arrow-left\r\n      left -50px\r\n    .ti-arrow-right\r\n      right -50px\r\n</style>\r\n<style lang=\"stylus\">\r\n  .download-modal .sweet-modal.is-mobile-fullscreen\r\n    top 50% !important\r\n    left 50% !important\r\n    transform translate(-50%, -50%) !important\r\n\r\n  .download-modal .sweet-content\r\n    padding-bottom 12px !important\r\n\r\n  @media (min-width: 501px)\r\n    .download-modal .sweet-modal\r\n      height 250px\r\n    .download-modal .sweet-content\r\n      padding-top 72px !important\r\n\r\n  @media (max-width: 500px)\r\n    .download-modal .sweet-modal\r\n      max-width 80vw !important\r\n      height 200px\r\n      .subtitle4\r\n        font-size 14px\r\n      .body2-bold\r\n        font-size 13px\r\n      .button\r\n        height 36px !important\r\n\r\n    .download-modal .sweet-content\r\n      padding-top 58px !important\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!./TalkImages.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!./TalkImages.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./TalkImages.vue?vue&type=template&id=3fe6b938&scoped=true&\"\nimport script from \"./TalkImages.vue?vue&type=script&lang=js&\"\nexport * from \"./TalkImages.vue?vue&type=script&lang=js&\"\nimport style0 from \"./TalkImages.vue?vue&type=style&index=0&id=3fe6b938&lang=stylus&scoped=true&\"\nimport style1 from \"./TalkImages.vue?vue&type=style&index=1&lang=stylus&\"\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  \"3fe6b938\",\n  null\n  \n)\n\nexport default component.exports","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!./TalkImages.vue?vue&type=style&index=0&id=3fe6b938&lang=stylus&scoped=true&\""],"sourceRoot":""}