【首页】运动户外头部开发

一、【首页】运动户外头部开发

1.1 完成后的效果图：

1.2 在components/index目录中创建了Banner.vue和Icons.vue组件

1.3 组件说明Banner.vue就是头图的展示。Icons.vue就是大家看到的宫格

1.4 Banner.vue代码如下：

<template>
	<view class='banner'>
		<image class='banner-img' src="../../static/image/banner1.jpg" mode=""></image>
	</view>
</template>

<script>
</script>

<style scoped>
	.banner{
		width: 100%;
		height: 300rpx;
	}
	.banner-img{
		width: 100%;
		height: 300rpx;
	}
</style>

1.5 Icos.vue代码如下：

<template>
	<view class='icons'>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/image/icons1.png" mode=""></image>
			<text class='.f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/image/icons2.png" mode=""></image>
			<text class='.f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/image/icons3.png" mode=""></image>
			<text class='.f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/image/icons4.png" mode=""></image>
			<text class='.f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/image/icons5.png" mode=""></image>
			<text class='.f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/image/icons6.png" mode=""></image>
			<text class='.f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/image/icons7.png" mode=""></image>
			<text class='.f-color'>运动户外</text>
		</view>
		<view class='icons-item'>
			<image class='icons-img' src="../../static/image/icons8.png" mode=""></image>
			<text class='.f-color'>运动户外</text>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
	.icons{
		display: flex;
		flex-wrap: wrap;
	}
	.icons-item{
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
	}
	.icons-img{
		width: 110rpx;
		height: 110rpx;
	}
</style>