{"version":3,"sources":["webpack:///./src/components/component/CardProducts.vue?9fdf","webpack:///src/components/component/CardProducts.vue","webpack:///./src/components/component/CardProducts.vue?9e17","webpack:///./src/components/component/CardProducts.vue?1e71","webpack:///./src/components/component/CardProducts.vue?65ba"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","cards","length","_l","card","idx","key","on","$event","clickDetail","style","imgField","img","category2","preview_url","stopPropagation","staticStyle","_v","preventDefault","showMobilePreview","_e","partner","_s","name","simple_desc","discountedPrice","isDiscount","_f","price","discount_type","discountText","class","staticRenderFns","component"],"mappings":"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","file":"js/chunk-3929cd1c.01ad2afc.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('transition',{attrs:{\"name\":\"fade\"}},[_c('div',[_c('div',{staticClass:\"pc\"},[(_vm.cards.length>0)?_c('div',{staticClass:\"card-wrapper\"},_vm._l((_vm.cards),function(card,idx){return _c('div',{key:'card'+idx},[_c('div',{staticClass:\"unselect\",on:{\"click\":function($event){return _vm.clickDetail(card)}}},[_c('div',{staticClass:\"card-img\",style:(_vm.imgField(card.img, 'pc'))},[(card.category2 === 40 && card.preview_url!=='')?_c('div',{staticClass:\"card-img-hover\"},[_c('div',{on:{\"click\":function($event){$event.stopPropagation();}}},[_c('a',{attrs:{\"href\":card.preview_url,\"target\":\"_blank\"}},[_c('button',{staticClass:\"button is-gray\",staticStyle:{\"width\":\"100%\"}},[_vm._v(\"데스크톱\"),_c('br'),_vm._v(\"미리보기\")])])]),_c('button',{staticClass:\"button is-gray\",on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.showMobilePreview(card.preview_url)}}},[_vm._v(\"모바일\"),_c('br'),_vm._v(\"미리보기\")])]):_vm._e()]),_c('div',{staticClass:\"card-content\"},[(card.partner)?_c('div',{staticClass:\"flex-align margin-top-12\"},[(card.partner.img)?_c('img',{staticClass:\"margin-right-8\",staticStyle:{\"width\":\"32px\",\"height\":\"32px\"},attrs:{\"src\":card.partner.img}}):_vm._e(),_c('div',{staticClass:\"body4 sub3\"},[_vm._v(_vm._s(card.partner.name))])]):_vm._e(),_c('div',{staticClass:\"subtitle4 main margin-top-8\"},[_vm._v(_vm._s(card.name))]),_c('div',{staticClass:\"body3 sub2 ellipsis-1\"},[_vm._v(_vm._s(card.simple_desc))]),(_vm.discountedPrice(card)>0)?_c('div',{staticClass:\"margin-top-8\"},[(_vm.isDiscount(card))?_c('div',{staticClass:\"body5 sub4 text-line-through\"},[_vm._v(_vm._s(_vm._f(\"currency\")(card.price.price)))]):_vm._e(),_c('div',{staticClass:\"flex-align\"},[(card.price.discount_type===0)?_c('div',{staticClass:\"margin-right-4 primary body0-bold\"},[_vm._v(_vm._s(_vm.discountText(card)))]):_vm._e(),_c('div',{staticClass:\"body0-bold\"},[_c('span',{staticClass:\"sub\"},[_vm._v(_vm._s(_vm._f(\"currencyNum\")(_vm.discountedPrice(card))))]),_c('span',{staticClass:\"body4 sub2\"},[_vm._v(\"원\")]),(card.price.is_subscription)?_c('span',{staticClass:\"body4 sub3\"},[_vm._v(\"/월\")]):_vm._e(),(card.category2!==42)?_c('span',{staticClass:\"body4 sub2 margin-left-4\"},[_vm._v(\"~\")]):_vm._e()])])]):_vm._e()])])])}),0):_vm._e()]),_c('div',{staticClass:\"tablet\"},[_c('div',{staticClass:\"card-wrapper\"},_vm._l((_vm.cards),function(card,idx){return _c('div',{key:'card'+idx},[_c('div',{on:{\"click\":function($event){return _vm.clickDetail(card)}}},[_c('div',{staticClass:\"card-img\",style:(_vm.imgField(card.img, 'mobile'))}),_c('div',{staticClass:\"card-content\"},[(card.partner)?_c('div',{staticClass:\"flex-align\"},[(card.partner.img)?_c('img',{staticClass:\"margin-right-8\",staticStyle:{\"width\":\"24px\",\"height\":\"24px\"},attrs:{\"src\":card.partner.img}}):_vm._e(),_c('div',{staticClass:\"body5 sub3\"},[_vm._v(_vm._s(card.partner.name))])]):_vm._e(),_c('div',{staticClass:\"subtitle6 main margin-top-8\"},[_vm._v(_vm._s(card.name))]),_c('div',{staticClass:\"body5 sub2 ellipsis-1\"},[_vm._v(_vm._s(card.simple_desc))]),(_vm.discountedPrice(card)>0)?_c('div',[(_vm.isDiscount(card))?_c('div',{staticClass:\"body5 sub4 text-line-through\"},[_vm._v(_vm._s(_vm._f(\"currency\")(card.price.price)))]):_vm._e(),_c('div',{staticClass:\"flex-align\"},[(card.price.discount_type===0)?_c('div',{staticClass:\"margin-right-4 primary body2-bold\"},[_vm._v(_vm._s(_vm.discountText(card)))]):_vm._e(),_c('div',{staticClass:\"body2-bold\"},[_c('span',{staticClass:\"sub\"},[_vm._v(_vm._s(_vm._f(\"currencyNum\")(_vm.discountedPrice(card))))]),_c('span',{staticClass:\"body4 sub2\"},[_vm._v(\"원\")]),(card.price.is_subscription)?_c('span',{staticClass:\"body4 sub3\"},[_vm._v(\"/월\")]):_vm._e(),(card.category2!==42)?_c('span',{staticClass:\"body4 sub2 margin-left-4\"},[_vm._v(\"~\")]):_vm._e()])])]):_vm._e()])])])}),0)]),_c('div',{staticClass:\"mobile\"},[(_vm.cards.length>0)?_c('div',{staticClass:\"card-wrapper\"},_vm._l((_vm.cards),function(card,idx){return _c('div',{key:'card'+idx,class:{'margin-top-40': idx>0, 'margin-top-24': idx===0}},[_c('div',{staticClass:\"flex-align\",on:{\"click\":function($event){return _vm.clickDetail(card)}}},[_c('div',{staticClass:\"card-img\",style:(_vm.imgField(card.img, 'mobile'))}),_c('div',{staticClass:\"card-content\"},[(card.partner)?_c('div',{staticClass:\"flex-align\"},[_c('div',{staticClass:\"body5 sub3\"},[_vm._v(_vm._s(card.partner.name))])]):_vm._e(),_c('div',{staticClass:\"subtitle6 main margin-top-4\"},[_vm._v(_vm._s(card.name))]),_c('div',{staticClass:\"body5 sub2 ellipsis-1\"},[_vm._v(_vm._s(card.simple_desc))]),(_vm.discountedPrice(card)>0)?_c('div',[(_vm.isDiscount(card))?_c('div',{staticClass:\"body5 sub4 text-line-through\"},[_vm._v(_vm._s(_vm._f(\"currency\")(card.price.price)))]):_vm._e(),_c('div',{staticClass:\"flex-align\"},[(card.price.discount_type===0)?_c('div',{staticClass:\"margin-right-4 primary body2-bold\"},[_vm._v(_vm._s(_vm.discountText(card)))]):_vm._e(),_c('div',{staticClass:\"body2-bold\"},[_c('span',{staticClass:\"sub\"},[_vm._v(_vm._s(_vm._f(\"currencyNum\")(_vm.discountedPrice(card))))]),_c('span',{staticClass:\"body4 sub2\"},[_vm._v(\"원\")]),(card.price.is_subscription)?_c('span',{staticClass:\"body4 sub3\"},[_vm._v(\"/월\")]):_vm._e(),(card.category2!==42)?_c('span',{staticClass:\"body4 sub2 margin-left-4\"},[_vm._v(\"~\")]):_vm._e()])])]):_vm._e()])])])}),0):_vm._e()])])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <transition name=\"fade\">\r\n      <div>\r\n        <div class=\"pc\">\r\n          <div class=\"card-wrapper\" v-if=\"cards.length>0\">\r\n            <div v-for=\"(card, idx) in cards\" :key=\"'card'+idx\">\r\n              <div class=\"unselect\" @click=\"clickDetail(card)\">\r\n                <div class=\"card-img\" :style=\"imgField(card.img, 'pc')\">\r\n                  <div class=\"card-img-hover\" v-if=\"card.category2 === 40 && card.preview_url!==''\">\r\n                    <div @click.stop>\r\n                      <a :href=\"card.preview_url\" target=\"_blank\">\r\n                        <button class=\"button is-gray\" style=\"width:100%\">데스크톱<br>미리보기</button>\r\n                      </a>\r\n                    </div>\r\n                    <button class=\"button is-gray\" @click.stop.prevent=\"showMobilePreview(card.preview_url)\">모바일<br>미리보기</button>\r\n                  </div>\r\n                </div>\r\n                <div class=\"card-content\">\r\n                  <!-- 파트너 -->\r\n                  <div class=\"flex-align margin-top-12\" v-if=\"card.partner\">\r\n                    <img style=\"width:32px;height:32px\"\r\n                         class=\"margin-right-8\"\r\n                         :src=\"card.partner.img\" v-if=\"card.partner.img\">\r\n                    <div class=\"body4 sub3\">{{ card.partner.name }}</div>\r\n                  </div>\r\n                  <div class=\"subtitle4 main margin-top-8\">{{ card.name }}</div>\r\n                  <div class=\"body3 sub2 ellipsis-1\">{{ card.simple_desc }}</div>\r\n                  <!-- 가격 정보 -->\r\n                  <div v-if=\"discountedPrice(card)>0\" class=\"margin-top-8\">\r\n                    <div class=\"body5 sub4 text-line-through\" v-if=\"isDiscount(card)\">{{ card.price.price | currency }}</div>\r\n                    <div class=\"flex-align\">\r\n                      <div class=\"margin-right-4 primary body0-bold\" v-if=\"card.price.discount_type===0\">{{ discountText(card) }}</div>\r\n                      <div class=\"body0-bold\">\r\n                        <span class=\"sub\">{{ discountedPrice(card) | currencyNum }}</span>\r\n                        <span class=\"body4 sub2\">원</span>\r\n                        <span class=\"body4 sub3\" v-if=\"card.price.is_subscription\">/월</span>\r\n                        <span class=\"body4 sub2 margin-left-4\" v-if=\"card.category2!==42\">~</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"tablet\">\r\n          <div class=\"card-wrapper\">\r\n            <div v-for=\"(card, idx) in cards\" :key=\"'card'+idx\">\r\n              <div @click=\"clickDetail(card)\">\r\n                <div class=\"card-img\" :style=\"imgField(card.img, 'mobile')\"></div>\r\n                <div class=\"card-content\">\r\n                  <!-- 파트너 -->\r\n                  <div class=\"flex-align\" v-if=\"card.partner\">\r\n                    <img style=\"width:24px;height:24px\"\r\n                         class=\"margin-right-8\"\r\n                         :src=\"card.partner.img\" v-if=\"card.partner.img\">\r\n                    <div class=\"body5 sub3\">{{ card.partner.name }}</div>\r\n                  </div>\r\n                  <div class=\"subtitle6 main margin-top-8\">{{ card.name }}</div>\r\n                  <div class=\"body5 sub2 ellipsis-1\">{{ card.simple_desc }}</div>\r\n                  <!-- 가격 정보 -->\r\n                  <div v-if=\"discountedPrice(card)>0\">\r\n                    <div class=\"body5 sub4 text-line-through\" v-if=\"isDiscount(card)\">{{ card.price.price | currency }}</div>\r\n                    <div class=\"flex-align\">\r\n                      <div class=\"margin-right-4 primary body2-bold\" v-if=\"card.price.discount_type===0\">{{ discountText(card) }}</div>\r\n                      <div class=\"body2-bold\">\r\n                        <span class=\"sub\">{{ discountedPrice(card) | currencyNum }}</span>\r\n                        <span class=\"body4 sub2\">원</span>\r\n                        <span class=\"body4 sub3\" v-if=\"card.price.is_subscription\">/월</span>\r\n                        <span class=\"body4 sub2 margin-left-4\" v-if=\"card.category2!==42\">~</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile\">\r\n          <div class=\"card-wrapper\" v-if=\"cards.length>0\">\r\n            <div :class=\"{'margin-top-40': idx>0, 'margin-top-24': idx===0}\" v-for=\"(card, idx) in cards\" :key=\"'card'+idx\">\r\n              <div class=\"flex-align\" @click=\"clickDetail(card)\">\r\n                <div class=\"card-img\" :style=\"imgField(card.img, 'mobile')\"></div>\r\n                <div class=\"card-content\">\r\n                  <!-- 파트너 -->\r\n                  <div class=\"flex-align\" v-if=\"card.partner\">\r\n                    <!--<img style=\"width:24px;height:24px\"\r\n                         class=\"margin-right-8\"\r\n                         :src=\"card.partner.img\" v-if=\"card.partner.img\">-->\r\n                    <div class=\"body5 sub3\">{{ card.partner.name }}</div>\r\n                  </div>\r\n                  <div class=\"subtitle6 main margin-top-4\">{{ card.name }}</div>\r\n                  <div class=\"body5 sub2 ellipsis-1\">{{ card.simple_desc }}</div>\r\n                  <!-- 가격 정보 -->\r\n                  <div v-if=\"discountedPrice(card)>0\">\r\n                    <div class=\"body5 sub4 text-line-through\" v-if=\"isDiscount(card)\">{{ card.price.price | currency }}</div>\r\n                    <div class=\"flex-align\">\r\n                      <div class=\"margin-right-4 primary body2-bold\" v-if=\"card.price.discount_type===0\">{{ discountText(card) }}</div>\r\n                      <div class=\"body2-bold\">\r\n                        <span class=\"sub\">{{ discountedPrice(card) | currencyNum }}</span>\r\n                        <span class=\"body4 sub2\">원</span>\r\n                        <span class=\"body4 sub3\" v-if=\"card.price.is_subscription\">/월</span>\r\n                        <span class=\"body4 sub2 margin-left-4\" v-if=\"card.category2!==42\">~</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </transition>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    name: \"CardProducts\",\r\n    props: {\r\n      products: {\r\n        type: Array\r\n      },\r\n      shadow: {\r\n        type: Boolean,\r\n        default: false\r\n      }\r\n    },\r\n    created() {\r\n      this.cards = this.products.map(card=>{\r\n        if(card.preview_url && card.preview_url.indexOf('demo')===-1) {\r\n          let key = card.preview_url.split('.')[0].replace('https://','');\r\n          card.preview_url += `/home?demo_test=${key}`;\r\n        }\r\n        return card;\r\n      });\r\n    },\r\n    data() {\r\n      return {\r\n        cards: [],\r\n        avail_color: [],\r\n        colors: ['#0ead9d', '#d0ae45', '#f45853', '#393e46', '#ff6600'],\r\n        ishover: false\r\n      }\r\n    },\r\n    watch: {\r\n      products(n) {\r\n        this.cards = n.map(card=>{\r\n          if(card.preview_url && card.preview_url.indexOf('demo')===-1) {\r\n            let key = card.preview_url.split('.')[0].replace('https://','');\r\n            card.preview_url += `/home?demo_test=${key}`;\r\n          }\r\n          return card;\r\n        });\r\n      }\r\n    },\r\n    computed: {\r\n      boxShadow() {\r\n        if (this.shadow) return 'box-shadow: 0px 2px 10px 0 #ccc8c8;';\r\n        else return '';\r\n      }\r\n    },\r\n    methods: {\r\n      showMobilePreview(preview_url) {\r\n        window.name = 'preview_parent';\r\n        let popup = window.open('', 'previewPopup', 'width=360, height=640, top=300, left=300, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=yes, scrollbar=no');\r\n        popup.location.href = preview_url;\r\n      },\r\n      discountText(product) {\r\n        let text = '';\r\n        if (this.isDiscount(product)) {\r\n          if (product.price.discount_rate !== 0 && product.price.discount_type === 0) {\r\n            text = product.price.discount_rate + '%'\r\n          } else if (product.price.discount_price !== 0 && product.price.discount_type === 1) {\r\n            text = product.price.discount_price + '원';\r\n          }\r\n        }\r\n        return text;\r\n      },\r\n      // 할인 여부\r\n      isDiscount(product) {\r\n        if (product.price.is_discount && product.price.discount_start !== null && product.price.discount_end !== null) {\r\n          let currentDate = this.dayjs().format('YYYY-MM-DD HH:mm');\r\n          return !(currentDate < product.price.discount_start || currentDate > product.price.discount_end);\r\n        } else if (product.price.discount_start !== null && product.price.discount_end === null) {\r\n          let currentDate = this.dayjs().format('YYYY-MM-DD HH:mm');\r\n          return currentDate >= product.price.discount_start;\r\n        } else if (product.price.discount_start === null && product.price.discount_end !== null) {\r\n          let currentDate = this.dayjs().format('YYYY-MM-DD HH:mm');\r\n          return currentDate <= product.price.discount_end;\r\n        } else {\r\n          return false;\r\n        }\r\n      },\r\n      // 상품 가격\r\n      discountedPrice(product) {\r\n        let total = 0;\r\n        if (this.isDiscount(product)) {\r\n          if (product.price.discount_rate !== 0 && product.price.discount_type === 0) {\r\n            total = product.price.price * (1 - (product.price.discount_rate / 100))\r\n          } else if (product.price.discount_price !== 0 && product.price.discount_type === 1) {\r\n            total = product.price.price - product.price.discount_price;\r\n          }\r\n        } else total = product.price.price;\r\n        return total;\r\n      },\r\n      // 상세 페이지 이동\r\n      clickDetail(card) {\r\n        this.routeGa('',`테마 카드(${card.name})`, card.name);\r\n        if (this.$route.path.search('detail') > -1) {\r\n          this.$router.push(`/store/detail?id=${card.id}`)\r\n        } else {\r\n          this.$router.push(`store/detail?id=${card.id}`)\r\n        }\r\n      },\r\n      imgField(img, device) {\r\n        let style = {\r\n          backgroundImage: `url(${this.image(img)})`,\r\n          backgroundSize: 'cover'\r\n        };\r\n        if(device==='pc') {\r\n          style.backgroundPosition = 'center';\r\n        } else {\r\n          style.backgroundPosition = 'top';\r\n        }\r\n        return style;\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  .card-img-hover\r\n    display none\r\n    position absolute\r\n    top 0\r\n    left 0\r\n    background rgba(0,0,0,0.3)\r\n    width 100%\r\n    height 100%\r\n    align-items center\r\n    justify-content center\r\n    grid-template-columns repeat(2, 1fr)\r\n    grid-column-gap 12px\r\n    padding 36px\r\n\r\n  .pc\r\n    .card-wrapper\r\n      display grid\r\n      grid-gap 57px 24px\r\n      grid-template-columns repeat(3, 1fr)\r\n\r\n    .card-img\r\n      position relative\r\n      width 100%\r\n      height 368px\r\n      border-radius 8px\r\n      background-color $gray4\r\n      border 1px solid $gray3\r\n    .card-img:hover\r\n      .card-img-hover\r\n        display grid\r\n\r\n    .card-content\r\n      padding-top 12px\r\n\r\n  .tablet\r\n    .card-wrapper\r\n      display grid\r\n      grid-gap 57px 24px\r\n      grid-template-columns repeat(3, 1fr)\r\n\r\n    .card-img\r\n      width 100%\r\n      height 0\r\n      padding-top 100%\r\n    .card-content\r\n      padding-top 12px\r\n  .mobile\r\n    .card-img\r\n      position relative\r\n      width 120px\r\n      height 120px\r\n      border-radius 8px\r\n      background-color $gray4\r\n      border 1px solid $gray3\r\n\r\n    .card-content\r\n      margin-left 20px\r\n      flex 1\r\n\r\n  @media (max-width:1024px)\r\n    .pc\r\n      display none\r\n    .tablet\r\n      display block\r\n    .mobile\r\n      display none\r\n\r\n  @media (max-width:640px)\r\n    .pc\r\n      display none\r\n    .tablet\r\n      display none\r\n    .mobile\r\n      display block\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!./CardProducts.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!./CardProducts.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CardProducts.vue?vue&type=template&id=11fc1321&scoped=true&\"\nimport script from \"./CardProducts.vue?vue&type=script&lang=js&\"\nexport * from \"./CardProducts.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CardProducts.vue?vue&type=style&index=0&id=11fc1321&lang=stylus&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  \"11fc1321\",\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!./CardProducts.vue?vue&type=style&index=0&id=11fc1321&lang=stylus&scoped=true&\""],"sourceRoot":""}