小米商城项目分析(下)

1.首页模块

技术点
头部文本是用ul标签进行的布局,每个标签都加上hover效果,鼠标滑动时颜色会进行改变,每个标签都设置了点击事件,这些点击事件都是用来触发别的模块,中间部分主要是使用啦element-ui的导航栏,可以进行路由的切换,轮播图是使用element-ui的走马灯进行实现

2.商品展示区域

技术点
商品展示这块区域是进行了一个全局组件的注册,在main.js里面进行注册,然后在首页进行了一个调用,每个商品在鼠标滑动时会显示出一个阴影效果和一个图片放大的效果,代码如下,在点击浏览更多时,会根据当前所在商品we

transition: translateY(-5px);
transition: all 0.5;
box-shadow: 1px 1px 20px 2px rgba(0, 0, 0, 0.3);
box-shadow: greenyellow;

3.购物车模块

技术点

购物车模块的数据是存储至vuex当中,计算商品价格主是利用vuex里面的getters属性,全选这个功能通过
every这个方法来检测选中的框的状态

4.全部商品

技术点
全部商品用到了element-ui里面的面包屑,还有tab选项卡,来实现商品的切换,全部商品展示是将接口获取到,渲染到也页面,分类的商品获取接口后通过watch监听器,在切换的数据时,对数据进行一个点监听

5.登录注册

技术点
登录注册模块主要使用啦element-ui里面的对话框,将它们封装啦一个全局组件,通过sync里的属性进行一个弹框的开关,需要用的页面直接调用,把属性属性传过去,设置个点击事件即可,通过接口获取权限来进行注册和登录