<template>
  <view class="app-notice-board" v-if="visible">
    <view class="app-notice-icon">
      <tui-icon name="news-fill" :size="24" color="#f54f46"></tui-icon>
    </view>
    <view class="app-notice-scroll">
      <view class="app-notice-text" :class="{ 'app-notice-animation': animation }">{{ text }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import TuiIcon from "@/components/thorui/tui-icon/tui-icon.vue";

defineProps({
  text: {
    type: String,
    required: true,
  },
  visible: {
    type: Boolean,
    default: true,
  },
  animation: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
.app-notice-board {
  width: 100%;
  padding-right: 30rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  height: 60rpx;
  background: #fff8d5;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

.app-notice-icon {
  background: #fff8d5;
  padding-left: 30rpx;
  position: relative;
  z-index: 10;
}

.app-notice-scroll {
  flex: 1;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  color: #f54f46;
}

.app-notice-text {
  -webkit-backface-visibility: hidden;
  transform: translate3d(100%, 0, 0);
}

.app-notice-animation {
  -webkit-animation: app-notice-rolling 12s linear infinite;
  animation: app-notice-rolling 12s linear infinite;
}

@keyframes app-notice-rolling {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(-170%, 0, 0);
  }
}
</style>
