{"version":3,"sources":["webpack:///./src/views/product.vue","webpack:///src/views/product.vue","webpack:///./src/views/product.vue?b707","webpack:///./src/views/product.vue?da71","webpack:///./src/views/product.vue?7afb"],"names":["render","_vm","this","_c","_self","staticClass","_v","_l","list","item","index","key","class","active","opt","on","$event","$router","push","path","query","_s","name","directives","rawName","value","$route","expression","productList","style","marginRight","id","attrs","image","staticRenderFns","data","watch","handler","e","deep","getData","getclasse","created","methods","classe","then","r","idx","forEach","val","limit","page","where","classe_id","component"],"mappings":"uIAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,WAAW,CAACF,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,IAAI,CAACE,YAAY,SAAS,CAACJ,EAAIK,GAAG,UAAUH,EAAG,IAAI,CAACE,YAAY,aAAa,CAACJ,EAAIK,GAAG,oBAAoBH,EAAG,MAAM,CAACE,YAAY,YAAYJ,EAAIM,GAAIN,EAAIO,MAAM,SAASC,EAAKC,GAAO,OAAOP,EAAG,MAAM,CAACQ,IAAID,EAAML,YAAY,MAAMO,MAAM,CAAEC,OAAQZ,EAAIa,KAAOJ,GAAQK,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOf,EAAIgB,QAAQC,KAAK,CAAEC,KAAM,WAAYC,MAAO,CAAEV,MAAOA,QAAc,CAACT,EAAIK,GAAG,IAAIL,EAAIoB,GAAGZ,EAAKa,MAAM,UAAS,KAAKnB,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,MAAM,CAACoB,WAAW,CAAC,CAACD,KAAK,OAAOE,QAAQ,SAASC,MAA0B,YAAnBxB,EAAIyB,OAAOP,KAAoBQ,WAAW,+BAA+B,CAACxB,EAAG,IAAI,CAACE,YAAY,SAAS,CAACJ,EAAIK,GAAGL,EAAIoB,GAAGpB,EAAIO,KAAKP,EAAIa,KAAKQ,SAASnB,EAAG,MAAM,CAACE,YAAY,SAASJ,EAAIM,GAAIN,EAAI2B,aAAa,SAASnB,EAAKC,GAAO,OAAOP,EAAG,MAAM,CAACQ,IAAID,EAAML,YAAY,WAAWwB,MAAO,CAAEC,aAAcpB,EAAQ,GAAK,GAAK,EAAI,IAAM,QAAUK,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOf,EAAIgB,QAAQC,KAAK,CAAEC,KAAM,kBAAmBC,MAAO,CAAEW,GAAItB,EAAKsB,SAAW,CAAC5B,EAAG,MAAM,CAACE,YAAY,OAAO,CAACF,EAAG,MAAM,CAAC6B,MAAM,CAAC,IAAMvB,EAAKwB,MAAM,IAAM,GAAG,OAAS,QAAQ9B,EAAG,MAAM,CAACE,YAAY,UAAU,CAACJ,EAAIK,GAAGL,EAAIoB,GAAGZ,EAAKa,cAAa,KAAKnB,EAAG,gBAAgB,MAEhuC+B,EAAkB,G,kCC4CP,GACfC,OACA,OACArB,IAAA,EACAN,KAAA,GACAoB,YAAA,KAGAQ,MAAA,CACA,sBACAC,QAAAC,GACA,iBAAAZ,OAAAP,OACA,KAAAL,IAAAwB,IAGAC,MAAA,GAEAzB,MACA,KAAA0B,WAEA,mBACAH,QAAAC,GACA,KAAAG,aAEAF,MAAA,GAEA,oBACAF,QAAAC,GACA,KAAAE,WAEAD,MAAA,IAGAG,UACA,KAAAD,aAEAE,QAAA,CACAF,YACAG,iBAAAC,KAAAC,IACA,KAAAtC,KAAAsC,EAAAX,UACA,IAAAJ,EAAA,KAAAL,OAAAN,MAAA2B,KAAA,KAAArB,OAAAN,MAAAW,GACAA,GACAe,EAAAX,UAAAa,QAAA,CAAAC,EAAAvC,KACAuC,EAAAlB,QACA,KAAAjB,IAAAJ,KAIA,KAAA8B,aAGAA,UACAZ,eAAA,CACAsB,MAAA,KACAC,KAAA,EACAC,MAAA,CACAC,UAAA,KAAA7C,KAAA,KAAAM,KAAAiB,MAEAc,KAAAC,IACA,KAAAlB,YAAAkB,EAAAX,eCzGgV,I,wBCQ5UmB,EAAY,eACd,EACAtD,EACAkC,GACA,EACA,KACA,WACA,MAIa,aAAAoB,E,oECnBf","file":"assets/js/chunk-429560bc.021e07e0.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"product\"},[_c('div',{staticClass:\"head\"},[_c('p',{staticClass:\"title\"},[_vm._v(\"产品中心\")]),_c('p',{staticClass:\"sub-title\"},[_vm._v(\"PRODUCT CENTER\")]),_c('div',{staticClass:\"children\"},_vm._l((_vm.list),function(item,index){return _c('div',{key:index,staticClass:\"one\",class:{ active: _vm.opt == index },on:{\"click\":function($event){return _vm.$router.push({ path: '/product', query: { index: index } })}}},[_vm._v(\" \"+_vm._s(item.name)+\" \")])}),0)]),_c('div',{staticClass:\"wrap\"},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.$route.path == '/product'),expression:\"$route.path == '/product'\"}]},[_c('p',{staticClass:\"title\"},[_vm._v(_vm._s(_vm.list[_vm.opt].name))]),_c('div',{staticClass:\"inner\"},_vm._l((_vm.productList),function(item,index){return _c('div',{key:index,staticClass:\"products\",style:({ marginRight: (index + 1) % 3 == 0 ? '0' : '20px' }),on:{\"click\":function($event){return _vm.$router.push({ path: '/product/detail', query: { id: item.id } })}}},[_c('div',{staticClass:\"top\"},[_c('img',{attrs:{\"src\":item.image,\"alt\":\"\",\"srcset\":\"\"}})]),_c('div',{staticClass:\"bottom\"},[_vm._v(_vm._s(item.name))])])}),0)]),_c('router-view')],1)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"product\">\r\n    <div class=\"head\">\r\n      <p class=\"title\">产品中心</p>\r\n      <p class=\"sub-title\">PRODUCT CENTER</p>\r\n      <div class=\"children\">\r\n        <div\r\n          class=\"one\"\r\n          :class=\"{ active: opt == index }\"\r\n          @click=\"$router.push({ path: '/product', query: { index: index } })\"\r\n          v-for=\"(item, index) in list\"\r\n          :key=\"index\"\r\n        >\r\n          {{ item.name }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"wrap\">\r\n      <div v-show=\"$route.path == '/product'\">\r\n        <p class=\"title\">{{ list[opt].name }}</p>\r\n        <!-- <p class=\"sub-title\">{{list[opt].ex_title}}</p> -->\r\n        <div class=\"inner\">\r\n          <div\r\n            class=\"products\"\r\n            v-for=\"(item, index) in productList\"\r\n            :key=\"index\"\r\n            :style=\"{ marginRight: (index + 1) % 3 == 0 ? '0' : '20px' }\"\r\n            @click=\"\r\n              $router.push({ path: '/product/detail', query: { id: item.id } })\r\n            \"\r\n          >\r\n            <div class=\"top\">\r\n              <img :src=\"item.image\" alt srcset />\r\n            </div>\r\n            <div class=\"bottom\">{{ item.name }}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <router-view></router-view>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { classe, productList } from '../assets/js/api'\r\nexport default {\r\n  data() {\r\n    return {\r\n      opt: 0,\r\n      list: [],\r\n      productList: [],\r\n    }\r\n  },\r\n  watch: {\r\n    '$route.query.index': {\r\n      handler(e) {\r\n        if (this.$route.path == '/product') {\r\n          this.opt = e\r\n        }\r\n      },\r\n      deep: true,\r\n    },\r\n    opt() {\r\n      this.getData()\r\n    },\r\n    '$route.query.id': {\r\n      handler(e) {\r\n        this.getclasse()\r\n      },\r\n      deep: true,\r\n    },\r\n    '$route.query.idx': {\r\n      handler(e) {\r\n        this.getData()\r\n      },\r\n      deep: true,\r\n    },\r\n  },\r\n  created() {\r\n    this.getclasse()\r\n  },\r\n  methods: {\r\n    getclasse() {\r\n      classe().then((r) => {\r\n        this.list = r.data.data\r\n        let id = this.$route.query.idx || this.$route.query.id\r\n        if (id) {\r\n          r.data.data.forEach((val, index) => {\r\n            if (val.id == id) {\r\n              this.opt = index\r\n            }\r\n          })\r\n        }\r\n        this.getData()\r\n      })\r\n    },\r\n    getData() {\r\n      productList({\r\n        limit: 9999,\r\n        page: 1,\r\n        where: {\r\n          classe_id: this.list[this.opt].id,\r\n        },\r\n      }).then((r) => {\r\n        this.productList = r.data.data\r\n      })\r\n    },\r\n  },\r\n}\r\n</script>\r\n\r\n<style lang=\"less\" scoped>\r\n.head {\r\n  width: 100%;\r\n  height: 580px;\r\n  position: relative;\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  background-image: url('../assets/img/product_banner.png');\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-direction: column;\r\n\r\n  .title {\r\n    font-size: 42px;\r\n    font-family: FZCuHeiSongS-B-GB;\r\n    font-weight: 500;\r\n    color: rgba(255, 255, 255, 1);\r\n  }\r\n\r\n  .sub-title {\r\n    font-size: 30px;\r\n    font-family: Source Han Sans CN;\r\n    font-weight: 500;\r\n    color: rgba(255, 255, 255, 1);\r\n  }\r\n\r\n  .children {\r\n    position: absolute;\r\n    bottom: 0;\r\n    display: flex;\r\n    justify-content: center;\r\n    width: 100%;\r\n\r\n    & > div {\r\n      width: 200px;\r\n      height: 60px;\r\n      line-height: 60px;\r\n      text-align: center;\r\n      font-size: 16px;\r\n      font-family: Microsoft YaHei;\r\n      font-weight: 400;\r\n      color: rgba(255, 255, 255, 0.78);\r\n      border-top: 1px solid rgba(255, 255, 255, 0.5);\r\n      margin-right: 10px;\r\n      cursor: pointer;\r\n      text-decoration: none;\r\n    }\r\n\r\n    & > div.active {\r\n      background: #126fcc;\r\n      border: none;\r\n    }\r\n  }\r\n}\r\n\r\n.wrap {\r\n  padding: 90px 0;\r\n  background-color: #f3f2f2;\r\n\r\n  .title {\r\n    font-size: 18px;\r\n    font-family: Microsoft YaHei;\r\n    font-weight: bold;\r\n    color: rgba(0, 0, 0, 1);\r\n    text-align: center;\r\n  }\r\n\r\n  .sub-title {\r\n    font-size: 18px;\r\n    font-family: Microsoft YaHei;\r\n    font-weight: 400;\r\n    color: rgba(204, 204, 204, 1);\r\n    text-align: center;\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .inner {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    width: 1200px;\r\n    margin: 0 auto;\r\n\r\n    .products {\r\n      width: 386px;\r\n      height: 290px;\r\n      margin-bottom: 20px;\r\n      cursor: pointer;\r\n      transition: all 0.15s linear;\r\n\r\n      .top {\r\n        width: 100%;\r\n        height: 240px;\r\n        border: 1px solid rgba(242, 242, 242, 1);\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n\r\n        img {\r\n          width: 221px;\r\n          height: 172px;\r\n          object-fit: cover;\r\n          transition: all 0.3s linear;\r\n        }\r\n      }\r\n\r\n      .bottom {\r\n        transition: all 0.3s linear;\r\n        width: 100%;\r\n        height: 50px;\r\n        text-align: center;\r\n        background: rgba(233, 233, 234, 1);\r\n        line-height: 50px;\r\n        font-size: 18px;\r\n        font-family: Microsoft YaHei;\r\n        font-weight: 400;\r\n        color: rgba(0, 0, 0, 1);\r\n      }\r\n    }\r\n\r\n    .products:hover {\r\n      background: #e7e6eb;\r\n\r\n      .top {\r\n        img {\r\n          transform: scale(1.2) translateY(-50px);\r\n        }\r\n      }\r\n\r\n      .bottom {\r\n        background: #0e6cb6;\r\n        color: #ffffff;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./product.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!./product.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./product.vue?vue&type=template&id=2dee4faa&scoped=true\"\nimport script from \"./product.vue?vue&type=script&lang=js\"\nexport * from \"./product.vue?vue&type=script&lang=js\"\nimport style0 from \"./product.vue?vue&type=style&index=0&id=2dee4faa&prod&lang=less&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  \"2dee4faa\",\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/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./product.vue?vue&type=style&index=0&id=2dee4faa&prod&lang=less&scoped=true\""],"sourceRoot":""}