{"version":3,"sources":["webpack:///./src/views/ch/5-3-2-Detail.vue?c875","webpack:///./src/views/ch/5-3-2-Detail.vue","webpack:///./src/views/ch/5-3-2-Detail.vue?9b4e"],"names":["id","class","_createElementVNode","_createElementBlock","_hoisted_5","_toDisplayString","$setup","company","name","src","logoUrl","alt","_Fragment","_renderList","cases","obj","_hoisted_8","products","product","index","key","imgUrl","_hoisted_11","_hoisted_14","wasteProportion","story","_hoisted_17","paragraph","articles","article","title","content","_hoisted_24","introduction","split","_hoisted_26","companyId","params","onKeypress","onClick","tabindex","role","setup","router","useRouter","route","useRoute","ref","badgeCaseData","getBadgeCaseCompanies","item","changeCompany","push","initItem","getItem","value","find","onBeforeRouteUpdate","to","from","next","window","scroll","top","left","__exports__","render"],"mappings":"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","file":"js/chunk-3497da34.1b1c29b7.js","sourcesContent":["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/cli-service/node_modules/vue-loader-v16/dist/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/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--1-1!./5-3-2-Detail.vue?vue&type=style&index=0&id=4193d834&lang=scss&scoped=true\"","<template>\n    <div id=\"CycleBadgeCaseDetail\" class=\"w3 w90-mb\">\n        <section id=\"cycle-badge-case-detail-title\">\n            <h1 class=\"h1\">\n                海洋廢棄物循環產品標章產品案例<br />\n                {{ item.company.name }}\n            </h1>\n            <img :src=\"item.company.logoUrl\" :alt=\"item.company.name + ' Logo'\" />\n        </section>\n        <template v-for=\"obj in item.cases\">\n            <section id=\"cycle-badge-case-detail-product\">\n                <h2 class=\"h2\">獲頒海洋廢棄物循環產品標章之產品</h2>\n                <ul>\n                    <li v-for=\"(product, index) in obj.products\" :key=\"item.company.name + '-product-' + index\">\n                        <img :src=\"product.imgUrl\" :alt=\"product.name + ' image'\" />\n                        <div class=\"list-item\">\n                            <h4 class=\"head\">產品名稱</h4>\n                            <h5 class=\"body\">{{ product.name }}</h5>\n                        </div>\n                        <div class=\"list-item\">\n                            <h4 class=\"head\">海廢重量比例</h4>\n                            <h5 class=\"body\">{{ product.wasteProportion }}%</h5>\n                        </div>\n                    </li>\n                </ul>\n            </section>\n            <section v-if=\"obj.story\" id=\"cycle-badge-case-detail-story\">\n                <h2 class=\"h2\">循環產品故事</h2>\n                <ul>\n                    <li v-for=\"(paragraph, index) in obj.story\" :key=\"item.company.name + '-story-paragraph-' + index\">\n                        <main class=\"articles\">\n                            <article v-for=\"article in paragraph.articles\" :key=\"article.title\">\n                                <h3 class=\"h3\">{{ article.title }}</h3>\n                                <p class=\"p1\">{{ article.content }}</p>\n                            </article>\n                        </main>\n                        <aside class=\"image\">\n                            <img :src=\"paragraph.imgUrl\" alt=\"story image\" />\n                        </aside>\n                    </li>\n                </ul>\n            </section>\n        </template>\n        <section id=\"cycle-badge-case-detail-article\">\n            <h2 class=\"h2\">公司介紹</h2>\n            <article>\n                <p class=\"p1\" v-for=\"(article, index) in item.company.introduction.split('\\n')\" :key=\"item.company.name + '-article-' + index\">\n                    {{ article }}\n                </p>\n            </article>\n        </section>\n        <section id=\"cycle-badge-case-detail-others\">\n            <h2 class=\"h2\">所有循環產品案例</h2>\n            <ul>\n                <li\n                    v-for=\"(company, index) in badgeCaseData\"\n                    :key=\"'cycle-badge-company-' + index\"\n                    :class=\"{\n                        active: company.company.companyId == route.params.companyId,\n                    }\"\n                    @keypress.enter=\"changeCompany(company.company.companyId)\"\n                    @click=\"changeCompany(company.company.companyId)\"\n                    tabindex=\"0\"\n                    role=\"button\"\n                >\n                    <img :src=\"company.company.logoUrl\" :alt=\"company.company.name + 'Logo'\" />\n                </li>\n            </ul>\n        </section>\n    </div>\n</template>\n<script>\nimport { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'\nimport getBadgeCaseCompanies from '@/data/getBadgeCaseCompanies'\nimport { ref } from 'vue-demi'\nexport default {\n    name: 'CycleBadgeCaseDetail',\n    setup() {\n        const router = useRouter()\n        const route = useRoute()\n        const companyId = ref(route.params.companyId)\n        const { badgeCaseData } = getBadgeCaseCompanies()\n        let item = ref({})\n\n        function changeCompany(index) {\n            router.push({\n                name: 'CycleBadgeCaseDetail',\n                params: {\n                    companyId: index,\n                },\n            })\n        }\n\n        function initItem() {\n            function getItem(item) {\n                return item.company.companyId == companyId.value\n            }\n            item.value = badgeCaseData.find(getItem)\n        }\n\n        initItem()\n        onBeforeRouteUpdate((to, from, next) => {\n            companyId.value = to.params.companyId\n            initItem()\n            window.scroll({\n                top: 0,\n                left: 0,\n            })\n            next()\n        })\n        return { badgeCaseData, item, changeCompany, route }\n    },\n}\n</script>\n<style lang=\"scss\" scoped>\nsection {\n    margin-bottom: 60px;\n    &:first-child {\n        margin-bottom: 0;\n    }\n}\n#cycle-badge-case-detail-title {\n    img {\n        max-width: 300px;\n        max-height: 150px;\n    }\n    @media screen and (min-width: 768px) {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        img {\n            margin-top: 50px;\n        }\n    }\n    @media screen and (max-width: 767px) {\n        img {\n            display: block;\n            margin: 0 auto 50px;\n        }\n    }\n}\n\n#cycle-badge-case-detail-product {\n    h2 {\n        margin-bottom: 0.5em;\n    }\n    li {\n        box-shadow: $shadow1;\n        padding-bottom: 10px;\n    }\n    img {\n        width: 100%;\n        height: 180px;\n        object-fit: contain;\n        background-color: $grayF;\n    }\n    .list-item {\n        margin: 10px;\n    }\n    @media screen and (min-width: 768px) {\n        ul {\n            display: grid;\n            grid-template: auto / repeat(4, 1fr);\n            grid-gap: 20px;\n        }\n    }\n    @media screen and (max-width: 767px) {\n        ul {\n            display: grid;\n            grid-template: auto / repeat(2, 1fr);\n            grid-gap: 15px;\n        }\n    }\n}\n#cycle-badge-case-detail-story {\n    li {\n        @media screen and (min-width: 1080px) {\n            display: flex;\n            align-items: center;\n            gap: 40px;\n            main {\n                flex: 1;\n            }\n            aside {\n                flex: 0 0 300px;\n            }\n        }\n        @media screen and (max-width: 1079px) {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            main {\n                width: 100%;\n            }\n        }\n        p {\n            margin-bottom: 2em;\n        }\n        img {\n            width: 300px;\n            margin-bottom: 40px;\n        }\n    }\n}\n#cycle-badge-case-detail-others {\n    ul {\n        display: flex;\n        flex-wrap: wrap;\n        margin: 20px 0 50px;\n    }\n    li {\n        margin: 5px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        border-radius: 50%;\n        box-shadow: $shadow1;\n        cursor: pointer;\n\n        &.active {\n            border: 3px solid $theme3;\n            cursor: default;\n        }\n    }\n    img {\n        max-width: 80%;\n        max-height: 80%;\n    }\n    @media screen and (min-width: 768px) {\n        li {\n            width: 130px;\n            height: 130px;\n        }\n    }\n    @media screen and (max-width: 767px) {\n        li {\n            width: 100px;\n            height: 100px;\n        }\n    }\n}\n</style>\n","import { render } from \"./5-3-2-Detail.vue?vue&type=template&id=4193d834&scoped=true\"\nimport script from \"./5-3-2-Detail.vue?vue&type=script&lang=js\"\nexport * from \"./5-3-2-Detail.vue?vue&type=script&lang=js\"\n\nimport \"./5-3-2-Detail.vue?vue&type=style&index=0&id=4193d834&lang=scss&scoped=true\"\n\nimport exportComponent from \"/Users/pj/Desktop/C.Project/Octave_project/marine-debris-2022/frontend/node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-4193d834\"]])\n\nexport default __exports__"],"sourceRoot":""}