kxmall-ui/kxmall-app-ui/pages/index/components/announcement.vue

<template>
  <view>
    <view v-if="storage" class="margin-tb-sm flex align-center bg-white flex padding-top-xs padding-bottom-sm"
      style="width: 1000px;">
      <image src="../../../static/index/title.png" mode="aspectFit" class="bg-white"
        style="width: 184rpx;height: 43rpx;z-index: 99;padding:0 30rpx;"></image>
      <view style="width: 650px;color: #999999;font: 26rpx;" class="padding-left-sm margin-left-sm newtimes text-df">
        {{newTimesContent}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'Announcement',
    props: ['storage', 'newTimesContent']
  }
</script>
<style scoped lang="scss">
  /* 新鲜时报 */
  .newtimes {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
  }

  @keyframes marquee {
    0% {
      -webkit-transform: translateX(184rpx);
    }

    100% {
      -webkit-transform: translateX(-100%);
    }
  }
</style>