<template>
	<div class="icons">
		<div class="icon">
			<div class="icon-img">
				<img src="//img1.qunarzz.com/piao/fusion/1803/f5/a963333e1fa802.png" class="icon-img-content">
				<p>热门景点</p>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		data: function () {
			return {
			
			}
		},
	};
</script>
<style lang="stylus" scoped>
	.icons
		overflow:hidden;
		width:100%;
		height: 0;
		padding-bottom: 50%;
		background-color:#ccc;
		.icon
			position:relative;
			overflow: hidden;
			width: 25%;
			height: 0;
			padding-bottom: 25%;
			background-color: #f00;
			float: left;
			.icon-img
				position: absolute;
				top: 0;
				left:0;
				right:0;
				bottom: .44rem
				background:yellow;
				box-sizing: border-box;
				padding: .1rem;
				.icon-img-content
					height: 100%;
					margin: 0 auto;
					display: block
				
</style>

老师您好！我是一行一行照着您的视频敲得，但为什么显示结果不一样？我的文字跑到上面去了，我很疑惑，希望您可以尽快的解答