{"version":3,"sources":["webpack:///./src/assets/png/badge/en-first-application.png","webpack:///./src/assets/png/badge/UKAS.png","webpack:///./src/assets/png/badge/en-expiration-extension-mb.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/badge.png","webpack:///./src/assets/png/badge/en-first-application-mb.png","webpack:///./src/assets/png/badge/IAF.png","webpack:///./src/views/en/5-1-EnIntro.vue","webpack:///./src/views/en/5-1-EnIntro.vue?9512","webpack:///./src/assets/png/badge/TAF.png","webpack:///./src/views/en/5-1-EnIntro.vue?39da","webpack:///./src/assets/png/badge/CNAS.png","webpack:///./src/assets/png/badge/en-expiration-extension.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-05e9f565.1dd4fb67.js","sourcesContent":["module.exports = __webpack_public_path__ + \"img/en-first-application.af957d1e.png\";","module.exports = __webpack_public_path__ + \"img/UKAS.00fbb429.png\";","module.exports = __webpack_public_path__ + \"img/en-expiration-extension-mb.3b0bdf1e.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/badge.f38db706.png\";","module.exports = __webpack_public_path__ + \"img/en-first-application-mb.397e60eb.png\";","module.exports = __webpack_public_path__ + \"img/IAF.e6566fed.png\";","<template>\n    <div id=\"EnCycleBadgeIntro\" class=\"w3 w90-mb\">\n        <h1 class=\"h1\">Recycled marine debris product label</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\">Symbolism of the label</h2>\n                <p class=\"p1\">\n                    Recycled marine debris product label<br />\n                    The waves symbolize the ocean<br />\n                    Waste plastic bottles can be a waste or be recycled and\n                    reused into a product<br />\n                    The arc waves lift the plastic bottle to form an\n                    environmentally sustainable cycle\n                </p>\n            </article>\n        </section>\n        <section id=\"cycle-badge-intro-process\">\n            <h2 class=\"h2\">Application flowchart</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                    Application\n                </button>\n                <button\n                    class=\"small-btn\"\n                    :class=\"{ activated: activatedProcessId === 1 }\"\n                    @click=\"activatedProcessId = 1\"\n                    @keypress.enter=\"activatedProcessId = 1\"\n                >\n                    Extension upon expiration\n                </button>\n            </div>\n            <figure v-show=\"activatedProcessId === 0\">\n                <img\n                    v-if=\"isMobile\"\n                    :src=\"\n                        require('@/assets/png/badge/en-first-application-mb.png')\n                    \"\n                    alt=\"首次申請流程圖\"\n                />\n                <img\n                    v-else\n                    :src=\"\n                        require('@/assets/png/badge/en-first-application.png')\n                    \"\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/en-expiration-extension-mb.png')\n                    \"\n                    alt=\"期滿展延流程圖\"\n                />\n                <img\n                    v-else\n                    :src=\"\n                        require('@/assets/png/badge/en-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\">Certification Institute</h2>\n            <p class=\"p1\">\n                A domestic or foreign professional, just and objective\n                certification institute. The institute shall conform to both\n                ISO17065 and ISO17021; and be capable of verifying the\n                operations of the management mechanism, including the source and\n                production of marine debris.\n            </p>\n            <div class=\"organization-group\" id=\"organization-group1\">\n                <h3 class=\"h3\">Certification Institute Search</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 (IAF)\n                            </p>\n                            <a\n                                href=\"https://iaf.nu/en/accreditation-bodies/\"\n                                target=\"_blank\"\n                                class=\"link\"\n                                ><span\n                                    >International Accreditation Forum\n                                    (IAF)</span\n                                ></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 Foundation (TAF)\n                            </p>\n                            <a\n                                href=\"https://www.taftw.org.tw/directory/scheme/msv/\"\n                                target=\"_blank\"\n                                class=\"link\"\n                                ><span>ISO/IEC 17021-1</span></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\">Download the files</h2>\n            <ul class=\"download-group\">\n                <li>\n                    <p class=\"p1 title\">\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>Chinese Version</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                        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>Chinese Version</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: 'EnCycleBadgeIntro',\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    p {\n        text-indent: 0;\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-bottom: 10px;\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-EnIntro.vue?vue&type=template&id=3b020114&scoped=true\"\nimport script from \"./5-1-EnIntro.vue?vue&type=script&lang=js\"\nexport * from \"./5-1-EnIntro.vue?vue&type=script&lang=js\"\n\nimport \"./5-1-EnIntro.vue?vue&type=style&index=0&id=3b020114&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-3b020114\"]])\n\nexport default __exports__","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-EnIntro.vue?vue&type=style&index=0&id=3b020114&lang=scss&scoped=true\"","module.exports = __webpack_public_path__ + \"img/CNAS.259aa5af.png\";","module.exports = __webpack_public_path__ + \"img/en-expiration-extension.0141b0c7.png\";"],"sourceRoot":""}