update

src/components/XNoticeBar.vue

@@ -0,0 +1,60 @@
+<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>