warst/warst-h5/pages/home/msgTips.vue

<template>
	<view
		class="msg-tips"
		@click="$u.route('pages/com/msgNotification/index')"
	>
		<u-icon color="#fff" size="14" name="bell-fill"></u-icon>
		<view class="red-spot"></view>
	</view>
</template>

<script>
export default {
	name: 'msgTips',
};
</script>

<style scoped lang="scss">
.msg-tips {
	position: relative;
	padding: 10rpx;
	border-radius: 50%;
	background-color: #436ff6;

	.red-spot {
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #f96464;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
	}
}
</style>