{"version":3,"sources":["webpack:///./src/pages/CustomerCase/index.vue","webpack:///./src/pages/CustomerCase/index.vue?4a10","webpack:///./src/pages/CustomerCase/index.vue?a0b8"],"names":["store","useStore","router","useRouter","handleWindowResizeWithDebounce","windowSize","useWindowResize","customerCaseList","ref","gridOptions","columns","rowGap","columnGap","currentLang","computed","getters","currentLanguage","getCustomerCase","_customerCaseList$val","value","map","item","image","async","res","axios","get","catch","err","Error","message","console","log","data","handleToDetails","id","push","path","watchEffect","n","onMounted","window","addEventListener","__exports__"],"mappings":"ygBAYA,MAAMA,EAAQC,iBACRC,EAASC,kBAET,+BAAEC,EAA8B,WAAEC,GAAeC,iBAEjDC,EAAmBC,iBAAI,IACvBC,EAAcD,iBAAI,CACvBE,QAAS,EACTC,OAAQ,GACRC,UAAW,KAGNC,EAAcC,sBAAS,IAAMd,EAAMe,QAAQC,iBAI3CC,GAFYH,sBAAS,SAAAI,EAAA,OAA4B,QAA5BA,EAAMX,EAAiBY,aAAK,IAAAD,OAAA,EAAtBA,EAAwBE,IAAIC,GAAY,OAAJA,QAAI,IAAJA,OAAI,EAAJA,EAAMC,SAEnDC,UACvB,MAAMC,QAAYC,IAAMC,IAAI,oBAC1BC,MAAMC,IACN,MAAM,IAAIC,MAAMD,EAAIE,WAEtBC,QAAQC,IAAI,oBAAkBR,GAC9BjB,EAAiBY,MAAQK,EAAIS,OAIxBC,EAAmBC,IACxBjC,EAAOkC,KAAK,CACXC,KAAO,kBAAiBF,K,OAK1BG,yBAAY,KACX,MAAMC,EAAIlC,EAAWc,MACjBoB,GAAK,KACR9B,EAAYU,MAAMT,QAAU,EAC5BD,EAAYU,MAAMP,UAAY,GAC9BH,EAAYU,MAAMR,OAAS,IACjB4B,GAAK,MACf9B,EAAYU,MAAMT,QAAU,EAC5BD,EAAYU,MAAMP,UAAY,GAC9BH,EAAYU,MAAMR,OAAS,KAE3BF,EAAYU,MAAMT,QAAU,EAC5BD,EAAYU,MAAMP,UAAY,GAC9BH,EAAYU,MAAMR,OAAS,MAI7B6B,uBAAU,KACTC,OAAOC,iBAAiB,SAAUtC,GAClCa,M,gsDC1DD,MAAM0B,EAA2B,IAAgB,EAAQ,CAAC,CAAC,YAAY,qBAExD,gB,yDCRf","file":"static/js/chunk-74b70b56.b76d9da1.js","sourcesContent":["<script setup>\nimport { ref, computed, watchEffect, onMounted } from \"vue\";\nimport PageHead from \"@/components/PageHead/PageHead.vue\";\nimport Width from \"@/pages/Index/Width.vue\";\nimport ListBlock from \"@/components/ListBlock/ListBlock.vue\";\nimport {extractText, useWindowResize} from \"@/utils\";\nimport axios from \"axios\";\nimport SvgIcon from \"@/components/SvgIcon/SvgIcon.vue\";\nimport {useStore} from \"vuex\";\nimport {useRouter} from \"vue-router\";\nimport {pageBg} from \"@/constant\";\n\nconst store = useStore()\nconst router = useRouter()\n\nconst { handleWindowResizeWithDebounce, windowSize } = useWindowResize()\n\nconst customerCaseList = ref([])\nconst gridOptions = ref({\n\tcolumns: 3,\n\trowGap: 30,\n\tcolumnGap: 30\n})\n\nconst currentLang = computed(() => store.getters.currentLanguage)\n\nconst imageList = computed(() => customerCaseList.value?.map(item => item?.image))\n\nconst getCustomerCase = async () => {\n\tconst res = await axios.get('api/api/strength')\n\t\t.catch(err => {\n\t\t\tthrow new Error(err.message)\n\t\t})\n\tconsole.log('res --------->', res)\n\tcustomerCaseList.value = res.data\n}\n\n\nconst handleToDetails = (id) => {\n\trouter.push({\n\t\tpath: `/customer-case/${id}`\n\t})\n}\n\n\nwatchEffect(() => {\n\tconst n = windowSize.value\n\tif (n <= 535) {\n\t\tgridOptions.value.columns = 1\n\t\tgridOptions.value.columnGap = 20\n\t\tgridOptions.value.rowGap = 20\n\t} else if (n <= 1024) {\n\t\tgridOptions.value.columns = 2\n\t\tgridOptions.value.columnGap = 20\n\t\tgridOptions.value.rowGap = 20\n\t} else {\n\t\tgridOptions.value.columns = 3\n\t\tgridOptions.value.columnGap = 30\n\t\tgridOptions.value.rowGap = 30\n\t}\n})\n\nonMounted(() => {\n\twindow.addEventListener('resize', handleWindowResizeWithDebounce)\n\tgetCustomerCase()\n})\n</script>\n\n<template>\n\t<div class=\"customer-case\">\n\t\t<PageHead\n\t\t\t:bg-image=\"pageBg.customerCase\"\n\t\t\t:title=\"$t('header.CustomerCase')\"\n\t\t/>\n\t\t\n\t\t<Width>\n\t\t\t<div class=\"customer-case__content\">\n\t\t\t\t<ListBlock\n\t\t\t\t\t:columns=\"gridOptions.columns\"\n\t\t\t\t\t:column-gap=\"gridOptions.columnGap\"\n\t\t\t\t\t:row-gap=\"gridOptions.rowGap\"\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"customer-case__content__list\"\n\t\t\t\t\t\tv-for=\"(item, index) in customerCaseList\"\n\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t@click=\"handleToDetails(item.id)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"cover\">\n\t\t\t\t\t\t\t<el-image\n\t\t\t\t\t\t\t\t:src=\"item.image\"\n\t\t\t\t\t\t\t\t:initial-index=\"index\"\n\t\t\t\t\t\t\t\tstyle=\"width: 100%; height: 100%;\"\n\t\t\t\t\t\t\t\tfit=\"cover\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div class=\"mask\">\n<!--\t\t\t\t\t\t\t\t<SvgIcon name=\"logo\" class-name=\"mask__icon\" />-->\n\t\t\t\t\t\t\t\t<img :src=\"item?.left_top_image\" class=\"mask__icon\" style=\"object-fit: contain;\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"info\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"info__title line-clamp-1\"\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{{ item?.[`title_${currentLang}`] ?? item?.title_cn }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div class=\"info__desc line-clamp-3\">\n\t\t\t\t\t\t\t\t{{ extractText(item?.[`content_${currentLang}`] ?? item?.content_cn) }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t</div>\n\t\t\t\t</ListBlock>\n\t\t\t</div>\n\t\t</Width>\n\t</div>\n</template>\n\n<style scoped lang=\"less\">\n.customer-case {\n\tbackground-color: #F5F5F5;\n\t&__content {\n\t\tpadding: 72px 0;\n\t\t\n\t\t&__list {\n\t\t\tborder-radius: 16px;\n\t\t\toverflow: hidden;\n\t\t\tbackground-color: #fff;\n\t\t\t\n\t\t\t.cover {\n\t\t\t\tbackground-color: #fff;\n\t\t\t\theight: 285px;\n\t\t\t\tposition: relative;\n\t\t\t\t\n\t\t\t\t.mask {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tpadding: 20px 30px;\n\t\t\t\t\tbackground: linear-gradient(280deg, rgba(209, 23, 14, 0.8) 3%, rgba(244, 103, 96, 0.8) 100%);\n\t\t\t\t\tbackdrop-filter: blur(10px);\n\t\t\t\t\t\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\theight: 30px;\n\t\t\t\t\t\twidth: 93px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t\n\t\t\t.info {\n\t\t\t\tpadding: 30px;\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tcolor: #303133;\n\t\t\t\t\n\t\t\t\t&__title {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tfont-size: 24px;\n\t\t\t\t\tfont-weight: bold;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t&__desc {\n\t\t\t\t\tmargin-top: 20px;\n\t\t\t\t\tfont-size: 18px;\n\t\t\t\t\tline-height: 30px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t\n}\n\n@media only screen and (max-width: 1024px) {\n\t.customer-case {\n\t\t&__content {\n\t\t\tpadding: 30px 0;\n\t\t\t\n\t\t\t&__list {\n\t\t\t\tborder-radius: 8px;\n\t\t\t}\n\t\t}\n\t\t\n\t}\n}\n\n@media only screen and (max-width: 768px) {\n\t.customer-case {\n\t\t\n\t\t&__content {\n\t\t\t\n\t\t\t&__list {\n\t\t\t\tborder-radius: 8px;\n\t\t\t\t.cover {\n\t\t\t\t\theight: 210px;\n\t\t\t\t\t.mask {\n\t\t\t\t\t\tpadding: 16px 20px;\n\t\t\t\t\t\t\n\t\t\t\t\t\t&__icon {\n\t\t\t\t\t\t\theight: 30px;\n\t\t\t\t\t\t\twidth: 93px;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t.info {\n\t\t\t\t\tpadding: 20px;\n\t\t\t\t\t\n\t\t\t\t\t&__title {\n\t\t\t\t\t\tfont-size: 18px;\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t&__desc {\n\t\t\t\t\t\tmargin-top: 8px;\n\t\t\t\t\t\tfont-size: 16px;\n\t\t\t\t\t\tline-height: 24px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t\n\t\t}\n\t}\n}\n</style>","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./index.vue?vue&type=style&index=0&id=1169a95a&scoped=true&lang=less\"\n\nimport exportComponent from \"/var/www/tz-official-website/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-1169a95a\"]])\n\nexport default __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-v16/dist/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/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./index.vue?vue&type=style&index=0&id=1169a95a&scoped=true&lang=less\""],"sourceRoot":""}