Vue项目首页_热销推荐组件、周末游组件开发

热销推荐效果：

新建Recommend.vue:

<template><div><div class="title">热销推荐</div><ul><router-linktag="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'.titlemargin-top: .2remline-height: .8rembackground: #eeetext-indent: .2rem.itemoverflow: hiddendisplay: flexheight: 1.9rem.item-imgwidth: 1.7remheight: 1.7rempadding: .1rem.item-infoflex: 1padding: .1remmin-width: 0.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis().item-buttonline-height: .44remmargin-top: .16rembackground: #ff9300padding: 0 .2remborder-radius: .06remcolor: #fff
</style>

使用1像素边框：

周末游效果：

新建Weekend.vue:

<template><div><div class="title">周末去哪儿</div><ul><liclass="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'.titleline-height: .8rembackground: #eeetext-indent: .2rem.item-img-wrapperoverflow: hiddenheight: 0padding-bottom: 37.09%.item-imgwidth: 100%.item-infopadding: .1rem.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis()
</style>

Vue项目首页_热销推荐组件、周末游组件开发相关推荐

Vue项目首页_使用axios发送ajax请求
安装axios: npm install axios --save 在Home.vue中发送一个ajax请求,然后把数据传递给子组件. 在Home.vue中: import axios from ' ...
六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求
@Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
【Vue-router中，require代替import解决vue项目首页加载时间过久】
vue-router中,require代替import解决vue项目首页加载时间过久的问题 - 雨打芭蕉wt - 博客园
Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录前言完效果图 : 登录含签权注册带正则个人中心下拉加载更多主页修改个人中心视频播放加关注+收藏评论盖楼A回复B B回复C C回复A类似项目开始封装登录.注册封装登录从零到一 ...
四、Vue项目去哪儿网首页推荐和周末游组件并使用Axios获取数据
文章目录在码云创建index-recommended分支在Home.vue中引用Recommend.vue组件和Weekend.vue组件 Recommend.vue组件 Weekend.vue组 ...
Vue项目首页-热销推荐组件开发（7-6）
热销推荐组件开发创建分支在项目目录下右键打开gitbase. git pull //从线上将项目拉下来. git checkout index-recommend //进入index-recomm ...
Vue项目首页-开发周末游组件（7-7）
开发周末游组件 <template><div><div class="title">周末去哪</div><ul>< ...
iframe js 加载失败_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
vue 项目加载顺序_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...

Vue项目首页_热销推荐组件、周末游组件开发

Vue项目首页_热销推荐组件、周末游组件开发相关推荐

最新文章

热门文章