新建recommend组件,代码部分
注意点,在我们使用ellipsis()函数样式时,超出范围的字不会出现省略号,此时需要在item-info中加入min-width: 0,保证内容不超出外层容器,才会显示省略号
<template>
<div>
<div class="title">
热销推荐
</div>
<ul>
<li class="item" v-for="item of itemList" :key="item.id">
<div class="item-img-wrapper">
<img class="item-img" :src="item.imgUrl" :alt="item.title">
</div>
<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 {
itemList: [{
id: '0001',
imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/cc/cc47164357acbeb5a3.water.jpg_200x200_151f0405.jpg',
title: '杭州云曼温泉',
desc: '1127条评论'
},
{
id: '0002',
imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/cc/cc47164357acbeb5a3.water.jpg_200x200_151f0405.jpg',
title: '杭州云曼温泉',
desc: '1127条评论'
},
{
id: '0003',
imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/cc/cc47164357acbeb5a3.water.jpg_200x200_151f0405.jpg',
title: '杭州云曼温泉',
desc: '1127条评论'
}
]
}
}
}
</script>
<style lang="stylus" scoped>
@import "~styles/mixins.styl"
.title
margin-top: 0.2rem
height: 0.8rem
line-height: 0.8rem
background-color: #eee
.item
overflow: hidden
display: flex
height: 2.4rem
//background-color: red
.item-img
width: 2.2rem
height: 2.2rem
padding: 0.1rem
.item-info
flex: 1
box-sizing: border-box
margin: .2rem
min-width: 0 //保证内容不超出外层容器
//background-color: green
.item-title
margin-top: .2rem
font-size: .32rem
line-height: .44rem
ellipsis()
.item-desc
font-size: .26rem
margin-top: .2rem
ellipsis()
.item-button
margin-top: .2rem
background-color: yellow
border-radius: .1rem
font-size: .26rem
width: 1.2rem
height: .45rem
</style>
最终效果