diff --git a/apis/interfaces/menu.js b/apis/interfaces/menu.js
new file mode 100644
index 0000000..15d307c
--- /dev/null
+++ b/apis/interfaces/menu.js
@@ -0,0 +1,44 @@
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 签到
+ */
+
+import { request } from '../index'
+
+// 首页
+const index = () =>{
+	return request({
+		url: 'health/recipes'
+	})
+}
+
+// 分类
+const categories = () =>{
+	return request({
+		url: 'health/recipe/categories'
+	})
+}
+
+// 分类-列表
+const queue = (data) =>{
+	return request({
+		url: 'health/recipe/lists',
+        data:data
+	})
+}
+
+// 详情
+const menuDet = (recipe) =>{
+	return request({
+		url: 'health/recipes/' + recipe
+	})
+}
+
+export {
+	index,
+    categories,
+    queue,
+    menuDet
+}
diff --git a/apis/interfaces/ranking.js b/apis/interfaces/ranking.js
new file mode 100644
index 0000000..dbba97e
--- /dev/null
+++ b/apis/interfaces/ranking.js
@@ -0,0 +1,29 @@
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 食物排行
+ */
+
+import { request } from '../index'
+
+// 食物分类
+const categories = (data) =>{
+	return request({
+		url: 'health/foods/categories',
+        data: data
+	})
+}
+
+// 食物排行
+const foods = (data) =>{
+	return request({
+		url: 'health/foods',
+        data: data
+	})
+}
+
+export {
+	categories,
+    foods
+}
diff --git a/apis/interfaces/sign.js b/apis/interfaces/sign.js
new file mode 100644
index 0000000..58684dc
--- /dev/null
+++ b/apis/interfaces/sign.js
@@ -0,0 +1,19 @@
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 签到
+ */
+
+import { request } from '../index'
+
+// 日历
+const date = () =>{
+	return request({
+		url: 'user/sign'
+	})
+}
+
+export {
+	date
+}
diff --git a/pages.json b/pages.json
index 84bdc3e..14a9d4b 100644
--- a/pages.json
+++ b/pages.json
@@ -128,7 +128,79 @@
 			"enablePullDownRefresh": true
 		}
 	}, {
-		"path": "pages/im/index",
+		"path": "pages/sign/index",
+		"name": "signIndex",
+		"style": {
+			"navigationBarTitleText": "每日签到",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/menu/index",
+		"name": "menuIndex",
+		"style": {
+			"navigationBarTitleText": "食谱推荐",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/menu/classify",
+		"name": "menuClassify",
+		"style": {
+			"navigationBarTitleText": "食谱推荐",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/menu/details",
+		"name": "menuDetails",
+		"style": {
+			"navigationBarTitleText": "食谱详情",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/topic/index",
+		"name": "topicIndex",
+		"style": {
+			"navigationBarTitleText": "话题广场",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/topic/details",
+		"name": "topicDetails",
+		"style": {
+			"navigationBarTitleText": "",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/ranking/index",
+		"name": "rankingIndex",
+		"style": {
+			"navigationBarTitleText": "食物排行",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/ranking/list",
+		"name": "rankingList",
+		"style": {
+			"navigationBarTitleText": "食物榜单",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/ranking/details",
+		"name": "rankingDetails",
+		"style": {
+			"navigationBarTitleText": "食物详情",
+			"navigationBarBackgroundColor": "#FFFFFF",
+			"enablePullDownRefresh": true
+		}
+	}, {
+		"path": "pages/im/index",
 		"name": "IM",
 		"style": {
 			"navigationBarTitleText": "im",
@@ -149,18 +221,18 @@
 				"selectedIconPath": "static/tabBar/tabBar_show_01.png",
 				"pagePath": "pages/record/index",
 				"text": "服务"
-			},
-			{
-				"iconPath": "static/tabBar/tabBar_02.png",
-				"selectedIconPath": "static/tabBar/tabBar_show_02.png",
-				"pagePath": "pages/store/index",
-				"text": "生活"
-			},
-			{
-				"iconPath": "static/tabBar/tabBar_01.png",
-				"selectedIconPath": "static/tabBar/tabBar_show_01.png",
-				"pagePath": "pages/im/index",
-				"text": "聊聊"
+			},
+			{
+				"iconPath": "static/tabBar/tabBar_02.png",
+				"selectedIconPath": "static/tabBar/tabBar_show_02.png",
+				"pagePath": "pages/store/index",
+				"text": "生活"
+			},
+			{
+				"iconPath": "static/tabBar/tabBar_01.png",
+				"selectedIconPath": "static/tabBar/tabBar_show_01.png",
+				"pagePath": "pages/im/index",
+				"text": "聊聊"
 			},
 			{
 				"iconPath": "static/tabBar/tabBar_03.png",
diff --git a/pages/index/index.vue b/pages/index/index.vue
index d18edf2..9cdc1ea 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -4,7 +4,7 @@
 			<view class="status-main">
 				<view class="helloe">欢迎使用ZH健康</view>
 				<view class="btns">
-					<view class="btns-item"><image src="@/static/icon/sign-icon.png" mode="widthFix"></image></view>
+					<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>
 			</view>
@@ -17,9 +17,9 @@
 			</navigator>
 		</view>
 		<!-- 排行榜 -->
-		<view class="img-card"><image src="@/static/dev/img-01.png" mode="widthFix"></image></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>
+		<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">
@@ -31,39 +31,11 @@
 		</u-scroll-list>
 		<!-- 话题广场 -->
 		<view class="new-box">
-			<view class="title">话题广场</view>
-			<view class="new-item">
-				<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg" mode="aspectFill"></image>
-				<view class="new-title">坚持做瑜伽可以减肥吗</view>
-				<view class="new-tool">
-					<text>阅读100</text>
-					<text>赞100</text>
-				</view>
-			</view>
-			<view class="new-item">
-				<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/yundong1.jpg" mode="aspectFill"></image>
-				<view class="new-title">有没有减肥秘诀/减肥偏方/减肥窍门</view>
-				<view class="new-tool">
-					<text>阅读100</text>
-					<text>赞100</text>
-				</view>
-			</view>
-			<view class="new-item">
-				<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/yundong2.jpg" mode="aspectFill"></image>
-				<view class="new-title">只需2招迅速变出小蛮腰</view>
-				<view class="new-tool">
-					<text>阅读100</text>
-					<text>赞100</text>
-				</view>
-			</view>
-			<view class="new-item">
-				<image class="new-cover" src="http://up.boohee.cn/house/u/mboohee/img/others/jian.jpg" mode="aspectFill"></image>
-				<view class="new-title">有效方便的减肥方法有哪些</view>
-				<view class="new-tool">
-					<text>阅读100</text>
-					<text>赞100</text>
-				</view>
-			</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 }})" 
+            />
 		</view>
 		<!-- ZH健康 -->
 		<view class="img-card"><image src="@/static/dev/img-00.png" mode="widthFix"></image></view>
@@ -89,7 +61,32 @@ export default {
 				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() {},
@@ -209,41 +206,17 @@ export default {
 // 话题广场
 .new-box {
 	margin: $margin;
+    position: relative;
 	.title {
 		font-weight: bold;
 		font-size: $title-size + 4;
 	}
-	.new-item {
-		position: relative;
-		margin-top: $margin - 10;
-		background: #f5fdfa;
-		border-radius: $radius;
-		padding: $padding ($padding * 2 + 200rpx) $padding $padding;
-		.new-cover {
-			position: absolute;
-			right: $padding;
-			top: $padding;
-			width: 200rpx;
-			height: 150rpx;
-			border-radius: $radius;
-		}
-		.new-title {
-			font-size: $title-size;
-			line-height: 45rpx;
-			min-height: 100rpx;
-			margin-bottom: 10px;
-			font-weight: bold;
-			color: $text-color;
-		}
-		.new-tool {
-			color: $text-gray;
-			font-size: $title-size-sm;
-			line-height: 40rpx;
-			text {
-				margin-right: $margin/2;
-			}
-		}
-	}
+    .more {
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: $text-gray;
+    }
 }
 
 // 卡片
diff --git a/pages/menu/classify.vue b/pages/menu/classify.vue
new file mode 100644
index 0000000..5611823
--- /dev/null
+++ b/pages/menu/classify.vue
@@ -0,0 +1,68 @@
+<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>
+        <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 }})" 
+            />
+        </view>
+    </view>
+</template>
+
+<script>
+    import { queue, categories } from '@/apis/interfaces/menu'
+    export default {
+        data() {
+            return {
+                tabArr      : [],
+                menuData    : [],
+                tabsIndex   : this.$Route.query.index
+            };
+        },
+        mounted() {
+        	this.getTab()
+            this.getMenu(this.$Route.query.id)
+        },
+        methods: {
+            getTab(){
+            	categories().then(res => {
+                    this.tabArr = res
+            	})
+            },
+            
+            getMenu(id){
+            	queue({
+                    category_id: id
+                }).then(res => {
+                    this.menuData = res.data
+            	})
+            },
+            tabsClick(item) {
+                this.getMenu(item.category_id)
+                this.tabsIndex = item.index
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background-color: $window-color;
+    }
+    
+    .tabs {
+        background-color: white;
+        margin-bottom: $margin;
+        padding-bottom: $padding - 10;
+    }
+    
+    .box {
+        padding: 0 $padding;
+        box-sizing: border-box;
+    }
+    // 34CE98
+</style>
diff --git a/pages/menu/details.vue b/pages/menu/details.vue
new file mode 100644
index 0000000..8b5d7fc
--- /dev/null
+++ b/pages/menu/details.vue
@@ -0,0 +1,149 @@
+<template>
+    <view class="content">
+        <image class="backImg" :src="menuData.cover ? menuData.cover : '/static/find/default_img.png'" mode="widthFix"></image>
+        <view class="details">
+            <view class="introduce">
+                {{ menuData.description }}
+            </view>
+            <view class="foods">
+                <view class="title">
+                    推荐搭配
+                </view>
+                <oct-menu
+                    :lists="menuData.foods"
+                    :isType='true'
+                    :btnStyle="{'margin-top': '30rpx'}"
+                    @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.food_id, title: $event.name }})" 
+                />
+            </view>
+            <view class="foods">
+                <view class="title">
+                    推荐搭配
+                </view>
+                <view class="other">
+                    <view class="other-label">
+                        <view class="other-name">
+                            碳水化合物
+                        </view>
+                        <view class="other-number">
+                            200.00g
+                        </view>
+                    </view>
+                    <view class="other-label">
+                        <view class="other-name">
+                            蛋白质
+                        </view>
+                        <view class="other-number">
+                            200.00g
+                        </view>
+                    </view>
+                    <view class="other-label">
+                        <view class="other-name">
+                            脂肪
+                        </view>
+                        <view class="other-number">
+                            200.00g
+                        </view>
+                    </view>
+                    <view class="other-label">
+                        <view class="other-name">
+                            千卡
+                        </view>
+                        <view class="other-number">
+                            {{ menuData.calory }}
+                        </view>
+                    </view>
+                </view>
+            </view>
+            
+            <view class="foods">
+                <view class="title">
+                    营养师建议
+                </view>
+                <view class="quiz">
+                    {{ menuData.suggest }}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { menuDet } from '@/apis/interfaces/menu'
+    export default {
+        data() {
+            return {
+                menuData: ''
+            }
+        },
+        onLoad() {},
+        mounted() {
+            uni.setNavigationBarTitle({
+                title: this.$Route.query.title
+            })
+            this.getMenu()
+        },
+        methods: {
+            getMenu(){
+            	menuDet(this.$Route.query.id).then(res => {
+                    this.menuData = res
+            	})
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background-color: $window-color;
+    }
+    .backImg {
+        width: 100%;
+        display: block;
+    }
+    .details {
+        padding: $padding;
+        box-sizing: border-box;
+        .introduce {
+            border-radius: $radius;
+            background-color: white;
+            padding: $padding;
+            box-sizing: border-box;
+            margin-bottom: $margin;
+            font-size: $title-size-lg;
+            line-height: 48rpx;
+        }
+        .foods {
+            background-color: white;
+            border-radius: $radius;
+            padding: $padding;
+            margin-bottom: $margin;
+            .title {
+                font-size: $title-size;
+                font-weight: bold;
+                margin-bottom: $margin;
+            }
+            .other {
+                display: flex;
+                .other-label {
+                    text-align: center;
+                    width: 25%;
+                    font-size: $title-size-m;
+                    .other-number {
+                        color: $text-gray;
+                        font-size: $title-size-sm;
+                        padding-top: $padding - 20;
+                    }
+                    &:last-child {
+                        font-weight: bold;
+                    }
+                }
+            }
+            .quiz {
+                font-size: $title-size-m;
+                color: $text-gray;
+                line-height: 48rpx;
+            }
+        }
+    }
+</style>
diff --git a/pages/menu/index.vue b/pages/menu/index.vue
new file mode 100644
index 0000000..a2a440f
--- /dev/null
+++ b/pages/menu/index.vue
@@ -0,0 +1,82 @@
+<template>
+    <view class="content">
+        <view class="menu" v-for="(item, index) in menuData" :key="index">
+            <view class="title">
+                <view class="name">
+                    {{ item.name }}
+                </view>
+                <view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index }})">
+                    查看更多<image src="/static/find/menu_more.png" mode="aspectFill"></image>
+                </view>
+            </view>
+            <view class="box">
+                <oct-menu
+                    v-if="item.recipes.length > 0"
+                    :lists="item.recipes"
+                    :btnStyle="{'padding': '30rpx'}"
+                    @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name }})" 
+                />
+                <u-empty
+                    v-else
+                    mode="list"
+                    text="暂无食谱"
+                />
+            </view>
+        </view>
+    </view>
+</template>
+
+
+<script>
+    import { index } from '@/apis/interfaces/menu'
+    export default {
+        data() {
+            return {
+                menuData: ''
+            };
+        },
+        mounted() {
+        	this.getMenu()
+        },
+        methods: {
+            getMenu(){
+            	index().then(res => {
+                    this.menuData = res
+            	})
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background-color: $window-color;
+    }
+    .menu {
+        .title {
+            padding: $padding $padding 0;
+            box-sizing: border-box;
+            display: flex;
+            margin-bottom: $margin - 10;
+            line-height: 50rpx;
+            .name {
+                font-weight: bold;
+                font-size: $title-size + 4;
+                flex: 1;
+            }
+            .more {
+                display: flex;
+                color: $text-gray;
+                image {
+                    width: 28rpx;
+                    height: 28rpx;
+                    margin-top: $margin - 18;
+                }
+            }
+        }
+        .box {
+            padding: 0 $padding;
+            box-sizing: border-box;
+        }
+    }
+</style>
diff --git a/pages/ranking/details.vue b/pages/ranking/details.vue
new file mode 100644
index 0000000..5f08d3c
--- /dev/null
+++ b/pages/ranking/details.vue
@@ -0,0 +1,321 @@
+<template>
+    <view class="content">
+        <view class="modular goods">
+            <image class="img" src="/static/find/menu_0.jpg" mode="aspectFill"></image>
+            <view class="title">
+                <view class="name">
+                    白粉桃
+                </view>
+                <view class="text">
+                    295千卡/100克
+                </view>
+            </view>
+        </view>
+        
+        <view class="modular foods">
+            <view class="title">
+                <view class="name">
+                    推荐搭配
+                </view>
+            </view>
+            <view class="text">
+                白粉桃富含蛋白质、脂肪、维生素、挥发油、有机酸、矿物质、粗纤维和水化合物等多种成份。有解饥消渴，补养身体；且有增进人体胆汁分泌，促进消化和治疗便秘等功效
+            </view>
+        </view>
+        
+        <view class="modular foods">
+            <view class="title">
+                <view class="name">
+                    热量
+                </view>
+                <view class="switch">
+                    <view class="switch-item" :class="{active : current == 0}" @click="switchTab(0)">
+                    	千卡
+                    </view>
+                    <view class="switch-item" :class="{active : current == 1}" @click="switchTab(1)">
+                    	千焦
+                    </view>
+                </view>
+            </view>
+            <view class="energy">
+                <view class="number">
+                    <text>113</text>千卡
+                </view>
+                <view class="tips">
+                    每100克（可食用部分）
+                </view>
+            </view>
+        </view>
+        
+        <view class="modular foods">
+            <view class="title">
+                <view class="name">
+                    营养成分
+                </view>
+                <view class="unit">
+                    单位：每100克
+                </view>
+            </view>
+            <view class="nutrition">
+                <view class="tabs">
+                    <view class="tabs-title">
+                        营养元素
+                    </view>
+                    <view class="tabs-title">
+                        含量
+                    </view>
+                    <view class="tabs-title">
+                        NPV%
+                    </view>
+                </view>
+                <view class="list">
+                    <view class="label">
+                        <view class="label-name">
+                            蛋白质
+                        </view>
+                        <view class="label-name">
+                            0.1克
+                        </view>
+                        <view class="label-name">
+                            0.1%
+                        </view>
+                    </view>
+                    <view class="label">
+                        <view class="label-name">
+                            脂肪
+                        </view>
+                        <view class="label-name">
+                            0.4克
+                        </view>
+                        <view class="label-name">
+                            0.7%
+                        </view>
+                    </view>
+                    <view class="label">
+                        <view class="label-name">
+                            碳水化合物
+                        </view>
+                        <view class="label-name">
+                            0.2克
+                        </view>
+                        <view class="label-name">
+                            0.1%
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="careful">
+                注：以上为三大营养元素的功能比例，不是重量比例。其中，脂肪供能效率比较高，是碳水化合物和蛋白质的2.25倍
+            </view>
+        </view>
+        
+        <view class="modular foods">
+            <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-title">
+                    <view class="nowrap item-name">
+                        黑果枸杞
+                    </view>
+                    <view class="item-price">
+                        ￥99.00
+                    </view>
+                </view>
+                <view class="item-btn">
+                    查看商品
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+        data() {
+            return {
+                current: 0
+            }
+        },
+        onLoad() {},
+        methods: {
+            switchTab(val) {
+                this.current = val
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background-color: $window-color;
+        padding: $padding;
+        box-sizing: border-box;
+    }
+    
+    .modular {
+        background-color: white;
+        border-radius: $radius;
+        margin-bottom: $margin;
+        padding: $padding;
+        box-sizing: border-box;
+    }
+    
+    .goods {
+        position: relative;
+        .img {
+            width: 100rpx;
+            height: 100rpx;
+            border-radius: $radius-m;
+        }
+        .title {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            padding: $padding 0 0 100rpx + $padding * 2;
+            .name {
+                font-weight: bold;
+                margin-bottom: $margin - 10;
+            }
+            .text {
+                color: $text-gray-m;
+                font-size: $title-size-m;
+            }
+        }
+    }
+    
+    .foods {
+        margin-bottom: $margin;
+        .title {
+            margin-bottom: $margin - 10;
+            display: flex;
+            .name {
+                font-weight: bold;
+                font-size: $title-size;
+                flex: 1;
+            }
+            .switch {
+                background-color: $main-color;
+                display: flex;
+                color: white;
+                font-size: $title-size-sm;
+                border-radius: $radius-m;
+                overflow: hidden;
+                line-height: 48rpx;
+                .switch-item {
+                    flex: 2;
+                    padding: 0 $padding - 20;
+                    transition-property: transform, color, -webkit-transform;
+                    transition-duration: 0.3s;
+                    transition-timing-function: ease-in-out;
+                    &.active {
+                        background-color: #09a16c;
+                    }
+                }
+            }
+            .unit {
+                font-size: $title-size-m;
+                line-height: 40rpx;
+                color: $text-gray-m;
+            }
+        }
+        .text {
+            line-height: 48rpx;
+            font-size: $title-size-lg;
+        }
+        .energy {
+            text-align: center;
+            font-size: $title-size-m;
+            padding: $padding 0;
+            color: $text-gray-m;
+            .number {
+                margin-bottom: $margin - 20;
+                color: #000000;
+                text {
+                    font-size: $title-size + 8;
+                    font-weight: bold;
+                    padding-right: $padding - 20;
+                }
+            }
+        }
+        .nutrition {
+            border: 2rpx solid $border-color;
+            .tabs {
+                display: flex;
+                flex-wrap: wrap;
+                font-size: $title-size-m;
+                line-height: 80rpx;
+                border-bottom: $border-color 2rpx solid;
+                background-color: $window-color;
+                .tabs-title {
+                    width: 33.33%;
+                    text-align: center;
+                }
+            }
+            .list {
+                .label {
+                    display: flex;
+                    flex-wrap: wrap;
+                    line-height: 80rpx;
+                    border-bottom: $border-color 2rpx solid;
+                    font-size: $title-size-m;
+                    color: $text-gray;
+                    .label-name {
+                        width: 33.33%;
+                        text-align: center;
+                    }
+                    &:last-child {
+                        border: none;
+                    }
+                }
+            }
+        }
+        .careful {
+            font-size: $title-size-m;
+            color: $text-gray-m;
+            padding-top: $padding - 10;
+        }
+        .item {
+        	position: relative;
+        	margin-top: $margin - 10;
+        	background: #f5fdfa;
+        	border-radius: $radius;
+        	padding: $padding;
+        	.item-cover {
+        		width: 120rpx;
+        		height: 90rpx;
+        		border-radius: $radius-m;
+        	}
+        	.item-title {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: calc(100% - 180rpx);
+                box-sizing: border-box;
+                padding: $padding $padding 0  180rpx;
+        		font-size: $title-size-lg;
+        		margin-bottom: 10px;
+        		color: $text-color;
+                .item-price {
+                    color: $text-price;
+                    margin-top: $margin - 20;
+                }
+        	}
+            .item-btn {
+                position: absolute;
+                right: $padding;
+                top: $padding + 20;
+                background-color: $main-color;
+                color: white;
+                line-height: 62rpx;
+                font-size: $title-size-m;
+                padding: 0 $padding - 10;
+                border-radius: $radius-m;
+            }
+        }
+    }
+</style>
diff --git a/pages/ranking/index.vue b/pages/ranking/index.vue
new file mode 100644
index 0000000..f3d9554
--- /dev/null
+++ b/pages/ranking/index.vue
@@ -0,0 +1,120 @@
+<template>
+    <view class="content">
+        <view class="left">
+            <view class="label" :class="{active : categoryId == item.category_id}" v-for="(item, index) in rankArr" :key="index" @click="leftClick(item.category_id)">
+                {{ item.name }}
+            </view>
+        </view>
+        <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>
+                    <view class="name">
+                        {{ item.name }}
+                    </view>
+                    <image class="arrow" src="/static/find/menu_more.png" mode="aspectFill"></image>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { categories } from '@/apis/interfaces/ranking'
+    export default {
+        data() {
+            return {
+                rankArr     : [],
+                listArr     : [],
+                categoryId  : ''
+            }
+        },
+        mounted() {
+            categories().then(res => {
+                this.rankArr    = res
+                this.categoryId = res[0].category_id
+                this.listArr    = res[0].children
+            })
+        },
+        methods: {
+            // 分类-食物
+            getRank(cateogoryId){
+            	categories({
+                    category_id: cateogoryId
+                }).then(res => {
+                    this.listArr = res
+            	})
+            },
+            
+            // 选择分类
+            leftClick(id) {
+                this.getRank(id)
+                this.categoryId = id
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .left {
+        position: fixed;
+        width: 200rpx;
+        left: 0;
+        top: 0;
+        height: 100vh;
+        z-index: 9;
+        overflow-y: scroll;
+        background-color: white;
+        .label {
+            line-height: 120rpx;
+            text-align: center;
+            font-size: $title-size-lg;
+            color: $text-gray-m;
+            border-bottom: $window-color 2rpx solid;
+            &.active {
+                background-color: $window-color;
+                color: $main-color;
+                font-weight: bold;
+            }
+        }
+    }
+    .right {
+        position: fixed;
+        background-color: $window-color;
+        height: 100vh;
+        overflow-y: scroll;
+        width: 100%;
+        left: 0;
+        top: 0;
+        padding: $padding $padding $padding 230rpx;
+        box-sizing: border-box;
+        .goods {
+            .list {
+                padding: $padding;
+                border-radius: $radius-m;
+                display: flex;
+                background-color: white;
+                margin-bottom: $margin;
+                position: relative;
+                .logo {
+                    width: 80rpx;
+                    height: 80rpx;
+                    border-radius: $radius-lg;
+                    margin-right: $margin;
+                }
+                .name {
+                    font-size: $title-size-lg;
+                    line-height: 80rpx;
+                }
+                .arrow {
+                    width: 28rpx;
+                    height: 28rpx;
+                    position: absolute;
+                    right: $padding;
+                    top: 58rpx;
+                    opacity: .6;
+                }
+            }
+        }
+    }
+</style>
diff --git a/pages/ranking/list.vue b/pages/ranking/list.vue
new file mode 100644
index 0000000..d73032c
--- /dev/null
+++ b/pages/ranking/list.vue
@@ -0,0 +1,73 @@
+<template>
+    <view class="content">
+        <view class="banner">
+            <image class="img" src="/static/find/ranking_img.png" mode="widthFix"></image>
+            <view class="title">
+                {{ name }}
+            </view>
+        </view>
+        <view class="box">
+            <oct-menu
+                :lists="menuArr"
+                :btnStyle="{'margin-top': '30rpx'}"
+                :isNumber="true"
+                @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.id, title: $event.name }})" 
+            />
+        </view>
+    </view>
+</template>
+
+<script>
+    import { foods } from '@/apis/interfaces/ranking'
+    export default {
+        data() {
+            return {
+                name    : this.$Route.query.name,
+                menuArr : []
+            }
+        },
+        mounted() {
+            this.getRank()
+        },
+        methods: {
+            // 分类-食物
+            getRank(){
+            	foods({category_id: this.$Route.query.id}).then(res => {
+                    this.menuArr = res.data
+            	})
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .banner {
+        position: relative;
+        width: 100vw;
+        padding-top: 25%;
+        .img {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+        .title {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 9;
+            padding: $padding * 3 $padding $padding $padding;
+            font-size: $title-size + 8;
+            font-weight: 600;
+            color: transparent;
+            background: linear-gradient(to right, #f5712f, #e6576b);
+            background-clip: text;
+        }
+    }
+    
+    .box {
+        padding: $padding;
+        box-sizing: border-box;
+    }
+</style>
diff --git a/pages/sign/index.vue b/pages/sign/index.vue
new file mode 100644
index 0000000..533d247
--- /dev/null
+++ b/pages/sign/index.vue
@@ -0,0 +1,182 @@
+<template>
+    <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="number">
+                            <text>10</text>天
+                        </view>
+                        本月签到
+                    </view>
+                </view>
+                <view class="label">
+                    <image class="picture" src="/static/find/sign_active.png" mode="aspectFill"></image>
+                    <view class="day">
+                        <view class="number">
+                            <text>1</text>天
+                        </view>
+                        本月漏签
+                    </view>
+                </view>
+            </view>
+            <view class="signDate">
+                <view class="date">
+                    2020-01-07
+                </view>
+                <view class="list">
+                    <view class="day">
+                        1
+                    </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>
+                </view>
+                <view class="signBtn">
+                    <view class="btn">
+                        立即签到
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { date } from '@/apis/interfaces/sign'
+    export default {
+    	data() {
+    		return {
+    		}
+    	},
+        mounted() {
+            this.dateList();
+        },
+    	methods: {
+            // 用户登录
+            dateList() {
+            	date().then(res => {
+            		console.log(res)
+            	}).catch(err => {
+            		uni.showToast({
+            			title: err.message,
+            			icon: "none"
+            		})
+            	})
+            },
+    	}
+    }
+</script>
+
+<style lang="scss" scoped>
+    page {
+        background: $window-color;
+        height: 100vh;
+    }
+    .setting {
+        width: 100%;
+    }
+    .sign {
+        z-index: 9;
+        left: 0;
+        top: 0;
+        width: 100%;
+        padding: 0 $padding + 20;
+        margin-top: -$margin * 2.5;
+        position: relative;
+        box-sizing: border-box;
+        .signTitle {
+            padding: $padding * 3;
+            font-size: $title-size + 20;
+            color: #48988d;
+            font-weight: 600;
+            text-align: center;
+        }
+        .signAdd {
+            padding: $padding $padding * 2.5;
+            box-sizing: border-box;
+            border-radius: $radius-m;
+            background-color: white;
+            margin-bottom: $margin;
+            display: flex;
+            .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 {
+                    color: $text-gray;
+                    text {
+                        font-size: $title-size-lg;
+                        color: $text-color;
+                        font-weight: 600;
+                        padding-right: $padding - 20;
+                    }
+                }
+            }
+        }
+        .signDate {
+            padding: $padding;
            border-radius: $radius-m;
            background-color: white;
+            .date {
+                text-align: center;
+                font-size: $title-size + 6;
+                margin-bottom: $margin;
+                font-weight: 600;
+            }
+            .list {
+                flex-wrap: wrap;
+                display: flex;
+                .day {
+                    width: 14.28%;
+                    text-align: center;
+                    line-height: 80rpx;
+                    color: $text-color;
+                }
+            }
+            
+            .signBtn {
+                padding: $padding * 2 $padding * 2 0;
+                .btn {
+                    color: white;
+                    background-color: $text-price;
+                    text-align: center;
+                    border-radius: $radius-m;
+                    line-height: 90rpx;
+                }
+            }
        }
+    }
+</style>
diff --git a/pages/topic/details.vue b/pages/topic/details.vue
new file mode 100644
index 0000000..a34807d
--- /dev/null
+++ b/pages/topic/details.vue
@@ -0,0 +1,151 @@
+<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>
+                <view class="text">
+                    ZH大健康官方账号
+                </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>
+                    <view class="item-price">
+                        ￥99.00
+                    </view>
+                </view>
+                <view class="item-btn">
+                    查看商品
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+            }
+        },
+        onLoad() {},
+        methods: {
+            
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        padding: $padding;
+        box-sizing: border-box;
+    }
+    
+    .head {
+        font-size: $title-size + 4;
+        font-weight: bold;
+    }
+    
+    .source {
+        margin: $margin 0;
+        position: relative;
+        .logo {
+            width: 58rpx;
+            height: 58rpx;
+            border-radius: 50%;
+            margin-top: $margin - 22;
+        }
+        .title {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            padding-left: 74rpx;
+            font-size: $title-size-sm;
+            .name {
+                margin-bottom: $margin - 25;
+            }
+            .text {
+                font-size: $title-size-sm - 4;
+                color: $text-gray-m;
+            }
+        }
+    }
+    
+    .brief {
+        line-height: 48rpx;
+        font-size: $title-size-m;
+        color: $text-color;
+    }
+    
+    .goods {
+        margin-top: $margin;
+        .title {
+            font-weight: bold;
+            font-size: $title-size;
+        }
+        .item {
+        	position: relative;
+        	margin-top: $margin - 10;
+        	background: #f5fdfa;
+        	border-radius: $radius;
+        	padding: $padding;
+        	.item-cover {
+        		width: 120rpx;
+        		height: 90rpx;
+        		border-radius: $radius-m;
+        	}
+        	.item-title {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: calc(100% - 180rpx);
+                box-sizing: border-box;
+                padding: $padding $padding 0  180rpx;
+        		font-size: $title-size-lg;
+        		margin-bottom: 10px;
+        		color: $text-color;
+                .item-price {
+                    color: $text-price;
+                    margin-top: $margin - 20;
+                }
+        	}
+            .item-btn {
+                position: absolute;
+                right: $padding;
+                top: $padding + 20;
+                background-color: $main-color;
+                color: white;
+                line-height: 62rpx;
+                font-size: $title-size-m;
+                padding: 0 $padding - 10;
+                border-radius: $radius-m;
+            }
+        }
+    }
+</style>
diff --git a/pages/topic/index.vue b/pages/topic/index.vue
new file mode 100644
index 0000000..808f4cc
--- /dev/null
+++ b/pages/topic/index.vue
@@ -0,0 +1,108 @@
+<template>
+    <view class="content">
+        <view class="tabs">
+            <u-tabs
+                :list="list1"
+                @click="click"
+                lineColor="#34CE98"
+                :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
+            />
+        </view>
+        <view class="topic">
+            <oct-topic
+                :lists="topicArr"
+                @onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})" 
+            />
+        </view>
+    </view>
+</template>
+
+<script>
+    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'
+                }]
+            }
+        },
+        onLoad() {},
+        methods: {
+            
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .new-item {
+    	position: relative;
+    	margin-top: $margin - 10;
+    	background: #f5fdfa;
+    	border-radius: $radius;
+    	padding: $padding ($padding * 2 + 200rpx) $padding $padding;
+    	.new-cover {
+    		position: absolute;
+    		right: $padding;
+    		top: $padding;
+    		width: 200rpx;
+    		height: 150rpx;
+    		border-radius: $radius;
+    	}
+    	.new-title {
+    		font-size: $title-size;
+    		line-height: 45rpx;
+    		min-height: 100rpx;
+    		margin-bottom: 10px;
+    		font-weight: bold;
+    		color: $text-color;
+    	}
+    	.new-tool {
+    		color: $text-gray;
+    		font-size: $title-size-sm;
+    		line-height: 40rpx;
+    		text {
+    			margin-right: $margin/2;
+    		}
+    	}
+    }
+    
+    .topic {
+        padding: 0 $padding;
+        box-sizing: border-box;
+    }
+</style>
diff --git a/static/find/default_img.png b/static/find/default_img.png
new file mode 100644
index 0000000..0874e87
Binary files /dev/null and b/static/find/default_img.png differ
diff --git a/static/find/menu_0.jpg b/static/find/menu_0.jpg
new file mode 100644
index 0000000..9a3ee9e
Binary files /dev/null and b/static/find/menu_0.jpg differ
diff --git a/static/find/menu_1.jpg b/static/find/menu_1.jpg
new file mode 100644
index 0000000..ae21c6b
Binary files /dev/null and b/static/find/menu_1.jpg differ
diff --git a/static/find/menu_2.jpg b/static/find/menu_2.jpg
new file mode 100644
index 0000000..cfd6396
Binary files /dev/null and b/static/find/menu_2.jpg differ
diff --git a/static/find/menu_more.png b/static/find/menu_more.png
new file mode 100644
index 0000000..1608962
Binary files /dev/null and b/static/find/menu_more.png differ
diff --git a/static/find/ranking_img.png b/static/find/ranking_img.png
new file mode 100644
index 0000000..782a494
Binary files /dev/null and b/static/find/ranking_img.png differ
diff --git a/static/find/sign.png b/static/find/sign.png
new file mode 100644
index 0000000..ec6202f
Binary files /dev/null and b/static/find/sign.png differ
diff --git a/static/find/sign_active.png b/static/find/sign_active.png
new file mode 100644
index 0000000..68bbe29
Binary files /dev/null and b/static/find/sign_active.png differ
diff --git a/static/find/sign_img.png b/static/find/sign_img.png
new file mode 100644
index 0000000..ba16454
Binary files /dev/null and b/static/find/sign_img.png differ
diff --git a/uni_modules/oct-menu/changelog.md b/uni_modules/oct-menu/changelog.md
new file mode 100644
index 0000000..e69de29
diff --git a/uni_modules/oct-menu/components/oct-menu/oct-menu.vue b/uni_modules/oct-menu/components/oct-menu/oct-menu.vue
new file mode 100644
index 0000000..aa20acb
--- /dev/null
+++ b/uni_modules/oct-menu/components/oct-menu/oct-menu.vue
@@ -0,0 +1,115 @@
+<template>
+    <view>
+        <view class="menu--item" v-for="(item, index) in lists" :key="index" @click="$emit('onMenu', item)" :style="btnStyle">
+            <view class="menu--block">
+                <view class="menu--number" v-if="isNumber">
+                    {{ index + 1 }}
+                </view>
+                <image class="menu--picture" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
+            </view>
+            <view class="menu--label">
+                <view class="nowrap menu--name">
+                    {{ item.name }}
+                </view>
+                <view class="nowrap menu--text">
+                    {{ isType ? item.weight + '克' : item.sub_title }}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+	export default{
+		props:{
+			lists: {
+				type	: Array,
+				required: true,
+				default : () => {
+					return []
+				}
+			},
+            // 列表底部距离
+            btnStyle: {
+            	type	: Object,
+            	default	: () => {
+            		return {}
+            	}
+            },
+            // 是否显示排行数字
+            isNumber: {
+            	type: Boolean,
+            	default: false
+            },
+            
+            // 是否是详情
+            isType: {
+            	type: Boolean,
+            	default: false
+            }
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+<style lang="scss" scoped>
+    
+    .menu--item {
+        background-color: white;
+        border-radius: $radius;
+        position: relative;
+        display: flex;
+        margin-bottom: $margin - 10;
+        &:last-child {
+            margin-bottom: 0;
+        }
+        .menu--block {
+            position: relative;
+            width: 110rpx;
+            height: 110rpx;
+            border-radius: $radius;
+            overflow: hidden;
+            .menu--number {
+                top: 0;
+                left: 0;
+                position: absolute;
+                z-index: 9;
+                font-size: $title-size-sm;
+                padding: 0 $padding - 20;
+                background-color: $text-gray-m;
+                border-radius: $radius 0 $radius 0;
+                color: #FFFFFF;
+            }
+            .menu--picture {
+                z-index: 1;
+                top: 0;
+                left: 0;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        &:nth-child(1) .menu--number,
+        &:nth-child(2) .menu--number,
+        &:nth-child(3) .menu--number{
+            background-color: $text-price;
+        }
+        .menu--label {
+            width: calc(100% - 140rpx);
+            margin: 10rpx 0 0 30rpx;
+            &:last-child {
+                margin-bottom: 0!important;
+            }
+            .menu--name {
+                font-size: $title-size-lg;
+                margin-bottom: $margin - 20;
+                font-weight: bold;
+                color: $text-color;
+            }
+            .menu--text {
+                color: $text-gray;
+                font-size: $title-size-m;
+            }
+        }
+    }
+</style>
diff --git a/uni_modules/oct-menu/package.json b/uni_modules/oct-menu/package.json
new file mode 100644
index 0000000..daedf71
--- /dev/null
+++ b/uni_modules/oct-menu/package.json
@@ -0,0 +1,80 @@
+{
+  "id": "oct-menu",
+  "displayName": "oct-menu",
+  "version": "1.0.0",
+  "description": "oct-menu",
+  "keywords": [
+    "oct-menu"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "",
+      "data": "",
+      "permissions": ""
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "u",
+        "aliyun": "u"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "u",
+          "vue3": "u"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "u",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/oct-menu/readme.md b/uni_modules/oct-menu/readme.md
new file mode 100644
index 0000000..d21a4a3
--- /dev/null
+++ b/uni_modules/oct-menu/readme.md
@@ -0,0 +1 @@
+# oct-menu
\ No newline at end of file
diff --git a/uni_modules/oct-topic/changelog.md b/uni_modules/oct-topic/changelog.md
new file mode 100644
index 0000000..e69de29
diff --git a/uni_modules/oct-topic/components/oct-topic/oct-topic.vue b/uni_modules/oct-topic/components/oct-topic/oct-topic.vue
new file mode 100644
index 0000000..bdfdb5a
--- /dev/null
+++ b/uni_modules/oct-topic/components/oct-topic/oct-topic.vue
@@ -0,0 +1,63 @@
+<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>
+        	<view class="new-tool">
+        		<text>阅读{{ item.read }}</text>
+        		<text>赞{{ item.praise }}</text>
+        	</view>
+        </view>
+    </view>
+</template>
+
+<script>
+	export default{
+		props:{
+			lists: {
+				type	: Array,
+				required: true,
+				default : () => {
+					return []
+				}
+			}
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+    .new-item {
+    	position: relative;
+    	margin-top: $margin - 10;
+    	background: #f5fdfa;
+    	border-radius: $radius;
+    	padding: $padding ($padding * 2 + 200rpx) $padding $padding;
+    	.new-cover {
+    		position: absolute;
+    		right: $padding;
+    		top: $padding;
+    		width: 200rpx;
+    		height: 150rpx;
+    		border-radius: $radius;
+    	}
+    	.new-title {
+    		font-size: $title-size-lg;
+    		line-height: 45rpx;
+    		min-height: 100rpx;
+    		margin-bottom: 10px;
+    		font-weight: bold;
+    		color: $text-color;
+    	}
+    	.new-tool {
+    		color: $text-gray;
+    		font-size: $title-size-sm;
+    		line-height: 40rpx;
+    		text {
+    			margin-right: $margin/2;
+    		}
+    	}
+    }
+</style>
diff --git a/uni_modules/oct-topic/package.json b/uni_modules/oct-topic/package.json
new file mode 100644
index 0000000..9d4eb62
--- /dev/null
+++ b/uni_modules/oct-topic/package.json
@@ -0,0 +1,80 @@
+{
+  "id": "oct-topic",
+  "displayName": "oct-topic",
+  "version": "1.0.0",
+  "description": "oct-topic",
+  "keywords": [
+    "oct-topic"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "",
+      "data": "",
+      "permissions": ""
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "u",
+        "aliyun": "u"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "u",
+          "vue3": "u"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "u",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/oct-topic/readme.md b/uni_modules/oct-topic/readme.md
new file mode 100644
index 0000000..23c80e6
--- /dev/null
+++ b/uni_modules/oct-topic/readme.md
@@ -0,0 +1 @@
+# oct-topic
\ No newline at end of file