项目目录：
模拟数据：
utils / data.js
function getSData() { var data = [ { "name": "热销榜", "type": -1, "foods": [ { "name": "皮蛋瘦肉粥", "price": 10, "oldPrice": "", "description": "咸粥", "sellCount": 229, "Count": 0, "rating": 100, "info": "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "很喜欢的粥", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "扁豆焖面", "price": 14, "oldPrice": "", "description": "", "sellCount": 188, "Count": 0, "rating": 96, "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "info": "", "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "葱花饼", "price": 10, "oldPrice": "", "description": "", "sellCount": 124, "Count": 0, "rating": 85, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "没啥味道", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 1, "text": "很一般啊", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "牛肉馅饼", "price": 14, "oldPrice": "", "description": "", "sellCount": 114, "Count": 0, "rating": 91, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "难吃不推荐", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "招牌猪肉白菜锅贴/10个", "price": 17, "oldPrice": "", "description": "", "sellCount": 101, "Count": 0, "rating": 78, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "不脆,不好吃", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "南瓜粥", "price": 9, "oldPrice": "", "description": "甜粥", "sellCount": 91, "Count": 0, "rating": 100, "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "红豆薏米美肤粥", "price": 12, "oldPrice": "", "description": "甜粥", "sellCount": 86, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "八宝酱菜", "price": 4, "oldPrice": "", "description": "", "sellCount": 84, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "红枣山药糙米粥", "price": 10, "oldPrice": "", "description": "", "sellCount": 81, "Count": 0, "rating": 91, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "糊塌子", "price": 10, "oldPrice": "", "description": "", "sellCount": 80, "Count": 0, "rating": 93, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "单人精彩套餐", "type": 2, "foods": [ { "name": "红枣山药粥套餐", "price": 29, "oldPrice": 36, "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注", "sellCount": 17, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "冰爽饮品限时特惠", "type": 1, "foods": [ { "name": "VC无限橙果汁", "price": 8, "oldPrice": 10, "description": "", "sellCount": 15, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "还可以", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "精选热菜", "type": -1, "foods": [ { "name": "娃娃菜炖豆腐", "price": 17, "oldPrice": "", "description": "", "sellCount": 43, "Count": 0, "rating": 92, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "菜量还可以,味道还可以", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "手撕包菜", "price": 16, "oldPrice": "", "description": "", "sellCount": 29, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "香酥黄金鱼/3条", "price": 11, "oldPrice": "", "description": "", "sellCount": 15, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "爽口凉菜", "type": -1, "foods": [ { "name": "八宝酱菜", "price": 4, "oldPrice": "", "description": "", "sellCount": 84, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "拍黄瓜", "price": 9, "oldPrice": "", "description": "", "sellCount": 28, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "精选套餐", "type": -1, "foods": [ { "name": "红豆薏米粥套餐", "price": 37, "oldPrice": "", "description": "红豆薏米粥,三鲜干蒸烧卖,拍黄瓜", "sellCount": 3, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "皮蛋瘦肉粥套餐", "price": 31, "oldPrice": "", "description": "", "sellCount": 12, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "果拼果汁", "type": -1, "foods": [ { "name": "蜜瓜圣女萝莉杯", "price": 6, "oldPrice": "", "description": "", "sellCount": 1, "Count": 0, "rating": "", "info": "", "ratings": [], "icon": "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "加多宝", "price": 6, "oldPrice": "", "description": "", "sellCount": 7, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "VC无限橙果汁", "price": 8, "oldPrice": 10, "description": "", "sellCount": 15, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "还可以", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "小吃主食", "type": -1, "foods": [ { "name": "扁豆焖面", "price": 14, "oldPrice": "", "description": "", "sellCount": 188, "Count": 0, "rating": 96, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "葱花饼", "price": 10, "oldPrice": "", "description": "", "sellCount": 124, "Count": 0, "rating": 85, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "没啥味道", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 1, "text": "很一般啊", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "牛肉馅饼", "price": 14, "oldPrice": "", "description": "", "sellCount": 114, "Count": 0, "rating": 91, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "难吃不推荐", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "招牌猪肉白菜锅贴/10个", "price": 17, "oldPrice": "", "description": "", "sellCount": 101, "Count": 0, "rating": 78, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "不脆,不好吃", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "糊塌子", "price": 10, "oldPrice": "", "description": "", "sellCount": 80, "Count": 0, "rating": 93, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "特色粥品", "type": -1, "foods": [ { "name": "皮蛋瘦肉粥", "price": 10, "oldPrice": "", "description": "咸粥", "sellCount": 229, "Count": 0, "rating": 100, "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "很喜欢的粥", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "南瓜粥", "price": 9, "oldPrice": "", "description": "甜粥", "sellCount": 91, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "红豆薏米美肤粥", "price": 12, "oldPrice": "", "description": "甜粥", "sellCount": 86, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "红枣山药糙米粥", "price": 10, "oldPrice": "", "description": "", "sellCount": 81, "Count": 0, "rating": 91, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "鲜蔬菌菇粥", "price": 11, "oldPrice": "", "description": "咸粥", "sellCount": 56, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "田园蔬菜粥", "price": 10, "oldPrice": "", "description": "咸粥", "sellCount": 33, "Count": 0, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" } ], "icon": "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750" } ] } ]; return data || [];}module.exports = { getSData: getSData} 逻辑层：
goods.js
// pages/goods/goods.jsvar data_ = require('../../utils/data.js')Page({ /** * 页面的初始数据 */ data: { goods: [], toView: '0', scrollTop: 100, foodCounts: 0, totalPrice: 0,// 总价格 totalCount: 0, // 总商品数 carArray: [], minPrice: 20,//起送價格 payDesc: '', deliveryPrice: 4,//配送費 fold: true, selectFoods: [{ price: 20, count: 2 }], cartShow: 'none', status: 0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 this.setData({ goods: data_.getSData(), payDesc: this.payDesc() }); }, /** * 点击左侧菜单 */ selectMenu: function (e) { var index = e.currentTarget.dataset.itemIndex; this.setData({ toView: 'order' + index.toString() }) console.log(this.data.toView); }, /** * 移除商品 */ decreaseCart: function (e) { var index = e.currentTarget.dataset.itemIndex; var parentIndex = e.currentTarget.dataset.parentindex; this.data.goods[parentIndex].foods[index].Count-- var num = this.data.goods[parentIndex].foods[index].Count; var mark = 'a' + index + 'b' + parentIndex var price = this.data.goods[parentIndex].foods[index].price; var obj = { price: price, num: num, mark: mark, name: name, index: index, parentIndex: parentIndex }; var carArray1 = this.data.carArray.filter(item => item.mark != mark); carArray1.push(obj); console.log(carArray1); this.setData({ carArray: carArray1, goods: this.data.goods }) this.calTotalPrice() this.setData({ payDesc: this.payDesc(), }) //关闭弹起 var count1 = 0 for (let i = 0; i < carArray1.length; i++) { if (carArray1[i].num == 0) { count1++; } } //console.log(count1) if (count1 == carArray1.length) { if (num == 0) { this.setData({ cartShow: 'none' }) } } }, /** * 移除商品 */ decreaseShopCart: function (e) { console.log('1'); this.decreaseCart(e); }, /** * 添加到购物车 */ addCart(e) { var index = e.currentTarget.dataset.itemIndex; var parentIndex = e.currentTarget.dataset.parentindex; this.data.goods[parentIndex].foods[index].Count++; var mark = 'a' + index + 'b' + parentIndex var price = this.data.goods[parentIndex].foods[index].price; var num = this.data.goods[parentIndex].foods[index].Count; var name = this.data.goods[parentIndex].foods[index].name; var obj = { price: price, num: num, mark: mark, name: name, index: index, parentIndex: parentIndex }; var carArray1 = this.data.carArray.filter(item => item.mark != mark) carArray1.push(obj) console.log(carArray1); this.setData({ carArray: carArray1, goods: this.data.goods }) this.calTotalPrice(); this.setData({ payDesc: this.payDesc() }) }, addShopCart: function (e) { this.addCart(e); }, /** * 计算总价 */ calTotalPrice: function () { var carArray = this.data.carArray; var totalPrice = 0; var totalCount = 0; for (var i = 0; i < carArray.length; i++) { totalPrice += carArray[i].price * carArray[i].num; totalCount += carArray[i].num } this.setData({ totalPrice: totalPrice, totalCount: totalCount, //payDesc: this.payDesc() }); }, /** * 差几元起送 */ payDesc() { if (this.data.totalPrice === 0) { return `￥${this.data.minPrice}元起送`; } else if (this.data.totalPrice < this.data.minPrice) { let diff = this.data.minPrice - this.data.totalPrice; return '还差' + diff + '元起送'; } else { return '去结算'; } }, /** * 结算 */ pay() { if (this.data.totalPrice < this.data.minPrice) { return; } // window.alert('支付' + this.totalPrice + '元'); //确认支付逻辑 var resultType = "success"; wx.redirectTo({ url: '../pay/pay?resultType=' + resultType }) }, /** * 弹起购物车 */ toggleList: function () { if (!this.data.totalCount) { return; } this.setData({ fold: !this.data.fold, }) var fold = this.data.fold //console.log(this.data.fold); this.cartShow(fold) }, /** * 显示购物车 */ cartShow: function (fold) { console.log(fold); if (fold == false) { this.setData({ cartShow: 'block', }) } else { this.setData({ cartShow: 'none', }) } console.log(this.data.cartShow); }, /** * 切换选项卡 */ tabChange: function (e) { var showtype = e.target.dataset.type; this.setData({ status: showtype, }); }}) 页面布局：
goods.wxml
粥品香坊（回龙观）
蜂鸟专送/38分钟送达 在线支付满28减5
5个 "粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。"
商品 评论 商家 { {item.name}} { {item.name}} 
{ {food.name}} { {food.description}} 月售{ {food.sellCount}} 好评{ {food.rating}} ￥{ {food.price}} ￥{ {food.oldPrice}} { {food.Count}} { {totalCount}} ￥{ {totalPrice}} 另需配送费￥{ {deliveryPrice}}元 { {payDesc}} 购物车 清空 { {item.name}} ￥{ {item.price*item.num}} { {item.num}}
样式：
goods.wxss
/* pages/goods/goods.wxss */.goods { display: flex; position: absolute; width: 100%; top: 174px; bottom: 46px; overflow: hidden; font-family:"微软雅黑";}.goods .menu-wrapper { flex: 0 0 80px; width: 80px; background: #f3f5f7;}.goods .menu-wrapper .menu-item { display: table; width: 56px; height: 54px; line-height: 14px; padding: 0 12px;}.goods .menu-wrapper .menu-item:current { position: relative; z-index: 10; margin-top: -1px; background: #fff; font-weight: 700;}.goods .menu-wrapper .menu-item:current .text { border: none;}.goods .menu-wrapper .menu-item .icon { display: inline-block; width: 12px; height: 12px; vertical-align: top; margin-right: 4px; background-size: 12px 12px; background-repeat: no-repeat;}.goods .menu-wrapper .menu-item .text { display: table-cell; width: 56px; vertical-align: middle; position: relative; font-size: 12px; border-bottom:1px solid rgba(7,17,27,0.1);}.goods .foods-wrapper { flex: 1;}.goods .foods-wrapper .food-list .title { padding-left: 14px; height: 26px; line-height: 26px; border-left: 2px solid #d9dde1; font-size: 12px; color: rgb(147, 153, 159); background: #f3f5f7;}.goods .foods-wrapper .food-list .food-item { display: flex; margin: 18px; padding-bottom: 18px; position: relative; border-bottom:1px solid rgba(7,17,27,0.1);}.goods .foods-wrapper .food-list .food-item:last-child { border: none; margin-bottom: 0px;}.goods .foods-wrapper .food-list .food-item .icon { flex: 0 0 57px; margin-right: 10px;}.goods .foods-wrapper .food-list .food-item .content { flex: 1;}.goods .foods-wrapper .food-list .food-item .content .name { margin: 2px 0 8px 0; font-size: 14px; line-height: 14px; height: 14px; color: rgb(7, 17, 27);}.goods .foods-wrapper .food-list .food-item .content .desc, .extra { font-size: 10px; line-height: 10px; color: rgb(147, 153, 159);}.goods .foods-wrapper .food-list .food-item .content .desc { margin-bottom: 8px; line-height: 12px;}.goods .foods-wrapper .food-list .food-item .content .extra .count { margin-right: 12px;}.goods .foods-wrapper .food-list .food-item .content .price { font-weight: 700px; line-height: 24px;}.goods .foods-wrapper .food-list .food-item .content .price .now { margin-right: 8px; font-size: 14px; color: rgb(240, 20, 20);}.goods .foods-wrapper .food-list .food-item .content .price .old { font-size: 10px; color: rgb(147, 153, 159); text-decoration: line-through;}.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper { position: absolute; right: 0; bottom: 12px;}/* cartControl 样式 */.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl { font-size: 0;}.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl .cart-decrease,.cart-add { display: inline-block; padding: 4px 6px 6px 6px;}.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl .cart-decrease,.cart-add :fade-enter-active, :fade-leave-active { transition: all 0.4s linear;}.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl .cart-decrease,.cart-add :fade-enter, :fade-leave-active { opacity: 0 transform translate3d(24px, 0, 0);}.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl .cart-decrease,.cart-add .inner { display: inline-block; line-height: 24px; font-size: 24px; vertical-align: top; color: rgb(0, 160, 220, 0.2);}.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl .cart-decrease,.cart-add :inner-enter-active, :inner-leave-active { transition: all 0.4s linear; transform: rotate(0);}.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl .cart-decrease,.cart-add :inner-enter, :inner-leave-active { opacity: 0 transform rotate(180deg);}.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl .cart-count { display: inline-block; font-size: 10px; line-height: 24px; width: 12px; vertical-align: top; padding-top: 6px; text-align: center; color: rgb(147, 153, 159);}.goods .foods-wrapper .food-list .food-item .content .cartControl-wrapper .cartControl .cart-add { display: inline-block; padding: 6px; line-height: 24px; font-size: 24px; vertical-align: top; color: rgb(0, 160, 220, 0.2);}/* shopcart 样式 */.shopCart { position: fixed; left: 0px; bottom: 0px; z-index: 50; width: 100%; height: 48px;}.shopCart .content { display: flex; background: #141d27;}.shopCart .content .content-left { flex: 1;}.shopCart .content .content-left .logo-wrapper { display: inline-block; position: relative; top: -10px; margin: 0 12px; padding: 6px; width: 56px; height: 56px; box-sizing: border-box; vertical-align: top; border-radius: 50%; background: #141d27;}.shopCart .content .content-left .logo-wrapper .num { position: absolute; top: 0; right: 0; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 16px; font-size: 9px; font-weight: 700; color: #fff; background: rgb(240, 20, 20); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);}.shopCart .content .content-left .logo-wrapper .logo { width: 100%; height: 100%; text-align: center; border-radius: 50%; background: #2b343c;}.shopCart .content .content-left .logo-wrapper .logo.highlight { background: rgb(0, 160, 220);}.shopCart .content .content-left .logo-wrapper .logo .icon-gouwuche { line-height: 44px; font-size: 24px; color: #80858a;}.shopCart .content .content-left .logo-wrapper .logo .icon-gouwuche.highlight { color: #fff;}.shopCart .content .content-left .price { display: inline-block; vertical-align: top; margin-top: 12px; line-height: 24px; padding-right: 12px; box-sizing: border-box; border-right: 1px solid rgba(255, 255, 255, 0.1); font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.4);}.shopCart .content .content-left .price.highlight { color: #fff;}.shopCart .content .content-left .desc { display: inline-block; vertical-align: top; line-height: 24px; margin-left: 12px; margin-top: 12px; color: rgba(255, 255, 255, 0.4); font-size: 10px;}.shopCart .content .content-right { flex: 0 0 105px; width: 105px;}.shopCart .content .content-right .pay { height: 48px; line-height: 48px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.4); font-weight: 700; background: #2b333b;}.shopCart .content .content-right .pay.not-enough { background: #2b333b;}.shopCart .content .content-right .pay.enough { background: #00b43c; color: #fff;}.shopCart .ball-container .ball { position: fixed; left: 32px; bottom: 22px; z-index: 200; transition: all 0.6s cubic-bezier(0.49, -0.29, 0.75, 0.41);}.shopCart .ball-container .ball .inner { width: 16px; height: 16px; border-radius: 50%; background: rgb(0, 160, 220); transition: all 0.4s linear;}.shopCart .shopcart-list { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; transform:translate3d(0, -100%, 0);}.shopCart .shopcart-list :fade-enter-active, :fade-leave-active { transition: all 0.5s transform translate3d(0, -100%, 0);}.shopCart .shopcart-list :fade-enter, :fade-leave-active { transform: translate3d(0, 0, 0);}.shopCart .shopcart-list .list-header { height: 40px; line-height: 40px; padding: 0 18px; background: #f3f5f7; border-bottom: 1px solid rgba(7, 17, 27, 0.1);}.shopCart .shopcart-list .list-header .title { float: left; font-size: 14px; color: rgb(7, 17, 27);}.shopCart .shopcart-list .list-header .empty { float: right; font-size: 12px; color: rgb(0, 160, 220);}.shopCart .shopcart-list .list-content { padding: 0 18px; max-height: 217px; overflow: hidden; background: #fff;}.shopCart .shopcart-list .list-content .shopcart-food { position: relative; padding: 12px 0; box-sizing: border-box; /*border-top: 1px solid rgba(7,17,27,0.1);*/}.shopCart .shopcart-list .list-content .shopcart-food .name { line-height: 24px; font-size: 14px; color: rgb(7, 17, 27);}.shopCart .shopcart-list .list-content .shopcart-food .price { position: absolute; right: 90px; bottom: 12px; line-height: 24px; font-size: 14px; font-weight: 700; color: rgb(240, 20, 20);}.shopCart .shopcart-list .list-content .shopcart-food .cartControl-wrapper { position: absolute; right: 0; bottom: 6px;}/* head */.header { position: relative; color: #fff; overflow: hidden; background: rgba(7, 17, 27, 0.5);}.header .content-wrapper { position: relative; padding: 24px 12px 18px 24px; font-size: 0;}.header .content-wrapper .avatar { display: inline-block; vertical-align: top;}.header .content-wrapper .avatar img { border-radius: 2px;}.header .content-wrapper .content { display: inline-block; font-size: 14px; margin-left: 16px;}.header .content-wrapper .content .title { margin: 2px 0 8px 0;}.header .content-wrapper .content .title .brand { display: inline-block; vertical-align: top; width: 30px; height: 18px; /*bg-image('brand')*/ background-size: 30px 18px; background-repeat: no-repeat;}.header .content-wrapper .content .title .name { margin-left: 6px; font-size: 16px; line-height: 18px; font-weight: bold;}.header .content-wrapper .content .description { margin-bottom: 10px; line-height: 12px; font-size: 12px;}.header .content-wrapper .content .support .icon { display: inline-block; width: 12px; height: 12px; vertical-align: top; margin-right: 4px; background-size: 12px 12px; background-repeat: no-repeat; /*&.decrease bg-image('decrease_1') &.discount bg-image('discount_1') &.guarantee bg-image('guarantee_1') &.invoice bg-image('invoice_1') &.special bg-image('special_1')*/}.header .content-wrapper .content .support .text { line-height: 12px; font-size: 12px;}.header .content-wrapper .content .supports-count { position: absolute; right: 12px; bottom: 14px; padding: 0 8px; height: 24px; line-height: 24px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); text-align: content;}.header .content-wrapper .content .supports-count .count { font-size: 10px; vertical-align: top;}.header .content-wrapper .content .supports-count .icon { margin-left: 2px; line-height: 24px; font-size: 10px;}.header .bulletin-wrapper { position: relative; background-color: rgba(7, 17, 27, 0.2); height: 28px; line-height: 28px; padding: 0 22px 0 12px; white-space: normal; overflow: hidden; text-overflow: ellipsis;}.header .bulletin-wrapper .bulletin-title { display: inline-block; vertical-align: top; margin-top: 8px; width: 22px; height: 12px; /*bg-image('bulletin')*/ background-size: 22px 12px; background-repeat: no-repeat;}.header .bulletin-wrapper .bulletin-text { vertical-align: top; margin: 0 4px; font-size: 10px;}.header .bulletin-wrapper .icon { position: absolute; font-size: 20px; right: 12px; top: 0px;}.header .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter: blur(10px);}.header .background .detail { position: fixed; z-index: 100; top: 0; right: 0; width: 100%; height: 100%; overflow: auto; background: rgba(7, 17, 27, 0.8); -webkit-backdrop-filter: blur(10px);}/* tab */.tab { display: -ms-flexbox; display: flex; width: 100%; height: 40px; line-height: 40px; /* border: 1px solid rgba(7,17,27,0.1); */ position: relative;}.tab .tab-item { -ms-flex: 1; flex: 1; text-align: center;}.tab .tab-item a { display: block; font-size: 14px; color: #4d555d;}.tab .tab-item .active { color: #f01414;}.list-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 40; /*backdrop-filter: blur(10px);*/ -webkit-backdrop-filter: 1; background: rgba(7, 17, 27, 0.6);}.list-mask :fade-enter-active, :fade-leave-active { opacity: 1; transition: all 0.5s; background: rgba(7, 17, 27, 0.6);}.food-list :fade-enter, :fade-leave-active { opacity: 0; background: rgba(7, 17, 27, 0);}/* 字体图标 */@font-face { font-family: 'iconfont'; src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'), url('iconfont.ttf') format('truetype'); font-weight: 500; font-style: normal;}.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.icon-zuoyoujiantou:before { content: "\e600";}.icon-gouwuche:before { content: "\e601";}.icon-jian:before { content: "\e629";}.icon-aixin:before { content: "\e61f";}.icon-down:before { content: "\e603";}.icon-cha:before { content: "\e646";}.icon-jia:before { content: "\e622";}.icon-gou:before { content: "\e73d";}.icon-damuzhi:before { content: "\e607";}.icon-weibiaoti6-copy:before { content: "\e670";} 效果图：
