<script setup>
import {ref, onMounted} from "vue";
import warn from '../static/icons/warn.png';

const XNoticeBox = ref();
const Context = ref();
const roll = ref(false);

onMounted(() => {
    if (
        Context.value.$el.clientWidth
        >
        XNoticeBox.value.$el.clientWidth
    ) {
        roll.value = true;
    }
});
</script>

<template>
    <view ref="XNoticeBox" class="x-notice-box">
        <view ref="Context" :class="['context', roll ? 'roll' : '']">
            <image class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
            <text class="!whitespace-nowrap flex-shrink-0">提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈</text>
        </view>
    </view>
</template>

<style scoped lang="scss">
.x-notice-box {
    padding: 18rpx 24rpx;
    background-color: #FFF7E8;
}

.context {
    color: rgb(255, 87, 34);
    font-size: 24rpx;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 18rpx;
}

.roll {
    animation: 10s Roll linear infinite forwards;
}

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