<template>
  <!-- z-index: 4 -->
  <div id="notice">
    <div class="icon icon1"></div>
    <div class="txt">
      <span>
        【雨量分析】溪雨量站2实时降雨量：0.0mm，近一小时降雨量：0.0mm，近三小时降雨量：0.0mm，近二十四降雨量：0.0mm
      </span>
    </div>
    <div class="icon icon2"></div>
  </div>
</template>

<script>
export default {
  name: 'Notice',
  data () {
    return {
      show: false
    }
  }
}
</script>

<style lang="scss" scoped>
// 文字滚动
@keyframes scroll {
  0% {
    transform: translateX(886px);
  }
  100% {
    transform: translateX(-200%);
  }
}
// ------------------------------------------------------------
#notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 510px;
  z-index: 2;
  width: 900px;
  height: 50px;
  padding: 0 15px;
  background-color: rgba(3, 35, 79, 0.7);
  .icon {
    width: 24px;
    height: 16px;
    background: url("~@/assets/images/home/notice_icon.png") no-repeat top left /
      100% 100%;
    &.icon1 {
      margin-right: 25px;
    }
    &.icon2 {
      margin-left: 25px;
    }
  }
  .txt {
    display: flex;
    align-items: center;
    flex: 1;
    height: 40px;
    line-height: 40px;
    color: #cfe3e6;
    font-size: 16px;
    overflow: hidden;
    span {
      white-space: nowrap;
      animation: scroll 40s linear 0s infinite;
    }
  }
}
</style>
