6.7.4旅游网站小项目练习之首页推荐区组件代码

6.7.4旅游网站小项目练习之首页推荐区组件代码

<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 () {return {RecommendList: [{id: '0001',imgUrl: '//img1.qunarzz/sight/p0/1508/96/b195d4ecbd48b7fc3ae049106f15c7ef.water.jpg_256x160_92934f01.jpg',title: '泰山',desc: '会当凌绝顶，一览纵山小'},{id: '0002',imgUrl: '//img1.qunarzz/sight/p0/1902/da/daee1d3f534baec8a3.water.jpg_256x160_17c127af.jpg',title: '台儿庄古城',desc: '被誉为“中华民族扬威不屈之地”'},{id: '0003',imgUrl: '//img1.qunarzz/sight/p0/1606/23/237ad24ea960b2f290.water.jpg_256x160_23b4be66.jpg',title: '趵突泉',desc: '康熙皇帝赞誉的天下名泉'},{id: '0004',imgUrl: '//img1.qunarzz/sight/p0/1707/a3/a3924161475dee37a3.img.jpg_256x160_9163f4e5.jpg',title: '青岛海昌极地海洋公园',desc: '一起与极地动物们亲密接触吧'}]}}
}
</script><style lang="stylus" scoped>@import '~@/assets/styles/mixins.styl'.titleline-height: .8remtext-indent: .2remmargin-top: .2rembackground: #eee.itemdisplay: flexoverflow: hiddenheight: 1.9rem.item-imgwidth: 1.7remheight: 1.7rempadding: .1rem.item-infoflex: 1padding: .1remmin-width: 0.item-titleline-height: .54remfont-size: .34remellipsis().item-descline-height: .4remcolor: #aaaellipsis().item-buttonmargin-top: .18remline-height: .44rempadding: 0 .2rembackground: #ff9300border-radius: .06remcolor: #fff
</style>

<template><div><div class="title">周末一日游</div><ul><li class="item border-bottom" v-for="item of RecommendList" :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 {RecommendList: [{id: '0001',imgUrl: '//imgs.qunarzz/p/tts6/1910/a3/de9b845673a16e02.jpg_256x144_5bd4966e.jpg',title: '济南',desc: '千佛山+大明湖+趵突泉'},{id: '0002',imgUrl: '//imgs.qunarzz/p/tts1/1804/af/6f653f8ffd9cf002.jpg_256x144_a5089aef.jpg',title: '青岛',desc: '青岛崂山+仰口景区+仰口湾'},{id: '0003',imgUrl: '//imgs.qunarzz/p/tts8/1909/15/7c84eaf4e67b3f02.jpg_256x144_865be7f1.jpg',title: '烟台',desc: '蓬莱阁+八仙过海+文成城堡+帆船喂海鸥+金沙滩'}]}}
}
</script><style lang="stylus" scoped>@import '~@/assets/styles/mixins.styl'.titleline-height: .8remtext-indent: .2remmargin-top: .2rembackground: #eee.item-img-wrapperoverflow: hiddenheight: 0padding-bottom: 31%.item-imgwidth: 100%.item-infopadding: .15rem.item-titleline-height: .54remfont-size: .34remellipsis().item-descline-height: .4remcolor: #aaaellipsis()
</style>