{"version":3,"sources":["webpack:///./src/views/ch/6-2-Image.vue?9817","webpack:///./src/views/ch/6-2-Image.vue","webpack:///./src/views/ch/6-2-Image.vue?4f74"],"names":["id","class","_createElementVNode","_hoisted_11","_hoisted_12","_createElementBlock","_hoisted_2","_Fragment","_renderList","$setup","item","index","key","src","imgUrl","alt","title","tabindex","role","onClick","onKeypress","onKeydown","_toDisplayString","ch","en","href","download","activated","onMousewheel","onTouchmove","name","setup","activeIndex","ref","displayLightBox","toggleLightBox","undefined","value","preventD","e","stopPropagation","preventDefault","imageList","__exports__","render"],"mappings":"uIAAA,W,uJCCSA,GAAG,mBAAmBC,MAAM,a,QAC7BC,gCAAiC,MAA7BD,MAAM,aAAY,UAAM,I,GACxBD,GAAG,0B,GAEMC,MAAM,Y,8CAWNA,MAAM,c,GACHA,MAAM,M,GACNA,MAAM,c,8BAMNC,gCAA0B,KAAvBD,MAAM,cAAY,U,QAAKC,gCAAiB,YAAX,QAAI,I,GAApCC,EAA0BC,G,GAa7BH,MAAM,c,wEApCvBI,gCAmDM,MAnDN,EAmDM,CAlDFC,EACAJ,gCAyBK,KAzBL,EAyBK,6BAxBDG,gCAuBKE,cAAA,KAAAC,wBAvBuBC,YAAS,CAAzBC,EAAMC,K,yBAAlBN,gCAuBK,MAvBmCO,IAAG,SAAaD,GAAxD,CACIT,gCAUM,MAVN,EAUM,CATFA,gCAAsD,OAAhDW,IAAKH,EAAKI,OAASC,IAAKL,EAAKM,MAAK,SAAxC,UACAd,gCAOK,KANDe,SAAS,IACTC,KAAK,SACLjB,MAAM,eACLkB,QAAK,GAAEV,iBAAeE,GACtBS,WAAQ,yBAAQX,iBAAeE,GAAK,WACpCU,UAAO,qCAAMZ,mBAAc,WANhC,aASJP,gCAUM,MAVN,EAUM,CATFA,gCAAuC,KAAvC,EAAuCoB,6BAArBZ,EAAKM,MAAMO,IAAE,GAC/BrB,gCAA+C,KAA/C,EAA+CoB,6BAArBZ,EAAKM,MAAMQ,IAAE,GACvCtB,gCAMI,KALCuB,KAAMf,EAAKI,OACXY,SAAUhB,EAAKM,MAAMO,GACtBtB,MAAM,QAHV,aAfR,QAyBJC,gCAsBM,OArBFD,MAAK,6BAAC,YAAW,CAAA0B,UACIlB,qBACpBmB,aAAU,+CAAOnB,6BAAQ,WACzBoB,YAAS,+CAAOpB,6BAAQ,YAJ7B,CAMIP,gCAAkD,OAA7CD,MAAM,OAAQkB,QAAK,eAAEV,sBAC1BP,gCAcO,aAbHA,gCAQM,MARN,EAQM,CAPFA,gCAMK,KALDD,MAAM,aACNgB,SAAS,IACTC,KAAK,SACJC,QAAK,eAAEV,oBACPW,WAAQ,qCAAQX,mBAAc,aALnC,WAQJP,gCAGE,OAFGW,IAAKJ,YAAUA,eAAaK,OAC5BC,IAAKN,YAAUA,eAAaO,MAAMO,GAAE,SAFzC,aAjBR,M,gBA2BO,GACXO,KAAM,mBACNC,QACI,MAAMC,EAAcC,iBAAI,GAClBC,EAAkBD,kBAAI,GAC5B,SAASE,EAAexB,QACNyB,IAAVzB,IACAqB,EAAYK,MAAQ1B,EACpBuB,EAAgBG,OAAQ,GAE5BH,EAAgBG,OAASH,EAAgBG,MAE7C,SAASC,EAASC,GACdA,EAAEC,kBACFD,EAAEE,iBAEN,MAAMC,EAAY,CACd,CACI1B,MAAO,CACHO,GAAI,YACJC,GAAI,8BAERV,OAAQ,qBAIhB,MAAO,CACH4B,YACAV,cACAG,iBACAD,kBACAI,c,iCChFZ,MAAMK,EAA2B,IAAgB,EAAQ,CAAC,CAAC,SAASC,GAAQ,CAAC,YAAY,qBAE1E","file":"js/chunk-2251a231.2ac97401.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!./6-2-Image.vue?vue&type=style&index=0&id=5e059cda&lang=scss&scoped=true\"","<template>\n    <div id=\"InformationImage\" class=\"w3 w90-mb\">\n        <h1 class=\"h1 center\">圖片下載專區</h1>\n        <ul id=\"information-image-list\">\n            <li v-for=\"(item, index) in imageList\" :key=\"'image-' + index\">\n                <div class=\"img-wrap\">\n                    <img :src=\"item.imgUrl\" :alt=\"item.title + 'image'\" />\n                    <i\n                        tabindex=\"0\"\n                        role=\"button\"\n                        class=\"icon-preview\"\n                        @click=\"toggleLightBox(index)\"\n                        @keypress.enter=\"toggleLightBox(index)\"\n                        @keydown.esc=\"toggleLightBox()\"\n                    ></i>\n                </div>\n                <div class=\"title-wrap\">\n                    <h3 class=\"h3\">{{ item.title.ch }}</h3>\n                    <h4 class=\"f16 f12-mb\">{{ item.title.en }}</h4>\n                    <a\n                        :href=\"item.imgUrl\"\n                        :download=\"item.title.ch\"\n                        class=\"link\"\n                    >\n                        <i class=\"icon-image\"></i><span>下載圖片</span>\n                    </a>\n                </div>\n            </li>\n        </ul>\n        <div\n            class=\"light-box\"\n            :class=\"{ activated: displayLightBox }\"\n            @mousewheel.stop=\"preventD\"\n            @touchmove.stop=\"preventD\"\n        >\n            <div class=\"mask\" @click=\"toggleLightBox()\"></div>\n            <main>\n                <div class=\"close-wrap\">\n                    <i\n                        class=\"icon-close\"\n                        tabindex=\"0\"\n                        role=\"button\"\n                        @click=\"toggleLightBox()\"\n                        @keypress.enter=\"toggleLightBox()\"\n                    ></i>\n                </div>\n                <img\n                    :src=\"imageList[activeIndex].imgUrl\"\n                    :alt=\"imageList[activeIndex].title.ch + 'image'\"\n                />\n            </main>\n        </div>\n    </div>\n</template>\n<script>\nimport { ref } from 'vue-demi'\nexport default {\n    name: 'InformationImage',\n    setup() {\n        const activeIndex = ref(0)\n        const displayLightBox = ref(false)\n        function toggleLightBox(index) {\n            if (index !== undefined) {\n                activeIndex.value = index\n                displayLightBox.value = false\n            }\n            displayLightBox.value = !displayLightBox.value\n        }\n        function preventD(e) {\n            e.stopPropagation()\n            e.preventDefault()\n        }\n        const imageList = [\n            {\n                title: {\n                    ch: '海洋廢棄物循環標章',\n                    en: 'English Title of the Image',\n                },\n                imgUrl: '../img/badge.png',\n            },\n        ]\n\n        return {\n            imageList,\n            activeIndex,\n            toggleLightBox,\n            displayLightBox,\n            preventD,\n        }\n    },\n}\n</script>\n<style lang=\"scss\" scoped>\n#InformationImage {\n    @media screen and (min-width: 768px) {\n        margin-bottom: 80px;\n    }\n    @media screen and (max-width: 767px) {\n        margin-bottom: 50px;\n    }\n}\n#information-image-list {\n    display: grid;\n    li {\n        box-shadow: $shadow1;\n        .img-wrap {\n            position: relative;\n            background-color: $grayF;\n            img {\n                width: 100%;\n                height: 100%;\n                object-fit: contain;\n            }\n            i.icon-preview {\n                position: absolute;\n                z-index: 30;\n                right: 15px;\n                bottom: 15px;\n                color: $white;\n                font-size: 20px;\n                cursor: pointer;\n            }\n            &::after {\n                content: '';\n                position: absolute;\n                left: 0;\n                top: 0;\n                width: 100%;\n                height: 100%;\n                background: linear-gradient(\n                    to top,\n                    rgba($black, 0.5),\n                    transparent\n                );\n            }\n        }\n        .title-wrap {\n            padding: 10px 15px;\n            h3 {\n                color: $gray2;\n                font-weight: 500;\n                @media screen and (min-width: 768px) {\n                    line-height: 1.2em;\n                }\n                @media screen and (max-width: 767px) {\n                    line-height: 1.5em;\n                }\n            }\n            h4 {\n                line-height: 1.2em;\n                padding-bottom: 1em;\n            }\n        }\n    }\n\n    @media screen and (min-width: 768px) {\n        grid-template: auto / repeat(3, 1fr);\n        grid-gap: 20px;\n        .img-wrap {\n            height: 250px;\n        }\n    }\n    @media screen and (max-width: 767px) {\n        grid-template: auto / 1fr;\n        grid-gap: 20px;\n        .img-wrap {\n            height: 200px;\n        }\n    }\n}\n.light-box {\n    display: none;\n    z-index: 2000;\n    position: fixed;\n    left: 0;\n    top: 0;\n    width: 100vw;\n    height: 100vh;\n    align-items: center;\n    justify-content: center;\n\n    &.activated {\n        display: flex;\n    }\n    main {\n        position: relative;\n        top: -5vh;\n        box-sizing: border-box;\n        background-color: $white;\n\n        .close-wrap {\n            padding: 10px 0 20px;\n            display: block;\n            text-align: right;\n        }\n        i.icon-close {\n            cursor: pointer;\n            transform: rotate(-45deg);\n            &::after,\n            & {\n                display: inline-block;\n                width: 30px;\n                height: 3px;\n                border-radius: 2px;\n                background-color: $gray6;\n            }\n            &::after {\n                content: '';\n                position: relative;\n                top: -12px;\n                transform: rotate(90deg);\n            }\n        }\n        img {\n            display: block;\n            width: 100%;\n            max-height: 70vh;\n            object-fit: contain;\n        }\n    }\n    .mask {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgba($black, 0.5);\n    }\n\n    @media screen and (min-width: 768px) {\n        main {\n            width: 70%;\n            padding: 30px;\n        }\n    }\n    @media screen and (max-width: 767px) {\n        main {\n            width: 90%;\n            padding: 20px;\n        }\n    }\n}\n</style>\n","import { render } from \"./6-2-Image.vue?vue&type=template&id=5e059cda&scoped=true\"\nimport script from \"./6-2-Image.vue?vue&type=script&lang=js\"\nexport * from \"./6-2-Image.vue?vue&type=script&lang=js\"\n\nimport \"./6-2-Image.vue?vue&type=style&index=0&id=5e059cda&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-5e059cda\"]])\n\nexport default __exports__"],"sourceRoot":""}