<template>
  <div class="notice-bar-warp" :style="{ height: height }">
    <div class="notice-bar-pos">
      <div class="notice-icon">
        <img :src="getAssetsFile('images/plant/icon5.png')" />
      </div>
      <div class="notice-bar" :style="{ 'line-height': height }">
        <div class="scrolling-text">
          <span>{{ text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted } from 'vue';
defineProps({
  text: {
    type: String,
    required: true,
    default: '这是一条滚动通知消息，请注意查看！',
  },
  height: {
    type: String || Number,
    default: '40px',
  },
});
</script>

<style scoped lang="scss">
.notice-bar-warp {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  .notice-bar-pos {
    display: inline-flex;
    width: 100%;
  }
  .notice-icon {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    img {
      width: 80%;
      height: 80%;
      margin: 10% 0;
    }
  }
}
.notice-bar {
  display: inline-block;
  overflow: hidden;
  width: calc(100% - 30px);
}

.scrolling-text {
  white-space: nowrap;
  animation: scroll-left 10s linear infinite;
  color: #fff;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
