diff --git a/components/uni-searchbar.vue b/components/uni-searchbar.vue
new file mode 100644
index 0000000..7b37d01
--- /dev/null
+++ b/components/uni-searchbar.vue
@@ -0,0 +1,116 @@
+<template>
+	<!-- 顶部导航栏 -->
+	<view class="search-bar-container">
+		<view class="search-box" :style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
+			<view class="top-left">
+				<view class="back-button" hover-class="back-button-active" @click="goBack">
+					<u-icon name="arrow-left" color="#fff;" />
+				</view>
+				<view class="search-input">
+					<u-input v-if="!readOnly"
+									 v-model="queryParamF"
+									 :focus="true"
+									 placeholder="搜索优质产品"
+									 prefixIcon="search"
+									 :border="false" style="background-color: #fff;border: none;"/>
+					<view v-else style="width: 360rpx;padding: 10rpx 20rpx;display: flex;align-items: center;"  @click="goSearch">
+						<u-icon name="search" color="#969696" size="22"></u-icon>
+						<text style="margin-left:10rpx;font-size: 30rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #969696;line-height: 37rpx;">搜索优质商品</text>
+					</view>
+					<view class="search-btn" @click="goSearch">搜索</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "searchBar",
+		props: {
+			searchBarTop: {
+				//搜索栏的外边框高度，单位px
+				type: Number,
+				default: 30
+			},
+			searchBarHeight: {
+				//搜索栏的高度，单位px
+				type: Number,
+				default: 30
+			},
+			queryParam: {
+				type: String,
+				default: null
+			},
+			readOnly: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				queryParamF: null
+			}
+		},
+		watch: {
+			queryParam: {
+				handler(val) {
+					this.queryParamF = this.queryParam
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			goSearch() {
+				if(this.readOnly) {
+					this.$emit('navigate')
+					return
+				}
+				this.$emit('search', this.queryParamF)
+			},
+			goBack() {
+				this.$emit('back')
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.search-bar-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		// z-index: 999;
+		width: 100%;
+		background-color: #12CA64;
+
+		.search-box {
+			margin: 10rpx 10rpx;
+			display: flex;
+			align-items: center;
+			.top-left {
+				width: calc(100% - 200rpx);
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				height: 100%;
+				.search-input {
+					display: flex;
+					border: 2rpx solid #fff;
+					background-color: #fff;
+					border-radius: 50rpx;
+					height: 100%;
+					margin-left: 10rpx;
+					.search-btn {
+						font-size: 32rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #3E3E3E;
+						line-height: 64rpx;
+						margin-right: 18rpx;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/manifest.json b/manifest.json
index 228c541..3b8eb92 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,74 +1,74 @@
 {
-	"name": "shitong-app",
-	"appid": "",
-	"description": "",
-	"versionName": "1.0.0",
-	"versionCode": "100",
-	"transformPx": false,
-	/* 5+App特有相关 */
-	"app-plus": {
-		"usingComponents": true,
-		"nvueStyleCompiler": "uni-app",
-		"compilerVersion": 3,
-		"splashscreen": {
-			"alwaysShowBeforeRender": true,
-			"waiting": true,
-			"autoclose": true,
-			"delay": 0
-		},
-		/* 模块配置 */
-		"modules": {},
-		/* 应用发布信息 */
-		"distribute": {
-			/* android打包配置 */
-			"android": {
-				"permissions": [
-					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
-					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-					"<uses-feature android:name=\"android.hardware.camera\"/>",
-					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-				]
-			},
-			/* ios打包配置 */
-			"ios": {},
-			/* SDK配置 */
-			"sdkConfigs": {}
-		}
-	},
-	/* 快应用特有相关 */
-	"quickapp": {},
-	/* 小程序特有相关 */
-	"mp-weixin": {
-		"appid": "wx4c2099a19c69664f",
-		"setting": {
-			"urlCheck": false,
-			"es6": false,
-			"postcss": false
-		},
-		"usingComponents": true
-	},
-	"mp-alipay": {
-		"usingComponents": true
-	},
-	"mp-baidu": {
-		"usingComponents": true
-	},
-	"mp-toutiao": {
-		"usingComponents": true
-	},
-	"uniStatistics": {
-		"enable": false
-	},
-	"vueVersion": "2"
+    "name" : "shitong-app",
+    "appid" : "__UNI__CB00746",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "wx4c2099a19c69664f",
+        "setting" : {
+            "urlCheck" : false,
+            "es6" : false,
+            "postcss" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "vueVersion" : "2"
 }
diff --git a/package-lock.json b/package-lock.json
index b23d8bd..fd7e9d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,22 @@
 {
+  "name": "shitong-app",
+  "lockfileVersion": 2,
   "requires": true,
-  "lockfileVersion": 1,
+  "packages": {
+    "": {
+      "dependencies": {
+        "uview-ui": "^2.0.35"
+      }
+    },
+    "node_modules/uview-ui": {
+      "version": "2.0.35",
+      "resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.35.tgz",
+      "integrity": "sha512-OfMttN3XkHvQosXfd8bjz8ASTvypPoGzBWmQZBJ871bYMCA7t2bDFPlzjbxUj/5ykAjKnZ8zMUapSwSisVt99g==",
+      "engines": {
+        "HBuilderX": "^3.1.0"
+      }
+    }
+  },
   "dependencies": {
     "uview-ui": {
       "version": "2.0.35",
diff --git a/pages.json b/pages.json
index ec89ba5..37a8d05 100644
--- a/pages.json
+++ b/pages.json
@@ -1,6 +1,11 @@
 {
 	"easycom": {
-		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+		"autoscan": true, //是否自动扫描组件
+		"custom": {
+			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
+			"^ua-(.*)": "@/components/uview-ui/components/u-$1/u-$1.vue",
+		  "^customer-(.*)": "@/components/uni-$1.vue" // 匹配components目录内的vue文件
+		}
 	},
 	"pages": [{
 			"path": "pages/index/index",
@@ -40,6 +45,26 @@
 				"navigationBarBackgroundColor": "#12CA64",
 				"enablePullDownRefresh": false
 			}
+		},
+		{
+			"path": "pages/index/search/search",
+			"style": {
+				"navigationBarTitleText": "顶部搜索",
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#12CA64",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/goods-category-search/category-index",
+			"style": {
+				"navigationBarTitleText": "分类详情",
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#12CA64",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"tabBar": {
@@ -77,7 +102,7 @@
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
+		"navigationBarBackgroundColor": "#12CA64",
 		"backgroundColor": "#F8F8F8"
 	},
 	"uniIdRouter": {},
diff --git a/pages/index/goods-category-search/category-index - 副本.vue b/pages/index/goods-category-search/category-index - 副本.vue
new file mode 100644
index 0000000..266bc01
--- /dev/null
+++ b/pages/index/goods-category-search/category-index - 副本.vue	
@@ -0,0 +1,876 @@
+<template>
+	<view :style="{height: windowHeight + 'px', overflow:showMask? 'hidden':'auto'}">
+		<!-- 顶部导航栏 -->
+		<view class="top-search">
+			<customer-searchbar ref="search" :readOnly="true" :search-bar-top="searchBarTop"
+				:search-bar-height="searchBarHeight" @navigate="navigateToSearch" @back="goBack" />
+		</view>
+		<view :style="{marginTop: Number(searchBarTop + searchBarHeight + 2) + 'px',}">
+			<view>
+				<view class="category-view">
+					<view class="left">
+						<view v-for="(item,index) in categoryList" class="category-item"
+							@click="changeSelectedCategory(index)">
+							<view>
+								<view class="icon-box">
+									<image :src="item.icon" mode="aspectFit" class="icon"
+										:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
+								</view>
+								<view class="name">
+									<u-tag v-if="item.active" :text="item.name" bg-color="#14CA65" color="#fff"
+										borderColor="#14CA65" shape="circle" />
+									<text v-else class="no-active">{{item.name}}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="right" @click="exportView('showMask')">
+						<tex style="margin-bottom: 10rpx;">全部</tex>
+						<u-icon size="14" name="/static/category/fl_icon_qb.png"></u-icon>
+					</view>
+				</view>
+				<!-- 类别详情-->
+				<view id="category-detail" class="category-detail" :style="{height: listDataHeight + 'px'}">
+					<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
+						:scroll-top="scrollTop">
+						<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
+							:class="[menuCurrent==index ? 'u-tab-item-active' : '']" :data-current="index"
+							@tap.stop="swichMenu(index)">
+							<text class="title">{{item.name}}</text>
+						</view>
+					</scroll-view>
+					<view class="category-last">
+						<view class="category-tag-box">
+							<scroll-view :scroll-x="true" class="left">
+								<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)"
+									class="category-tag">
+									<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
+										:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
+										<text>{{item.name}}</text>
+									</view>
+									<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
+									<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
+								</view>
+							</scroll-view>
+							<view class="right" @click="exportView('featureMask')">
+								<u-icon size="10" name="/static/category/fl_icon_xl.png"></u-icon>
+							</view>
+						</view>
+						<view class="category-order">
+							<u-tabs :list="tabsList" :scrollable="false" lineWidth="30" lineColor="#0A994A"
+								color="#969696"
+								:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'14px'}"
+								lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
+						</view>
+						<scroll-view scroll-y class="goods-list">
+							<block v-for="(item,index) in tabbar" :key="index">
+								<block v-if="index === menuCurrent">
+									<block v-for="(item1,index1) in item.foods" :key="index1">
+										<view class="goods-item">
+											<view class="left">
+												<view class="image">
+													<image :src="item1.image" mode="scaleToFill"
+														style="width: 150rpx;height: 100%;"></image>
+												</view>
+												<view class="tag">
+													<view class="tag-content">
+														<text>{{item.name}}</text>
+													</view>
+												</view>
+											</view>
+											<view class="right">
+												<view class="name">
+													<text>{{item1.name}}</text>
+												</view>
+												<view class="describe">
+													<text>{{item1.describe}}</text>
+												</view>
+												<view class="publish-date">
+													<view class="publish-date-box">
+														<view
+															style="width: fit-content; display: inline-block;margin-right:6rpx;">
+															<u-icon size="16" name="clock" color="#A3A3A3" />
+														</view>
+														<text style="margin-right: 6rpx;">发布日期</text>
+														<text>{{item1.date}}</text>
+													</view>
+												</view>
+												<view class="tag">
+													<view class="tag-content">
+														<text>{{ item1.feature }}</text>
+													</view>
+												</view>
+											</view>
+										</view>
+									</block>
+								</block>
+							</block>
+						</scroll-view>
+					</view>
+
+				</view>
+
+			</view>
+
+			<view class="bg" bindtap='hideview'
+				:style="{display: showMask || featureMask ? 'block':'none', marginTop: Number(searchBarTop + searchBarHeight + 4) + 'px', height: Number(windowHeight - searchBarTop - searchBarHeight - 4) + 'px',}"
+				@click="showMask = false, featureMask = false"></view>
+			<uni-transition ref="ani" mode-class="slide-top" custom-class="transfromClass" :show="showMask||featureMask">
+				<view class="show" bindtap='hideview'
+					:style="{display: showMask || featureMask ? 'block':'none', top: Number(searchBarTop + searchBarHeight + 4) + 'px',}">
+					<view v-if="showMask" class="category-view-all">
+						<view v-for="(item,index) in categoryList" @click="changeSelectedCategory(index)"
+							style="width: 20%;margin-bottom: 20rpx;">
+							<view class="category-item">
+								<view class="icon-box">
+									<image :src="item.icon" mode="aspectFit" class="icon"
+										:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
+								</view>
+								<view class="name">
+									<view v-if="item.active" class="active">
+										<text>{{item.name}}</text>
+									</view>
+									<text v-else class="no-active">{{item.name}}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view v-if="featureMask" class="category-view-all" style="align-content: start;">
+						<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)" class="category-tag">
+							<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
+								:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
+								<text>{{item.name}}</text>
+							</view>
+							<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
+							<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
+						</view>
+					</view>
+					<view class="arrow-up" @click="showMask = false, featureMask = false">
+						<text style="margin-right: 4rpx;">点击收起</text>
+						<u-icon size="15" name="arrow-up-fill"></u-icon>
+					</view>
+				</view>
+
+			</uni-transition>
+
+			<!-- <uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup> -->
+			<!-- 			<u-popup v-model="showMask" mode="top" border-radius="14">
+				<view style="margin-top: 200rpx;">出淤泥而不染，濯清涟而不妖</view>
+			</u-popup> -->
+		</view>
+
+	</view>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				searchBarTop: 0, //搜索栏的外边框高度，单位px
+				searchBarHeight: 0, //搜索栏的高度，单位px
+				windowHeight: 1,
+				listDataHeight: 1, // 剩余高度
+				queryParam: '',
+				showMask: false,
+				featureMask: false,
+				categoryList: [{
+						name: '烘焙宝典',
+						icon: '/static/category/sy_icon_hp.png',
+						active: true
+					},
+					{
+						name: '零食铺子',
+						icon: '/static/category/sy_icon_ls.png',
+						active: false
+					},
+					{
+						name: '饮品大全',
+						icon: '/static/category/sy_icon_yp.png',
+						active: false
+					},
+					{
+						name: '调味菜单',
+						icon: '/static/category/sy_icon_tw.png',
+						active: false
+					},
+					{
+						name: '肉食荟萃',
+						icon: '/static/category/sy_icon_rs.png',
+						active: false
+					},
+					{
+						name: '乳品手册',
+						icon: '/static/category/sy_icon_np.png',
+						active: false
+					},
+					{
+						name: '果蔬地图',
+						icon: '/static/category/sy_icon_gs.png',
+						active: false
+					},
+					{
+						name: '食界新贵',
+						icon: '/static/category/sy_icon_sj.png',
+						active: false
+					},
+					{
+						name: '欢喜盒子',
+						icon: '/static/category/sy_icon_hz.png',
+						active: false
+					},
+					{
+						name: '创意工具',
+						icon: '/static/category/sy_icon_cy.png',
+						active: false
+					}
+				],
+				selectedCategory: 0,
+				tabbar: [{
+						"name": "蛋糕面包",
+						"foods": [{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							}
+						]
+					},
+					{
+						"name": "糕点卷酥",
+						"foods": [{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							}
+						]
+					},
+					{
+						"name": "饼干曲奇",
+						"foods": [{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							}
+						]
+					},
+				],
+				tabsList: [{
+					name: '上架时间'
+				}, {
+					name: '点赞量'
+				}],
+				tagsList: [{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂无添加剂'
+					}
+				],
+				scrollTop: 0, //tab标题的滚动条位置
+				menuCurrent: 0, // 预设当前项的值
+				menuHeight: 0, // 左边菜单的高度
+				menuItemHeight: 0, // 左边菜单item的高度
+				tabCurrent: 0, //分类详情  上架时间, // 左边菜单item的高度
+				tagCurrent: 0, //分类详情  上架时间
+			}
+		},
+		onLoad() {
+			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+			console.log(menuButtonInfo)
+			this.searchBarTop = menuButtonInfo.top;
+			this.searchBarHeight = menuButtonInfo.height;
+		},
+		onReady() {
+			let that = this;
+			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
+				success(res) { //成功回调函数
+					// windowHeight
+					that.windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
+					let titleH = uni.createSelectorQuery().select("#category-detail"); //想要获取高度的元素名（class/id）
+					titleH.boundingClientRect(data => {
+						let pH = that.windowHeight;
+						that.listDataHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
+						console.log(that.listDataHeight)
+					}).exec()
+				}
+			})
+			this.$refs.ani.init({
+				duration: 200,
+				timingFunction: 'linear',
+				transformOrigin: '-100% -100%',
+				translateY: Number(-this.searchBarTop - this.searchBarHeight - 4) + 'px',
+				delay: 0
+			})
+		},
+		methods: {
+			goSearch(param) {
+				this.queryParam = param
+				const index = this.recentRecordList.findIndex(item => {
+					return item === param
+				})
+				if (index > -1) {
+					this.recentRecordList.splice(index, 1)
+				}
+				this.recentRecordList.unshift(param)
+			},
+			changeSelectedCategory(index) {
+				this.$set(this.categoryList, this.selectedCategory, {
+					...this.categoryList[this.selectedCategory],
+					active: false
+				});
+				this.$set(this.categoryList, index, {
+					...this.categoryList[index],
+					active: true
+				});
+				this.selectedCategory = index
+				this.showMask = false
+			},
+			changeSelectedTag(index) {
+				this.tagCurrent = index
+				this.featureMask = false
+			},
+			toShowPop() {
+				console.log('---pop')
+				this.showMask = true
+				// this.$refs.popup.open('top')
+			},
+			getImg() {
+				return Math.floor(Math.random() * 35);
+			},
+			// 点击左边的栏目切换
+			async swichMenu(index) {
+				if (index == this.menuCurrent) return;
+				this.menuCurrent = index;
+				// 如果为0，意味着尚未初始化
+				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+					await this.getElRect('menu-scroll-view', 'menuHeight');
+					await this.getElRect('u-tab-item', 'menuItemHeight');
+				}
+				// 将菜单菜单活动item垂直居中
+				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+			},
+			// 获取一个目标元素的高度
+			getElRect(elClass, dataVal) {
+				new Promise((resolve, reject) => {
+					const query = uni.createSelectorQuery().in(this);
+					query.select('.' + elClass).fields({
+						size: true
+					}, res => {
+						// 如果节点尚未生成，res值为null，循环调用执行
+						if (!res) {
+							setTimeout(() => {
+								this.getElRect(elClass);
+							}, 10);
+							return;
+						}
+						this[dataVal] = res.height;
+					}).exec();
+				})
+			},
+			exportView(str) {
+				if (str === 'showMask') {
+					this.showMask = true
+					// 同时右平移到 100px,旋转 360 读
+								// this.$refs.ani.step({
+								// 	translateY: Number(-this.searchBarTop - this.searchBarHeight - 4) + 'px'
+								// })
+								// 开始执行动画
+								this.$refs.ani.run()
+				} else if (str === 'featureMask') {
+					this.featureMask = true
+				}
+			},
+			tabChange(selectTab) {
+				console.log(selectTab)
+				this.tabCurrent = selectTab.index;
+			},
+			navigateToSearch() {
+				uni.navigateTo({
+					url: '/pages/index/search/search'
+				})
+			},
+			goBack() {
+				uni.navigateBack()
+			},
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.top-search {
+		position: relative;
+	}
+
+	.category-view {
+		height: 230rpx;
+		background-color: #F6F6F6;
+		display: flex;
+		justify-content: space-around;
+
+		.left {
+			width: calc(100% - 60rpx);
+			padding: 32rpx;
+			display: flex;
+			overflow: auto;
+
+			// flex-direction: row;
+			// flex-wrap: wrap;
+			// align-items: center;
+
+			.category-item {
+				margin-right: 20rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+
+				.icon-box {
+					text-align: center;
+
+					.icon {
+						width: 100rpx;
+						height: 100rpx;
+						padding: 4rpx;
+						border-radius: 50%;
+					}
+				}
+
+				.name {
+					width: 156rpx;
+					text-align: center;
+
+					.no-active {
+						font-size: 28rpx;
+						font-family: PingFang-SC-Medium, PingFang-SC;
+						font-weight: 500;
+						color: #616161;
+						line-height: 28rpx;
+					}
+				}
+			}
+		}
+
+		.right {
+			width: 60rpx;
+			padding: 20rpx;
+			background: #F6F6F6;
+			border-left: 2rpx #F6F6F6 solid;
+			box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
+
+			font-size: 28rpx;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #343434;
+			line-height: 34rpx;
+
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			text-align: center;
+		}
+	}
+
+	.category-detail {
+		display: flex;
+		background-color: #F5F5F5;
+
+		.u-tab-view {
+			width: 210rpx;
+			height: 100%;
+
+			.u-tab-item {
+				height: 90rpx;
+				background: #f6f6f6;
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 26rpx;
+				color: #444;
+				font-weight: 400;
+				line-height: 1;
+
+				.title {
+					font-size: 32rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #14CA65;
+					line-height: 40rpx;
+				}
+			}
+
+			.u-tab-item-active {
+				position: relative;
+				color: #000;
+				font-size: 30rpx;
+				font-weight: 600;
+				background: #fff;
+				border: 2rpx solid #fff;
+				border-radius: 25% 0 0 0;
+			}
+
+			.u-tab-item-active::before {
+				content: "";
+				position: absolute;
+				border: 1rpx solid #14CA65;
+				background-color: #14CA65;
+				width: 1rpx;
+				height: 14rpx;
+				left: 27rpx;
+				top: 37srpx;
+				border-radius: 1rpx;
+			}
+		}
+
+		.category-last {
+			width: calc(100% - 206rpx);
+			height: 100%;
+
+			.category-tag-box {
+				background-color: #fff;
+				height: 110rpx;
+				display: flex;
+				border-bottom: 1rpx solid #EEEEEE;
+
+				.left {
+					width: calc(100% - 60rpx);
+					padding: 12rpx;
+					white-space: nowrap;
+					overflow: auto;
+					line-height: 90rpx;
+					;
+
+					.category-tag {
+						margin-right: 10rpx;
+						width: fit-content;
+						display: inline-flex;
+					}
+				}
+
+				.right {
+					width: 60rpx;
+					padding: 20rpx;
+					background: #F6F6F6;
+					border-left: 2rpx #F6F6F6 solid;
+					box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
+
+					font-size: 28rpx;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #343434;
+					line-height: 34rpx;
+
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					text-align: center;
+				}
+			}
+
+
+			.category-order {
+				width: 100%;
+				background-color: #fff;
+				border-bottom: 1rpx solid #EEEEEE;
+			}
+
+			.goods-list {
+				background-color: #fff;
+				height: calc(100% - 210rpx);
+
+				.goods-item {
+					padding: 16rpx;
+					margin-bottom: 10rpx;
+					display: flex;
+					background: #FFFFFF;
+					box-shadow: 0px 2px 3px 0px rgba(169, 169, 169, 0.2);
+					border-bottom: 1px solid #EEEEEE;
+
+					.left {
+						width: 170rpx;
+						position: relative;
+
+						.image {
+							padding: 20rpx;
+							height: calc(100% - 40rpx)
+						}
+
+						.tag {
+							position: absolute;
+							top: 20rpx;
+							right: 0;
+							float: right;
+
+							.tag-content {
+								padding: 16rpx;
+								border-radius: 25rpx 0 0 25rpx;
+								line-height: 14rpx;
+								background-color: #0DB658;
+								color: #fff;
+								font-size: 24rpx;
+								width: fit-content;
+							}
+						}
+					}
+
+					.right {
+						padding: 20rpx;
+						height: calc(100% - 40rpx);
+
+						.name {
+							font-size: 33rpx;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: bold;
+							color: #E10707;
+							line-height: 56rpx;
+							white-space: nowrap;
+						}
+
+						.describe {
+							font-size: 33rpx;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #3E3E3E;
+							line-height: 37rpx;
+
+							word-break: break-all;
+							text-overflow: ellipsis;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							/* 这里是超出几行省略 */
+							-webkit-line-clamp: 2;
+							overflow: hidden;
+						}
+
+						.publish-date {
+							color: #A3A3A3;
+							font-size: 26rpx;
+							line-height: 64rpx;
+
+							.publish-date-box {
+								display: flex;
+								align-items: center;
+							}
+						}
+
+						.tag {
+							.tag-content {
+								padding: 16rpx;
+								border-radius: 25rpx;
+								line-height: 14rpx;
+								background-color: #FDD96A;
+								color: #fff;
+								font-size: 24rpx;
+								width: fit-content;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.bg {
+		display: none;
+		position: absolute;
+		top: 0%;
+		left: 0%;
+		width: 100%;
+		background-color: black;
+		z-index: 1001;
+		-moz-opacity: 0.7;
+		opacity: 0.70;
+		filter: alpha(opacity=70);
+	}
+
+	/deep/ .transfromClass {
+		position: fixed;
+		bottom: 0;
+		top: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 1001;
+	}
+.show {
+			display: none;
+			text-align: center;
+			position: absolute;
+			width: calc(100% - 20rpx);
+			height: fit-content;
+			padding: 20rpx 10rpx 0 10rpx;
+			border: 1rpx solid #fff;
+			background-color: #fff;
+			border-radius: 0 0 20rpx 20rpx;
+			z-index: 1002;
+			overflow: auto;
+			transition: all 3.4s;
+
+			.category-view-all {
+				width: calc(100% - 20rpx);
+				display: flex;
+				flex-direction: row;
+				flex-wrap: wrap;
+				border-bottom: 1px solid #EEEEEE;
+				height: 360rpx;
+				overflow: auto;
+				// transition: height 3.4s ease;
+
+				.category-item {
+					// display: flex;
+					// flex-direction: column;
+					// justify-content: center;
+					width: 100%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+
+					.icon-box {
+						text-align: center;
+
+						.icon {
+							width: 90rpx;
+							height: 90rpx;
+							padding: 4rpx;
+							border-radius: 50%;
+						}
+					}
+
+					.name {
+						text-align: center;
+
+						.active {
+							width: fit-content;
+							font-size: 26rpx;
+							text-align: center;
+							padding: 6rpx;
+							border-radius: 10rpx;
+							line-height: 32rpx;
+							color: #fff;
+							background-color: #14CA65;
+						}
+
+						.no-active {
+							font-size: 26rpx;
+							font-family: PingFang-SC-Medium, PingFang-SC;
+							font-weight: 500;
+							color: #616161;
+							line-height: 28rpx;
+						}
+					}
+				}
+
+				.category-tag {
+					margin-right: 10rpx;
+					margin-bottom: 20rpx;
+					width: fit-content;
+					height: fit-content;
+					display: inline-flex;
+				}
+			}
+
+			.arrow-up {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 28rpx;
+				padding: 24rpx;
+				line-height: 32rpx;
+			}
+		}
+
+
+	/deep/ .u-tag {
+		flex: none;
+		width: auto;
+	}
+</style>
diff --git a/pages/index/goods-category-search/category-index.vue b/pages/index/goods-category-search/category-index.vue
new file mode 100644
index 0000000..e830469
--- /dev/null
+++ b/pages/index/goods-category-search/category-index.vue
@@ -0,0 +1,849 @@
+<template>
+	<view :style="{height: windowHeight + 'px', overflow:showMask? 'hidden':'auto'}">
+		<!-- 顶部导航栏 -->
+		<view class="top-search">
+			<customer-searchbar ref="search" :readOnly="true" :search-bar-top="searchBarTop"
+				:search-bar-height="searchBarHeight" @navigate="navigateToSearch" @back="goBack" />
+		</view>
+		<view :style="{marginTop: Number(searchBarTop + searchBarHeight + 2) + 'px',}">
+			<view>
+				<view class="category-view">
+					<view class="left">
+						<view v-for="(item,index) in categoryList" class="category-item"
+							@click="changeSelectedCategory(index)">
+							<view>
+								<view class="icon-box">
+									<image :src="item.icon" mode="aspectFit" class="icon"
+										:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
+								</view>
+								<view class="name">
+									<u-tag v-if="item.active" :text="item.name" bg-color="#14CA65" color="#fff"
+										borderColor="#14CA65" shape="circle" />
+									<text v-else class="no-active">{{item.name}}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="right" @click="exportView('showMask')">
+						<tex style="margin-bottom: 10rpx;">全部</tex>
+						<u-icon size="14" name="/static/category/fl_icon_qb.png"></u-icon>
+					</view>
+				</view>
+				<!-- 类别详情-->
+				<view id="category-detail" class="category-detail" :style="{height: listDataHeight + 'px'}">
+					<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
+						:scroll-top="scrollTop">
+						<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
+							:class="[menuCurrent==index ? 'u-tab-item-active' : '']" :data-current="index"
+							@tap.stop="swichMenu(index)">
+							<text class="title">{{item.name}}</text>
+						</view>
+					</scroll-view>
+					<view class="category-last">
+						<view class="category-tag-box">
+							<scroll-view :scroll-x="true" class="left">
+								<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)"
+									class="category-tag">
+									<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
+										:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
+										<text>{{item.name}}</text>
+									</view>
+									<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
+									<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
+								</view>
+							</scroll-view>
+							<view class="right" @click="exportView('featureMask')">
+								<u-icon size="10" name="/static/category/fl_icon_xl.png"></u-icon>
+							</view>
+						</view>
+						<view class="category-order">
+							<u-tabs :list="tabsList" :scrollable="false" lineWidth="30" lineColor="#0A994A"
+								color="#969696"
+								:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'14px'}"
+								lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
+						</view>
+						<scroll-view scroll-y class="goods-list">
+							<block v-for="(item,index) in tabbar" :key="index">
+								<block v-if="index === menuCurrent">
+									<block v-for="(item1,index1) in item.foods" :key="index1">
+										<view class="goods-item">
+											<view class="left">
+												<view class="image">
+													<image :src="item1.image" mode="scaleToFill"
+														style="width: 150rpx;height: 100%;"></image>
+												</view>
+												<view class="tag">
+													<view class="tag-content">
+														<text>{{item.name}}</text>
+													</view>
+												</view>
+											</view>
+											<view class="right">
+												<view class="name">
+													<text>{{item1.name}}</text>
+												</view>
+												<view class="describe">
+													<text>{{item1.describe}}</text>
+												</view>
+												<view class="publish-date">
+													<view class="publish-date-box">
+														<view
+															style="width: fit-content; display: inline-block;margin-right:6rpx;">
+															<u-icon size="16" name="clock" color="#A3A3A3" />
+														</view>
+														<text style="margin-right: 6rpx;">发布日期</text>
+														<text>{{item1.date}}</text>
+													</view>
+												</view>
+												<view class="tag">
+													<view class="tag-content">
+														<text>{{ item1.feature }}</text>
+													</view>
+												</view>
+											</view>
+										</view>
+									</block>
+								</block>
+							</block>
+						</scroll-view>
+					</view>
+
+				</view>
+
+			</view>
+
+			<view class="bg" bindtap='hideview'
+				:style="{display: showMask || featureMask ? 'block':'none', marginTop: Number(searchBarTop + searchBarHeight + 4) + 'px', height: Number(windowHeight - searchBarTop - searchBarHeight - 4) + 'px',}"
+				@click="showMask = false, featureMask = false"></view>
+			<view class="show" bindtap='hideview'
+				:style="{display: showMask || featureMask ? 'block':'none', top: Number(searchBarTop + searchBarHeight + 4) + 'px',}">
+				<view v-if="showMask" class="category-view-all">
+					<view v-for="(item,index) in categoryList" @click="changeSelectedCategory(index)"
+						style="width: 20%;margin-bottom: 20rpx;">
+						<view class="category-item">
+							<view class="icon-box">
+								<image :src="item.icon" mode="aspectFit" class="icon"
+									:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
+							</view>
+							<view class="name">
+								<view v-if="item.active" class="active">
+									<text>{{item.name}}</text>
+								</view>
+								<text v-else class="no-active">{{item.name}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view v-if="featureMask" class="category-view-all" style="align-content: start;">
+					<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)" class="category-tag">
+						<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
+							:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
+							<text>{{item.name}}</text>
+						</view>
+						<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
+						<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
+					</view>
+				</view>
+				<view class="arrow-up" @click="showMask = false, featureMask = false">
+					<text style="margin-right: 4rpx;">点击收起</text>
+					<u-icon size="15" name="arrow-up-fill"></u-icon>
+				</view>
+			</view>
+
+			<!-- <uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup> -->
+			<!-- 			<u-popup v-model="showMask" mode="top" border-radius="14">
+				<view style="margin-top: 200rpx;">出淤泥而不染，濯清涟而不妖</view>
+			</u-popup> -->
+		</view>
+
+	</view>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				searchBarTop: 0, //搜索栏的外边框高度，单位px
+				searchBarHeight: 0, //搜索栏的高度，单位px
+				windowHeight: 1,
+				listDataHeight: 1, // 剩余高度
+				queryParam: '',
+				showMask: false,
+				featureMask: false,
+				categoryList: [{
+						name: '烘焙宝典',
+						icon: '/static/category/sy_icon_hp.png',
+						active: true
+					},
+					{
+						name: '零食铺子',
+						icon: '/static/category/sy_icon_ls.png',
+						active: false
+					},
+					{
+						name: '饮品大全',
+						icon: '/static/category/sy_icon_yp.png',
+						active: false
+					},
+					{
+						name: '调味菜单',
+						icon: '/static/category/sy_icon_tw.png',
+						active: false
+					},
+					{
+						name: '肉食荟萃',
+						icon: '/static/category/sy_icon_rs.png',
+						active: false
+					},
+					{
+						name: '乳品手册',
+						icon: '/static/category/sy_icon_np.png',
+						active: false
+					},
+					{
+						name: '果蔬地图',
+						icon: '/static/category/sy_icon_gs.png',
+						active: false
+					},
+					{
+						name: '食界新贵',
+						icon: '/static/category/sy_icon_sj.png',
+						active: false
+					},
+					{
+						name: '欢喜盒子',
+						icon: '/static/category/sy_icon_hz.png',
+						active: false
+					},
+					{
+						name: '创意工具',
+						icon: '/static/category/sy_icon_cy.png',
+						active: false
+					}
+				],
+				selectedCategory: 0,
+				tabbar: [{
+						"name": "蛋糕面包",
+						"foods": [{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							}
+						]
+					},
+					{
+						"name": "糕点卷酥",
+						"foods": [{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							}
+						]
+					},
+					{
+						"name": "饼干曲奇",
+						"foods": [{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							},
+							{
+								"name": "牛角面包",
+								"describe": "法国风味糖皮饼干牛角面包早餐食品",
+								"image": "/static/category/fl_icon_qb.png",
+								"date": '2022-12-04',
+								'feature': '无防腐剂'
+							}
+						]
+					},
+				],
+				tabsList: [{
+					name: '上架时间'
+				}, {
+					name: '点赞量'
+				}],
+				tagsList: [{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂'
+					},
+					{
+						name: '无添加剂无添加剂'
+					}
+				],
+				scrollTop: 0, //tab标题的滚动条位置
+				menuCurrent: 0, // 预设当前项的值
+				menuHeight: 0, // 左边菜单的高度
+				menuItemHeight: 0, // 左边菜单item的高度
+				tabCurrent: 0, //分类详情  上架时间, // 左边菜单item的高度
+				tagCurrent: 0, //分类详情  上架时间
+			}
+		},
+		onLoad() {
+			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+			console.log(menuButtonInfo)
+			this.searchBarTop = menuButtonInfo.top;
+			this.searchBarHeight = menuButtonInfo.height;
+		},
+		onReady() {
+			let that = this;
+			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
+				success(res) { //成功回调函数
+					// windowHeight
+					that.windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
+					let titleH = uni.createSelectorQuery().select("#category-detail"); //想要获取高度的元素名（class/id）
+					titleH.boundingClientRect(data => {
+						let pH = that.windowHeight;
+						that.listDataHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
+						console.log(that.listDataHeight)
+					}).exec()
+				}
+			})
+		},
+		methods: {
+			goSearch(param) {
+				this.queryParam = param
+				const index = this.recentRecordList.findIndex(item => {
+					return item === param
+				})
+				if (index > -1) {
+					this.recentRecordList.splice(index, 1)
+				}
+				this.recentRecordList.unshift(param)
+			},
+			changeSelectedCategory(index) {
+				this.$set(this.categoryList, this.selectedCategory, {
+					...this.categoryList[this.selectedCategory],
+					active: false
+				});
+				this.$set(this.categoryList, index, {
+					...this.categoryList[index],
+					active: true
+				});
+				this.selectedCategory = index
+				this.showMask = false
+			},
+			changeSelectedTag(index) {
+				this.tagCurrent = index
+				this.featureMask = false
+			},
+			toShowPop() {
+				console.log('---pop')
+				this.showMask = true
+				// this.$refs.popup.open('top')
+			},
+			getImg() {
+				return Math.floor(Math.random() * 35);
+			},
+			// 点击左边的栏目切换
+			async swichMenu(index) {
+				if (index == this.menuCurrent) return;
+				this.menuCurrent = index;
+				// 如果为0，意味着尚未初始化
+				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+					await this.getElRect('menu-scroll-view', 'menuHeight');
+					await this.getElRect('u-tab-item', 'menuItemHeight');
+				}
+				// 将菜单菜单活动item垂直居中
+				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+			},
+			// 获取一个目标元素的高度
+			getElRect(elClass, dataVal) {
+				new Promise((resolve, reject) => {
+					const query = uni.createSelectorQuery().in(this);
+					query.select('.' + elClass).fields({
+						size: true
+					}, res => {
+						// 如果节点尚未生成，res值为null，循环调用执行
+						if (!res) {
+							setTimeout(() => {
+								this.getElRect(elClass);
+							}, 10);
+							return;
+						}
+						this[dataVal] = res.height;
+					}).exec();
+				})
+			},
+			exportView(str) {
+				if(str === 'showMask') {
+					this.showMask = true
+				} else if(str === 'featureMask') {
+					this.featureMask = true
+				}
+			},
+			tabChange(selectTab) {
+				console.log(selectTab)
+				this.tabCurrent = selectTab.index;
+			},
+			navigateToSearch() {
+				uni.navigateTo({
+					url:'/pages/index/search/search'
+				})
+			},
+			goBack() {
+				uni.navigateBack()
+			},
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.top-search {
+		position: relative;
+	}
+
+	.category-view {
+		height: 230rpx;
+		background-color: #F6F6F6;
+		display: flex;
+		justify-content: space-around;
+
+		.left {
+			width: calc(100% - 60rpx);
+			padding: 32rpx;
+			display: flex;
+			overflow: auto;
+
+			// flex-direction: row;
+			// flex-wrap: wrap;
+			// align-items: center;
+
+			.category-item {
+				margin-right: 20rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+
+				.icon-box {
+					text-align: center;
+
+					.icon {
+						width: 100rpx;
+						height: 100rpx;
+						padding: 4rpx;
+						border-radius: 50%;
+					}
+				}
+
+				.name {
+					width: 156rpx;
+					text-align: center;
+
+					.no-active {
+						font-size: 28rpx;
+						font-family: PingFang-SC-Medium, PingFang-SC;
+						font-weight: 500;
+						color: #616161;
+						line-height: 28rpx;
+					}
+				}
+			}
+		}
+
+		.right {
+			width: 60rpx;
+			padding: 20rpx;
+			background: #F6F6F6;
+			border-left: 2rpx #F6F6F6 solid;
+			box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
+
+			font-size: 28rpx;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #343434;
+			line-height: 34rpx;
+
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			text-align: center;
+		}
+	}
+
+	.category-detail {
+		display: flex;
+		background-color: #F5F5F5;
+
+		.u-tab-view {
+			width: 210rpx;
+			height: 100%;
+
+			.u-tab-item {
+				height: 90rpx;
+				background: #f6f6f6;
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 26rpx;
+				color: #444;
+				font-weight: 400;
+				line-height: 1;
+
+				.title {
+					font-size: 32rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #14CA65;
+					line-height: 40rpx;
+				}
+			}
+
+			.u-tab-item-active {
+				position: relative;
+				color: #000;
+				font-size: 30rpx;
+				font-weight: 600;
+				background: #fff;
+				border: 2rpx solid #fff;
+				border-radius: 25% 0 0 0;
+			}
+
+			.u-tab-item-active::before {
+				content: "";
+				position: absolute;
+				border: 1rpx solid #14CA65;
+				background-color: #14CA65;
+				width: 1rpx;
+				height: 14rpx;
+				left: 27rpx;
+				top: 37srpx;
+				border-radius: 1rpx;
+			}
+		}
+
+		.category-last {
+			width: calc(100% - 206rpx);
+			height: 100%;
+
+			.category-tag-box {
+				background-color: #fff;
+				height: 110rpx;
+				display: flex;
+				border-bottom: 1rpx solid #EEEEEE;
+
+				.left {
+					width: calc(100% - 60rpx);
+					padding: 12rpx;
+					white-space: nowrap;
+					overflow: auto;
+					line-height: 90rpx;
+					;
+
+					.category-tag {
+						margin-right: 10rpx;
+						width: fit-content;
+						display: inline-flex;
+					}
+				}
+
+				.right {
+					width: 60rpx;
+					padding: 20rpx;
+					background: #F6F6F6;
+					border-left: 2rpx #F6F6F6 solid;
+					box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
+
+					font-size: 28rpx;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #343434;
+					line-height: 34rpx;
+
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					text-align: center;
+				}
+			}
+
+
+			.category-order {
+				width: 100%;
+				background-color: #fff;
+				border-bottom: 1rpx solid #EEEEEE;
+			}
+
+			.goods-list {
+				background-color: #fff;
+				height: calc(100% - 210rpx);
+
+				.goods-item {
+					padding: 16rpx;
+					margin-bottom: 10rpx;
+					display: flex;
+					background: #FFFFFF;
+					box-shadow: 0px 2px 3px 0px rgba(169, 169, 169, 0.2);
+					border-bottom: 1px solid #EEEEEE;
+
+					.left {
+						width: 170rpx;
+						position: relative;
+
+						.image {
+							padding: 20rpx;
+							height: calc(100% - 40rpx)
+						}
+
+						.tag {
+							position: absolute;
+							top: 20rpx;
+							right: 0;
+							float: right;
+
+							.tag-content {
+								padding: 16rpx;
+								border-radius: 25rpx 0 0 25rpx;
+								line-height: 14rpx;
+								background-color: #0DB658;
+								color: #fff;
+								font-size: 24rpx;
+								width: fit-content;
+							}
+						}
+					}
+
+					.right {
+						padding: 20rpx;
+						height: calc(100% - 40rpx);
+
+						.name {
+							font-size: 33rpx;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: bold;
+							color: #E10707;
+							line-height: 56rpx;
+							white-space: nowrap;
+						}
+
+						.describe {
+							font-size: 33rpx;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #3E3E3E;
+							line-height: 37rpx;
+
+							word-break: break-all;
+							text-overflow: ellipsis;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							/* 这里是超出几行省略 */
+							-webkit-line-clamp: 2;
+							overflow: hidden;
+						}
+
+						.publish-date {
+							color: #A3A3A3;
+							font-size: 26rpx;
+							line-height: 64rpx;
+
+							.publish-date-box {
+								display: flex;
+								align-items: center;
+							}
+						}
+
+						.tag {
+							.tag-content {
+								padding: 16rpx;
+								border-radius: 25rpx;
+								line-height: 14rpx;
+								background-color: #FDD96A;
+								color: #fff;
+								font-size: 24rpx;
+								width: fit-content;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.bg {
+		display: none;
+		position: absolute;
+		top: 0%;
+		left: 0%;
+		width: 100%;
+		background-color: black;
+		z-index: 1001;
+		-moz-opacity: 0.7;
+		opacity: 0.70;
+		filter: alpha(opacity=70);
+	}
+
+	.show {
+		display: none;
+		text-align: center;
+		position: absolute;
+		width: calc(100% - 20rpx);
+		height: fit-content;
+		padding: 20rpx 10rpx 0 10rpx;
+		border: 1rpx solid #fff;
+		background-color: #fff;
+		border-radius: 0 0 20rpx 20rpx;
+		z-index: 1002;
+		overflow: auto;
+		transition: all 2.4s;
+
+		.category-view-all {
+			width: calc(100% - 20rpx);
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			border-bottom: 1px solid #EEEEEE;
+			height: 360rpx;
+			overflow: auto;
+			transition: height 1.3s ease;
+				
+
+			.category-item {
+				// display: flex;
+				// flex-direction: column;
+				// justify-content: center;
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.icon-box {
+					text-align: center;
+
+					.icon {
+						width: 90rpx;
+						height: 90rpx;
+						padding: 4rpx;
+						border-radius: 50%;
+					}
+				}
+
+				.name {
+					text-align: center;
+
+					.active {
+						width: fit-content;
+						font-size: 26rpx;
+						text-align: center;
+						padding: 6rpx;
+						border-radius: 10rpx;
+						line-height: 32rpx;
+						color: #fff;
+						background-color: #14CA65;
+					}
+
+					.no-active {
+						font-size: 26rpx;
+						font-family: PingFang-SC-Medium, PingFang-SC;
+						font-weight: 500;
+						color: #616161;
+						line-height: 28rpx;
+					}
+				}
+			}
+
+			.category-tag {
+				margin-right: 10rpx;
+				margin-bottom: 20rpx;
+				width: fit-content;
+				height: fit-content;
+				display: inline-flex;
+			}
+		}
+
+		.arrow-up {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 28rpx;
+			padding: 24rpx;
+			line-height: 32rpx;
+		}
+	}
+
+	/deep/ .u-tag {
+		flex: none;
+		width: auto;
+	}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 07c44c2..ea07eb0 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -3,9 +3,12 @@
 	<view>
 		<view class="input_block">
 			<view class="input_block_border">
-				<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
+				<view @click="toSearch">
+					<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
 					prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx">
 				</u-input>
+				</view>
+				
 			</view>
 		</view>
 	</view>
@@ -18,7 +21,12 @@
 			}
 		},
 		methods: {
-
+			toSearch() {
+				console.log('--search')
+				uni.navigateTo({
+					url: '/pages/index/search/search'
+				})
+			}
 		}
 	}
 </script>
diff --git a/pages/index/search/search.vue b/pages/index/search/search.vue
new file mode 100644
index 0000000..12253dd
--- /dev/null
+++ b/pages/index/search/search.vue
@@ -0,0 +1,171 @@
+<template>
+	<view>
+		<!-- 顶部导航栏 -->
+		<view class="top-search">
+			<customer-searchbar ref="search" :queryParam="queryParam" :search-bar-top="searchBarTop" :search-bar-height="searchBarHeight"
+				@search="goSearch" @back="goBack" />
+		</view>
+		<!-- 最近搜索 -->
+		<view class="recent-search" :style="{marginTop: Number(searchBarTop + searchBarHeight) + 'px',}">
+			<view class="title">
+				<text class="title-text">最近搜索</text>
+				<u-icon name="trash" color="#666666" size="24" @click="clearRecentSearch"/>
+			</view>
+			<view class="recent-record">
+				<view v-if="recentRecordList.length > 0"  class="no-empty-record">
+					<view v-for="(item, index) in recentRecordList" :key="index" class="tag-item">
+					<u-tag bg-color="#eee"
+								 borderColor="#eee"
+							   color="#666"
+								 :text="item"
+								 @click="recentSearch(item)"/>
+					</view>
+				</view>
+				<view v-else>
+					<view class="empty-record">
+						<text>暂无搜索记录</text>
+					</view>
+				</view>
+				
+				
+			</view>
+		</view>
+		<!-- 搜索发现 -->
+		<view class="search-found">
+			<view class="title">
+				<text class="title-text">搜索发现</text>
+			</view>
+			<view class="found-record">
+				<view v-for="(item, index) in foundList" :key="index" class="tag-item">
+					<u-tag bg-color="#eee"
+								 borderColor="#eee"
+							   color="#666"
+								 :text="item"
+								 @click="recentSearch(item)"/>
+				</view>
+				
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script>
+	import { toast } from 'service/request.js'
+	export default {
+		data() {
+			return {
+				searchBarTop: 0, //搜索栏的外边框高度，单位px
+				searchBarHeight: 0, //搜索栏的高度，单位px
+				queryParam: '',
+				recentRecordList: [
+					'烘焙宝典1',
+					'烘焙宝典2',
+					'烘焙宝典3',
+					'烘焙宝典4',
+					'无添加剂5',
+					'烘焙宝典&无添加剂',
+					'无添加剂6'
+				],
+				foundList: [
+					'烘焙宝典1',
+					'烘焙宝典2',
+					'烘焙宝典3',
+					'烘焙宝典4',
+					'烘焙宝典&无添加剂',
+					'无添加剂5'
+				]
+			}
+		},
+		onLoad() {
+			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+			this.searchBarTop = menuButtonInfo.top;
+			this.searchBarHeight = menuButtonInfo.height;
+		},
+		methods: {
+			goSearch(param) {
+				if (!param) {
+					toast.warn('请输入搜索内容')
+					return
+				}
+				this.queryParam = param
+				const index = this.recentRecordList.findIndex(item => {
+					return item === param
+				})
+				if(index > -1) {
+					this.recentRecordList.splice(index, 1)
+				}
+				this.recentRecordList.unshift(param)
+			},
+			goBack() {
+				uni.navigateBack()
+			},
+			recentSearch(obj) {
+				this.queryParam = obj
+				console.log(obj)
+			},
+			clearRecentSearch() {
+				this.recentRecordList = []
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.top-search {
+		position: relative;
+	}
+
+	.recent-search {
+		.title {
+			padding: 32rpx 10rpx;
+			display: flex;
+			justify-content: space-between;
+			.title-text {
+				font-size: 32rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #3E3E3E;
+				line-height: 42rpx;
+			}
+		}
+		.recent-record {
+			.empty-record {
+				font-size: 28rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #666666;
+				line-height: 28rpx;
+				text-align: center;
+			}
+			.no-empty-record {
+				display: flex;
+				flex-wrap: wrap;
+				padding: 0 10rpx;
+				.tag-item {
+					margin: 0 20rpx 20rpx 0;
+				}
+			}
+		}
+	}
+	.search-found {
+		.title {
+			padding: 32rpx 10rpx;
+			.title-text {
+				font-size: 32rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #3E3E3E;
+				line-height: 42rpx;
+			}
+		}
+		.found-record {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 0 10rpx;
+			.tag-item {
+				margin: 0 20rpx 20rpx 0;
+			}
+		}
+	}
+</style>
diff --git a/static/category/fl_icon_qb.png b/static/category/fl_icon_qb.png
new file mode 100644
index 0000000..29be830
Binary files /dev/null and b/static/category/fl_icon_qb.png differ
diff --git a/static/category/fl_icon_xl.png b/static/category/fl_icon_xl.png
new file mode 100644
index 0000000..005bedc
Binary files /dev/null and b/static/category/fl_icon_xl.png differ
diff --git a/static/category/sy_icon_cy.png b/static/category/sy_icon_cy.png
new file mode 100644
index 0000000..a2acfcd
Binary files /dev/null and b/static/category/sy_icon_cy.png differ
diff --git a/static/category/sy_icon_gs.png b/static/category/sy_icon_gs.png
new file mode 100644
index 0000000..8f44e63
Binary files /dev/null and b/static/category/sy_icon_gs.png differ
diff --git a/static/category/sy_icon_hp.png b/static/category/sy_icon_hp.png
new file mode 100644
index 0000000..48dee17
Binary files /dev/null and b/static/category/sy_icon_hp.png differ
diff --git a/static/category/sy_icon_hz.png b/static/category/sy_icon_hz.png
new file mode 100644
index 0000000..c97a1bd
Binary files /dev/null and b/static/category/sy_icon_hz.png differ
diff --git a/static/category/sy_icon_ls.png b/static/category/sy_icon_ls.png
new file mode 100644
index 0000000..06e04a0
Binary files /dev/null and b/static/category/sy_icon_ls.png differ
diff --git a/static/category/sy_icon_np.png b/static/category/sy_icon_np.png
new file mode 100644
index 0000000..862c400
Binary files /dev/null and b/static/category/sy_icon_np.png differ
diff --git a/static/category/sy_icon_rs.png b/static/category/sy_icon_rs.png
new file mode 100644
index 0000000..bc436ed
Binary files /dev/null and b/static/category/sy_icon_rs.png differ
diff --git a/static/category/sy_icon_sj.png b/static/category/sy_icon_sj.png
new file mode 100644
index 0000000..6d98d0d
Binary files /dev/null and b/static/category/sy_icon_sj.png differ
diff --git a/static/category/sy_icon_tw.png b/static/category/sy_icon_tw.png
new file mode 100644
index 0000000..b36813d
Binary files /dev/null and b/static/category/sy_icon_tw.png differ
diff --git a/static/category/sy_icon_yp.png b/static/category/sy_icon_yp.png
new file mode 100644
index 0000000..7ed9d2a
Binary files /dev/null and b/static/category/sy_icon_yp.png differ