diff --git a/apis/interfaces/menu.js b/apis/interfaces/menu.js
index 15d307c..e39e162 100644
--- a/apis/interfaces/menu.js
+++ b/apis/interfaces/menu.js
@@ -36,9 +36,25 @@ const menuDet = (recipe) =>{
 	})
 }
 
+// 指南引导
+const guide = (recipe) =>{
+	return request({
+		url: 'articles/health/guide'
+	})
+}
+
+// 搜索页
+const search = () =>{
+	return request({
+		url: 'health/foods/search'
+	})
+}
+
 export {
 	index,
     categories,
     queue,
-    menuDet
+    menuDet,
+    guide,
+    search
 }
diff --git a/apis/interfaces/notice.js b/apis/interfaces/notice.js
new file mode 100644
index 0000000..bc75ea2
--- /dev/null
+++ b/apis/interfaces/notice.js
@@ -0,0 +1,36 @@
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 话题
+ */
+
+import { request } from '../index'
+
+// 分类
+const categories = () =>{
+	return request({
+		url: 'notifications'
+	})
+}
+
+// 列表
+const lists = (type, data) =>{
+	return request({
+		url: 'notifications/' + type + '/list',
+        data:data
+	})
+}
+
+// 详情
+const noticeDet = (notification_id) =>{
+	return request({
+		url: 'notifications/' + notification_id
+	})
+}
+
+export {
+    categories,
+	lists,
+    noticeDet
+}
diff --git a/apis/interfaces/ranking.js b/apis/interfaces/ranking.js
index dbba97e..b82c543 100644
--- a/apis/interfaces/ranking.js
+++ b/apis/interfaces/ranking.js
@@ -23,7 +23,15 @@ const foods = (data) =>{
 	})
 }
 
+// 食物详情
+const foodDet = (food) =>{
+	return request({
+		url: 'health/foods/' + food
+	})
+}
+
 export {
 	categories,
-    foods
+    foods,
+    foodDet
 }
diff --git a/apis/interfaces/sign.js b/apis/interfaces/sign.js
index 58684dc..3a26aba 100644
--- a/apis/interfaces/sign.js
+++ b/apis/interfaces/sign.js
@@ -14,6 +14,15 @@ const date = () =>{
 	})
 }
 
-export {
-	date
+// 签到
+const sign = () =>{
+	return request({
+		url: 'user/sign',
+        method: 'POST'
+	})
+}
+
+export {
+	date,
+    sign
 }
diff --git a/apis/interfaces/topic.js b/apis/interfaces/topic.js
new file mode 100644
index 0000000..0d2122c
--- /dev/null
+++ b/apis/interfaces/topic.js
@@ -0,0 +1,53 @@
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 话题
+ */
+
+import { request } from '../index'
+
+// 首页
+const index = () =>{
+	return request({
+		url: 'health/discover'
+	})
+}
+
+// 列表
+const lists = (data) =>{
+	return request({
+		url: 'health/topics',
+        data: data
+	})
+}
+
+// 分类
+const categories = () =>{
+	return request({
+		url: 'health/topics/categories'
+	})
+}
+
+// 详情
+const topicDet = (topic) =>{
+	return request({
+		url: 'health/topics/' + topic
+	})
+}
+
+// 点赞
+const topicThumb = (topic) =>{
+	return request({
+		url: 'health/topics/' + topic + '/favorite',
+        method: 'POST'
+	})
+}
+
+export {
+    index,
+	lists,
+    categories,
+    topicDet,
+    topicThumb
+}
diff --git a/pages.json b/pages.json
index ece1cc3..4550cad 100644
--- a/pages.json
+++ b/pages.json
@@ -6,6 +6,20 @@
 			"navigationBarTitleText": "发现",
 			"navigationStyle": "custom"
 		}
+	}, {
+		"path": "pages/index/guide",
+		"name": "indexGuide",
+		"style": {
+			"navigationBarTitleText": "",
+			"navigationStyle": "custom"
+		}
+	}, {
+		"path": "pages/index/search",
+		"name": "indexSearch",
+		"style": {
+			"navigationBarTitleText": "",
+			"navigationStyle": "custom"
+		}
 	}, {
 		"path": "pages/record/index",
 		"name": "Record",
@@ -200,30 +214,54 @@
 			"enablePullDownRefresh": true
 		}
 	}, {
-		"path": "pages/im/index",
-		"name": "IM",
+		"path": "pages/notice/index",
+		"name": "noticeIndex",
 		"style": {
-			"navigationBarTitleText": "聊聊",
+			"navigationBarTitleText": "消息",
 			"navigationBarBackgroundColor": "#FFFFFF",
-			"app-plus": {
-				"titleNView": {
-					"buttons": [{
-						"float": "right",
-						"text": "\ue605",
-						"fontSrc": "/static/iconfont.ttf",
-						"color": "#000",
-						"fontSize": "20px"
-					}, {
-						"float": "left",
-						"text": "\ue606",
-						"fontSrc": "/static/iconfont.ttf",
-						"color": "#000",
-						"fontSize": "20px"
-					}]
-				}
-			}
+			"enablePullDownRefresh": true
 		}
 	}, {
+		"path": "pages/notice/list",
+		"name": "noticeList",
+		"style": {
+			"navigationBarTitleText": "消息",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/notice/details",
+		"name": "noticeDetails",
+		"style": {
+			"navigationBarTitleText": "消息",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	},{
+        "path": "pages/im/index",
+        "name": "IM",
+        "style": {
+        	"navigationBarTitleText": "聊聊",
+        	"navigationBarBackgroundColor": "#FFFFFF",
+        	"app-plus": {
+        		"titleNView": {
+        			"buttons": [{
+        				"float": "right",
+        				"text": "\ue605",
+        				"fontSrc": "/static/iconfont.ttf",
+        				"color": "#000",
+        				"fontSize": "20px"
+        			}, {
+        				"float": "left",
+        				"text": "\ue606",
+        				"fontSrc": "/static/iconfont.ttf",
+        				"color": "#000",
+        				"fontSize": "20px"
+        			}]
+        		}
+        	}
+        }
+    },{
 		"path": "pages/im/chum",
 		"name": "ImChum",
 		"style": {
diff --git a/pages/index/guide.vue b/pages/index/guide.vue
new file mode 100644
index 0000000..d45bf00
--- /dev/null
+++ b/pages/index/guide.vue
@@ -0,0 +1,34 @@
+<template>
+    <view class="content">
+        <image class="guideImg" :src="guideCover" mode="widthFix"></image>
+    </view>
+</template>
+
+<script>
+    import { guide } from '@/apis/interfaces/menu'
+    export default {
+        data() {
+            return {
+                guideCover: ''
+            };
+        },
+        mounted() {
+            // 获取首页
+            this.getGuide()
+        },
+        methods: {
+            // 引导图片
+            getGuide(){
+            	guide().then(res => {
+                    this.guideCover = res.cover
+            	})
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .guideImg {
+        width: 100%;
+    }
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 9cdc1ea..f320512 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -4,94 +4,67 @@
 			<view class="status-main">
 				<view class="helloe">欢迎使用ZH健康</view>
 				<view class="btns">
-					<view class="btns-item" @click="$Router.push({name: 'signIndex'})"><image src="@/static/icon/sign-icon.png" mode="widthFix"></image></view>
-					<view class="btns-item show"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></view>
+					<view class="btns-item" @click="$Router.push({name: 'signIndex'})"><image src="@/static/icon/sign-icon.gif" mode="widthFix"></image></view>
+					<view class="btns-item show" @click="$Router.push({name: 'noticeIndex'})"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></view>
 				</view>
 			</view>
 		</view>
 		<!-- 搜索 -->
 		<view class="search">
-			<navigator class="search-nav" url="">
+			<view class="search-nav" @click="$Router.push({name: 'indexSearch'})">
 				<uni-icons class="search-icon" custom-prefix="iconfont" type="icon-sousuo" color="#34CE98" size="20"></uni-icons>
 				低脂鸡胸肉
-			</navigator>
+			</view>
 		</view>
 		<!-- 排行榜 -->
 		<view class="img-card" @click="$Router.push({name: 'rankingIndex'})"><image src="@/static/dev/img-01.png" mode="widthFix"></image></view>
 		<!-- 精选推荐 -->
 		<view class="new-box"><view class="title">精选推荐</view><view class="more" @click="$Router.push({name: 'menuIndex'})">查看更多</view></view>
 		<u-scroll-list class="choiceness-box" indicatorColor="#dafff2" indicatorActiveColor="#34CE98">
-			<view v-for="(item, index) in choiceness" class="choiceness-item" :key="index">
-				<view class="choiceness-item-nav" :style="'backgroundColor:#' + item.color">
-					<image class="choiceness-item-cover" :src="item.thumb"></image>
-					<view class="choiceness-item-title">{{item.title}}</view>
-					<view class="choiceness-item-describe">{{item.describe}}</view>
+			<view v-for="(item, index) in choiceness" class="choiceness-item" :key="index" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index + 1 }})">
+				<view class="choiceness-item-nav" :style="'backgroundColor:' + item.color">
+					<image class="choiceness-item-cover" :src="item.cover"></image>
+					<view class="nowrap choiceness-item-title">{{item.name}}</view>
+					<view class="nowrap choiceness-item-describe">{{item.description}}</view>
 				</view>
 			</view>
 		</u-scroll-list>
 		<!-- 话题广场 -->
 		<view class="new-box">
-            <view class="title">话题广场</view><view class="more" @click="$Router.push({name: 'topicIndex'})">查看更多</view>
+            <view class="title">话题广场</view><view class="more" @click="$Router.push({name: 'topicIndex'})">更多分类</view>
             <oct-topic
                 :lists="topicArr"
-                @onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})" 
+                @onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id }})" 
             />
 		</view>
 		<!-- ZH健康 -->
-		<view class="img-card"><image src="@/static/dev/img-00.png" mode="widthFix"></image></view>
+		<view class="img-card"><image src="@/static/dev/img-00.png" mode="widthFix" @click="$Router.push({ name: 'indexGuide'})" ></image></view>
 	</view>
 </template>
 
 <script>
-export default {
-	data() {
-		return {
-			choiceness: [{
-				title	: "低碳食谱",
-				describe: "减肥人士的最爱",
-				color	: "c8e6da",
-				thumb	: 'https://cdn.uviewui.com/uview/goods/1.jpg'
-			},{
-				title	: "低GI食谱",
-				describe: "家庭衡量膳食平衡",
-				color	: "f0edff",
-				thumb	: 'https://cdn.uviewui.com/uview/goods/1.jpg'
-			},{
-				title	: "高蛋白食谱",
-				describe: "健身搭配食用更佳",
-				color	: "fbeed3",
-				thumb	: 'https://cdn.uviewui.com/uview/goods/1.jpg'
-			}],
-            topicArr: [{
-                id: 1,
-                title: '坚持做瑜伽可以减肥吗',
-                read: '100',
-                praise: '100',
-                cover: 'http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg'
-            },{
-                id: 2,
-                title: '有没有减肥秘诀/减肥偏方/减肥窍门',
-                read: '100',
-                praise: '100',
-                cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong1.jpg'
-            },{
-                id: 3,
-                title: '只需2招迅速变出小蛮腰',
-                read: '100',
-                praise: '100',
-                cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong2.jpg'
-            },{
-                id: 3,
-                title: '有效方便的减肥方法有哪些',
-                read: '100',
-                praise: '100',
-                cover: 'http://up.boohee.cn/house/u/mboohee/img/others/jian.jpg'
-            }]
-		};
-	},
-	onLoad() {},
-	methods: {}
-};
+    import { index } from '@/apis/interfaces/topic'
+    export default {
+        data() {
+            return {
+                choiceness: [],
+                topicArr: []
+            };
+        },
+        mounted() {
+            // 获取首页
+            this.getindex()
+        },
+        methods: {
+            // 首页
+            getindex(){
+            	index().then(res => {
+                    this.choiceness = res.recipeCategories
+                    this.topicArr   = res.topics
+            	})
+            },
+        }
+    };
 </script>
 
 <style lang="scss" scoped>
@@ -129,16 +102,16 @@ export default {
 					width: 46rpx;
 					vertical-align: top;
 				}
-				&.show::before {
-					content: '';
-					height: 10rpx;
-					width: 10rpx;
-					position: absolute;
-					right: 0;
-					top: 0;
-					background: $text-price;
-					border-radius: 50%;
-				}
+				// &.show::before {
+				// 	content: '';
+				// 	height: 10rpx;
+				// 	width: 10rpx;
+				// 	position: absolute;
+				// 	right: 0;
+				// 	top: 0;
+				// 	background: $text-price;
+				// 	border-radius: 50%;
+				// }
 			}
 		}
 	}
@@ -180,10 +153,10 @@ export default {
 		}
 		&-cover{
 			position: absolute;
-			right: $margin;
-			top: $margin;
-			width: 88rpx;
-			height: 88rpx;
+			right: $margin - 10;
+			top: $margin - 5;
+			width: 100rpx;
+			height: 100rpx;
 			vertical-align: top;
 		}
 		&-title{
@@ -200,6 +173,9 @@ export default {
 			font-size: 20rpx;
 			@extend .nowrap;
 		}
+        .choiceness-item-describe {
+            width: 180rpx;
+        }
 	}
 }
 
diff --git a/pages/index/search.vue b/pages/index/search.vue
new file mode 100644
index 0000000..4dd35b6
--- /dev/null
+++ b/pages/index/search.vue
@@ -0,0 +1,186 @@
+<template>
+    <view class="content">
+        <!-- 搜索 -->
+        <view class="search">
+        	<view class="search-nav">
+                <u-search
+                    v-model="keyword"
+                    placeholder="请输入食物名称"
+                    focus
+                    :clearabled="true"
+                    :showAction="false"
+                    @change="change"
+                    @search="search"
+                    @clear="clear"
+                    color="#000000"
+                    bgColor="#F3F6FB"
+                    searchIconColor="#34CE98"
+                />
+        	</view>
+            <view class="search-cancel" @click="$router.back(-1)">
+                取消
+            </view>
+        </view>
+        
+        <view class="recommend" v-if="listArr == ''">
+            <view class="recommend-title">
+                大家都在搜
+            </view>
+            <view class="recommend-list">
+                <view class="label" v-for="(item, index) in recommendArr" :key="index" @click="$Router.push({ name: 'rankingDetails', params: {id: item.food_id, title: item.name }})" >
+                    {{ item.name }}
+                </view>
+            </view>
+        </view>
+        
+        <view class="recommend" v-if="listArr != ''">
+            <view class="recommend-title">
+                搜索结果
+            </view>
+            <block v-if="listArr.length > 0">
+                <oct-menu
+                    :lists="listArr"
+                    :btnStyle="{'margin-top': '30rpx'}"
+                    isType="rank"
+                    @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.food_id, title: $event.name }})" 
+                />
+                <block v-if="page.total_page > 1">
+                    <u-loadmore :status="status" />
+                </block>
+            </block>
+            <u-empty
+                v-else
+                mode="search"
+            />
+        </view>
+    </view>
+</template>
+
+<script>
+    import { search } from '@/apis/interfaces/menu'
+    import { foods } from '@/apis/interfaces/ranking'
+    export default {
+        data() {
+            return {
+                keyword     : '',
+                listArr     : [],
+                recommendArr: [],
+                status      : 'loadmore',
+                page        : ''
+            };
+        },
+        mounted() {
+            // 获取首页
+            this.getSearch()
+        },
+        methods: {
+            // 引导图片
+            getSearch(){
+            	search().then(res => {
+                    this.recommendArr = res
+            	})
+            },
+            
+            // 分类-食物
+            getRank(val, pages){
+            	foods({
+                    name: val,
+                    page: pages
+                }).then(res => {
+                    if(res.page.current == 1){
+                        this.listArr = []
+                    }
+                    this.listArr  = this.listArr.concat(res.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.page
+            	})
+            },
+            
+            change(val) {
+                this.keyword = val
+                this.getRank(val)
+            },
+            
+            // 搜索
+            search() {},
+            
+            // 清除输入框
+            clear() {}
+        },
+        
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getRank(this.keyword, pages)
+                return
+            }
+            this.status = 'nomore'
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .content {
+    	padding-top: calc(var(--status-bar-height) + 120rpx);
+    	overflow: hidden;
+    }
+    
+    // 搜索
+    .search {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 99;
+        height: 120rpx;
+        background-color: white;
+        @extend .ios-top;
+    	padding: $padding;
+        box-sizing: border-box;
+    	.search-nav {
+            width: calc(100% - 100rpx);
+    		background: $window-color;
+    		height: 80rpx;
+    		line-height: 80rpx;
+    		border-radius: 40rpx;
+    		color: $text-gray;
+    		font-size: $title-size-lg;
+            display: flex;
+    	}
+        .search-cancel {
+            color: $main-color;
+            position: absolute;
+            right: $padding;
+            top: $padding;
+            line-height: 80rpx;
+            width: 100rpx;
+            text-align: right;
+        }
+    }
+    
+    .recommend {
+        padding: $padding;
+        box-sizing: border-box;
+        .recommend-title {
+            font-weight: bold;
+            margin-bottom: $margin;
+        }
+        .recommend-list {
+            flex-wrap: wrap;
+            display: flex;
+            .label {
+                display: inline-block;
+                color: $text-color;
+                background-color: #f3f3f3;
+                border-radius: $radius * 2;
+                padding: 0 $padding - 5;
+                line-height: 54rpx;
+                margin: $margin - 20;
+                font-size: $title-size-sm;
+            }
+        }
+    }
+</style>
diff --git a/pages/menu/classify.vue b/pages/menu/classify.vue
index 5611823..bb194c2 100644
--- a/pages/menu/classify.vue
+++ b/pages/menu/classify.vue
@@ -1,14 +1,23 @@
 <template>
     <view class="content">
-        <view class="tabs">
-            <u-tabs :current="tabsIndex" :list="tabArr" @change="tabsClick" lineColor="#34CE98" :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"></u-tabs>
-        </view>
+        <u-sticky bgColor="#fff" zIndex="99">
+            <u-tabs
+                :current="tabsIndex"
+                :list="tabArr"
+                @change="tabsClick"
+                lineColor="#34CE98"
+                :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
+            />
+        </u-sticky>
         <view class="box">
             <oct-menu
                 :lists="menuData"
                 :btnStyle="{'padding': '30rpx'}"
-                @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.id, title: $event.name, title: $event.index }})" 
+                @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name, title: $event.index }})" 
             />
+            <block v-if="page.total_page > 1">
+                <u-loadmore :status="status" />
+            </block>
         </view>
     </view>
 </template>
@@ -20,31 +29,60 @@
             return {
                 tabArr      : [],
                 menuData    : [],
-                tabsIndex   : this.$Route.query.index
+                tabsIndex   : this.$Route.query.index,
+                tabsId      : this.$Route.query.id,
+                status      : 'loadmore',
+                page        : ''
             };
         },
         mounted() {
+            // 获取分类
         	this.getTab()
-            this.getMenu(this.$Route.query.id)
+            
+            // 获取列表
+            this.getMenu()
         },
         methods: {
+            // 分类
             getTab(){
             	categories().then(res => {
                     this.tabArr = res
             	})
             },
             
-            getMenu(id){
+            // 列表
+            getMenu(pages){
             	queue({
-                    category_id: id
+                    category_id: this.tabsId,
+                    page: pages
                 }).then(res => {
-                    this.menuData = res.data
+                    if(res.page.current == 1){
+                        this.menuData = []
+                    }
+                    this.menuData = this.menuData.concat(res.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.page
             	})
             },
+            
+            // 切换分类
             tabsClick(item) {
-                this.getMenu(item.category_id)
+                this.tabsId    = item.category_id
                 this.tabsIndex = item.index
+                this.getMenu(1)
             }
+        },
+        
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getMenu(pages)
+                return
+            }
+            this.status = 'nomore'
         }
     };
 </script>
@@ -63,6 +101,7 @@
     .box {
         padding: 0 $padding;
         box-sizing: border-box;
+        margin-top: $margin;
     }
     // 34CE98
 </style>
diff --git a/pages/menu/details.vue b/pages/menu/details.vue
index 8b5d7fc..f99e4d9 100644
--- a/pages/menu/details.vue
+++ b/pages/menu/details.vue
@@ -11,7 +11,7 @@
                 </view>
                 <oct-menu
                     :lists="menuData.foods"
-                    :isType='true'
+                    isType="det"
                     :btnStyle="{'margin-top': '30rpx'}"
                     @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.food_id, title: $event.name }})" 
                 />
@@ -25,31 +25,31 @@
                         <view class="other-name">
                             碳水化合物
                         </view>
-                        <view class="other-number">
-                            200.00g
+                        <view class="nowrap other-number">
+                            {{ menuData.carbohydrate }}g
                         </view>
                     </view>
                     <view class="other-label">
                         <view class="other-name">
                             蛋白质
                         </view>
-                        <view class="other-number">
-                            200.00g
+                        <view class="nowrap other-number">
+                            {{ menuData.protein }}g
                         </view>
                     </view>
                     <view class="other-label">
                         <view class="other-name">
                             脂肪
                         </view>
-                        <view class="other-number">
-                            200.00g
+                        <view class="nowrap other-number">
+                            {{ menuData.cellulose }}g
                         </view>
                     </view>
                     <view class="other-label">
                         <view class="other-name">
                             千卡
                         </view>
-                        <view class="other-number">
+                        <view class="nowrap other-number">
                             {{ menuData.calory }}
                         </view>
                     </view>
diff --git a/pages/menu/index.vue b/pages/menu/index.vue
index a2a440f..5707409 100644
--- a/pages/menu/index.vue
+++ b/pages/menu/index.vue
@@ -5,7 +5,7 @@
                 <view class="name">
                     {{ item.name }}
                 </view>
-                <view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index }})">
+                <view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index + 1 }})">
                     查看更多<image src="/static/find/menu_more.png" mode="aspectFill"></image>
                 </view>
             </view>
@@ -26,7 +26,6 @@
     </view>
 </template>
 
-
 <script>
     import { index } from '@/apis/interfaces/menu'
     export default {
diff --git a/pages/notice/details.vue b/pages/notice/details.vue
new file mode 100644
index 0000000..c59fcd1
--- /dev/null
+++ b/pages/notice/details.vue
@@ -0,0 +1,100 @@
+<template>
+    <view class="content">
+        <view class="tips">
+            <view class="noticeImg" :class="{active : noticeData.type == 'SystemNotification'}">
+                <block v-if="noticeData.type == 'SystemNotification'">
+                    <u-icon name="bell-fill" color="#77e79f" size="20" bold style="padding: 14rpx"></u-icon>
+                </block>
+                <block v-else>
+                    <u-icon name="calendar-fill" color="#f1a166" size="20" bold style="padding: 14rpx"></u-icon>
+                </block>
+            </view>
+            <view class="noticeBox">
+                <view class="noticeTitle">
+                    {{ noticeData.type == 'SystemNotification' ? '系统通知' : '订单通知'}}
+                </view>
+                <view class="contant">
+                    <view class="title">
+                        {{ noticeData.title }}
+                    </view>
+                    <view class="text">
+                        时间:{{ noticeData.created_at }}
+                    </view>
+                    <view class="text">
+                        {{ noticeData.content }}
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { noticeDet } from '@/apis/interfaces/notice'
+    export default {
+        data() {
+            return {
+                noticeData : ''
+            };
+        },
+        mounted() {
+            // 获取列表
+            this.getDet()
+        },
+        methods: {
+            // 列表
+            getDet(){
+            	noticeDet(this.$Route.query.id).then(res => {
+                    this.noticeData = res
+            	})
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background-color: $window-color;
+    }
+    .tips {
+        padding: $padding;
+        box-sizing: border-box;
+        position: relative;
+        .noticeImg {
+            width: 64rpx;
+            height: 64rpx;
+            text-align: center;
+            border-radius: 50%;
+            background-color: #ffefe2;
+            &.active {
+                background-color: #e7f8f0;
+            }
+        }
+        .noticeBox {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            padding: $padding + 10 $padding $padding $padding + 90rpx;
+            box-sizing: border-box;
+            .noticeTitle {
+                margin-bottom: $margin;
+            }
+            .contant {
+                background-color: white;
+                padding: $padding $padding - 10;
+                box-sizing: border-box;
+                border-radius: $radius;
+                .title {
+                    font-weight: bold;
+                    margin-bottom: $margin;
+                }
+                .text {
+                    line-height: 48rpx;
+                    font-size: $title-size-m;
+                    color: $text-gray;
+                }
+            }
+        }
+    }
+</style>
diff --git a/pages/notice/index.vue b/pages/notice/index.vue
new file mode 100644
index 0000000..ceb7daf
--- /dev/null
+++ b/pages/notice/index.vue
@@ -0,0 +1,102 @@
+<template>
+    <view class="content">
+        <view class="noticeList" v-for="(item, index) in tabArr" :key="index" @click="$Router.push({ name: 'noticeList', params: {type: item.type }})" >
+            <view class="noticeImg" :class="{active : item.count != 0}">
+                <block v-if="item.type == 'SystemNotification'">
+                    <u-icon name="bell-fill" color="#77e79f" size="22" bold style="padding: 14rpx"></u-icon>
+                </block>
+                <block v-else>
+                    <u-icon name="calendar-fill" color="#f1a166" size="22" bold style="padding: 14rpx"></u-icon>
+                </block>
+            </view>
+            <view class="noticeCont">
+                <view class="name">
+                    {{ item.name }}
+                </view>
+                <view class="nowrap text">
+                    {{ item.type == 'SystemNotification' ? 'APP特色功能介绍、官方推进、活动通知' : '商品订单购买成功、发货成功、退货' }}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { categories } from '@/apis/interfaces/notice'
+    export default {
+        data() {
+            return {
+                tabArr    : []
+            };
+        },
+        mounted() {
+            // 获取分类
+            this.getNotice()
+        },
+        methods: {
+            // 分类
+            getNotice(){
+            	categories().then(res => {
+                    this.tabArr = res
+            	})
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        padding: $padding;
+        box-sizing: border-box;
+        background-color: $window-color;
+    }
+    
+    .noticeList {
+        padding: $padding;
+        box-sizing: border-box;
+        position: relative;
+        background-color: white;
+        margin-bottom: $margin;
+        border-radius: $radius;
+        height: 146rpx;
+        &:first-child {
+            .noticeImg {
+                background-color: #e7f8f0;
+            }
+        }
+        .noticeImg {
+            width: 68rpx;
+            height: 68rpx;
+            text-align: center;
+            border-radius: 50%;
+            margin-top: $margin - 20;
+            background-color: #ffefe2;
+            position: relative;
+            &.active::after {
+                position: absolute;
+                content: '';
+                top: $margin - 25;
+                right: 0;
+                width: 12rpx;
+                height: 12rpx;
+                border-radius: 50%;
+                background-color: $text-price;
+            }
+        }
+        .noticeCont {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            padding: $padding $padding 0 $padding + 100rpx;
+            .name {
+                font-weight: bold;
+                font-size: $title-size-lg;
+            }
+            .text {
+                margin-top: $margin - 20;
+                font-size: $title-size-sm;
+            }
+        }
+    }
+</style>
diff --git a/pages/notice/list.vue b/pages/notice/list.vue
new file mode 100644
index 0000000..1698454
--- /dev/null
+++ b/pages/notice/list.vue
@@ -0,0 +1,108 @@
+<template>
+    <view class="content">
+        <view class="box" v-if="listArr.length > 0">
+            <view class="list" v-for="(item, index) in listArr" @click="$Router.push({ name: 'noticeDetails', params: {id: item.notification_id }})">
+                <view class="title">
+                    {{ item.title }}
+                </view>
+                <view class="text">
+                    {{ item.content }}<view class="more">点我查看<u-icon name="arrow-right-double" color="#34CE98" bold size="14" style="display: inline-block;"></u-icon></view>
+                </view>
+            </view>
+            <block v-if="page.total_page > 1">
+                <u-loadmore :status="status" />
+            </block>
+        </view>
+        <view class="noMessage" v-else>
+            <u-empty
+                mode="message"
+            />
+        </view>
+    </view>
+</template>
+
+<script>
+    import { lists } from '@/apis/interfaces/notice'
+    export default {
+        data() {
+            return {
+                listArr : [],
+                status  : 'loadmore',
+                page    : ''
+            };
+        },
+        mounted() {
+            // 获取列表
+            this.getList()
+        },
+        methods: {
+            // 列表
+            getList(pages){
+            	lists(this.$Route.query.type, {
+                    page: pages
+                }).then(res => {
+                    if(res.page.current == 1){
+                        this.listArr = []
+                    }
+                    this.listArr  = this.listArr.concat(res.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.page
+            	})
+            }
+        },
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getList(pages)
+                return
+            }
+            this.status = 'nomore'
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background-color: $window-color;
+    }
+    
+    .box {
+        padding: $padding;
+        box-sizing: border-box;
+        .list {
+            padding: $padding;
+            box-sizing: border-box;
+            border-radius: $radius;
+            background-color: white;
+            margin-bottom: $margin;
+            .title {
+                font-size: $title-size-lg;
+                margin-bottom: $margin - 10;
+                font-weight: bold;
+            }
+            .text {
+                font-size: $title-size-m;
+                color: $text-gray-m;
+                .more {
+                    color: $main-color;
+                    padding-left: $padding - 10;
+                }
+            }
+        }
+    }
+    
+    .noMessage {
+        background-color: white;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-box-pack: center;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
+</style>
diff --git a/pages/ranking/details.vue b/pages/ranking/details.vue
index 5f08d3c..052eda6 100644
--- a/pages/ranking/details.vue
+++ b/pages/ranking/details.vue
@@ -1,13 +1,13 @@
 <template>
     <view class="content">
         <view class="modular goods">
-            <image class="img" src="/static/find/menu_0.jpg" mode="aspectFill"></image>
+            <image class="img" :src="foodDate.cover" mode="aspectFill"></image>
             <view class="title">
                 <view class="name">
-                    白粉桃
+                    {{ foodDate.name }}
                 </view>
                 <view class="text">
-                    295千卡/100克
+                    {{ foodDate.heat }}
                 </view>
             </view>
         </view>
@@ -15,11 +15,11 @@
         <view class="modular foods">
             <view class="title">
                 <view class="name">
-                    推荐搭配
+                    食物价值
                 </view>
             </view>
             <view class="text">
-                白粉桃富含蛋白质、脂肪、维生素、挥发油、有机酸、矿物质、粗纤维和水化合物等多种成份。有解饥消渴，补养身体；且有增进人体胆汁分泌，促进消化和治疗便秘等功效
+                {{ foodDate.recom_text }}
             </view>
         </view>
         
@@ -39,7 +39,7 @@
             </view>
             <view class="energy">
                 <view class="number">
-                    <text>113</text>千卡
+                    <text>{{ calory }}</text>{{ current == 0 ? '千卡' : '千焦'}}
                 </view>
                 <view class="tips">
                     每100克（可食用部分）
@@ -65,41 +65,41 @@
                         含量
                     </view>
                     <view class="tabs-title">
-                        NPV%
+                        NRV%
                     </view>
                 </view>
                 <view class="list">
-                    <view class="label">
+                    <view class="label" v-if="nutrition.protein">
                         <view class="label-name">
                             蛋白质
                         </view>
                         <view class="label-name">
-                            0.1克
+                            {{ nutrition.protein.value }}克
                         </view>
                         <view class="label-name">
-                            0.1%
+                            {{ nutrition.protein.nrv }}%
                         </view>
                     </view>
-                    <view class="label">
+                    <view class="label" v-if="nutrition.cellulose">
                         <view class="label-name">
                             脂肪
                         </view>
                         <view class="label-name">
-                            0.4克
+                            {{ nutrition.cellulose.value }}克
                         </view>
                         <view class="label-name">
-                            0.7%
+                            {{ nutrition.cellulose.nrv }}%
                         </view>
                     </view>
-                    <view class="label">
+                    <view class="label" v-if="nutrition.carbohydrate">
                         <view class="label-name">
                             碳水化合物
                         </view>
                         <view class="label-name">
-                            0.2克
+                            {{ nutrition.carbohydrate.nrv }}克
                         </view>
                         <view class="label-name">
-                            0.1%
+                            {{ nutrition.carbohydrate.nrv }}%
                         </view>
                     </view>
                 </view>
@@ -109,20 +109,20 @@
             </view>
         </view>
         
-        <view class="modular foods">
+        <view class="modular foods" v-if="goodsArr.length > 0">
             <view class="title">
                 <view class="name">
                     相关商品
                 </view>
             </view>
-            <view class="item">
-            	<image class="item-cover" src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png" mode="aspectFill"></image>
+            <view class="item" v-for="(item, index) in goodsArr" :key="index">
+            	<image class="item-cover" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
             	<view class="item-title">
                     <view class="nowrap item-name">
-                        黑果枸杞
+                        {{ item.name }}
                     </view>
                     <view class="item-price">
-                        ￥99.00
+                        ￥{{ item.price }}
                     </view>
                 </view>
                 <view class="item-btn">
@@ -134,16 +134,40 @@
 </template>
 
 <script>
-export default {
+    import { foodDet } from '@/apis/interfaces/ranking'
+    export default {
         data() {
             return {
-                current: 0
+                foodDate    : '',
+                goodsArr    : [],
+                calory      : '',
+                nutrition   : '',
+                current     : 0
             }
         },
-        onLoad() {},
+        mounted() {
+            this.foodRank()
+        },
         methods: {
+            // 分类-食物
+            foodRank(){
+            	foodDet(this.$Route.query.id).then(res => {
+                    this.foodDate  = res
+                    this.goodsArr  = res.goods
+                    this.nutrition = res.data
+                    this.calory    = res.calory
+            	})
+            },
+            
+            // 热量切换
             switchTab(val) {
                 this.current = val
+                if(val == 0) {
+                    this.calory    = this.foodDate.calory
+                    return
+                }else {
+                    this.calory    = this.foodDate.joule
+                }
             }
         }
     };
diff --git a/pages/ranking/index.vue b/pages/ranking/index.vue
index f3d9554..36d7f43 100644
--- a/pages/ranking/index.vue
+++ b/pages/ranking/index.vue
@@ -8,7 +8,7 @@
         <view class="right">
             <view class="goods">
                 <view class="list" @click="$Router.push({name: 'rankingList', params: {id: item.category_id, name: item.name}})" v-for="(item, index) in listArr" :key="index">
-                    <image class="logo" :src="item.cover" mode="aspectFill"></image>
+                    <image class="logo" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
                     <view class="name">
                         {{ item.name }}
                     </view>
diff --git a/pages/ranking/list.vue b/pages/ranking/list.vue
index d73032c..b17eb9c 100644
--- a/pages/ranking/list.vue
+++ b/pages/ranking/list.vue
@@ -11,8 +11,12 @@
                 :lists="menuArr"
                 :btnStyle="{'margin-top': '30rpx'}"
                 :isNumber="true"
-                @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.id, title: $event.name }})" 
+                isType="rank"
+                @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.food_id, title: $event.name }})" 
             />
+            <block v-if="page.total_page > 1">
+                <u-loadmore :status="status" />
+            </block>
         </view>
     </view>
 </template>
@@ -23,7 +27,9 @@
         data() {
             return {
                 name    : this.$Route.query.name,
-                menuArr : []
+                menuArr : [],
+                status  : 'loadmore',
+                page    : ''
             }
         },
         mounted() {
@@ -31,11 +37,30 @@
         },
         methods: {
             // 分类-食物
-            getRank(){
-            	foods({category_id: this.$Route.query.id}).then(res => {
-                    this.menuArr = res.data
+            getRank(pages){
+            	foods({
+                    category_id: this.$Route.query.id,
+                    page: pages
+                }).then(res => {
+                    if(res.page.current == 1){
+                        this.menuArr = []
+                    }
+                    this.menuArr  = this.menuArr.concat(res.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.page
             	})
             }
+        },
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getRank(pages)
+                return
+            }
+            this.status = 'nomore'
         }
     };
 </script>
diff --git a/pages/sign/index.vue b/pages/sign/index.vue
index 533d247..5ac3812 100644
--- a/pages/sign/index.vue
+++ b/pages/sign/index.vue
@@ -2,74 +2,80 @@
     <view class="content">
         <image class="setting" src="/static/find/sign_img.png" mode="widthFix"></image>
         <view class="sign">
-            <!-- <view class="signTitle">
-                记得每日要签到哦
-            </view> -->
             <view class="signAdd">
                 <view class="label">
                     <image class="picture" src="/static/find/sign.png" mode="aspectFill"></image>
-                    <view class="day">
+                    <view class="label-day">
                         <view class="number">
-                            <text>10</text>天
+                            <text>{{ dateData.total }}</text>天
                         </view>
                         本月签到
                     </view>
                 </view>
                 <view class="label">
                     <image class="picture" src="/static/find/sign_active.png" mode="aspectFill"></image>
-                    <view class="day">
+                    <view class="label-day">
                         <view class="number">
-                            <text>1</text>天
+                            <text>{{ dateData.continue }}</text>天
                         </view>
-                        本月漏签
+                        累计签到
                     </view>
                 </view>
             </view>
             <view class="signDate">
                 <view class="date">
-                    2020-01-07
+                    {{ dateData.month }}
                 </view>
                 <view class="list">
-                    <view class="day">
-                        1
+                    <view class="week">
+                        <view class="week-label">
+                            日
+                        </view>
+                        <view class="week-label">
+                            一
+                        </view>
+                        <view class="week-label">
+                            二
+                        </view>
+                        <view class="week-label">
+                            三
+                        </view>
+                        <view class="week-label">
+                            四
+                        </view>
+                        <view class="week-label">
+                            五
+                        </view>
+                        <view class="week-label">
+                            六
+                        </view>
                     </view>
-                    <view class="day">
-                        2
-                    </view>
-                    <view class="day">
-                        3
-                    </view>
-                    <view class="day">
-                        4
-                    </view>
-                    <view class="day">
-                        5
-                    </view>
-                    <view class="day">
-                        6
-                    </view>
-                    <view class="day">
-                        7
-                    </view>
-                    <view class="day">
-                        8
+                    <view class="day" v-for="(item, index) in dateArr">
+                        <view class="day-label" v-for="(items, index) in item">
+                            <view class="label-block" :class="{active : items.isSign}" v-if="!items.isHidden">{{ items.isSign ? '签' : items.date }}</view>
+                        </view>
                     </view>
                 </view>
                 <view class="signBtn">
-                    <view class="btn">
-                        立即签到
+                    <view class="btn" @click="signClick" :class="{active : dateData.isSign}">
+                        {{ dateData.isSign ? '当日已签' : '立即签到'}}
                     </view>
                 </view>
             </view>
+            <view class="tipsText">
+                ZH大健康用户签到
+            </view>
         </view>
     </view>
 </template>
 
 <script>
-    import { date } from '@/apis/interfaces/sign'
+    import { date, sign } from '@/apis/interfaces/sign'
     export default {
     	data() {
     		return {
+                dateData: '',
+                dateArr : ''
     		}
     	},
         mounted() {
@@ -79,7 +85,8 @@
             // 用户登录
             dateList() {
             	date().then(res => {
-            		console.log(res)
+                    this.dateData = res.base
+                    this.dateArr  = res.calendar
             	}).catch(err => {
             		uni.showToast({
             			title: err.message,
@@ -87,6 +94,23 @@
             		})
             	})
             },
+            
+            // 签到
+            signClick() {
+                sign().then(res => {
+                	console.log(res)
+                    uni.showToast({
+                    	title: '签到成功',
+                    	icon: "none"
+                    })
+                    this.dateList();
+                }).catch(err => {
+                	uni.showToast({
+                		title: err.message,
+                		icon: "none"
+                	})
+                })
+            }
     	}
     }
 </script>
@@ -125,20 +149,12 @@
             .label {
                 display: flex;
                 font-size: $title-size-sm;
-                &:first-child {
-                    flex: 1;
-                    .day {
-                        text {
-                            color: $main-color;
-                        }
-                    }
-                }
                 .picture {
                     width: 74rpx;
                     height: 74rpx;
                     margin-right: $margin - 10;
                 }
-                .day {
+                .label-day {
                     color: $text-gray;
                     text {
                         font-size: $title-size-lg;
@@ -147,6 +163,14 @@
                         padding-right: $padding - 20;
                     }
                 }
+                &:first-child {
+                    flex: 1;
+                    .label-day {
+                        text {
+                            color: $main-color;
+                        }
+                    }
+                }
             }
         }
         .signDate {
@@ -158,13 +182,40 @@
                 font-weight: 600;
             }
             .list {
-                flex-wrap: wrap;
-                display: flex;
+                .week {
+                    display: flex;
+                    .week-label {
+                        text-align: center;
+                        font-size: $title-size-m;
+                        width: 14.28%;
+                        margin: $margin - 10 0;
+                    }
+                }
                 .day {
-                    width: 14.28%;
-                    text-align: center;
-                    line-height: 80rpx;
-                    color: $text-color;
+                    flex-wrap: wrap;
+                    display: flex;
+                    .day-label {
+                        width: 14.28%;
+                        text-align: center;
+                        line-height: 80rpx;
+                        color: $text-color;
+                        font-size: $title-size-m;
+                        .label-block {
+                            display: inline-block;
+                            background-color: transparent;
+                            color: $text-gray-m;
+                            border-radius: 50%;
+                            width: 56rpx;
+                            height: 56rpx;
+                            line-height: 56rpx;
+                            text-align: center;
+                            &.active {
+                                background-color: $main-color;
+                                color: white;
+                                border-radius: 50%;
+                            }
+                        }
+                    }
                 }
             }
             
@@ -176,7 +227,18 @@
                     text-align: center;
                     border-radius: $radius-m;
                     line-height: 90rpx;
+                    &.active {
+                        background-color: #ededed;
+                        color: $text-gray;
+                    }
                 }
             }
        }
+        
+        .tipsText {
+            text-align: center;
+            line-height: 120rpx;
+            font-size: $title-size-sm;
+            color: $text-gray-m;
+        }
     }
 </style>
diff --git a/pages/topic/details.vue b/pages/topic/details.vue
index a34807d..578b4f2 100644
--- a/pages/topic/details.vue
+++ b/pages/topic/details.vue
@@ -1,46 +1,61 @@
 <template>
     <view class="content">
-        <view class="head">
-            坚持做瑜伽可以减肥吗?
-        </view>
-        <view class="source">
-            <image class="logo" src="/static/icon/sign-icon.png" mode="aspectFill"></image>
-            <view class="title">
-                <view class="name">
-                    ZH大健康
+        <view class="backCont">
+            <image class="img" :src="topicData.cover" mode="aspectFill"></image>
+            <view class="head">
+                <view class="ellipsis title">
+                    {{ topicData.name }}
                 </view>
-                <view class="text">
-                    ZH大健康官方账号
+                <view class="tips" v-if="topicData.category">
+                    # 话题 -- {{ topicData.category.name }} # 
                 </view>
-            </view>
-        </view>
-        <view class="brief">
-            提到骨质疏松，大家的第一反应估计就是补钙，骨质疏松是一种悄无声息的疾病，大多数患者在早期没有症状，随着骨质的逐步流失，逐渐会有全身关节疼痛、甚至稍有不慎便摔成骨折。
-            骨质疏松是一种以低骨量和骨组织微结构破坏为特征，导致骨质脆性增加和易于骨折的全身性骨代谢性疾病。常见于老年人，但各年龄时期都可以发病。
-            一般的症状包括腰背疼痛、身高下降、驼背以及骨折发生等，但事实上，在这些症状发生之前，骨量已经大量流失，骨质疏松也早已开始了。
-            一旦发生骨质疏松性骨折危害巨大，特别是股骨颈等部位发生的骨折，会给患者带来严重的疼痛、高额医疗支出、致残失能等。
-            严重影响生活质量的同时，给家庭也造成巨大的负担，并且会缩短患者寿命，因而骨质疏松性骨折常被称为“人生的最后一次骨折”。提到骨质疏松，大家的第一反应估计就是补钙，骨质疏松是一种悄无声息的疾病，大多数患者在早期没有症状，随着骨质的逐步流失，逐渐会有全身关节疼痛、甚至稍有不慎便摔成骨折。
-            骨质疏松是一种以低骨量和骨组织微结构破坏为特征，导致骨质脆性增加和易于骨折的全身性骨代谢性疾病。常见于老年人，但各年龄时期都可以发病。
-            一般的症状包括腰背疼痛、身高下降、驼背以及骨折发生等，但事实上，在这些症状发生之前，骨量已经大量流失，骨质疏松也早已开始了。
-            一旦发生骨质疏松性骨折危害巨大，特别是股骨颈等部位发生的骨折，会给患者带来严重的疼痛、高额医疗支出、致残失能等。
-            严重影响生活质量的同时，给家庭也造成巨大的负担，并且会缩短患者寿命，因而骨质疏松性骨折常被称为“人生的最后一次骨折”。
-        </view>
-        <view class="goods">
-            <view class="title">
-                相关商品
-            </view>
-            <view class="item">
-            	<image class="item-cover" src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png" mode="aspectFill"></image>
-            	<view class="item-title">
-                    <view class="nowrap item-name">
-                        黑果枸杞
+                <view class="ellipsis text">
+                    {{ topicData.description }}
+                </view>
+                <view class="tool">
+                    <view class="tool-see">
+                        <text>{{ topicData.clicks }} 人游览</text>
+                        <text>{{ topicData.favorites }} 人点赞</text>
                     </view>
-                    <view class="item-price">
-                        ￥99.00
+                    <view class="tool-btn" :class="{active : isFavorite}" @click="thumbClick(topicData.topic_id)">
+                        <u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17" style="margin-right: 5rpx;"></u-icon>
+                        {{ isFavorite ? '已赞' : '点赞' }}
                     </view>
                 </view>
-                <view class="item-btn">
-                    查看商品
+            </view>
+            <view class="brief">
+                <view class="source">
+                    <image class="source-logo" src="/static/find/logo.png" mode="aspectFill"></image>
+                    <view class="source-title">
+                        <view class="source-name">
+                            {{ topicData.author }}
+                        </view>
+                        <view class="source-text">
+                            ZH大健康官方账号
+                        </view>
+                    </view>
+                </view>
+                <view class="brief-text">
+                    <rich-text :nodes="topicContent"></rich-text>
+                </view>
+                <view class="goods" v-if="goodsArr.length > 0">
+                    <view class="title">
+                        相关商品
+                    </view>
+                    <view class="item" v-for="(item, index) in goodsArr" :key="index">
+                    	<image class="item-cover" src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png" mode="aspectFill"></image>
+                    	<view class="item-title">
+                            <view class="nowrap item-name">
+                                {{ item.name }}
+                            </view>
+                            <view class="item-price">
+                                ￥{{ item.price }}
+                            </view>
+                        </view>
+                        <view class="item-btn">
+                            查看商品
+                        </view>
+                    </view>
                 </view>
             </view>
         </view>
@@ -48,59 +63,164 @@
 </template>
 
 <script>
+    import { topicDet, topicThumb } from '@/apis/interfaces/topic'
     export default {
         data() {
             return {
+                topicData   : '',
+                goodsArr    : [],
+                topicContent: '',
+                isFavorite  : ''
             }
         },
-        onLoad() {},
+        mounted() {
+            this.getRank()
+        },
         methods: {
+            // 详情
+            getRank(){
+            	topicDet(this.$Route.query.id).then(res => {
+                    this.topicData    = res
+                    this.goodsArr     = res.goods
+                    this.isFavorite   = res.is_favorite
+                    this.topicContent = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
+            	})
+            },
             
+            // 点赞
+            thumbClick(id) {
+                topicThumb(id).then(res => {
+                    this.isFavorite = !this.isFavorite
+                })
+            }
         }
     };
 </script>
 
 <style lang="scss" scoped>
     page {
-        padding: $padding;
-        box-sizing: border-box;
+        background: $window-color;
     }
     
-    .head {
-        font-size: $title-size + 4;
-        font-weight: bold;
-    }
-    
-    .source {
-        margin: $margin 0;
+    .backCont {
         position: relative;
-        .logo {
-            width: 58rpx;
-            height: 58rpx;
-            border-radius: 50%;
-            margin-top: $margin - 22;
+        width: 100vw;
+        padding-top: 75%;
+        &::after {
+            position: absolute;
+            content: '';
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            background-color: rgba($color: #000000, $alpha: .35);
         }
-        .title {
+        .img {
             position: absolute;
             left: 0;
             top: 0;
             width: 100%;
-            padding-left: 74rpx;
-            font-size: $title-size-sm;
-            .name {
-                margin-bottom: $margin - 25;
+            height: 100%;
+            z-index: 1;
+            filter: blur(10rpx);
+            overflow: hidden;
+        }
+        .head {
+            padding: $padding * 2 $padding + 30 0;
+            color: white;
+            box-sizing: border-box;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            z-index: 9;
+            .title {
+                font-size: $title-size + 8;
+                margin-bottom: $margin - 10;
+                height: 100rpx;
+                font-weight: 600;
+            }
+            .tips {
+                margin-bottom: $margin + 20;
             }
             .text {
-                font-size: $title-size-sm - 4;
-                color: $text-gray-m;
+                margin: $margin 0 $margin + 10;
+                line-height: 48rpx;
+                height: 100rpx;
+                font-size: $title-size-lg;
+            }
+            .tool {
+                width: 100%;
+                font-size: $title-size-m;
+                display: flex;
+                line-height: 48rpx;
+                .tool-see {
+                    flex: 1;
+                    text {
+                        padding-right: $padding;
+                    }
+                }
+                .tool-btn {
+                    border: 2rpx solid white;
+                    border-radius: $radius * 2;
+                    font-size: $title-size-sm;
+                    padding: 0 $padding - 5;
+                    line-height: 48rpx;
+                    display: flex;
+                    &.active {
+                        background-color: white;
+                        color: $text-color;
+                    }
+                }
             }
         }
     }
     
     .brief {
-        line-height: 48rpx;
-        font-size: $title-size-m;
-        color: $text-color;
+        position: absolute;
+        top: 90%;
+        width: 100%;
+        z-index: 10;
+        background-color: white;
+        border-radius: $radius * 3 $radius * 3 0 0;
+        padding: $padding;
+        box-sizing: border-box;
+        .brief-text {
+            margin: $margin 0;
+            line-height: 48rpx;
+            font-size: $title-size-lg;
+            color: $text-color;
+            padding: 0 $padding - 20;
+            box-sizing: border-box;
+        }
+        .source {
+            position: relative;
+            .source-logo {
+                width: 70rpx;
+                height: 70rpx;
+                border-radius: 50%;
+                margin-top: $margin - 24;
+            }
+            .source-title {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                padding-left: 90rpx;
+                box-sizing: border-box;
+                font-size: $title-size-lg;
+                .source-name {
+                    font-weight: 600;
+                    margin-bottom: $margin - 25;
+                }
+                .source-text {
+                    line-height: 48rpx;
+                    font-size: $title-size-m;
+                    color: $text-gray-m;
+                }
+            }
+        }
     }
     
     .goods {
@@ -115,6 +235,7 @@
         	background: #f5fdfa;
         	border-radius: $radius;
         	padding: $padding;
+            box-sizing: border-box;
         	.item-cover {
         		width: 120rpx;
         		height: 90rpx;
diff --git a/pages/topic/index.vue b/pages/topic/index.vue
index 808f4cc..03f7535 100644
--- a/pages/topic/index.vue
+++ b/pages/topic/index.vue
@@ -1,69 +1,90 @@
 <template>
     <view class="content">
-        <view class="tabs">
+        <u-sticky bgColor="#fff" zIndex="99">
             <u-tabs
-                :list="list1"
-                @click="click"
+                :list="listArr"
+                @click="changeTopic"
                 lineColor="#34CE98"
                 :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
             />
-        </view>
-        <view class="topic">
+        </u-sticky>
+        <view class="topic" v-if="topicArr.length > 0">
             <oct-topic
                 :lists="topicArr"
-                @onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})" 
+                @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>
 </template>
 
 <script>
+    import { lists, categories } from '@/apis/interfaces/topic'
     export default {
         data() {
             return {
-                list1: [{
-                    name: '慢病护理',
-                }, {
-                    name: '减肥塑性',
-                }, {
-                    name: '心理健康'
-                }, {
-                    name: '女性健康'
-                }, {
-                    name: '健康养生'
-                }, {
-                    name: '其他'
-                }],
-                topicArr: [{
-                    id: 1,
-                    title: '坚持做瑜伽可以减肥吗',
-                    read: '100',
-                    praise: '100',
-                    cover: 'http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg'
-                },{
-                    id: 2,
-                    title: '有没有减肥秘诀/减肥偏方/减肥窍门',
-                    read: '100',
-                    praise: '100',
-                    cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong1.jpg'
-                },{
-                    id: 3,
-                    title: '只需2招迅速变出小蛮腰',
-                    read: '100',
-                    praise: '100',
-                    cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong2.jpg'
-                },{
-                    id: 3,
-                    title: '有效方便的减肥方法有哪些',
-                    read: '100',
-                    praise: '100',
-                    cover: 'http://up.boohee.cn/house/u/mboohee/img/others/jian.jpg'
-                }]
+                listArr     : [],
+                topicArr    : [],
+                categoryId  : '',
+                status      : 'loadmore',
+                page        : ''
             }
         },
-        onLoad() {},
-        methods: {
+        mounted() {
+            // 获取分类
+            this.getCategories()
             
+            // 获取列表
+            this.getTopic()
+        },
+        methods: {
+            // 分类
+            getCategories(){
+            	categories().then(res => {
+                    this.listArr = res
+            	})
+            },
+            
+            // 列表
+            getTopic(categoryId, pages){
+            	lists({
+                    category_id: categoryId,
+                    page: pages
+                }).then(res => {
+                    if(res.page.current == 1){
+                        this.topicArr = []
+                    }
+                    this.topicArr = this.topicArr.concat(res.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.page
+            	})
+            },
+            
+            // 切换分类
+            changeTopic(item) {
+                // 获取列表
+                this.getTopic(item.category_id, 1)
+            }
+        },
+        
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getTopic('', pages)
+                return
+            }
+            this.status = 'nomore'
         }
     };
 </script>
@@ -105,4 +126,16 @@
         padding: 0 $padding;
         box-sizing: border-box;
     }
+    
+    .noTopic {
+        background-color: white;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-box-pack: center;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
 </style>
diff --git a/static/dev/img-00.png b/static/dev/img-00.png
index ab83f2e..7f02387 100644
Binary files a/static/dev/img-00.png and b/static/dev/img-00.png differ
diff --git a/static/find/logo.png b/static/find/logo.png
new file mode 100644
index 0000000..42a745f
Binary files /dev/null and b/static/find/logo.png differ
diff --git a/static/icon/sign-icon.gif b/static/icon/sign-icon.gif
new file mode 100644
index 0000000..42ab2d2
Binary files /dev/null and b/static/icon/sign-icon.gif differ
diff --git a/static/icon/sign-icon.png b/static/icon/sign-icon.png
deleted file mode 100644
index 172c6ce..0000000
Binary files a/static/icon/sign-icon.png and /dev/null differ
diff --git a/uni_modules/oct-menu/components/oct-menu/oct-menu.vue b/uni_modules/oct-menu/components/oct-menu/oct-menu.vue
index aa20acb..ca18a00 100644
--- a/uni_modules/oct-menu/components/oct-menu/oct-menu.vue
+++ b/uni_modules/oct-menu/components/oct-menu/oct-menu.vue
@@ -12,7 +12,15 @@
                     {{ item.name }}
                 </view>
                 <view class="nowrap menu--text">
-                    {{ isType ? item.weight + '克' : item.sub_title }}
+                    <block v-if="isType == 'rank'">
+                         {{ item.heat }}
+                    </block>
+                    <block v-else-if="isType == 'det'">
+                        {{ item.weight }} 克
+                    </block>
+                    <block v-else>
+                        {{ item.sub_title }}
+                    </block>
                 </view>
             </view>
         </view>
@@ -41,14 +49,16 @@
             	default: false
             },
             
-            // 是否是详情
+            // det是详情  rank为排行
             isType: {
-            	type: Boolean,
-            	default: false
+            	type:'',
+            	default	: () => {
+            		return {}
+            	}
             }
 		},
 		mounted() {
-			
+			// console.log(this.$props)
 		}
 	}
 </script>
diff --git a/uni_modules/oct-topic/components/oct-topic/oct-topic.vue b/uni_modules/oct-topic/components/oct-topic/oct-topic.vue
index bdfdb5a..147e27b 100644
--- a/uni_modules/oct-topic/components/oct-topic/oct-topic.vue
+++ b/uni_modules/oct-topic/components/oct-topic/oct-topic.vue
@@ -1,11 +1,11 @@
 <template>
     <view>
         <view class="new-item" v-for="(item, index) in lists" :key="index" @click="$emit('onTopic', item)">
-        	<image class="new-cover" :src="item.cover" mode="aspectFill"></image>
-        	<view class="new-title">{{ item.title }}</view>
+        	<image class="new-cover" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
+        	<view class="new-title">{{ item.name }}</view>
         	<view class="new-tool">
-        		<text>阅读{{ item.read }}</text>
-        		<text>赞{{ item.praise }}</text>
+        		<text>阅读 {{ item.clicks }}</text>
+        		<text>赞 {{ item.favorites }}</text>
         	</view>
         </view>
     </view>