这个图文列表是上图下文字的形式,只是样式上的不同
<template>
<div>
<div class="title">周末去哪儿</div>
<ul>
<li
class="item border-bottom"
v-for="item of recomendList"
:key="item.id"
>
<div class="item-img-wapper">
<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 {
recomendList: [{
id: '0001',
imgUrl: 'http://img1.qunarzz.com/sight/source/1511/8f/bf3a40e4afcf29.jpg_r_640x214_90225212.jpg',
title: '厦门娱乐万岁',
desc: '谁说来厦门就要去鼓浪屿?其实不登鼓浪屿也有新玩法,去探寻你不知道的海底世界'
}, {
id: '0002',
imgUrl: 'http://img1.qunarzz.com/sight/source/1711/15/1cdd5ee885686b.jpg_r_640x214_46768064.jpg',
title: '厦门娱乐万岁',
desc: '谁说来厦门就要去鼓浪屿?其实不登鼓浪屿也有新玩法,去探寻你不知道的海底世界'
}, {
id: '0003',
imgUrl: 'http://img1.qunarzz.com/sight/source/1505/b3/671f666cc7845a.jpg_r_640x214_f977f30c.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-img-wapper
overflow: hidden
height: 0
padding-bottom: 33.9%
.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>