{"version":3,"sources":["webpack:///./src/pages/category.page.vue?52c9","webpack:///src/components/creator/CreatorCardItem/index.vue","webpack:///./src/components/creator/CreatorCardItem/index.vue?2f46","webpack:///./src/components/creator/CreatorCardItem/index.vue","webpack:///./src/components/creator/CreatorCardItem/index.vue?afb3","webpack:///src/components/creator/CreatorCardList/index.vue","webpack:///./src/components/creator/CreatorCardList/index.vue?411a","webpack:///./src/components/creator/CreatorCardList/index.vue?19a7","webpack:///./src/components/creator/CreatorCardList/index.vue?1c0c","webpack:///src/pages/category.page.vue","webpack:///./src/pages/category.page.vue?f19b","webpack:///./src/pages/category.page.vue","webpack:///./src/components/creator/CreatorCardItem/index.vue?9256","webpack:///./src/components/creator/CreatorCardList/index.vue?757a","webpack:///./src/pages/category.page.vue?dd4f"],"names":["name","components","props","data","type","required","computed","mapState","locale","showName","this","name_ja","name_en","showDescription","description_ja","methods","htmlToFormattedText","component","_vm","_h","$createElement","_c","_self","class","canNotBuy","staticClass","on","$router","push","attrs","thumbnail_url","_v","_s","CardItem","Pagination","default","numberOfCard","pageSize","currentPage","onChange","page","$emit","_l","card","key","CardListCreator","CardListNFT","RecommendedProjectsCarousel","id","loading","category","recommendedCreators","creators","numberOfCreatros","metaInfo","title","list","hierarchy","localizedDescription","localizedSubCategoryCarouselSectionTitle","carousel_title_en","carousel_title_ja","$t","localizedSubCategoryListSectionTitle","list_title_en","list_title_ja","mounted","mapActions","clearHeaderCondition","fetchMarketplace","setHierarchy","onPageChange","getCategory","getCategories","total","items","getRecommendedCreators","objectAboutCreator","recommendation_categorytop_as_project","is_deleted","getCreators","limit","offset","fetchNewPage","status","PICTURE_PER_PAGE","goToLinkPlace","banner_url","$event","domProps","$sanitize","_e","show_nftlist","length","staticRenderFns"],"mappings":"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","file":"js/chunk-b8a0c1e0.4b554ffe.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:\"custom-background pb-12 overflow-x-hidden\"},[_c('a-spin',{attrs:{\"spinning\":_vm.loading}},[_c('div',[_c('div',{staticClass:\"mx-auto w-8/12 z-30 relative\"},[_c('div',{staticClass:\"hidden sm:block\"},[_c('div',{staticClass:\"w-full h-full object-scale-down flex items-center justify-center\"},[_c('img',{staticClass:\"rounded-3xl cursor-pointer\",attrs:{\"src\":_vm.category.banner_url},on:{\"click\":function($event){return _vm.goToLinkPlace()}}})])]),_c('div',{staticClass:\"visible sm:hidden\"},[_c('div',{staticClass:\"mx-auto w-full z-30 relative\"},[_c('div',{staticClass:\"w-full h-full object-scale-down flex items-center justify-center\"},[_c('img',{staticClass:\"cursor-pointer\",attrs:{\"src\":_vm.category.banner_url},on:{\"click\":function($event){return _vm.goToLinkPlace()}}})])])])]),(_vm.localizedDescription)?_c('div',{staticClass:\"width-1140-no-padding py-2 px-4 mx-auto mt-8 mb-4 text-lg text-black description-CSS\",domProps:{\"innerHTML\":_vm._s(_vm.$sanitize(_vm.localizedDescription))}}):_vm._e(),(_vm.category.show_nftlist == 0)?_c('div',[(this.recommendedCreators && this.recommendedCreators.length > 0)?_c('div',[_c('div',{staticClass:\"width-1140-no-padding mt-6 py-2 mx-auto custom-background\"},[_c('div',{staticClass:\"title custom-title\"},[_vm._v(\" \"+_vm._s(_vm.localizedSubCategoryCarouselSectionTitle)+\" \")])]),_c('RecommendedProjectsCarousel',{staticClass:\"mb-4 width-1140-no-padding mx-auto\",attrs:{\"data\":this.recommendedCreators,\"numberOfPicture\":4}})],1):_vm._e(),_c('div',{staticClass:\"width-1140-no-padding mt-6 py-2 mx-auto custom-background\"},[_c('div',{staticClass:\"title custom-title\"},[_vm._v(\" \"+_vm._s(_vm.localizedSubCategoryListSectionTitle)+\" \")])]),(_vm.creators && _vm.creators.length > 0)?_c('div',{staticClass:\"mx-auto width-1140\"},[_c('CardListCreator',{attrs:{\"data\":_vm.creators,\"numberOfCard\":_vm.numberOfCreatros},on:{\"onPageChange\":_vm.onPageChange}})],1):_c('div',{staticClass:\"comingsoon\"},[_vm._v(\"coming soon..\")])]):_c('div',[(this.recommendedCreators && this.recommendedCreators.length > 0)?_c('div',[_c('div',{staticClass:\"width-1140-no-padding mt-6 py-2 mx-auto custom-background\"},[_c('div',{staticClass:\"title custom-title\"},[_vm._v(\" \"+_vm._s(_vm.localizedSubCategoryCarouselSectionTitle)+\" \")])]),_c('RecommendedProjectsCarousel',{staticClass:\"mb-4 width-1140-no-padding mx-auto\",attrs:{\"data\":this.recommendedCreators,\"numberOfPicture\":4}})],1):_vm._e(),_c('div',{staticClass:\"width-1140-no-padding mt-6 py-2 mx-auto custom-background\"},[_c('div',{staticClass:\"title custom-title\"},[_vm._v(\" \"+_vm._s(_vm.$t('PROJECT_NFT_LIST_SECTION_TITLE')))])]),_c('div',{staticClass:\"mx-auto width-1140\"},[_c('CardListNFT',{attrs:{\"data\":_vm.list},on:{\"onPageChange\":_vm.onPageChange}})],1)])])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div :class=\"['nft-card-detail text-white', canNotBuy ? 'cursor-not-allowed' : '']\">\n    <section\n      @click=\"() => ($router.push(`/Creator/${data.id}`))\"\n      class=\"nft-card-detail__img-container relative cursor-pointer\"\n    >\n      <div\n        :class=\"[\n          canNotBuy ? 'opacity-30 absolute cursor-not-allowed' : 'cursor-pointer',\n          'w-full h-full',\n        ]\"\n      >\n        <img\n          class=\"w-full h-full object-cover thumbnail-container thumbnail_shadow\"\n          :src=\"data.thumbnail_url\"\n        />\n        <!--\n        <div class=\"w-full h-full object-scale-down flex items-center justify-center\">\n          <img\n            class=\"rounded-3xl cursor-pointer\"\n            :src=\"data.thumbnail_url\"\n          />\n        </div>\n        -->\n        <div class=\"flex justify-center text-black mt-3 custom-text\"> {{ showName }} </div>\n     </div>\n    </section>\n    <div class=\"grid-cols-1 px-6 py-4 rounded-b-xl\"></div>\n  </div>\n</template>\n<!-- ====+=========+=========+=========+=========+=========+=========+====== -->\n<script>\n// import { CHAIN_INFO, TOKEN_SYMBOLS } from '@/constants/chains.constant';\n// import { CHAIN_INFO } from '@/constants/chains.constant';\n// import { SITE_URL } from '@/env';\n// import moment from 'moment';\n// import { generateCalendarLink } from '@/utils/link.util';\nimport htmlToFormattedText from 'html-to-formatted-text';\nimport { mapState } from 'vuex';\nexport default {\n  name: 'NFTCardItem',\n  //-----+---------+---------+---------+---------+---------+---------+---------E\n  components: {\n    // CardTag,\n    // GlobalIcon,\n    // CalendarIcon,\n    // TwitterIcon,\n    // CryptoIcon,\n  },\n  //-----+---------+---------+---------+---------+---------+---------+---------E\n  props: {\n    data: {\n      type: Object,\n      required: true,\n    },\n  },\n  //-----+---------+---------+---------+---------+---------+---------+---------E\n  data() {\n    return {\n      // CHAIN_INFO,\n      // computationRefreshKey: false,\n      // endTimeMilli: 0,\n      // SITE_URL,\n    }; // End of return {...}\n  }, // End of data() {...}\n  //-----+---------+---------+---------+---------+---------+---------+---------E\n  //created() {\n  //  this.getTime();\n  //},\n  // ----+---------+---------+---------+---------+---------+---------+---------E\n  computed: {\n    ...mapState({\n      locale: (state) => state?.setting.locale,\n    }),\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    showName() {\n      return this.locale === 'ja' && this.data.name_ja ? this.data.name_ja : this.data.name_en;\n    },\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    showDescription() {\n      return this.locale === 'ja' && this.data.description_ja\n        ? this.data.description_ja\n        : this.data.description;\n    },\n  }, // End of computed: {...}\n  //-----+---------+---------+---------+---------+---------+---------+---------E\n  methods: {\n    htmlToFormattedText,\n  },\n};\n</script>\n\n<style\n  lang=\"scss\"\n  scoped\n>\n.tight-leading {\n  line-height: 0.9rem;\n}\n.nft-card-detail {\n  @screen md {\n    width: 245px;\n  }\n  width: 95%;\n  margin: auto;\n  &__img-container {\n    aspect-ratio: 1 / 1;\n    .can-not-buy-btns {\n      @apply absolute top-1/2 left-1/2;\n      transform: translate(-50%, -50%);\n    }\n  }\n  &__body {\n    @apply bg-card-item-bg;\n    .card-section {\n      @apply py-2;\n      .property {\n        @apply text-card-item-label;\n      }\n    }\n  }\n  &__info {\n    height: 84px;\n    overflow: hidden;\n\n    .description {\n      display: -webkit-box;\n      -webkit-line-clamp: 3;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      line-height: 0.9rem;\n    }\n  }\n}\n.timer {\n  font-family: 'Lato', 'Poppins', sans-serif;\n  font-variant-numeric: tabular-nums;\n  .time-unit-box {\n    @apply w-1/5;\n  }\n  .colon-box {\n    width: 7%;\n  }\n}\n.thumbnail-container {\n  border: 2px solid #000;\n  border-radius: 10000000px;\n}\n.custom-text {\n  color: black;\n  font-size: 18px;\n  font-weight: bold;\n  \n  @media (max-width:768px) {\n    font-size: 14px;\n  }\n}\n.thumbnail_shadow {\n  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* 通常時の影 */\n  transition: box-shadow 0.3s ease, transform 0.3s ease; /* ホバー時のスムーズな変化 */\n}\n\n.thumbnail_shadow:hover {\n  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2); /* ホバー時に大きな影 */\n  transform: translateY(-4px); /* 画像が少し浮き上がる */\n}\n.icon-scale {\n  @apply w-7 h-7;\n  @screen xxs {\n    @apply w-10 h-10;\n  }\n  @screen xs {\n    @apply w-12 h-12;\n  }\n  @screen md {\n    @apply w-7 h-7;\n  }\n}\n.button-scale {\n  @apply w-28 h-7;\n  @screen xxs {\n    @apply w-48 h-10;\n  }\n  @screen xs {\n    @apply w-64 h-12;\n  }\n  @screen sm {\n    @apply w-80 h-12;\n  }\n  @screen md {\n    @apply w-28 h-7;\n  }\n}\n</style>\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!./index.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!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=38361dd0&scoped=true&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=38361dd0&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  \"38361dd0\",\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('div',{class:['nft-card-detail text-white', _vm.canNotBuy ? 'cursor-not-allowed' : '']},[_c('section',{staticClass:\"nft-card-detail__img-container relative cursor-pointer\",on:{\"click\":function () { return (_vm.$router.push((\"/Creator/\" + (_vm.data.id)))); }}},[_c('div',{class:[\n        _vm.canNotBuy ? 'opacity-30 absolute cursor-not-allowed' : 'cursor-pointer',\n        'w-full h-full' ]},[_c('img',{staticClass:\"w-full h-full object-cover thumbnail-container thumbnail_shadow\",attrs:{\"src\":_vm.data.thumbnail_url}}),_c('div',{staticClass:\"flex justify-center text-black mt-3 custom-text\"},[_vm._v(\" \"+_vm._s(_vm.showName)+\" \")])])]),_c('div',{staticClass:\"grid-cols-1 px-6 py-4 rounded-b-xl\"})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"nft-card-list\">\n    <div\n      class=\"list grid xl:grid-cols-4 md:grid-cols-2 grid-cols-2 gap-12 w-full border border-gray-300\"\n    >\n      <div\n        class=\"justify-self-center z-30 w-full\"\n        v-for=\"card in data\"\n        :key=\"`nft-card-list-${card.id}`\"\n      >\n        <CardItem :data=\"card\"></CardItem>\n      </div>\n    </div>\n    <Pagination\n      class=\"text-center mt-24\"\n      :total=\"numberOfCard\"\n      :pageSize=\"pageSize\" \n      :current=\"currentPage\"\n      @onChange=\"onChange\"\n      :showQuickJumper=\"false\"\n    ></Pagination>\n    <!-- <div class=\"text-center mt-8\">\n      <a\n        target=\"_blank\"\n        href=\"https://forms.gle/tPJ1NLKTc1tyPozZ6\"\n        class=\"font-medium border border-white whitespace-nowrap xxs:text-3xl text-2xl bg-transparent rounded-lg xxs:px-16 px-4 py-2 text-white h-18\"\n        >Apply for publication</a\n      >\n    </div> -->\n  </div>\n</template>\n<!-- ====+=========+=========+=========+=========+=========+=========+====== -->\n<script>\nimport { PICTURE_PER_PAGE } from '@/constants/common.constant';\nimport Pagination from '@/components/common/Pagination.vue';\nimport CardItem from '@/components/creator/CreatorCardItem/index.vue';\n//import { mapState } from 'vuex';\n// ------+---------+---------+---------+---------+---------+---------+---------E\nexport default {\n  name: 'CreatorCardList',\n  // ----+---------+---------+---------+---------+---------+---------+---------E\n  components: {\n    CardItem,\n    Pagination,\n  },\n  // ----+---------+---------+---------+---------+---------+---------+---------E\n  props: {\n    // テーブル categories から抽出した、当該カテゴリ配下の\n    // プロジェクト（漫画家、アーティスト）一ページ分のレコードオブジェクトの配列。\n    data: {\n      type: Array,\n      default: () => [],\n    },\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    // テーブル categories から抽出した、当該カテゴリ配下の\n    // 全プロジェクト（漫画家、アーティスト）のレコードの数。\n    numberOfCard: {\n      type: Number,\n    },\n  }, // End of  props: {...}\n  // ----+---------+---------+---------+---------+---------+---------+---------E\n  data() {\n    return {\n      pageSize: PICTURE_PER_PAGE,\n      currentPage: 1,\n    };\n  }, // End of data() {...}\n  // ----+---------+---------+---------+---------+---------+---------+---------E\n  //computed: {\n  //  ...mapState({\n  //    total: (state) => state.marketplace.totalItems || 0,\n  //  }),\n  //}, // End of computed: {...}\n  // ----+---------+---------+---------+---------+---------+---------+---------E\n  methods: {\n    onChange(page) {\n      this.currentPage = page;\n      this.$emit('onPageChange', page);\n    },\n  }, // End of methods: {...}\n}; // End of export default {...}\n</script>\n\n<style>\n.list{\n  padding-top: 60px;\n  padding-bottom: 60px;\n  padding-left: 30px;\n  padding-right: 30px;\n  @media (max-width:798px){\n    padding-left: 5px;\n    padding-right: 5px;\n  }\n}\n</style>\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!./index.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!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=4c90fac6&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&lang=css&\"\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  null,\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('div',{staticClass:\"nft-card-list\"},[_c('div',{staticClass:\"list grid xl:grid-cols-4 md:grid-cols-2 grid-cols-2 gap-12 w-full border border-gray-300\"},_vm._l((_vm.data),function(card){return _c('div',{key:(\"nft-card-list-\" + (card.id)),staticClass:\"justify-self-center z-30 w-full\"},[_c('CardItem',{attrs:{\"data\":card}})],1)}),0),_c('Pagination',{staticClass:\"text-center mt-24\",attrs:{\"total\":_vm.numberOfCard,\"pageSize\":_vm.pageSize,\"current\":_vm.currentPage,\"showQuickJumper\":false},on:{\"onChange\":_vm.onChange}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <section class=\"custom-background pb-12 overflow-x-hidden\">\n    <a-spin :spinning=\"loading\">\n      <div>\n        <!-- ------+---------+---------+---------+---------+---------+------ -->\n        <!-- ↓ ヘッダ直下の画像 ↓ -->\n        <!-- ------+---------+---------+---------+---------+---------+------ -->\n        <!--<div class=\"category-detail-page-img-container w-full z-30 relative\">-->\n        <div class=\"mx-auto w-8/12 z-30 relative\">\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↓ ＰＣのような幅 640 px 以上の画面で表示 ↓ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <div  class=\"hidden sm:block\">\n            <div class=\"w-full h-full object-scale-down flex items-center justify-center\">\n              <img\n                class=\"rounded-3xl cursor-pointer\"\n                :src=\"category.banner_url\"\n                @click=\"goToLinkPlace()\"\n              />\n            </div>\n          </div>\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↑ ＰＣのような幅 640 px 以上の画面で表示 ↑ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↓ スマートフォンのような幅 640 px 未満の画面で表示 ↓ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <div  class=\"visible sm:hidden\">\n            <div class=\"mx-auto w-full z-30 relative\">\n              <div class=\"w-full h-full object-scale-down flex items-center justify-center\">\n                <img\n                  class=\"cursor-pointer\"\n                  :src=\"category.banner_url\"\n                  @click=\"goToLinkPlace()\"\n                />\n              </div>\n            </div>\n          </div>\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↑ スマートフォンのような幅 640 px 未満の画面で表示 ↑ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n        </div>\n        <!-- ------+---------+---------+---------+---------+---------+------ -->\n        <!-- ↑ ヘッダ直下の画像 ↑ -->\n        <!-- ------+---------+---------+---------+---------+---------+------ -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!-- 「カテゴリについて」セクションタイトル -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!--\n        <div class=\"description width-1140-no-padding py-2 mx-auto mb-4\">\n          <div class=\"title custom-title\">\n            {{ $t('PROJECT_ABOUT_CATEGORY_SECTION_TITLE') }}\n          </div>\n        </div>\n        -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!-- カテゴリについてＨＴＭＬテキストで説明 -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <div\n              v-if=\"localizedDescription\"\n              v-html=\"$sanitize(localizedDescription)\"\n              class=\"width-1140-no-padding py-2 px-4 mx-auto mt-8 mb-4 text-lg text-black description-CSS\"\n        ></div>\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!-- ↓ お勧めサブカテゴリ一覧表示の場合と、↓ -->\n        <!-- ↓ ＮＦＴ一覧表示の場合がある。        ↓ -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!-- ↓ show_nftlist＝0 お勧めサブカテゴリの                   ↓ -->\n        <!-- ↓   カルーセルセクションタイトル、カルーセル、           ↓ -->\n        <!-- ↓   サブカテゴリ一覧セクションタイトル、サブカテゴリ一覧 ↓ -->\n        <!-- ↓ お勧めサブカテゴリが無ければ表示しない                 ↓ -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <div v-if=\"category.show_nftlist == 0\">\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↓ お勧めサブカテゴリの                       ↓ -->\n          <!-- ↓   カルーセルセクションタイトル、カルーセル ↓ -->\n          <!-- ↓お勧めサブカテゴリが無ければ表示しない      ↓ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <div\n            v-if=\"this.recommendedCreators && this.recommendedCreators.length > 0\"\n          >\n            <!-- --+---------+---------+---------+---------+---------+------ -->\n            <!-- お勧めサブカテゴリのカルーセルセクセクションタイトル -->\n            <!-- --+---------+---------+---------+---------+---------+------ -->\n            <div class=\"width-1140-no-padding mt-6 py-2 mx-auto custom-background\">\n              <div class=\"title custom-title\">\n                {{ localizedSubCategoryCarouselSectionTitle }}\n              </div>\n            </div>\n            <!-- --+---------+---------+---------+---------+---------+------ -->\n            <!-- お勧めサブカテゴリのカルーセル -->\n            <!-- --+---------+---------+---------+---------+---------+------ -->\n            <RecommendedProjectsCarousel\n              class=\"mb-4 width-1140-no-padding mx-auto\"\n              :data=\"this.recommendedCreators\"\n              :numberOfPicture=\"4\"\n            ></RecommendedProjectsCarousel>\n          </div>\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↑ お勧めサブカテゴリの                       ↑ -->\n          <!-- ↑   カルーセルセクションタイトル、カルーセル ↑ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- サブカテゴリ一覧セクションタイトル -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <div class=\"width-1140-no-padding mt-6 py-2 mx-auto custom-background\">\n            <div class=\"title custom-title\">\n              {{ localizedSubCategoryListSectionTitle }}\n            </div>\n          </div>\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↓ サブカテゴリが有る場合、サブカテゴリ一覧１２画像 ↓ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <div\n            v-if=\"creators && creators.length > 0\"\n            class=\"mx-auto width-1140\"\n          >\n            <CardListCreator\n              @onPageChange=\"onPageChange\"\n              :data=\"creators\"\n              :numberOfCard=\"numberOfCreatros\"\n            ></CardListCreator>\n          </div>\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↑ サブカテゴリが有る場合、サブカテゴリ一覧１２画像 ↑ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- サブカテゴリが無い場合 -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <div\n            v-else\n            class=\"comingsoon\"\n          >coming soon..</div>\n        </div>\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!-- ↑ show_nftlist＝0 お勧めサブカテゴリの                   ↑ -->\n        <!-- ↑   カルーセルセクションタイトル、カルーセル、           ↑ -->\n        <!-- ↑   サブカテゴリ一覧セクションタイトル、サブカテゴリ一覧 ↑ -->\n        <!-- ↑ お勧めサブカテゴリが無ければ表示しない                 ↑ -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!-- ↓ show_nftlist≠0 お勧めサブカテゴリの        ↓ -->\n        <!-- ↓   カルーセルセクションタイトル、カルーセル、↓ -->\n        <!-- ↓   NFT一覧セクションタイトル、NFT一覧        ↓ -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <div v-else>\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↓お勧めサブカテゴリのセクションタイトルとカルーセル↓ -->\n          <!-- ↓お勧めサブカテゴリが無ければ表示しない            ↓ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <div\n            v-if=\"this.recommendedCreators && this.recommendedCreators.length > 0\"\n          >\n            <!-- --+---------+---------+---------+---------+---------+------ -->\n            <!-- お勧めサブカテゴリのカルーセルセクセクションタイトル -->\n            <!-- --+---------+---------+---------+---------+---------+------ -->\n            <div class=\"width-1140-no-padding mt-6 py-2 mx-auto custom-background\">\n              <div class=\"title custom-title\">\n                {{ localizedSubCategoryCarouselSectionTitle }}\n              </div>\n            </div>\n            <!-- --+---------+---------+---------+---------+---------+------ -->\n            <!-- お勧めサブカテゴリのカルーセル -->\n            <!-- --+---------+---------+---------+---------+---------+------ -->\n            <RecommendedProjectsCarousel\n              class=\"mb-4 width-1140-no-padding mx-auto\"\n              :data=\"this.recommendedCreators\"\n              :numberOfPicture=\"4\"\n            ></RecommendedProjectsCarousel>\n          </div>\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ↑ お勧めサブカテゴリのセクションタイトルとカルーセル ↑ -->\n          <!-- ↑ お勧めサブカテゴリが無ければ表示しない             ↑ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <!-- 「ＮＦＴ一覧」セクションタイトル -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n          <div class=\"width-1140-no-padding mt-6 py-2 mx-auto custom-background\">\n            <div class=\"title custom-title\">\n              {{ $t('PROJECT_NFT_LIST_SECTION_TITLE') }}<!-- ＮＦＴ一覧 -->\n            </div>\n          </div>\n          <!-- ----+---------+---------+---------+---------+---------+-----  -->\n          <!-- ↓「ＮＦＴ一覧」１２画像↓ -->\n          <!-- ----+---------+---------+---------+---------+---------+-----  -->\n          <div\n            class=\"mx-auto width-1140\"\n          >\n            <CardListNFT\n              @onPageChange=\"onPageChange\"\n              :data=\"list\"\n            ></CardListNFT>\n          </div>\n          <!-- ----+---------+---------+---------+---------+---------+-----  -->\n          <!-- ↑「ＮＦＴ一覧」１２画像↑ -->\n          <!-- ----+---------+---------+---------+---------+---------+------ -->\n        </div>\n        <!-- ------+---------+---------+---------+---------+---------+-----  -->\n        <!-- ↑ show_nftlist≠0 お勧めサブカテゴリの        ↑ -->\n        <!-- ↑   カルーセルセクションタイトル、カルーセル、↑ -->\n        <!-- ↑   NFT一覧セクションタイトル、NFT一覧        ↑ -->\n        <!-- ------+---------+---------+---------+---------+---------+-----  -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n        <!-- ↑ お勧めサブカテゴリ一覧表示の場合と、↑ -->\n        <!-- ↑ ＮＦＴ一覧表示の場合がある。        ↑ -->\n        <!--  -----+---------+---------+---------+---------+---------+------ -->\n      </div>\n    </a-spin>\n  </section>\n</template>\n<!-- ====+=========+=========+=========+=========+=========+=========+====== -->\n<script>\n// １ページに表示する画像数。\nimport { PICTURE_PER_PAGE } from '@/constants/common.constant';\n// プロジェクト（漫画家、アーティスト）一覧表示用。\nimport CardListCreator from '@/components/creator/CreatorCardList/index.vue';\n// NFT一覧表示用。\nimport CardListNFT from '@/components/nft/CardList/index.vue';\nimport { mapActions, mapState } from 'vuex';\nimport RecommendedProjectsCarousel from '@/components/CarouselCreators.vue';\nimport { getCategories } from '@/services/categories';\n// ======+=========+=========+=========+=========+=========+=========+=========E\nexport default {\n  name: 'page-category',\n  // ====+=========+=========+=========+=========+=========+=========+=========E\n  components: { CardListCreator, CardListNFT, RecommendedProjectsCarousel, },\n  // ====+=========+=========+=========+=========+=========+=========+=========E\n  data() {\n    return {\n      id: this.$route.params.id,\n      loading: false,\n      category: '',\n      recommendedCreators: [],\n      creators: [],\n      numberOfCreatros: 0,\n    }; // End of return {...}\n  }, // End of data() {...}\n  // ====+=========+=========+=========+=========+=========+=========+=========E\n  metaInfo: {\n    title: 'BCG・GameFi 専門のNFT1次販売ローンチパッド - Zaif INO',\n    // meta: [\n    //     {\n    //         vmid: \"description\",\n    //         property: \"description\",\n    //         content:\n    //             \"ブロックチェーンゲーム・GameFi専門のNFT1次販売ローンチパッドのZaif INO。事前審査制導入で取り扱いNFTのクオリティを担保し、パブリックチェーンで海外プロジェクトの取り扱いも行います。\",\n    //     },\n    //     {\n    //         property: \"og:title\",\n    //         content: \"BCG・GameFi 専門のNFT1次販売ローンチパッド - Zaif INO\",\n    //         vmid: \"og:title\",\n    //     },\n    // ],\n  }, // End of metaInfo: {...}\n  // ====+=========+=========+=========+=========+=========+=========+=========E\n  computed: {\n    ...mapState({\n      // store にセットした、言語モード（日本語／英語）。\n      locale: (state) => state?.setting.locale,\n      // store にセットした、マーケットプレイスのＮＦＴ情報。\n      list: (state) => state.marketplace.marketplaceList,\n      //total: (state) => state.marketplace.totalItems || 1,\n      // パンくずリストをヘッダに書くためのコード。現在未使用。\n      hierarchy: (state) => state.hierarchy.hierarchy,\n      name_en  : (state) => state.hierarchy.name_en,\n    }), // End of ...mapState({...})\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    // 「カテゴリについて」の内容を英語モードと日本語モードで切り替え。\n    localizedDescription() {\n      const result = (this.locale === 'en'  ? this.category.description_en\n                                            : this.category.description_ja\n      );\n      return result;\n    }, // End of localizedDescription() {...}\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    // カテゴリのサブセクションのカルーセルのセクションタイトルを\n    // 英語モードと日本語モードで切り替え。\n    localizedSubCategoryCarouselSectionTitle() {\n      if (!this.category.carousel_title_en || !this.category.carousel_title_ja){\n        // カルーセルセクションタイトルは指定無し。\n        return this.$t('PROJECT_RECOMMENDED_CREATOR_SECTION_TITLE')\n      }\n      // カルーセルセクションタイトルは指定されている。\n      return (this.locale === 'en' ? this.category.carousel_title_en\n                                   : this.category.carousel_title_ja\n      );\n    }, // End of localizedSubCategoryCarouselSectionTitle() {...}\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    // カテゴリのサブセクションの一覧のセクションタイトルを\n    // 英語モードと日本語モードで切り替え。\n    localizedSubCategoryListSectionTitle() {\n      if (!this.category.list_title_en || !this.category.list_title_ja) {\n        // 一覧セクションタイトルは指定無し。\n        return this.$t('PROJECT_CREATOR_LIST_SECTION_TITLE')\n      }\n      //  一覧セクションタイトルは指定されている。\n      return (this.locale === 'en' ? this.category.list_title_en\n                                   : this.category.list_title_ja\n      );\n    }, // End of localizedSubCategoryListSectionTitle() {...}\n  }, // End of computed: {...}\n  // ====+=========+=========+=========+=========+=========+=========+=========E\n  async mounted() {\n    // ヘッダのカテゴリ選択コンボボックスと検索テキストボックスを初期化。\n    this.clearHeaderCondition();\n    // カテゴリ情報取得。\n    await this.getCategory(this.id);\n    // alert(`this.category=${JSON.stringify(this.category)}: mounted`);\n    // プロジェクト一覧の場合とNFT一覧の場合がある。\n    if (this.category.show_nftlist == 0) {\n      await this.getRecommendedCreators() // お勧めプロジェクト\n      await this.getCreators(1); // 引数はページ。お勧め以外も含めたプロジェクト。\n    } else {\n      await this.getRecommendedCreators() // お勧めプロジェクト\n      await this.fetchNewPage(undefined, 1); // カテゴリ直下ＮＦＴ\n    } // End of if (this.category.show_nftlist == 0) {...} else {...}\n    // パンくずリストをヘッダに書くためのコード。現在未使用。\n    this.setHierarchy({hierarchy: '',\n                        name_en: this.category.name_en,\n                        name_ja: this.category.name_ja,\n    }); // End of this.setHierarchy({...})\n  }, // End of async mounted() {...}\n  // ====+=========+=========+=========+=========+=========+=========+=========E\n  methods: {\n    ...mapActions({\n      // store にある、ヘッダのカテゴリコンボボックスと検索テキストボックスの\n      // 値をクリア。\n      clearHeaderCondition: 'extractcondition/clearHeaderCondition',\n      fetchMarketplace: 'marketplace/fetchMarketplaceList',\n      // パンくずリストをヘッダに書くためのコード。現在未使用。\n      setHierarchy: 'hierarchy/setHierarchy',\n    }), // End of ...mapActions({...})\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    // ページが切り替わったら実行。\n    async onPageChange(page) {\n      if (this.category.show_nftlist == 0) {\n        await this.getRecommendedCreators() // お勧めプロジェクト\n        await this.getCreators(page); //お勧め以外も含めたプロジェクト。\n      } else {\n        await this.getRecommendedCreators() // お勧めプロジェクト\n        await this.fetchNewPage(undefined, page);\n      } // End of if (this.category.show_nftlist == 0) {...} else {...}\n    }, // End of async onPageChange(page) {...}\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    // バックエンド mint-nft-backend DB テーブル categories から当該ページの\n    // カテゴリ情報を一つ取得し this.category に取り込む。内容は一オブジェクト。\n    async getCategory(id) {\n      const {total: total, items: items} = await getCategories({\n        type:  0,\n        id  : id,\n      });\n      if (total==0) {\n        // データが取得できなかったらエラーページに遷移。\n        await this.$router.push(`/ERROR_PAGE`)\n      } \n      this.category = items[0];\n      // alert(`*** this.category=${JSON.stringify(this.category)}: getCategory(id=${id}) ***`);\n    }, // End of async getCategory(id) {...}\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    // バックエンド mint-nft-backend DB テーブル creators から、当該ページの\n    // カテゴリに紐づく『お勧めの』クリエイターの情報を全て取得し、\n    // this.recommendedCreators に取り込む。\n    // 内容は一レコード一オブジェクトの配列。\n    async getRecommendedCreators() {\n      const objectAboutCreator = {\n        type: 1, // テーブル categories のクリエイターレコードを指定。\n        hierarchy: this.category.name_en,\n        recommendation_categorytop_as_project: 1, // お勧めの creator のみ取得\n        is_deleted: 0, // 論理削除されていない creator のみ取得\n      }; // End of const objectAboutCreator = {...}\n      // +---------+---------+---------+---------+---------+---------+---------E\n      const {items:items} = await getCategories(objectAboutCreator);\n      this.recommendedCreators = items;\n    }, // async getRecommendedCreators() {...}\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    // バックエンド mint-nft-backend DB テーブル creators から、当該ページの\n    // カテゴリに紐づくクリエイターの情報（お勧めもお勧め以外も）を一ページ分\n    // 取得し this.creators に取り込む。内容は一レコード一オブジェクトの配列。\n    // 同時に、条件を満たす全レコード数も取得（Pagenationに用いる）。\n    async getCreators(page) {\n      const objectAboutCreator = {\n        type: 1, // テーブル categories のクリエイターレコードを指定。\n        limit: PICTURE_PER_PAGE, // 取得クリエイターの人数。現在 12。\n        offset: PICTURE_PER_PAGE * (page - 1), // １ページなら0、２ページなら12。\n        hierarchy: this.category.name_en,\n        is_deleted: 0, // 論理削除されていない creator のみ取得。\n      }; // End of const objectAboutCreator = {...}\n      // +---------+---------+---------+---------+---------+---------+---------E\n      const {total:total,items:items} = await getCategories(objectAboutCreator);\n      this.numberOfCreatros = total;\n      //alert(`this.numberOfCreators=${this.numberOfCreatros}`)\n      this.creators = items;\n    }, // End of async getCreators(page) {...}\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    async fetchNewPage(status, page) {\n      this.loading = true;\n      const offset = PICTURE_PER_PAGE * (page - 1);\n      await this.fetchMarketplace({\n        limit: PICTURE_PER_PAGE,\n        offset,\n        //status: status === 'ALL' ? undefined : status,\n        //hierarchy: this.category.hierarchy,\n        // '\\' は特殊文字で '\\\\' としないとうまくいかない。\n        hierarchy: JSON.stringify([\n          this.category.name_en,\n          this.category.name_en + '\\\\%',\n        ]),\n      }); // End of await this.fetchMarketplace({...})\n      this.loading = false;\n    }, // End of async fetchNewPage(status, page) {...}\n    // --+---------+---------+---------+---------+---------+---------+---------E\n    // this.category.link の URL を開く。一番上の画面をクリックしたときの処理。\n    goToLinkPlace() {\n      // window.open(this.category.link, '_blank');\n    },\n  }, // End of methods: {...}\n}; // End of export default {...}\n</script>\n<!-- ====+=========+=========+=========+=========+=========+=========+====== -->\n<style\n  scoped\n  lang=\"scss\"\n>\n\n/* .category-detail-page-img-container { */\n/*   width: 1140px; */\n/*   @apply mx-auto; */\n/* } */\n::v-deep .category-detail-page {\n  @apply overflow-hidden;\n  @apply px-4;\n  @screen md {\n    @apply px-4;\n  }\n  @screen xl {\n    width: 1140px;\n    @apply px-0;\n  }\n  .description {\n    a {\n      color: #40a9ff;\n    }\n  }\n  &-breadcrumb {\n    .ant-breadcrumb {\n      span {\n        .ant-breadcrumb-link {\n          @apply text-white;\n          @apply font-medium;\n        }\n        .ant-breadcrumb-separator {\n          color: #fff;\n        }\n      }\n    }\n  }\n  .combined-target-bar {\n    @screen xxs {\n      padding-left: 16px;\n      padding-right: 16px;\n    }\n    @screen md {\n      padding-left: 32px;\n      padding-right: 32px;\n    }\n    @apply px-1;\n    @apply mb-4;\n  }\n}\n\n\n.width-1140 {\n  @apply px-2;\n  @screen md {\n    @apply px-4;\n  }\n  @screen xl {\n    width: 1140px;\n    @apply px-0;\n  }\n}\n.width-1140-no-padding {\n  @screen xl {\n    width: 1140px;\n  }\n}\n.width-1240-no-padding {\n  @screen xl {\n    width: 1240px;\n  }\n}\n.custom-background {\n    background-color: white;\n}\n/* タイトル用の基本スタイル */\n.title {\n  display: block;\n  font-size: 24px; /* フォントサイズを大きく */\n  font-weight: bold; /* フォントを太字に */\n  /* color: #FFFFFF; テキストカラー 白 */\n  color: #000000; /* テキストカラー 黒 */\n  margin-bottom: 20px; /* 下余白 */\n  padding: 10px 10px; /* 上下パディング */\n}\n\n/* 特定のセクション用のカスタムスタイル */\n.custom-title {\n  border-radius: 8px; /* 角の丸み */\n  text-align: left; /* テキストを中央揃えに */\n}\n .comingsoon {\n  display: flex;\n  align-items: center;\n  justify-content: center; /* 横方向の中央揃え */\n  color:black;\n  font-size:24px;\n }\n\n.text-top {\n  @apply text-2xl;\n  @screen xxs {\n    @apply text-3xl;\n  }\n  @screen md {\n    @apply text-base;\n  }\n}\n::v-deep .ant-breadcrumb {\n  span {\n    .ant-breadcrumb-link {\n      @apply text-white;\n      @apply font-medium;\n    }\n  }\n}\n::v-deep .ant-select {\n  color: #fff;\n  @apply font-semibold;\n  &-arrow {\n    color: white;\n  }\n  &-selection {\n    background-color: transparent;\n    border: 1px solid white;\n    @apply rounded-xl;\n    @apply w-32 h-6;\n    @apply text-xs;\n    &__rendered {\n      @apply mx-0;\n      @apply w-full h-full;\n      .ant-select-selection-selected-value {\n        @apply w-full h-full text-center relative -top-1;\n      }\n    }\n  }\n}\n/*以下カテゴリ紹介文内のCSSに適用 */\n::v-deep .description-CSS p {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n    max-width: 80%;\n}\n\n::v-deep .description-CSS img {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n    max-width: 80%;\n}\n\n::v-deep .description-CSS a > img {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n    max-width: 80%;\n}\n\n@media (max-width: 768px) {\n  ::v-deep .description-CSS p {\n    max-width: 100%;\n  }\n}\n</style>\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!./category.page.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!./category.page.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./category.page.vue?vue&type=template&id=85cbd748&scoped=true&\"\nimport script from \"./category.page.vue?vue&type=script&lang=js&\"\nexport * from \"./category.page.vue?vue&type=script&lang=js&\"\nimport style0 from \"./category.page.vue?vue&type=style&index=0&id=85cbd748&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  \"85cbd748\",\n  null\n  \n)\n\nexport default component.exports","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!./index.vue?vue&type=style&index=0&id=38361dd0&lang=scss&scoped=true&\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&lang=css&\"","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!./category.page.vue?vue&type=style&index=0&id=85cbd748&scoped=true&lang=scss&\""],"sourceRoot":""}