diff --git a/App.vue b/App.vue
index b59f73f..2acac8d 100644
--- a/App.vue
+++ b/App.vue
@@ -5,9 +5,7 @@
     export default {
         onLaunch: function() {
             im.initIm('lmxuhwaglu76d')
-			
 			return
-
             //#ifdef APP-PLUS
             // 获取系统版本号
             getVersions({
diff --git a/apis/index.js b/apis/index.js
index 8070ca2..5a6e2a0 100644
--- a/apis/index.js
+++ b/apis/index.js
@@ -64,6 +64,12 @@ const request = (parameter, hideLoding = true) => {
 					return
 				}
 				errToast(res.statusCode)
+			},
+			fail(err) {
+				uni.showToast({
+					title: err.errMsg,
+					icon : 'none'
+				})
 			}
 		})
 	})
diff --git a/apis/interfaces/drink.js b/apis/interfaces/drink.js
index 4d2128a..eacae00 100644
--- a/apis/interfaces/drink.js
+++ b/apis/interfaces/drink.js
@@ -35,8 +35,21 @@ const drinkWater = () => {
 		method: 'POST',
 	})
 }
+/**
+ * @description:删除喝水记录
+ * @Date: 2022-01-20 15点08分
+ */
+const delDrinkWater = (id) => {
+	return request({
+		url: 	`health/waters/${id}`,
+		method: 'DELETE',
+	})
+}
+
+
 export {
 	waters,
 	setWaters,
-	drinkWater
+	drinkWater,
+	delDrinkWater
 }
diff --git a/apis/interfaces/im.js b/apis/interfaces/im.js
index df4f7dd..8e50713 100644
--- a/apis/interfaces/im.js
+++ b/apis/interfaces/im.js
@@ -19,9 +19,20 @@ const getUserInfo = (targetId) => {
         url: 'im/userInfo/' + targetId,
     })
 }
+
+/**
+ * 获取好友申请列表
+ */
+const getPedings = () => {
+    return request({
+        url: 'im/friends/pending'
+    })
+}
+
 
 export {
     getImToken,
     getFriends,
-    getUserInfo
+    getUserInfo,
+    getPedings
 }
diff --git a/apis/interfaces/sport.js b/apis/interfaces/sport.js
new file mode 100644
index 0000000..55530bb
--- /dev/null
+++ b/apis/interfaces/sport.js
@@ -0,0 +1,60 @@
+/*
+ * @Description:运动模块
+ * @Author: Aimee·Zhang
+ * @Date: 2022-01-19 13:20:39
+ * @LastEditors: Aimee·Zhang
+ * @LastEditTime: 2022-01-20 09:12:34
+ */
+import { request } from '../index'
+/**
+ * @description:动列表
+ * @params {*} 可翻页 按名称筛选
+ * @Date: 2022-01-19 13:21:35
+ */
+
+const healthSports = (data) => {
+	return request({
+		url: 'health/sports',
+		data: data
+	})
+}
+
+/**
+ * @description:添加运动
+ * @Date: 2022-01-19 13点27分
+ */
+const addHealthSports = (data) => {
+	return request({
+		url: 'health/exercises',
+		method: 'POST',
+		data: data
+	})
+}
+/**
+ * @description:编辑运动
+ * @Date: 2022-01-19 17:15:31
+ */
+const editHealthSports = (data) => {
+	return request({
+		url: `health/exercises/${data.exercise_id}`,
+		method: 'PUT',
+		data: data
+	})
+}
+
+/**
+ * @description: 删除运动
+ * @Date: 2022-01-20 09:12:35
+ */
+const delHealthSports = (data) => {
+	return request({
+		url: `health/exercises/${data.exercise_id}`,
+		method: 'DELETE'
+	})
+}
+export {
+	healthSports,
+	addHealthSports,
+	editHealthSports,
+	delHealthSports
+}
diff --git a/components/foods/index.vue b/components/foods/index.vue
index 94fefd1..c2c7264 100644
--- a/components/foods/index.vue
+++ b/components/foods/index.vue
@@ -4,7 +4,7 @@
  * @Author: Aimee·Zhang
  * @Date: 2022-01-11 12:08:34
  * @LastEditors: Aimee·Zhang
- * @LastEditTime: 2022-01-13 11:19:06
+ * @LastEditTime: 2022-01-20 10:03:43
 -->
 
 <template>
@@ -59,7 +59,8 @@
                 <view
                     class="lists-right"
                     v-else-if="type==='no-dian'"
-                    @click="editGoods(foodsItem)"
+                    @click.stop="editGoods(foodsItem)"
+                    @longpress.stop="longClickGoods(foodsItem)"
                 >
                     <view class="lists-title">
                         {{foodsItem.name}}
@@ -116,6 +117,10 @@ export default {
         editGoods(item) {
             this.$emit("editGoods", item);
         },
+        // 长按删除
+        longClickGoods(item) {
+            this.$emit("longClickGoods", item);
+        },
     },
 };
 </script>
diff --git a/components/sports/addPopup.vue b/components/sports/addPopup.vue
new file mode 100644
index 0000000..c0ce236
--- /dev/null
+++ b/components/sports/addPopup.vue
@@ -0,0 +1,208 @@
+
+<!--
+ * @Description:运动列表
+ * @Author: Aimee·Zhang
+ * @Date: 2022-01-19 15:07:02
+ * @LastEditors: Aimee·Zhang
+ * @LastEditTime: 2022-01-20 09:09:59
+-->
+
+<template>
+    <view class="foods--lists">
+        <u-popup
+            :show="addSportsShow"
+            :round="4"
+            mode="center"
+        >
+            <view class="popup">
+                <view class="popup-title">
+                    <span @click="cancleSport">取消</span>
+                    <span class="title">{{selectSports.title || '新增运动'}}</span>
+                    <span @click="comfirmSport">确认</span>
+                </view>
+                <view class="popup-item">
+                    <u-image
+                        :lazy-load="true"
+                        :src="selectSports.cover?selectSports.cover:require('../../static/imgs/apple.png')"
+                        radius="10"
+                        width="140rpx"
+                        height="140rpx"
+                        class="goods-img"
+                    />
+                    <view class="popup-item-title">
+                        {{selectSports.name}}
+                        <view class="des"><span>{{selectSports.calory || '0.0'}}</span> 千卡/60分钟</view>
+                    </view>
+                    <u-icon
+                        v-if="selectSports.title === '编辑运动'"
+                        name="trash"
+                        color="#ddd"
+                        size="16"
+                        label="删除这条数据"
+                        labelColor="#ddd"
+                        :bold="true"
+                        @click="delSport"
+                        style="padding-top: 30rpx;"
+                    />
+                </view>
+                <u-input
+                    placeholder="60"
+                    class="select-time"
+                    v-model="duration"
+										type="number"
+                >
+                    <u--text
+                        text="运动时间："
+                        slot="prefix"
+                        margin="0 3px 0 0"
+                        type="tips"
+                    />
+                    <u--text
+                        text="分钟"
+                        slot="suffix"
+                        margin="0 3px 0 0"
+                        type="tips"
+                    />
+                </u-input>
+                <view class="all-calory"> ≈ <span> {{total}} </span> 千卡</view>
+            </view>
+        </u-popup>
+    </view>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            duration: 60,
+        };
+    },
+    props: {
+        selectSports: {
+            type: Object,
+            default: {},
+        },
+        addSportsShow: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        total() {
+            return ((this.selectSports.calory * this.duration) / 60).toFixed(0);
+        },
+    },
+    watch: {
+        addSportsShow() {
+            this.duration = 60;
+        },
+        selectSports(val) {
+            console.log(val);
+            this.duration = val.duration;
+            console.log("监听传过来的参数");
+        },
+    },
+    methods: {
+        // 弹窗确认和取消功能
+        comfirmSport() {
+            this.$emit("comfirmSport", true, this.duration);
+        },
+        // 取消按钮触发事件
+        cancleSport() {
+            this.$emit("cancleSport", false);
+        },
+        // 删除按钮触发事件
+        delSport() {
+            this.$emit("delSport");
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+// 列表
+.foods--lists {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    margin-top: $margin;
+    // 弹窗样式
+    .popup {
+        width: 600rpx;
+        // min-height: 700rpx;
+        position: relative;
+        .popup-title {
+            color: $main-color;
+						font-size: $title-size-m;
+            border-bottom: solid 1rpx #f9f9f9;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+            span {
+                padding: $padding + 10 $padding;
+            }
+            .title {
+                color: $text-color;
+								font-size: $title-size;
+								font-weight: bold;
+            }
+        }
+
+        .popup-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            padding: $padding * 2 $padding $padding $padding;
+            font-size: $title-size-m;
+            color: $text-color;
+            border-bottom: solid 1rpx #f9f9f9;
+            .popup-item-title {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+                padding-top: $padding;
+                .des {
+                    padding-top: $padding * 0.4;
+                    span {
+                        color: $text-price;
+                        padding-right: $padding * 0.3;
+                    }
+                }
+            }
+        }
+
+        .select-time {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            padding: $padding 0;
+            // background: $main-color;
+            color: #fff;
+            margin: $margin * 3 0 $margin * 2 0;
+            width: 90%;
+            border-radius: 10rpx;
+            margin-left: 5%;
+        }
+        .all-calory {
+            position: absolute;
+            bottom: $padding * 6;
+            right: $padding;
+            font-size: $title-size-m;
+            color: $text-gray-m;
+            span {
+                padding: 0 $padding * 0.4;
+                font-size: $title-size + 10;
+                color: $main-color;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/components/sports/index.vue b/components/sports/index.vue
new file mode 100644
index 0000000..c62b086
--- /dev/null
+++ b/components/sports/index.vue
@@ -0,0 +1,212 @@
+
+<!--
+ * @Description:运动列表
+ * @Author: Aimee·Zhang
+ * @Date: 2022-01-19 15:07:02
+ * @LastEditors: Aimee·Zhang
+ * @LastEditTime: 2022-01-20 10:03:27
+-->
+
+<template>
+    <view class="foods--lists">
+        <view
+            class="foods-lists"
+            v-for="sportItem in lists"
+            :key="sportItem.sport_id"
+        >
+            <view class="lists-left">
+                <u-image
+                    :src="sportItem.cover?sportItem.cover:require('../../static/imgs/apple.png')"
+                    :lazy-load="true"
+                    v-if="type === 'add'"
+                    radius="10rpx"
+                    width="100rpx"
+                    height="100rpx"
+                    class="goods-img"
+                />
+                <!-- 新增-->
+                <view
+                    class="lists-right"
+                    v-if="type === 'add'"
+                    @click="addSport(sportItem)"
+                >
+                    <view class="lists-title">
+                        {{sportItem.name}}
+                        <view class="des"><span>{{sportItem.calory}}</span> 千卡/60分钟</view>
+                    </view>
+                    <u-icon
+                        name="arrow-right"
+                        color="#ddd"
+                        size="13"
+                        :bold="true"
+                    />
+                </view>
+
+                <!-- 显示结果 -->
+                <u-image
+                    :src="sportItem.sport.cover?sportItem.sport.cover:require('../../static/imgs/apple.png')"
+                    :lazy-load="true"
+                    v-if="type === 'edit'"
+                    radius="10rpx"
+                    width="100rpx"
+                    height="100rpx"
+                    class="goods-img"
+                />
+                <view
+                    class="lists-right"
+                    v-if="type==='edit'"
+                    @click.stop="editSport(sportItem)"
+                    @longpress.stop="longClick(sportItem)"
+                >
+                    <view class="lists-title">
+                        {{sportItem.sport.name}}
+                        <view class="des">{{sportItem.duration}}分钟</view>
+                    </view>
+
+                    <view class="lists-right1">
+                        {{sportItem.calory}}<span class="dw">千卡</span>
+                        <u-icon
+                            name="arrow-right"
+                            color="#ddd"
+                            size="13"
+                            :bold="true"
+                        />
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    data() {
+        return {};
+    },
+    props: {
+        lists: {
+            type: Array,
+            default: [],
+        },
+        type: {
+            type: String,
+            default: "add",
+        },
+    },
+    methods: {
+        // 添加运动模块
+        addSport(item) {
+            this.$emit("addSport", item);
+        },
+        // 编辑运动
+        editSport(item) {
+            this.$emit("editSport", item);
+        },
+        // 长按删除触发事件
+        longClick(item) {
+            this.$emit("longClick", item);
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+// 列表
+.foods-lists {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    margin-top: $margin;
+    .lists-right {
+        flex: 1;
+        font-size: $title-size-m - 6;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        color: $text-gray-m;
+        border-bottom: solid 1rpx #f7f7f7;
+        margin-left: $margin * 0.8;
+        padding: $padding 0;
+        .dw {
+            margin: 0 $margin * 0.6 0 $margin * 0.4;
+        }
+        .lists-right1 {
+            font-size: $title-size-m - 6;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            color: $text-gray-m;
+            font-weight: normal;
+            .dw {
+                margin: 0 $margin * 0.6 0 $margin * 0.4;
+            }
+        }
+    }
+
+    .goods-img {
+        box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
+        border-radius: 20rpx;
+        opacity: 0.4;
+    }
+    .lists-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        box-sizing: border-box;
+        font-size: $title-size - 2;
+        color: $text-color;
+        font-weight: bold;
+        flex: 1;
+        .lists-title {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            box-sizing: border-box;
+            font-size: $title-size-m;
+            color: $text-color;
+            .des {
+                margin-top: 10rpx;
+            }
+            span {
+                color: $text-price;
+                font-size: $title-size-m - 6;
+                font-weight: normal;
+                padding-right: $padding * 0.3;
+            }
+            .des {
+                color: $text-gray-m;
+                font-size: $title-size-m - 6;
+                font-weight: normal;
+            }
+        }
+    }
+    .dian {
+        width: 20rpx;
+        height: 20rpx;
+        border-radius: 50%;
+        margin-right: $margin;
+    }
+    .dian1 {
+        background: #fbbf0f;
+    }
+    .dian2 {
+        background: #fa624d;
+    }
+    .dian3 {
+        background: #02c7bd;
+    }
+    .dianlists {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        box-sizing: border-box;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 348dc06..5bae660 100644
--- a/pages.json
+++ b/pages.json
@@ -1,5 +1,6 @@
 {
-    "pages": [{
+    "pages": [
+        {
             "path": "pages/index/index",
             "name": "Index",
             "style": {
@@ -67,6 +68,15 @@
                 "navigationBarTextStyle": "white"
             }
         },
+        {
+            "path": "pages/record/addExercises",
+            "name": "AddExercises",
+            "style": {
+                "navigationBarTitleText": "添加运动",
+                "navigationBarBackgroundColor": "#34CE98",
+                "navigationBarTextStyle": "white"
+            }
+        },
         {
             "path": "pages/evaluation/list",
             "name": "EvaluationList",
@@ -134,18 +144,20 @@
             "path": "pages/store/index",
             "name": "Store",
             "style": {
-                "navigationBarTitleText": "健康生活",
+                "navigationBarTitleText": "好物",
                 "enablePullDownRefresh": true,
                 "app-plus": {
                     "titleNView": {
                         "backgroundColor": "#FFFFFF",
-                        "buttons": [{
-                            "float": "right",
-                            "text": "\ue603",
-                            "fontSrc": "/static/iconfont.ttf",
-                            "color": "#000",
-                            "fontSize": "20px"
-                        }]
+                        "buttons": [
+                            {
+                                "float": "right",
+                                "text": "\ue603",
+                                "fontSrc": "/static/iconfont.ttf",
+                                "color": "#000",
+                                "fontSize": "20px"
+                            }
+                        ]
                     }
                 }
             }
@@ -355,7 +367,8 @@
                 "navigationBarBackgroundColor": "#FFFFFF",
                 "app-plus": {
                     "titleNView": {
-                        "buttons": [{
+                        "buttons": [
+                            {
                                 "float": "left",
                                 "text": "\ue605",
                                 "fontSrc": "/static/iconfont.ttf",
@@ -375,63 +388,66 @@
             }
         },
         {
-            "path": "pages/im/private/index",
-			"name": "imPrivate",
+            "path": "pages/im/private/index",
+            "name": "imPrivate",
             "style": {
-                "navigationBarTitleText": "聊天",
-				"navigationBarBackgroundColor":"#FFFFFF",
-				"disableScroll": true,
+                "navigationBarTitleText": "聊天",
+                "navigationBarBackgroundColor": "#FFFFFF",
+                "disableScroll": true,
                 "app-plus": {
                     "titleNView": {
                         "type": "default",
-                        "buttons": [{
-                            "float": "right",
-                            "fontSrc": "/static/iconfont.ttf",
-                            "text": "\ue607",
-                            "fontSize": "20px"
-                        }]
+                        "buttons": [
+                            {
+                                "float": "right",
+                                "fontSrc": "/static/iconfont.ttf",
+                                "text": "\ue607",
+                                "fontSize": "20px"
+                            }
+                        ]
                     }
                 }
             }
-        },
-        {
-            "path": "pages/im/private/setting",
-			"name": "imPrivateSetting",
-            "style": {
-                "navigationBarTitleText": "设置"
-            }
         },
         {
-            "path": "pages/im/friends/index",
-			"name": "imFriends",
+            "path": "pages/im/private/setting",
+            "name": "imPrivateSetting",
             "style": {
-                "navigationBarTitleText": "我的好友"
+                "navigationBarTitleText": "聊天设置"
             }
         },
         {
-            "path": "pages/im/friends/pending",
-			"name": "imFriendsPending",
+            "path": "pages/im/friends/index",
+            "name": "imFriends",
+            "style": {
+                "navigationBarTitleText": "我的好友"
+            }
+        },
+        {
+            "path": "pages/im/friends/pending",
+            "name": "imFriendsPending",
             "style": {
                 "navigationBarTitleText": "新的朋友"
             }
         },
         {
-            "path": "pages/im/friends/info",
-			"name": "imFriendsInfo",
+            "path": "pages/im/friends/info",
+            "name": "imFriendsInfo",
             "style": {
-                "navigationBarTitleText": ""
+                "navigationBarTitleText": "好友资料",
+				"navigationBarBackgroundColor":"#FFFFFF"
             }
         },
         {
-            "path": "pages/im/friends/mine",
-			"name": "imFriendsMine",
+            "path": "pages/im/friends/mine",
+            "name": "imFriendsMine",
             "style": {
                 "navigationBarTitleText": "我的资料"
             }
         },
         {
-            "path": "pages/im/group/index",
-			"name": "imGroup",
+            "path": "pages/im/group/index",
+            "name": "imGroup",
             "style": {
                 "navigationBarTitleText": "我的群聊"
             }
@@ -482,14 +498,16 @@
                     "titleNView": {
                         "backgroundImage": "linear-gradient(to right, #34ce98, #22aa98)",
                         "type": "transparent",
-                        "buttons": [{
-                            "float": "right",
-                            "text": "\ue607",
-                            "fontSrc": "/static/iconfont.ttf",
-                            "color": "#FFF",
-                            "fontSize": "20px",
-                            "background": "rgba(0,0,0,0)"
-                        }],
+                        "buttons": [
+                            {
+                                "float": "right",
+                                "text": "\ue607",
+                                "fontSrc": "/static/iconfont.ttf",
+                                "color": "#FFF",
+                                "fontSize": "20px",
+                                "background": "rgba(0,0,0,0)"
+                            }
+                        ],
                         "backButton": {
                             "background": "rgba(0,0,0,0)"
                         }
@@ -550,7 +568,8 @@
     "tabBar": {
         "borderStyle": "white",
         "selectedColor": "#34CE98",
-        "list": [{
+        "list": [
+            {
                 "iconPath": "static/tabBar/tabBar_00.png",
                 "selectedIconPath": "static/tabBar/tabBar_show_00.png",
                 "pagePath": "pages/index/index",
@@ -592,4 +611,4 @@
     "easycom": {
         "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
     }
-}
+}
\ No newline at end of file
diff --git a/pages/auth/auth.vue b/pages/auth/auth.vue
index 9861044..33a8231 100644
--- a/pages/auth/auth.vue
+++ b/pages/auth/auth.vue
@@ -82,20 +82,20 @@ export default {
             smsAuth({
                 mobileNo: this.phone,
                 code: this.code,
-            })
-                .then((res) => {
-                    this.$store.commit(
-                        "setToken",
-                        res.token_type + " " + res.access_token
-                    );
-                    this.$Router.back();
-                })
-                .catch((err) => {
-                    uni.showToast({
-                        title: err.message,
-                        icon: "none",
-                    });
-                });
+            }).then((res) => {
+				console.log(111)
+				this.$store.commit(
+					"setToken",
+					res.token_type + " " + res.access_token
+				);
+				this.$Router.back();
+			}).catch((err) => {
+				console.log(2222)
+				uni.showToast({
+					title: err.message,
+					icon: "none",
+				});
+			});
         },
         // 获取验证码
         getPhoneCode() {
diff --git a/pages/im/friends/index.vue b/pages/im/friends/index.vue
index aabaae2..3476801 100644
--- a/pages/im/friends/index.vue
+++ b/pages/im/friends/index.vue
@@ -13,17 +13,17 @@
             <u-line></u-line>
         </view>
 
-        <u-index-list :indexList="indexList">
+        <u-index-list :indexList="indexList" activeColor="#34CE98">
             <template v-for="(item, index) in itemArr">
                 <!-- #ifdef APP-NVUE -->
-                <u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
+                <u-index-anchor bgColor="#F3F6FB" color="#666" :text="indexList[index]" :key="index"></u-index-anchor>
                 <!-- #endif -->
                 <u-index-item :key="index">
                     <!-- #ifndef APP-NVUE -->
-                    <u-index-anchor :text="indexList[index]"></u-index-anchor>
+                    <u-index-anchor :text="indexList[index]" bgColor="#F3F6FB" color="#666"></u-index-anchor>
                     <!-- #endif -->
                     <view class="list" v-for="(item1, index1) in item" :key="index1">
-                        <view class="list__item" @click="toInfo">
+                        <view class="list__item" @click="toInfo(10047)">
                             <image class="list__item__avatar" :src="item1.url"></image>
 							<!-- <u-avatar  size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> -->
                             <text class="list__item__user-name">{{item1.name}}</text>
@@ -100,9 +100,9 @@
                     }
                 })
             },
-            toInfo() {
+            toInfo(targetId) {
                 uni.navigateTo({
-                    url: '/pages/im/friends/info'
+                    url: '/pages/im/friends/info?targeId=' + targetId
                 })
             }
         }
diff --git a/pages/im/friends/info.vue b/pages/im/friends/info.vue
index 89cfe55..75a55d6 100644
--- a/pages/im/friends/info.vue
+++ b/pages/im/friends/info.vue
@@ -1,12 +1,46 @@
-<template>
-    <view>
-        好友资料，
-        <u-button @click="toPrivate">发送消息</u-button>
-    </view>
+<template>
+	<view class="content">
+		<!-- 用户信息 -->
+		<view class="user-info">
+			<u-avatar
+				src="https://cdn.uviewui.com/uview/album/1.jpg"
+				size="58"
+			></u-avatar>
+			<view class="nickname">{{ userInfo.name }}</view>
+			<view class="sex">
+				<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
+				<!-- <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag> -->
+			</view>
+		</view>
+		<view class="user-lists">
+			<view class="user-lists-item">
+				<label>地区</label>
+				<text>黑龙江 哈尔滨</text>
+			</view>
+		</view>
+		<!-- 发送消息 -->
+		<view class="info-footer">
+			<button class="open-btn" @click="toPrivate">发送消息</button>
+		</view>
+	</view>
 </template>
 
 <script>
+    import {
+        getUserInfo
+    } from '@/apis/interfaces/im.js'
+    
     export default {
+        data() {
+            return {
+                userInfo: {}
+            }
+        },
+        onLoad(e) {
+            getUserInfo(e.targetId).then(res => {
+                this.userInfo = res
+            })
+        },
         methods: {
             toPrivate() {
                 uni.navigateTo({
@@ -17,5 +51,72 @@
     }
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.content{
+		min-height: 100vh;
+		background: $window-color;
+	}
+	// 用户信息
+	.user-info{
+		padding: $padding*3 $padding;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background: white;
+		.nickname{
+			font-size: 42rpx;
+			padding-top: $padding;
+			color: $text-color;
+		}
+		.sex{
+			padding-top: $padding/2;
+			text{
+				font-size: $title-size-sm;
+				background: #303133;
+				padding: 0 10rpx;
+				color: white;
+				border-radius: $radius-m;
+				line-height: 30rpx;
+				display: inline-block;
+			}
+		}
+	}
+	.user-lists{
+		margin-top: $margin;
+		background: white;
+		.user-lists-item{
+			padding: 0 $padding;
+			display: flex;
+			justify-content: space-between;
+			line-height: 90rpx;
+			font-size: $title-size-lg;
+			label{
+				color: $text-color;
+			}
+			text{
+				color: $text-gray;
+			}
+		}
+	}
+	// 发送消息
+	.info-footer{
+		padding: $padding;
+		width: 100%;
+		box-sizing: border-box;
+		.open-btn{
+			width: 100%;
+			height: 90rpx;
+			line-height: 90rpx;
+			background: $main-color;
+			border-radius: $radius-lg;
+			padding: 0;
+			margin: 0;
+			color: white;
+			font-size: $title-size;
+			&::after{
+				display: none;
+			}
+		}
+	}
 </style>
diff --git a/pages/im/friends/pending.vue b/pages/im/friends/pending.vue
index e890ad9..742277d 100644
--- a/pages/im/friends/pending.vue
+++ b/pages/im/friends/pending.vue
@@ -1,5 +1,8 @@
 <template>
     <div>
+        <search></search>
+        
+        <list></list>
         好友搜索，好友申请列表 都会在这个页面
     </div>
 </template>
diff --git a/pages/im/private/setting.vue b/pages/im/private/setting.vue
index fad9f88..d7fbb90 100644
--- a/pages/im/private/setting.vue
+++ b/pages/im/private/setting.vue
@@ -1,11 +1,31 @@
-<template>
-    <view>
-        会话设置 {{ targetId}}
-        <view @click="setStatus">免打扰开关 {{status}}</view>
-        <view @click="setTop">置顶会话 {{isTop}}</view>
-		
-        <u-button @click="toIndex">会首页</u-button>
-    </view>
+<template>
+	<view class="content">
+		<!-- 聊天信息 -->
+		<view class="set-user">
+			<u-avatar
+				src="https://cdn.uviewui.com/uview/album/1.jpg"
+				size="48"
+			></u-avatar>
+			<view class="set-user-nickname">唐明明</view>
+		</view>
+		<!-- 聊天设置 -->
+		<view class="set-group">
+			<view class="group-flex">
+				<label>消息免打扰</label>
+				<u-switch activeColor="#34CE98" size="22"></u-switch>
+			</view>
+			<view class="group-flex">
+				<label>置顶会话</label>
+				<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
+			</view>
+		</view>
+		<view class="set-group">
+			<view class="group-flex" @click="cleanConversation">
+				<label>清空聊天记录</label>
+				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
@@ -37,11 +57,6 @@
             })
         },
         methods: {
-            toIndex() {
-                uni.switchTab({
-                    url: '/pages/im/index'
-                })
-            },
             setStatus() {
                 RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
                     status
@@ -59,11 +74,62 @@
                         this.isTop = conversation.isTop
                     })
                 })
+            },
+            // 清空聊天记录
+            cleanConversation() {
+                RongIMLib.deleteMessages(this.conversationType, this.targetId, ({code}) => {
+                    if (code === 0) {
+                        console.log('chenggong ');
+                    }
+                })
             }
         }
     }
 </script>
 
-<style>
-	
+<style lang="scss" scoped>
+	.content{
+		min-height: 100vh;
+		background: $window-color;
+		// 用户信息
+		.set-user{
+			background: white;
+			padding: $padding;
+			display: flex;
+			align-items: center;
+			.set-user-nickname{
+				padding-left: $padding;
+				flex: 1;
+				line-height: 70rpx;
+				font-size: $title-size + 6;
+			}
+		}
+		// 聊天设置
+		.set-group{
+			margin: $margin 0;
+			background: white;
+			.group-flex{
+				position: relative;
+				display: flex;
+				justify-content: space-between;
+				height: 90rpx;
+				line-height: 90rpx;
+				padding: 0 $padding;
+				font-size: $title-size;
+				align-items: center;
+				&::after{
+					content: " ";
+					position: absolute;
+					left: $margin;
+					right: 0;
+					bottom: 0;
+					height: 1rpx;
+					background-color: $border-color;
+				}
+				&:last-child::after{
+					display: none;
+				}
+			}
+		}
+	}
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index a43271e..8ad47fd 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -2,7 +2,7 @@
 	<view class="content">
 		<view class="status">
 			<view class="status-main">
-				<view class="helloe">欢迎使用ZH健康</view>
+				<view class="helloe">欢迎使用ZH-HEALTH健康</view>
 				<view class="btns">
 					<view class="btns-item" @click="onBtn('signIndex')"><image src="@/static/icon/sign-icon.gif" mode="widthFix"></image></view>
 					<view class="btns-item show" @click="onBtn('noticeIndex')"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></view>
diff --git a/pages/menu/classify.vue b/pages/menu/classify.vue
index a953069..4fce58f 100644
--- a/pages/menu/classify.vue
+++ b/pages/menu/classify.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="content">
-        <u-sticky bgColor="#fff" zIndex="99">
+        <view class="tab-sticky">
             <u-tabs
                 :current="tabsIndex"
                 :list="tabArr"
@@ -8,7 +8,7 @@
                 lineColor="#34CE98"
                 :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
             />
-        </u-sticky>
+        </view>
         <view class="box">
             <oct-menu
                 :lists="menuData"
@@ -88,6 +88,14 @@
 </script>
 
 <style lang="scss" scoped>
+	.tab-sticky{
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		background: white;
+		z-index: 99;
+	}
     .content {
         background-color: $window-color;
 		min-height: 100vh;
@@ -100,9 +108,8 @@
     }
     
     .box {
-        padding: 0 $padding;
+        padding: 40px $padding 0;
         box-sizing: border-box;
         margin-top: $margin;
     }
-    // 34CE98
 </style>
diff --git a/pages/menu/details.vue b/pages/menu/details.vue
index 071943c..ed90dfc 100644
--- a/pages/menu/details.vue
+++ b/pages/menu/details.vue
@@ -13,7 +13,7 @@
                     :lists="menuData.foods"
                     isType="det"
                     :btnStyle="{'margin-top': '30rpx'}"
-                    @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.food_id, title: $event.name }})" 
+                    @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.food_id, title: $event.name }})" 
                 />
             </view>
             <view class="foods">
diff --git a/pages/menu/index.vue b/pages/menu/index.vue
index 465dd6d..ddbefe2 100644
--- a/pages/menu/index.vue
+++ b/pages/menu/index.vue
@@ -16,11 +16,11 @@
                     :btnStyle="{'padding': '30rpx'}"
                     @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name }})" 
                 />
-                <u-empty
+                <!-- <u-empty
                     v-else
                     mode="list"
                     text="暂无食谱"
-                />
+                /> -->
             </view>
         </view>
     </view>
@@ -75,8 +75,7 @@
             }
         }
         .box {
-            padding: 0 $padding;
-            box-sizing: border-box;
+
         }
     }
 </style>
diff --git a/pages/record/addExercises.vue b/pages/record/addExercises.vue
new file mode 100644
index 0000000..8390a35
--- /dev/null
+++ b/pages/record/addExercises.vue
@@ -0,0 +1,170 @@
+<!--
+ * @Description:
+ * @Author: Aimee·Zhang
+ * @Date: 2022-01-11 11:27:17
+ * @LastEditors: Aimee·Zhang
+ * @LastEditTime: 2022-01-19 16:57:19
+-->
+
+<template>
+	<view class="add-foods">
+		<!-- 搜索页面 -->
+		<u-search :show-action="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入运动名称" @custom="searchCustom" @clear="clearSearch" v-model="name" />
+		<!-- 运动列表 -->
+		<sports type="add" :lists="lists" @addSport="addSport" />
+		<!-- 添加弹窗 -->
+		<addPopup :selectSports="selectSports" :addSportsShow="addSportsShow" @comfirmSport="comfirmSport" @cancleSport="cancleSport" />
+	</view>
+</template>
+<script>
+import sports from '@/components/sports';
+import addPopup from '@/components/sports/addPopup';
+import { healthSports, addHealthSports } from '@/apis/interfaces/sport.js';
+import moment, { duration } from 'moment';
+
+export default {
+	components: { sports, addPopup },
+	data() {
+		return {
+			addSportsShow: false, // 添加运动弹窗显示
+			selectSports: {}, // 选择新增的运动
+			lists: [], // 运动列表
+			page: 1,
+			has_more: true,
+			name: '', // 搜索运动名称
+			today: moment(new Date()).format('YYYY-MM-DD')
+		};
+	},
+	onLoad() {
+		this.getExercises();
+	},
+	// 触底加载更多
+	onReachBottom() {
+		if (!this.has_more) {
+			uni.showToast({
+				title: '没有更多啦~',
+				icon: 'none'
+			});
+		} else {
+			this.page = this.page + 1;
+			this.getExercises();
+		}
+	},
+	methods: {
+		// 获取运动列表
+		getExercises() {
+			let data = {
+				page: this.page,
+				name: this.name
+			};
+			healthSports(data).then(res => {
+				this.lists = this.lists.concat(res.data);
+				this.has_more = res.page.has_more;
+			});
+		},
+		// 显示弹窗内容
+		addSport(item) {
+			console.log(item);
+			this.selectSports = item;
+			this.selectSports.duration = 60;
+			this.addSportsShow = true;
+		},
+		// 弹窗确认按钮新增
+		comfirmSport(show, duration) {
+			let params = {
+				unit: '1', // 时间单位：分钟 1 小时 2
+				duration: duration, // 时常
+				sport_id: this.selectSports.sport_id, // 运动id
+				date: this.today // 日期
+			};
+			addHealthSports(params)
+				.then(res => {
+					this.addSportsShow = false;
+					this.selectSports = {};
+					this.$Router.back();
+				})
+				.catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon: 'none'
+					});
+				});
+		},
+		// 弹窗取消按钮
+		cancleSport(show) {
+			this.addSportsShow = show;
+			this.duration = 60;
+		},
+		// 添加运动弹窗显示
+		//#region  搜索相关方法 start
+		// 点击搜索左侧按钮
+		searchCustom(e) {
+			console.log(e);
+			this.name = e;
+			this.reset();
+		},
+		// 清空数组重新请求数据
+		reset() {
+			this.page = 1;
+			this.has_more = true;
+			this.lists = [];
+			this.getExercises();
+		},
+		// 点击搜索后面按钮触发事件事件
+		clearSearch() {
+			this.name = '';
+			this.reset();
+		}
+		//#endregion  搜索相关方法  end
+	}
+};
+</script>
+<style lang="scss" scoped>
+.add-foods {
+	padding: $padding;
+	.lists {
+		padding: $padding * 0.6 0;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		.lists-right {
+			flex: 1;
+			font-size: $title-size-m - 6;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			box-sizing: border-box;
+			color: $text-gray-m;
+			border-bottom: solid 1rpx #f7f7f7;
+			margin-left: $margin * 0.8;
+			padding: $padding 0;
+		}
+		.lists-title {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			justify-content: center;
+			box-sizing: border-box;
+			font-size: $title-size-m;
+			color: $text-color;
+			.des {
+				margin-top: 10rpx;
+			}
+			span {
+				color: $text-price;
+				font-size: $title-size-m - 6;
+				font-weight: normal;
+				padding-right: $padding * 0.3;
+			}
+			.des {
+				color: $text-gray-m;
+				font-size: $title-size-m - 6;
+				font-weight: normal;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/record/addFoods.vue b/pages/record/addFoods.vue
index 4db3232..cf476b8 100644
--- a/pages/record/addFoods.vue
+++ b/pages/record/addFoods.vue
@@ -7,165 +7,187 @@
 -->
 
 <template>
-	<view class="add-foods">
-		<view class="re">
-			<view>低等热量</view>
-			<view>中等热量</view>
-			<view>高等热量</view>
-		</view>
-		<!-- 搜索页面 -->
-		<u-search :show-action="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入食品名称" @custom="searchCustom" @clear="clearSearch" v-model="name" />
-		<!-- 食品列表 -->
-		<goodsList :lists="lists" type="dian" @addGoods="addGoods" />
-		<!--  添加食谱弹窗 -->
-		<addFoods v-if="addShow" :addShow="addShow" :selectGoods="selectGoods" :decimals="true" @confirm="confirmHandle" @close="closeHandle" @tabGoodsInfo="tabGoodsInfo" max="999" />
-	</view>
+    <view class="add-foods">
+        <view class="re">
+            <view>低等热量</view>
+            <view>中等热量</view>
+            <view>高等热量</view>
+        </view>
+        <!-- 搜索页面 -->
+        <u-search
+            :show-action="true"
+            actionText="搜索"
+            :animation="true"
+            :clearabled="true"
+            placeholder="请输入食品名称"
+            @custom="searchCustom"
+            @clear="clearSearch"
+            v-model="name"
+        />
+        <!-- 食品列表 -->
+        <goodsList
+            :lists="lists"
+            type="dian"
+            @addGoods="addGoods"
+        />
+        <!--  添加食谱弹窗 -->
+        <addFoods
+            v-if="addShow"
+            :addShow="addShow"
+            :selectGoods="selectGoods"
+            :decimals="true"
+            @confirm="confirmHandle"
+            @close="closeHandle"
+            @tabGoodsInfo="tabGoodsInfo"
+            max="999"
+        />
+    </view>
 </template>
 <script>
-import goodsList from '@/components/foods';
-import addFoods from '@/components/add-goods-template/add-goods-template';
-import { healthFoods, addHealthFoods } from '@/apis/interfaces/foods.js';
-import moment from 'moment';
+import goodsList from "@/components/foods";
+import addFoods from "@/components/add-goods-template/add-goods-template";
+import { healthFoods, addHealthFoods } from "@/apis/interfaces/foods.js";
+import moment from "moment";
 
 export default {
-	components: { goodsList, addFoods },
-	data() {
-		return {
-			addShow: false, // 添加食品显示
-			selectGoods: [], // 选择新增的食品
-			editGoodsId: '', // 编辑食物
-			type: '', // 新增食品时候 1早2午3晚4早加5午加6晚加
-			lists: [], // 食品列表
-			page: 1,
-			has_more: true,
-			name: '', // 搜索食品名称
-			date: moment(new Date()).format('YYYY-MM-DD')
-		};
-	},
-	onShow() {
-		// 有id就是编辑不需要重新处理type了
-		if (this.$Route.query.id) {
-			this.editGoodsId = this.$Route.query.id;
-			return;
-		}
-		//没有id的时候就是新增要处理type
-		this.type = this.$Route.query.type;
-		// this.getFoods();
-	},
-	onLoad() {
-		this.getFoods();
-	},
-	// 触底加载更多
-	onReachBottom() {
-		if (!this.has_more) {
-			uni.showToast({
-				title: '没有更多啦~',
-				icon: 'none'
-			});
-		} else {
-			this.page = this.page + 1;
-			this.getFoods();
-		}
-	},
-	methods: {
-		// 获取食品列表
-		getFoods() {
-			let data = {
-				page: this.page,
-				name: this.name
-			};
-			healthFoods(data).then(res => {
-				console.log(res);
-				this.lists = this.lists.concat(res.data);
-				this.has_more = res.page.has_more;
-			});
-		},
-		// 监听点击键盘触发返回值新增食品
-		confirmHandle(value) {
-			console.log(value);
-			// 新添加食物
-			let data = {
-				type: this.type,
-				ser: 1,
-				weight: value,
-				food_id: this.selectGoods[0].food_id,
-				date: this.date
-			};
-			this.addHealthFoods(data);
-		},
-		// 添加食物
-		addHealthFoods(data) {
-			addHealthFoods(data).then(res => {
-				console.log(res);
-				this.addShow = false;
-				this.$Router.back();
-			});
-		},
-		closeHandle() {
-			//键盘关闭的回调函数
-			this.addShow = false;
-		},
-		// 监听子组件的新增方法
-		addGoods(e) {
-			this.addShow = true;
-			this.selectGoods = [e];
-		},
-		// 点击搜索左侧按钮
-		searchCustom(e) {
-			console.log(e);
-			this.name = e;
-			this.reset();
-		},
-		// 清空数组重新请求数据
-		reset() {
-			this.page = 1;
-			this.has_more = true;
-			this.lists = [];
-			this.getFoods();
-		},
-		// 点击搜索后面按钮触发事件事件
-		clearSearch() {
-			this.name = '';
-			this.reset();
-		},
-		// 跳转到食品详情
-		tabGoodsInfo(e) {
-			this.$Router.push({
-				name: 'rankingDetails',
-				params: e
-			});
-		}
-	}
+    components: { goodsList, addFoods },
+    data() {
+        return {
+            addShow: false, // 添加食品显示
+            selectGoods: [], // 选择新增的食品
+            editGoodsId: "", // 编辑食物
+            type: "", // 新增食品时候 1早2午3晚4早加5午加6晚加
+            lists: [], // 食品列表
+            page: 1,
+            has_more: true,
+            name: "", // 搜索食品名称
+            date: moment(new Date()).format("YYYY-MM-DD"),
+        };
+    },
+    onShow() {
+        // 有id就是编辑不需要重新处理type了
+        if (this.$Route.query.id) {
+            this.editGoodsId = this.$Route.query.id;
+            return;
+        }
+        //没有id的时候就是新增要处理type
+        this.type = this.$Route.query.type;
+        // this.getFoods();
+    },
+    onLoad() {
+        this.getFoods();
+    },
+    // 触底加载更多
+    onReachBottom() {
+        if (!this.has_more) {
+            uni.showToast({
+                title: "没有更多啦~",
+                icon: "none",
+            });
+        } else {
+            this.page = this.page + 1;
+            this.getFoods();
+        }
+    },
+    methods: {
+        // 获取食品列表
+        getFoods() {
+            let data = {
+                page: this.page,
+                name: this.name,
+            };
+            healthFoods(data).then((res) => {
+                console.log(res);
+                this.lists = this.lists.concat(res.data);
+                this.has_more = res.page.has_more;
+            });
+        },
+        // 监听点击键盘触发返回值新增食品
+        confirmHandle(value) {
+            console.log(value);
+            // 新添加食物
+            let data = {
+                type: this.type,
+                ser: 1,
+                weight: value,
+                food_id: this.selectGoods[0].food_id,
+                date: this.date,
+            };
+            this.addHealthFoods(data);
+        },
+        // 添加食物
+        addHealthFoods(data) {
+            addHealthFoods(data).then((res) => {
+                console.log(res);
+                this.addShow = false;
+                this.$Router.back();
+            });
+        },
+        closeHandle() {
+            //键盘关闭的回调函数
+            this.addShow = false;
+        },
+        // 监听子组件的新增方法
+        addGoods(e) {
+            this.addShow = true;
+            this.selectGoods = [e];
+        },
+        // 点击搜索左侧按钮
+        searchCustom(e) {
+            console.log(e);
+            this.name = e;
+            this.reset();
+        },
+        // 清空数组重新请求数据
+        reset() {
+            this.page = 1;
+            this.has_more = true;
+            this.lists = [];
+            this.getFoods();
+        },
+        // 点击搜索后面按钮触发事件事件
+        clearSearch() {
+            this.name = "";
+            this.reset();
+        },
+        // 跳转到食品详情
+        tabGoodsInfo(e) {
+            this.$Router.push({
+                name: "rankingDetails",
+                params: e,
+            });
+        },
+    },
 };
 </script>
 <style lang="scss" scoped>
 .add-foods {
-	padding: $padding;
-	.re{
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-around;
-		box-sizing: border-box;
-		padding:$padding $padding * 2;
-		font-size: $title-size-m;
-		view:before{
-			width: 20rpx;
-			height: 20rpx;
-			border-radius: 50%;
-			display: inline-block;
-			margin-right: 10rpx;
-			content: '';
-		}
-		view:nth-child(3):before {
-		    background: #fa624d;
-		}
-		view:nth-child(2):before  {
-		    background: #fbbf0f;
-		}
-		view:nth-child(1):before  {
-		    background: #02c7bd;
-		}
-	}
+    padding: $padding;
+    .re {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        box-sizing: border-box;
+        padding: $padding $padding * 2;
+        font-size: $title-size-m;
+        view:before {
+            width: 20rpx;
+            height: 20rpx;
+            border-radius: 50%;
+            display: inline-block;
+            margin-right: 10rpx;
+            content: "";
+        }
+        view:nth-child(3):before {
+            background: #fa624d;
+        }
+        view:nth-child(2):before {
+            background: #fbbf0f;
+        }
+        view:nth-child(1):before {
+            background: #02c7bd;
+        }
+    }
 }
 </style>
diff --git a/pages/record/drink.vue b/pages/record/drink.vue
index 51ff8e4..9bfd096 100644
--- a/pages/record/drink.vue
+++ b/pages/record/drink.vue
@@ -7,446 +7,402 @@
 -->
 
 <template>
-    <view
-        class="drink"
-        v-if="loaded"
-    >
-        <!-- 喝水及水杯文字 -->
-        <view class="drink-content">
-            <view
-                class="title"
-                v-if="!water.is_complete"
-            >再喝<span class="num">{{water.lack.cup}}</span>杯<span class="total">（约{{water.lack.value}}ml）</span></view>
-            <view
-                class="title"
-                v-if="water.is_complete"
-            >已喝<span class="num">{{water.total}}ml</span>
-                <u-image
-                    class="is_complete"
-                    :src="require('../../static/imgs/target.png')"
-                    :lazy-load="true"
-                    mode="widthFix"
-                    width="140rpx"
-                />
-            </view>
-            <!-- 水杯动态图片 -->
-            <view class="wave-content">
-                <u-image
-                    class="grass"
-                    :src="require('../../static/imgs/gress.png')"
-                    :lazy-load="true"
-                    mode="scaleToFill"
-                    width="320rpx"
-                    height="520rpx"
-                />
-                <view
-                    class="wave"
-                    :style="{'--ballPercent': -ballPercent+40+'%'}"
-                >
-                </view>
-            </view>
-            <!-- 目标 -->
-            <view class="water-target">
-                <view
-                    class="target-item"
-                    @click="targetShow = true"
-                >今日目标
-                    <u-icon
-                        class="target-icon"
-                        name="arrow-right"
-                        color="#666"
-                        size="14"
-                        :bold="true"
-                        :label="water.target+'ml'"
-                        labelPos="left"
-                        labelSize="16"
-                        labelColor="#666"
-                        space="6"
-                    />
-                </view>
-                <view
-                    class="target-item"
-                    @click="waterCShow = true"
-                >水杯容量
-                    <u-icon
-                        class="target-icon"
-                        name="arrow-right"
-                        color="#666"
-                        size="14"
-                        :bold="true"
-                        :label="water.ml+'ml'"
-                        labelPos="left"
-                        labelSize="16"
-                        labelColor="#666"
-                        space="6"
-                    />
-                </view>
-            </view>
-            <!-- 目标弹出层 -->
-            <view>
-                <u-picker
-                    :show="targetShow"
-                    :columns="tagerts"
-                    title="每天喝水目标"
-                    keyName="label"
-                    confirmColor="#34ce98"
-                    :closeOnClickOverlay="true"
-                    @close="targetShow = false"
-                    @confirm="targetSure('1',$event)"
-                    :defaultIndex="tagertsDefaultIndex"
-                />
-                <u-picker
-                    :show="waterCShow"
-                    :columns="cup_mls"
-                    title="设置水杯容量"
-                    keyName="label"
-                    confirmColor="#34ce98"
-                    :closeOnClickOverlay="true"
-                    @close="waterCShow = false"
-                    @confirm="targetSure('2',$event)"
-                    :defaultIndex="cupDefaultIndex"
-                />
-            </view>
-            <!-- 加水 -->
-            <view
-                class="add-water"
-                @click="drinkWater"
-            >
-                <u-image
-                    class="grass"
-                    :src="require('../../static/imgs/gress2.png')"
-                    :lazy-load="true"
-                    mode="scaleToFill"
-                    width="60rpx"
-                    height="80rpx"
-                />
-                <span>一杯水</span>
-                <u-icon
-                    class="add-icon"
-                    name="plus-circle-fill"
-                    color="#34ce98"
-                    size="24"
-                />
-            </view>
-        </view>
-        <!-- 喝水记录 -->
-        <view class="--history">
-            <view class="title">喝水记录</view>
-            <template v-if="logs.length>0">
-                <view
-                    class="lists"
-                    v-for="item in logs"
-                    :key="item.water_log_id"
-                >
-                    <view class="lists-water">
-                        <u-icon
-                            size="30"
-                            :name="require('../../static/icon/water-icon.png')"
-                        />
-                    </view>
-                    <view class="list-item">
-                        <view class="list-item-title">水<span>{{item.time}}</span></view>
-                        {{item.ml}}ml
-                    </view>
-                </view>
-            </template>
-            <view
-                v-else
-                class="no-drink"
-            > 今天一杯水还没有喝呢，来一杯吧~</view>
-        </view>
-    </view>
+	<view class="drink" v-if="loaded">
+		<!-- 喝水及水杯文字 -->
+		<view class="drink-content">
+			<view class="title" v-if="!water.is_complete">
+				再喝
+				<span class="num">{{ water.lack.cup }}</span>
+				杯
+				<span class="total">（约{{ water.lack.value }}ml）</span>
+			</view>
+			<view class="title" v-if="water.is_complete">
+				已喝
+				<span class="num">{{ water.total }}ml</span>
+				<u-image class="is_complete" :src="require('../../static/imgs/target.png')" :lazy-load="true" mode="widthFix" width="140rpx" />
+			</view>
+			<!-- 水杯动态图片 -->
+			<view class="wave-content">
+				<u-image class="grass" :src="require('../../static/imgs/gress.png')" :lazy-load="true" mode="scaleToFill" width="320rpx" height="520rpx" />
+				<view class="wave" :style="{ '--ballPercent': -ballPercent + 40 + '%' }"></view>
+			</view>
+			<!-- 目标 -->
+			<view class="water-target">
+				<view class="target-item" @click="targetShow = true">
+					今日目标
+					<u-icon
+						class="target-icon"
+						name="arrow-right"
+						color="#666"
+						size="14"
+						:bold="true"
+						:label="water.target + 'ml'"
+						labelPos="left"
+						labelSize="16"
+						labelColor="#666"
+						space="6"
+					/>
+				</view>
+				<view class="target-item" @click="waterCShow = true">
+					水杯容量
+					<u-icon class="target-icon" name="arrow-right" color="#666" size="14" :bold="true" :label="water.ml + 'ml'" labelPos="left" labelSize="16" labelColor="#666" space="6" />
+				</view>
+			</view>
+			<!-- 目标弹出层 -->
+			<view>
+				<u-picker
+					:show="targetShow"
+					:columns="tagerts"
+					title="每天喝水目标"
+					keyName="label"
+					confirmColor="#34ce98"
+					:closeOnClickOverlay="true"
+					@close="targetShow = false"
+					@confirm="targetSure('1', $event)"
+					:defaultIndex="tagertsDefaultIndex"
+				/>
+				<u-picker
+					:show="waterCShow"
+					:columns="cup_mls"
+					title="设置水杯容量"
+					keyName="label"
+					confirmColor="#34ce98"
+					:closeOnClickOverlay="true"
+					@close="waterCShow = false"
+					@confirm="targetSure('2', $event)"
+					:defaultIndex="cupDefaultIndex"
+				/>
+			</view>
+			<!-- 加水 -->
+			<view class="add-water" @click="drinkWater">
+				<u-image class="grass" :src="require('../../static/imgs/gress2.png')" :lazy-load="true" mode="scaleToFill" width="60rpx" height="80rpx" />
+				<span>一杯水</span>
+				<u-icon class="add-icon" name="plus-circle-fill" color="#34ce98" size="24" />
+			</view>
+		</view>
+		<!-- 喝水记录 -->
+		<view class="--history">
+			<view class="title">喝水记录</view>
+			<template v-if="logs.length > 0">
+				<view class="lists" v-for="item in logs" :key="item.water_log_id" @longpress="delWater(item.water_log_id)">
+					<view class="lists-water"><u-icon size="30" :name="require('../../static/icon/water-icon.png')" /></view>
+					<view class="list-item">
+						<view class="list-item-title">
+							水
+							<span>{{ item.time }}</span>
+						</view>
+						{{ item.ml }}ml
+					</view>
+				</view>
+			</template>
+			<view v-else class="no-drink">今天一杯水还没有喝呢，来一杯吧~</view>
+		</view>
+	</view>
 </template>
 <script>
-import { waters, setWaters, drinkWater } from "@/apis/interfaces/drink";
-import moment from "moment";
+import { waters, setWaters, drinkWater, delDrinkWater } from '@/apis/interfaces/drink';
+import moment from 'moment';
 export default {
-    data() {
-        return {
-            ballPercent: 70, // 喝水比例
-            logs: [], // 水记录
-            water: {}, // 水基本信息
-            targetShow: false,
-            tagerts: [], // 目标列表
-            tagertsDefaultIndex: ["1"], // 目标默认index
-            waterCShow: false,
-            cup_mls: [], // 水杯列表
-            cupDefaultIndex: ["2"], // 目标默认index
-            loaded: false,
-        };
-    },
-    onShow() {
-        this.getWaters();
-    },
-    methods: {
-        // 获取喝水页面信息
-        getWaters() {
-            waters().then((res) => {
-                this.cup_mls = [res.cup_mls];
-                this.tagerts = [res.tagerts];
-                this.water = res.water;
-                this.logs = res.logs;
-                this.ballPercent = res.water.lack.ratio;
-                this.cupDefaultIndex = [
-                    res.cup_mls.findIndex(
-                        (item) => item.number === res.water.ml
-                    ),
-                ];
-                this.tagertsDefaultIndex = [
-                    res.tagerts.findIndex(
-                        (item) => item.number === res.water.target
-                    ),
-                ];
-                this.loaded = true;
-            });
-        },
-        // 确认方法index===1 每日目标 2，水杯容量
-        targetSure(index, e) {
-            // console.log("触发了targetSure", index, e.value[0]);
-            // let date = moment(new Date()).format("YYYY--MM--DD");
-            let params = {};
-            if (index === "1") {
-                params = {
-                    type: "target",
-                    ml: e.value[0].number,
-                    date: moment(new Date()).format("YYYY-MM-DD"),
-                };
-            } else {
-                params = {
-                    type: "ml",
-                    ml: e.value[0].number,
-                    date: moment(new Date()).format("YYYY-MM-DD"),
-                };
-            }
-            setWaters(params).then((res) => {
-                this.getWaters();
-                this.waterCShow = false;
-                this.targetShow = false;
-            });
-        },
-        // 喝水
-        drinkWater() {
-            drinkWater().then((res) => {
-                this.getWaters();
-            });
-        },
-    },
+	data() {
+		return {
+			ballPercent: 0, // 喝水比例
+			logs: [], // 水记录
+			water: {}, // 水基本信息
+			targetShow: false,
+			tagerts: [], // 目标列表
+			tagertsDefaultIndex: ['1'], // 目标默认index
+			waterCShow: false,
+			cup_mls: [], // 水杯列表
+			cupDefaultIndex: ['2'], // 目标默认index
+			loaded: false
+		};
+	},
+	onShow() {
+		this.getWaters();
+	},
+	methods: {
+		// 获取喝水页面信息
+		getWaters() {
+			waters().then(res => {
+				this.cup_mls = [res.cup_mls];
+				this.tagerts = [res.tagerts];
+				this.water = res.water;
+				this.logs = res.logs;
+				this.ballPercent = res.water.lack.ratio;
+				this.cupDefaultIndex = [res.cup_mls.findIndex(item => item.number === res.water.ml)];
+				this.tagertsDefaultIndex = [res.tagerts.findIndex(item => item.number === res.water.target)];
+				this.loaded = true;
+			});
+		},
+		// 确认方法index===1 每日目标 2，水杯容量
+		targetSure(index, e) {
+			// console.log("触发了targetSure", index, e.value[0]);
+			// let date = moment(new Date()).format("YYYY--MM--DD");
+			let params = {};
+			if (index === '1') {
+				params = {
+					type: 'target',
+					ml: e.value[0].number,
+					date: moment(new Date()).format('YYYY-MM-DD')
+				};
+			} else {
+				params = {
+					type: 'ml',
+					ml: e.value[0].number,
+					date: moment(new Date()).format('YYYY-MM-DD')
+				};
+			}
+			setWaters(params).then(res => {
+				this.getWaters();
+				this.waterCShow = false;
+				this.targetShow = false;
+			});
+		},
+		// 喝水
+		drinkWater() {
+			drinkWater().then(res => {
+				this.getWaters();
+			});
+		},
+		// 删除和喝水记录
+		delWater(id) {
+			uni.showModal({
+				content: '确认删除么？',
+				confirmText: '确认删除',
+				confirmColor: '#34ce98',
+				cancelText: '再想想',
+				cancelColor: '#ddd',
+				success: res => {
+					if (res.confirm) {
+						delDrinkWater(id)
+							.then(res => {
+								this.getWaters();
+							})
+							.catch(err => {
+								uni.showToast({
+									title: err.message,
+									icon: 'none'
+								});
+							});
+					}
+				}
+			});
+		}
+	}
 };
 </script>
 <style lang="scss" scoped>
 .drink {
-    // 喝水 水杯及文字
+	// 喝水 水杯及文字
 
-    .drink-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        padding: $padding * 2 0;
-        position: relative;
-        // 标题 再喝水
-        .title {
-            font-size: $title-size + 4;
-            color: $main-color;
-            font-weight: normal;
-            margin: $margin * 2;
-            position: relative;
-            .is_complete {
-                position: absolute;
-                top: 30rpx;
-                right: -120rpx;
-            }
-            .num {
-                font-size: $title-size * 2.3;
-                padding: 0 $padding * 0.3;
-                font-weight: bold;
-            }
-            .total {
-                font-size: $title-size;
-                color: $text-gray-m;
-                padding-left: $padding * 0.2;
-            }
-        }
-        // 加一杯水
-        .add-water {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-            font-size: $title-size;
-            color: $text-color;
-            margin-top: $margin * 2;
-            position: relative;
-            span {
-                padding-top: $padding * 0.4;
-            }
-            .add-icon {
-                position: absolute;
-                top: $margin + 8;
-                right: 0;
-            }
-        }
-        // 目标
-        .water-target {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-            color: $text-gray-m;
-            font-size: $title-size;
-            position: absolute;
-            z-index: 110;
-            right: $padding * 1.4;
-            top: 50%;
-            .target-item {
-                margin-top: $margin * 1.6;
-                .target-icon {
-                    padding-top: $padding * 0.5;
-                }
-            }
-        }
-    }
-    // 喝水记录
-    .--history {
-        padding: $padding;
-        .no-drink {
-            color: $text-gray-m;
-            font-size: $title-size-m;
-            padding-top: $padding + 10;
-        }
-        // 标题
-        .title {
-            font-size: $title-size * 1.4;
-            font-weight: bold;
-            color: $text-color;
-            position: relative;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: flex-start;
-            box-sizing: border-box;
-            padding-left: $padding;
-            padding-bottom: $padding;
-            &::before {
-                position: absolute;
-                content: "";
-                width: 8rpx;
-                height: 45rpx;
-                left: 0;
-                background-color: $main-color;
-                border-radius: 10rpx;
-            }
-        }
+	.drink-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		// padding: $padding  0;
+		position: relative;
+		// 标题 再喝水
+		.title {
+			font-size: $title-size + 4;
+			color: $main-color;
+			font-weight: normal;
+			margin: $margin * 2;
+			position: relative;
+			.is_complete {
+				position: absolute;
+				top: 30rpx;
+				right: -120rpx;
+			}
+			.num {
+				font-size: $title-size * 2.3;
+				padding: 0 $padding * 0.3;
+				font-weight: bold;
+			}
+			.total {
+				font-size: $title-size;
+				color: $text-gray-m;
+				padding-left: $padding * 0.2;
+			}
+		}
+		// 加一杯水
+		.add-water {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+			font-size: $title-size;
+			color: $text-color;
+			margin-top: $margin * 2;
+			position: relative;
+			span {
+				padding-top: $padding * 0.4;
+				color:$text-gray-m;
+				font-size: $title-size;
+			}
+			.add-icon {
+				position: absolute;
+				top: $margin + 8;
+				right: 0;
+			}
+		}
+		// 目标
+		.water-target {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+			color: $text-gray-m;
+			font-size: $title-size;
+			position: absolute;
+			z-index: 110;
+			right: $padding * 1.4;
+			top: 50%;
+			.target-item {
+				margin-top: $margin * 1.6;
+				.target-icon {
+					padding-top: $padding * 0.5;
+				}
+			}
+		}
+	}
+	// 喝水记录
+	.--history {
+		padding: $padding;
+		.no-drink {
+			color: $text-gray-m;
+			font-size: $title-size-m;
+			padding-top: $padding + 10;
+		}
+		// 标题
+		.title {
+			font-size: $title-size + 4;
+			font-weight: bold;
+			color: $text-color;
+			position: relative;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: flex-start;
+			box-sizing: border-box;
+			padding-left: $padding;
+			padding-bottom: $padding;
+			&::before {
+				position: absolute;
+				content: '';
+				width: 8rpx;
+				height: 45rpx;
+				left: 0;
+				background-color: $main-color;
+				border-radius: 10rpx;
+			}
+		}
 
-        // 列表
-        .lists {
-            // background-color: pink;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-between;
-            box-sizing: border-box;
-            border-bottom: solid 1rpx #f7f7f7;
-            .lists-water {
-                background-image: linear-gradient(
-                    to right,
-                    $main-color,
-                    $main-color
-                );
-                width: 90rpx;
-                height: 90rpx;
-                border-radius: 50%;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-                box-sizing: border-box;
-            }
-            .list-item {
-                flex: 1;
-                margin-left: $margin * 0.7;
-                font-size: $title-size;
-                color: $text-gray-m;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: space-between;
-                box-sizing: border-box;
-                margin: $margin 0 $margin $margin * 0.7;
-                .list-item-title {
-                    font-size: $title-size + 3;
-                    color: $text-color;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: flex-start;
-                    justify-content: center;
-                    box-sizing: border-box;
-                    font-weight: bold;
-                    span {
-                        margin-top: $margin * 0.4;
-                        background-color: #f7f7f7;
-                        padding: 4rpx 10rpx;
-                        border-radius: 50rpx;
-                        font-weight: normal;
-                        font-size: $title-size - 3;
-                    }
-                }
-            }
-        }
-    }
+		// 列表
+		.lists {
+			// background-color: pink;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			box-sizing: border-box;
+			border-bottom: solid 1rpx #f7f7f7;
+			.lists-water {
+				background-image: linear-gradient(to right, $main-color, $main-color);
+				width: 90rpx;
+				height: 90rpx;
+				border-radius: 50%;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: center;
+				box-sizing: border-box;
+			}
+			.list-item {
+				flex: 1;
+				margin-left: $margin * 0.7;
+				font-size: $title-size;
+				color: $text-gray-m;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+				box-sizing: border-box;
+				margin: $margin 0 $margin $margin * 0.7;
+				.list-item-title {
+					font-size: $title-size + 3;
+					color: $text-color;
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+					justify-content: center;
+					box-sizing: border-box;
+					font-weight: bold;
+					span {
+						margin-top: $margin * 0.4;
+						background-color: #f7f7f7;
+						padding: 4rpx 10rpx;
+						border-radius: 50rpx;
+						font-weight: normal;
+						font-size: $title-size - 3;
+					}
+				}
+			}
+		}
+	}
 }
 // 水杯动画
 .wave-content {
-    position: relative;
-    z-index: 110;
-    .grass {
-        position: relative;
-        z-index: 120099;
-    }
+	position: relative;
+	z-index: 110;
+	.grass {
+		position: relative;
+		z-index: 120099;
+	}
 
-    .wave {
-        position: absolute;
-        width: 290rpx;
-        height: 500rpx;
-        background-color: rgba($color: $main-color, $alpha: 0.6);
-        background-size: 100%;
-        overflow: hidden;
-        top: 10rpx;
-        left: 20rpx;
-        z-index: 10;
-        &::before,
-        &::after {
-            content: "";
-            position: absolute;
-            width: 1000rpx;
-            height: 1000rpx;
-            top: var(--ballPercent);
-            left: 50%;
-            background-color: rgba(255, 255, 255, 0.4);
-            border-radius: 45%;
-            transform: translate(-50%, -70%) rotate(0);
-            animation: rotate 4s linear infinite;
-            z-index: 10;
-        }
-        &::after {
-            border-radius: 47%;
-            background-color: rgba(255, 255, 255, 0.9);
-            transform: translate(-50%, -70%) rotate(0);
-            animation: rotate 6s linear -5s infinite;
-            z-index: 20;
-        }
-    }
+	.wave {
+		position: absolute;
+		width: 290rpx;
+		height: 500rpx;
+		background-color: rgba($color: $main-color, $alpha: 0.6);
+		background-size: 100%;
+		overflow: hidden;
+		top: 10rpx;
+		left: 20rpx;
+		z-index: 10;
+		&::before,
+		&::after {
+			content: '';
+			position: absolute;
+			width: 1000rpx;
+			height: 1000rpx;
+			top: var(--ballPercent);
+			left: 50%;
+			background-color: rgba(255, 255, 255, 0.4);
+			border-radius: 45%;
+			transform: translate(-50%, -70%) rotate(0);
+			animation: rotate 4s linear infinite;
+			z-index: 10;
+		}
+		&::after {
+			border-radius: 47%;
+			background-color: rgba(255, 255, 255, 0.9);
+			transform: translate(-50%, -70%) rotate(0);
+			animation: rotate 6s linear -5s infinite;
+			z-index: 20;
+		}
+	}
 
-    @keyframes rotate {
-        50% {
-            transform: translate(-50%, -73%) rotate(180deg);
-        }
-        100% {
-            transform: translate(-50%, -70%) rotate(360deg);
-        }
-    }
+	@keyframes rotate {
+		50% {
+			transform: translate(-50%, -73%) rotate(180deg);
+		}
+		100% {
+			transform: translate(-50%, -70%) rotate(360deg);
+		}
+	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/record/foods.vue b/pages/record/foods.vue
index b5984c8..8b1f581 100644
--- a/pages/record/foods.vue
+++ b/pages/record/foods.vue
@@ -3,373 +3,450 @@
  * @Author: Aimee·Zhang
  * @Date: 2022-01-11 08:54:49
  * @LastEditors: Aimee·Zhang
- * @LastEditTime: 2022-01-14 09:29:23
+ * @LastEditTime: 2022-01-20 10:05:15
 -->
 
 <template>
-    <view class="record--foods">
-        <!-- 饮食进度条 -->
-        <view class="cricle-content">
-            <view class="info">饮食摄入<span>{{calorys.intake_total}}</span></view>
-            <arprogress
-                :percent="calorys.exceeds?100:calorys.ratio"
-                inactiveColor="#f5f4f9"
-                :activeColor="calorys.exceeds?'#f00':'#34ce98'"
-                width="300"
-                class="cricle"
-                borderWidth="20"
-            >
-                <span>{{calorys.exceeds?'多吃了':'还可以吃'}}</span>
-                <span :class="['num',calorys.exceeds?'num1':'']">{{calorys.amount}}</span>
-                <span>推荐预算{{calorys.goal}}</span>
-            </arprogress>
-            <view class="info" @click="errToast">运动消耗<span>0</span></view>
-            <view class="ic-left">摄入量推荐</view>
-            <u-icon
-                class="ic-day"
-                name="checkmark-circle"
-                color="#34ce98"
-                size="10"
-                :label="`${calorys.days}天`"
-                labelColor="#34ce98"
-                labelSize="10"
-                space="3"
-            />
-        </view>
+	<view class="record--foods">
+		<!-- 饮食进度条 -->
+		<view class="cricle-content">
+			<view class="info">
+				饮食摄入
+				<span>{{ calorys.intake_total }}</span>
+			</view>
+			<arprogress
+				:percent="calorys.exceeds ? 100 : calorys.ratio"
+				inactiveColor="#f5f4f9"
+				:activeColor="calorys.exceeds ? '#f00' : '#34ce98'"
+				width="300"
+				class="cricle"
+				borderWidth="20"
+			>
+				<span>{{ calorys.exceeds ? '多吃了' : '还可以吃' }}</span>
+				<span :class="['num', calorys.exceeds ? 'num1' : '']">{{ calorys.amount }}</span>
+				<span>推荐预算{{ calorys.goal }}</span>
+			</arprogress>
+			<view class="info" @click="errToast">
+				运动消耗
+				<span>{{ calorys.exercise_total }}</span>
+			</view>
+			<view class="ic-left">摄入量推荐</view>
+			<u-icon class="ic-day" name="checkmark-circle" color="#34ce98" size="10" :label="`${calorys.days}天`" labelColor="#34ce98" labelSize="10" space="3" />
+		</view>
 
-        <!-- 有饮食记录 -->
-        <template v-if="intakes.length>0">
-            <view
-                class="foods-add"
-                v-for="(it,index) in intakes"
-                :key="index"
-            >
-                <view class="foods-title">
-                    <view class="title-left">{{it.name}}<span v-if="it.remark">{{it.remark || ''}}</span></view>
-                    <view class="title-right">
-                        {{it.total}}<span class="dw">千卡</span>
-                        <u-icon
-                            name="arrow-right"
-                            color="#ddd"
-                            size="13"
-                            :bold="true"
-                        />
-                    </view>
-                </view>
-                <goodsList
-                    :lists="it.intake"
-                    type="no-dian"
-                    @editGoods="editGoods"
-                />
+		<!-- 有饮食记录 -->
+		<template v-if="intakes.length > 0">
+			<view class="foods-add" v-for="(it, index) in intakes" :key="index">
+				<view class="foods-title">
+					<view class="title-left">
+						{{ it.name }}
+						<span v-if="it.remark">{{ it.remark || '' }}</span>
+					</view>
+					<view class="title-right">
+						{{ it.total }}
+						<span class="dw">千卡</span>
+						<u-icon name="arrow-right" color="#ddd" size="13" :bold="true" />
+					</view>
+				</view>
+				<goodsList :lists="it.intake" type="no-dian" @editGoods="editGoods" @longClickGoods="longClickGoods" />
+			</view>
+		</template>
+		<!-- 运动列表 -->
+		<template v-if="sportsTotal > 0">
+			<view class="foods-title" style="padding-top:50rpx;">
+				<view class="title-left">运动</view>
+				<view class="title-right">
+					{{ sportsTotal }}
+					<span class="dw">千卡</span>
+					<u-icon name="arrow-right" color="#ddd" size="13" :bold="true" />
+				</view>
+			</view>
 
-            </view>
-        </template>
+			<sports type="edit" :lists="sports" @editSport="editSport" @longClick="longClick" />
+		</template>
 
-        <!-- 没有饮食记录 -->
-        <view
-            class="no-foods"
-            v-else
-        >
-            <u-image
-                :src="require('../../static/imgs/no-foods.png')"
-                :lazy-load="true"
-                radius="10rpx"
-                mode="widthFix"
-                width="300rpx"
-                class="no-foods-img"
-            />
-            <view>还没有添加今日饮食记录</view>
-            <view>请点击屏幕下方按钮来添加</view>
-        </view>
-        <!-- 加餐模块 -->
-        <u-action-sheet
-            :actions="addEatList"
-            title="加餐模块"
-            :closeOnClickOverlay="true"
-            :closeOnClickAction="true"
-            @select="selectClick"
-            cancelText="取消"
-            :show="addEatShow"
-            @close="addEatShow = false"
-        ></u-action-sheet>
-        <!-- 底部 早餐等菜单 -->
-        <u-tabbar
-            :fixed="true"
-            :placeholder="true"
-            :safeAreaInsetBottom="true"
-            inactiveColor="#333"
-            @click="tabbarClick"
-        >
-            <u-tabbar-item
-                text="+早餐"
-                @click="tabbarClick"
-                :icon="require('../../static/imgs/foods-1.png')"
-            ></u-tabbar-item>
-            <u-tabbar-item
-                text="+午餐"
-                @click="tabbarClick"
-                :icon="require('../../static/imgs/foods-2.png')"
-            ></u-tabbar-item>
-            <u-tabbar-item
-                text="+晚餐"
-                @click="tabbarClick"
-                :icon="require('../../static/imgs/foods-3.png')"
-            ></u-tabbar-item>
-            <u-tabbar-item
-                text="+加餐"
-                @click="tabbarClick"
-                :icon="require('../../static/imgs/foods-4.png')"
-            ></u-tabbar-item>
-        </u-tabbar>
+		<!-- 没有饮食记录 -->
+		<view class="no-foods" v-if="sports.length === 0 && intakes.length === 0">
+			<u-image :src="require('../../static/imgs/no-foods.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="300rpx" class="no-foods-img" />
+			<view>还没有添加今日饮食记录</view>
+			<view>请点击屏幕下方按钮来添加</view>
+		</view>
 
-        <!-- 修改食品弹窗 -->
-        <!--  添加食谱弹窗 -->
-        <addFoods
-            v-if="addShow"
-            :addShow="addShow"
-            :selectGoods="selectGoods"
-            :decimals="true"
-            @confirm="confirmHandle"
-            @close="closeHandle"
-            @delThis="delThis"
-            @tabGoodsInfo="tabGoodsInfo"
-            max="999"
-        />
-    </view>
+		<!-- 加餐模块 -->
+		<u-action-sheet
+			:actions="addEatList"
+			title="加餐模块"
+			:closeOnClickOverlay="true"
+			:closeOnClickAction="true"
+			@select="selectClick"
+			cancelText="取消"
+			:show="addEatShow"
+			@close="addEatShow = false"
+		></u-action-sheet>
+		<!-- 底部 早餐等菜单 -->
+		<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" inactiveColor="#333" @click="tabbarClick">
+			<u-tabbar-item text="+早餐" @click="tabbarClick" :icon="require('../../static/imgs/foods-1.png')" />
+			<u-tabbar-item text="+午餐" @click="tabbarClick" :icon="require('../../static/imgs/foods-2.png')" />
+			<u-tabbar-item text="+晚餐" @click="tabbarClick" :icon="require('../../static/imgs/foods-3.png')" />
+			<u-tabbar-item text="+加餐" @click="tabbarClick" :icon="require('../../static/imgs/foods-4.png')" />
+			<u-tabbar-item text="+运动" @click="tabbarClick" :icon="require('../../static/imgs/foods-5.png')" />
+		</u-tabbar>
+
+		<!-- 修改食品弹窗 -->
+		<!--  添加食谱弹窗 -->
+		<addFoods
+			v-if="addShow"
+			:addShow="addShow"
+			:selectGoods="selectGoods"
+			:decimals="true"
+			@confirm="confirmHandle"
+			@close="closeHandle"
+			@delThis="delThis"
+			@tabGoodsInfo="tabGoodsInfo"
+			max="999"
+		/>
+
+		<!-- 修改运动弹窗 -->
+		<addPopup :selectSports="selectSports" :addSportsShow="addSportsShow" @comfirmSport="comfirmSport" @cancleSport="cancleSport" @delSport="delSport" />
+	</view>
 </template>
 
 <script>
-import arprogress from "@/components/ar-circle-progress/index.vue";
-import goodsList from "@/components/foods";
-import { plans, editHealthFoods, delHealthFoods } from "@/apis/interfaces/foods.js";
-import moment from "moment";
-import addFoods from "@/components/add-goods-template/add-goods-template";
+import arprogress from '@/components/ar-circle-progress/index.vue';
+import goodsList from '@/components/foods';
+import { plans, editHealthFoods, delHealthFoods } from '@/apis/interfaces/foods.js';
+import moment from 'moment';
+import addFoods from '@/components/add-goods-template/add-goods-template';
+import addPopup from '@/components/sports/addPopup';
+import sports from '@/components/sports';
+import { editHealthSports, delHealthSports } from '@/apis/interfaces/sport.js';
 export default {
-    components: {
-        arprogress,
-        goodsList,
-        addFoods,
-    },
-    data() {
-        return {
-            lists: [],
-            addEatShow: false, // 加餐弹窗默认不显示
-            addEatList: [
-                {
-                    name: "上午加餐",
-                    type: 2,
-                },
-                {
-                    name: "下午加餐",
-                    type: 4,
-                },
-                {
-                    name: "晚上加餐",
-                    type: 6,
-                },
-            ],
-            today: moment(new Date()).format("YYYY-MM-DD"),
-            calorys: {}, // 当日食谱推荐页面的信息
-            intakes: [], // 当日摄入列表
-            addShow: false, // 添加食品显示
-            selectGoods: [], // 选择新增的食品
-        };
-    },
-    onShow() {
-        this.getList();
-    },
-    methods: {
-			// 错误提示
-			errToast(){
-				uni.showToast({
-					title:'努力开发中~',
+	components: {
+		arprogress,
+		goodsList,
+		addFoods,
+		addPopup,
+		sports
+	},
+	data() {
+		return {
+			lists: [],
+			addShow: false, // 添加食品显示
+			selectGoods: [], // 选择新增的食品
+			addEatShow: false, // 加餐弹窗默认不显示
+			addEatList: [
+				{
+					name: '上午加餐',
+					type: 2
+				},
+				{
+					name: '下午加餐',
+					type: 4
+				},
+				{
+					name: '晚上加餐',
+					type: 6
+				}
+			],
+			today: moment(new Date()).format('YYYY-MM-DD'),
+			calorys: {}, // 当日食谱推荐页面的信息
+			intakes: [], // 当日摄入列表
+			sports: [], // 运动列表
+			sportsTotal: 0,
+			addSportsShow: false, // 添加运动弹窗显示
+			selectSports: {} // 选择新增的运动
+		};
+	},
+	onShow() {
+		this.getList();
+	},
+	methods: {
+		// 编辑运动
+		editSport(item) {
+			this.selectSports = {
+				name: item.sport.name,
+				calory: item.sport.calory,
+				cover: item.sport.cover,
+				duration: item.duration,
+				sport_id: item.sport.sport_id,
+				exercise_id: item.exercise_id,
+				title: '编辑运动'
+			};
+			// console.log(this.selectSports);
+			console.log('编辑运动', item);
+			this.addSportsShow = true;
+		},
+
+		// 弹窗确认按钮新增  这里接口报错了  ，
+		comfirmSport(show, duration) {
+			let params = {
+				unit: '1', // 时间单位：分钟 1 小时 2
+				duration: duration, // 时常
+				exercise_id: this.selectSports.exercise_id, //
+				sport_id: this.selectSports.sport_id, // 运动id
+				date: this.today // 日期
+			};
+			console.log(params);
+			editHealthSports(params).then(res => {
+				this.addSportsShow = false;
+				this.selectSports = {};
+				this.getList();
+			}).catch(err=>{
+				 uni.showToast({
+				 	title:err.message,
 					icon:'none'
-				})
-			},
-        getList() {
-            plans(this.today).then((res) => {
-                this.calorys = res.calorys;
-                this.intakes = res.intakes;
-            });
-        },
-        // 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
-        tabbarClick(e) {
-            this.tabarIndex = e;
-            if (e === 3) {
-                this.addEatShow = true;
-            } else {
-                uni.navigateTo({
-                    url: `/pages/record/addFoods?type=${
-                        e === 0 ? 1 : e === 1 ? 3 : 5
-                    }`,
-                });
-            }
-        },
-        // 选择了加餐跳转
-        selectClick(e) {
-            uni.navigateTo({
-                url: `/pages/record/addFoods?type=${e.type}`,
-            });
-            // 选择加餐
-        },
-        // 编辑食品
-        editGoods(e) {
-            this.selectGoods = [e];
-            this.addShow = true;
-        },
-        closeHandle() {
-            //键盘关闭的回调函数
-            this.addShow = false;
-        },
-        // 监听点击键盘触发返回值新增食品
-        confirmHandle(value) {
-            // 新添加食物
-            let data = {
-                ser: 1,
-                weight: value,
-                food_id: this.selectGoods[0].food_id,
-                intake_id: this.selectGoods[0].intake_id,
-            };
-            this.editHealthFoods(data);
-        },
-        // 添加食物
-        editHealthFoods(data) {
-            editHealthFoods(data).then((res) => {
-                console.log(res);
-                this.addShow = false;
-                this.getList();
-            });
-        },
-        // 删除该食物
-        delThis(e) {
-            delHealthFoods(this.selectGoods[0].intake_id).then((res) => {
-                this.addShow = false;
-                this.getList();
-            });
-        },
-        // 跳转到食品详情
-        tabGoodsInfo(e) {
-            this.$Router.push({
-                name: "rankingDetails",
-                params: e,
-            });
-        },
-    },
+				 })
+			});
+		},
+
+		// 弹窗取消按钮
+		cancleSport(show) {
+			this.addSportsShow = show;
+		},
+		// 删除运动
+		delSport() {
+			let params = {
+				exercise_id: this.selectSports.exercise_id //
+			};
+			console.log(params);
+			delHealthSports(params).then(res => {
+				this.addSportsShow = false;
+				this.selectSports = {};
+				this.getList();
+			});
+		},
+		// 长按删除触发事件运动
+		longClick(item) {
+			this.selectSports = item;
+			uni.showModal({
+				content: '确认删除么？',
+				confirmText: '确认删除',
+				confirmColor: '#34ce98',
+				cancelText: '再想想',
+				cancelColor: '#ddd',
+				success: res => {
+					if (res.confirm) {
+						this.delSport();
+					}
+				}
+			});
+		},
+		// 长按删除食品
+		longClickGoods(e) {
+			this.selectGoods = [e];
+			uni.showModal({
+				content: '确认删除么？',
+				confirmText: '确认删除',
+				confirmColor: '#34ce98',
+				cancelText: '再想想',
+				cancelColor: '#ddd',
+				success: res => {
+					if (res.confirm) {
+						this.delThis();
+					}
+				}
+			});
+		},
+		// 错误提示
+		errToast() {
+			uni.showToast({
+				title: '努力开发中~',
+				icon: 'none'
+			});
+		},
+		getList() {
+			plans(this.today).then(res => {
+				this.calorys = res.calorys;
+				this.calorys.ratio = Number(this.calorys.ratio);
+				this.intakes = res.intakes;
+				this.sports = res.exercises.lists;
+				this.sportsTotal = res.exercises.total;
+			});
+		},
+		// 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
+		tabbarClick(e) {
+			console.log(e);
+			this.tabarIndex = e;
+			if (e === 3) {
+				this.addEatShow = true;
+			} else {
+				if (e === 4) {
+					// 新增运动
+					uni.navigateTo({
+						url: `/pages/record/addExercises`
+					});
+				} else {
+					uni.navigateTo({
+						url: `/pages/record/addFoods?type=${e === 0 ? 1 : e === 1 ? 3 : 5}`
+					});
+				}
+			}
+		},
+		// 选择了加餐跳转
+		selectClick(e) {
+			uni.navigateTo({
+				url: `/pages/record/addFoods?type=${e.type}`
+			});
+			// 选择加餐
+		},
+		// 编辑食品
+		editGoods(e) {
+			this.selectGoods = [e];
+			this.addShow = true;
+		},
+		closeHandle() {
+			//键盘关闭的回调函数
+			this.addShow = false;
+		},
+		// 监听点击键盘触发返回值新增食品
+		confirmHandle(value) {
+			// 新添加食物
+			let data = {
+				ser: 1,
+				weight: value,
+				food_id: this.selectGoods[0].food_id,
+				intake_id: this.selectGoods[0].intake_id
+			};
+			this.editHealthFoods(data);
+		},
+		// 添加食物
+		editHealthFoods(data) {
+			editHealthFoods(data).then(res => {
+				console.log(res);
+				this.addShow = false;
+				this.getList();
+			});
+		},
+		// 删除该食物
+		delThis(e) {
+			delHealthFoods(this.selectGoods[0].intake_id).then(res => {
+				this.addShow = false;
+				this.getList();
+			});
+		},
+		// 跳转到食品详情
+		tabGoodsInfo(e) {
+			this.$Router.push({
+				name: 'rankingDetails',
+				params: e
+			});
+		}
+	}
 };
 </script>
 
 <style lang="scss" scoped>
 .record--foods {
-    padding: $padding $padding $padding * 2 $padding;
-    // background: green;
+	padding: $padding $padding $padding * 7 $padding;
+	// background: green;
 }
 // 饮食进度条
 .cricle-content {
-    box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
-    font-size: $title-size-m - 6;
-    padding: $padding * 1.8 $padding;
-    border-radius: $radius;
-    color: $text-gray-m;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    box-sizing: border-box;
-    position: relative;
-    .cricle {
-        .num {
-            color: $text-color;
-            font-size: $title-size * 1.8;
-            font-weight: bold;
-            padding: $padding * 0.2;
-        }
-        .num1 {
-            color: #f00;
-        }
-    }
-    .info {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        span {
-            font-size: $title-size + 10;
-            font-weight: bold;
-            color: $text-color;
-            padding-top: $padding * 0.5;
-        }
-    }
-    .ic-left {
-        position: absolute;
-        left: 0;
-        top: 0;
-        background-image: linear-gradient(to right, #ffebb9, #fbd57b);
-        color: #664710;
-        padding: 10rpx $padding * 0.6;
-        border-radius: 0 0 $radius 0;
-    }
-    .ic-day {
-        position: absolute;
-        right: $padding;
-        top: $padding;
-    }
+	box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
+	font-size: $title-size-m - 6;
+	padding: $padding * 1.8 $padding;
+	border-radius: $radius;
+	color: $text-gray-m;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-around;
+	box-sizing: border-box;
+	position: relative;
+	.cricle {
+		.num {
+			color: $text-color;
+			font-size: $title-size * 1.8;
+			font-weight: bold;
+			padding: $padding * 0.2;
+		}
+		.num1 {
+			color: #f00;
+		}
+	}
+	.info {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		span {
+			font-size: $title-size + 10;
+			font-weight: bold;
+			color: $text-color;
+			padding-top: $padding * 0.5;
+		}
+	}
+	.ic-left {
+		position: absolute;
+		left: 0;
+		top: 0;
+		background-image: linear-gradient(to right, #ffebb9, #fbd57b);
+		color: #664710;
+		padding: 10rpx $padding * 0.6;
+		border-radius: 0 0 $radius 0;
+	}
+	.ic-day {
+		position: absolute;
+		right: $padding;
+		top: $padding;
+	}
 }
 // 没有饮食记录
 .no-foods {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    font-size: $title-size-m - 4;
-    color: $text-gray-m;
-    min-height: 40vh;
-    // background: pink;
-    .no-foods-img {
-        opacity: 0.5;
-    }
-    view {
-        padding: $padding * 0.2;
-    }
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	font-size: $title-size-m - 4;
+	color: $text-gray-m;
+	min-height: 40vh;
+	// background: pink;
+	.no-foods-img {
+		opacity: 0.5;
+	}
+	view {
+		padding: $padding * 0.2;
+	}
 }
 // 饮食记录 早中晚加餐等
 .foods-add {
-    border-bottom: solid 1rpx #f7f7f7;
-    margin-top: $margin;
-    // 主标题
-    .foods-title {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        box-sizing: border-box;
-        color: $text-color;
-        padding: $padding * 0.5 0;
-        .title-left {
-            font-size: $title-size;
-            color: $text-color;
-            font-weight: bold;
-            span {
-                font-weight: normal;
-                font-size: $title-size-m - 6;
-                color: $text-gray-m;
-                margin-left: $margin - 10;
-            }
-        }
-        .title-right {
-            font-size: $title-size-m - 6;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-            color: $main-color;
-            .dw {
-                margin: 0 $margin * 0.6 0 $margin * 0.4;
-                color: $text-gray;
-            }
-        }
-    }
+	border-bottom: solid 1rpx #f7f7f7;
+	margin-top: $margin;
 }
-</style>
\ No newline at end of file
+// 主标题
+.foods-title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	color: $text-color;
+	padding: $padding * 0.5 0;
+	.title-left {
+		font-size: $title-size;
+		color: $text-color;
+		font-weight: bold;
+		span {
+			font-weight: normal;
+			font-size: $title-size-m - 6;
+			color: $text-gray-m;
+			margin-left: $margin - 10;
+		}
+	}
+	.title-right {
+		font-size: $title-size-m - 6;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		color: $main-color;
+		.dw {
+			margin: 0 $margin * 0.6 0 $margin * 0.4;
+			color: $text-gray;
+		}
+	}
+}
+</style>
diff --git a/pages/service/index.vue b/pages/service/index.vue
index 459937e..1cab832 100644
--- a/pages/service/index.vue
+++ b/pages/service/index.vue
@@ -4,7 +4,7 @@
 			<view class="status">
 				<view class="top">
 					<view class="top-name">
-						ZH大家庭
+						ZH-HEALTH生活
 					</view>
 					<view class="top-card">
 						会员卡
diff --git a/pages/store/list.vue b/pages/store/list.vue
index 5a33e78..0ac7e71 100644
--- a/pages/store/list.vue
+++ b/pages/store/list.vue
@@ -2,7 +2,7 @@
 	<view class="content">
 		<!-- 分类 -->
 		<u-sticky bgColor="#fff" zIndex="99">
-			<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs"></u-tabs>
+			<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs" style="background-color: #FFFFFF;"></u-tabs>
 		</u-sticky>
 		<!-- 分类商品 -->
 		<block v-if="goodsArr.length >= 1">
diff --git a/pages/topic/index.vue b/pages/topic/index.vue
index 03f7535..9ad0e01 100644
--- a/pages/topic/index.vue
+++ b/pages/topic/index.vue
@@ -1,28 +1,30 @@
 <template>
     <view class="content">
-        <u-sticky bgColor="#fff" zIndex="99">
+        <view class="tab-sticky">
             <u-tabs
                 :list="listArr"
                 @click="changeTopic"
                 lineColor="#34CE98"
                 :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
             />
-        </u-sticky>
-        <view class="topic" v-if="topicArr.length > 0">
-            <oct-topic
-                :lists="topicArr"
-                @onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id, title: $event.name }})" 
-            />
-            <block v-if="page.total_page > 1">
-                <u-loadmore :status="status" />
-            </block>
-        </view>
-        <view class="noTopic" v-else>
-            <u-empty
-                mode="list"
-                text="暂无食谱"
-            />
         </view>
+		<view class="box">
+			<view class="topic" v-if="topicArr.length > 0">
+				<oct-topic
+					:lists="topicArr"
+					@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id, title: $event.name }})" 
+				/>
+				<block v-if="page.total_page > 1">
+					<u-loadmore :status="status" />
+				</block>
+			</view>
+			<view class="noTopic" v-else>
+				<u-empty
+					mode="list"
+					text="暂无话题"
+				/>
+			</view>
+		</view>
     </view>
 </template>
 
@@ -90,6 +92,19 @@
 </script>
 
 <style lang="scss" scoped>
+	.tab-sticky{
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		background: white;
+		z-index: 99;
+	}
+	
+	.box {
+	    padding-top: 40px;
+	}
+	
     .new-item {
     	position: relative;
     	margin-top: $margin - 10;
diff --git a/static/imgs/foods-5.png b/static/imgs/foods-5.png
new file mode 100644
index 0000000..0df55b4
Binary files /dev/null and b/static/imgs/foods-5.png differ