目录结构
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>