<template>
      <div class="notice-card-wrapper">
            <div class="header">
                  <div class="title">
                       
                <!-- 系统公告 -->
                        <div class="message">
                              <div class="inner-container">
                                    <span v-html="notice"></span>
                                  </div>
                            </div>
                     
            </div>
                </div>
          </div>
</template>

<script>
    export default {
        name: 'NoticeBar',
        components: {},
        data() {
            return {
                // notice: '<span style="color:red;">(当日待处理T+1对账异常账5条，请尽快处理！)</span> / <span style="color:green;">(当日无待处理T+1对账异常账！)</span>'
                notice: '<span style="color:green;">当日无待处理T+1对账异常账！</span>'
            }
        },
        computed: {},
        created() {},
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .notice-card-wrapper {
        .inner-container {
            margin-left: 100%;// 把文字弄出可见区域
            width: 200%;
            animation: myMove 10s linear infinite; // 重点，定义动画
            animation-fill-mode: forwards;
        }

        /*文字无缝滚动*/
        @keyframes myMove {
            0% {
                transform: translateX(0);
            }

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