xl-mobile/src/components/XNoticeBar.vue

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

const STATUS = {
    error: {
        bg: 'x-notice-box-error',
        context: 'context-error'
    },
    success: {
        bg: 'x-notice-box-success',
        context: 'context-success'
    },
};

const {text, status, tile, textColor} = defineProps({
    text: {
        type: String,
        default: '提示：请在规定时间内，按要求提交回填1。以免影响收益。哈哈哈哈哈哈哈哈哈哈'
    },
    textColor: {
        type: String,
        default: '#000'
    },
    status: {
        type: String,
        default: 'error'
    },
    tile: {
        type: Boolean,
        default: false,
    }
});

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

watch(
    () => text,
    () => {
        if (!tile) {
            if (
                Context.value.$el.clientWidth
                >
                XNoticeBox.value.$el.clientWidth
            ) {
                roll.value = true;
            }
        }
    },
    {deep: true}
)

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

<template>
    <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
        <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]"
              :style="{alignItems: tile ? 'start' : 'center'}">
            <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
            <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
            <text v-if="!tile" class="!whitespace-nowrap flex-shrink-0" :style="{color: textColor}"
                  v-html="text"></text>
            <text v-else :style="{color: textColor}" v-html="text">
            </text>
        </view>
    </view>
</template>

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

.x-notice-box-success {
    background-color: #E8F3FF;
}

.context-error {
    color: rgb(255, 87, 34);
}

.context-success {
    color: rgb(29, 33, 41);
}

.x-notice-box {
    padding: 18rpx 24rpx;
    width: 100%;
    overflow: hidden;
}

.context {
    font-size: 24rpx;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    display: inline-flex;
    gap: 18rpx;
}

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

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