sign/components/notice/notice.vue

<template>
	<view v-if="props.show" class="notice" :style="{'background-color': props.bgColor, 'color':props.color}">
		<text>{{props.text}}</text>
	</view>
</template>

<script setup>
	const props = defineProps({
		show: Boolean,
		text: String,
		bgColor: {
			type: String,
			default: '#219EFF'
		},
		color: {
			type: String,
			default: '#ffffff'
		},
	});
</script>

<style lang="scss" scoped>
	.notice {
		width: 100vw;
		height: 100rpx;
		line-height: 100rpx;
		position: fixed;
		top: -100rpx;
		text-align: center;
		z-index: 9999;
		transition: all 0.5s;
		animation: go 2s ease;
	}

	@keyframes go {
		0% {
			top: -100rpx;
		}

		30% {
			top: 0;
		}

		70% {
			top: 0;
		}

		100% {
			top: -100rpx;
		}
	}
</style>