interface Props {
  width: number | string;
  text: string;
  ...
}

<div class="box" :style="{ width }">
    <div class="scroll-wrap">
      <div
        class="scroll-item"
        :style="{
          color: color,
          fontWeight: fontWeight,
          fontSize: `${fontSize}rpx`,
          animationDuration: `${2 + text.length / 10}s`
        }"
      >
        {{ text }}
      </div>
    </div>
  </div>

.box {
  .scroll-wrap {
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
  }
  .scroll-item {
    animation: scroll linear alternate infinite;
    float: left;
  }
}
 
@keyframes scroll {
  0% {
    margin-left: 0;
    transform: translateX(0);
  }
 
  10% {
    margin-left: 0;
    transform: translateX(0);
  }
 
  90% {
    margin-left: 100%;
    transform: translateX(-100%);
  }
 
  100% {
    margin-left: 100%;
    transform: translateX(-100%);
  }
}