vue 跑马灯 代码

<template>
  <div>
        <div class="contentBoxBTc">
            <div class="marquee-scroll" :style="\'width: \'+msgWidth+\'rem;\'">
                    <div  class="marquee-li" :style="\'animation-duration:\'+msgWidth*2.6+\'s;\'">{{msg}}</div>
                    <!-- <div  class="marquee-li" :style="\'animation-delay:\'+msgWidth+\'s;animation-duration:\'+msgWidth*2+\'s;\'">{{msg}}</div> -->
                    <!-- ***在国海APP里，两个都用marquee-li的absolue字号会变形，是浏览器问题**** -->
                    <div  class="marquee-lib" :style="\'animation-delay:\'+msgWidth*1.3+\'s;animation-duration:\'+msgWidth*2.6+\'s;\'">{{msg}}</div>
            </div>
        </div> 
  </div>
</template>

<script>


export default {
  name: \'index\',
    data(){
        return {
            msgWidth:0,
            msg:\'\'
        }
    },
  components: {
    
  },
    methods:{
        setMsg(){
            
            this.msg=\'本年获得的积分，将于2020-12-31自动过期，请尽快使用喔~积分消耗优先使用即将到期积分。\';
            this.msgWidth=this.msg.length*0.11
        }
    },
    mounted(){
        this.setMsg()
    }
}
</script>
<style lang="scss" scoped>
    .contentBoxBTC{
      position: fixed;
      left:0;
      top:0;
      width: 100%;
      z-index: 20;
      background:rgba(29,34,40,1);
    }
    @keyframes marquee {
        0% {
           left: 100%;
        }
        100% {
            left: -100%;
        }
    }
    .marquee-scroll{
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        .marquee-li{
            width:100%;
            position: absolute;
            left:100%;
            top: 0;
            height: 100%;
            -webkit-animation: marquee  linear infinite;
        animation: marquee  linear infinite;
        }
    }        
    @keyframes marqueeb {
        0% {
           margin-left: 100%;
        }
        100% {
            margin-left: -100%;
        }
    }
    
    .marquee-lib{
            width:100%;
            margin-left:100%;
            height: 100%;
            -webkit-animation: marqueeb  linear infinite;
        animation: marqueeb  linear infinite;
        }
    
</style>