{"version":3,"sources":["webpack:///./src/views/graduation/productList/creation.vue?8c89","webpack:///src/views/graduation/productList/creation.vue","webpack:///./src/views/graduation/productList/creation.vue?9222","webpack:///./src/views/graduation/productList/creation.vue","webpack:///./src/views/graduation/productList/creation.vue?ad02"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","_l","item","key","id","colSpan","on","$event","goProductInfo","imgURL","coverPic","path","name","_v","_s","total","listQuery","page","choosePage","works_prev","works_next","staticRenderFns","components","data","groupTypeId","GraduateId","$route","params","GroupTypeId","query","limit","list","watch","document","body","scrollTop","documentElement","methods","number","getCreativeList","$router","push","year","getScreenWidth","screenWidth","beforeDestroy","window","removeEventListener","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,WAAW,CAACF,EAAG,SAAS,CAACE,YAAY,mBAAmBC,MAAM,CAAC,OAAS,KAAKP,EAAIQ,GAAIR,EAAQ,MAAE,SAASS,GAAM,OAAOL,EAAG,SAAS,CAACM,IAAID,EAAKE,GAAGJ,MAAM,CAAC,KAAOP,EAAIY,UAAU,CAACR,EAAG,MAAM,CAACE,YAAY,yBAAyB,CAACF,EAAG,MAAM,CAACE,YAAY,eAAeO,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOd,EAAIe,cAAcN,MAAS,CAACL,EAAG,MAAM,CAACG,MAAM,CAAC,IAAMP,EAAIgB,OAASP,EAAKQ,SAASC,KAAK,IAAMT,EAAKQ,SAASE,QAAQf,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,IAAI,CAACE,YAAY,QAAQ,CAACN,EAAIoB,GAAG,mBAAmBhB,EAAG,IAAI,CAACE,YAAY,QAAQ,CAACN,EAAIoB,GAAG,KAAKpB,EAAIqB,GAAGZ,EAAKU,MAAM,eAAc,GAAGf,EAAG,MAAM,CAACE,YAAY,eAAe,CAACF,EAAG,aAAa,CAACG,MAAM,CAAC,UAAW,EAAK,MAAQP,EAAIsB,MAAM,KAAOtB,EAAIuB,UAAUC,MAAMX,GAAG,CAAC,WAAab,EAAIyB,WAAW,WAAazB,EAAI0B,WAAW,WAAa1B,EAAI2B,eAAe,IAAI,IACl4BC,EAAkB,G,4EC+BtB,GACEC,WAAY,CAAd,mBACEC,KAFF,WAGI,MAAO,CACLd,OAAQ,kCACRJ,QAAS,EACTmB,YAAa,GACbT,MAAO,EACPC,UAAW,CACTS,WAAY/B,KAAKgC,OAAOC,OAAOvB,GAC/BwB,YAAalC,KAAKgC,OAAOG,MAAML,YAC/BP,KAAM,EACNa,MAAO,GAETC,KAAM,KAGVC,MAAO,CACLN,OAAQ,SAAZ,KACMO,SAASC,KAAKC,UAAY,EAC1BF,SAASG,gBAAgBD,UAAY,IAGzCE,QAAS,CACPnB,WADJ,SACA,GACMxB,KAAKsB,UAAUC,KAAOqB,EACtB5C,KAAK6C,mBAEPpB,WALJ,SAKA,GACMzB,KAAKsB,UAAUC,KAAOA,EACtBvB,KAAK6C,mBAEPnB,WATJ,SASA,GACM1B,KAAKsB,UAAUC,KAAOA,EACtBvB,KAAK6C,mBAEP/B,cAbJ,SAaA,GACMd,KAAK8C,QAAQC,KAAK,CAChB7B,KAAM,eACNe,OAAQ,CAAhB,SACQE,MAAO,CACLa,KAAMhD,KAAKgC,OAAOG,MAAMa,KACxBjB,WAAY/B,KAAKgC,OAAOC,OAAOvB,GAC/BwB,YAAalC,KAAKgC,OAAOG,MAAML,gBAIrC,gBAxBJ,WAwBA,wKACA,+DACA,SADA,EACA,OADA,EACA,OADA,EACA,MACA,UACA,SACA,uCACA,qCAEA,8BACA,IACA,0CACA,SACA,2BAZA,8CAkBI,aA1CJ,WA0CA,wKACA,kDACA,SADA,EACA,OADA,EACA,KACA,UACA,qEAJA,8CAQImB,eAlDJ,WAmDM,IAAN,4BAEQjD,KAAKW,QADHuC,EAAc,KACD,EAEA,KAIrB,QAlFF,WAkFA,wKACA,iBADA,uBAEA,oBAFA,OAGA,mBACA,mDAJA,8CAMEC,cAxFF,WAyFIC,OAAOC,oBAAoB,SAAUrD,KAAKiD,kBCzHkU,I,wBCQ5WK,EAAY,eACd,EACAxD,EACA6B,GACA,EACA,KACA,KACA,MAIa,aAAA2B,E,oECnBf","file":"js/chunk-54062f08.0bf27335.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"product\"},[_c('el-row',{staticClass:\"product__content\",attrs:{\"gutter\":12}},_vm._l((_vm.list),function(item){return _c('el-col',{key:item.id,attrs:{\"span\":_vm.colSpan}},[_c('div',{staticClass:\"product__content--img\"},[_c('div',{staticClass:\"hover-effect\",on:{\"click\":function($event){return _vm.goProductInfo(item)}}},[_c('img',{attrs:{\"src\":_vm.imgURL + item.coverPic.path,\"alt\":item.coverPic.name}}),_c('div',{staticClass:\"text\"},[_c('p',{staticClass:\"more\"},[_vm._v(\"view more\")])])]),_c('p',{staticClass:\"name\"},[_vm._v(\"/ \"+_vm._s(item.name)+\" /\")])])])}),1),_c('div',{staticClass:\"w-100 pb-40\"},[_c('Pagination',{attrs:{\"needPage\":true,\"total\":_vm.total,\"page\":_vm.listQuery.page},on:{\"choosePage\":_vm.choosePage,\"works_prev\":_vm.works_prev,\"works_next\":_vm.works_next}})],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"product\">\r\n    <el-row :gutter=\"12\" class=\"product__content\">\r\n      <el-col :span=\"colSpan\" v-for=\"item in list\" :key=\"item.id\">\r\n        <div class=\"product__content--img\">\r\n          <div class=\"hover-effect\" @click=\"goProductInfo(item)\">\r\n            <img :src=\"imgURL + item.coverPic.path\" :alt=\"item.coverPic.name\" />\r\n\r\n            <div class=\"text\">\r\n              <p class=\"more\">view more</p>\r\n            </div>\r\n          </div>\r\n          <p class=\"name\">/ {{ item.name }} /</p>\r\n        </div>\r\n      </el-col>\r\n    </el-row>\r\n\r\n    <div class=\"w-100 pb-40\">\r\n      <Pagination\r\n        :needPage=\"true\"\r\n        :total=\"total\"\r\n        :page=\"listQuery.page\"\r\n        @choosePage=\"choosePage\"\r\n        @works_prev=\"works_prev\"\r\n        @works_next=\"works_next\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport Pagination from \"@/components/Pagination.vue\";\r\nexport default {\r\n  components: { Pagination },\r\n  data() {\r\n    return {\r\n      imgURL: process.env.VUE_APP_BASE_IMG_URL,\r\n      colSpan: 8,\r\n      groupTypeId: \"\",\r\n      total: 0,\r\n      listQuery: {\r\n        GraduateId: this.$route.params.id,\r\n        GroupTypeId: this.$route.query.groupTypeId,\r\n        page: 1,\r\n        limit: 9,\r\n      },\r\n      list: [],\r\n    };\r\n  },\r\n  watch: {\r\n    $route: function (to, from) {\r\n      document.body.scrollTop = 0;\r\n      document.documentElement.scrollTop = 0;\r\n    },\r\n  },\r\n  methods: {\r\n    choosePage(number) {\r\n      this.listQuery.page = number;\r\n      this.getCreativeList();\r\n    },\r\n    works_prev(page) {\r\n      this.listQuery.page = page;\r\n      this.getCreativeList();\r\n    },\r\n    works_next(page) {\r\n      this.listQuery.page = page;\r\n      this.getCreativeList();\r\n    },\r\n    goProductInfo(item) {\r\n      this.$router.push({\r\n        name: \"productIntro\",\r\n        params: { id: item.id },\r\n        query: {\r\n          year: this.$route.query.year,\r\n          GraduateId: this.$route.params.id,\r\n          GroupTypeId: this.$route.query.groupTypeId,\r\n        },\r\n      });\r\n    },\r\n    async getCreativeList() {\r\n      await this.$api.getGraduateExhibit(this.listQuery).then((res) => {\r\n        const { code, data, count } = res.data;\r\n        if (code === 200) {\r\n          this.list = data;\r\n          this.total = Math.ceil(count / this.listQuery.limit);\r\n          document.documentElement.scrollTop = 0;\r\n\r\n          this.list.forEach((item, index) => {\r\n            try {\r\n              this.list[index].coverPic = JSON.parse(item.coverPic);\r\n            } catch {\r\n              console.log(error);\r\n            }\r\n          });\r\n        }\r\n      });\r\n    },\r\n    async getGroupList() {\r\n      await this.$api.getGroupTypeList().then((res) => {\r\n        const { code, data } = res.data;\r\n        if (code === 200) {\r\n          this.groupTypeId = data.find((item) => item.name === \"創作組\").dtCode;\r\n        }\r\n      });\r\n    },\r\n    getScreenWidth() {\r\n      let screenWidth = document.body.clientWidth;\r\n      if (screenWidth > 1200) {\r\n        this.colSpan = 8;\r\n      } else {\r\n        this.colSpan = 12;\r\n      }\r\n    },\r\n  },\r\n  async mounted() {\r\n    await this.getGroupList();\r\n    await this.getCreativeList();\r\n    this.getScreenWidth();\r\n    window.addEventListener(\"resize\", this.getScreenWidth);\r\n  },\r\n  beforeDestroy() {\r\n    window.removeEventListener(\"resize\", this.getScreenWidth);\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang='scss'>\r\n.product {\r\n  width: 100%;\r\n  text-align: center;\r\n  padding: 0 12px;\r\n  @media (min-width: 1024px) {\r\n    padding: 0 120px;\r\n  }\r\n\r\n  &__content {\r\n    padding: 0 30px;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n\r\n    @media (min-width: 1024px) {\r\n      padding: 0 90px;\r\n    }\r\n    &--img {\r\n      width: 100%;\r\n      position: relative;\r\n      margin-bottom: 12px;\r\n      display: flex;\r\n      justify-content: center;\r\n      flex-direction: column;\r\n      align-items: center;\r\n\r\n      @media (min-width: 1024px) {\r\n        margin-bottom: 40px;\r\n        overflow: hidden;\r\n      }\r\n      .name {\r\n        color: #fff;\r\n        font-weight: bold;\r\n        font-size: 14px;\r\n        line-height: 160%;\r\n        @media (min-width: 768px) {\r\n          font-size: 18px;\r\n        }\r\n      }\r\n\r\n      .hover-effect {\r\n        height: 90px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n        overflow: hidden;\r\n        position: relative;\r\n        @media (min-width: 768px) {\r\n          height: 200px;\r\n        }\r\n        @media (min-width: 1024px) {\r\n          height: 200px;\r\n        }\r\n        @media (min-width: 1440px) {\r\n          height: 240px;\r\n        }\r\n        @media (min-width: 2560px) {\r\n          height: 360px;\r\n        }\r\n\r\n        img {\r\n          width: 100%;\r\n          height: 100%;\r\n          -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;\r\n          transition: opacity 0.35s, transform 0.35s;\r\n        }\r\n\r\n        .text {\r\n          &::before,\r\n          &::after {\r\n            position: absolute;\r\n            content: \"\";\r\n            opacity: 0;\r\n          }\r\n\r\n          &::before {\r\n            top: 40px;\r\n            right: 20px;\r\n            bottom: 40px;\r\n            left: 20px;\r\n            border-top: 1px solid #fff;\r\n            border-bottom: 1px solid #fff;\r\n            -webkit-transform: scale(0, 1);\r\n            transform: scale(0, 1);\r\n            -webkit-transform-origin: 0 0;\r\n            transform-origin: 0 0;\r\n          }\r\n\r\n          &::after {\r\n            top: 15px;\r\n            right: 50px;\r\n            bottom: 15px;\r\n            left: 50px;\r\n            border-right: 1px solid #fff;\r\n            border-left: 1px solid #fff;\r\n            -webkit-transform: scale(1, 0);\r\n            transform: scale(1, 0);\r\n            -webkit-transform-origin: 100% 0;\r\n            transform-origin: 100% 0;\r\n          }\r\n\r\n          .more {\r\n            color: #fff;\r\n            position: absolute;\r\n            padding: 8px 24px;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -100%);\r\n            background-color: #ceb87f;\r\n            box-shadow: 1px 1px 3px #fff;\r\n            border-radius: 40px;\r\n            text-transform: none;\r\n            opacity: 0;\r\n          }\r\n\r\n          p {\r\n            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;\r\n            transition: opacity 0.35s, transform 0.35s;\r\n          }\r\n        }\r\n        @media (min-width: 1024px) {\r\n          &:hover {\r\n            cursor: pointer;\r\n\r\n            img {\r\n              filter: brightness(0.5);\r\n              transform: scale(1.2) !important;\r\n              transition: 0.3s;\r\n              opacity: 0.7;\r\n              -webkit-transform: translate3d(0, 0, 0);\r\n              transform: translate3d(0, 0, 0);\r\n            }\r\n\r\n            .text {\r\n              &::before,\r\n              &::after {\r\n                opacity: 1;\r\n                -webkit-transform: scale(1);\r\n                transform: scale(1);\r\n                transition: 0.3s;\r\n              }\r\n\r\n              .more {\r\n                opacity: 1;\r\n              }\r\n            }\r\n\r\n            p {\r\n              opacity: 1;\r\n            }\r\n\r\n            .text::after,\r\n            p {\r\n              -webkit-transition-delay: 0.15s;\r\n              transition-delay: 0.15s;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>","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!./creation.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!./creation.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./creation.vue?vue&type=template&id=64572c4c&\"\nimport script from \"./creation.vue?vue&type=script&lang=js&\"\nexport * from \"./creation.vue?vue&type=script&lang=js&\"\nimport style0 from \"./creation.vue?vue&type=style&index=0&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  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./creation.vue?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}