【vue】角标

template

	<div class="msg">
		<img  src="../../static/fx.png" />
		<div class="alarm">
		500
		</div>
	</div>

css

<style  scoped>
	.msg {
		position: relative;

	}
	.msg img {
		width: 42px;
		height: 42px;
	}
	.alarm {
		position: absolute;
		color: white;
		font-size: 17px;
		background-color: red;
		min-height: 24px;
		min-width:24px;
		line-height: 24px;
		right:-70%;
		top: -12px;
		text-align: center;
		-webkit-border-radius: 24px;
		border-radius: 24px;
		padding:2px;
	}

</style>

效果：