{"version":3,"sources":["webpack:///./src/views/main-components/text-marquee.vue?2012","webpack:///src/views/main-components/text-marquee.vue","webpack:///./src/views/main-components/text-marquee.vue?d4b8","webpack:///./src/views/main-components/text-marquee.vue","webpack:///./src/views/main-components/text-marquee.vue?cec1"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_l","item","index","_v","_s","staticRenderFns","component"],"mappings":"kJAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAACF,EAAG,MAAM,CAACE,YAAY,UAAU,CAACF,EAAG,IAAI,CAACE,YAAY,WAAWN,EAAIO,GAAIP,EAAS,OAAE,SAASQ,EAAKC,GAAO,OAAOL,EAAG,OAAO,CAACE,YAAY,aAAa,CAACN,EAAIU,GAAGV,EAAIW,GAAGH,SAAW,GAAGJ,EAAG,IAAI,CAACE,YAAY,QAAQN,EAAIO,GAAIP,EAAS,OAAE,SAASQ,EAAKC,GAAO,OAAOL,EAAG,OAAO,CAACE,YAAY,aAAa,CAACN,EAAIU,GAAGV,EAAIW,GAAGH,SAAW,KAAKJ,EAAG,IAAI,CAACE,YAAY,YAAYN,EAAIO,GAAIP,EAAS,OAAE,SAASQ,EAAKC,GAAO,OAAOL,EAAG,OAAO,CAACE,YAAY,aAAa,CAACN,EAAIU,GAAGV,EAAIW,GAAGH,SAAW,MAC9kBI,EAAkB,G,0gCCmBtB,OACE,MAAF,UACE,KAFF,WAGI,MAAJ,CACM,MAAN,KACM,KAAN,KAGE,QARF,WAQI,IAAJ,OAEA,yBACM,EAAN,OACM,aAAN,KACA,MAGE,QAhBF,WAgBI,IAAI,EAAR,IACA,YADI,IACE,IAAN,wBAAQ,IAAR,UACQ,KAAR,aAFA,SAAM,EAAN,aAAM,EAAN,MAKE,QAAF,CACI,KADJ,WAEM,IAAN,sDAEA,kDAEM,KAAN,MAAM,CACA,IAAN,oCAGA,IAEM,KAAN,8BACQ,GAAR,GAEA,OACU,EAAV,IAEQ,EAAR,wCACA,OAGE,cA3CF,WA6CI,cAAJ,cCjEqW,I,wBCQjWC,EAAY,eACd,EACAd,EACAa,GACA,EACA,KACA,WACA,MAIa,aAAAC,E,2CCnBf,yBAA6lB,EAAG","file":"js/chunk-0b9e17c3.f2acaaa6.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"marquee-wrap\"},[_c('div',{staticClass:\"scroll\"},[_c('p',{staticClass:\"marquee\"},_vm._l((_vm.lists),function(item,index){return _c('span',{staticClass:\"text_item\"},[_vm._v(_vm._s(item))])}),0),_c('p',{staticClass:\"copy\"},_vm._l((_vm.lists),function(item,index){return _c('span',{staticClass:\"text_item\"},[_vm._v(_vm._s(item))])}),0)]),_c('p',{staticClass:\"getWidth\"},_vm._l((_vm.lists),function(item,index){return _c('span',{staticClass:\"text_item\"},[_vm._v(_vm._s(item))])}),0)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div class=\"marquee-wrap\">\n        <!-- 滚动内容 -->\n        <div class=\"scroll\">\n            <p class=\"marquee\">\n                <span v-for=\"(item,index) in lists\" class=\"text_item\">{{ item }}</span>\n            </p>\n            <!-- 文字副本 -->\n            <p class=\"copy\">\n                <span v-for=\"(item,index) in lists\" class=\"text_item\">{{ item }}</span>\n            </p>\n        </div>\n        <!-- 为了计算总文本宽度，通过css在页面中隐藏 -->\n        <p class=\"getWidth\">\n            <span v-for=\"(item,index) in lists\" class=\"text_item\">{{ item }}</span>\n        </p>\n    </div>\n</template>\n\n<script>\n    export default {\n        props: ['lists'], // 父组件传过来的数组\n        data () {\n            return {\n                timer: null,\n                text: ''\n            }\n        },\n        created () {\n            // 进入页面等一秒才开始滑动\n            let timer = setTimeout(() => {\n                this.move()\n                clearTimeout(timer)\n            }, 1000)\n        },\n        // 把父组件传入的arr转化成字符串\n        mounted () {\n            for (let item of this.lists) {\n                this.text += ' ' + item\n            }\n        },\n        methods: {\n            move () {\n                let maxWidth = document.querySelector('.marquee-wrap').clientWidth\n                // 获取文字text 的计算后宽度 （由于overflow的存在，直接获取不到，需要独立的node计算）\n                let width = document.querySelector('.getWidth').scrollWidth\n                // 如果文本内容的宽度小于页面宽度，则表示文字小于等于一行，则不需要滚动\n                if (width <= maxWidth) return\n                let scroll = document.querySelector('.scroll')\n                // let copy = document.querySelector('.copy')\n                // copy.innerText = this.text // 文字副本填充\n                let distance = 0 // 位移距离\n                // 设置位移\n                this.timer = setInterval(() => {\n                    distance -= 1\n                    // 如果位移超过文字宽度，则回到起点\n                    if (-distance >= width) {\n                        distance = 52 // 距离必须与marquee的margin宽度相同\n                    }\n                    scroll.style.transform = 'translateX(' + distance + 'px)'\n                }, 20)\n            }\n        },\n        beforeDestroy () {\n            // 清除计时器\n            clearInterval(this.timer)\n        }\n    }\n</script>\n<style scoped lang='less'>\n    .marquee-wrap {\n        width: 100%;\n        overflow: hidden;\n        position: relative;\n        .scroll {\n            display: flex;\n            p{\n                word-break:keep-all; // 不换行\n                white-space:nowrap;\n                /* 设置前后间隔 */\n                &.marquee {\n                    margin-right: 52px;\n                }\n            }\n        }\n        /* 仅为了获取宽度，故隐藏掉 */\n        .getWidth {\n            word-break:keep-all; // 不换行\n            white-space:nowrap;\n            position: absolute;\n            opacity: 0;\n            top: 0;\n        }\n\n\n        .text_item{\n            color: #666666;\n            font-size: 14px;\n            padding-right: 52px;\n\n            &:before{\n                content: '';\n                display: inline-block;\n                width: 5px;\n                height: 5px;\n                border-radius: 50%;\n                background: #D8D8D8;\n                line-height: 1;\n                vertical-align: middle;\n                margin-right: 8px;\n            }\n        }\n    }\n\n</style>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./text-marquee.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./text-marquee.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./text-marquee.vue?vue&type=template&id=26c01c3e&scoped=true&\"\nimport script from \"./text-marquee.vue?vue&type=script&lang=js&\"\nexport * from \"./text-marquee.vue?vue&type=script&lang=js&\"\nimport style0 from \"./text-marquee.vue?vue&type=style&index=0&id=26c01c3e&scoped=true&lang=less&\"\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  \"26c01c3e\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./text-marquee.vue?vue&type=style&index=0&id=26c01c3e&scoped=true&lang=less&\"; export default mod; export * from \"-!../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./text-marquee.vue?vue&type=style&index=0&id=26c01c3e&scoped=true&lang=less&\""],"sourceRoot":""}