运动户外:
- 顶部滑动导航
- 封装: 否
- 头图
- 名称: Banner
- 封装: 是
- 宫格
- 名称: Icons
- 封装: 是
运动户外 头部Banner组件 和 宫格 组件开发
Banner 组件
- Banner.vue
<template>
<view class="banner">
<image class="banner-img" src="../../static/img/b3.jpg" mode=""></image>
</view>
</template>
<script>
</script>
<style lang="scss">
.banner{
width: 100%;
height: 300rpx;
}
.banner-img{
width: 100%;
height: 300rpx;
}
</style>
Icons 组件
- Icons.vue
<template>
<!-- 宫格组件 -->
<view class="icons">
<view class="icons-item">
<image class="icons-img" src="../../static/logo.png" mode=""></image>
<text class="icons-name f-color">运动户外</text>
</view>
<view class="icons-item">
<image class="icons-img" src="../../static/logo.png" mode=""></image>
<text class="icons-name f-color">运动户外</text>
</view>
<view class="icons-item">
<image class="icons-img" src="../../static/logo.png" mode=""></image>
<text class="icons-name f-color">运动户外</text>
</view>
<view class="icons-item">
<image class="icons-img" src="../../static/logo.png" mode=""></image>
<text class="icons-name f-color">运动户外</text>
</view>
<view class="icons-item">
<image class="icons-img" src="../../static/logo.png" mode=""></image>
<text class="icons-name f-color">运动户外</text>
</view>
<view class="icons-item">
<image class="icons-img" src="../../static/logo.png" mode=""></image>
<text class="icons-name f-color">运动户外</text>
</view>
<view class="icons-item">
<image class="icons-img" src="../../static/logo.png" mode=""></image>
<text class="icons-name f-color">运动户外</text>
</view>
<view class="icons-item">
<image class="icons-img" src="../../static/logo.png" mode=""></image>
<text class="icons-name f-color">运动户外</text>
</view>
</view>
</template>
<script>
</script>
<style lang="scss">
.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>
Index
- Index.vue
<template>
<view class="content">
<view class="index">
<!-- <IndexSwiper></IndexSwiper>
<Recommend></Recommend>
<Card cardTitle='猜你喜欢'></Card>
<CommodityList></CommodityList> -->
<Card cardTitle='运动户外'></Card>
<Banner></Banner>
<Icons></Icons>
<Card cardTitle='商品店铺'></Card>
</view>
<view class="f-active-color">
文字
</view>
<view class="iconfont icon-xiaoxi"></view>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
import IndexSwiper from '@/components/index/indexSwiper.vue';//引入
import Recommend from '@/components/index/Recommend.vue';//引入
import Card from '@/components/common/Card.vue';//引入
import CommodityList from '@/components/common/CommodityList.vue';//引入
import Banner from '@/components/index/Banner.vue';//引入
import Icons from '@/components/index/Icons.vue';//引入
export default {
data() {
return {
title: 'Hello'
}
},
components:{
IndexSwiper, //注册
Recommend,
Card,
CommodityList,
Banner,
Icons
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.index{
width: 100%;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>