diff --git a/README.md b/README.md index dfe28237..366f295c 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ npm run dev # 效果演示 -[查看demo请戳这里](https://cangdu.org/elm/)(请用chrome手机模式预览) +[查看demo请戳这里](https://cangdu.org/elm/#/msite)(请用chrome手机模式预览) ### 移动端扫描下方二维码 @@ -111,17 +111,15 @@ npm run dev # 总结 -1、因为并不是elm官方,而且因为要开代理,必须在pc端打开,最多只能做到下单这一步,下单成功后可以在手机客户端查看并付款。 +1、一般涉及到money的网页逻辑都比较复杂,尤其像饿了么这样一个开放的平台,商家和食品种类繁多,页面与页面之间交互复杂,在写到 购物车 和 下单 功能时众多的数据和逻辑一度让人很头疼,又没有设计和接口api文档,只能一步步摸索。 -2、一般涉及到money的网页逻辑都比较复杂,尤其像饿了么这样一个开放的平台,商家和食品种类繁多,页面与页面之间交互复杂,在写到 购物车 和 下单 功能时众多的数据和逻辑一度让人很头疼,又没有设计和接口api文档,只能一步步摸索。 +2、vue因其轻量级的框架在中小型项目中表现亮眼,在大型单页面应用中因为vuex的存在,表现依然出色,在处理复杂交互逻辑的时候,vuex的存在是不可或缺的。所以说利用 vue + vuex 完全可以去做大型的单页面项目。 -3、vue因其轻量级的框架在中小型项目中表现亮眼,在大型单页面应用中因为vuex的存在,表现依然出色,在处理复杂交互逻辑的时候,vuex的存在是不可或缺的。所以说利用 vue + vuex 完全可以去做大型的单页面项目。 +3、项目写到现在,从 登录注册到、首页、搜索、商家列表、购物车、下单、订单列表、个人中心 一个流程走完之后、不但对vue的理解更深一层,而且对以后掌控大型项目的时候也有非常多的帮助,做一个实际的项目才能对自己有很大的提升。 -4、项目写到现在,从 登录注册到、首页、搜索、商家列表、购物车、下单、订单列表、个人中心 一个流程走完之后、不但对vue的理解更深一层,而且对以后掌控大型项目的时候也有非常多的帮助,做一个实际的项目才能对自己有很大的提升。 +4、曾一度怀疑,花几个月的时间做这样一个项目到底有没有意义,本来只是想做一个小项目练练手,没想到后来越写越多,不过坚持下来后我相信一切都是值得的。 -5、曾一度怀疑,花几个月的时间做这样一个项目到底有没有意义,本来只是想做一个小项目练练手,没想到后来越写越多,不过坚持下来后我相信一切都是值得的。 - -6、项目已经完成,共45个页面。 +5、项目已经完成,共45个页面。 # 最终目标 diff --git a/screenshots/ewm.png b/screenshots/ewm.png old mode 100755 new mode 100644 index 134ee1f0..741553fc Binary files a/screenshots/ewm.png and b/screenshots/ewm.png differ diff --git a/src/page/home/home.vue b/src/page/home/home.vue index 85208fb3..25afef47 100644 --- a/src/page/home/home.vue +++ b/src/page/home/home.vue @@ -55,46 +55,46 @@ export default { }, mounted(){ - // 获取当前城市 - cityGuess().then(res => { - this.guessCity = res.name; - this.guessCityid = res.id; - }) - - //获取热门城市 - hotcity().then(res => { - this.hotcity = res; - }) - - //获取所有城市 - groupcity().then(res => { - this.groupcity = res; - }) - }, - - components:{ - headTop - }, - - computed:{ - //将获取的数据按照A-Z字母开头排序 - sortgroupcity(){ - let sortobj = {}; - for (let i = 65; i <= 90; i++) { - if (this.groupcity[String.fromCharCode(i)]) { - sortobj[String.fromCharCode(i)] = this.groupcity[String.fromCharCode(i)]; - } - } - return sortobj - } - }, - - methods:{ - //点击图标刷新页面 - reload(){ - window.location.reload(); - } - }, + // 获取当前城市 + cityGuess().then(res => { + this.guessCity = res.name; + this.guessCityid = res.id; + }) + + //获取热门城市 + hotcity().then(res => { + this.hotcity = res; + }) + + //获取所有城市 + groupcity().then(res => { + this.groupcity = res; + }) + }, + + components:{ + headTop + }, + + computed:{ + //将获取的数据按照A-Z字母开头排序 + sortgroupcity(){ + let sortobj = {}; + for (let i = 65; i <= 90; i++) { + if (this.groupcity[String.fromCharCode(i)]) { + sortobj[String.fromCharCode(i)] = this.groupcity[String.fromCharCode(i)]; + } + } + return sortobj + } + }, + + methods:{ + //点击图标刷新页面 + reload(){ + window.location.reload(); + } + }, } @@ -171,8 +171,11 @@ export default { span{ @include sc(0.475rem, #999); } + position: sticky; + top: 1.95rem; + background-color: #fff; } - + .letter_classify_li{ margin-bottom: 0.4rem; background-color: #fff;