{"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.2fc951ef.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>\r\n    <div id=\"EnCycleBadgeIntro\" class=\"w3 w90-mb\">\r\n        <h1 class=\"h1\">Recycled marine debris product label</h1>\r\n        <section id=\"cycle-badge-intro-meaning\">\r\n            <img\r\n                :src=\"require('@/assets/png/badge/badge.png')\"\r\n                alt=\"循環產品標章\"\r\n            />\r\n            <article>\r\n                <h2 class=\"h2\">Symbolism of the label</h2>\r\n                <p class=\"p1\">\r\n                    Recycled marine debris product label<br />\r\n                    The waves symbolize the ocean<br />\r\n                    Waste plastic bottles can be a waste or be recycled and\r\n                    reused into a product<br />\r\n                    The arc waves lift the plastic bottle to form an\r\n                    environmentally sustainable cycle\r\n                </p>\r\n            </article>\r\n        </section>\r\n        <section id=\"cycle-badge-intro-process\">\r\n            <h2 class=\"h2\">Application flowchart</h2>\r\n            <div class=\"button-group\">\r\n                <button\r\n                    class=\"small-btn\"\r\n                    :class=\"{ activated: activatedProcessId === 0 }\"\r\n                    @click=\"activatedProcessId = 0\"\r\n                    @keypress.enter=\"activatedProcessId = 0\"\r\n                >\r\n                    Application\r\n                </button>\r\n                <button\r\n                    class=\"small-btn\"\r\n                    :class=\"{ activated: activatedProcessId === 1 }\"\r\n                    @click=\"activatedProcessId = 1\"\r\n                    @keypress.enter=\"activatedProcessId = 1\"\r\n                >\r\n                    Extension upon expiration\r\n                </button>\r\n            </div>\r\n            <figure v-show=\"activatedProcessId === 0\">\r\n                <img\r\n                    v-if=\"isMobile\"\r\n                    :src=\"\r\n                        require('@/assets/png/badge/en-first-application-mb.png')\r\n                    \"\r\n                    alt=\"首次申請流程圖\"\r\n                />\r\n                <img\r\n                    v-else\r\n                    :src=\"\r\n                        require('@/assets/png/badge/en-first-application.png')\r\n                    \"\r\n                    alt=\"首次申請流程圖\"\r\n                />\r\n\r\n                <figcaption class=\"hide hide-mb\">\r\n                    1.於申請人之準備期，申請人可向驗證機構申請查證，驗證機構受理後會進行查證，並向申請人出具查證報告。申請人取得查證聲明與報告後，即可開始準備申請標章。\r\n                    2.申請標章須檢附申請表、查證聲明及報告、標爭標示方式說明，以此三份文件向環保署提出申請後。環保署受理申請後將參考作業要點第4點及第5點進行形式審查，審查期間若有需要會請申請人進行資料補正，詳細內容可參考作業要點第6點，申請通過後將同意申請人使用標章。\r\n                </figcaption>\r\n            </figure>\r\n            <figure v-show=\"activatedProcessId === 1\">\r\n                <img\r\n                    v-if=\"isMobile\"\r\n                    :src=\"\r\n                        require('@/assets/png/badge/en-expiration-extension-mb.png')\r\n                    \"\r\n                    alt=\"期滿展延流程圖\"\r\n                />\r\n                <img\r\n                    v-else\r\n                    :src=\"\r\n                        require('@/assets/png/badge/en-expiration-extension.png')\r\n                    \"\r\n                    alt=\"期滿展延流程圖\"\r\n                />\r\n                <figcaption class=\"hide hide-mb\">\r\n                    1.於期滿展延期間，申請人可向驗證機構申請重新查證，驗證機構受理後會進行查證，並向申請人出具查證報告。申請人取得查證聲明與報告後，即可開始準備申請標章。\r\n                    2.申請標章須檢附申請表、查證聲明及報告、標爭標示方式說明，以此三份文件向環保署提出申請後。環保署受理申請後將參考作業要點第4點及第5點進行形式審查，審查期間若有需要會請申請人進行資料補正，詳細內容可參考作業要點第6點，申請通過後將同意申請人使用標章。\r\n                </figcaption>\r\n            </figure>\r\n        </section>\r\n        <section id=\"cycle-badge-intro-organization\">\r\n            <h2 class=\"h2\">Certification Institute</h2>\r\n            <p class=\"p1\">\r\n                A domestic or foreign professional, just and objective\r\n                certification institute. The institute shall conform to both\r\n                ISO17065 and ISO17021; and be capable of verifying the\r\n                operations of the management mechanism, including the source and\r\n                production of marine debris.\r\n            </p>\r\n            <div class=\"organization-group\" id=\"organization-group1\">\r\n                <h3 class=\"h3\">Certification Institute Search</h3>\r\n                <ul>\r\n                    <li>\r\n                        <img\r\n                            :src=\"require('@/assets/png/badge/IAF.png')\"\r\n                            alt=\"IAF LOGO\"\r\n                        />\r\n                        <article>\r\n                            <p class=\"p1 title\">\r\n                                International Accreditation Forum (IAF)\r\n                            </p>\r\n                            <a\r\n                                href=\"https://iaf.nu/en/accreditation-bodies/\"\r\n                                target=\"_blank\"\r\n                                class=\"link\"\r\n                                ><span\r\n                                    >International Accreditation Forum\r\n                                    (IAF)</span\r\n                                ></a\r\n                            >\r\n                        </article>\r\n                    </li>\r\n                    <li>\r\n                        <img\r\n                            :src=\"require('@/assets/png/badge/TAF.png')\"\r\n                            alt=\"TAF LOGO\"\r\n                        />\r\n                        <article>\r\n                            <p class=\"p1 title\">\r\n                                Taiwan Accreditation Foundation (TAF)\r\n                            </p>\r\n                            <a\r\n                                href=\"https://www.taftw.org.tw/directory/scheme/msv/\"\r\n                                target=\"_blank\"\r\n                                class=\"link\"\r\n                                ><span>ISO/IEC 17021-1</span></a\r\n                            >\r\n                            <br />\r\n                            <a\r\n                                href=\"https://www.taftw.org.tw/directory/scheme/pva/\"\r\n                                target=\"_blank\"\r\n                                class=\"link\"\r\n                                ><span>ISO/IEC 17065</span></a\r\n                            >\r\n                        </article>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <!-- <div class=\"organization-group\" id=\"organization-group2\">\r\n                <h3 class=\"h3\">各國驗證機構</h3>\r\n                <ul>\r\n                    <li v-for=\"item in organizationList\" :key=\"item.title\">\r\n                        <div class=\"img-wrap\">\r\n                            <img\r\n                                :src=\"item.imgUrl\"\r\n                                :alt=\"item.title + ' LOGO'\"\r\n                            />\r\n                        </div>\r\n                        <p class=\"p1 title\">{{ item.title }}</p>\r\n                    </li>\r\n                </ul>\r\n            </div> -->\r\n        </section>\r\n        <section id=\"cycle-badge-intro-download\">\r\n            <h2 class=\"h2\">Download the files</h2>\r\n            <ul class=\"download-group\">\r\n                <li>\r\n                    <p class=\"p1 title\">\r\n                        Operation Directions for Recycled Marine Debris Product\r\n                        Label\r\n                    </p>\r\n                    <a\r\n                        href=\"../pdf/OperationCh.pdf\"\r\n                        target=\"_blank\"\r\n                        class=\"link\"\r\n                    >\r\n                        <i class=\"icon-clip\"></i><span>Chinese Version</span>\r\n                    </a>\r\n                    <a\r\n                        href=\"../pdf/OperationEn.pdf\"\r\n                        target=\"_blank\"\r\n                        class=\"link\"\r\n                    >\r\n                        <i class=\"icon-clip\"></i><span>English Version</span>\r\n                    </a>\r\n                </li>\r\n                <li>\r\n                    <p class=\"p1 title\">\r\n                        Specifications Governing Use of Recycled Marine Debris\r\n                        Product Label\r\n                    </p>\r\n\r\n                    <a\r\n                        href=\"../pdf/SpecificationsCh.pdf\"\r\n                        target=\"_blank\"\r\n                        class=\"link\"\r\n                    >\r\n                        <i class=\"icon-clip\"></i><span>Chinese Version</span>\r\n                    </a>\r\n                    <a\r\n                        href=\"../pdf/SpecificationsEn.pdf\"\r\n                        target=\"_blank\"\r\n                        class=\"link\"\r\n                    >\r\n                        <i class=\"icon-clip\"></i><span>English Version</span>\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n        </section>\r\n    </div>\r\n</template>\r\n<script>\r\nimport { computed, ref } from 'vue'\r\nexport default {\r\n    name: 'EnCycleBadgeIntro',\r\n    setup() {\r\n        const isMobile = computed(() => window.innerWidth < 768)\r\n        const activatedProcessId = ref(0)\r\n        const organizationList = [\r\n            {\r\n                title: 'NSC',\r\n                imgUrl: require('@/assets/png/badge/NSC.png'),\r\n            },\r\n            {\r\n                title: 'CNAS',\r\n                imgUrl: require('@/assets/png/badge/CNAS.png'),\r\n            },\r\n            {\r\n                title: 'UKAS',\r\n                imgUrl: require('@/assets/png/badge/UKAS.png'),\r\n            },\r\n            {\r\n                title: 'BoA',\r\n                imgUrl: require('@/assets/png/badge/BOA.png'),\r\n            },\r\n            {\r\n                title: 'KAB',\r\n                imgUrl: require('@/assets/png/badge/KAB.png'),\r\n            },\r\n        ]\r\n        return { activatedProcessId, organizationList, isMobile }\r\n    },\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n#CycleBadgeIntro {\r\n    padding-bottom: 50px;\r\n}\r\np.title {\r\n    margin: 5px 0;\r\n    text-indent: 0;\r\n    line-height: 1.2em;\r\n}\r\nsection {\r\n    margin: 50px 0;\r\n}\r\n#cycle-badge-intro-meaning {\r\n    img {\r\n        display: block;\r\n        width: 300px;\r\n    }\r\n    article {\r\n        flex: 1;\r\n    }\r\n    p {\r\n        text-indent: 0;\r\n    }\r\n    @media screen and (min-width: 768px) {\r\n        display: flex;\r\n    }\r\n    @media screen and (max-width: 767px) {\r\n        img {\r\n            margin: 0 auto 30px;\r\n        }\r\n    }\r\n}\r\n#cycle-badge-intro-process {\r\n    button {\r\n        display: inline-block;\r\n        margin-top: 0;\r\n        border: none;\r\n        border-radius: 5px;\r\n        background-color: $theme4;\r\n        opacity: 0.4;\r\n\r\n        &.activated {\r\n            opacity: 1;\r\n        }\r\n    }\r\n    img {\r\n        display: block;\r\n        width: 100%;\r\n    }\r\n    @media screen and (min-width: 768px) {\r\n        .button-group {\r\n            text-align: right;\r\n        }\r\n        button {\r\n            margin-left: 10px;\r\n        }\r\n        figure {\r\n            margin: 20px 0;\r\n        }\r\n    }\r\n    @media screen and (max-width: 767px) {\r\n        button {\r\n            margin-bottom: 10px;\r\n            margin-right: 10px;\r\n        }\r\n        figure {\r\n            margin: 20px -6%;\r\n        }\r\n    }\r\n}\r\n#cycle-badge-intro-organization {\r\n    .organization-group {\r\n        margin: 30px 0;\r\n    }\r\n    #organization-group1 {\r\n        @media screen and (min-width: 768px) {\r\n            li {\r\n                display: flex;\r\n                align-items: center;\r\n            }\r\n            img {\r\n                width: 150px;\r\n            }\r\n            article {\r\n                flex: 1;\r\n                margin-left: 30px;\r\n            }\r\n        }\r\n        @media screen and (max-width: 767px) {\r\n            li {\r\n                position: relative;\r\n                margin-bottom: 30px;\r\n            }\r\n            img {\r\n                position: absolute;\r\n                top: -15px;\r\n                right: 0;\r\n                width: 80px;\r\n            }\r\n            p {\r\n                text-align: left;\r\n                padding-right: 90px;\r\n            }\r\n        }\r\n    }\r\n    #organization-group2 {\r\n        ul {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n        }\r\n        .title {\r\n            text-align: center;\r\n        }\r\n        .img-wrap {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n        @media screen and (min-width: 768px) {\r\n            li {\r\n                width: 150px;\r\n            }\r\n            .img-wrap {\r\n                height: 105px;\r\n            }\r\n            img {\r\n                max-width: 100px;\r\n                max-height: 100px;\r\n            }\r\n        }\r\n        @media screen and (max-width: 767px) {\r\n            li {\r\n                width: 100px;\r\n            }\r\n            .img-wrap {\r\n                height: 70px;\r\n            }\r\n            img {\r\n                max-width: 60px;\r\n                max-height: 60px;\r\n            }\r\n        }\r\n    }\r\n}\r\n#cycle-badge-intro-download {\r\n    .download-group {\r\n        li {\r\n            position: relative;\r\n            padding-left: 1.2em;\r\n            margin-bottom: 30px;\r\n            &:before {\r\n                content: '・';\r\n                position: absolute;\r\n                left: 0;\r\n                top: 0;\r\n                line-height: 1.2em;\r\n            }\r\n        }\r\n    }\r\n    @media screen and (max-width: 767px) {\r\n        p {\r\n            text-align: left;\r\n            padding-right: 10px;\r\n        }\r\n    }\r\n}\r\n</style>\r\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 \"C:\\\\Users\\\\danie\\\\Documents\\\\Octave\\\\production\\\\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":""}