上一篇,我们实现了图标轮播区域,这里,我们将要实现,热销推荐组件部分。
当然先去,新建一个单独的分支,pull 下来,在新分支里开发。
组件大概的样子,如下。
开始啦。
首先在home/components 新建一个文件 Recommend.vue
Recommend.vue 代码如下
<template>
<div>hello</div>
</template>
<script>
export default {
name: 'HomeRecommend'
}
</script>
<style lang="stylus" scoped>
</style>
Home.vue 代码如下
<template>
<div>
<home-header></home-header>
<home-swiper></home-swiper>
<home-icons></home-icons>
<home-recommend></home-recommend>
</div>
</template>
<script>
import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeIcons from './components/Icons.vue'
import HomeRecommend from './components/Recommend.vue'
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend
}
}
</script>
<style>
</style>
下面,就直接贴代码吧。其中item 下 min-width 是配合下面ellipsis() 的,因为若没有min-width , ellipsis() 在这儿就不起作用。
<template>
<div>
<div class="title">热销推荐</div>
<ul>
<li class="item border-bottom">
<img class="item-img" src="http://imgs.qunarzz.com/ftejia/1806/f9/8a23740f5a6f86.jpg" />
<div class="item-info">
<p class="item-title">地名</p>
<p class="item-desc">地名的一个简单介绍sdkbksksjbksbksdjhskksjbkbvdkbk啊啊啊啊啊啊啊啊</p>
<button class="item-button">查看详情</button>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeRecommend'
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
margin-top: .2rem
line-height: .8rem
background: #eee
text-indent: .2rem
.item
overflow: hidden
display: flex
height: 1.9rem
.item-img
width: 1.7rem
height: 1.7rem
padding: .1rem
.item-info
flex: 1
min-width: 0
padding: .1rem
.item-title
line-height: .54rem
font-size: .32rem
ellipsis()
.item-desc
line-height: .4rem
color: #ccc
ellipsis()
.item-button
line-height: .44rem
margin-top: .16rem
background: #ff9300
padding: 0 .1rem
border-radius: .06rem
color: #fff
</style>
再把数据部分提取出来。如下。
<template>
<div>
<div class="title">热销推荐</div>
<ul>
<li class="item border-bottom" v-for="item of recommendList" :key="item.id">
<img class="item-img" :src='item.imgUrl' />
<div class="item-info">
<p class="item-title">{{item.title}}</p>
<p class="item-desc">{{item.desc}}</p>
<button class="item-button">查看详情</button>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeRecommend',
data: function () {
return {
recommendList: [{
id: '0001',
imgUrl: 'http://imgs.qunarzz.com/ftejia/1806/f9/8a23740f5a6f86.jpg',
title: '地名1',
desc: '地名的一个简单介绍sdkbksksjbksbksdjhskksjbkbvdkbk啊啊啊啊啊啊啊啊'
},{
id: '0002',
imgUrl: 'http://imgs.qunarzz.com/ftejia/1806/f9/8a23740f5a6f86.jpg',
title: '地名2',
desc: '地名的一个简单介绍sdkbksksjbksbksdjhskksjbkbvdkbk啊啊啊啊啊啊啊啊'
},{
id: '0003',
imgUrl: 'http://imgs.qunarzz.com/ftejia/1806/f9/8a23740f5a6f86.jpg',
title: '地名3',
desc: '地名的一个简单介绍sdkbksksjbksbksdjhskksjbkbvdkbk啊啊啊啊啊啊啊啊'
}]
}
}
}
</script>
Done!