12

README.en.md

@@ -0,0 +1,36 @@
+# cremb_xcx_v3.0
+
+#### Description
+{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1. xxxx
+2. xxxx
+3. xxxx
+
+#### Instructions
+
+1. xxxx
+2. xxxx
+3. xxxx
+
+#### Contribution
+
+1. Fork the repository
+2. Create Feat_xxx branch
+3. Commit your code
+4. Create Pull Request
+
+
+#### Gitee Feature
+
+1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4. The most valuable open source project [GVP](https://gitee.com/gvp)
+5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6. The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

README.md

@@ -0,0 +1,109 @@
+# CRMEB XCX v3.0
+
+#### 介绍
+  CRMEB 3.0 小程序
+
+#### 使用说明
+
+1. 配置config.js 中的 HTTP_REQUEST_URL 修改为自己的域名
+2. 配置微信开发工具中小程序的appid
+3. 前往CRMEB后台配置小程序 appid 和 AppSecret 
+3. 前往微信小程序后台配置业务，下载 合法域名
+
+### 目录结构
+
+~~~
+└─view 小程序存放根目录
+  ├─api 接口统一存放目录
+  │ ├─activity.js 营销接口
+  │ ├─api.js 公共接口
+  │ ├─order.js 订单接口
+  │ ├─store.js 产品接口
+  │ └─user.js 用户接口
+  ├─components 组件目录
+  │ ├─address-window 订单页选择地址组件
+  │ ├─authorize 授权组件
+  │ ├─coupon-list-window 优惠券列表组件
+  │ ├─coupon-window 优惠券弹出框组件
+  │ ├─goodList 商品展示组件
+  │ ├─home 悬浮导航组件
+  │ ├─navbar 头部导航组件
+  │ ├─orderGoods 订单产品展示组件
+  │ ├─payment 支付弹出框组件
+  │ ├─productConSwiper Swiper产品轮播图组件
+  │ ├─product-window 为您推荐组件
+  │ ├─promotionGood 促销产品组件
+  │ ├─recommend 热门推荐组件
+  │ ├─share-red-packets 产品页分享组件
+  │ ├─swipers swipers轮播组件
+  │ └─userEvaluation 产品页评论组件
+  ├─css 全局css
+  ├─font icon字体库
+  ├─images 图片目录
+  ├─pages 小程序页面目录
+  │ ├─activity
+  │ │ ├─goods_bargain 砍价列表
+  │ │ ├─goods_bargain_details 砍价详情
+  │ │ ├─goods_combination 拼团列表
+  │ │ ├─goods_combination_details 拼团详情
+  │ │ ├─goods_combination_status 拼团状态
+  │ │ ├─goods_seckill 秒杀列表
+  │ │ ├─goods_seckill_details 秒杀详情
+  │ │ ├─poster-poster 海报页面
+  │ │ └─user_goods_bargain_list 砍价记录
+  │ ├─cash-audit 提现审核
+  │ ├─first-new-product 精品推荐，热门榜单，首发新品，促销单品
+  │ ├─goods_cate 产品分类
+  │ ├─goods_comment_con 产品评价
+  │ ├─goods_comment_list 产品评价列表
+  │ ├─goods_details 产品详情
+  │ ├─goods_list 产品列表
+  │ ├─goods_logistics 产品物流信息
+  │ ├─goods_return 申请退款
+  │ ├─goods_search 搜索
+  │ ├─index 主页
+  │ ├─news_details 新闻详情
+  │ ├─news_list 新闻列表
+  │ ├─order_addcart 购物车
+  │ ├─order_confirm 订单确认
+  │ ├─order_details 订单详情
+  │ ├─order_list 订单列表
+  │ ├─order_pay_status 订单支付状态
+  │ ├─promoter-list 推广人列表
+  │ ├─promoter-order 推广人订单
+  │ ├─promotional-items 促销单品
+  │ ├─user 我的页面
+  │ ├─user_address 添加地址
+  │ ├─user_address_list 地址列表
+  │ ├─user_bill 账单明细
+  │ ├─user_cash 提现
+  │ ├─user_coupon 我的优惠卷
+  │ ├─user_get_coupon 领取优惠卷
+  │ ├─user_goods_collection 收藏产品
+  │ ├─user_info 个人资料
+  │ ├─user_integral 积分明细
+  │ ├─user_money 我的账户
+  │ ├─user_payment 充值
+  │ ├─user_phone 手机号绑定
+  │ ├─user_pwd_edit 修改密码
+  │ ├─user_return_list 退款列表
+  │ ├─user_sgin 签到
+  │ ├─user_sgin_list 签到记录
+  │ ├─user_spread_code 分销海报
+  │ ├─user_spread_money 佣金明细
+  │ ├─user_spread_user 我的推广
+  │ └─user_vip 会员页面
+  ├─utils 工具类目录
+  │ ├─autuLogin.js 自动授权登陆
+  │ ├─request.js 请求基类
+  │ ├─Server.js Socket类
+  │ ├─util.js 工具函数
+  │ └─wxh.js 帮助类函数
+  ├─wxParse WX分析类
+  ├─app.js 入口文件
+  ├─app.json 配置文件
+  ├─app.wxss 样式
+  ├─config.js 程序配置
+  └─project.config.json 项目配置
+
+~~~

api/activity.js

@@ -0,0 +1,161 @@
+import request from "./../utils/request.js";
+/**
+ * 
+ * 所有活动接口 包括：拼团，砍价，秒杀
+ * 
+*/
+
+/**
+ * 拼团列表
+ * 
+*/
+export function getCombinationList(data) {
+  return request.get('combination/list', data,{noAuth:true});
+}
+
+/**
+ * 拼团详情
+ * 
+*/
+export function getCombinationDetail(id) {
+  return request.get('combination/detail/'+id);
+}
+
+/**
+ * 拼团 开团
+ */
+export function getCombinationPink(id) {
+  return request.get("combination/pink/" + id);
+}
+
+/**
+ * 拼团 取消开团
+ */
+export function postCombinationRemove(data) {
+  return request.post("combination/remove",data);
+}
+
+/**
+ * 砍价列表
+ */
+export function getBargainList(data) {
+  return request.get("bargain/list", data,{noAuth:true});
+}
+
+/**
+ * 
+ * 砍价列表(已参与)
+ * @param object data
+*/
+export function getBargainUserList(data){
+  return request.get('bargain/user/list',data);
+}
+
+
+/**
+ * 
+ * 取消砍价
+ * @param int bargainId
+*/
+export function bargainUserCancel(bargainId){
+  return request.post('bargain/user/cancel', { bargainId: bargainId})
+}
+
+/**
+ * 砍价产品详情
+ */
+export function getBargainDetail(id) {
+  return request.get("bargain/detail/" + id);
+}
+
+/**
+ * 砍价 开启砍价用户信息
+ */
+export function postBargainStartUser(data) {
+  return request.post("bargain/start/user", data);
+}
+
+/**
+ * 砍价开启
+ */
+export function postBargainStart(bargainId) {
+  return request.post("bargain/start", { bargainId: bargainId});
+}
+
+/**
+ * 砍价 帮助好友砍价
+ */
+export function postBargainHelp(data) {
+  return request.post("bargain/help", data);
+}
+
+/**
+ * 砍价 砍掉金额
+ */
+export function postBargainHelpPrice(data) {
+  return request.post("bargain/help/price", data);
+}
+
+/**
+ * 砍价 砍价帮
+ */
+export function postBargainHelpList(data) {
+  return request.post("bargain/help/list", data);
+}
+
+/**
+ * 砍价 砍价帮总人数、剩余金额、进度条、已经砍掉的价格
+ */
+export function postBargainHelpCount(data) {
+  return request.post("bargain/help/count", data);
+}
+
+/**
+ * 砍价 观看/分享/参与次数
+ */
+export function postBargainShare(bargainId) {
+  return request.post("bargain/share", { bargainId: bargainId});
+}
+
+/**
+ * 秒杀产品时间区间
+ * 
+*/
+export function getSeckillIndexTime(){
+  return request.get('seckill/index',{},{noAuth:true});
+}
+
+/**
+ * 秒杀产品列表
+ * @param int time
+ * @param object data
+*/
+export function getSeckillList(time,data){
+  return request.get('seckill/list/'+time,data,{noAuth:true});
+}
+
+/**
+ * 秒杀产品详情
+ * @param int id
+*/
+export function getSeckillDetail(id){
+  return request.get('seckill/detail/'+id);
+}
+
+/**
+ * 砍价海报
+ * @param object data
+ * 
+*/
+export function getBargainPoster(data){
+  return request.post('bargain/poster',data)
+}
+
+/**
+ * 拼团海报
+ * @param object data
+ * 
+*/
+export function getCombinationPoster(data){
+  return request.post('combination/poster',data)
+}

api/api.js

@@ -0,0 +1,177 @@
+import request from "./../utils/request.js";
+/**
+ * 公共接口 ，优惠券接口 , 行业此讯 , 手机号码注册
+ * 
+*/
+
+/**
+ * 获取主页数据 无需授权
+ * 
+*/
+export function getIndexData()
+{
+  return request.get("index",{},{ noAuth : true});
+}
+
+/**
+ * 获取登录授权login
+ * 
+*/
+export function getLogo()
+{
+  return request.get('wechat/get_logo', {}, { noAuth : true});
+}
+
+
+/**
+ * 保存form_id
+ * @param string formId 
+ */
+export function setFormId(formId) {
+  return request.post("wechat/set_form_id", { formId: formId});
+}
+
+/**
+ * 领取优惠卷
+ * @param int couponId
+ * 
+*/
+export function setCouponReceive(couponId){
+  return request.post('coupon/receive', { couponId: couponId});
+}
+/**
+ * 优惠券列表
+ * @param object data
+*/
+export function getCoupons(data){
+  return request.get('coupons',data,{noAuth:true})
+}
+
+/**
+ * 我的优惠券
+ * @param int types 0全部  1未使用 2已使用
+*/
+export function getUserCoupons(types){
+  return request.get('coupons/user/'+types)
+}
+
+/**
+ * 文章分类列表
+ * 
+*/
+export function getArticleCategoryList(){
+  return request.get('article/category/list',{},{noAuth:true})
+}
+
+/**
+ * 文章列表
+ * @param int cid
+ * 
+*/
+export function getArticleList(cid,data){
+  return request.get('article/list/' + cid, data,{noAuth:true})
+}
+
+/**
+ * 文章 热门列表
+ * 
+*/
+export function getArticleHotList(){
+  return request.get('article/hot/list',{},{noAuth:true});
+}
+
+/**
+ * 文章 轮播列表
+ * 
+*/
+export function getArticleBannerList(){
+  return request.get('article/banner/list',{},{noAuth:true})
+}
+
+/**
+ * 文章详情
+ * @param int id 
+ * 
+*/
+export function getArticleDetails(id){
+  return request.get('article/details/'+id,{},{noAuth:true});
+}
+
+/**
+ * 手机号+验证码登录接口
+ * @param object data
+*/
+export function loginMobile(data){
+  return request.post('login/mobile',data,{noAuth:true})
+}
+
+/**
+ * 验证码发送
+ * @param object phone
+*/
+export function registerVerify(phone, reset){
+  return request.post('register/verify', { phone: phone, type: reset === undefined ? 'reset' : reset },{noAuth:true})
+}
+
+/**
+ * 手机号注册
+ * @param object data
+ * 
+*/
+export function phoneRegister(data){
+  return request.post('register',data,{noAuth:true});
+}
+
+/**
+ * 手机号修改密码
+ * @param object data
+ * 
+*/
+export function phoneRegisterReset(data){
+  return request.post('register/reset',data,{noAuth:true})
+}
+
+/**
+ * 手机号+密码登录
+ * @param object data
+ * 
+*/
+export function phoneLogin(data){
+  return request.post('login',data,{noAuth:true})
+}
+
+/**
+ * 切换H5登录
+ * @param object data
+*/
+export function switchH5Login(){
+  return request.post('switch_h5', { 'from':'routine'});
+}
+
+/**
+ * 绑定手机号
+ * 
+*/
+export function bindingPhone(data){
+  return request.post('binding',data);
+}
+
+/**
+ * 退出登錄
+ * 
+*/
+export function logout(){
+  return request.get('logout');
+}
+
+/**
+ * 获取图片base64
+ * @retins {*}
+ */
+export function imageBase64(image, code) {
+  return request.post(
+    "image_base64",
+    { image: image, code: code },
+    { login: false }
+  );
+}

api/order.js

@@ -0,0 +1,193 @@
+import request from "./../utils/request.js";
+/**
+ * 
+ * 订单相关接口
+ * 
+*/
+
+/**
+ * 获取购物车列表
+ * 
+ */
+export function getCartList() {
+  return request.get("cart/list");
+}
+
+/**
+ * 获取购物车列表
+ * @param numType boolean true 购物车数量,false=购物车产品数量
+ */
+export function getCartCounts(numType) {
+  return request.get("cart/count", { numType: numType === undefined ? true : numType });
+}
+
+
+/**
+ * 修改购物车数量
+ * @param int cartId  购物车id
+ * @param int number 修改数量
+ */
+export function changeCartNum(cartId, number) {
+  return request.post("cart/num", { id: cartId, number: number });
+}
+
+/**
+ * 清除购物车
+ * @param object ids join(',') 切割成字符串
+*/
+export function cartDel(ids){
+  if (typeof id === 'object') 
+    ids = ids.join(',');
+  return request.post('cart/del', { ids: ids});
+}
+
+/**
+ * 订单列表
+ * @param object data
+*/
+export function getOrderList(data){
+  return request.get('order/list',data);
+}
+
+/**
+ * 订单确认获取订单详细信息
+ * @param string cartId
+*/
+export function orderConfirm(cartId){
+  return request.post('order/confirm', { cartId: cartId});
+}
+
+/**
+ * 再次下单
+ * @param string uni
+ * 
+*/
+export function orderAgain(uni){
+  return request.post('order/again',{uni:uni});
+}
+
+/**
+ * 订单支付
+ * @param object data
+*/
+export function orderPay(data){
+  return request.post('order/pay',data);
+}
+
+/**
+ * 订单详情
+ * @param string uni 
+*/
+export function getOrderDetail(uni){
+  return request.get('order/detail/'+uni);
+}
+
+/**
+ * 删除已完成订单
+ * @param string uni
+ * 
+*/
+export function orderDel(uni){
+  return request.post('order/del',{uni:uni});
+}
+
+/**
+ * 订单收货
+ * @param string uni
+ * 
+*/
+export function orderTake(uni){
+  return request.post('order/take',{uni:uni});
+}
+
+/**
+ * 订单查看物流
+ * @param string uni
+*/
+export function orderExpress(uni){
+  return request.get('order/express/'+uni);
+}
+
+/**
+ * 订单评价
+ * @param object data
+ * 
+*/
+export function orderComment(data){
+  return request.post('order/comment',data);
+}
+
+/**
+ * 订单取消
+ * @param string id
+ * 
+*/
+export function orderCancel(id){
+  return request.post('order/cancel',{id:id});
+}
+
+/**
+ * 订单产品信息
+ * @param string unique 
+*/
+export function orderProduct(unique){
+  return request.post('order/product', { unique: unique});
+}
+
+/**
+ * 订单退款审核
+ * @param object data
+*/
+export function orderRefundVerify(data){
+  return request.post('order/refund/verify',data);
+}
+
+/**
+ * 获取退款理由
+ * 
+*/
+export function ordeRefundReason(){
+  return request.get('order/refund/reason');
+}
+
+/**
+ * 订单统计数据
+*/
+export function orderData(){
+  return request.get('order/data')
+}
+
+/**
+ * 获取当前金额能使用的优惠卷
+ * @param string price
+ * 
+*/
+export function getCouponsOrderPrice(price){
+  return request.get('coupons/order/'+price)
+}
+
+/**
+ * 订单创建
+ * @param string key
+ * @param object data
+ * 
+*/
+export function orderCreate(key,data){
+  return request.post('order/create/'+key,data);
+}
+/**
+ * 订单查询物流信息
+ * @returns {*}
+ */
+export function express(uni) {
+  return request.get("order/express/" + uni);
+}
+/**
+ * 计算订单金额
+ * @param key
+ * @param data
+ * @returns {*}
+ */
+export function postOrderComputed(key, data) {
+  return request.post("/order/computed/" + key, data);
+}

api/store.js

@@ -0,0 +1,136 @@
+import request from "./../utils/request.js";
+/**
+ * 
+ * 产品相关接口
+ * 
+*/
+
+/**
+ * 获取推荐产品
+ * 
+ */
+export function getProductHot(page,limit) {
+  return request.get("product/hot", { 
+    page: page === undefined ? 1 : page, 
+    limit:limit === undefined ? 4 :limit
+  },{noAuth:true});
+}
+
+/**
+ * 购车添加
+ * 
+*/
+export function postCartAdd(data) {
+  return request.post('cart/add', data);
+}
+
+/**
+ * 获取收藏列表
+ * @param object data
+*/
+export function getCollectUserList(data) {
+  return request.get('collect/user', data)
+}
+
+/**
+ * 批量收藏
+ * 
+ * @param object id  产品编号 join(',') 切割成字符串
+ * @param string category 
+*/
+export function collectAll(id, category) {
+  return request.post('collect/all', { id: id, category: category === undefined ? 'product' : category });
+}
+
+/**
+ * 删除收藏产品
+ * @param int id
+ * @param string category product=普通产品,product_seckill=秒杀产品
+*/
+export function collectDel(id, category) {
+  return request.post('collect/del', { id: id, category: category === undefined ? 'product' : category });
+}
+
+/**
+ * 添加收藏
+ * @param int id
+ * @param string category product=普通产品,product_seckill=秒杀产品
+*/
+export function collectAdd(id, category){
+  return request.post('collect/add', { id: id, 'product': category === undefined ? 'product' : category });
+}
+
+/**
+ * 获取产品详情
+ * @param int id
+ * 
+*/
+export function getProductDetail(id){
+  return request.get('product/detail/' + id, {}, { noAuth : true });
+}
+
+/**
+ * 产品分享二维码 推广员
+ * @param int id
+*/
+export function getProductCode(id){
+  return request.get('product/code/' + id, { user_type:'routine'});
+}
+
+/**
+ * 获取产品评论
+ * @param int id
+ * @param object data
+ * 
+*/
+export function getReplyList(id,data){
+  return request.get('reply/list/'+id,data)
+}
+
+/**
+ * 产品评价数量和好评度
+ * @param int id
+*/
+export function getReplyConfig(id){
+  return request.get('reply/config/'+id);
+} 
+
+/**
+ * 获取分类列表
+ * 
+*/
+export function getCategoryList(){
+  return request.get('category', {}, { noAuth:true})
+}
+
+/**
+ * 获取产品列表
+ * @param object data
+*/
+export function getProductslist(data){
+  return request.get('products',data,{noAuth:true});
+}
+
+/**
+ * 首页产品的轮播图和产品信息
+ * @param int type 
+ * 
+*/
+export function getGroomList(type){
+  return request.get('groom/list/'+type,{},{noAuth:true});
+}
+
+/**
+ * 获取搜索关键字获取
+ * 
+*/
+export function getSearchKeyword(){
+  return request.get('search/keyword',{},{noAuth:true});
+}
+/**
+ * 门店列表
+ * @returns {*}
+ */
+export function storeListApi(data) {
+  return request.get("store_list", data);
+}

api/user.js

@@ -0,0 +1,272 @@
+import request from "./../utils/request.js";
+/**
+ * 
+ * 用户相关接口
+ * 
+*/
+
+/**
+ * 小程序用户登录
+ * @param data object 小程序用户登陆信息
+ */
+export function login(data) {
+  return request.post("wechat/mp_auth", data, { noAuth : true });
+}
+
+
+/**
+ * 获取用户中心菜单
+ *
+ */
+export function getMenuList() {
+  return request.get("menu/user");
+}
+
+/**
+ * 获取用户信息
+ * 
+*/
+export function getUserInfo(){
+  return request.get('user');
+}
+
+/**
+ * 修改用户信息
+ * @param object
+*/
+export function userEdit(data){
+  return request.post('user/edit',data);
+}
+
+
+/**
+ * 会员等级列表
+ * 
+*/
+export function userLevelGrade(){
+  return request.get('user/level/grade');
+}
+
+/**
+ * 获取某个等级任务
+ * @param int id 任务id
+*/
+export function userLevelTask(id){
+  return request.get('user/level/task/'+id);
+}
+
+/**
+ * 检查用户是否可以成为会员
+ * 
+*/
+export function userLevelDetection(){
+  return request.get('user/level/detection');
+}
+
+/**
+ * 获取分销海报图片
+ * 
+*/
+export function spreadBanner(){
+  return request.get('spread/banner',{type:1});
+}
+
+/**
+ *
+ * 获取推广用户一级和二级
+ * @param object data
+*/
+export function spreadPeople(data){
+  return request.post('spread/people',data);
+}
+
+/**
+ * 
+ * 推广佣金明细
+ * @param int type 
+ * @param object data
+*/
+export function spreadCommission(type,data){
+  return request.get('spread/commission/'+type,data);
+}
+
+/**
+ * 
+ * 推广佣金/提现总和
+ * @param int type
+*/
+export function spreadCount(type){
+  return request.get('spread/count/'+type);
+}
+
+/**
+ * 
+ * 推广订单
+ * @param object data
+*/
+export function spreadOrder(data){
+  return request.post('spread/order',data);
+}
+
+/**
+ * 提现申请
+ * @param object data
+*/
+export function extractCash(data){
+  return request.post('extract/cash',data)
+}
+
+/**
+ * 提现银行/提现最低金额
+ * 
+*/
+export function extractBank(){
+  return request.get('extract/bank');
+}
+
+/**
+ * 活动状态
+ * 
+*/
+export function userActivity(){
+  return request.get('user/activity');
+}
+
+/**
+ * 小程序充值
+ * 
+*/
+export function rechargeRoutine(data){
+  return request.post('recharge/routine',data)
+}
+
+/**
+ * 
+ * 地址列表
+ * @param object data
+*/
+export function getAddressList(data){
+  return request.get('address/list',data);
+}
+
+/**
+ * 设置默认地址
+ * @param int id
+*/
+export function setAddressDefault(id){
+  return request.post('address/default/set',{id:id})
+}
+
+/**
+ * 获取默认地址
+ * 
+*/
+export function getAddressDefault(){
+  return request.get('address/default');
+}
+/**
+ * 删除地址
+ * @param int id
+ * 
+*/
+export function delAddress(id){
+  return request.post('address/del',{id:id})
+}
+
+/**
+ * 修改 添加地址
+ * @param object data
+*/
+export function editAddress(data){
+  return request.post('address/edit',data);
+}
+
+/**
+ * 获取单个地址
+ * @param int id 
+*/
+export function getAddressDetail(id){
+  return request.get('address/detail/'+id);
+}
+
+/**
+ * 设置用户分享
+ * 
+*/
+export function userShare(){
+  return request.post('user/share');
+}
+
+/**
+ * 获取签到配置
+ * 
+*/
+export function getSignConfig(){
+  return request.get('sign/config')
+}
+
+/**
+ * 获取签到列表
+ * @param object data
+*/
+export function getSignList(data){
+  return request.get('sign/list',data);
+}
+
+/**
+ * 签到列表(年月)
+ * @param object data
+ * 
+*/
+export function getSignMonthList(data){
+  return request.get('sign/month',data)
+}
+
+/**
+ * 用户签到
+*/
+export function setSignIntegral(){
+  return request.post('sign/integral')
+}
+/*
+ * 资金明细（types|0=全部,1=消费,2=充值,3=返佣,4=提现）
+ * */
+export function getCommissionInfo(q, types) {
+  return request.get("spread/commission/" + types, q);
+}
+/*
+ * 签到用户信息
+ * */
+export function postSignUser(sign) {
+  return request.post("sign/user", sign);
+}
+/*
+ * 积分记录
+ * */
+export function getIntegralList(q) {
+  return request.get("integral/list", q);
+}
+/*
+ * 点击领取优惠券
+ * */
+export function getCouponReceive(couponId) {
+  return request.post("coupon/receive", couponId);
+}
+/*
+ * 领取优惠券列表
+ * */
+export function getCoupon(q) {
+  return request.get("coupons", q);
+}
+/*
+ * 获取推广人排行
+ * */
+export function getRankList(q) {
+  return request.get("rank", q);
+}
+/*
+ * 获取佣金排名
+ * */
+export function getBrokerageRank(q) {
+  return request.get("brokerage_rank", q);
+}

app.js

@@ -0,0 +1,110 @@
+import util from './utils/util.js';
+import { HTTP_REQUEST_URL } from './config.js';
+import Server from './utils/Server.js';
+
+App({
+  onLaunch: function (option) {
+    if (HTTP_REQUEST_URL==''){
+      console.error("请配置根目录下的config.js文件中的 'HTTP_REQUEST_URL'\n\n请修改开发者工具中【详情】->【AppID】改为自己的Appid\n\n请前往后台【小程序】->【小程序配置】填写自己的 appId and AppSecret");
+      return false;
+    }
+    var that = this;
+    if (option.query.hasOwnProperty('scene')){
+      switch (option.scene) {
+        //扫描小程序码
+        case 1047:
+          that.globalData.code = option.query.scene;
+          break;
+        //长按图片识别小程序码
+        case 1048:
+          that.globalData.code = option.query.scene;
+          break;
+        //手机相册选取小程序码
+        case 1049:
+          that.globalData.code = option.query.scene;
+          break;
+        //直接进入小程序
+        case 1001:
+          that.globalData.spid = option.query.scene;
+          break;
+      }
+    }
+    // 获取导航高度；
+    wx.getSystemInfo({
+      success: res => {
+        //导航高度
+        this.globalData.navHeight = res.statusBarHeight * (750 / res.windowWidth) + 97;
+      }, fail(err) {}
+    });
+    const updateManager = wx.getUpdateManager();
+
+    updateManager.onCheckForUpdate(function (res) {
+      // 请求完新版本信息的回调
+      
+    })
+
+    updateManager.onUpdateReady(function () {
+      wx.showModal({
+        title: '更新提示',
+        content: '新版本已经准备好，是否重启应用？',
+        success: function (res) {
+          if (res.confirm) {
+            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+            updateManager.applyUpdate()
+          }
+        }
+      })
+    });
+
+    updateManager.onUpdateFailed(function () {
+      return that.Tips({title:'新版本下载失败'});
+    })
+    //实例化聊天服务
+    this.$chat = new Server(this);
+  },
+  $chat:null,
+  globalData: {
+    navHeight: 0,
+    routineStyle: '#ffffff',
+    openPages: '',
+    spid: 0,
+    code:0,
+    urlImages: '',
+    url: HTTP_REQUEST_URL,
+    token: '',
+    isLog:false,
+    expiresTime:0,
+    MyMenus:[],
+    userInfo:{},
+    loginType:'routine'
+  },
+  /**
+   * 聊天事件快捷注册
+   * 
+  */
+  $on: function (name, action){
+    this.$chat.$on(name,action);
+  },
+  /*
+  * 信息提示 + 跳转
+  * @param object opt {title:'提示语',icon:''} | url
+  * @param object to_url 跳转url 有5种跳转方式 {tab:1-5,url:跳转地址}
+  */
+  Tips: function (opt, to_url) { 
+    return util.Tips(opt, to_url);
+  },
+  /**
+   * 快捷调取助手函数
+  */
+  help:function()
+  {
+    return util.$h;
+  },
+  /*
+  * 合并数组
+  * @param array list 请求返回数据
+  * @param array sp 原始数组
+  * @return array
+  */
+  SplitArray: function (list, sp) { return util.SplitArray(list, sp)},
+})

app.json

@@ -0,0 +1,102 @@
+{
+  "pages": [
+    
+    "pages/index/index",
+    "pages/order_list/index",
+    "pages/user/user",
+   
+    "pages/goods_details/index",
+    "pages/Forgotpass/index",
+    "pages/user_phone/index",
+    "pages/login/index",
+    "pages/order_addcart/order_addcart",
+    "pages/user_address/index",
+    "pages/goods_logistics/index",
+    "pages/order_pay_status/index",
+    "pages/user_info/index",
+    "pages/user_spread_code/index",
+    "pages/goods_return/index",
+    "pages/user_return_list/index",
+    "pages/user_cash/index",
+    "pages/cash-audit/index",
+    "pages/promoter-order/index",
+    "pages/promoter-list/index",
+    "pages/user_spread_user/index",
+    "pages/user_integral/index",
+    "pages/user_spread_money/index",
+    
+    "pages/order_confirm/index",
+    "pages/order_details/index",
+    "pages/goods_cate/goods_cate",
+    
+    "pages/goods_list/goods_list",
+    "pages/user_address_list/index",
+    "pages/user_pwd_edit/index",
+    "pages/goods_search/index",
+    
+    
+    "components/navbar/index",
+    "components/orderGoods/index",
+    "components/swipers/index",
+    "components/goodList/index",
+    "components/promotionGood/index",
+    "components/productConSwiper/index",
+    "components/userEvaluation/index",
+    "components/coupon-window/index",
+    "components/product-window/index",
+    "components/coupon-list-window/index",
+    "components/address-window/index",
+    "components/home/index",
+    "components/write-off/index"
+    
+  ],
+  "subPackages": [
+    {
+      "root": "pages/activity",
+      "name": "activity",
+      "pages": [
+        "poster-poster/index"
+      ]
+    }
+  ],
+  "window": {
+    "backgroundTextStyle": "dark",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle": "black",
+    "navigationStyle": "custom"
+  },
+  "tabBar": {
+    "backgroundColor": "#ffffff",
+    "color": "#707070",
+    "selectedColor": "#FD5400",
+    "borderStyle": "white",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "iconPath": "images/1-001.png",
+        "selectedIconPath": "images/1-002.png",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/goods_cate/goods_cate",
+        "iconPath": "images/2-001.png",
+        "selectedIconPath": "images/2-002.png",
+        "text": "分类"
+      },
+      {
+        "pagePath": "pages/order_addcart/order_addcart",
+        "iconPath": "images/3-001.png",
+        "selectedIconPath": "images/3-002.png",
+        "text": "购物车"
+      },
+      {
+        "pagePath": "pages/user/user",
+        "iconPath": "images/4-001.png",
+        "selectedIconPath": "images/4-002.png",
+        "text": "我的"
+      }
+    ]
+  },
+  "sitemapLocation": "sitemap.json"
+}

components/address-window/index.js

@@ -0,0 +1,58 @@
+import { getAddressList } from '../../api/user.js';
+
+var app = getApp();
+Component({
+  properties: {
+    //跳转url链接
+    pagesUrl:{
+      type:String,
+      value:'',
+    },
+    address:{
+      type: Object,
+      value:{
+        address:true,
+        addressId:0,
+      }
+    },
+    isLog:{
+      type:Boolean,
+      value:false,
+    },
+  },
+  data: {
+    active: 0,
+    //地址列表
+    addressList:[],
+    is_loading:true,
+  },
+  attached: function () {
+    
+  },
+  methods: {
+    tapAddress: function (e) {
+      this.setData({ active: e.currentTarget.dataset.id });
+      this.triggerEvent('OnChangeAddress', e.currentTarget.dataset.addressid);
+    },
+    close: function () {
+      this.setData({ 'address.address': false });
+      this.triggerEvent('changeTextareaStatus');
+    },
+    goAddressPages:function(){
+      this.setData({ 'address.address': false });
+      this.triggerEvent('changeTextareaStatus');
+      wx.navigateTo({url: this.data.pagesUrl});
+    },
+    getAddressList:function(){
+      var that=this;
+      getAddressList({page:1,limit:5}).then(res=>{
+        var addressList = res.data;
+        //处理默认选中项
+        for (var i = 0, leng = addressList.length; i < leng; i++) {
+          if (addressList[i].id == that.data.address.addressId) that.setData({ active: i });
+        }
+        that.setData({ addressList: addressList,is_loading:false });
+      })
+    }
+  }
+})

components/address-window/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/address-window/index.wxml

@@ -0,0 +1,17 @@
+<view class="address-window {{address.address==true?'on':''}}">
+   <view class='title'>选择地址<text class='iconfont icon-guanbi' bindtap='close'></text></view>
+   <view class='list'>
+      <view class='item acea-row row-between-wrapper {{active==index?"font-color":""}}' wx:for="{{addressList}}" data-id='{{index}}' bindtap='tapAddress' wx:key data-addressId="{{item.id}}">
+         <text class='iconfont icon-ditu {{active==index?"font-color":""}}'></text>
+         <view class='address'>
+            <view class='name {{active==index?"font-color":""}}'>{{item.real_name}}<text class='phone'>{{item.phone}}</text></view>
+            <view class='line1'>{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
+         </view>
+         <text class='iconfont icon-complete{{active==index?" font-color":""}}'></text>
+      </view>
+   </view>
+   <!-- 无地址 -->
+   <view class='pictrue' wx:if="{{!is_loading && !addressList.length}}"><image src='/images/noAddress.png'></image></view>
+   <view class='addressBnt bg-color' bindtap='goAddressPages'>选择其地址</view>
+</view>
+<view class='mask' catchtouchmove="true"  hidden='{{address.address==false}}' bindtap='close'></view>

components/address-window/index.wxss

@@ -0,0 +1,15 @@
+@import '/app.wxss';
+.address-window{background-color:#fff;position:fixed;bottom:0;left:0;width:100%;z-index:101;transform:translate3d(0,100%,0);transition:all .3s cubic-bezier(.25,.5,.5,.9);}
+.address-window.on{transform:translate3d(0,0,0);}
+.address-window .title{font-size:32rpx;font-weight:bold;text-align:center;height:123rpx;line-height:123rpx;position:relative;}
+.address-window .title .iconfont{position:absolute;right:30rpx;color:#8a8a8a;font-size:35rpx;}
+.address-window .list .item{margin-left:30rpx;padding-right:30rpx;border-bottom:1px solid #eee;height:129rpx;font-size:25rpx;color:#333;}
+.address-window .list .item .iconfont{font-size:37rpx;color:#2c2c2c;}
+.address-window .list .item .iconfont.icon-complete{font-size:30rpx;color:#fff;}
+.address-window .list .item .address{width:560rpx;}
+.address-window .list .item .address .name{font-size:28rpx;font-weight:bold;color:#282828;margin-bottom:4rpx;}
+.address-window .list .item .address .name .phone{margin-left:18rpx;}
+.address-window .addressBnt{font-size:30rpx;font-weight:bold;color:#fff;width:690rpx;height:86rpx;border-radius:43rpx;text-align:center;line-height:86rpx;margin:85rpx auto;}
+.address-window .pictrue{width:414rpx;height:336rpx;margin:0 auto;}
+.address-window .pictrue image{width:100%;height:100%;}
+

components/authorize/authorize.js

@@ -0,0 +1,129 @@
+import Util from '../../utils/util.js';
+import { getLogo } from '../../api/api.js';
+import { login } from '../../api/user.js';
+
+let app = getApp();
+
+Component({
+  properties: {
+    iShidden: {
+      type: Boolean,
+      value: true,
+    },
+    //是否自动登录
+    isAuto: {
+      type: Boolean,
+      value: true,
+    },
+    isGoIndex:{
+      type: Boolean,
+      value:true,
+    },
+  },
+  data: {
+    cloneIner: null,
+    loading:false,
+    errorSum:0,
+    errorNum:3
+  },
+  attached() {
+    this.get_logo_url();
+    this.setAuthStatus();
+  },
+  methods: {
+    close(){
+      let pages = getCurrentPages();
+      let currPage  = pages[pages.length - 1];
+      if(this.data.isGoIndex){
+        wx.switchTab({url:'/pages/index/index'});
+      }else{
+        this.setData({
+          iShidden: true
+        });
+        if (currPage && currPage.data.iShidden != undefined){
+          currPage.setData({ iShidden:true});
+        }
+      }
+    },
+    get_logo_url: function () {
+      var that = this;
+      if (wx.getStorageSync('logo_url')) return this.setData({ logo_url: wx.getStorageSync('logo_url') });
+      getLogo().then(res=>{
+        wx.setStorageSync('logo_url', res.data.logo_url);
+        that.setData({ logo_url: res.data.logo_url });
+      });
+    },
+    //检测登录状态并执行自动登录
+    setAuthStatus() {
+      var that = this;
+      Util.chekWxLogin().then((res)=> {
+        let pages = getCurrentPages();
+        let currPage = pages[pages.length - 1];
+        if (currPage && currPage.data.iShidden != undefined) { 
+          currPage.setData({ iShidden:true});
+        }
+        if (res.isLogin) {
+          if (!Util.checkLogin()) return Promise.reject({ authSetting: true, msg: '用户token失效', userInfo: res.userInfo});
+          that.triggerEvent('onLoadFun', app.globalData.userInfo);
+        }else{
+          wx.showLoading({ title: '正在登录中' });
+          that.setUserInfo(res.userInfo,true);
+        }
+      }).catch(res=>{
+        if (res.authSetting === false) {
+          //没有授权不会自动弹出登录框
+          if (that.data.isAuto === false) return;
+          //自动弹出授权
+          that.setData({ iShidden: false });
+        } else if (res.authSetting){
+          //授权后登录token失效了
+          that.setUserInfo(res.userInfo);
+        }
+      })
+    },
+    //授权
+    setUserInfo(userInfo,isLogin) {
+      let that = this;
+      wx.showLoading({ title: '正在登录中' });
+      if (isLogin){
+        that.getWxUserInfo(userInfo);
+      }else{
+        Util.getCodeLogin((res)=>{
+            Util.wxgetUserInfo().then(userInfo=>{
+              userInfo.code = res.code;
+              that.getWxUserInfo(userInfo);
+            }).catch(res=>{
+              wx.hideLoading();
+            });
+        });
+      }
+    },
+    getWxUserInfo: function (userInfo){
+      let that = this;
+      userInfo.spread_spid = app.globalData.spid;//获取推广人ID
+      userInfo.spread_code = app.globalData.code;//获取推广人分享二维码ID
+      login(userInfo).then(res => {
+        app.globalData.token = res.data.token;
+        app.globalData.isLog = true;
+        app.globalData.userInfo = res.data.userInfo;
+        app.globalData.expiresTime = res.data.expires_time;
+        if (res.data.cache_key) wx.setStorage({ key: 'cache_key', data: res.data.cache_key });
+        //取消登录提示
+        wx.hideLoading();
+        //关闭登录弹出窗口
+        that.setData({ iShidden: true, errorSum: 0 });
+        //执行登录完成回调
+        that.triggerEvent('onLoadFun', app.globalData.userInfo);
+      }).catch((err) => {
+        wx.hideLoading();
+        that.data.errorSum++;
+        that.setData({ errorSum: that.data.errorSum });
+        if (that.data.errorSum >= that.data.errorNum) {
+          Util.Tips({ title: err });
+        } else {
+          that.setUserInfo(userInfo);
+        }
+      });
+    }
+  },
+})

components/authorize/authorize.json

@@ -0,0 +1,3 @@
+{
+  "component":true
+}

components/authorize/authorize.wxml

@@ -0,0 +1,11 @@
+<!--pages/authorize/authorize.wxml-->
+<view class='Popup' hidden='{{iShidden}}'>
+   <image src='{{logo_url}}'></image>
+   <view class='title'>授权提醒</view>
+   <view class='tip'>请授权头像等信息，以便为您提供更好的服务</view>
+   <view class='bottom flex'>
+      <view class='item' bindtap='close'>随便逛逛</view>
+      <button class='item grant'  type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="setUserInfo">去授权</button>
+   </view>
+</view>
+<view class='mask' hidden='{{iShidden}}' catchtouchmove="true" bindtap='close'></view>

components/authorize/authorize.wxss

@@ -0,0 +1,12 @@
+/* pages/authorize/authorize.wxss */
+@import "../../app.wxss"; 
+
+.Popup{width:500rpx;background-color:#fff;position:fixed;top:50%;left:50%;margin-left:-250rpx;transform:translateY(-50%);z-index:320;}
+.Popup image{width:150rpx;height:150rpx;margin:-67rpx auto 0 auto;display:block;border: 8rpx solid #fff;border-radius: 50%}
+.Popup .title{font-size:28rpx;color:#000;text-align:center;margin-top: 30rpx}
+.Popup .tip{font-size:22rpx;color:#555;padding:0 24rpx;margin-top:25rpx;}
+.Popup .bottom .item{width:50%;height:80rpx;background-color:#eeeeee;text-align:center;line-height:80rpx;font-size:24rpx;color:#666;margin-top:54rpx;}
+.Popup .bottom .item.on{width: 100%}
+.flex{display:flex;}
+.Popup .bottom .item.grant{font-size:28rpx;color:#fff;font-weight:bold;background-color:#e93323;border-radius:0;padding:0;}
+.mask{position:fixed;top:0;right:0;left:0;bottom:0;background-color:rgba(0,0,0,0.65);z-index:310;}

components/coupon-list-window/index.js

@@ -0,0 +1,50 @@
+import { setCouponReceive } from '../../api/api.js';
+const app = getApp();
+Component({
+  properties: {
+    coupon: {
+      type: Object,
+      value:{
+        list:[],
+        statusTile:''
+      },
+    },
+    //打开状态 0=领取优惠券,1=使用优惠券
+    openType:{
+      type:Number,
+      value:0,
+    }
+  },
+  data: {
+  },
+  attached: function () {
+  },
+  methods: {
+    close: function () {
+      this.triggerEvent('ChangCouponsClone');
+    },
+    getCouponUser:function(e){
+      var that = this;
+      var id = e.currentTarget.dataset.id;
+      var index = e.currentTarget.dataset.index;
+      var list = that.data.coupon.list;
+      if (list[index].is_use == true && this.data.openType==0) return true;
+      switch (this.data.openType){
+        case 0:
+          //领取优惠券
+          setCouponReceive(id).then(res=>{
+            list[index].is_use = true;
+            that.setData({
+              ['coupon.list']: list
+            });
+            app.Tips({ title: '领取成功' });
+            that.triggerEvent('ChangCoupons', list[index]);
+          });
+        break;
+        case 1:
+          that.triggerEvent('ChangCoupons',index);
+        break;
+      }
+    },
+  }
+})

components/coupon-list-window/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/coupon-list-window/index.wxml

@@ -0,0 +1,20 @@
+<view class='coupon-list-window {{coupon.coupon==true?"on":""}}'>
+   <view class='title'>优惠券<text class='iconfont icon-guanbi' bindtap='close'></text></view>
+   <view class='coupon-list' wx:if="{{coupon.list.length}}">
+      <view class='item acea-row row-center-wrapper' wx:for="{{coupon.list}}" bindtap='getCouponUser' data-index='{{index}}' data-id="{{item.id}}" wx:key>
+        <view class='money'>￥<text class='num'>{{item.coupon_price}}</text></view>
+        <view class='text'>
+            <view class='condition line1'>购物满{{item.use_min_price}}元可用</view>
+            <view class='data acea-row row-between-wrapper'>
+              <view>{{item.start_time}}-{{item.end_time}}</view>
+              <view class='bnt gray' wx:if="{{item.is_use}}">{{item.use_title || '已领取'}}</view>
+              <view class='bnt bg-color' wx:else>{{coupon.statusTile || '立即领取'}}</view>
+            </view>
+        </view>
+      </view>
+   </view>
+   <!-- 无优惠券 -->
+   <view class='pictrue' wx:else><image src='/images/noCoupon.png'></image></view>
+</view>
+<view class='mask' catchtouchmove="true" hidden='{{coupon.coupon==false}}' bindtap='close'></view>
+

components/coupon-list-window/index.wxss

@@ -0,0 +1,8 @@
+@import '/app.wxss';
+.coupon-list-window{position:fixed;bottom:0;left:0;width:100%;background-color:#f5f5f5;border-radius:16rpx 16rpx 0 0;z-index:111;transform:translate3d(0,100%,0);transition:all .3s cubic-bezier(.25,.5,.5,.9);z-index: 1000}
+.coupon-list-window.on{transform:translate3d(0,0,0);}
+.coupon-list-window .title{height:124rpx;width:100%;text-align:center;line-height:124rpx;font-size:32rpx;font-weight:bold;position:relative;}
+.coupon-list-window .title .iconfont{position:absolute;right:30rpx;top:50%;transform:translateY(-50%);font-size:35rpx;color:#8a8a8a;font-weight:normal;}
+.coupon-list-window .coupon-list{margin:0 0 50rpx 0;height:550rpx;overflow:auto;}
+.coupon-list-window .pictrue{width:414rpx;height:336rpx;margin:0 auto 50rpx auto;}
+.coupon-list-window .pictrue image{width:100%;height:100%;}

components/coupon-window/index.js

@@ -0,0 +1,24 @@
+var app = getApp();
+Component({
+  properties: {
+    window:{
+      type: Boolean,
+      value: false,
+    },
+    couponList:{
+      type:Array,
+      value:[],
+    }
+  },
+  data: {
+  
+  },
+  attached: function () {
+  
+  },
+  methods: {
+    close:function(){
+      this.triggerEvent('onColse');
+    }
+  }
+})

components/coupon-window/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

components/coupon-window/index.wxml

@@ -0,0 +1,16 @@
+<view class='coupon-window {{window==true?"on":""}}'>
+   <view class='couponWinList'>
+      <view class='item acea-row row-between-wrapper' wx:for="{{couponList}}" wx:key>
+         <view class='money font-color'>￥<text class='num'>{{item.coupon_price}}</text></view>
+         <view class='text'>
+            <view class='name'>购物买{{item.use_min_price}}减{{item.coupon_price}}</view>
+            <view>{{item.start_time ? item.start_time+'-' : ''}}{{item.end_time}}</view>
+         </view>
+      </view>
+   </view>
+   <view class='lid'>
+      <navigator hover-class='none' url='/pages/user_get_coupon/index' class='bnt font-color'>立即领取</navigator>
+      <view class='iconfont icon-guanbi3' bindtap='close'></view>
+   </view>
+</view>
+<view class='mask' catchtouchmove="true" hidden='{{window==false}}'></view>

components/goodList/index.js

@@ -0,0 +1,16 @@
+// components/goodList/index.js
+Component({
+  properties: {
+    status: {
+      type: String,
+      value: 0,
+    },
+    bastList: {
+      type: Object,
+      value: [],
+    }
+  },
+  data: {
+    
+  }
+})

components/goodList/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/goodList/index.wxml

@@ -0,0 +1,22 @@
+       <view class='goodList'>
+          <block wx:for="{{bastList}}" wx:key>
+            <navigator url='/pages/goods_details/index?id={{item.id}}' class='item acea-row row-between-wrapper'>
+              <view class='pictrue'>
+                <image src='{{item.image}}'></image>
+                <image wx:if="{{index == 0 && status == 1}}" src='/images/one.png' class='numPic'></image>
+                <image wx:if="{{index == 1 && status == 1}}" src='/images/two.png' class='numPic'></image>
+                <image wx:if="{{index == 2 && status == 1}}" src='/images/three.png' class='numPic'></image>
+              </view>
+              <view class='underline'>
+                  <view class='text'>
+                      <view class='line1'>{{item.store_name}}</view>
+                      <view class='money font-color'>￥<text class='num'>{{item.price}}</text></view>
+                      <view class='vip-money acea-row row-middle' wx:if='{{item.vip_price && item.vip_price > 0}}'>￥{{item.vip_price || 0}}<image  src='/images/vip.png'></image><text class='num'>已售{{item.sales}}{{item.unit_name}}</text></view>
+                      <view class='vip-money acea-row row-middle' wx:else><text class='num'>已售{{item.sales}}{{item.unit_name}}</text></view>
+                    
+                  </view>
+              </view>
+              <view class='iconfont icon-gouwuche cart-color acea-row row-center-wrapper'></view>
+            </navigator>
+          </block>   
+       </view>

components/goodList/index.wxss

@@ -0,0 +1,14 @@
+@import '/app.wxss';
+.goodList .item{position:relative;padding-left:30rpx;}
+.goodList .item .pictrue{width:180rpx;height:180rpx;position:relative;}
+.goodList .item .pictrue image{width:100%;height:100%;border-radius:6rpx;}
+.goodList .item .pictrue .numPic{position:absolute;left:7rpx;top:7rpx;width:50rpx;height:50rpx;border-radius:50%;}
+.goodList .item .underline{padding:30rpx 30rpx 30rpx 0;border-bottom:1px solid #f5f5f5;}
+.goodList .item:nth-last-child(1) .underline{border-bottom:0; }
+.goodList .item .text{font-size:30rpx;color:#222;width:489rpx;}
+.goodList .item .text .money{font-size:26rpx;font-weight:bold;margin-top:50rpx;}
+.goodList .item .text .money .num{font-size:34rpx;}
+.goodList .item .text .vip-money{font-size:24rpx;color:#282828;font-weight:bold;margin-top:15rpx;}
+.goodList .item .text .vip-money image{width:46rpx;height:21rpx;margin-left:5rpx;}
+.goodList .item .text .vip-money .num{font-size:22rpx;color:#aaa;font-weight:normal;margin:-2rpx 0 0 22rpx;}
+.goodList .item .iconfont{position:absolute;right:30rpx;width:50rpx;height:50rpx;border-radius:50%;font-size:30rpx;bottom:38rpx;}

components/home/index.js

@@ -0,0 +1,77 @@
+// components/home/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    homeActive:false
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+  setTouchMove: function (e) {
+    var that = this;
+    if (e.touches[0].clientY < 400 && e.touches[0].clientY > 66) {
+      that.setData({
+        top: e.touches[0].clientY
+      })
+    }
+  },
+  open:function(){
+     this.setData({
+       homeActive: !this.data.homeActive
+     })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

components/home/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/home/index.wxml

@@ -0,0 +1,9 @@
+<view class='home' style=" top:{{top*2}}rpx;" catchtouchmove="setTouchMove">
+   
+        <view class='homeCon bg-color acea-row row-column-between {{homeActive==true?"on":""}}'>
+          <navigator hover-class='none' url='/pages/index/index'  open-type='switchTab' class='iconfont icon-shouye-xianxing'></navigator>
+          <navigator hover-class='none' url='/pages/order_addcart/order_addcart'  open-type='switchTab' class='iconfont icon-caigou-xianxing'></navigator>
+          <navigator hover-class='none' url='/pages/user/user'  open-type='switchTab' class='iconfont icon-yonghu1'></navigator>
+      </view>
+   <view class='pictrue' bindtap='open'><image src='{{homeActive==false?"/images/close.gif":"/images/open.gif"}}'></image></view>
+</view>

components/home/index.wxss

@@ -0,0 +1,7 @@
+@import '/app.wxss';
+.home{position: fixed ;top:780rpx;color: white;text-align: center;z-index:99;right:10rpx;}
+.home .homeCon{width:86rpx;border-radius:50rpx;padding:34rpx 0;box-sizing:border-box;transition:all 0.3s ease-in-out 0s;opacity:0;transform: scale(0);height:0rpx;color:#e93323;}
+.home .homeCon.on{opacity:1;transform: scale(1);height:300rpx;color:#fff;}
+.home .homeCon .iconfont{font-size:48rpx;}
+.home .pictrue{width:86rpx;height:86rpx;border-radius:50%;margin-top:20rpx;}
+.home .pictrue image{width:100%;height:100%;border-radius:50%;}

components/navbar/index.js

@@ -0,0 +1,75 @@
+var app = getApp();
+Component({
+  properties: {
+    parameter:{
+      type: Object,
+      value:{
+        class:'0'
+      },
+    },
+    logoUrl:{
+      type:String,
+      value:'',
+    }
+  },
+  data: {
+    navH: ""
+  },
+  ready: function(){
+    this.setClass();
+    var pages = getCurrentPages();
+    if (pages.length <= 1) this.setData({'parameter.return':0});
+  },
+  attached: function () {
+    this.setData({
+      navH: app.globalData.navHeight
+    });
+  },
+  methods: {
+    return:function(){
+      wx.navigateBack();
+    },
+    setGoodsSearch:function(){
+       wx.navigateTo({
+         url: '/pages/goods_search/index',
+       })
+    },
+    setClass:function(){
+      var color = '';
+      switch (this.data.parameter.class) {
+        case "0": case 'on':
+          color = 'on'
+          break;
+        case '1': case 'black':
+          color = 'black'
+          break;
+        case '2': case 'gray':
+          color = 'gray'
+          break;
+        case '3': case "red":
+          color = 'red'
+          break;
+        case '4': case "gradual01":
+          color = 'gradual01'
+          break;
+        case '5': case "indexbg":
+        color = 'indexbg'
+        break;
+        case '6': case "loginbg":
+        color = 'loginbg'
+        break;
+        case '7': case "bgcolor":
+        color = 'bgcolor'
+        break;
+        case '8': case "white":
+        color = 'white'
+        break;
+        default:
+          break;
+      }
+      this.setData({
+        'parameter.class': color
+      })
+    }
+  }
+})

components/navbar/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/navbar/index.wxml

@@ -0,0 +1,13 @@
+<view class='navbar {{parameter.class}}' style='height:{{navH}}rpx'>
+   <view class='navbarH' style='height:{{navH}}rpx;'>
+      <view class='navbarCon acea-row row-left' wx:if='{{parameter.navbar==0}}'>
+         <view class='search acea-row row-middle' bindtap='setGoodsSearch'><text class='iconfont icon-xiazai5'></text>搜索商品</view>
+         <!-- <view class='logo'><image src='{{logoUrl}}'></image></view> -->
+      </view>
+      <view class='navbarCon acea-row row-center-wrapper' wx:if='{{parameter.navbar==1}}'>
+         <view class='name {{parameter.color==true?"on":""}} line1'>{{parameter.title}}</view>
+         <view class='iconfont icon-xiangzuo {{parameter.color==true?"on":""}}' wx:if='{{parameter.return==1}}' bindtap='return'></view>
+      </view>
+   </view>
+</view>
+<view style='height:{{navH}}rpx'></view>

components/orderGoods/index.js

@@ -0,0 +1,21 @@
+var app = getApp();
+Component({
+  properties: {
+    evaluate: {
+      type: Number,
+      value:0,
+    },
+    cartInfo:{
+      type:Object,
+      value:[],
+    },
+    orderId:{
+      type:String,
+      value:'',
+    },
+  },
+  data: {
+  },
+  methods: {
+  }
+})

components/orderGoods/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/orderGoods/index.wxml

@@ -0,0 +1,22 @@
+<view class="orderGoods">
+  <view class='total'>共{{cartInfo.length}}件商品</view>
+  <view class='goodWrapper'>
+     <view class='item acea-row row-between-wrapper' wx:for="{{cartInfo}}" wx:key>
+        <view class='pictrue'>
+          <image src='{{item.productInfo.attrInfo.image}}' wx:if="{{item.productInfo.attrInfo}}"></image>
+          <image src='{{item.productInfo.image}}' wx:else></image>
+        </view>
+        <view class='text'>
+           <view class='acea-row row-between-wrapper'>
+             <view class='name line1'>{{item.productInfo.store_name}}</view>
+             <view class='num'>x {{item.cart_num}}</view>
+           </view>
+           <view class='attr line1' wx:if="{{item.productInfo.attrInfo}}">{{item.productInfo.attrInfo.suk}}</view>
+           <view class='money font-color' wx:if="{{item.productInfo.attrInfo}}">￥{{item.productInfo.attrInfo.price}}</view>
+           <view class='money font-color' wx:else>￥{{item.productInfo.price}}</view>
+           <!-- <navigator class='evaluate font-color' wx:if='{{item.is_reply==0 && evaluate==3}}' hover-class="none" url='/pages/goods_comment_con/index?unique={{item.unique}}&uni={{orderId}}'>评价</navigator>
+           <view class='evaluate' wx:elif='{{item.is_reply==1 && evaluate==3}}'>已评价</view> -->
+        </view>
+     </view>
+  </view>
+</view>

components/orderGoods/index.wxss

@@ -0,0 +1,34 @@
+@import '/app.wxss';
+
+.orderGoods {
+  width: 100%;
+  margin: 0 auto;
+  /* border-radius: 16rpx; */
+  background-color: #fff;
+  /* margin-top: 38rpx; */
+  margin-bottom: 15rpx;
+}
+
+
+.orderGoods .total {
+  width: 100%;
+  height: 86rpx;
+  padding: 0 30rpx;
+  /* border-bottom: 2rpx solid #f0f0f0; */
+  font-size: 30rpx;
+  color: #282828;
+  line-height: 86rpx;
+  padding-left: 0;
+}
+.goodWrapper .item{
+  margin-left: 0!important;
+}
+.goodWrapper .item .text{
+  width: 460rpx!important;
+}
+.goodWrapper .item .text .name {
+  width:390rpx!important;
+}
+.goodWrapper .item{
+  border-bottom: 0!important;
+}

components/payment/index.js

@@ -0,0 +1,92 @@
+import {  orderPay } from '../../api/order.js';
+
+const app = getApp();
+
+Component({
+  properties: {
+    payMode:{
+      type:Array,
+      value:[],
+    },
+    pay_close:{
+      type:Boolean,
+      value:false,
+    },
+    order_id:{
+      type:String,
+      value:''
+    },
+    totalPrice:{
+      type:String,
+      value:'0'
+    },
+  },
+  data: {
+  },
+  attached: function () {
+  },
+  methods: {
+    close:function(){
+      this.triggerEvent('onChangeFun',{action:'pay_close'});
+    },
+    goPay:function(e){
+      let that = this;
+      let paytype = e.currentTarget.dataset.value;
+      let number = e.currentTarget.dataset.number
+      if (!that.data.order_id) return app.Tips({title:'请选择要支付的订单'});
+      if (paytype == 'yue' && parseFloat(number) < parseFloat(that.data.totalPrice)) return app.Tips({ title: '余额不足！' });
+      wx.showLoading({ title: '支付中' });
+      orderPay({ uni: that.data.order_id, paytype: paytype, 'from': 'routine' }).then(res => {
+        switch (paytype){
+          case 'weixin':
+            if (res.data.result === undefined) return app.Tips({title:'缺少支付参数'});
+            var jsConfig = res.data.result.jsConfig;
+            wx.requestPayment({
+              timeStamp: jsConfig.timestamp,
+              nonceStr: jsConfig.nonceStr,
+              package: jsConfig.package,
+              signType: jsConfig.signType,
+              paySign: jsConfig.paySign,
+              success: function (res) {
+                wx.hideLoading();
+                return app.Tips({ title: res.msg, icon: 'success' }, () => {
+                  that.triggerEvent('onChangeFun', { action: 'pay_complete' });
+                });
+              },
+              fail: function (e) {
+                wx.hideLoading();
+                return app.Tips({ title: '取消支付' }, () => {
+                  that.triggerEvent('onChangeFun', { action: 'pay_fail' });
+                });
+              },
+              complete: function (e) {
+                wx.hideLoading();
+                if (e.errMsg == 'requestPayment:cancel') return app.Tips({ title: '取消支付' }, () => {
+                  that.triggerEvent('onChangeFun', { action: 'pay_fail' });
+                });
+              },
+            });
+          break;
+          case 'yue':
+            wx.hideLoading();
+            return app.Tips({ title: res.msg, icon: 'success' }, () => {
+              that.triggerEvent('onChangeFun', { action: 'pay_complete' });
+            });;
+          break;
+          case 'offline':
+            wx.hideLoading();
+            return app.Tips({ title: res.msg, icon: 'success' }, () => {
+              that.triggerEvent('onChangeFun', { action: 'pay_complete' });
+            });;
+          break;
+        }
+      }).catch(err => {
+        wx.hideLoading();
+        return app.Tips({ title: err }, () => {
+          that.triggerEvent('onChangeFun', { action: 'pay_fail' });
+        });
+      })
+    },
+  }
+  
+})

components/payment/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/payment/index.wxml

@@ -0,0 +1,19 @@
+<view class="payment {{pay_close ? 'on' : ''}}">
+      <view class="title acea-row row-center-wrapper">
+        选择付款方式<text class="iconfont icon-guanbi" bindtap='close'></text>
+      </view>
+      <view class="item acea-row row-between-wrapper" bindtap='goPay' data-number="{{item.number || 0}}" data-value='{{item.value}}' wx:for="{{payMode}}" wx:key>
+        <view class="left acea-row row-between-wrapper">
+          <view class="iconfont {{item.icon}}"></view>
+          <view class="text">
+            <view class="name">{{item.name}}</view>
+            <view class="info" wx:if="{{item.number}}">
+            {{item.title}} <span class="money">￥{{ item.number }}</span>
+            </view>
+            <view class="info" wx:else>{{item.title}}</view>
+          </view>
+        </view>
+        <view class="iconfont icon-xiangyou"></view>
+      </view>
+    </view>
+    <view class="mask" wx:if='{{pay_close}}' bindtap='close'></view>

components/payment/index.wxss

@@ -0,0 +1,91 @@
+@import '/font/iconfont.wxss';
+@import '/app.wxss';
+.payment {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-radius: 16rpx 16rpx 0 0;
+  background-color: #fff;
+  padding-bottom: 60rpx;
+  z-index: 99;
+  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+  transform: translate3d(0, 100%, 0);
+}
+
+.payment.on {
+  transform: translate3d(0, 0, 0);
+}
+
+.payment .title {
+  text-align: center;
+  height: 123rpx;
+  font-size: 32rpx;
+  color: #282828;
+  font-weight: bold;
+  padding-right: 30rpx;
+  margin-left: 30rpx;
+  position: relative;
+  border-bottom: 1rpx solid #eee;
+}
+
+.payment .title .iconfont {
+  position: absolute;
+  right: 30rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 43rpx;
+  color: #8a8a8a;
+  font-weight: normal;
+}
+
+.payment .item {
+  border-bottom: 1rpx solid #eee;
+  height: 130rpx;
+  margin-left: 30rpx;
+  padding-right: 30rpx;
+}
+
+.payment .item .left {
+  width: 610rpx;
+}
+
+.payment .item .left .text {
+  width: 540rpx;
+}
+
+.payment .item .left .text .name {
+  font-size: 32rpx;
+  color: #282828;
+}
+
+.payment .item .left .text .info {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.payment .item .left .text .info .money {
+  color: #ff9900;
+}
+
+.payment .item .left .iconfont {
+  font-size: 45rpx;
+  color: #09bb07;
+}
+
+.payment .item .left .iconfont.icon-zhifubao {
+  color: #00aaea;
+}
+
+.payment .item .left .iconfont.icon-yuezhifu {
+  color: #ff9900;
+}
+
+.payment .item .left .iconfont.icon-yuezhifu1 {
+  color: #eb6623;
+}
+
+.payment .item .iconfont {
+  font-size: 0.3rpx;
+  color: #999;
+}

components/product-window/index.js

@@ -0,0 +1,98 @@
+var app = getApp();
+Component({
+  properties: {
+    iSplus:{
+      type: Boolean,
+      value: true
+    },
+    iSbnt:{
+      type:Number,
+      value:0
+    },
+    limitNum:{
+      type: Number,
+      value: 0
+    },
+    attribute: {
+      type: Object,
+      value:{}
+    },
+    attrList:{
+      type: Object,
+      value:[],
+    },
+    productAttr:{
+      type: Object,
+      value: [],
+    },
+    productSelect:{
+      type: Object,
+      value: {
+        image: '',
+        store_name: '',
+        price: 0,
+        unique: '',
+        stock:0,
+      }
+    },
+  },
+  data: {
+    attrValue:[],
+    attrIndex:0,
+    isShow: false
+  },
+  attached: function () {
+    let pages = getCurrentPages();
+    let currPage = null;
+    if (pages.length) {
+      currPage = pages[pages.length - 1];
+    }
+    let route = currPage.route
+    this.setData({ isShow: route.indexOf("goods_details")!==-1});
+  },
+  methods: {
+    /**
+    * 购物车手动输入数量
+    * 
+    */
+    bindCode: function (e) {
+      this.triggerEvent('iptCartNum', e.detail.value);
+    },
+    close: function () {
+      this.triggerEvent('myevent', {'window': false});
+    },
+    goCat:function(){
+      this.triggerEvent('goCat');
+    },
+    CartNumDes:function(){
+      this.triggerEvent('ChangeCartNum', false);
+    },
+    CartNumInt:function(){
+      this.triggerEvent('ChangeCartNum', true);
+    },
+    tapAttr:function(e){
+      //父级index
+      var indexw = e.currentTarget.dataset.indexw;
+      //子集index
+      var indexn = e.currentTarget.dataset.indexn;
+      //每次点击获得的属性
+      var attr = this.data.productAttr[indexw].attr_value[indexn];
+      //设置当前点击属性
+      this.data.productAttr[indexw].checked = attr['attr'];
+      this.setData({
+        productAttr: this.data.productAttr,
+      });
+      var value = this.getCheckedValue().sort().join(',');
+      this.triggerEvent('ChangeAttr',value);
+    },
+    getCheckedValue: function () {
+      return this.data.productAttr.map(function (attr) {
+        return attr.checked;
+      });
+    },
+    ResetAttr:function(){
+      for (var k in this.data.productAttr) this.data.productAttr[k].checked='';
+      this.setData({ productAttr: this.data.productAttr});
+    },
+  }
+})

components/product-window/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+} 

components/product-window/index.wxml

@@ -0,0 +1,36 @@
+<view class='product-window {{attribute.cartAttr==true?"on":""}} {{iSbnt?"join":""}}'>
+   <view class='textpic acea-row row-between-wrapper'>
+      <view class='pictrue'><image src='{{productSelect.image}}'></image></view>
+      <view class='text'>
+         <view class='line1'>{{productSelect.store_name}}</view>
+         <view class='money fontcolor'>
+          ￥<text class='num'>{{productSelect.price}}</text>
+          <!-- <text class='stock' wx:if="{{isShow}}">库存: {{productSelect.stock}}</text> -->
+          <text class='stock' wx:if="{{limitNum}}">限量: {{productSelect.quota_show}}</text>
+         </view>
+      </view>
+      <view class='iconfont icon-guanbi' bindtap='close'></view>
+   </view>
+   <view class='productWinList'>
+      <view class='item' wx:for='{{productAttr}}' wx:key='index'>
+         <view class='title'>{{item.attr_name}}</view>
+         <view class='listn acea-row row-middle'>
+            <view class='itemn {{item.checked==itemn.attr ?"on":""}}' wx:for='{{item.attr_value}}' wx:for-item='itemn' wx:for-index='indexn' data-indexw='{{index}}' data-indexn='{{indexn}}' bindtap='tapAttr' wx:key='index'>{{itemn.attr}}</view>
+         </view>
+      </view>
+   </view>
+   <view class='cart'>
+       <view class='title'>数量</view>
+       <view class='carnum acea-row row-left'>
+          <view class='reduce {{productSelect.cart_num <= 1 ? "on":""}}' bindtap='CartNumDes'>-</view>
+          <view class='num'>
+             <input type="number" value="{{productSelect.cart_num}}" data-name="productSelect.cart_num" bindinput="bindCode"></input>
+          </view>
+          <view wx:if="{{iSplus}}" class='plus {{productSelect.cart_num >= productSelect.stock? "on":""}}' bindtap='CartNumInt'>+</view>
+          <view wx:else class='plus {{(productSelect.cart_num >= productSelect.quota_show) || (productSelect.cart_num >= productSelect.product_stock)? "on":""}}' bindtap='CartNumInt'>+</view>
+       </view>
+   </view>
+   <view class="joinBnt bg-color" wx:if="{{iSbnt && productSelect.product_stock>0 &&productSelect.quota>0}}" bindtap="goCat">我要参团</view>
+   <view class="joinBnt on" wx:elif="{{(iSbnt && productSelect.quota<=0)||(iSbnt &&productSelect.product_stock<=0)}}">已售罄</view>
+</view>
+<view class='mask' catchtouchmove="true" hidden='{{attribute.cartAttr==false}}' bindtap='close'></view>

components/product-window/index.wxss

@@ -0,0 +1,173 @@
+@import '/app.wxss';
+
+.product-window {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  background-color: #fff;
+  z-index: 88;
+  border-radius: 16rpx 16rpx 0 0;
+  padding-bottom: 140rpx;
+  transform: translate3d(0, 100%, 0);
+  transition: all .3s cubic-bezier(.25, .5, .5, .9);
+}
+
+.product-window.on {
+  transform: translate3d(0, 0, 0);
+}
+
+.product-window.join {
+  padding-bottom: 30rpx;
+}
+
+.product-window .textpic {
+  padding: 0 130rpx 0 30rpx;
+  margin-top: 29rpx;
+  position: relative;
+}
+
+.product-window .textpic .pictrue {
+  width: 150rpx;
+  height: 150rpx;
+}
+
+.product-window .textpic .pictrue image {
+  width: 100%;
+  height: 100%;
+  border-radius: 10rpx;
+}
+
+.product-window .textpic .text {
+  width: 410rpx;
+  font-size: 32rpx;
+  color: #202020;
+}
+
+.product-window .textpic .text .money {
+  font-size: 24rpx;
+  margin-top: 40rpx;
+}
+
+.product-window .textpic .text .money .num {
+  font-size: 36rpx;
+}
+
+.product-window .textpic .text .money .stock {
+  color: #999;
+  margin-left: 18rpx;
+}
+
+.product-window .textpic .iconfont {
+  position: absolute;
+  right: 30rpx;
+  top: -5rpx;
+  font-size: 35rpx;
+  color: #8a8a8a;
+}
+
+.product-window .productWinList {
+  max-height: 395rpx;
+  overflow: auto;
+  margin-top: 36rpx;
+}
+
+.product-window .productWinList .item~.item {
+  margin-top: 36rpx;
+}
+
+.product-window .productWinList .item .title {
+  font-size: 30rpx;
+  color: #999;
+  padding: 0 30rpx;
+}
+
+.product-window .productWinList .item .listn {
+  padding: 0 30rpx 0 16rpx;
+}
+
+.product-window .productWinList .item .listn .itemn {
+  border: 1px solid #bbb;
+  font-size: 26rpx;
+  color: #282828;
+  padding: 7rpx 33rpx;
+  border-radius: 6rpx;
+  margin: 14rpx 0 0 14rpx;
+}
+
+.product-window .productWinList .item .listn .itemn.on {
+  color: #fff;
+  background-color: #ff3700;
+  border-color: #ff3700;
+}
+
+.product-window .cart {
+  margin-top: 36rpx;
+  padding: 0 30rpx;
+}
+
+.product-window .cart .title {
+  font-size: 30rpx;
+  color: #999;
+}
+
+.product-window .cart .carnum {
+  height: 54rpx;
+  margin-top: 24rpx;
+}
+
+.product-window .cart .carnum view {
+  border: 1px solid #a4a4a4;
+  width: 84rpx;
+  text-align: center;
+  height: 100%;
+  line-height: 54rpx;
+  color: #a4a4a4;
+  font-size: 45rpx;
+}
+
+.product-window .cart .carnum .reduce {
+  border-right: 0;
+  border-radius: 6rpx 0 0 6rpx;
+  line-height: 48rpx;
+}
+
+.product-window .cart .carnum .reduce.on {
+  border-color: #e3e3e3;
+  color: #dedede;
+}
+
+.product-window .cart .carnum .plus {
+  border-left: 0;
+  border-radius: 0 6rpx 6rpx 0;
+  line-height: 46rpx;
+}
+
+.product-window .cart .carnum .plus.on {
+  border-color: #e3e3e3;
+  color: #dedede;
+}
+
+.product-window .cart .carnum .num {
+  color: #282828;
+  font-size: 28rpx;
+}
+
+.product-window .joinBnt {
+  font-size: 30rpx;
+  width: 620rpx;
+  height: 86rpx;
+  border-radius: 50rpx;
+  text-align: center;
+  line-height: 86rpx;
+  color: #fff;
+  margin: 21rpx auto 0 auto;
+}
+
+.product-window .joinBnt.on {
+  background-color: #bbb;
+  color: #fff;
+}
+.fontcolor{
+  color: #D70615;
+}

components/productConSwiper/index.js

@@ -0,0 +1,26 @@
+var app = getApp();
+Component({
+  properties: {
+    imgUrls:{
+      type:Object,
+      value:[]
+    }
+  },
+  data: {
+    indicatorDots: false,
+    circular: true,
+    autoplay: false,
+    interval: 3000,
+    duration: 500,
+    currents: "1"
+  },
+  attached:function(){
+  },
+  methods: {
+    change: function (e) {
+      this.setData({
+        currents: e.detail.current + 1
+      })
+    }
+  }
+})

components/productConSwiper/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/productConSwiper/index.wxml

@@ -0,0 +1,11 @@
+    <view class='product-bg'>
+        <swiper  indicator-dots="{{indicatorDots}}"
+            autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" bindchange="change">
+            <block wx:for="{{imgUrls}}" wx:key> 
+                   <swiper-item>
+                <image src="{{item}}" class="slide-image"/>
+              </swiper-item>
+            </block>
+        </swiper>
+        <view class='pages'>{{currents}}/{{imgUrls.length || 1}}</view>
+    </view>

components/productConSwiper/index.wxss

@@ -0,0 +1,4 @@
+.product-bg{width:100%;height:750rpx;position:relative;}
+.product-bg swiper{width:100%;height:100%;position:relative;}
+.product-bg .slide-image{width:100%;height:100%;}
+.product-bg .pages{position:absolute;background:rgba(0,0,0,0.75);height:34rpx;padding:2rpx 15rpx;border-radius:3rpx;right:30rpx;bottom:130rpx;line-height:34rpx;font-size:24rpx;color:#fff; border-radius: 18rpx;}

components/promotionGood/index.js

@@ -0,0 +1,21 @@
+var app = getApp();
+Component({
+  properties: {
+    benefit: {
+      type: Object,
+      value: [],
+    }
+  },
+  data: {
+
+  },
+  ready: function () {
+
+  },
+  attached: function () {
+
+  },
+  methods: {
+
+  }
+})

components/promotionGood/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/promotionGood/index.wxml

@@ -0,0 +1,17 @@
+       <view class='promotionGood'>
+          <block wx:for="{{benefit}}" wx:key>
+           <navigator class='item acea-row row-between-wrapper' url='/pages/goods_details/index?id={{item.id}}'>
+              <view class='pictrue'><image src='{{item.image}}'></image></view>
+              <view class='text'>
+                 <view class='name line1'>{{item.store_name}}</view>
+                 <view class='sp-money acea-row'>
+                   <view class='moneyCon'>促销价: ￥<text class='num'>{{item.price}}</text></view>
+                 </view>
+                 <view class='acea-row row-between-wrapper'>
+                   <view class='money'>日常价：￥{{item.ot_price}}</view>
+                   <view>仅剩：{{item.stock}}{{item.unit_name}}</view>
+                 </view>
+              </view>
+           </navigator>
+          </block> 
+       </view>

components/promotionGood/index.wxss

@@ -0,0 +1,11 @@
+@import '/app.wxss';
+.promotionGood{padding:0 30rpx;}
+.promotionGood .item{border-bottom:1rpx solid #eee;height:250rpx;}
+.promotionGood .item .pictrue{width:188rpx;height:188rpx;}
+.promotionGood .item .pictrue image{width:100%;height:100%;border-radius:8rpx;}
+.promotionGood .item .text{font-size:24rpx;color:#999;width:472rpx;}
+.promotionGood .item .text .name{font-size:30rpx;color:#333;}
+.promotionGood .item .text .sp-money{margin:34rpx 0 20rpx 0;}
+.promotionGood .item .text .sp-money .moneyCon{padding:0 18rpx;background-color:red;height:46rpx;line-height:46rpx;background-image:linear-gradient(to right,#ff6248 0%,#ff3e1e 100%);font-size:20rpx;color:#fff;border-radius:24rpx 3rpx 24rpx 3rpx;}
+.promotionGood .item .text .sp-money .moneyCon .num{font-size:24rpx;}
+.promotionGood .item .text .money{text-decoration:line-through;}

components/recommend/index.js

@@ -0,0 +1,15 @@
+var app = getApp();
+Component({
+  properties: {
+    host_product:{
+      type: Object,
+      value:[],
+    }
+  },
+  data: {
+  },
+  attached: function () {
+  },
+  methods: {
+  }
+})

components/recommend/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/recommend/index.wxml

@@ -0,0 +1,14 @@
+<view class='recommend'>
+   <view class='title acea-row row-center-wrapper'>
+      <text class='iconfont icon-zhuangshixian'></text>
+      <text class='name'>热门推荐</text>
+      <text class='iconfont icon-zhuangshixian lefticon'></text>
+   </view>
+   <view class='recommendList acea-row row-between-wrapper'>
+      <navigator class='item' wx:for="{{host_product}}" wx:key url='/pages/goods_details/index?id={{item.id}}' hover-class='none'>
+         <view class='pictrue'><image src='{{item.image}}'></image></view>
+         <view class='name line1'>{{item.store_name}}</view>
+         <view class='money font-color'>￥<text class='num'>{{item.price}}</text></view>
+      </navigator>
+   </view>
+</view>

components/recommend/index.wxss

@@ -0,0 +1,13 @@
+@import '/app.wxss';
+.recommend{background-color:#fff;}
+.recommend .title{height:135rpx;font-size:28rpx;color:#282828;}
+.recommend .title .name{margin:0 28rpx;}
+.recommend .title .iconfont{font-size:170rpx;color:#454545;}
+.recommend .title .iconfont.lefticon{transform:rotate(180deg);}
+.recommend .recommendList{padding:0 30rpx;}
+.recommend .recommendList .item{width:335rpx;margin-bottom:30rpx;}
+.recommend .recommendList .item .pictrue{width:100%;height:335rpx;}
+.recommend .recommendList .item .pictrue image{width:100%;height:100%;border-radius:6rpx;}
+.recommend .recommendList .item .name{font-size:28rpx;color:#282828;margin-top:20rpx;}
+.recommend .recommendList .item .money{font-size:20rpx;margin-top:8rpx;}
+.recommend .recommendList .item .money .num{font-size:28rpx;}

components/swipers/index.js

@@ -0,0 +1,27 @@
+// components/swiper/index.js
+var app = getApp();
+Component({
+  properties: {
+    imgUrls: {
+      type: Object,
+      value: []
+    }
+  },
+  data: {
+    circular: true,
+    autoplay: true,
+    interval: 3000,
+    duration: 500,
+    currentSwiper: 0
+  },
+  attached: function () {
+    console.log(this.data.imgUrls);
+  },
+  methods: {
+    swiperChange: function (e) {
+      this.setData({
+        currentSwiper: e.detail.current
+      })
+    },
+  }
+})

components/swipers/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

components/swipers/index.wxml

@@ -0,0 +1,12 @@
+    <view class='swiper'>
+        <swiper autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
+            <block wx:for="{{imgUrls}}" wx:key>
+              <swiper-item>
+                <navigator url="{{item.link}}" style='width:100%;height:100%;' hover-class='none'><image src="{{item.img}}" class="slide-image"/></navigator>
+              </swiper-item>
+            </block>
+        </swiper>
+        <view class="dots acea-row">
+          <view class="dot {{index == currentSwiper ? 'active' : ''}}" wx:for="{{imgUrls}}" wx:key></view>
+        </view>
+    </view>

components/swipers/index.wxss

@@ -0,0 +1,7 @@
+@import '/app.wxss';
+.swiper{width:100%;height:282rpx;position:relative;}
+.swiper swiper{width:100%;height:100%;position:relative;}
+.swiper swiper .slide-image{width:100%;height:100%;}
+.swiper .dots{position:absolute;right:40rpx;bottom:20rpx;}
+.swiper .dots .dot{width:12rpx;height:12rpx;border:2rpx solid #fff;border-radius:50%;margin-right:15rpx;}
+.swiper .dots .dot.active{border-color:#e93323;background-color:#e93323;}

components/userEvaluation/index.js

@@ -0,0 +1,24 @@
+var app = getApp();
+Component({
+  properties: {
+    reply:{
+      type:Object,
+      value:[],
+    }
+  },
+  data: {
+    
+  },
+  attached: function () {
+
+  },
+  methods: {
+    getpreviewImage:function(e){
+      var dataset=e.currentTarget.dataset;
+      wx.previewImage({ 
+        urls: this.data.reply[dataset.index].pics, 
+        current: this.data.reply[dataset.index].pics[dataset.pic_index],
+      });
+    },
+  }
+})

components/userEvaluation/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/userEvaluation/index.wxml

@@ -0,0 +1,24 @@
+<view class='evaluateWtapper'>
+   <view class='evaluateItem' wx:for="{{reply}}" wx:key>
+      <view class='pic-text acea-row row-middle'>
+         <view class='pictrue'><image src='{{item.avatar}}'></image></view>
+         <view class='acea-row row-middle'>
+            <view class='name line1'>{{item.nickname}}</view>
+            <view class='start star{{item.star}}'></view>
+         </view>
+      </view>
+      <view class='time'>{{item.add_time}} {{item.suk}}</view>
+      <view class='evaluate-infor'>{{item.comment}}</view>
+      <view class='imgList acea-row'>
+          <view class='pictrue' wx:for="{{item.pics}}" wx:for-item="items" wx:for-index='pic_index' wx:key>
+            <image  wx:if="{{items}}" src='{{items}}' data-index="{{index}}" data-pic_index='{{pic_index}}' bindtap='getpreviewImage'></image>
+          </view>
+      </view>
+      <view class='reply' wx:if='{{item.merchant_reply_content}}'><text class='font-color'>店小二</text>:{{item.merchant_reply_content}}</view>
+   </view> 
+</view>
+         
+           
+           
+           
+    

components/userEvaluation/index.wxss

@@ -0,0 +1,14 @@
+@import '/app.wxss';
+.evaluateWtapper .evaluateItem{background-color:#fff;padding-bottom:25rpx;}
+.evaluateWtapper .evaluateItem~.evaluateItem{border-top:1rpx solid #f5f5f5;}
+.evaluateWtapper .evaluateItem .pic-text{font-size:26rpx;color:#282828;height:95rpx;padding:0 30rpx;}
+.evaluateWtapper .evaluateItem .pic-text .pictrue{width:56rpx;height:56rpx;margin-right:20rpx;}
+.evaluateWtapper .evaluateItem .pic-text .pictrue image{width:100%;height:100%;border-radius:50%;}
+.evaluateWtapper .evaluateItem .pic-text .name{max-width:450rpx;margin-right:15rpx;}
+.evaluateWtapper .evaluateItem .time{font-size:24rpx;color:#82848f;padding:0 30rpx;}
+.evaluateWtapper .evaluateItem .evaluate-infor{font-size:28rpx;color:#282828;margin-top:19rpx;padding:0 30rpx;}
+.evaluateWtapper .evaluateItem .imgList{padding:0 30rpx 0 15rpx;margin-top:25rpx;}
+.evaluateWtapper .evaluateItem .imgList .pictrue{width:156rpx;height:156rpx;margin:0 0 15rpx 15rpx;}
+.evaluateWtapper .evaluateItem .imgList .pictrue image{width:100%;height:100%;}
+.evaluateWtapper .evaluateItem .reply{font-size:26rpx;color:#454545;background-color:#f7f7f7;border-radius:5rpx;margin:20rpx 30rpx 0 30rpx;padding:30rpx;position:relative;}
+.evaluateWtapper .evaluateItem .reply::before{content: "";width: 0;height: 0;border-left:0.3rem solid transparent;border-right:0.3rem solid transparent;border-bottom:0.4rem solid #f7f7f7;position:absolute;top:-0.4rem;left:2rem;}

components/write-off/index.js

@@ -0,0 +1,20 @@
+var app = getApp();
+Component({
+  properties: {
+    iShidden: {
+      type: Boolean,
+      value: false
+    }
+  },
+  data: {
+
+  },
+  attached: function () {
+
+  },
+  methods: {
+    cancel: function () {
+      this.triggerEvent('cancel', false);
+    }
+  }
+})

components/write-off/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/write-off/index.wxml

@@ -0,0 +1,12 @@
+ <view hidden="{{iShidden == false}}">
+    <view class="WriteOff">
+      <view class="pictrue"><image src="/images/value.jpg"></image></view>
+      <view class="num acea-row row-center-wrapper">wx156687208866123509
+        <view class="see">查看<text class="iconfont icon-xiangyou"></text></view>
+      </view>
+      <view class="tip">确定要核销此订单吗？</view>
+      <view class="sure">确定核销</view>
+      <view class="sure cancel" bindtap="cancel">取消</view>
+    </view>
+    <view class="mask" catchtouchmove="true"></view>
+ </view>

components/write-off/index.wxss

@@ -0,0 +1,18 @@
+@import '/app.wxss';
+.WriteOff {width: 560rpx;height: 800rpx;background-color: #fff;border-radius: 20rpx;
+  position: fixed;top: 50%;left: 50%;margin-top: -400rpx;margin-left: -280rpx;z-index: 99;
+  padding-top: 55rpx;}
+.WriteOff .pictrue {width: 340rpx;height: 340rpx;margin: 0 auto;}
+.WriteOff .pictrue image {width: 100%;height: 100%;display: block;border-radius: 10rpx;}
+.WriteOff .num {font-size: 30rpx;color: #666;margin: 28rpx 0 30rpx 0;}
+.WriteOff .num .see {font-size: 16rpx;color: #fff;border-radius: 4rpx;background-color: #c68937;padding-left: 5rpx;margin-left: 12rpx;}
+.WriteOff .num .see .iconfont {font-size: 15rpx;}
+.WriteOff .tip {font-size: 36rpx;color: #282828;text-align: center;border-top: 1px dashed #ccc;padding-top: 40rpx;position: relative;}
+.WriteOff .tip:after {content: "";position: absolute;width: 25rpx;height: 25rpx;
+border-radius: 50%;background-color: #7f7f7f;right: -12.5rpx;top: -12.5rpx;}
+.WriteOff .tip:before {content: "";position: absolute;width: 25rpx;height: 25rpx;
+  border-radius: 50%;background-color: #7f7f7f;left: -12.5rpx;top: -12.5rpx;}
+.WriteOff .sure {font-size: 32rpx;color: #fff;text-align: center;line-height: 82rpx;
+  height: 82rpx;width: 460rpx;border-radius: 41rpx;margin: 40rpx auto 0 auto;
+  background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);}
+.WriteOff .sure.cancel {background-image: none;color: #999;margin-top: 10rpx;}

config.js

@@ -0,0 +1,33 @@
+module.exports = {
+  // 请求域名 格式： https://您的域名
+  HTTP_REQUEST_URL:'http://test.matou.hdlkeji.com',
+  // Socket链接 暂不做配置
+  WSS_SERVER_URL:'', 
+
+
+  // 以下配置非开发者，无需修改
+  // 请求头
+  HEADER:{
+    'content-type': 'application/json'
+  },
+  // Socket调试模式
+  SERVER_DEBUG:true,
+  // 心跳间隔
+  PINGINTERVAL:3000,
+  // 回话密钥名称 
+  TOKENNAME: 'Authori-zation',
+  //用户信息缓存名称
+  CACHE_USERINFO:'USERINFO',
+  //token缓存名称
+  CACHE_TOKEN:'TOKEN',
+  //token过期事件
+  CACHE_EXPIRES_TIME:'EXPIRES_TIME',
+  //模板缓存
+  CACHE_SUBSCRIBE_MESSAGE:'SUBSCRIBE_MESSAGE',
+  //用户信息缓存名称
+  CACHE_USERINFO: 'USERINFO',
+  //缓存经度
+  CACHE_LONGITUDE: 'LONGITUDE',
+  //缓存纬度
+  CACHE_LATITUDE: 'LATITUDE',
+}

css/animate.wxss

@@ -0,0 +1,3494 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.6.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2018 Daniel Eden
+ */
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+@-webkit-keyframes bounce {
+  from,
+  20%,
+  53%,
+  80%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
+@keyframes bounce {
+  from,
+  20%,
+  53%,
+  80%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+  -webkit-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
+
+@-webkit-keyframes flash {
+  from,
+  50%,
+  to {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
+
+@keyframes flash {
+  from,
+  50%,
+  to {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  -webkit-animation-name: flash;
+  animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+}
+
+@-webkit-keyframes rubberBand {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes rubberBand {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.rubberBand {
+  -webkit-animation-name: rubberBand;
+  animation-name: rubberBand;
+}
+
+@-webkit-keyframes shake {
+  from,
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+@keyframes shake {
+  from,
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+@-webkit-keyframes headShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes headShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.headShake {
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-name: headShake;
+  animation-name: headShake;
+}
+
+@-webkit-keyframes swing {
+  20% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  to {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+@keyframes swing {
+  20% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  to {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+.swing {
+  -webkit-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-animation-name: swing;
+  animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%,
+  20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%,
+  60%,
+  80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%,
+  20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%,
+  60%,
+  80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.tada {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes wobble {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.wobble {
+  -webkit-animation-name: wobble;
+  animation-name: wobble;
+}
+
+@-webkit-keyframes jello {
+  from,
+  11.1%,
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  22.2% {
+    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+
+  33.3% {
+    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+
+  44.4% {
+    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+
+  55.5% {
+    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+
+  66.6% {
+    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+
+  77.7% {
+    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+
+  88.8% {
+    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+
+@keyframes jello {
+  from,
+  11.1%,
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  22.2% {
+    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+
+  33.3% {
+    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+
+  44.4% {
+    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+
+  55.5% {
+    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+
+  66.6% {
+    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+
+  77.7% {
+    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+
+  88.8% {
+    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+
+.jello {
+  -webkit-animation-name: jello;
+  animation-name: jello;
+  -webkit-transform-origin: center;
+  transform-origin: center;
+}
+
+@-webkit-keyframes bounceIn {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes bounceIn {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, 5px, 0);
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceInDown {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, 5px, 0);
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+    transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+    transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(5px, 0, 0);
+    transform: translate3d(5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceInLeft {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+    transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+    transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(5px, 0, 0);
+    transform: translate3d(5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+    transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceInRight {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+    transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounceInRight {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+    transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -5px, 0);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceInUp {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+    transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -5px, 0);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounceInUp {
+  -webkit-animation-name: bounceInUp;
+  animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  50%,
+  55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+}
+
+@keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  50%,
+  55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+}
+
+.bounceOut {
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-animation-name: bounceOut;
+  animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+  20% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  40%,
+  45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+@keyframes bounceOutDown {
+  20% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  40%,
+  45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.bounceOutDown {
+  -webkit-animation-name: bounceOutDown;
+  animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.bounceOutLeft {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+@keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.bounceOutRight {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+  20% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  40%,
+  45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+@keyframes bounceOutUp {
+  20% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  40%,
+  45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.bounceOutUp {
+  -webkit-animation-name: bounceOutUp;
+  animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+  animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInLeftBig {
+  -webkit-animation-name: fadeInLeftBig;
+  animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInRightBig {
+  -webkit-animation-name: fadeInRightBig;
+  animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInUpBig {
+  -webkit-animation-name: fadeInUpBig;
+  animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+@keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.fadeOutDownBig {
+  -webkit-animation-name: fadeOutDownBig;
+  animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+  animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.fadeOutLeftBig {
+  -webkit-animation-name: fadeOutLeftBig;
+  animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+  animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+@keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.fadeOutRightBig {
+  -webkit-animation-name: fadeOutRightBig;
+  animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+@keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.fadeOutUpBig {
+  -webkit-animation-name: fadeOutUpBig;
+  animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+@keyframes flip {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+.animated.flip {
+  -webkit-backface-visibility: visible;
+  backface-visibility: visible;
+  -webkit-animation-name: flip;
+  animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+  animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInY {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInY;
+  animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutX {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutX {
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-animation-name: flipOutX;
+  animation-name: flipOutX;
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutY {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipOutY;
+  animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+    transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: skewX(20deg);
+    transform: skewX(20deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: skewX(-5deg);
+    transform: skewX(-5deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes lightSpeedIn {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+    transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: skewX(20deg);
+    transform: skewX(20deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: skewX(-5deg);
+    transform: skewX(-5deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.lightSpeedIn {
+  -webkit-animation-name: lightSpeedIn;
+  animation-name: lightSpeedIn;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+    transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+@keyframes lightSpeedOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+    transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOut {
+  -webkit-animation-name: lightSpeedOut;
+  animation-name: lightSpeedOut;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateIn {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  -webkit-animation-name: rotateIn;
+  animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownLeft {
+  -webkit-animation-name: rotateInDownLeft;
+  animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  -webkit-animation-name: rotateInDownRight;
+  animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  -webkit-animation-name: rotateInUpLeft;
+  animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  -webkit-animation-name: rotateInUpRight;
+  animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOut {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  -webkit-animation-name: rotateOut;
+  animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  -webkit-animation-name: rotateOutDownLeft;
+  animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  -webkit-animation-name: rotateOutDownRight;
+  animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  -webkit-animation-name: rotateOutUpLeft;
+  animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  -webkit-animation-name: rotateOutUpRight;
+  animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%,
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%,
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%,
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%,
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+  -webkit-animation-name: hinge;
+  animation-name: hinge;
+}
+
+@-webkit-keyframes jackInTheBox {
+  from {
+    opacity: 0;
+    -webkit-transform: scale(0.1) rotate(30deg);
+    transform: scale(0.1) rotate(30deg);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+  }
+
+  50% {
+    -webkit-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  70% {
+    -webkit-transform: rotate(3deg);
+    transform: rotate(3deg);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes jackInTheBox {
+  from {
+    opacity: 0;
+    -webkit-transform: scale(0.1) rotate(30deg);
+    transform: scale(0.1) rotate(30deg);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+  }
+
+  50% {
+    -webkit-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  70% {
+    -webkit-transform: rotate(3deg);
+    transform: rotate(3deg);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.jackInTheBox {
+  -webkit-animation-name: jackInTheBox;
+  animation-name: jackInTheBox;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes rollIn {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.rollIn {
+  -webkit-animation-name: rollIn;
+  animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+
+@keyframes rollOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+
+.rollOut {
+  -webkit-animation-name: rollOut;
+  animation-name: rollOut;
+}
+
+@-webkit-keyframes zoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  -webkit-animation-name: zoomIn;
+  animation-name: zoomIn;
+}
+
+@-webkit-keyframes zoomInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+@keyframes zoomInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInDown {
+  -webkit-animation-name: zoomInDown;
+  animation-name: zoomInDown;
+}
+
+@-webkit-keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+@keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInLeft {
+  -webkit-animation-name: zoomInLeft;
+  animation-name: zoomInLeft;
+}
+
+@-webkit-keyframes zoomInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+@keyframes zoomInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInRight {
+  -webkit-animation-name: zoomInRight;
+  animation-name: zoomInRight;
+}
+
+@-webkit-keyframes zoomInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+@keyframes zoomInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInUp {
+  -webkit-animation-name: zoomInUp;
+  animation-name: zoomInUp;
+}
+
+@-webkit-keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.zoomOut {
+  -webkit-animation-name: zoomOut;
+  animation-name: zoomOut;
+}
+
+@-webkit-keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+@keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOutDown {
+  -webkit-animation-name: zoomOutDown;
+  animation-name: zoomOutDown;
+}
+
+@-webkit-keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+    transform: scale(0.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+
+@keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+    transform: scale(0.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+
+.zoomOutLeft {
+  -webkit-animation-name: zoomOutLeft;
+  animation-name: zoomOutLeft;
+}
+
+@-webkit-keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+    transform: scale(0.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+
+@keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+    transform: scale(0.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+
+.zoomOutRight {
+  -webkit-animation-name: zoomOutRight;
+  animation-name: zoomOutRight;
+}
+
+@-webkit-keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+@keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOutUp {
+  -webkit-animation-name: zoomOutUp;
+  animation-name: zoomOutUp;
+}
+
+@-webkit-keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideInUp {
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInUp {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+}
+
+@-webkit-keyframes slideOutDown {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.slideOutDown {
+  -webkit-animation-name: slideOutDown;
+  animation-name: slideOutDown;
+}
+
+@-webkit-keyframes slideOutLeft {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+  animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+}