实现效果:
代码如下:
<div> <div class="title"> 热销推荐 </div> <ul> <li v-for="item of recommendList" :key="item.id" class="item border-bottom"> <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-btn">查看详情</button> </div> </li> </ul> </div>
<style lang="stylus" scoped> @import '~styles/mixin' .title margin-top .2rem line-height .8rem text-indent .2rem background #eee .item overflow hidden height 1.9rem display flex .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 linheight .4rem color #cccccc ellipsis() .item-btn line-height .44rem margin-top .16rem background #ff9300 padding 0 .1rem border-radius .06rem color #fff </style>
有几个问题是提要留意的;如下:
最后实现周末去哪儿:
效果如下
这里主要有一点就是: