{"version":3,"sources":["webpack:///./src/assets/png/badge/expiration-extension-mb.png","webpack:///./src/assets/png/badge/UKAS.png","webpack:///./src/assets/png/badge/NSC.png","webpack:///./src/assets/png/badge/KAB.png","webpack:///./src/assets/png/badge/BOA.png","webpack:///./src/assets/png/badge/expiration-extension.png","webpack:///./src/assets/png/badge/badge.png","webpack:///./src/assets/png/badge/first-application.png","webpack:///./src/views/ch/5-1-Intro.vue","webpack:///./src/views/ch/5-1-Intro.vue?da77","webpack:///./src/assets/png/badge/IAF.png","webpack:///./src/assets/png/badge/first-application-mb.png","webpack:///./src/assets/png/badge/TAF.png","webpack:///./src/views/ch/5-1-Intro.vue?3656","webpack:///./src/assets/png/badge/CNAS.png"],"names":["module","exports","id","class","_createElementVNode","href","target","_createElementBlock","_hoisted_2","src","require","alt","_hoisted_5","_hoisted_7","activated","$setup","onClick","onKeypress","_hoisted_11","_hoisted_14","_hoisted_16","_hoisted_17","_hoisted_19","_hoisted_21","_hoisted_23","_hoisted_24","name","setup","isMobile","computed","window","innerWidth","activatedProcessId","ref","organizationList","title","imgUrl","__exports__","render"],"mappings":"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","file":"js/chunk-a605d5c4.ec011332.js","sourcesContent":["module.exports = __webpack_public_path__ + \"img/expiration-extension-mb.80607846.png\";","module.exports = __webpack_public_path__ + \"img/UKAS.00fbb429.png\";","module.exports = __webpack_public_path__ + \"img/NSC.cdea138a.png\";","module.exports = __webpack_public_path__ + \"img/KAB.83047d3d.png\";","module.exports = __webpack_public_path__ + \"img/BOA.7f8621a8.png\";","module.exports = __webpack_public_path__ + \"img/expiration-extension.d56a6db0.png\";","module.exports = __webpack_public_path__ + \"img/badge.f38db706.png\";","module.exports = __webpack_public_path__ + \"img/first-application.0c0dc80f.png\";","<template>\n    <div id=\"CycleBadgeIntro\" class=\"w3 w90-mb\">\n        <h1 class=\"h1\">循環產品標章</h1>\n        <section id=\"cycle-badge-intro-meaning\">\n            <img\n                :src=\"require('@/assets/png/badge/badge.png')\"\n                alt=\"循環產品標章\"\n            />\n            <article>\n                <h2 class=\"h2\">標章圖樣與意涵</h2>\n                <p class=\"p1\">\n                    循環產品標章以波浪代表象徵海洋，廢寶特瓶既是廢棄物，亦可回收後再生製成產品。圓弧形波浪將寶特瓶托起形成永續循環，作為海洋廢棄物循環產品標章的意涵。\n                </p>\n            </article>\n        </section>\n        <section id=\"cycle-badge-intro-process\">\n            <h2 class=\"h2\">標章申請流程</h2>\n            <div class=\"button-group\">\n                <button\n                    class=\"small-btn\"\n                    :class=\"{ activated: activatedProcessId === 0 }\"\n                    @click=\"activatedProcessId = 0\"\n                    @keypress.enter=\"activatedProcessId = 0\"\n                >\n                    首次申請\n                </button>\n                <button\n                    class=\"small-btn\"\n                    :class=\"{ activated: activatedProcessId === 1 }\"\n                    @click=\"activatedProcessId = 1\"\n                    @keypress.enter=\"activatedProcessId = 1\"\n                >\n                    期滿展延\n                </button>\n            </div>\n            <figure v-show=\"activatedProcessId === 0\">\n                <img\n                    v-if=\"isMobile\"\n                    :src=\"\n                        require('@/assets/png/badge/first-application-mb.png')\n                    \"\n                    alt=\"首次申請流程圖\"\n                />\n                <img\n                    v-else\n                    :src=\"require('@/assets/png/badge/first-application.png')\"\n                    alt=\"首次申請流程圖\"\n                />\n\n                <figcaption class=\"hide hide-mb\">\n                    1.於申請人之準備期，申請人可向驗證機構申請查證，驗證機構受理後會進行查證，並向申請人出具查證報告。申請人取得查證聲明與報告後，即可開始準備申請標章。\n                    2.申請標章須檢附申請表、查證聲明及報告、標爭標示方式說明，以此三份文件向環保署提出申請後。環保署受理申請後將參考作業要點第4點及第5點進行形式審查，審查期間若有需要會請申請人進行資料補正，詳細內容可參考作業要點第6點，申請通過後將同意申請人使用標章。\n                </figcaption>\n            </figure>\n            <figure v-show=\"activatedProcessId === 1\">\n                <img\n                    v-if=\"isMobile\"\n                    :src=\"\n                        require('@/assets/png/badge/expiration-extension-mb.png')\n                    \"\n                    alt=\"期滿展延流程圖\"\n                />\n                <img\n                    v-else\n                    :src=\"\n                        require('@/assets/png/badge/expiration-extension.png')\n                    \"\n                    alt=\"期滿展延流程圖\"\n                />\n                <figcaption class=\"hide hide-mb\">\n                    1.於期滿展延期間，申請人可向驗證機構申請重新查證，驗證機構受理後會進行查證，並向申請人出具查證報告。申請人取得查證聲明與報告後，即可開始準備申請標章。\n                    2.申請標章須檢附申請表、查證聲明及報告、標爭標示方式說明，以此三份文件向環保署提出申請後。環保署受理申請後將參考作業要點第4點及第5點進行形式審查，審查期間若有需要會請申請人進行資料補正，詳細內容可參考作業要點第6點，申請通過後將同意申請人使用標章。\n                </figcaption>\n            </figure>\n        </section>\n        <section id=\"cycle-badge-intro-organization\">\n            <h2 class=\"h2\">驗證機構</h2>\n            <p class=\"p1\">\n                國內或國際專業且公正客觀之驗證機構，同時符合 ISO 17065 及 ISO\n                17021，足以查驗海洋廢棄物來源、生產等管理機制運作者。\n            </p>\n            <div class=\"organization-group\" id=\"organization-group1\">\n                <h3 class=\"h3\">驗證機構查詢</h3>\n                <ul>\n                    <li>\n                        <img\n                            :src=\"require('@/assets/png/badge/IAF.png')\"\n                            alt=\"IAF LOGO\"\n                        />\n                        <article>\n                            <p class=\"p1 title\">\n                                國際認證論壇 International Accreditation Forum\n                            </p>\n                            <a\n                                href=\"https://iaf.nu/en/accreditation-bodies/\"\n                                target=\"_blank\"\n                                class=\"link\"\n                                ><span>國際認證機構查詢</span></a\n                            >\n                        </article>\n                    </li>\n                    <li>\n                        <img\n                            :src=\"require('@/assets/png/badge/TAF.png')\"\n                            alt=\"TAF LOGO\"\n                        />\n                        <article>\n                            <p class=\"p1 title\">\n                                財團法人全國認證基金會 Taiwan Accreditation\n                                Foundation\n                            </p>\n                            <a\n                                href=\"https://www.taftw.org.tw/directory/scheme/msv/\"\n                                target=\"_blank\"\n                                class=\"link\"\n                                ><span\n                                    >ISO/IEC 17021-1 管理系統驗證機構查詢</span\n                                ></a\n                            >\n                            <br />\n                            <a\n                                href=\"https://www.taftw.org.tw/directory/scheme/pva/\"\n                                target=\"_blank\"\n                                class=\"link\"\n                                ><span>ISO/IEC 17065 產品驗證機構查詢</span></a\n                            >\n                        </article>\n                    </li>\n                </ul>\n            </div>\n            <!-- <div class=\"organization-group\" id=\"organization-group2\">\n                <h3 class=\"h3\">各國驗證機構</h3>\n                <ul>\n                    <li v-for=\"item in organizationList\" :key=\"item.title\">\n                        <div class=\"img-wrap\">\n                            <img\n                                :src=\"item.imgUrl\"\n                                :alt=\"item.title + ' LOGO'\"\n                            />\n                        </div>\n                        <p class=\"p1 title\">{{ item.title }}</p>\n                    </li>\n                </ul>\n            </div> -->\n        </section>\n        <section id=\"cycle-badge-intro-download\">\n            <h2 class=\"h2\">相關檔案下載</h2>\n            <ul class=\"download-group\">\n                <li>\n                    <p class=\"p1 title\">\n                        海洋廢棄物循環產品標章推動作業要點<br />\n                        Operation Directions for Recycled Marine Debris Product\n                        Label\n                    </p>\n                    <a\n                        href=\"../pdf/OperationCh.pdf\"\n                        target=\"_blank\"\n                        class=\"link\"\n                    >\n                        <i class=\"icon-clip\"></i><span>中文版</span>\n                    </a>\n                    <a\n                        href=\"../pdf/OperationEn.pdf\"\n                        target=\"_blank\"\n                        class=\"link\"\n                    >\n                        <i class=\"icon-clip\"></i><span>English Version</span>\n                    </a>\n                </li>\n                <li>\n                    <p class=\"p1 title\">\n                        海洋廢棄物循環產品標章使用規範書（含申請書）<br />\n                        Specifications Governing Use of Recycled Marine Debris\n                        Product Label\n                    </p>\n\n                    <a\n                        href=\"../pdf/SpecificationsCh.pdf\"\n                        target=\"_blank\"\n                        class=\"link\"\n                    >\n                        <i class=\"icon-clip\"></i><span>中文版</span>\n                    </a>\n                    <a\n                        href=\"../pdf/SpecificationsEn.pdf\"\n                        target=\"_blank\"\n                        class=\"link\"\n                    >\n                        <i class=\"icon-clip\"></i><span>English Version</span>\n                    </a>\n                </li>\n            </ul>\n        </section>\n    </div>\n</template>\n<script>\nimport { computed, ref } from 'vue'\nexport default {\n    name: 'CycleBadgeIntro',\n    setup() {\n        const isMobile = computed(() => window.innerWidth < 768)\n        const activatedProcessId = ref(0)\n        const organizationList = [\n            {\n                title: '泰國 NSC',\n                imgUrl: require('@/assets/png/badge/NSC.png'),\n            },\n            {\n                title: '中國 CNAS',\n                imgUrl: require('@/assets/png/badge/CNAS.png'),\n            },\n            {\n                title: '英國 UKAS',\n                imgUrl: require('@/assets/png/badge/UKAS.png'),\n            },\n            {\n                title: '越南 BoA',\n                imgUrl: require('@/assets/png/badge/BOA.png'),\n            },\n            {\n                title: '南韓 KAB',\n                imgUrl: require('@/assets/png/badge/KAB.png'),\n            },\n        ]\n        return { activatedProcessId, organizationList, isMobile }\n    },\n}\n</script>\n<style lang=\"scss\" scoped>\n#CycleBadgeIntro {\n    padding-bottom: 50px;\n}\np.title {\n    margin: 5px 0;\n    text-indent: 0;\n    line-height: 1.2em;\n}\nsection {\n    margin: 50px 0;\n}\n#cycle-badge-intro-meaning {\n    img {\n        display: block;\n        width: 300px;\n    }\n    article {\n        flex: 1;\n    }\n    @media screen and (min-width: 768px) {\n        display: flex;\n    }\n    @media screen and (max-width: 767px) {\n        img {\n            margin: 0 auto 30px;\n        }\n    }\n}\n#cycle-badge-intro-process {\n    button {\n        display: inline-block;\n        margin-top: 0;\n        border: none;\n        border-radius: 5px;\n        background-color: $theme4;\n        opacity: 0.4;\n\n        &.activated {\n            opacity: 1;\n        }\n    }\n    img {\n        display: block;\n        width: 100%;\n    }\n    @media screen and (min-width: 768px) {\n        .button-group {\n            text-align: right;\n        }\n        button {\n            margin-left: 10px;\n        }\n        figure {\n            margin: 20px 0;\n        }\n    }\n    @media screen and (max-width: 767px) {\n        button {\n            margin-right: 10px;\n        }\n        figure {\n            margin: 20px -6%;\n        }\n    }\n}\n#cycle-badge-intro-organization {\n    .organization-group {\n        margin: 30px 0;\n    }\n    #organization-group1 {\n        @media screen and (min-width: 768px) {\n            li {\n                display: flex;\n                align-items: center;\n            }\n            img {\n                width: 150px;\n            }\n            article {\n                flex: 1;\n                margin-left: 30px;\n            }\n        }\n        @media screen and (max-width: 767px) {\n            li {\n                position: relative;\n                margin-bottom: 30px;\n            }\n            img {\n                position: absolute;\n                top: -15px;\n                right: 0;\n                width: 80px;\n            }\n            p {\n                text-align: left;\n                padding-right: 90px;\n            }\n        }\n    }\n    #organization-group2 {\n        ul {\n            display: flex;\n            flex-wrap: wrap;\n        }\n        .title {\n            text-align: center;\n        }\n        .img-wrap {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        @media screen and (min-width: 768px) {\n            li {\n                width: 150px;\n            }\n            .img-wrap {\n                height: 105px;\n            }\n            img {\n                max-width: 100px;\n                max-height: 100px;\n            }\n        }\n        @media screen and (max-width: 767px) {\n            li {\n                width: 100px;\n            }\n            .img-wrap {\n                height: 70px;\n            }\n            img {\n                max-width: 60px;\n                max-height: 60px;\n            }\n        }\n    }\n}\n#cycle-badge-intro-download {\n    .download-group {\n        li {\n            position: relative;\n            padding-left: 1.2em;\n            margin-bottom: 30px;\n            &:before {\n                content: '・';\n                position: absolute;\n                left: 0;\n                top: 0;\n                line-height: 1.2em;\n            }\n        }\n    }\n    @media screen and (max-width: 767px) {\n        p {\n            text-align: left;\n            padding-right: 10px;\n        }\n    }\n}\n</style>\n","import { render } from \"./5-1-Intro.vue?vue&type=template&id=1b9d731a&scoped=true\"\nimport script from \"./5-1-Intro.vue?vue&type=script&lang=js\"\nexport * from \"./5-1-Intro.vue?vue&type=script&lang=js\"\n\nimport \"./5-1-Intro.vue?vue&type=style&index=0&id=1b9d731a&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-1b9d731a\"]])\n\nexport default __exports__","module.exports = __webpack_public_path__ + \"img/IAF.e6566fed.png\";","module.exports = __webpack_public_path__ + \"img/first-application-mb.cfaea511.png\";","module.exports = __webpack_public_path__ + \"img/TAF.a330b253.png\";","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-1-Intro.vue?vue&type=style&index=0&id=1b9d731a&lang=scss&scoped=true\"","module.exports = __webpack_public_path__ + \"img/CNAS.259aa5af.png\";"],"sourceRoot":""}