<template>
  <div class="notice d-flex">
    <dv-border-box-12 style="width: 10%;">
        <p class="title">通知</p>

        <dv-decoration-1 class="desc" />
    </dv-border-box-12>
    <dv-border-box-1 class="flex-1 ml-2">
      <div class="pt-5 pr-5 pb-5 pl-5 d-flex ai-center" style="height: 100%;width: 96%;overflow: hidden;margin: auto;">
        <div class="word-scroll">
          <span v-for="(item, index) in notice" :key="item.id">
            {{index+1}}. {{ item.shifoujinji == 1 ? '收到紧急调令：' : '' }}{{item.content}}【{{item.created_at}}】
          </span>
        </div>
      </div>
    </dv-border-box-1>
  </div>
</template>

<script>
import { index } from "@/api/system/baseForm";
export default {
  data() {
    return {
      notice: [],
    }
  },
  methods: {
    async getNotice () {
      const res = await index({
        table_name: "notices",
        page: 1,
        page_size: 999,
        filter: [
          {
            key: "created_at",
            op: "like",
            value: this.$moment().format('YYYY-MM-DD')
          }
        ]
      },false)
      console.log(res)
      this.notice = res.data;
    }
  },
  computed: {},
  created() {
    this.getNotice()
  }
}
</script>

<style scoped lang="scss">
.notice {
  height: 120px;
  width: 100%;
  .title {
    color: #000;
    text-shadow: 1px 0 #eee ,1px 1px #eee ,0 1px #eee ,-1px 0 #eee, 0 -1px #eee,-1px -1px #eee;
    line-height: 120px;
    font-size: 30px;
    text-align: center;
    letter-spacing: 10px;
  }
  .desc {
    width: 40px;
    height: 20px;

    position: absolute;
    top: 10%;
    right: 10%;
  }
}

.word-scroll {
  font-size: 25px;
  word-break: keep-all;
  white-space: nowrap;
  text-shadow: 1px 1px #fff8;
  animation: word-scroll 24s infinite linear;
}
@keyframes word-scroll {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(1650px);
  }
}
</style>
