{"version":3,"sources":["webpack:///./src/views/manage/albumManage/album/share/index.vue","webpack:///./src/views/manage/albumManage/album/components/ShareImage/index.vue","webpack:///src/views/manage/albumManage/album/components/ShareImage/index.vue","webpack:///./src/views/manage/albumManage/album/components/ShareImage/index.vue?850b","webpack:///./src/views/manage/albumManage/album/components/ShareImage/index.vue?19aa","webpack:///src/views/manage/albumManage/album/share/index.vue","webpack:///./src/views/manage/albumManage/album/share/index.vue?e00c","webpack:///./src/views/manage/albumManage/album/share/index.vue?6e3e","webpack:///./src/assets/img/share-logo.png","webpack:///./src/views/manage/albumManage/album/components/ShareImage/index.vue?39de","webpack:///./src/views/manage/albumManage/album/share/index.vue?beeb"],"names":["render","_vm","this","_c","_self","staticClass","attrs","$utils","coverImg","albumShare","cover","slot","_v","_s","name","artist","on","$event","visible","_m","domesticSpLinks","length","_l","item","index","key","spLogo","spName","link","openWin","staticStyle","foreignSpLinks","staticRenderFns","handleClose","setQRCode","ref","style","themeColor","album","require","createImage","props","type","default","data","url","qrcode","computed","watch","methods","getImageColor","image","context","g","b","r","arr","self","invitationCode","text","width","height","colorLight","correctLevel","html2canvas","useCORS","x","scale","then","canvas","a","component","components","ShareImage","mounted","albumId","id","method","params","state","msg","result","window","module","exports"],"mappings":"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","file":"static/js/chunk-67e06c0f.04ec1c3b.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('div',{staticClass:\"content-box first\"},[_c('div',{staticClass:\"album-info\"},[_c('el-image',{attrs:{\"src\":_vm.$utils.coverImg(_vm.albumShare.cover, 200, 200),\"preview-src-list\":[_vm.$utils.coverImg(_vm.albumShare.cover)],\"fit\":\"cover\"}},[_c('div',{staticClass:\"image-slot\",attrs:{\"slot\":\"error\"},slot:\"error\"},[_c('i',{staticClass:\"el-icon-picture-outline\"})])]),_c('div',{staticClass:\"info\"},[_c('div',{staticClass:\"title\"},[_vm._v(_vm._s(_vm.albumShare.name))]),_c('div',{staticClass:\"artist\"},[_vm._v(_vm._s(_vm.albumShare.artist))]),_c('el-button',{attrs:{\"type\":\"primary\"},on:{\"click\":function($event){_vm.visible = true}}},[_vm._v(\"分享音乐\")])],1)],1)]),_c('div',{staticClass:\"sp-list\"},[_vm._m(0),(_vm.albumShare.domesticSpLinks && _vm.albumShare.domesticSpLinks.length > 0)?_c('div',{staticClass:\"rows\"},_vm._l((_vm.albumShare.domesticSpLinks),function(item,index){return _c('div',{key:index,staticClass:\"item\"},[_c('el-image',{attrs:{\"src\":_vm.$utils.coverImg(item.spLogo, 100, 100),\"fit\":\"cover\"}},[_c('div',{staticClass:\"image-slot\",attrs:{\"slot\":\"error\"},slot:\"error\"},[_c('i',{staticClass:\"el-icon-picture-outline\"})])]),_c('div',{staticClass:\"info\"},[_c('h3',[_vm._v(_vm._s(item.spName))]),(item.link)?_c('p',[_vm._v(\"已上线至该音乐平台\")]):_c('p',[_vm._v(\"敬请期待\")])]),_c('el-button',{attrs:{\"type\":\"primary\",\"disabled\":item.link ? false : true,\"plain\":\"\"},on:{\"click\":function($event){return _vm.openWin(item.link)}}},[_vm._v(\"播放\")])],1)}),0):_c('el-empty',{attrs:{\"description\":\"暂无大陆平台数据\"}})],1),_c('div',{staticClass:\"sp-list\",staticStyle:{\"margin-bottom\":\"40px\"}},[_vm._m(1),(_vm.albumShare.foreignSpLinks && _vm.albumShare.foreignSpLinks.length > 0)?_c('div',{staticClass:\"rows\"},_vm._l((_vm.albumShare.foreignSpLinks),function(item,index){return _c('div',{key:index,staticClass:\"item\"},[_c('el-image',{attrs:{\"src\":_vm.$utils.coverImg(item.spLogo, 50, 50),\"fit\":\"cover\"}},[_c('div',{staticClass:\"image-slot\",attrs:{\"slot\":\"error\"},slot:\"error\"},[_c('i',{staticClass:\"el-icon-picture-outline\"})])]),_c('div',{staticClass:\"info\"},[_c('h3',[_vm._v(_vm._s(item.spName))]),(item.link)?_c('p',[_vm._v(\"已上线至该音乐平台\")]):_c('p',[_vm._v(\"敬请期待\")])]),_c('el-button',{attrs:{\"type\":\"primary\",\"disabled\":item.link ? false : true,\"plain\":\"\"},on:{\"click\":function($event){return _vm.openWin(item.link)}}},[_vm._v(\"播放\")])],1)}),0):_c('el-empty',{attrs:{\"description\":\"暂无海外平台数据\"}})],1),_c('share-image',{attrs:{\"visible\":_vm.visible,\"album\":_vm.albumShare},on:{\"update:visible\":function($event){_vm.visible=$event}}})],1)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"title\"},[_vm._v(\" 大陆主要平台 \"),_c('span',[_vm._v(\"提供全球200+平台渠道上线服务\")])])\n},function (){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"title\"},[_vm._v(\" 海外主要平台 \"),_c('span',[_vm._v(\"非大陆地区，播放链接可能无法打开\")])])\n}]\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('el-dialog',{attrs:{\"title\":\"专辑分享\",\"append-to-body\":\"\",\"visible\":_vm.visible,\"width\":\"900px\",\"before-close\":_vm.handleClose},on:{\"open\":_vm.setQRCode}},[_c('div',{staticClass:\"share-image\"},[_c('div',{ref:\"html2canvas\",staticClass:\"html2canvas\"},[_c('div',{staticClass:\"image\",style:(`background-color: ${_vm.themeColor};`)},[_c('el-image',{attrs:{\"src\":_vm.$utils.coverImg(_vm.album.cover, 500, 500),\"fit\":\"cover\"}},[_c('div',{staticClass:\"image-slot\",attrs:{\"slot\":\"error\"},slot:\"error\"},[_c('i',{staticClass:\"el-icon-picture-outline\"})])]),_c('span',{staticClass:\"icon\"}),_c('h3',[_vm._v(_vm._s(_vm.album.name))]),_c('p',{staticClass:\"name\"},[_vm._v(_vm._s(`{ ${_vm.album.artist} }`))]),_c('p',{staticClass:\"slogan\"},[_vm._v(\"“这个世界需要你的音乐。”\")]),_c('div',{staticClass:\"ft\",style:(`background-color: ${_vm.themeColor};`)},[_c('img',{staticClass:\"logos\",attrs:{\"src\":require(\"@/assets/img/share-logo.png\")}}),_c('div',{staticClass:\"qrcode-view\"},[_c('div',{ref:\"qrCode\",staticClass:\"qrcode\"}),_c('p',[_vm._v(\"扫码播放\")])])])],1)]),_c('el-button',{attrs:{\"type\":\"primary\"},on:{\"click\":_vm.createImage}},[_vm._v(\"下载到本地分享\")])],1)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <el-dialog title=\"专辑分享\" append-to-body :visible=\"visible\" width=\"900px\" @open=\"setQRCode\" :before-close=\"handleClose\">\n        <div class=\"share-image\">\n            <div class=\"html2canvas\" ref=\"html2canvas\">\n                <div class=\"image\" :style=\"`background-color: ${themeColor};`\">\n                    <el-image :src=\"$utils.coverImg(album.cover, 500, 500)\" fit=\"cover\">\n                        <div slot=\"error\" class=\"image-slot\">\n                            <i class=\"el-icon-picture-outline\"></i>\n                        </div>\n                    </el-image>\n                    <span class=\"icon\"></span>\n                    <h3>{{ album.name }}</h3>\n                    <p class=\"name\">{{ `{ ${album.artist} }` }}</p>\n                    <p class=\"slogan\">“这个世界需要你的音乐。”</p>\n                    <div class=\"ft\" :style=\"`background-color: ${themeColor};`\">\n                        <img class=\"logos\" src=\"@/assets/img/share-logo.png\" />\n                        <div class=\"qrcode-view\">\n                            <div class=\"qrcode\" ref=\"qrCode\"></div>\n                            <p>扫码播放</p>\n                        </div>\n                    </div>\n                    <!-- <div class=\"text\">\n                        SHOWSTART\n                        <span>× RELEASE</span>\n                    </div> -->\n                </div>\n            </div>\n            <el-button @click=\"createImage\" type=\"primary\">下载到本地分享</el-button>\n        </div>\n    </el-dialog>\n</template>\n\n<script>\nimport QRCode from 'qrcodejs2';\nimport html2canvas from 'html2canvas';\nimport ls from 'local-storage';\nexport default {\n    props: {\n        visible: {\n            type: Boolean,\n            default: false,\n        },\n        album: {\n            type: Object,\n            default: () => { },\n        },\n    },\n    data() {\n        return {\n            url: '',\n            qrcode: null,\n            themeColor: 'rgb(248,248,248)',\n        };\n    },\n    computed: {},\n    watch: {},\n    methods: {\n        getImageColor(url) {\n            if (!url) return '';\n            const self = this;\n            // 创建一个新的Image对象\n            var image = new Image();\n            image.crossOrigin = 'Anonymous';\n            // 设置图片源\n            image.src = this.$utils.coverImg(url);\n            // 等待图片加载完成\n            image.onload = function () {\n                const imgHeight = 100;\n                const imgWidth = 100;\n                // 创建一个Canvas元素\n                var canvas = document.createElement('canvas');\n                var context = canvas.getContext('2d');\n                // 将图片绘制到Canvas上\n                context.drawImage(image, 0, 0, imgWidth, imgHeight);\n                // 获取Canvas上指定坐标的像素数据\n                var data = context.getImageData(0, 0, imgWidth, imgHeight).data;\n                let arr = [];\n                var r = 1,\n                    g = 1,\n                    b = 1;\n                // 取所有像素的平均值\n                for (var row = 0; row < imgHeight; row++) {\n                    for (var col = 0; col < imgWidth; col++) {\n                        if (row == 0) {\n                            r += data[imgWidth * row + col];\n                            g += data[imgWidth * row + col + 1];\n                            b += data[imgWidth * row + col + 2];\n                            arr.push([r, g, b]);\n                        } else {\n                            r += data[(imgWidth * row + col) * 4];\n                            g += data[(imgWidth * row + col) * 4 + 1];\n                            b += data[(imgWidth * row + col) * 4 + 2];\n                            arr.push([r, g, b]);\n                        }\n                    }\n                }\n                // 求取平均值\n                r /= imgWidth * imgHeight;\n                g /= imgWidth * imgHeight;\n                b /= imgWidth * imgHeight;\n                // 将最终的值取整\n                r = Math.round(r);\n                g = Math.round(g);\n                b = Math.round(b);\n                self.themeColor = 'rgb(' + r + ',' + g + ',' + b + ')';\n            };\n        },\n        setQRCode() {\n            this.$nextTick(() => {\n                let { invitationCode } = this.$route.query;\n                if (!invitationCode) invitationCode = ls.get('invitationCode');\n                invitationCode = `&invitationCode=${invitationCode}`;\n                if (this.qrcode) {\n                    this.qrcode.makeCode(\n                        `${this.$store.state.config.cpHomeUrl}/pages/shareAlbum/shareAlbum?id=${this.$route.params.albumId}${invitationCode}`\n                    );\n                } else {\n                    this.qrcode = new QRCode(this.$refs.qrCode, {\n                        text: `${this.$store.state.config.cpHomeUrl}/pages/shareAlbum/shareAlbum?id=${this.$route.params.albumId}${invitationCode}`,\n                        width: 100,\n                        height: 100,\n                        colorLight: '#ffffff',\n                        correctLevel: 3,\n                    });\n                }\n            });\n            this.getImageColor(this.album.cover);\n        },\n        handleClose() {\n            this.$emit('update:visible', false);\n        },\n        createImage() {\n            html2canvas(this.$refs.html2canvas, {\n                width: 750,\n                height: 1280,\n                useCORS: true,\n                x: 55,\n                scale: 2,\n            }).then((canvas) => {\n                const url = canvas.toDataURL('image/png');\n                const a = document.createElement('a');\n                a.href = url;\n                a.setAttribute('download', 'share');\n                a.click();\n            });\n        },\n    },\n};\n</script>\n<style lang=\"scss\">\n.share-image {\n    text-align: center;\n\n    .image {\n        width: 750px;\n        height: 1280px;\n        margin: 0 auto 60px;\n        position: relative;\n        text-align: left;\n        overflow: hidden;\n\n        &::before {\n            content: '';\n            width: 100%;\n            height: 100%;\n            background: url('~@/assets/img/share-bg.png') no-repeat center;\n            background-size: cover;\n            position: absolute;\n            top: 0px;\n            left: 0px;\n            z-index: 0;\n        }\n\n        .ft {\n            height: 220px;\n            position: absolute;\n            bottom: 0px;\n            width: 100%;\n            left: 0px;\n\n            .logos {\n                width: 516px;\n                padding: 50px 30px;\n            }\n\n            .qrcode-view {\n                width: 108px;\n                height: 140px;\n                background: #ffffff;\n                text-align: center;\n                position: absolute;\n                bottom: 40px;\n                right: 30px;\n                padding: 4px;\n                z-index: 1;\n\n                .qrcode {\n                    width: 100px;\n                    height: 100px;\n                }\n\n                p {\n                    font-size: 16px;\n                    font-weight: 400;\n                    color: #000000;\n                    line-height: 16px;\n                    letter-spacing: 4px;\n                    margin-top: 6px;\n                }\n            }\n        }\n\n        .el-image {\n            top: 340px;\n            position: absolute;\n            left: 0px;\n            z-index: 2;\n            width: 500px;\n            height: 500px;\n        }\n\n        .icon {\n            position: absolute;\n            left: 458px;\n            background: url('~@/assets/img/share-icon.png') no-repeat center;\n            background-size: cover;\n            top: 360px;\n            width: 232px;\n            height: 460px;\n            z-index: 1;\n        }\n\n        h3 {\n            font-size: 60px;\n            font-weight: 600;\n            color: #000;\n            line-height: 60px;\n            position: absolute;\n            z-index: 1;\n            left: 40px;\n            right: 40px;\n            bottom: 1064px;\n        }\n\n        p.name {\n            font-size: 24px;\n            font-weight: 400;\n            color: #666;\n            line-height: 24px;\n            position: absolute;\n            left: 40px;\n            right: 40px;\n            bottom: 1000px;\n            z-index: 1;\n        }\n\n        .slogan {\n            font-size: 24px;\n            font-weight: 400;\n            color: #000000;\n            line-height: 24px;\n            position: absolute;\n            bottom: 356px;\n            left: 40px;\n            right: 40px;\n        }\n    }\n}\n</style>\n","import mod from \"-!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=46455018&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=46455018&prod&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\n    <div>\n        <div class=\"content-box first\">\n            <div class=\"album-info\">\n                <el-image :src=\"$utils.coverImg(albumShare.cover, 200, 200)\"\n                    :preview-src-list=\"[$utils.coverImg(albumShare.cover)]\" fit=\"cover\">\n                    <div slot=\"error\" class=\"image-slot\">\n                        <i class=\"el-icon-picture-outline\"></i>\n                    </div>\n                </el-image>\n                <div class=\"info\">\n                    <div class=\"title\">{{ albumShare.name }}</div>\n                    <div class=\"artist\">{{ albumShare.artist }}</div>\n                    <el-button @click=\"visible = true\" type=\"primary\">分享音乐</el-button>\n                </div>\n            </div>\n        </div>\n        <div class=\"sp-list\">\n            <div class=\"title\">\n                大陆主要平台\n                <span>提供全球200+平台渠道上线服务</span>\n            </div>\n            <div v-if=\"albumShare.domesticSpLinks && albumShare.domesticSpLinks.length > 0\" class=\"rows\">\n                <div class=\"item\" v-for=\"(item, index) in albumShare.domesticSpLinks\" :key=\"index\">\n                    <el-image :src=\"$utils.coverImg(item.spLogo, 100, 100)\" fit=\"cover\">\n                        <div slot=\"error\" class=\"image-slot\">\n                            <i class=\"el-icon-picture-outline\"></i>\n                        </div>\n                    </el-image>\n                    <div class=\"info\">\n                        <h3>{{ item.spName }}</h3>\n                        <p v-if=\"item.link\">已上线至该音乐平台</p>\n                        <p v-else>敬请期待</p>\n                    </div>\n                    <el-button type=\"primary\" :disabled=\"item.link ? false : true\" @click=\"openWin(item.link)\"\n                        plain>播放</el-button>\n                </div>\n            </div>\n            <el-empty v-else description=\"暂无大陆平台数据\"></el-empty>\n        </div>\n        <div class=\"sp-list\" style=\"margin-bottom: 40px\">\n            <div class=\"title\">\n                海外主要平台\n                <span>非大陆地区，播放链接可能无法打开</span>\n            </div>\n            <div v-if=\"albumShare.foreignSpLinks && albumShare.foreignSpLinks.length > 0\" class=\"rows\">\n                <div class=\"item\" v-for=\"(item, index) in albumShare.foreignSpLinks\" :key=\"index\">\n                    <el-image :src=\"$utils.coverImg(item.spLogo, 50, 50)\" fit=\"cover\">\n                        <div slot=\"error\" class=\"image-slot\">\n                            <i class=\"el-icon-picture-outline\"></i>\n                        </div>\n                    </el-image>\n                    <div class=\"info\">\n                        <h3>{{ item.spName }}</h3>\n                        <p v-if=\"item.link\">已上线至该音乐平台</p>\n                        <p v-else>敬请期待</p>\n                    </div>\n                    <el-button type=\"primary\" :disabled=\"item.link ? false : true\" @click=\"openWin(item.link)\"\n                        plain>播放</el-button>\n                </div>\n            </div>\n            <el-empty v-else description=\"暂无海外平台数据\"></el-empty>\n        </div>\n        <share-image :visible.sync=\"visible\" :album=\"albumShare\"></share-image>\n    </div>\n</template>\n\n<script>\nimport ShareImage from '../components/ShareImage';\nexport default {\n    data() {\n        return {\n            albumShare: {\n                domesticSpLinks: [],\n                foreignSpLinks: [],\n            },\n            visible: false,\n        };\n    },\n    components: {\n        ShareImage,\n    },\n    computed: {},\n    mounted() {\n        this.getSplink();\n    },\n    methods: {\n        async getSplink() {\n            const { albumId } = this.$route.params;\n            const { id } = this.$route.query;\n            const response = await this.$request({\n                url: '/newAlbum/splink',\n                method: 'GET',\n                params: { id: id || albumId },\n            });\n            const { state, msg, result } = response.data;\n            if (!state) return this.$message.error(msg || '请求失败');\n            this.albumShare = result;\n        },\n        openWin(link) {\n            window.open(link);\n        },\n    },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.album-info {\n    position: relative;\n    height: 220px;\n    margin-top: 20px;\n    width: 100%;\n\n    .el-image {\n        float: left;\n        width: 200px;\n        height: 200px;\n    }\n\n    .info {\n        position: absolute;\n        left: 230px;\n        height: 200px;\n\n        .title {\n            font-size: 28px;\n            font-weight: 600;\n            color: #000000;\n            line-height: 28px;\n        }\n\n        .artist {\n            font-size: 14px;\n            font-weight: 400;\n            color: #909399;\n            line-height: 14px;\n            margin-top: 20px;\n        }\n\n        .el-button {\n            position: absolute;\n            bottom: 0px;\n            left: 0px;\n            box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.3);\n            border-radius: 42px;\n            color: #fff;\n            border: none;\n        }\n    }\n}\n\n.sp-list {\n    margin-top: 20px;\n    background: #ffffff;\n    border-radius: 10px;\n    padding: 40px 30px;\n\n    .title {\n        font-size: 18px;\n        font-weight: 600;\n        color: #000000;\n        line-height: 18px;\n        margin-bottom: 10px;\n\n        span {\n            font-weight: 400;\n            color: #909399;\n            font-size: 12px;\n            margin-left: 20px;\n        }\n    }\n\n    .rows {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        grid-column-gap: 20px;\n\n        .item {\n            padding: 30px;\n            position: relative;\n            background: #f6f5fa;\n            border-radius: 4px;\n            height: 110px;\n            margin-top: 20px;\n\n            .el-image {\n                float: left;\n                width: 50px;\n                height: 50px;\n            }\n\n            .info {\n                position: absolute;\n                left: 100px;\n                height: 50px;\n\n                h3 {\n                    font-size: 16px;\n                    font-weight: 600;\n                    color: #000000;\n                    line-height: 16px;\n                    margin-top: 5px;\n                }\n\n                p {\n                    font-size: 12px;\n                    font-weight: 400;\n                    color: #909399;\n                    line-height: 12px;\n                    margin-top: 12px;\n                }\n            }\n\n            .el-button {\n                position: absolute;\n                right: 30px;\n                top: 35px;\n\n                &.is-disabled {\n                    opacity: 0.5;\n                }\n            }\n        }\n    }\n}\n</style>\n","import mod from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=d9604d2c&scoped=true&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=d9604d2c&prod&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"d9604d2c\",\n  null\n  \n)\n\nexport default component.exports","module.exports = __webpack_public_path__ + \"static/img/share-logo.bd64f03c.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-loader/lib/loaders/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/style-resources-loader/lib/index.js??ref--9-oneOf-1-4!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&id=46455018&prod&lang=scss&\"","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-loader/lib/loaders/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/style-resources-loader/lib/index.js??ref--9-oneOf-1-4!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&id=d9604d2c&prod&lang=scss&scoped=true&\""],"sourceRoot":""}