十一 ：首页 运动户外-头部开发

目录结构

banner.vue

<template>
        <view class="banner">
                <image class="banner-img" src="../../static/img/run-banner.png" mode=""></image>
                <icons></icons>
        </view>

</template>

<script>
        import icons from './icons.vue'
        export default{
                components:{
                        icons
                }
        }
</script>

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

icons.vue

 <template>
        <view class="icons">
                <view class="icon-item">
                        <image class="icon-img" src="../../static/img/run.png" mode=""></image>
                        <text class="f-color">跑步鞋</text>
                </view>
                <view class="icon-item">
                        <image class="icon-img" src="../../static/img/run.png" mode=""></image>
                        <text class="f-color">跑步鞋</text>
                </view>
                <view class="icon-item">
                        <image class="icon-img" src="../../static/img/run.png" mode=""></image>
                        <text class="f-color">跑步鞋</text>
                </view>
                <view class="icon-item">
                        <image class="icon-img" src="../../static/img/run.png" mode=""></image>
                        <text class="f-color">跑步鞋</text>
                </view>
                <view class="icon-item">
                        <image class="icon-img" src="../../static/img/run.png" mode=""></image>
                        <text class="f-color">跑步鞋</text>
                </view>
                <view class="icon-item">
                        <image class="icon-img" src="../../static/img/run.png" mode=""></image>
                        <text class="f-color">跑步鞋</text>
                </view>
                <view class="icon-item">
                        <image class="icon-img" src="../../static/img/run.png" mode=""></image>
                        <text class="f-color">跑步鞋</text>
                </view>
                <view class="icon-item">
                        <image class="icon-img" src="../../static/img/run.png" mode=""></image>
                        <text class="f-color">跑步鞋</text>
                </view>


        </view>
</template>

<script>
</script>

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