热销推荐效果:
新建Recommend.vue:
<template>
<div>
<div class="title">热销推荐</div>
<ul>
<router-link
tag="li"
class="item border-bottom"
v-for="item of recommendList"
:key="item.id"
:to="'/detail/' + 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>
</router-link>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeRecommend',
data () {
return {
recommendList: [{
'id': '0001',
'imgUrl': 'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_140x140_80f63803.jpg',
'title': '故宫',
'desc': '东方宫殿建筑代表,世界宫殿建筑典范'
}, {
'id': '0002',
'imgUrl': 'http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_140x140_abb362a7.jpg',
'title': '南山滑雪场',
'desc': '北京专业级滑雪圣地'
}, {
'id': '0003',
'imgUrl': 'http://img1.qunarzz.com/sight/p0/1501/f4/f467729126949c3a.water.jpg_140x140_ef235b1c.jpg',
'title': '天安门广场',
'desc': '我爱北京天安门,天安门上太阳升'
}, {
'id': '0004',
'imgUrl': 'http://img1.qunarzz.com/sight/p0/1501/40/40b2b6c951b28fdd.water.jpg_140x140_1c863e5c.jpg',
'title': '水立方',
'desc': '中国的荣耀,阳光下的晶莹水滴'
}, {
'id': '0005',
'imgUrl': 'http://img1.qunarzz.com/sight/p0/201308/23/b283071686e64dfec8d65eac.jpg_140x140_8c5a7c49.jpg',
'title': '温都水城养生馆',
'desc': '各种亚热带植物掩映其间仿佛置身热带雨林'
}]
}
}
}
</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
padding: .1rem
min-width: 0
.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 .2rem
border-radius: .06rem
color: #fff
</style>
使用1像素边框:
周末游效果:
新建Weekend.vue:
<template>
<div>
<div class="title">周末去哪儿</div>
<ul>
<li
class="item border-bottom"
v-for="item of weekendList"
:key="item.id"
>
<div class="item-img-wrapper">
<img class="item-img" :src="item.imgUrl" />
</div>
<div class="item-info">
<p class="item-title">{{item.title}}</p>
<p class="item-desc">{{item.desc}}</p>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeWeekend',
data () {
return {
weekendList: [{
'id': '0001',
'imgUrl': 'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
'title': '北京温泉排行榜',
'desc': '细数北京温泉,温暖你的冬天'
}, {
'id': '0002',
'imgUrl': 'http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg',
'title': '北京必游TOP10',
'desc': '来北京必去的景点非这些地方莫属'
}, {
'id': '0003',
'imgUrl': 'http://img1.qunarzz.com/sight/source/1505/9e/21df651e19af5d.jpg_r_640x214_3ea5bb38.jpg',
'title': '寻找北京的皇城范儿',
'desc': '数百年的宫廷庙宇,至今依旧威严霸气'
}, {
'id': '0004',
'imgUrl': 'http://img1.qunarzz.com/sight/source/1505/ce/bc89bc2f0e33ea.jpg_r_640x214_3e408453.jpg',
'title': '学生最爱的博物馆',
'desc': '周末干嘛?北京很多博物馆已经免费开放啦'
}, {
'id': '0005',
'imgUrl': 'http://img1.qunarzz.com/sight/source/1505/b2/fde1bfcd057a52.jpg_r_640x214_bbf3fa44.jpg',
'title': '儿童剧场,孩子的乐园',
'desc': '带宝贝观看演出,近距离体验艺术的无穷魅力'
}]
}
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
line-height: .8rem
background: #eee
text-indent: .2rem
.item-img-wrapper
overflow: hidden
height: 0
padding-bottom: 37.09%
.item-img
width: 100%
.item-info
padding: .1rem
.item-title
line-height: .54rem
font-size: .32rem
ellipsis()
.item-desc
line-height: .4rem
color: #ccc
ellipsis()
</style>