<template>
  <div class="ad-text">
    <a v-if="advertText.link" :href="advertText.link">
      <div class="content" :style="{animationDuration: `${(advertText.words.length + 30) / 5}s`}">{{ advertText.words }}</div>
    </a>
    <a v-else href="javascript:;">
      <div class="content" :style="{animationDuration: `${(advertText.words.length + 30) / 5}s`}">{{ advertText.words }}</div>
    </a>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
 // :style="{animationDuration: `${advertText.words.length / 50}s`}"
export default {
  name: 'advert-text',
  computed: {
    ...mapGetters({
      advertText: 'advertText'
    })
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.ad-text {
  width: 100%;
  height: 0.3rem;
  line-height: 0.3rem;
  background: #ffe9bd;
  font-size: 0.14rem;
	overflow:hidden;
  a {
    display: block;
    height: 100%;
    color: #7c400c;
  }
  .content{
    white-space:nowrap;
    position: absolute;
    animation: move linear 10s infinite;
    transform: translateX(120vw);
  }
  @keyframes move{
    from{
      transform:translateX(120vw);
    }
    to{
      transform:translateX(-100%);
    }
  }
}

</style>
